From c99b4a96c49190df990982820373cb7ccdb5d329 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:33:31 +1300
Subject: [PATCH 01/86] Fix saving issue caused by using isNew instead of
 getIsNew

---
 .../packages/media/media/workspace/media-workspace.context.ts   | 2 +-
 .../member-types/workspace/member-type-workspace.context.ts     | 2 +-
 .../relation-types/workspace/relation-type-workspace.context.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
index 1b0575f358..5e16bf4685 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
@@ -69,7 +69,7 @@ export class UmbMediaWorkspaceContext
 
 	async save() {
 		if (!this.#data.value) return;
-		if (this.isNew) {
+		if (this.getIsNew()) {
 			await this.repository.create(this.#data.value);
 		} else {
 			await this.repository.save(this.#data.value.id, this.#data.value);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/workspace/member-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/workspace/member-type-workspace.context.ts
index ee32cbdaf9..e40e02d3a0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/workspace/member-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/workspace/member-type-workspace.context.ts
@@ -60,7 +60,7 @@ export class UmbMemberTypeWorkspaceContext
 		if (!this.#data.value) return;
 		if (!this.#data.value.id) return;
 
-		if (this.isNew) {
+		if (this.getIsNew()) {
 			await this.repository.create(this.#data.value);
 		} else {
 			await this.repository.save(this.#data.value.id, this.#data.value);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
index b28d8568d8..f11f17debf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
@@ -57,7 +57,7 @@ export class UmbRelationTypeWorkspaceContext
 		if (!this.#data.value) return;
 		if (!this.#data.value.id) return;
 
-		if (this.isNew) {
+		if (this.getIsNew()) {
 			await this.repository.create(this.#data.value);
 		} else {
 			await this.repository.save(this.#data.value.id, this.#data.value);

From e93ea1fb44f739acc6dd91f870a9e48222db381f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:46:24 +1300
Subject: [PATCH 02/86] add create action

---
 .../entity-actions/create.action.ts           | 15 ++++++++
 .../entity-actions/manifests.ts               | 35 +++++++++++++++++++
 .../packages/settings/relation-types/index.ts |  1 +
 .../settings/relation-types/manifests.ts      |  9 ++++-
 4 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
new file mode 100644
index 0000000000..64bbdf7a1f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
@@ -0,0 +1,15 @@
+import { UmbRelationTypeRepository } from '../repository/relation-type.repository.js';
+import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbCreateRelationTypeEntityAction extends UmbEntityActionBase<UmbRelationTypeRepository> {
+	// TODO: Could EntityActions take the manifest instead, for more flexibility?
+	constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
+		super(host, repositoryAlias, unique);
+	}
+
+	async execute() {
+		// TODO: Generate the href or retrieve it from something?
+		history.pushState(null, '', `section/settings/workspace/relation-type/create`);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
new file mode 100644
index 0000000000..4dd71b899c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
@@ -0,0 +1,35 @@
+import { UMB_RELATION_TYPE_REPOSITORY_ALIAS } from '../repository/manifests.js';
+import { UMB_RELATION_TYPE_ENTITY_TYPE, UMB_RELATION_TYPE_ROOT_ENTITY_TYPE } from '../index.js';
+import { UmbCreateRelationTypeEntityAction } from './create.action.js';
+import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action';
+import { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry';
+
+const entityActions: Array<ManifestEntityAction> = [
+	{
+		type: 'entityAction',
+		alias: 'Umb.EntityAction.RelationType.Delete',
+		name: 'Delete RelationType Entity Action',
+		api: UmbDeleteEntityAction,
+		meta: {
+			repositoryAlias: UMB_RELATION_TYPE_REPOSITORY_ALIAS,
+			icon: 'icon-trash',
+			label: 'Delete',
+			entityTypes: [UMB_RELATION_TYPE_ENTITY_TYPE],
+		},
+	},
+	{
+		type: 'entityAction',
+		alias: 'Umb.EntityAction.RelationType.Create',
+		name: 'Create RelationType Entity Action',
+		weight: 900,
+		api: UmbCreateRelationTypeEntityAction,
+		meta: {
+			icon: 'icon-add',
+			label: 'Create',
+			repositoryAlias: UMB_RELATION_TYPE_REPOSITORY_ALIAS,
+			entityTypes: [UMB_RELATION_TYPE_ROOT_ENTITY_TYPE],
+		},
+	},
+];
+
+export const manifests = [...entityActions];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/index.ts
index 3d76f338dd..7bbcc83722 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/index.ts
@@ -1 +1,2 @@
 export * from './repository/index.js';
+export * from './entities.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/manifests.ts
index ebc952eb39..12f1863639 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/manifests.ts
@@ -2,5 +2,12 @@ import { manifests as repositoryManifests } from './repository/manifests.js';
 import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { manifests as entityActionManifests } from './entity-actions/manifests.js';
 
-export const manifests = [...repositoryManifests, ...menuItemManifests, ...treeManifests, ...workspaceManifests];
+export const manifests = [
+	...repositoryManifests,
+	...menuItemManifests,
+	...treeManifests,
+	...workspaceManifests,
+	...entityActionManifests,
+];

From 543c37c48aae90618783e95f153d6d27a96f1059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:02:07 +1300
Subject: [PATCH 03/86] fix create action

---
 .../settings/relation-types/entity-actions/create.action.ts     | 2 +-
 .../settings/relation-types/entity-actions/manifests.ts         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
index 64bbdf7a1f..8a03974269 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
@@ -10,6 +10,6 @@ export class UmbCreateRelationTypeEntityAction extends UmbEntityActionBase<UmbRe
 
 	async execute() {
 		// TODO: Generate the href or retrieve it from something?
-		history.pushState(null, '', `section/settings/workspace/relation-type/create`);
+		history.pushState(null, '', `section/settings/workspace/relation-type/create/${this.unique ?? null}`);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
index 4dd71b899c..b21d989f7c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
@@ -27,7 +27,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			icon: 'icon-add',
 			label: 'Create',
 			repositoryAlias: UMB_RELATION_TYPE_REPOSITORY_ALIAS,
-			entityTypes: [UMB_RELATION_TYPE_ROOT_ENTITY_TYPE],
+			entityTypes: [UMB_RELATION_TYPE_ROOT_ENTITY_TYPE, UMB_RELATION_TYPE_ENTITY_TYPE],
 		},
 	},
 ];

From 2419a8c96cbd297ea8d17d81ecaa18904f3c9f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:02:20 +1300
Subject: [PATCH 04/86] add id to scaffold

---
 .../repository/sources/relation-type.server.data.ts          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
index d9af0eff76..97d652fe33 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
@@ -7,6 +7,7 @@ import {
 } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+import { UmbId } from '@umbraco-cms/backoffice/id';
 
 /**
  * A data source for the Relation Type that fetches data from the server
@@ -55,7 +56,9 @@ export class UmbRelationTypeServerDataSource
 	 * @memberof UmbRelationTypeServerDataSource
 	 */
 	async createScaffold(parentId: string | null) {
-		const data: RelationTypeResponseModel = {};
+		const data: RelationTypeResponseModel = {
+			id: UmbId.new(),
+		};
 
 		return { data };
 	}

From 1d66d06199af8374c1661fa686a7c21ec193d5fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:02:44 +1300
Subject: [PATCH 05/86] use isNew in workspace view

---
 .../relation-type-workspace-view-relation-type.element.ts   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
index 323756f826..2dc63e727a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
@@ -75,13 +75,15 @@ export class UmbRelationTypeWorkspaceViewRelationTypeElement extends UmbLitEleme
 	}
 
 	#renderParentProperty() {
-		if (this._relationType?.id) return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
+		if (!this.#workspaceContext?.getIsNew() && this._relationType)
+			return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
 
 		return html`<uui-select slot="editor"></uui-select>`;
 	}
 
 	#renderChildProperty() {
-		if (this._relationType?.id) return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
+		if (!this.#workspaceContext?.getIsNew() && this._relationType)
+			return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
 
 		return html`<uui-select slot="editor"></uui-select>`;
 	}

From 7778669f08585f58e343b65596123ad689475532 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:55:08 +1300
Subject: [PATCH 06/86] more scaffolding

---
 .../repository/sources/relation-type.server.data.ts           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
index 97d652fe33..ced4b404f6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
@@ -58,6 +58,10 @@ export class UmbRelationTypeServerDataSource
 	async createScaffold(parentId: string | null) {
 		const data: RelationTypeResponseModel = {
 			id: UmbId.new(),
+			name: '',
+			alias: '',
+			isBidirectional: false,
+			isDependency: false,
 		};
 
 		return { data };

From 0ea6d2a49688bec5c2ea13c41b34e6f79ba92748 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:29:40 +1300
Subject: [PATCH 07/86] don't refresh page with new id unless the save worked

---
 .../workspace/relation-type-workspace.context.ts          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
index f11f17debf..05f75db876 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
@@ -57,12 +57,16 @@ export class UmbRelationTypeWorkspaceContext
 		if (!this.#data.value) return;
 		if (!this.#data.value.id) return;
 
+		let response = undefined;
+
 		if (this.getIsNew()) {
-			await this.repository.create(this.#data.value);
+			response = await this.repository.create(this.#data.value);
 		} else {
-			await this.repository.save(this.#data.value.id, this.#data.value);
+			response = await this.repository.save(this.#data.value.id, this.#data.value);
 		}
 
+		if (response.error) return;
+
 		// If it went well, then its not new anymore?.
 		this.setIsNew(false);
 	}

From 587410d06ae60b9286e301f90d7e14a33447cb8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:30:02 +1300
Subject: [PATCH 08/86] add selects to set the object types

---
 ...pe-workspace-view-relation-type.element.ts | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
index 2dc63e727a..624f522a20 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
@@ -3,6 +3,7 @@ import {
 	UUIBooleanInputEvent,
 	UUIRadioGroupElement,
 	UUIRadioGroupEvent,
+	UUISelectEvent,
 	UUIToggleElement,
 } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
@@ -74,18 +75,56 @@ export class UmbRelationTypeWorkspaceViewRelationTypeElement extends UmbLitEleme
 		`;
 	}
 
+	#onParentObjectTypeChange(event: UUISelectEvent) {
+		const value = event.target.value as string;
+		this.#workspaceContext?.update('parentObjectType', value);
+	}
+	#onChildObjectTypeChange(event: UUISelectEvent) {
+		const value = event.target.value as string;
+		this.#workspaceContext?.update('childObjectType', value);
+	}
+
 	#renderParentProperty() {
 		if (!this.#workspaceContext?.getIsNew() && this._relationType)
 			return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
 
-		return html`<uui-select slot="editor"></uui-select>`;
+		//TODO Get the actual list of object types
+		return html`<uui-select
+			slot="editor"
+			@change=${this.#onParentObjectTypeChange}
+			.options=${[
+				{
+					name: 'Document',
+					value: 'c66ba18e-eaf3-4cff-8a22-41b16d66a972',
+				},
+				{
+					name: 'Media',
+					value: 'b796f64c-1f99-4ffb-b886-4bf4bc011a9c',
+				},
+			]}>
+			></uui-select
+		>`;
 	}
 
 	#renderChildProperty() {
 		if (!this.#workspaceContext?.getIsNew() && this._relationType)
 			return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
 
-		return html`<uui-select slot="editor"></uui-select>`;
+		//TODO Get the actual list of object types
+		return html`<uui-select
+			slot="editor"
+			@change=${this.#onChildObjectTypeChange}
+			.options=${[
+				{
+					name: 'Document',
+					value: 'c66ba18e-eaf3-4cff-8a22-41b16d66a972',
+				},
+				{
+					name: 'Media',
+					value: 'b796f64c-1f99-4ffb-b886-4bf4bc011a9c',
+				},
+			]}>
+		</uui-select>`;
 	}
 
 	static styles = [

From 790be6e68b279b660c70ccc456f51d3bb62f59d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 16:30:37 +1300
Subject: [PATCH 09/86] only show create at the root

---
 .../settings/relation-types/entity-actions/manifests.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
index b21d989f7c..4dd71b899c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
@@ -27,7 +27,7 @@ const entityActions: Array<ManifestEntityAction> = [
 			icon: 'icon-add',
 			label: 'Create',
 			repositoryAlias: UMB_RELATION_TYPE_REPOSITORY_ALIAS,
-			entityTypes: [UMB_RELATION_TYPE_ROOT_ENTITY_TYPE, UMB_RELATION_TYPE_ENTITY_TYPE],
+			entityTypes: [UMB_RELATION_TYPE_ROOT_ENTITY_TYPE],
 		},
 	},
 ];

From ccf8deacf76018de1228d7cf2b9e373495164d8f Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Sat, 16 Dec 2023 09:54:51 +0100
Subject: [PATCH 10/86] build(deps): update deps

---
 src/Umbraco.Web.UI.Client/package-lock.json   | 313 +++++-------------
 src/Umbraco.Web.UI.Client/package.json        |  22 +-
 .../public/mockServiceWorker.js               |   2 +-
 3 files changed, 95 insertions(+), 242 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 04f735e015..44f780f893 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -10,20 +10,20 @@
 			"license": "MIT",
 			"dependencies": {
 				"@openid/appauth": "^1.3.1",
-				"@types/dompurify": "^3.0.4",
-				"@types/uuid": "^9.0.2",
+				"@types/dompurify": "^3.0.5",
+				"@types/uuid": "^9.0.7",
 				"@umbraco-ui/uui": "1.6.0-rc.3",
 				"@umbraco-ui/uui-css": "1.6.0-rc.3",
 				"dompurify": "^3.0.6",
-				"element-internals-polyfill": "^1.3.7",
+				"element-internals-polyfill": "^1.3.9",
 				"lit": "^2.8.0",
 				"lodash-es": "4.17.21",
-				"marked": "^9.1.0",
-				"monaco-editor": "^0.44.0",
+				"marked": "^11.1.0",
+				"monaco-editor": "^0.45.0",
 				"rxjs": "^7.8.1",
-				"tinymce": "^6.7.3",
-				"tinymce-i18n": "^23.8.7",
-				"uuid": "^9.0.0"
+				"tinymce": "^6.8.2",
+				"tinymce-i18n": "^23.12.4",
+				"uuid": "^9.0.1"
 			},
 			"devDependencies": {
 				"@babel/core": "^7.22.17",
@@ -61,9 +61,9 @@
 				"eslint-plugin-storybook": "^0.6.15",
 				"eslint-plugin-wc": "^2.0.4",
 				"lucide-static": "^0.290.0",
-				"msw": "^1.2.3",
+				"msw": "^1.3.2",
 				"openapi-typescript-codegen": "^0.25.0",
-				"playwright-msw": "^3.0.0",
+				"playwright-msw": "^3.0.1",
 				"plop": "^4.0.0",
 				"prettier": "3.0.3",
 				"react": "^18.2.0",
@@ -81,7 +81,7 @@
 				"vite": "^4.4.12",
 				"vite-plugin-static-copy": "^0.17.0",
 				"vite-tsconfig-paths": "^4.2.0",
-				"web-component-analyzer": "^2.0.0-next.5"
+				"web-component-analyzer": "^2.0.0"
 			},
 			"engines": {
 				"node": ">=20.9 <21",
@@ -3142,16 +3142,16 @@
 			}
 		},
 		"node_modules/@mswjs/interceptors": {
-			"version": "0.17.9",
-			"resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.17.9.tgz",
-			"integrity": "sha512-4LVGt03RobMH/7ZrbHqRxQrS9cc2uh+iNKSj8UWr8M26A2i793ju+csaB5zaqYltqJmA2jUq4VeYfKmVqvsXQg==",
+			"version": "0.17.10",
+			"resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.17.10.tgz",
+			"integrity": "sha512-N8x7eSLGcmUFNWZRxT1vsHvypzIRgQYdG0rJey/rZCy6zT/30qDt8Joj7FxzGNLSwXbeZqJOMqDurp7ra4hgbw==",
 			"dev": true,
 			"dependencies": {
 				"@open-draft/until": "^1.0.3",
 				"@types/debug": "^4.1.7",
 				"@xmldom/xmldom": "^0.8.3",
 				"debug": "^4.3.3",
-				"headers-polyfill": "^3.1.0",
+				"headers-polyfill": "3.2.5",
 				"outvariant": "^1.2.1",
 				"strict-event-emitter": "^0.2.4",
 				"web-encoding": "^1.1.5"
@@ -6758,9 +6758,9 @@
 			"dev": true
 		},
 		"node_modules/@types/dompurify": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.4.tgz",
-			"integrity": "sha512-1Jk8S/IRzNSbwQRbuGuLFHviwxQ8pX81ZEW3INY9432Cwb4VedkBYan8gSIXVLOLHBtimOmUTEYphjRVmo+30g==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+			"integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
 			"dependencies": {
 				"@types/trusted-types": "*"
 			}
@@ -7156,9 +7156,9 @@
 			"dev": true
 		},
 		"node_modules/@types/uuid": {
-			"version": "9.0.2",
-			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz",
-			"integrity": "sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ=="
+			"version": "9.0.7",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz",
+			"integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g=="
 		},
 		"node_modules/@types/ws": {
 			"version": "7.4.7",
@@ -9779,9 +9779,9 @@
 			}
 		},
 		"node_modules/@xmldom/xmldom": {
-			"version": "0.8.7",
-			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.7.tgz",
-			"integrity": "sha512-sI1Ly2cODlWStkINzqGrZ8K6n+MTSbAeQnAipGyL+KZCXuHaRlj2gyyy8B/9MvsFFqN7XHryQnB2QwhzvJXovg==",
+			"version": "0.8.10",
+			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+			"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"
@@ -11658,15 +11658,6 @@
 				}
 			}
 		},
-		"node_modules/decamelize": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/decode-named-character-reference": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -12123,9 +12114,9 @@
 			"dev": true
 		},
 		"node_modules/element-internals-polyfill": {
-			"version": "1.3.7",
-			"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.3.7.tgz",
-			"integrity": "sha512-sM3tzpNW3nEE8l0m7EbRsWCF6tiqHipON7Vqu3LJtuU2IFNOnFTO0djAGcLVO/KvIUCqnOZrugg9jBTSlYjPMg=="
+			"version": "1.3.9",
+			"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.3.9.tgz",
+			"integrity": "sha512-ti2fHL8rXbz5/pu50Nu45EXvORWtx1g1xWUQuZORkszbvCxosPEeHDeGzfvaaooXJNXNblogMP4atl680r9WyQ=="
 		},
 		"node_modules/emoji-regex": {
 			"version": "10.2.1",
@@ -14292,9 +14283,9 @@
 			}
 		},
 		"node_modules/headers-polyfill": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.2.tgz",
-			"integrity": "sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==",
+			"version": "3.2.5",
+			"resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.2.5.tgz",
+			"integrity": "sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==",
 			"dev": true
 		},
 		"node_modules/homedir-polyfill": {
@@ -16472,14 +16463,14 @@
 			}
 		},
 		"node_modules/marked": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/marked/-/marked-9.1.0.tgz",
-			"integrity": "sha512-VZjm0PM5DMv7WodqOUps3g6Q7dmxs9YGiFUZ7a2majzQTTCgX+6S6NAJHPvOhgFBzYz8s4QZKWWMfZKFmsfOgA==",
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-11.1.0.tgz",
+			"integrity": "sha512-fvKJWAPEafVj1dwGwcPI5mBB/0pvViL6NlCbNDG1HOIRwwAU/jeMoFxfbRLuirO1wRH7m4yPvBqD/O1wyWvayw==",
 			"bin": {
 				"marked": "bin/marked.js"
 			},
 			"engines": {
-				"node": ">= 16"
+				"node": ">= 18"
 			}
 		},
 		"node_modules/marky": {
@@ -17459,9 +17450,9 @@
 			"dev": true
 		},
 		"node_modules/monaco-editor": {
-			"version": "0.44.0",
-			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz",
-			"integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q=="
+			"version": "0.45.0",
+			"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.45.0.tgz",
+			"integrity": "sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA=="
 		},
 		"node_modules/mri": {
 			"version": "1.2.0",
@@ -17479,22 +17470,22 @@
 			"dev": true
 		},
 		"node_modules/msw": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/msw/-/msw-1.2.3.tgz",
-			"integrity": "sha512-Fqy/TaLKR32x4IkMwudJHJysBzVM/v/lSoMPS9f3QaHLOmb3xHN9YurSUnRt+2eEvNXLjVPij1wMBQtLmTbKsg==",
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/msw/-/msw-1.3.2.tgz",
+			"integrity": "sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@mswjs/cookies": "^0.2.2",
-				"@mswjs/interceptors": "^0.17.5",
+				"@mswjs/interceptors": "^0.17.10",
 				"@open-draft/until": "^1.0.3",
 				"@types/cookie": "^0.4.1",
 				"@types/js-levenshtein": "^1.1.1",
-				"chalk": "4.1.1",
+				"chalk": "^4.1.1",
 				"chokidar": "^3.4.2",
 				"cookie": "^0.4.2",
-				"graphql": "^15.0.0 || ^16.0.0",
-				"headers-polyfill": "^3.1.2",
+				"graphql": "^16.8.1",
+				"headers-polyfill": "3.2.5",
 				"inquirer": "^8.2.0",
 				"is-node-process": "^1.2.0",
 				"js-levenshtein": "^1.1.6",
@@ -17516,7 +17507,7 @@
 				"url": "https://opencollective.com/mswjs"
 			},
 			"peerDependencies": {
-				"typescript": ">= 4.4.x <= 5.1.x"
+				"typescript": ">= 4.4.x <= 5.2.x"
 			},
 			"peerDependenciesMeta": {
 				"typescript": {
@@ -18428,9 +18419,9 @@
 			}
 		},
 		"node_modules/outvariant": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
-			"integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.2.tgz",
+			"integrity": "sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==",
 			"dev": true
 		},
 		"node_modules/p-limit": {
@@ -18841,9 +18832,9 @@
 			}
 		},
 		"node_modules/playwright-msw": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/playwright-msw/-/playwright-msw-3.0.0.tgz",
-			"integrity": "sha512-AsxozFPFI16d1oop4yuaSKIonAQm3BpCnXWGdooDmaGlGsMpB4IndU+v+9FDZ9HrKLBK5XK2h2fTKoZsTSzXUg==",
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/playwright-msw/-/playwright-msw-3.0.1.tgz",
+			"integrity": "sha512-w2bVjt7kPIThOQF9OS/1vDDs0HsQfV9inxMVSUv74x/zhCcrgzVN47xpPk84okf3OcCRHHBJKq8sNeBfCDyhMg==",
 			"dev": true,
 			"dependencies": {
 				"@mswjs/cookies": "^1.1.0",
@@ -19843,12 +19834,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/require-main-filename": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-			"dev": true
-		},
 		"node_modules/requireindex": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
@@ -20335,12 +20320,6 @@
 				"node": ">= 0.8.0"
 			}
 		},
-		"node_modules/set-blocking": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-			"dev": true
-		},
 		"node_modules/set-cookie-parser": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@@ -21245,14 +21224,14 @@
 			"dev": true
 		},
 		"node_modules/tinymce": {
-			"version": "6.7.3",
-			"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.7.3.tgz",
-			"integrity": "sha512-J7WmYIi/gt1RvZ6Ap2oQiUjzAoiS9pfV+d4GnKuZuPu8agmlAEAInNmMvMjfCNBzHv4JnZXY7qlHUAI0IuYQVA=="
+			"version": "6.8.2",
+			"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.8.2.tgz",
+			"integrity": "sha512-Lho79o2Y1Yn+XdlTEkHTEkEmzwYWTXz7IUsvPwxJF3VTtgHUIAAuBab29kik+f2KED3rZvQavr9D7sHVMJ9x4A=="
 		},
 		"node_modules/tinymce-i18n": {
-			"version": "23.8.7",
-			"resolved": "https://registry.npmjs.org/tinymce-i18n/-/tinymce-i18n-23.8.7.tgz",
-			"integrity": "sha512-VIWuHdwzWFJzHxOLd5Ao7Fj/W2fKajQxI5dzJc2M2k6l0LCTtfnGQkK47ADlU7Yttqbd1QlcJt1yfi957/EAtw=="
+			"version": "23.12.4",
+			"resolved": "https://registry.npmjs.org/tinymce-i18n/-/tinymce-i18n-23.12.4.tgz",
+			"integrity": "sha512-EIbYrJBasx7T2iZxJ2jQT1xz0ET+PKi/Fzv6KPte0suu1MrCVBYw3Thsne1TCzPbcashajevmFX5z2wQlXqssQ=="
 		},
 		"node_modules/title-case": {
 			"version": "3.0.3",
@@ -22108,9 +22087,13 @@
 			}
 		},
 		"node_modules/uuid": {
-			"version": "9.0.0",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-			"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
 			"bin": {
 				"uuid": "dist/bin/uuid"
 			}
@@ -22749,174 +22732,50 @@
 			}
 		},
 		"node_modules/web-component-analyzer": {
-			"version": "2.0.0-next.5",
-			"resolved": "https://registry.npmjs.org/web-component-analyzer/-/web-component-analyzer-2.0.0-next.5.tgz",
-			"integrity": "sha512-QaQwuwFaBuwc7RwX0KdR9bc57s9Jqj+PcekIt3c7WXRY4vGOr/rjyG8YWuT2R7KmGBh+KrCdY/KynMlWRCVR3w==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/web-component-analyzer/-/web-component-analyzer-2.0.0.tgz",
+			"integrity": "sha512-UEvwfpD+XQw99sLKiH5B1T4QwpwNyWJxp59cnlRwFfhUW6JsQpw5jMeMwi7580sNou8YL3kYoS7BWLm+yJ/jVQ==",
 			"dev": true,
 			"dependencies": {
 				"fast-glob": "^3.2.2",
 				"ts-simple-type": "2.0.0-next.0",
-				"typescript": "~4.4.3",
-				"yargs": "^15.3.1"
+				"typescript": "~5.2.0",
+				"yargs": "^17.7.2"
 			},
 			"bin": {
 				"wca": "cli.js",
 				"web-component-analyzer": "cli.js"
 			}
 		},
-		"node_modules/web-component-analyzer/node_modules/ansi-styles": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-			"dev": true,
-			"dependencies": {
-				"color-convert": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/camelcase": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/cliui": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-			"dev": true,
-			"dependencies": {
-				"string-width": "^4.2.0",
-				"strip-ansi": "^6.0.0",
-				"wrap-ansi": "^6.2.0"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/find-up": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-			"dev": true,
-			"dependencies": {
-				"locate-path": "^5.0.0",
-				"path-exists": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/locate-path": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-			"dev": true,
-			"dependencies": {
-				"p-locate": "^4.1.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/p-limit": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-			"dev": true,
-			"dependencies": {
-				"p-try": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/p-locate": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-			"dev": true,
-			"dependencies": {
-				"p-limit": "^2.2.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/web-component-analyzer/node_modules/typescript": {
-			"version": "4.4.4",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
-			"integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+			"integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
 			"dev": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
 			},
 			"engines": {
-				"node": ">=4.2.0"
+				"node": ">=14.17"
 			}
 		},
-		"node_modules/web-component-analyzer/node_modules/wrap-ansi": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^4.0.0",
-				"string-width": "^4.1.0",
-				"strip-ansi": "^6.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/y18n": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-			"dev": true
-		},
 		"node_modules/web-component-analyzer/node_modules/yargs": {
-			"version": "15.4.1",
-			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
 			"dev": true,
 			"dependencies": {
-				"cliui": "^6.0.0",
-				"decamelize": "^1.2.0",
-				"find-up": "^4.1.0",
-				"get-caller-file": "^2.0.1",
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
 				"require-directory": "^2.1.1",
-				"require-main-filename": "^2.0.0",
-				"set-blocking": "^2.0.0",
-				"string-width": "^4.2.0",
-				"which-module": "^2.0.0",
-				"y18n": "^4.0.0",
-				"yargs-parser": "^18.1.2"
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
 			},
 			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/web-component-analyzer/node_modules/yargs-parser": {
-			"version": "18.1.3",
-			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-			"dev": true,
-			"dependencies": {
-				"camelcase": "^5.0.0",
-				"decamelize": "^1.2.0"
-			},
-			"engines": {
-				"node": ">=6"
+				"node": ">=12"
 			}
 		},
 		"node_modules/web-encoding": {
@@ -23014,12 +22873,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/which-module": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-			"dev": true
-		},
 		"node_modules/which-typed-array": {
 			"version": "1.1.13",
 			"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 1e6703e537..f3df7fa2e0 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -135,20 +135,20 @@
 	},
 	"dependencies": {
 		"@openid/appauth": "^1.3.1",
-		"@types/dompurify": "^3.0.4",
-		"@types/uuid": "^9.0.2",
+		"@types/dompurify": "^3.0.5",
+		"@types/uuid": "^9.0.7",
 		"@umbraco-ui/uui": "1.6.0-rc.3",
 		"@umbraco-ui/uui-css": "1.6.0-rc.3",
 		"dompurify": "^3.0.6",
-		"element-internals-polyfill": "^1.3.7",
+		"element-internals-polyfill": "^1.3.9",
 		"lit": "^2.8.0",
 		"lodash-es": "4.17.21",
-		"marked": "^9.1.0",
-		"monaco-editor": "^0.44.0",
+		"marked": "^11.1.0",
+		"monaco-editor": "^0.45.0",
 		"rxjs": "^7.8.1",
-		"tinymce-i18n": "^23.8.7",
-		"tinymce": "^6.7.3",
-		"uuid": "^9.0.0"
+		"tinymce-i18n": "^23.12.4",
+		"tinymce": "^6.8.2",
+		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.17",
@@ -186,9 +186,9 @@
 		"eslint-plugin-wc": "^2.0.4",
 		"eslint": "^8.56.0",
 		"lucide-static": "^0.290.0",
-		"msw": "^1.2.3",
+		"msw": "^1.3.2",
 		"openapi-typescript-codegen": "^0.25.0",
-		"playwright-msw": "^3.0.0",
+		"playwright-msw": "^3.0.1",
 		"plop": "^4.0.0",
 		"prettier": "3.0.3",
 		"react-dom": "^18.2.0",
@@ -206,7 +206,7 @@
 		"vite-plugin-static-copy": "^0.17.0",
 		"vite-tsconfig-paths": "^4.2.0",
 		"vite": "^4.4.12",
-		"web-component-analyzer": "^2.0.0-next.5"
+		"web-component-analyzer": "^2.0.0"
 	},
 	"msw": {
 		"workerDirectory": "public"
diff --git a/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js b/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js
index 36a9927457..51d85eeebf 100644
--- a/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js
+++ b/src/Umbraco.Web.UI.Client/public/mockServiceWorker.js
@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.3).
+ * Mock Service Worker (1.3.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

From 7c2cca577cb8bb0ae5423effa975b5834a18a877 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Sat, 16 Dec 2023 09:57:44 +0100
Subject: [PATCH 11/86] set marked to string

---
 .../components/input-markdown-editor/input-markdown.element.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
index b0b7abe0c5..22ebd381df 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
@@ -554,7 +554,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	renderPreview(markdown: string) {
-		const markdownAsHtml = marked.parse(markdown);
+		const markdownAsHtml = marked.parse(markdown) as string;
 		const sanitizedHtml = markdownAsHtml ? DOMPurify.sanitize(markdownAsHtml) : '';
 		return html`<uui-scroll-container id="preview"> ${unsafeHTML(sanitizedHtml)} </uui-scroll-container>`;
 	}

From ac0fc7984402185b260be51b87b6e42889deafdb Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Sat, 16 Dec 2023 10:56:37 +0100
Subject: [PATCH 12/86] build(deps-dev): bump vite from 4 to 5

---
 src/Umbraco.Web.UI.Client/package-lock.json   | 827 +++++++-----------
 src/Umbraco.Web.UI.Client/package.json        |  29 +-
 .../src/external/monaco-editor/index.ts       |   2 +-
 .../src/rollup.config.js                      |  10 +-
 .../src/tsconfig.build.json                   |   2 +-
 src/Umbraco.Web.UI.Client/tsconfig.json       |  23 +-
 6 files changed, 334 insertions(+), 559 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 44f780f893..9fa20c3348 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -33,6 +33,7 @@
 				"@rollup/plugin-commonjs": "^25.0.7",
 				"@rollup/plugin-json": "^6.1.0",
 				"@rollup/plugin-node-resolve": "^15.2.3",
+				"@rollup/plugin-replace": "^5.0.5",
 				"@storybook/addon-a11y": "7.6.5",
 				"@storybook/addon-actions": "7.6.5",
 				"@storybook/addon-essentials": "7.6.5",
@@ -45,9 +46,9 @@
 				"@types/mocha": "^10.0.1",
 				"@typescript-eslint/eslint-plugin": "^6.14.0",
 				"@typescript-eslint/parser": "^6.14.0",
-				"@web/dev-server-esbuild": "^0.4.1",
-				"@web/dev-server-import-maps": "^0.1.1",
-				"@web/dev-server-rollup": "^0.6.0",
+				"@web/dev-server-esbuild": "^1.0.1",
+				"@web/dev-server-import-maps": "^0.2.0",
+				"@web/dev-server-rollup": "^0.6.1",
 				"@web/test-runner": "^0.18.0",
 				"@web/test-runner-playwright": "^0.11.0",
 				"babel-loader": "^9.1.3",
@@ -78,9 +79,9 @@
 				"tsc-alias": "^1.8.8",
 				"typescript": "^5.3.2",
 				"typescript-json-schema": "^0.62.0",
-				"vite": "^4.4.12",
-				"vite-plugin-static-copy": "^0.17.0",
-				"vite-tsconfig-paths": "^4.2.0",
+				"vite": "^5.0.10",
+				"vite-plugin-static-copy": "^1.0.0",
+				"vite-tsconfig-paths": "^4.2.2",
 				"web-component-analyzer": "^2.0.0"
 			},
 			"engines": {
@@ -2129,9 +2130,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
-			"integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
+			"integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
 			"cpu": [
 				"arm"
 			],
@@ -2145,9 +2146,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
-			"integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
+			"integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -2161,9 +2162,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
-			"integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
+			"integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
 			"cpu": [
 				"x64"
 			],
@@ -2177,9 +2178,9 @@
 			}
 		},
 		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
-			"integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
+			"integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
 			"cpu": [
 				"arm64"
 			],
@@ -2193,9 +2194,9 @@
 			}
 		},
 		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
-			"integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
+			"integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
 			"cpu": [
 				"x64"
 			],
@@ -2209,9 +2210,9 @@
 			}
 		},
 		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
-			"integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
+			"integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
 			"cpu": [
 				"arm64"
 			],
@@ -2225,9 +2226,9 @@
 			}
 		},
 		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
-			"integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
+			"integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
 			"cpu": [
 				"x64"
 			],
@@ -2241,9 +2242,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-arm": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
-			"integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
+			"integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
 			"cpu": [
 				"arm"
 			],
@@ -2257,9 +2258,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
-			"integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
+			"integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -2273,9 +2274,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
-			"integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
+			"integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
 			"cpu": [
 				"ia32"
 			],
@@ -2289,9 +2290,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
-			"integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
+			"integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
 			"cpu": [
 				"loong64"
 			],
@@ -2305,9 +2306,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
-			"integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
+			"integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
 			"cpu": [
 				"mips64el"
 			],
@@ -2321,9 +2322,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
-			"integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
+			"integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
 			"cpu": [
 				"ppc64"
 			],
@@ -2337,9 +2338,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
-			"integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
+			"integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
 			"cpu": [
 				"riscv64"
 			],
@@ -2353,9 +2354,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
-			"integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
+			"integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
 			"cpu": [
 				"s390x"
 			],
@@ -2369,9 +2370,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-			"integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
+			"integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
 			"cpu": [
 				"x64"
 			],
@@ -2385,9 +2386,9 @@
 			}
 		},
 		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
-			"integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
+			"integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
 			"cpu": [
 				"x64"
 			],
@@ -2401,9 +2402,9 @@
 			}
 		},
 		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
-			"integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
+			"integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
 			"cpu": [
 				"x64"
 			],
@@ -2417,9 +2418,9 @@
 			}
 		},
 		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
-			"integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
+			"integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
 			"cpu": [
 				"x64"
 			],
@@ -2433,9 +2434,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
-			"integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
+			"integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
 			"cpu": [
 				"arm64"
 			],
@@ -2449,9 +2450,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
-			"integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
+			"integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
 			"cpu": [
 				"ia32"
 			],
@@ -2465,9 +2466,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
-			"integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
+			"integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
 			"cpu": [
 				"x64"
 			],
@@ -4124,6 +4125,27 @@
 				}
 			}
 		},
+		"node_modules/@rollup/plugin-replace": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.5.tgz",
+			"integrity": "sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"magic-string": "^0.30.3"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -8786,36 +8808,166 @@
 			}
 		},
 		"node_modules/@web/dev-server-esbuild": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/@web/dev-server-esbuild/-/dev-server-esbuild-0.4.1.tgz",
-			"integrity": "sha512-oUrxo7ggxeaWuQafu5bgiAJFatA+YEeYhgkUMB2CHq/SVleKgyPgQCqx42eVBJ2uWMyI1YWSpKtNueCmocwQzw==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-esbuild/-/dev-server-esbuild-1.0.1.tgz",
+			"integrity": "sha512-EoLLFuv5Y47pqY1IJBcGZswzkqJd+/vN4BDI3oYq8p9dDE9EuQVkC7vweAUkH7vDzI7xUp+f0UzJeQcj9t7zNQ==",
 			"dev": true,
 			"dependencies": {
 				"@mdn/browser-compat-data": "^4.0.0",
-				"@web/dev-server-core": "^0.5.1",
-				"esbuild": "^0.16 || ^0.17",
+				"@web/dev-server-core": "^0.7.0",
+				"esbuild": "^0.19.5",
 				"parse5": "^6.0.1",
 				"ua-parser-js": "^1.0.33"
 			},
 			"engines": {
-				"node": ">=16.0.0"
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/@web/dev-server-core": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
+			"integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
+			"dev": true,
+			"dependencies": {
+				"@types/koa": "^2.11.6",
+				"@types/ws": "^7.4.0",
+				"@web/parse5-utils": "^2.1.0",
+				"chokidar": "^3.4.3",
+				"clone": "^2.1.2",
+				"es-module-lexer": "^1.0.0",
+				"get-stream": "^6.0.0",
+				"is-stream": "^2.0.0",
+				"isbinaryfile": "^5.0.0",
+				"koa": "^2.13.0",
+				"koa-etag": "^4.0.0",
+				"koa-send": "^5.0.1",
+				"koa-static": "^5.0.0",
+				"lru-cache": "^8.0.4",
+				"mime-types": "^2.1.27",
+				"parse5": "^6.0.1",
+				"picomatch": "^2.2.2",
+				"ws": "^7.4.2"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/es-module-lexer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+			"dev": true
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/lru-cache": {
+			"version": "8.0.5",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+			"integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.14"
+			}
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/ws": {
+			"version": "7.5.9",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+			"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/@web/dev-server-import-maps": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/@web/dev-server-import-maps/-/dev-server-import-maps-0.1.1.tgz",
-			"integrity": "sha512-Et/uswWE2K9tFLM2xNArsvoDtFmBPyFrwJRm5O5ls5u0F3ZNE8vXk4kUONakillQ/041uSE30wIfesljl1ZKsg==",
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-import-maps/-/dev-server-import-maps-0.2.0.tgz",
+			"integrity": "sha512-+Z4mNGJqHo370ZFmPl83O4BqpPzQDjprfLO3AwsOZck9x94LcAVmVsC7fnet1DQRR11x9M7FNliS6mmkZv26TQ==",
 			"dev": true,
 			"dependencies": {
 				"@import-maps/resolve": "^1.0.1",
 				"@types/parse5": "^6.0.1",
-				"@web/dev-server-core": "^0.5.1",
-				"@web/parse5-utils": "^2.0.0",
+				"@web/dev-server-core": "^0.7.0",
+				"@web/parse5-utils": "^2.1.0",
 				"parse5": "^6.0.1",
 				"picomatch": "^2.2.2"
 			},
 			"engines": {
-				"node": ">=16.0.0"
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/@web/dev-server-core": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
+			"integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
+			"dev": true,
+			"dependencies": {
+				"@types/koa": "^2.11.6",
+				"@types/ws": "^7.4.0",
+				"@web/parse5-utils": "^2.1.0",
+				"chokidar": "^3.4.3",
+				"clone": "^2.1.2",
+				"es-module-lexer": "^1.0.0",
+				"get-stream": "^6.0.0",
+				"is-stream": "^2.0.0",
+				"isbinaryfile": "^5.0.0",
+				"koa": "^2.13.0",
+				"koa-etag": "^4.0.0",
+				"koa-send": "^5.0.1",
+				"koa-static": "^5.0.0",
+				"lru-cache": "^8.0.4",
+				"mime-types": "^2.1.27",
+				"parse5": "^6.0.1",
+				"picomatch": "^2.2.2",
+				"ws": "^7.4.2"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/es-module-lexer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+			"dev": true
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/lru-cache": {
+			"version": "8.0.5",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+			"integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.14"
+			}
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/ws": {
+			"version": "7.5.9",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+			"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/@web/dev-server-rollup": {
@@ -12314,9 +12466,9 @@
 			}
 		},
 		"node_modules/esbuild": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-			"integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
+			"integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
@@ -12326,28 +12478,28 @@
 				"node": ">=12"
 			},
 			"optionalDependencies": {
-				"@esbuild/android-arm": "0.17.19",
-				"@esbuild/android-arm64": "0.17.19",
-				"@esbuild/android-x64": "0.17.19",
-				"@esbuild/darwin-arm64": "0.17.19",
-				"@esbuild/darwin-x64": "0.17.19",
-				"@esbuild/freebsd-arm64": "0.17.19",
-				"@esbuild/freebsd-x64": "0.17.19",
-				"@esbuild/linux-arm": "0.17.19",
-				"@esbuild/linux-arm64": "0.17.19",
-				"@esbuild/linux-ia32": "0.17.19",
-				"@esbuild/linux-loong64": "0.17.19",
-				"@esbuild/linux-mips64el": "0.17.19",
-				"@esbuild/linux-ppc64": "0.17.19",
-				"@esbuild/linux-riscv64": "0.17.19",
-				"@esbuild/linux-s390x": "0.17.19",
-				"@esbuild/linux-x64": "0.17.19",
-				"@esbuild/netbsd-x64": "0.17.19",
-				"@esbuild/openbsd-x64": "0.17.19",
-				"@esbuild/sunos-x64": "0.17.19",
-				"@esbuild/win32-arm64": "0.17.19",
-				"@esbuild/win32-ia32": "0.17.19",
-				"@esbuild/win32-x64": "0.17.19"
+				"@esbuild/android-arm": "0.19.9",
+				"@esbuild/android-arm64": "0.19.9",
+				"@esbuild/android-x64": "0.19.9",
+				"@esbuild/darwin-arm64": "0.19.9",
+				"@esbuild/darwin-x64": "0.19.9",
+				"@esbuild/freebsd-arm64": "0.19.9",
+				"@esbuild/freebsd-x64": "0.19.9",
+				"@esbuild/linux-arm": "0.19.9",
+				"@esbuild/linux-arm64": "0.19.9",
+				"@esbuild/linux-ia32": "0.19.9",
+				"@esbuild/linux-loong64": "0.19.9",
+				"@esbuild/linux-mips64el": "0.19.9",
+				"@esbuild/linux-ppc64": "0.19.9",
+				"@esbuild/linux-riscv64": "0.19.9",
+				"@esbuild/linux-s390x": "0.19.9",
+				"@esbuild/linux-x64": "0.19.9",
+				"@esbuild/netbsd-x64": "0.19.9",
+				"@esbuild/openbsd-x64": "0.19.9",
+				"@esbuild/sunos-x64": "0.19.9",
+				"@esbuild/win32-arm64": "0.19.9",
+				"@esbuild/win32-ia32": "0.19.9",
+				"@esbuild/win32-x64": "0.19.9"
 			}
 		},
 		"node_modules/esbuild-plugin-alias": {
@@ -17608,9 +17760,9 @@
 			"dev": true
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.6",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-			"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+			"version": "3.3.7",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
 			"dev": true,
 			"funding": [
 				{
@@ -19101,9 +19253,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.31",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-			"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+			"version": "8.4.32",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+			"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
 			"dev": true,
 			"funding": [
 				{
@@ -19120,7 +19272,7 @@
 				}
 			],
 			"dependencies": {
-				"nanoid": "^3.3.6",
+				"nanoid": "^3.3.7",
 				"picocolors": "^1.0.0",
 				"source-map-js": "^1.0.2"
 			},
@@ -22204,29 +22356,29 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "4.4.12",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.12.tgz",
-			"integrity": "sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==",
+			"version": "5.0.10",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
+			"integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
 			"dev": true,
 			"dependencies": {
-				"esbuild": "^0.18.10",
-				"postcss": "^8.4.27",
-				"rollup": "^3.27.1"
+				"esbuild": "^0.19.3",
+				"postcss": "^8.4.32",
+				"rollup": "^4.2.0"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
 			},
 			"engines": {
-				"node": "^14.18.0 || >=16.0.0"
+				"node": "^18.0.0 || >=20.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/vitejs/vite?sponsor=1"
 			},
 			"optionalDependencies": {
-				"fsevents": "~2.3.2"
+				"fsevents": "~2.3.3"
 			},
 			"peerDependencies": {
-				"@types/node": ">= 14",
+				"@types/node": "^18.0.0 || >=20.0.0",
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
@@ -22259,9 +22411,9 @@
 			}
 		},
 		"node_modules/vite-plugin-static-copy": {
-			"version": "0.17.0",
-			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.17.0.tgz",
-			"integrity": "sha512-2HpNbHfDt8SDy393AGXh9llHkc8FJMQkI8s3T5WsH3SWLMO+f5cFIyPErl4yGKU9Uh3Vaqsd4lHZYTf042fQ2A==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.0.tgz",
+			"integrity": "sha512-kMlrB3WDtC5GzFedNIPkpjnOAr8M11PfWOiUaONrUZ3AqogTsOmIhTt6w7Fh311wl8pN81ld7sfuOEogFJ9N8A==",
 			"dev": true,
 			"dependencies": {
 				"chokidar": "^3.5.3",
@@ -22270,16 +22422,16 @@
 				"picocolors": "^1.0.0"
 			},
 			"engines": {
-				"node": "^14.18.0 || >=16.0.0"
+				"node": "^18.0.0 || >=20.0.0"
 			},
 			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0"
+				"vite": "^5.0.0"
 			}
 		},
 		"node_modules/vite-tsconfig-paths": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz",
-			"integrity": "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==",
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.2.tgz",
+			"integrity": "sha512-dq0FjyxHHDnp0uS3P12WEOX2W7NeuLzX9AWP38D7Zw2CTbFErapwQVlCiT5DMJcVWKQ1MMdTe92PZl/rBQ7qcw==",
 			"dev": true,
 			"dependencies": {
 				"debug": "^4.1.1",
@@ -22295,409 +22447,18 @@
 				}
 			}
 		},
-		"node_modules/vite/node_modules/@esbuild/android-arm": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.14.tgz",
-			"integrity": "sha512-blODaaL+lngG5bdK/t4qZcQvq2BBqrABmYwqPPcS5VRxrCSGHb9R/rA3fqxh7R18I7WU4KKv+NYkt22FDfalcg==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/android-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.14.tgz",
-			"integrity": "sha512-rZ2v+Luba5/3D6l8kofWgTnqE+qsC/L5MleKIKFyllHTKHrNBMqeRCnZI1BtRx8B24xMYxeU32iIddRQqMsOsg==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/android-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.14.tgz",
-			"integrity": "sha512-qSwh8y38QKl+1Iqg+YhvCVYlSk3dVLk9N88VO71U4FUjtiSFylMWK3Ugr8GC6eTkkP4Tc83dVppt2n8vIdlSGg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.14.tgz",
-			"integrity": "sha512-9Hl2D2PBeDYZiNbnRKRWuxwHa9v5ssWBBjisXFkVcSP5cZqzZRFBUWEQuqBHO4+PKx4q4wgHoWtfQ1S7rUqJ2Q==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/darwin-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.14.tgz",
-			"integrity": "sha512-ZnI3Dg4ElQ6tlv82qLc/UNHtFsgZSKZ7KjsUNAo1BF1SoYDjkGKHJyCrYyWjFecmXpvvG/KJ9A/oe0H12odPLQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.14.tgz",
-			"integrity": "sha512-h3OqR80Da4oQCIa37zl8tU5MwHQ7qgPV0oVScPfKJK21fSRZEhLE4IIVpmcOxfAVmqjU6NDxcxhYaM8aDIGRLw==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.14.tgz",
-			"integrity": "sha512-ha4BX+S6CZG4BoH9tOZTrFIYC1DH13UTCRHzFc3GWX74nz3h/N6MPF3tuR3XlsNjMFUazGgm35MPW5tHkn2lzQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-arm": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.14.tgz",
-			"integrity": "sha512-5+7vehI1iqru5WRtJyU2XvTOvTGURw3OZxe3YTdE9muNNIdmKAVmSHpB3Vw2LazJk2ifEdIMt/wTWnVe5V98Kg==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.14.tgz",
-			"integrity": "sha512-IXORRe22In7U65NZCzjwAUc03nn8SDIzWCnfzJ6t/8AvGx5zBkcLfknI+0P+hhuftufJBmIXxdSTbzWc8X/V4w==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-ia32": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.14.tgz",
-			"integrity": "sha512-BfHlMa0nibwpjG+VXbOoqJDmFde4UK2gnW351SQ2Zd4t1N3zNdmUEqRkw/srC1Sa1DRBE88Dbwg4JgWCbNz/FQ==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-loong64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.14.tgz",
-			"integrity": "sha512-j2/Ex++DRUWIAaUDprXd3JevzGtZ4/d7VKz+AYDoHZ3HjJzCyYBub9CU1wwIXN+viOP0b4VR3RhGClsvyt/xSw==",
-			"cpu": [
-				"loong64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.14.tgz",
-			"integrity": "sha512-qn2+nc+ZCrJmiicoAnJXJJkZWt8Nwswgu1crY7N+PBR8ChBHh89XRxj38UU6Dkthl2yCVO9jWuafZ24muzDC/A==",
-			"cpu": [
-				"mips64el"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.14.tgz",
-			"integrity": "sha512-aGzXzd+djqeEC5IRkDKt3kWzvXoXC6K6GyYKxd+wsFJ2VQYnOWE954qV2tvy5/aaNrmgPTb52cSCHFE+Z7Z0yg==",
-			"cpu": [
-				"ppc64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.14.tgz",
-			"integrity": "sha512-8C6vWbfr0ygbAiMFLS6OPz0BHvApkT2gCboOGV76YrYw+sD/MQJzyITNsjZWDXJwPu9tjrFQOVG7zijRzBCnLw==",
-			"cpu": [
-				"riscv64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-s390x": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.14.tgz",
-			"integrity": "sha512-G/Lf9iu8sRMM60OVGOh94ZW2nIStksEcITkXdkD09/T6QFD/o+g0+9WVyR/jajIb3A0LvBJ670tBnGe1GgXMgw==",
-			"cpu": [
-				"s390x"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.14.tgz",
-			"integrity": "sha512-TBgStYBQaa3EGhgqIDM+ECnkreb0wkcKqL7H6m+XPcGUoU4dO7dqewfbm0mWEQYH3kzFHrzjOFNpSAVzDZRSJw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.14.tgz",
-			"integrity": "sha512-stvCcjyCQR2lMTroqNhAbvROqRjxPEq0oQ380YdXxA81TaRJEucH/PzJ/qsEtsHgXlWFW6Ryr/X15vxQiyRXVg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"netbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.14.tgz",
-			"integrity": "sha512-apAOJF14CIsN5ht1PA57PboEMsNV70j3FUdxLmA2liZ20gEQnfTG5QU0FhENo5nwbTqCB2O3WDsXAihfODjHYw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"openbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/sunos-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.14.tgz",
-			"integrity": "sha512-fYRaaS8mDgZcGybPn2MQbn1ZNZx+UXFSUoS5Hd2oEnlsyUcr/l3c6RnXf1bLDRKKdLRSabTmyCy7VLQ7VhGdOQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"sunos"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/win32-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.14.tgz",
-			"integrity": "sha512-1c44RcxKEJPrVj62XdmYhxXaU/V7auELCmnD+Ri+UCt+AGxTvzxl9uauQhrFso8gj6ZV1DaORV0sT9XSHOAk8Q==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/win32-ia32": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.14.tgz",
-			"integrity": "sha512-EXAFttrdAxZkFQmpvcAQ2bywlWUsONp/9c2lcfvPUhu8vXBBenCXpoq9YkUvVP639ld3YGiYx0YUQ6/VQz3Maw==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/win32-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.14.tgz",
-			"integrity": "sha512-K0QjGbcskx+gY+qp3v4/940qg8JitpXbdxFhRDA1aYoNaPff88+aEwoq45aqJ+ogpxQxmU0ZTjgnrQD/w8iiUg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/esbuild": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.14.tgz",
-			"integrity": "sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==",
+		"node_modules/vite/node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
 			"dev": true,
 			"hasInstallScript": true,
-			"bin": {
-				"esbuild": "bin/esbuild"
-			},
+			"optional": true,
+			"os": [
+				"darwin"
+			],
 			"engines": {
-				"node": ">=12"
-			},
-			"optionalDependencies": {
-				"@esbuild/android-arm": "0.18.14",
-				"@esbuild/android-arm64": "0.18.14",
-				"@esbuild/android-x64": "0.18.14",
-				"@esbuild/darwin-arm64": "0.18.14",
-				"@esbuild/darwin-x64": "0.18.14",
-				"@esbuild/freebsd-arm64": "0.18.14",
-				"@esbuild/freebsd-x64": "0.18.14",
-				"@esbuild/linux-arm": "0.18.14",
-				"@esbuild/linux-arm64": "0.18.14",
-				"@esbuild/linux-ia32": "0.18.14",
-				"@esbuild/linux-loong64": "0.18.14",
-				"@esbuild/linux-mips64el": "0.18.14",
-				"@esbuild/linux-ppc64": "0.18.14",
-				"@esbuild/linux-riscv64": "0.18.14",
-				"@esbuild/linux-s390x": "0.18.14",
-				"@esbuild/linux-x64": "0.18.14",
-				"@esbuild/netbsd-x64": "0.18.14",
-				"@esbuild/openbsd-x64": "0.18.14",
-				"@esbuild/sunos-x64": "0.18.14",
-				"@esbuild/win32-arm64": "0.18.14",
-				"@esbuild/win32-ia32": "0.18.14",
-				"@esbuild/win32-x64": "0.18.14"
-			}
-		},
-		"node_modules/vite/node_modules/rollup": {
-			"version": "3.29.4",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-			"integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
-			"dev": true,
-			"bin": {
-				"rollup": "dist/bin/rollup"
-			},
-			"engines": {
-				"node": ">=14.18.0",
-				"npm": ">=8.0.0"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
 		"node_modules/walker": {
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index f3df7fa2e0..ea5a5fbe03 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -146,8 +146,8 @@
 		"marked": "^11.1.0",
 		"monaco-editor": "^0.45.0",
 		"rxjs": "^7.8.1",
-		"tinymce-i18n": "^23.12.4",
 		"tinymce": "^6.8.2",
+		"tinymce-i18n": "^23.12.4",
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
@@ -158,54 +158,55 @@
 		"@rollup/plugin-commonjs": "^25.0.7",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-replace": "^5.0.5",
 		"@storybook/addon-a11y": "7.6.5",
 		"@storybook/addon-actions": "7.6.5",
 		"@storybook/addon-essentials": "7.6.5",
 		"@storybook/addon-links": "7.6.5",
 		"@storybook/mdx2-csf": "^1.1.0",
-		"@storybook/web-components-vite": "7.6.5",
 		"@storybook/web-components": "7.6.5",
+		"@storybook/web-components-vite": "7.6.5",
 		"@types/chai": "^4.3.5",
 		"@types/lodash-es": "^4.17.8",
 		"@types/mocha": "^10.0.1",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
-		"@web/dev-server-esbuild": "^0.4.1",
-		"@web/dev-server-import-maps": "^0.1.1",
-		"@web/dev-server-rollup": "^0.6.0",
-		"@web/test-runner-playwright": "^0.11.0",
+		"@web/dev-server-esbuild": "^1.0.1",
+		"@web/dev-server-import-maps": "^0.2.0",
+		"@web/dev-server-rollup": "^0.6.1",
 		"@web/test-runner": "^0.18.0",
+		"@web/test-runner-playwright": "^0.11.0",
 		"babel-loader": "^9.1.3",
+		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-lit-a11y": "^4.1.1",
 		"eslint-plugin-lit": "^1.10.1",
+		"eslint-plugin-lit-a11y": "^4.1.1",
 		"eslint-plugin-local-rules": "^2.0.1",
 		"eslint-plugin-storybook": "^0.6.15",
 		"eslint-plugin-wc": "^2.0.4",
-		"eslint": "^8.56.0",
 		"lucide-static": "^0.290.0",
 		"msw": "^1.3.2",
 		"openapi-typescript-codegen": "^0.25.0",
 		"playwright-msw": "^3.0.1",
 		"plop": "^4.0.0",
 		"prettier": "3.0.3",
-		"react-dom": "^18.2.0",
 		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"remark-gfm": "^3.0.1",
+		"rollup": "^4.9.0",
 		"rollup-plugin-esbuild": "^6.1.0",
 		"rollup-plugin-import-css": "^3.3.5",
 		"rollup-plugin-web-worker-loader": "^1.6.1",
-		"rollup": "^4.9.0",
 		"storybook": "7.6.5",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
-		"typescript-json-schema": "^0.62.0",
 		"typescript": "^5.3.2",
-		"vite-plugin-static-copy": "^0.17.0",
-		"vite-tsconfig-paths": "^4.2.0",
-		"vite": "^4.4.12",
+		"typescript-json-schema": "^0.62.0",
+		"vite": "^5.0.10",
+		"vite-plugin-static-copy": "^1.0.0",
+		"vite-tsconfig-paths": "^4.2.2",
 		"web-component-analyzer": "^2.0.0"
 	},
 	"msw": {
diff --git a/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts b/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
index 190e558dea..ca2e3b1a7c 100644
--- a/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
 // @ts-ignore
-import styles from 'monaco-editor/min/vs/editor/editor.main.css';
+import styles from 'monaco-editor/min/vs/editor/editor.main.css?inline';
 // @ts-ignore
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
 // @ts-ignore
diff --git a/src/Umbraco.Web.UI.Client/src/rollup.config.js b/src/Umbraco.Web.UI.Client/src/rollup.config.js
index ec60bdea0b..67dacb42aa 100644
--- a/src/Umbraco.Web.UI.Client/src/rollup.config.js
+++ b/src/Umbraco.Web.UI.Client/src/rollup.config.js
@@ -3,6 +3,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import css from 'rollup-plugin-import-css';
 import webWorkerLoader from 'rollup-plugin-web-worker-loader';
+import replace from '@rollup/plugin-replace';
 import { readdirSync, lstatSync, cpSync, copyFileSync, existsSync, unlinkSync } from 'fs';
 import * as globModule from 'tiny-glob';
 
@@ -78,7 +79,14 @@ const libraries = allowed.map((module) => {
 			commonjs(),
 			nodeResolve({ preferBuiltins: false, browser: true }),
 			webWorkerLoader({ target: 'browser', pattern: /^(.+)\?worker$/ }),
-			css(),
+			// Replace the vite specific inline query with nothing so that the import is valid
+			replace({
+				preventAssignment: true,
+				values: {
+					'?inline': '',
+				}
+			}),
+			css({ minify: true }),
 			esbuild({ minify: true, sourceMap: true }),
 		],
 	};
diff --git a/src/Umbraco.Web.UI.Client/src/tsconfig.build.json b/src/Umbraco.Web.UI.Client/src/tsconfig.build.json
index 078d969271..fb00a47d31 100644
--- a/src/Umbraco.Web.UI.Client/src/tsconfig.build.json
+++ b/src/Umbraco.Web.UI.Client/src/tsconfig.build.json
@@ -8,7 +8,7 @@
 		"composite": true,
 		"sourceMap": false,
 		"declaration": true,
-		"resolveJsonModule": true
+		"allowImportingTsExtensions": false
 	},
 	"include": ["./**/*.ts", "./**/*.json", "./**/*.js"],
 	"exclude": ["./**/*.test.ts", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 3747bafb49..5daea1d3fb 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -1,23 +1,28 @@
 {
 	"compilerOptions": {
 		"module": "esnext",
-		"target": "esnext",
+		"target": "ES2020",
 		"lib": ["es2020", "dom", "dom.iterable"],
-		"noEmit": true,
 		"outDir": "./types",
-		"strict": true,
-		"noImplicitReturns": true,
-		"noFallthroughCasesInSwitch": true,
-		"moduleResolution": "node",
-		"isolatedModules": true,
 		"allowSyntheticDefaultImports": true,
 		"experimentalDecorators": true,
 		"forceConsistentCasingInFileNames": true,
 		"useDefineForClassFields": false,
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
 		"baseUrl": ".",
 		"incremental": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitReturns": true,
+
 		"paths": {
 			// TODO: can we combine these of multiple tsconfigs so each package can hold their own?
 			// APPS

From 16d26a75b24ea12aa4c3ae8c74c2e41c251456e7 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Sat, 16 Dec 2023 10:56:37 +0100
Subject: [PATCH 13/86] build(deps-dev): bump vite from 4 to 5

---
 src/Umbraco.Web.UI.Client/package-lock.json   | 827 +++++++-----------
 src/Umbraco.Web.UI.Client/package.json        |  29 +-
 .../src/external/monaco-editor/index.ts       |   2 +-
 .../src/rollup.config.js                      |  10 +-
 .../src/tsconfig.build.json                   |   2 +-
 src/Umbraco.Web.UI.Client/tsconfig.json       |  23 +-
 6 files changed, 334 insertions(+), 559 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 44f780f893..9fa20c3348 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -33,6 +33,7 @@
 				"@rollup/plugin-commonjs": "^25.0.7",
 				"@rollup/plugin-json": "^6.1.0",
 				"@rollup/plugin-node-resolve": "^15.2.3",
+				"@rollup/plugin-replace": "^5.0.5",
 				"@storybook/addon-a11y": "7.6.5",
 				"@storybook/addon-actions": "7.6.5",
 				"@storybook/addon-essentials": "7.6.5",
@@ -45,9 +46,9 @@
 				"@types/mocha": "^10.0.1",
 				"@typescript-eslint/eslint-plugin": "^6.14.0",
 				"@typescript-eslint/parser": "^6.14.0",
-				"@web/dev-server-esbuild": "^0.4.1",
-				"@web/dev-server-import-maps": "^0.1.1",
-				"@web/dev-server-rollup": "^0.6.0",
+				"@web/dev-server-esbuild": "^1.0.1",
+				"@web/dev-server-import-maps": "^0.2.0",
+				"@web/dev-server-rollup": "^0.6.1",
 				"@web/test-runner": "^0.18.0",
 				"@web/test-runner-playwright": "^0.11.0",
 				"babel-loader": "^9.1.3",
@@ -78,9 +79,9 @@
 				"tsc-alias": "^1.8.8",
 				"typescript": "^5.3.2",
 				"typescript-json-schema": "^0.62.0",
-				"vite": "^4.4.12",
-				"vite-plugin-static-copy": "^0.17.0",
-				"vite-tsconfig-paths": "^4.2.0",
+				"vite": "^5.0.10",
+				"vite-plugin-static-copy": "^1.0.0",
+				"vite-tsconfig-paths": "^4.2.2",
 				"web-component-analyzer": "^2.0.0"
 			},
 			"engines": {
@@ -2129,9 +2130,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
-			"integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
+			"integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
 			"cpu": [
 				"arm"
 			],
@@ -2145,9 +2146,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
-			"integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
+			"integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -2161,9 +2162,9 @@
 			}
 		},
 		"node_modules/@esbuild/android-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
-			"integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
+			"integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
 			"cpu": [
 				"x64"
 			],
@@ -2177,9 +2178,9 @@
 			}
 		},
 		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
-			"integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
+			"integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
 			"cpu": [
 				"arm64"
 			],
@@ -2193,9 +2194,9 @@
 			}
 		},
 		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
-			"integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
+			"integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
 			"cpu": [
 				"x64"
 			],
@@ -2209,9 +2210,9 @@
 			}
 		},
 		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
-			"integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
+			"integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
 			"cpu": [
 				"arm64"
 			],
@@ -2225,9 +2226,9 @@
 			}
 		},
 		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
-			"integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
+			"integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
 			"cpu": [
 				"x64"
 			],
@@ -2241,9 +2242,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-arm": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
-			"integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
+			"integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
 			"cpu": [
 				"arm"
 			],
@@ -2257,9 +2258,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
-			"integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
+			"integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -2273,9 +2274,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
-			"integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
+			"integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
 			"cpu": [
 				"ia32"
 			],
@@ -2289,9 +2290,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
-			"integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
+			"integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
 			"cpu": [
 				"loong64"
 			],
@@ -2305,9 +2306,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
-			"integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
+			"integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
 			"cpu": [
 				"mips64el"
 			],
@@ -2321,9 +2322,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
-			"integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
+			"integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
 			"cpu": [
 				"ppc64"
 			],
@@ -2337,9 +2338,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
-			"integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
+			"integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
 			"cpu": [
 				"riscv64"
 			],
@@ -2353,9 +2354,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
-			"integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
+			"integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
 			"cpu": [
 				"s390x"
 			],
@@ -2369,9 +2370,9 @@
 			}
 		},
 		"node_modules/@esbuild/linux-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-			"integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
+			"integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
 			"cpu": [
 				"x64"
 			],
@@ -2385,9 +2386,9 @@
 			}
 		},
 		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
-			"integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
+			"integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
 			"cpu": [
 				"x64"
 			],
@@ -2401,9 +2402,9 @@
 			}
 		},
 		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
-			"integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
+			"integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
 			"cpu": [
 				"x64"
 			],
@@ -2417,9 +2418,9 @@
 			}
 		},
 		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
-			"integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
+			"integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
 			"cpu": [
 				"x64"
 			],
@@ -2433,9 +2434,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
-			"integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
+			"integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
 			"cpu": [
 				"arm64"
 			],
@@ -2449,9 +2450,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
-			"integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
+			"integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
 			"cpu": [
 				"ia32"
 			],
@@ -2465,9 +2466,9 @@
 			}
 		},
 		"node_modules/@esbuild/win32-x64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
-			"integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
+			"integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
 			"cpu": [
 				"x64"
 			],
@@ -4124,6 +4125,27 @@
 				}
 			}
 		},
+		"node_modules/@rollup/plugin-replace": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.5.tgz",
+			"integrity": "sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"magic-string": "^0.30.3"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -8786,36 +8808,166 @@
 			}
 		},
 		"node_modules/@web/dev-server-esbuild": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/@web/dev-server-esbuild/-/dev-server-esbuild-0.4.1.tgz",
-			"integrity": "sha512-oUrxo7ggxeaWuQafu5bgiAJFatA+YEeYhgkUMB2CHq/SVleKgyPgQCqx42eVBJ2uWMyI1YWSpKtNueCmocwQzw==",
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-esbuild/-/dev-server-esbuild-1.0.1.tgz",
+			"integrity": "sha512-EoLLFuv5Y47pqY1IJBcGZswzkqJd+/vN4BDI3oYq8p9dDE9EuQVkC7vweAUkH7vDzI7xUp+f0UzJeQcj9t7zNQ==",
 			"dev": true,
 			"dependencies": {
 				"@mdn/browser-compat-data": "^4.0.0",
-				"@web/dev-server-core": "^0.5.1",
-				"esbuild": "^0.16 || ^0.17",
+				"@web/dev-server-core": "^0.7.0",
+				"esbuild": "^0.19.5",
 				"parse5": "^6.0.1",
 				"ua-parser-js": "^1.0.33"
 			},
 			"engines": {
-				"node": ">=16.0.0"
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/@web/dev-server-core": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
+			"integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
+			"dev": true,
+			"dependencies": {
+				"@types/koa": "^2.11.6",
+				"@types/ws": "^7.4.0",
+				"@web/parse5-utils": "^2.1.0",
+				"chokidar": "^3.4.3",
+				"clone": "^2.1.2",
+				"es-module-lexer": "^1.0.0",
+				"get-stream": "^6.0.0",
+				"is-stream": "^2.0.0",
+				"isbinaryfile": "^5.0.0",
+				"koa": "^2.13.0",
+				"koa-etag": "^4.0.0",
+				"koa-send": "^5.0.1",
+				"koa-static": "^5.0.0",
+				"lru-cache": "^8.0.4",
+				"mime-types": "^2.1.27",
+				"parse5": "^6.0.1",
+				"picomatch": "^2.2.2",
+				"ws": "^7.4.2"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/es-module-lexer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+			"dev": true
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/lru-cache": {
+			"version": "8.0.5",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+			"integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.14"
+			}
+		},
+		"node_modules/@web/dev-server-esbuild/node_modules/ws": {
+			"version": "7.5.9",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+			"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/@web/dev-server-import-maps": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/@web/dev-server-import-maps/-/dev-server-import-maps-0.1.1.tgz",
-			"integrity": "sha512-Et/uswWE2K9tFLM2xNArsvoDtFmBPyFrwJRm5O5ls5u0F3ZNE8vXk4kUONakillQ/041uSE30wIfesljl1ZKsg==",
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-import-maps/-/dev-server-import-maps-0.2.0.tgz",
+			"integrity": "sha512-+Z4mNGJqHo370ZFmPl83O4BqpPzQDjprfLO3AwsOZck9x94LcAVmVsC7fnet1DQRR11x9M7FNliS6mmkZv26TQ==",
 			"dev": true,
 			"dependencies": {
 				"@import-maps/resolve": "^1.0.1",
 				"@types/parse5": "^6.0.1",
-				"@web/dev-server-core": "^0.5.1",
-				"@web/parse5-utils": "^2.0.0",
+				"@web/dev-server-core": "^0.7.0",
+				"@web/parse5-utils": "^2.1.0",
 				"parse5": "^6.0.1",
 				"picomatch": "^2.2.2"
 			},
 			"engines": {
-				"node": ">=16.0.0"
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/@web/dev-server-core": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
+			"integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
+			"dev": true,
+			"dependencies": {
+				"@types/koa": "^2.11.6",
+				"@types/ws": "^7.4.0",
+				"@web/parse5-utils": "^2.1.0",
+				"chokidar": "^3.4.3",
+				"clone": "^2.1.2",
+				"es-module-lexer": "^1.0.0",
+				"get-stream": "^6.0.0",
+				"is-stream": "^2.0.0",
+				"isbinaryfile": "^5.0.0",
+				"koa": "^2.13.0",
+				"koa-etag": "^4.0.0",
+				"koa-send": "^5.0.1",
+				"koa-static": "^5.0.0",
+				"lru-cache": "^8.0.4",
+				"mime-types": "^2.1.27",
+				"parse5": "^6.0.1",
+				"picomatch": "^2.2.2",
+				"ws": "^7.4.2"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/es-module-lexer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+			"dev": true
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/lru-cache": {
+			"version": "8.0.5",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
+			"integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.14"
+			}
+		},
+		"node_modules/@web/dev-server-import-maps/node_modules/ws": {
+			"version": "7.5.9",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+			"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/@web/dev-server-rollup": {
@@ -12314,9 +12466,9 @@
 			}
 		},
 		"node_modules/esbuild": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-			"integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+			"version": "0.19.9",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
+			"integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
@@ -12326,28 +12478,28 @@
 				"node": ">=12"
 			},
 			"optionalDependencies": {
-				"@esbuild/android-arm": "0.17.19",
-				"@esbuild/android-arm64": "0.17.19",
-				"@esbuild/android-x64": "0.17.19",
-				"@esbuild/darwin-arm64": "0.17.19",
-				"@esbuild/darwin-x64": "0.17.19",
-				"@esbuild/freebsd-arm64": "0.17.19",
-				"@esbuild/freebsd-x64": "0.17.19",
-				"@esbuild/linux-arm": "0.17.19",
-				"@esbuild/linux-arm64": "0.17.19",
-				"@esbuild/linux-ia32": "0.17.19",
-				"@esbuild/linux-loong64": "0.17.19",
-				"@esbuild/linux-mips64el": "0.17.19",
-				"@esbuild/linux-ppc64": "0.17.19",
-				"@esbuild/linux-riscv64": "0.17.19",
-				"@esbuild/linux-s390x": "0.17.19",
-				"@esbuild/linux-x64": "0.17.19",
-				"@esbuild/netbsd-x64": "0.17.19",
-				"@esbuild/openbsd-x64": "0.17.19",
-				"@esbuild/sunos-x64": "0.17.19",
-				"@esbuild/win32-arm64": "0.17.19",
-				"@esbuild/win32-ia32": "0.17.19",
-				"@esbuild/win32-x64": "0.17.19"
+				"@esbuild/android-arm": "0.19.9",
+				"@esbuild/android-arm64": "0.19.9",
+				"@esbuild/android-x64": "0.19.9",
+				"@esbuild/darwin-arm64": "0.19.9",
+				"@esbuild/darwin-x64": "0.19.9",
+				"@esbuild/freebsd-arm64": "0.19.9",
+				"@esbuild/freebsd-x64": "0.19.9",
+				"@esbuild/linux-arm": "0.19.9",
+				"@esbuild/linux-arm64": "0.19.9",
+				"@esbuild/linux-ia32": "0.19.9",
+				"@esbuild/linux-loong64": "0.19.9",
+				"@esbuild/linux-mips64el": "0.19.9",
+				"@esbuild/linux-ppc64": "0.19.9",
+				"@esbuild/linux-riscv64": "0.19.9",
+				"@esbuild/linux-s390x": "0.19.9",
+				"@esbuild/linux-x64": "0.19.9",
+				"@esbuild/netbsd-x64": "0.19.9",
+				"@esbuild/openbsd-x64": "0.19.9",
+				"@esbuild/sunos-x64": "0.19.9",
+				"@esbuild/win32-arm64": "0.19.9",
+				"@esbuild/win32-ia32": "0.19.9",
+				"@esbuild/win32-x64": "0.19.9"
 			}
 		},
 		"node_modules/esbuild-plugin-alias": {
@@ -17608,9 +17760,9 @@
 			"dev": true
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.6",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-			"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+			"version": "3.3.7",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
 			"dev": true,
 			"funding": [
 				{
@@ -19101,9 +19253,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.31",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-			"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+			"version": "8.4.32",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+			"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
 			"dev": true,
 			"funding": [
 				{
@@ -19120,7 +19272,7 @@
 				}
 			],
 			"dependencies": {
-				"nanoid": "^3.3.6",
+				"nanoid": "^3.3.7",
 				"picocolors": "^1.0.0",
 				"source-map-js": "^1.0.2"
 			},
@@ -22204,29 +22356,29 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "4.4.12",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.12.tgz",
-			"integrity": "sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==",
+			"version": "5.0.10",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
+			"integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
 			"dev": true,
 			"dependencies": {
-				"esbuild": "^0.18.10",
-				"postcss": "^8.4.27",
-				"rollup": "^3.27.1"
+				"esbuild": "^0.19.3",
+				"postcss": "^8.4.32",
+				"rollup": "^4.2.0"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
 			},
 			"engines": {
-				"node": "^14.18.0 || >=16.0.0"
+				"node": "^18.0.0 || >=20.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/vitejs/vite?sponsor=1"
 			},
 			"optionalDependencies": {
-				"fsevents": "~2.3.2"
+				"fsevents": "~2.3.3"
 			},
 			"peerDependencies": {
-				"@types/node": ">= 14",
+				"@types/node": "^18.0.0 || >=20.0.0",
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
@@ -22259,9 +22411,9 @@
 			}
 		},
 		"node_modules/vite-plugin-static-copy": {
-			"version": "0.17.0",
-			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.17.0.tgz",
-			"integrity": "sha512-2HpNbHfDt8SDy393AGXh9llHkc8FJMQkI8s3T5WsH3SWLMO+f5cFIyPErl4yGKU9Uh3Vaqsd4lHZYTf042fQ2A==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.0.tgz",
+			"integrity": "sha512-kMlrB3WDtC5GzFedNIPkpjnOAr8M11PfWOiUaONrUZ3AqogTsOmIhTt6w7Fh311wl8pN81ld7sfuOEogFJ9N8A==",
 			"dev": true,
 			"dependencies": {
 				"chokidar": "^3.5.3",
@@ -22270,16 +22422,16 @@
 				"picocolors": "^1.0.0"
 			},
 			"engines": {
-				"node": "^14.18.0 || >=16.0.0"
+				"node": "^18.0.0 || >=20.0.0"
 			},
 			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0"
+				"vite": "^5.0.0"
 			}
 		},
 		"node_modules/vite-tsconfig-paths": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz",
-			"integrity": "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==",
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.2.tgz",
+			"integrity": "sha512-dq0FjyxHHDnp0uS3P12WEOX2W7NeuLzX9AWP38D7Zw2CTbFErapwQVlCiT5DMJcVWKQ1MMdTe92PZl/rBQ7qcw==",
 			"dev": true,
 			"dependencies": {
 				"debug": "^4.1.1",
@@ -22295,409 +22447,18 @@
 				}
 			}
 		},
-		"node_modules/vite/node_modules/@esbuild/android-arm": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.14.tgz",
-			"integrity": "sha512-blODaaL+lngG5bdK/t4qZcQvq2BBqrABmYwqPPcS5VRxrCSGHb9R/rA3fqxh7R18I7WU4KKv+NYkt22FDfalcg==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/android-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.14.tgz",
-			"integrity": "sha512-rZ2v+Luba5/3D6l8kofWgTnqE+qsC/L5MleKIKFyllHTKHrNBMqeRCnZI1BtRx8B24xMYxeU32iIddRQqMsOsg==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/android-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.14.tgz",
-			"integrity": "sha512-qSwh8y38QKl+1Iqg+YhvCVYlSk3dVLk9N88VO71U4FUjtiSFylMWK3Ugr8GC6eTkkP4Tc83dVppt2n8vIdlSGg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.14.tgz",
-			"integrity": "sha512-9Hl2D2PBeDYZiNbnRKRWuxwHa9v5ssWBBjisXFkVcSP5cZqzZRFBUWEQuqBHO4+PKx4q4wgHoWtfQ1S7rUqJ2Q==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/darwin-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.14.tgz",
-			"integrity": "sha512-ZnI3Dg4ElQ6tlv82qLc/UNHtFsgZSKZ7KjsUNAo1BF1SoYDjkGKHJyCrYyWjFecmXpvvG/KJ9A/oe0H12odPLQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.14.tgz",
-			"integrity": "sha512-h3OqR80Da4oQCIa37zl8tU5MwHQ7qgPV0oVScPfKJK21fSRZEhLE4IIVpmcOxfAVmqjU6NDxcxhYaM8aDIGRLw==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.14.tgz",
-			"integrity": "sha512-ha4BX+S6CZG4BoH9tOZTrFIYC1DH13UTCRHzFc3GWX74nz3h/N6MPF3tuR3XlsNjMFUazGgm35MPW5tHkn2lzQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-arm": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.14.tgz",
-			"integrity": "sha512-5+7vehI1iqru5WRtJyU2XvTOvTGURw3OZxe3YTdE9muNNIdmKAVmSHpB3Vw2LazJk2ifEdIMt/wTWnVe5V98Kg==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.14.tgz",
-			"integrity": "sha512-IXORRe22In7U65NZCzjwAUc03nn8SDIzWCnfzJ6t/8AvGx5zBkcLfknI+0P+hhuftufJBmIXxdSTbzWc8X/V4w==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-ia32": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.14.tgz",
-			"integrity": "sha512-BfHlMa0nibwpjG+VXbOoqJDmFde4UK2gnW351SQ2Zd4t1N3zNdmUEqRkw/srC1Sa1DRBE88Dbwg4JgWCbNz/FQ==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-loong64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.14.tgz",
-			"integrity": "sha512-j2/Ex++DRUWIAaUDprXd3JevzGtZ4/d7VKz+AYDoHZ3HjJzCyYBub9CU1wwIXN+viOP0b4VR3RhGClsvyt/xSw==",
-			"cpu": [
-				"loong64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.14.tgz",
-			"integrity": "sha512-qn2+nc+ZCrJmiicoAnJXJJkZWt8Nwswgu1crY7N+PBR8ChBHh89XRxj38UU6Dkthl2yCVO9jWuafZ24muzDC/A==",
-			"cpu": [
-				"mips64el"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.14.tgz",
-			"integrity": "sha512-aGzXzd+djqeEC5IRkDKt3kWzvXoXC6K6GyYKxd+wsFJ2VQYnOWE954qV2tvy5/aaNrmgPTb52cSCHFE+Z7Z0yg==",
-			"cpu": [
-				"ppc64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.14.tgz",
-			"integrity": "sha512-8C6vWbfr0ygbAiMFLS6OPz0BHvApkT2gCboOGV76YrYw+sD/MQJzyITNsjZWDXJwPu9tjrFQOVG7zijRzBCnLw==",
-			"cpu": [
-				"riscv64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-s390x": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.14.tgz",
-			"integrity": "sha512-G/Lf9iu8sRMM60OVGOh94ZW2nIStksEcITkXdkD09/T6QFD/o+g0+9WVyR/jajIb3A0LvBJ670tBnGe1GgXMgw==",
-			"cpu": [
-				"s390x"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/linux-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.14.tgz",
-			"integrity": "sha512-TBgStYBQaa3EGhgqIDM+ECnkreb0wkcKqL7H6m+XPcGUoU4dO7dqewfbm0mWEQYH3kzFHrzjOFNpSAVzDZRSJw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.14.tgz",
-			"integrity": "sha512-stvCcjyCQR2lMTroqNhAbvROqRjxPEq0oQ380YdXxA81TaRJEucH/PzJ/qsEtsHgXlWFW6Ryr/X15vxQiyRXVg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"netbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.14.tgz",
-			"integrity": "sha512-apAOJF14CIsN5ht1PA57PboEMsNV70j3FUdxLmA2liZ20gEQnfTG5QU0FhENo5nwbTqCB2O3WDsXAihfODjHYw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"openbsd"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/sunos-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.14.tgz",
-			"integrity": "sha512-fYRaaS8mDgZcGybPn2MQbn1ZNZx+UXFSUoS5Hd2oEnlsyUcr/l3c6RnXf1bLDRKKdLRSabTmyCy7VLQ7VhGdOQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"sunos"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/win32-arm64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.14.tgz",
-			"integrity": "sha512-1c44RcxKEJPrVj62XdmYhxXaU/V7auELCmnD+Ri+UCt+AGxTvzxl9uauQhrFso8gj6ZV1DaORV0sT9XSHOAk8Q==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/win32-ia32": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.14.tgz",
-			"integrity": "sha512-EXAFttrdAxZkFQmpvcAQ2bywlWUsONp/9c2lcfvPUhu8vXBBenCXpoq9YkUvVP639ld3YGiYx0YUQ6/VQz3Maw==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/win32-x64": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.14.tgz",
-			"integrity": "sha512-K0QjGbcskx+gY+qp3v4/940qg8JitpXbdxFhRDA1aYoNaPff88+aEwoq45aqJ+ogpxQxmU0ZTjgnrQD/w8iiUg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/esbuild": {
-			"version": "0.18.14",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.14.tgz",
-			"integrity": "sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==",
+		"node_modules/vite/node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
 			"dev": true,
 			"hasInstallScript": true,
-			"bin": {
-				"esbuild": "bin/esbuild"
-			},
+			"optional": true,
+			"os": [
+				"darwin"
+			],
 			"engines": {
-				"node": ">=12"
-			},
-			"optionalDependencies": {
-				"@esbuild/android-arm": "0.18.14",
-				"@esbuild/android-arm64": "0.18.14",
-				"@esbuild/android-x64": "0.18.14",
-				"@esbuild/darwin-arm64": "0.18.14",
-				"@esbuild/darwin-x64": "0.18.14",
-				"@esbuild/freebsd-arm64": "0.18.14",
-				"@esbuild/freebsd-x64": "0.18.14",
-				"@esbuild/linux-arm": "0.18.14",
-				"@esbuild/linux-arm64": "0.18.14",
-				"@esbuild/linux-ia32": "0.18.14",
-				"@esbuild/linux-loong64": "0.18.14",
-				"@esbuild/linux-mips64el": "0.18.14",
-				"@esbuild/linux-ppc64": "0.18.14",
-				"@esbuild/linux-riscv64": "0.18.14",
-				"@esbuild/linux-s390x": "0.18.14",
-				"@esbuild/linux-x64": "0.18.14",
-				"@esbuild/netbsd-x64": "0.18.14",
-				"@esbuild/openbsd-x64": "0.18.14",
-				"@esbuild/sunos-x64": "0.18.14",
-				"@esbuild/win32-arm64": "0.18.14",
-				"@esbuild/win32-ia32": "0.18.14",
-				"@esbuild/win32-x64": "0.18.14"
-			}
-		},
-		"node_modules/vite/node_modules/rollup": {
-			"version": "3.29.4",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-			"integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
-			"dev": true,
-			"bin": {
-				"rollup": "dist/bin/rollup"
-			},
-			"engines": {
-				"node": ">=14.18.0",
-				"npm": ">=8.0.0"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
 		"node_modules/walker": {
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index f3df7fa2e0..ea5a5fbe03 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -146,8 +146,8 @@
 		"marked": "^11.1.0",
 		"monaco-editor": "^0.45.0",
 		"rxjs": "^7.8.1",
-		"tinymce-i18n": "^23.12.4",
 		"tinymce": "^6.8.2",
+		"tinymce-i18n": "^23.12.4",
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
@@ -158,54 +158,55 @@
 		"@rollup/plugin-commonjs": "^25.0.7",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-replace": "^5.0.5",
 		"@storybook/addon-a11y": "7.6.5",
 		"@storybook/addon-actions": "7.6.5",
 		"@storybook/addon-essentials": "7.6.5",
 		"@storybook/addon-links": "7.6.5",
 		"@storybook/mdx2-csf": "^1.1.0",
-		"@storybook/web-components-vite": "7.6.5",
 		"@storybook/web-components": "7.6.5",
+		"@storybook/web-components-vite": "7.6.5",
 		"@types/chai": "^4.3.5",
 		"@types/lodash-es": "^4.17.8",
 		"@types/mocha": "^10.0.1",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
-		"@web/dev-server-esbuild": "^0.4.1",
-		"@web/dev-server-import-maps": "^0.1.1",
-		"@web/dev-server-rollup": "^0.6.0",
-		"@web/test-runner-playwright": "^0.11.0",
+		"@web/dev-server-esbuild": "^1.0.1",
+		"@web/dev-server-import-maps": "^0.2.0",
+		"@web/dev-server-rollup": "^0.6.1",
 		"@web/test-runner": "^0.18.0",
+		"@web/test-runner-playwright": "^0.11.0",
 		"babel-loader": "^9.1.3",
+		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-lit-a11y": "^4.1.1",
 		"eslint-plugin-lit": "^1.10.1",
+		"eslint-plugin-lit-a11y": "^4.1.1",
 		"eslint-plugin-local-rules": "^2.0.1",
 		"eslint-plugin-storybook": "^0.6.15",
 		"eslint-plugin-wc": "^2.0.4",
-		"eslint": "^8.56.0",
 		"lucide-static": "^0.290.0",
 		"msw": "^1.3.2",
 		"openapi-typescript-codegen": "^0.25.0",
 		"playwright-msw": "^3.0.1",
 		"plop": "^4.0.0",
 		"prettier": "3.0.3",
-		"react-dom": "^18.2.0",
 		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"remark-gfm": "^3.0.1",
+		"rollup": "^4.9.0",
 		"rollup-plugin-esbuild": "^6.1.0",
 		"rollup-plugin-import-css": "^3.3.5",
 		"rollup-plugin-web-worker-loader": "^1.6.1",
-		"rollup": "^4.9.0",
 		"storybook": "7.6.5",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
-		"typescript-json-schema": "^0.62.0",
 		"typescript": "^5.3.2",
-		"vite-plugin-static-copy": "^0.17.0",
-		"vite-tsconfig-paths": "^4.2.0",
-		"vite": "^4.4.12",
+		"typescript-json-schema": "^0.62.0",
+		"vite": "^5.0.10",
+		"vite-plugin-static-copy": "^1.0.0",
+		"vite-tsconfig-paths": "^4.2.2",
 		"web-component-analyzer": "^2.0.0"
 	},
 	"msw": {
diff --git a/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts b/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
index 190e558dea..ca2e3b1a7c 100644
--- a/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
 // @ts-ignore
-import styles from 'monaco-editor/min/vs/editor/editor.main.css';
+import styles from 'monaco-editor/min/vs/editor/editor.main.css?inline';
 // @ts-ignore
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
 // @ts-ignore
diff --git a/src/Umbraco.Web.UI.Client/src/rollup.config.js b/src/Umbraco.Web.UI.Client/src/rollup.config.js
index ec60bdea0b..67dacb42aa 100644
--- a/src/Umbraco.Web.UI.Client/src/rollup.config.js
+++ b/src/Umbraco.Web.UI.Client/src/rollup.config.js
@@ -3,6 +3,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import css from 'rollup-plugin-import-css';
 import webWorkerLoader from 'rollup-plugin-web-worker-loader';
+import replace from '@rollup/plugin-replace';
 import { readdirSync, lstatSync, cpSync, copyFileSync, existsSync, unlinkSync } from 'fs';
 import * as globModule from 'tiny-glob';
 
@@ -78,7 +79,14 @@ const libraries = allowed.map((module) => {
 			commonjs(),
 			nodeResolve({ preferBuiltins: false, browser: true }),
 			webWorkerLoader({ target: 'browser', pattern: /^(.+)\?worker$/ }),
-			css(),
+			// Replace the vite specific inline query with nothing so that the import is valid
+			replace({
+				preventAssignment: true,
+				values: {
+					'?inline': '',
+				}
+			}),
+			css({ minify: true }),
 			esbuild({ minify: true, sourceMap: true }),
 		],
 	};
diff --git a/src/Umbraco.Web.UI.Client/src/tsconfig.build.json b/src/Umbraco.Web.UI.Client/src/tsconfig.build.json
index 078d969271..fb00a47d31 100644
--- a/src/Umbraco.Web.UI.Client/src/tsconfig.build.json
+++ b/src/Umbraco.Web.UI.Client/src/tsconfig.build.json
@@ -8,7 +8,7 @@
 		"composite": true,
 		"sourceMap": false,
 		"declaration": true,
-		"resolveJsonModule": true
+		"allowImportingTsExtensions": false
 	},
 	"include": ["./**/*.ts", "./**/*.json", "./**/*.js"],
 	"exclude": ["./**/*.test.ts", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 3747bafb49..5daea1d3fb 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -1,23 +1,28 @@
 {
 	"compilerOptions": {
 		"module": "esnext",
-		"target": "esnext",
+		"target": "ES2020",
 		"lib": ["es2020", "dom", "dom.iterable"],
-		"noEmit": true,
 		"outDir": "./types",
-		"strict": true,
-		"noImplicitReturns": true,
-		"noFallthroughCasesInSwitch": true,
-		"moduleResolution": "node",
-		"isolatedModules": true,
 		"allowSyntheticDefaultImports": true,
 		"experimentalDecorators": true,
 		"forceConsistentCasingInFileNames": true,
 		"useDefineForClassFields": false,
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
 		"baseUrl": ".",
 		"incremental": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitReturns": true,
+
 		"paths": {
 			// TODO: can we combine these of multiple tsconfigs so each package can hold their own?
 			// APPS

From 54bf6e45dbf1c03de673556e965cf2f72fd020b6 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Sat, 16 Dec 2023 11:03:14 +0100
Subject: [PATCH 14/86] add skipLipCheck back

---
 src/Umbraco.Web.UI.Client/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 5daea1d3fb..c3b12bd025 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -10,6 +10,7 @@
 		"useDefineForClassFields": false,
 		"baseUrl": ".",
 		"incremental": true,
+		"skipLibCheck": true,
 
 		/* Bundler mode */
 		"moduleResolution": "bundler",

From 2b759e904b2c8fcbbb12a462613dc224ca7a7cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 18 Dec 2023 19:34:37 +1300
Subject: [PATCH 15/86] add object type input and repo

---
 .../src/packages/core/index.ts                |  1 +
 .../src/packages/core/object-type/index.ts    |  2 +
 .../object-type/input-object-type.element.ts  | 57 +++++++++++++++++++
 .../object-type/object-type.repository.ts     | 25 ++++++++
 4 files changed, 85 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts
index 21661c1e53..e0e9907a0f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/index.ts
@@ -42,6 +42,7 @@ export * from './variant/index.js';
 export * from './workspace/index.js';
 export * from './culture/index.js';
 export * from './temporary-file/index.js';
+export * from './object-type/index.js';
 
 const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
 	...conditionManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts
new file mode 100644
index 0000000000..8e0d365e79
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/index.ts
@@ -0,0 +1,2 @@
+export * from './object-type.repository.js';
+export * from './input-object-type.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts
new file mode 100644
index 0000000000..cdb0995911
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts
@@ -0,0 +1,57 @@
+import { html, customElement, property, query, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUISelectElement, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbObjectTypeRepository } from './object-type.repository';
+
+@customElement('umb-input-object-type')
+export class UmbInputObjectTypeElement extends FormControlMixin(UmbLitElement) {
+	@query('uui-select')
+	private select!: UUISelectElement;
+
+	@property()
+	public set value(value: UUISelectElement['value']) {
+		this.select.value = value;
+	}
+	public get value(): UUISelectElement['value'] {
+		return this.select.value;
+	}
+
+	@state()
+	private _options: UUISelectElement['options'] = [];
+
+	#repository: UmbObjectTypeRepository;
+
+	constructor() {
+		super();
+
+		this.#repository = new UmbObjectTypeRepository(this);
+
+		this.#repository.read().then(({ data, error }) => {
+			if (!data) return;
+
+			this._options = data.items.map((item) => ({ value: item.id, name: item.name ?? '' }));
+		});
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	#onChange() {
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	render() {
+		return html`<uui-select .options=${this._options} @change=${this.#onChange}></uui-select> `;
+	}
+
+	static styles = [];
+}
+
+export default UmbInputObjectTypeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-object-type': UmbInputObjectTypeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts
new file mode 100644
index 0000000000..35a175779e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/object-type.repository.ts
@@ -0,0 +1,25 @@
+import { ObjectTypesResource } from '@umbraco-cms/backoffice/backend-api';
+import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
+import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+export class UmbObjectTypeRepository extends UmbBaseController implements UmbApi {
+	#host: UmbControllerHost;
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+
+		this.#host = host;
+	}
+
+	async #read() {
+		return tryExecuteAndNotify(this.#host, ObjectTypesResource.getObjectTypes({}));
+	}
+
+	async read() {
+		const { data, error } = await this.#read();
+
+		return { data, error };
+	}
+}

From 09d18bcc8214090eff703618cd47e9222e977bb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 18 Dec 2023 19:34:47 +1300
Subject: [PATCH 16/86] use object type input

---
 ...pe-workspace-view-relation-type.element.ts | 39 ++++---------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
index 046ed210d1..070f8a4157 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
@@ -88,43 +88,18 @@ export class UmbRelationTypeWorkspaceViewRelationTypeElement extends UmbLitEleme
 		if (!this.#workspaceContext?.getIsNew() && this._relationType)
 			return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
 
-		//TODO Get the actual list of object types
-		return html`<uui-select
-			slot="editor"
-			@change=${this.#onParentObjectTypeChange}
-			.options=${[
-				{
-					name: 'Document',
-					value: 'c66ba18e-eaf3-4cff-8a22-41b16d66a972',
-				},
-				{
-					name: 'Media',
-					value: 'b796f64c-1f99-4ffb-b886-4bf4bc011a9c',
-				},
-			]}>
-			></uui-select
-		>`;
+		return html`
+			<umb-input-object-type @change=${this.#onParentObjectTypeChange} slot="editor"></umb-input-object-type>
+		`;
 	}
 
 	#renderChildProperty() {
 		if (!this.#workspaceContext?.getIsNew() && this._relationType)
-			return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
+			return html`<div slot="editor">${this._relationType.childObjectTypeName}</div>`;
 
-		//TODO Get the actual list of object types
-		return html`<uui-select
-			slot="editor"
-			@change=${this.#onChildObjectTypeChange}
-			.options=${[
-				{
-					name: 'Document',
-					value: 'c66ba18e-eaf3-4cff-8a22-41b16d66a972',
-				},
-				{
-					name: 'Media',
-					value: 'b796f64c-1f99-4ffb-b886-4bf4bc011a9c',
-				},
-			]}>
-		</uui-select>`;
+		return html`
+			<umb-input-object-type @change=${this.#onChildObjectTypeChange} slot="editor"></umb-input-object-type>
+		`;
 	}
 
 	static styles = [

From dc77ca2f50f226eabd9f39389c3103ac3ddfc196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 19 Dec 2023 19:43:10 +1300
Subject: [PATCH 17/86] fix lint

---
 .../packages/core/object-type/input-object-type.element.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts
index cdb0995911..3d24c0a152 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/object-type/input-object-type.element.ts
@@ -1,7 +1,7 @@
-import { html, customElement, property, query, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin, UUISelectElement, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbObjectTypeRepository } from './object-type.repository.js';
+import { html, customElement, property, query, state } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUISelectElement } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbObjectTypeRepository } from './object-type.repository';
 
 @customElement('umb-input-object-type')
 export class UmbInputObjectTypeElement extends FormControlMixin(UmbLitElement) {

From 298c62eb7b4203fded31ad5c9e3c45950f2ebd85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 2 Jan 2024 17:04:25 +1300
Subject: [PATCH 18/86] wip

---
 .../repository/relation-type.repository.ts    | 15 +++++++
 .../repository/relation.repository.ts         | 39 ++++++++++++++++++
 .../sources/relation-type.server.data.ts      | 20 +++++++++
 .../sources/relation.server.data.ts           | 41 +++++++++++++++++++
 .../relation-type-workspace.context.ts        |  4 ++
 5 files changed, 119 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation.repository.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation.server.data.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
index fae1dc1e66..3ebe61d241 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
@@ -59,6 +59,21 @@ export class UmbRelationTypeRepository
 		return this.#detailDataSource.createScaffold(parentId);
 	}
 
+	async requestRelationsById(id: string) {
+		await this.#init;
+
+		// TODO: should we show a notification if the id is missing?
+		// Investigate what is best for Acceptance testing, cause in that perspective a thrown error might be the best choice?
+		if (!id) {
+			throw new Error('Id is missing');
+		}
+
+		const { data, error } = await this.#detailDataSource.readRelations(id);
+		debugger;
+
+		return { data, error };
+	}
+
 	async requestById(id: string) {
 		await this.#init;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation.repository.ts
new file mode 100644
index 0000000000..6ad4eadf1d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation.repository.ts
@@ -0,0 +1,39 @@
+import { UmbRelationServerDataSource } from './sources/relation.server.data.js';
+import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
+import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+
+export class UmbRelationRepository extends UmbBaseController implements UmbApi {
+	#init!: Promise<unknown>;
+
+	#detailDataSource: UmbRelationServerDataSource;
+	#notificationContext?: UmbNotificationContext;
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+
+		// TODO: figure out how spin up get the correct data source
+		this.#detailDataSource = new UmbRelationServerDataSource(this._host);
+
+		this.#init = Promise.all([
+			this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
+				this.#notificationContext = instance;
+			}).asPromise(),
+		]);
+	}
+
+	async requestById(id: string) {
+		await this.#init;
+
+		// TODO: should we show a notification if the id is missing?
+		// Investigate what is best for Acceptance testing, cause in that perspective a thrown error might be the best choice?
+		if (!id) {
+			throw new Error('Id is missing');
+		}
+
+		const { data, error } = await this.#detailDataSource.read(id);
+
+		return { data, error };
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
index ced4b404f6..f12cddfb2f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
@@ -4,6 +4,7 @@ import {
 	RelationTypeResponseModel,
 	CreateRelationTypeRequestModel,
 	UpdateRelationTypeRequestModel,
+	RelationResource,
 } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
@@ -49,6 +50,25 @@ export class UmbRelationTypeServerDataSource
 		);
 	}
 
+	/**
+	 * Fetches a Relation Type with the given id from the server
+	 * @param {string} id
+	 * @return {*}
+	 * @memberof UmbRelationTypeServerDataSource
+	 */
+	async readRelations(id: string) {
+		if (!id) {
+			throw new Error('Id is missing');
+		}
+
+		return tryExecuteAndNotify(
+			this.#host,
+			RelationResource.getRelationTypeById({
+				id,
+			}),
+		);
+	}
+
 	/**
 	 * Creates a new Relation Type scaffold
 	 * @param {(string | null)} parentId
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation.server.data.ts
new file mode 100644
index 0000000000..c9490ee2ca
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation.server.data.ts
@@ -0,0 +1,41 @@
+import { RelationResource } from '@umbraco-cms/backoffice/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * A data source for the Relation that fetches data from the server
+ * @export
+ * @class UmbRelationServerDataSource
+ * @implements {RepositoryDetailDataSource}
+ */
+export class UmbRelationServerDataSource {
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbRelationServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbRelationServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Fetches relations by the given id from the server
+	 * @param {string} id
+	 * @return {*}
+	 * @memberof UmbRelationServerDataSource
+	 */
+	async read(id: string) {
+		if (!id) {
+			throw new Error('Id is missing');
+		}
+
+		return tryExecuteAndNotify(
+			this.#host,
+			RelationResource.getRelationTypeById({
+				id,
+			}),
+		);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
index 07c6993695..299c36a583 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
@@ -24,6 +24,10 @@ export class UmbRelationTypeWorkspaceContext
 	async load(id: string) {
 		const { data } = await this.repository.requestById(id);
 
+		const { data: relations } = await this.repository.requestRelationsById(id);
+
+		debugger;
+
 		if (data) {
 			this.setIsNew(false);
 			this.#data.update(data);

From cda8ede2c6ea70cf2550870457c03a6533f8348d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 3 Jan 2024 19:10:06 +1300
Subject: [PATCH 19/86] cleanup

---
 .../repository/relation-type.repository.ts               | 1 -
 .../workspace/relation-type-workspace.context.ts         | 9 +++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
index 3ebe61d241..2b9af764ed 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
@@ -69,7 +69,6 @@ export class UmbRelationTypeRepository
 		}
 
 		const { data, error } = await this.#detailDataSource.readRelations(id);
-		debugger;
 
 		return { data, error };
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
index 299c36a583..82ef1403d0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
@@ -24,10 +24,6 @@ export class UmbRelationTypeWorkspaceContext
 	async load(id: string) {
 		const { data } = await this.repository.requestById(id);
 
-		const { data: relations } = await this.repository.requestRelationsById(id);
-
-		debugger;
-
 		if (data) {
 			this.setIsNew(false);
 			this.#data.update(data);
@@ -41,6 +37,11 @@ export class UmbRelationTypeWorkspaceContext
 		this.#data.next(data);
 	}
 
+	async getRelations() {
+		//TODO: How do we test this?
+		return await this.repository.requestRelationsById(this.getEntityId());
+	}
+
 	getData() {
 		return this.#data.getValue();
 	}

From 72706c62ae3f646a2bfa2396f3d4705ee8bad6af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 3 Jan 2024 19:13:50 +1300
Subject: [PATCH 20/86] fix build

---
 .../repository/sources/relation-type.server.data.ts             | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
index f12cddfb2f..2e91fb1006 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
@@ -82,6 +82,8 @@ export class UmbRelationTypeServerDataSource
 			alias: '',
 			isBidirectional: false,
 			isDependency: false,
+			path: '',
+			isSystemRelationType: false,
 		};
 
 		return { data };

From bc09e08e5cb5787ce3ee0bd249576ce5383cbcf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:49:57 +1300
Subject: [PATCH 21/86] update import map

---
 src/Umbraco.Web.UI.Client/package.json               | 3 ++-
 src/Umbraco.Web.UI.Client/tsconfig.json              | 3 ++-
 src/Umbraco.Web.UI.Client/web-test-runner.config.mjs | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index f3df7fa2e0..ad577347e0 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -62,7 +62,8 @@
 		"./data-type": "./dist-cms/packages/core/data-type/index.js",
 		"./language": "./dist-cms/packages/settings/languages/index.js",
 		"./logviewer": "./dist-cms/packages/settings/logviewer/index.js",
-		"./relation-type": "./dist-cms/packages/settings/relation-types/index.js",
+		"./relation-type": "./dist-cms/packages/relations/relation-types/index.js",
+		"./relation": "./dist-cms/packages/relations/relations/index.js",
 		"./tags": "./dist-cms/packages/tags/index.js",
 		"./static-file": "./dist-cms/packages/static-file/index.js",
 		"./partial-view": "./dist-cms/packages/templating/partial-views/index.js",
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 3747bafb49..723fc5b01c 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -87,7 +87,8 @@
 			"@umbraco-cms/backoffice/data-type": ["./src/packages/core/data-type/index.ts"],
 			"@umbraco-cms/backoffice/language": ["./src/packages/settings/languages/index.ts"],
 			"@umbraco-cms/backoffice/logviewer": ["src/packages/log-viewer/index.ts"],
-			"@umbraco-cms/backoffice/relation-type": ["./src/packages/settings/relation-types/index.ts"],
+			"@umbraco-cms/backoffice/relation-types": ["src/packages/relations/relation-types/index.ts"],
+			"@umbraco-cms/backoffice/relations": ["src/packages/relations/relations/index.ts"],
 			"@umbraco-cms/backoffice/tags": ["./src/packages/tags/index.ts"],
 			"@umbraco-cms/backoffice/static-file": ["./src/packages/static-file/index.ts"],
 
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index 91b9dc9e89..17cb0ff4e1 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -106,7 +106,8 @@ export default {
 						'@umbraco-cms/backoffice/data-type': './src/packages/core/data-type/index.ts',
 						'@umbraco-cms/backoffice/language': './src/packages/settings/languages/index.ts',
 						'@umbraco-cms/backoffice/logviewer': './src/packages/settings/logviewer/index.ts',
-						'@umbraco-cms/backoffice/relation-type': './src/packages/settings/relation-types/index.ts',
+						'@umbraco-cms/backoffice/relation-type': './src/packages/relations/relation-types/index.ts',
+						'@umbraco-cms/backoffice/relation': './src/packages/relations/relations/index.ts',
 						'@umbraco-cms/backoffice/tags': './src/packages/tags/index.ts',
 						'@umbraco-cms/backoffice/static-file': './src/packages/static-file/index.ts',
 						'@umbraco-cms/backoffice/partial-view': './src/packages/templating/partial-views/index.ts',

From 1047a67e2631f9c8ef6167ff73ee39fc393ce256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 4 Jan 2024 17:23:56 +1300
Subject: [PATCH 22/86] add core package

---
 .../src/apps/backoffice/backoffice.element.ts                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
index 5044f6ccbd..17d532a707 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
@@ -15,6 +15,7 @@ const CORE_PACKAGES = [
 	import('../../packages/core/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
 	import('../../packages/documents/umbraco-package.js'),
+	import('../../packages/relations/umbraco-package.js'),
 	import('../../packages/media/umbraco-package.js'),
 	import('../../packages/members/umbraco-package.js'),
 	import('../../packages/dictionary/umbraco-package.js'),

From 0760e6d743faf9435a5cb5b668f0ba65bca4941e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 4 Jan 2024 17:24:19 +1300
Subject: [PATCH 23/86] remove relations from settings manifest

---
 src/Umbraco.Web.UI.Client/src/packages/settings/manifests.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/manifests.ts
index 3e1e34d012..0d518e2776 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/manifests.ts
@@ -1,7 +1,6 @@
 import { manifests as dashboardManifests } from './dashboards/manifests.js';
 import { manifests as extensionManifests } from './extensions/manifests.js';
 import { manifests as languageManifests } from './languages/manifests.js';
-import { manifests as relationTypeManifests } from './relation-types/manifests.js';
 import { manifests as settingsMenuManifests } from './menu.manifests.js';
 import { manifests as settingsSectionManifests } from './section.manifests.js';
 
@@ -9,7 +8,6 @@ export const manifests = [
 	...dashboardManifests,
 	...extensionManifests,
 	...languageManifests,
-	...relationTypeManifests,
 	...settingsMenuManifests,
 	...settingsSectionManifests,
 ];

From 0598272b12deed8d8d9e09e0ff6dc53dc418a27b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 4 Jan 2024 17:24:41 +1300
Subject: [PATCH 24/86] make relations package

---
 .../src/packages/relations/index.ts                 |  4 ++++
 .../src/packages/relations/manifests.ts             |  4 ++++
 .../relation-types/entities.ts                      |  0
 .../relation-types/entity-actions/create.action.ts  |  0
 .../relation-types/entity-actions/manifests.ts      |  0
 .../{settings => relations}/relation-types/index.ts |  0
 .../relation-types/manifests.ts                     |  0
 .../relation-types/menu-item/manifests.ts           |  0
 .../relation-types/repository/index.ts              |  0
 .../relation-types/repository/manifests.ts          |  2 +-
 .../repository/relation-type.repository.ts          |  0
 .../repository/relation-type.store.ts               |  0
 .../repository/sources/relation-type.server.data.ts |  0
 .../relation-types/tree/index.ts                    |  0
 .../relation-types/tree/manifests.ts                |  0
 .../tree/relation-type-tree.repository.ts           |  0
 .../tree/relation-type-tree.server.data-source.ts   |  0
 .../relation-types/tree/relation-type-tree.store.ts |  0
 .../relation-types/tree/types.ts                    |  0
 .../relation-types/workspace/manifests.ts           |  0
 .../relation-type-workspace-editor.element.ts       |  0
 .../workspace/relation-type-workspace.context.ts    |  0
 .../workspace/relation-type-workspace.element.ts    |  0
 .../workspace/relation-type-workspace.stories.ts    |  0
 ...ion-type-workspace-view-relation-type.element.ts |  0
 ...ion-type-workspace-view-relation-type.stories.ts |  0
 ...workspace-view-relation-type-relation.element.ts |  0
 ...workspace-view-relation-type-relation.stories.ts |  0
 .../src/packages/relations/relations/entities.ts    |  1 +
 .../src/packages/relations/relations/index.ts       |  2 ++
 .../src/packages/relations/relations/manifests.ts   |  3 +++
 .../relations/relations/repository/index.ts         |  1 +
 .../relations/relations/repository/manifests.ts     | 13 +++++++++++++
 .../relations}/repository/relation.repository.ts    |  0
 .../repository/sources/relation.server.data.ts      |  0
 .../src/packages/relations/umbraco-package.ts       |  9 +++++++++
 36 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/manifests.ts
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/entities.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/entity-actions/create.action.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/entity-actions/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/menu-item/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/repository/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/repository/manifests.ts (88%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/repository/relation-type.repository.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/repository/relation-type.store.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/repository/sources/relation-type.server.data.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/tree/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/tree/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/tree/relation-type-tree.repository.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/tree/relation-type-tree.server.data-source.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/tree/relation-type-tree.store.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/tree/types.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/manifests.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/relation-type-workspace-editor.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/relation-type-workspace.context.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/relation-type-workspace.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/relation-type-workspace.stories.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings => relations}/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts (100%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/relations/entities.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/relations/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/relations/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/manifests.ts
 rename src/Umbraco.Web.UI.Client/src/packages/{settings/relation-types => relations/relations}/repository/relation.repository.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/{settings/relation-types => relations/relations}/repository/sources/relation.server.data.ts (100%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/relations/umbraco-package.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/index.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/index.ts
new file mode 100644
index 0000000000..2a421f612c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/index.ts
@@ -0,0 +1,4 @@
+import './relation-types/index.js';
+import './relations/index.js';
+
+export * from './manifests.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/manifests.ts
new file mode 100644
index 0000000000..0df7e9bea0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/manifests.ts
@@ -0,0 +1,4 @@
+import { manifests as relationManifests } from './relations/manifests.js';
+import { manifests as relationTypeManifests } from './relation-types/manifests.js';
+
+export const manifests = [...relationTypeManifests, ...relationManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entities.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/entities.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entities.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/entities.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/entity-actions/create.action.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/create.action.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/entity-actions/create.action.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/entity-actions/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/entity-actions/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/entity-actions/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/menu-item/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/menu-item/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/menu-item/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/manifests.ts
similarity index 88%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/manifests.ts
index aea2595058..0af82d025b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/manifests.ts
@@ -1,4 +1,4 @@
-import { UmbRelationTypeRepository } from '../repository/relation-type.repository.js';
+import { UmbRelationTypeRepository } from './relation-type.repository.js';
 import { UmbRelationTypeStore } from './relation-type.store.js';
 import { ManifestStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/relation-type.repository.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.repository.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/relation-type.repository.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.store.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/relation-type.store.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation-type.store.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/relation-type.store.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/sources/relation-type.server.data.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation-type.server.data.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/repository/sources/relation-type.server.data.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/relation-type-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/relation-type-tree.repository.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/relation-type-tree.repository.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/relation-type-tree.repository.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/relation-type-tree.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/relation-type-tree.server.data-source.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/relation-type-tree.server.data-source.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/relation-type-tree.server.data-source.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/relation-type-tree.store.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/relation-type-tree.store.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/relation-type-tree.store.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/relation-type-tree.store.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/types.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/tree/types.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/tree/types.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/manifests.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace-editor.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace-editor.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace-editor.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.context.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.context.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.context.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.stories.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/relation-type-workspace.stories.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.stories.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.stories.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.stories.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/entities.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/entities.ts
new file mode 100644
index 0000000000..197d94a6e7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/entities.ts
@@ -0,0 +1 @@
+export const UMB_RELATION_ENTITY_TYPE = 'relation';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/index.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/index.ts
new file mode 100644
index 0000000000..7bbcc83722
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/index.ts
@@ -0,0 +1,2 @@
+export * from './repository/index.js';
+export * from './entities.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/manifests.ts
new file mode 100644
index 0000000000..4e1826b900
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/manifests.ts
@@ -0,0 +1,3 @@
+import { manifests as repositoryManifests } from './repository/manifests.js';
+
+export const manifests = [...repositoryManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/index.ts
new file mode 100644
index 0000000000..5a2d860e87
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/index.ts
@@ -0,0 +1 @@
+export * from './relation.repository.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/manifests.ts
new file mode 100644
index 0000000000..0a8b0eacbb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/manifests.ts
@@ -0,0 +1,13 @@
+import { UmbRelationRepository } from './relation.repository.js';
+import { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_RELATION_REPOSITORY_ALIAS = 'Umb.Repository.Relation';
+
+const repository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_RELATION_REPOSITORY_ALIAS,
+	name: 'Relation Repository',
+	api: UmbRelationRepository,
+};
+
+export const manifests = [repository];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/relation.repository.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/relation.repository.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/relation.repository.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/sources/relation.server.data.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/settings/relation-types/repository/sources/relation.server.data.ts
rename to src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/sources/relation.server.data.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/umbraco-package.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/umbraco-package.ts
new file mode 100644
index 0000000000..fb27644d7b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/umbraco-package.ts
@@ -0,0 +1,9 @@
+export const name = 'Umbraco.Core.Relations';
+export const extensions = [
+	{
+		name: 'Relations Bundle',
+		alias: 'Umb.Bundle.Relations',
+		type: 'bundle',
+		js: () => import('./manifests.js'),
+	},
+];

From 24d5de0afa56cf671bd295f6284622d6ad424c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 5 Jan 2024 10:52:53 +1300
Subject: [PATCH 25/86] move handlers to new relations folder

---
 .../src/mocks/browser-handlers.ts             |  4 +-
 .../mocks/handlers/relation-type.handlers.ts  | 76 -------------------
 .../src/mocks/handlers/relations/index.ts     |  1 +
 .../relation-types/detail.handlers.ts         | 47 ++++++++++++
 .../relations/relation-types/index.ts         |  4 +
 .../handlers/relations/relation-types/slug.ts |  1 +
 .../relations/relation-types/tree.handlers.ts | 36 +++++++++
 7 files changed, 91 insertions(+), 78 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relation-type.handlers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/slug.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index cac7ae809b..cc6544084a 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -1,5 +1,4 @@
 import { handlers as dataTypeHandlers } from './handlers/data-type/index.js';
-import { handlers as relationTypeHandlers } from './handlers/relation-type.handlers.js';
 import { handlers as documentTypeHandlers } from './handlers/document-type/index.js';
 import { handlers as installHandlers } from './handlers/install.handlers.js';
 import * as manifestsHandlers from './handlers/manifests.handlers.js';
@@ -11,6 +10,7 @@ import { handlers as telemetryHandlers } from './handlers/telemetry.handlers.js'
 import { handlers as userGroupsHandlers } from './handlers/user-group/index.js';
 import { handlers as examineManagementHandlers } from './handlers/examine-management.handlers.js';
 import { handlers as modelsBuilderHandlers } from './handlers/modelsbuilder.handlers.js';
+import { handlers as relationHandlers } from './handlers/relations/index.js';
 import { handlers as healthCheckHandlers } from './handlers/health-check.handlers.js';
 import { handlers as profilingHandlers } from './handlers/performance-profiling.handlers.js';
 import { handlers as documentHandlers } from './handlers/document/index.js';
@@ -58,7 +58,7 @@ const handlers = [
 	...profilingHandlers,
 	...publishedStatusHandlers,
 	...redirectManagementHandlers,
-	...relationTypeHandlers,
+	...relationHandlers,
 	...rteEmbedHandlers,
 	...scriptHandlers,
 	...staticFileHandlers,
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relation-type.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relation-type.handlers.ts
deleted file mode 100644
index ad208e5d65..0000000000
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relation-type.handlers.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-const { rest } = window.MockServiceWorker;
-import { umbRelationTypeData } from '../data/relation-type.data.js';
-import { umbracoPath } from '@umbraco-cms/backoffice/utils';
-
-// TODO: add schema
-export const handlers = [
-	rest.delete<string[]>('/umbraco/backoffice/relation-type/:id', async (req, res, ctx) => {
-		const id = req.params.id as string;
-		if (!id) return;
-
-		umbRelationTypeData.delete([id]);
-
-		return res(ctx.status(200));
-	}),
-
-	rest.get('/umbraco/management/api/v1/tree/relation-type/root', (req, res, ctx) => {
-		const rootItems = umbRelationTypeData.getTreeRoot();
-		const response = {
-			total: rootItems.length,
-			items: rootItems,
-		};
-		return res(ctx.status(200), ctx.json(response));
-	}),
-
-	rest.get('/umbraco/management/api/v1/tree/relation-type/children', (req, res, ctx) => {
-		const parentId = req.url.searchParams.get('parentId');
-		if (!parentId) return;
-
-		const children = umbRelationTypeData.getTreeItemChildren(parentId);
-
-		const response = {
-			total: children.length,
-			items: children,
-		};
-
-		return res(ctx.status(200), ctx.json(response));
-	}),
-
-	rest.get('/umbraco/management/api/v1/tree/relation-type/item', (req, res, ctx) => {
-		const ids = req.url.searchParams.getAll('id');
-		if (!ids) return;
-		const items = umbRelationTypeData.getTreeItem(ids);
-		return res(ctx.status(200), ctx.json(items));
-	}),
-
-	rest.get(umbracoPath('/relation-type/:id'), (req, res, ctx) => {
-		const id = req.params.id as string;
-		if (!id) return;
-
-		const RelationType = umbRelationTypeData.getById(id);
-
-		return res(ctx.status(200), ctx.json(RelationType));
-	}),
-
-	rest.post(umbracoPath('/relation-type/:id'), async (req, res, ctx) => {
-		const id = req.params.id as string;
-		if (!id) return;
-		const data = await req.json();
-		if (!data) return;
-
-		umbRelationTypeData.insert(data);
-
-		return res(ctx.status(200));
-	}),
-
-	rest.put(umbracoPath('/relation-type/:id'), async (req, res, ctx) => {
-		const id = req.params.id as string;
-		if (!id) return;
-		const data = await req.json();
-		if (!data) return;
-
-		umbRelationTypeData.save(id, data);
-
-		return res(ctx.status(200));
-	}),
-];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts
new file mode 100644
index 0000000000..4903a21656
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts
@@ -0,0 +1 @@
+export * from './relation-types/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts
new file mode 100644
index 0000000000..4f7cf607ba
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts
@@ -0,0 +1,47 @@
+const { rest } = window.MockServiceWorker;
+import { umbRelationTypeData } from '../../../data/relation-type.data.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+// TODO: add schema
+export const handlers = [
+	rest.delete<string[]>(umbracoPath(`${UMB_SLUG}/:id`), async (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return;
+
+		umbRelationTypeData.delete([id]);
+
+		return res(ctx.status(200));
+	}),
+
+	rest.get(umbracoPath(`${UMB_SLUG}/:id`), (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return;
+
+		const RelationType = umbRelationTypeData.getById(id);
+
+		return res(ctx.status(200), ctx.json(RelationType));
+	}),
+
+	rest.post(umbracoPath(`${UMB_SLUG}/:id`), async (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return;
+		const data = await req.json();
+		if (!data) return;
+
+		umbRelationTypeData.insert(data);
+
+		return res(ctx.status(200));
+	}),
+
+	rest.put(umbracoPath(`${UMB_SLUG}/:id`), async (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return;
+		const data = await req.json();
+		if (!data) return;
+
+		umbRelationTypeData.save(id, data);
+
+		return res(ctx.status(200));
+	}),
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts
new file mode 100644
index 0000000000..865bbcb066
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts
@@ -0,0 +1,4 @@
+import { handlers as detailHandlers } from './detail.handlers.js';
+import { handlers as treeHandlers } from './tree.handlers.js';
+
+export const handlers = [...detailHandlers, ...treeHandlers];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/slug.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/slug.ts
new file mode 100644
index 0000000000..16aae5847e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/slug.ts
@@ -0,0 +1 @@
+export const UMB_SLUG = '/relation-type';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts
new file mode 100644
index 0000000000..c33fae2727
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts
@@ -0,0 +1,36 @@
+const { rest } = window.MockServiceWorker;
+import { umbRelationTypeData } from '../../../data/relation-type.data.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const handlers = [
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/root`), (req, res, ctx) => {
+		const rootItems = umbRelationTypeData.getTreeRoot();
+		const response = {
+			total: rootItems.length,
+			items: rootItems,
+		};
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/children`), (req, res, ctx) => {
+		const parentId = req.url.searchParams.get('parentId');
+		if (!parentId) return;
+
+		const children = umbRelationTypeData.getTreeItemChildren(parentId);
+
+		const response = {
+			total: children.length,
+			items: children,
+		};
+
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/item`), (req, res, ctx) => {
+		const ids = req.url.searchParams.getAll('id');
+		if (!ids) return;
+		const items = umbRelationTypeData.getTreeItem(ids);
+		return res(ctx.status(200), ctx.json(items));
+	}),
+];

From 4b8cd3a2d5914e49b25c5d3fad49f1b0eed5aa65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:17:50 +1300
Subject: [PATCH 26/86] add missing function to repo

---
 .../repository/relation.repository.ts         | 14 +++++++++++++
 .../sources/relation.server.data.ts           | 20 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/relation.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/relation.repository.ts
index 6ad4eadf1d..f3ec9bc63c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/relation.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/relation.repository.ts
@@ -36,4 +36,18 @@ export class UmbRelationRepository extends UmbBaseController implements UmbApi {
 
 		return { data, error };
 	}
+
+	async requestChildRelationById(childId: string, relationTypeAlias?: string) {
+		await this.#init;
+
+		// TODO: should we show a notification if the id is missing?
+		// Investigate what is best for Acceptance testing, cause in that perspective a thrown error might be the best choice?
+		if (!childId) {
+			throw new Error('Id is missing');
+		}
+
+		const { data, error } = await this.#detailDataSource.readChildRelations(childId, relationTypeAlias);
+
+		return { data, error };
+	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/sources/relation.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/sources/relation.server.data.ts
index c9490ee2ca..9e8845bcb9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/sources/relation.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relations/repository/sources/relation.server.data.ts
@@ -38,4 +38,24 @@ export class UmbRelationServerDataSource {
 			}),
 		);
 	}
+
+	/**
+	 * Fetches relations by the given id from the server
+	 * @param {string} childId
+	 * @return {*}
+	 * @memberof UmbRelationServerDataSource
+	 */
+	async readChildRelations(childId: string, relationTypeAlias?: string) {
+		if (!childId) {
+			throw new Error('Id is missing');
+		}
+
+		return tryExecuteAndNotify(
+			this.#host,
+			RelationResource.getRelationChildRelationByChildId({
+				childId,
+				relationTypeAlias,
+			}),
+		);
+	}
 }

From cc852446b0ccb8a354c519d86bc6497cfe5f83a1 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 5 Jan 2024 15:48:27 +0100
Subject: [PATCH 27/86] audit log and info workspace

---
 src/Umbraco.Web.UI.Client/package.json        |   1 +
 .../src/apps/backoffice/backoffice.element.ts |   1 +
 .../src/packages/audit-log/index.ts           |   1 +
 .../src/packages/audit-log/manifests.ts       |   3 +
 .../repository/audit-log.repository.ts        |  67 +++++++
 .../repository/audit-log.server.data.ts       |  80 +++++++++
 .../packages/audit-log/repository/index.ts    |   2 +
 .../audit-log/repository/manifests.ts         |  13 ++
 .../src/packages/audit-log/umbraco-package.ts |   9 +
 .../history/history-item.element.ts           |   2 +-
 .../document-info-workspace-view.element.ts   | 158 ++--------------
 ...ent-info-general-workspace-view.element.ts |   0
 ...ent-info-history-workspace-view.element.ts | 170 ++++++++++++++++++
 .../views/info/history/history-utils.ts       |  64 +++++++
 ...ument-info-links-workspace-view.element.ts |   0
 ...t-info-reference-workspace-view.element.ts |   0
 src/Umbraco.Web.UI.Client/tsconfig.json       |   1 +
 .../web-test-runner.config.mjs                |   1 +
 18 files changed, 432 insertions(+), 141 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.repository.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.server.data.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/audit-log/umbraco-package.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/general/document-info-general-workspace-view.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/links/document-info-links-workspace-view.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/reference/document-info-reference-workspace-view.element.ts

diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index f3df7fa2e0..19af4fd69b 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -49,6 +49,7 @@
 		"./events": "./dist-cms/packages/core/umb-events/index.js",
 		"./repository": "./dist-cms/packages/core/repository/index.js",
 		"./temporary-file": "./dist-cms/packages/core/temporary-file/index.js",
+		"./audit-log": "./dist-cms/packages/audit-log/index.js",
 		"./dictionary": "./dist-cms/packages/dictionary/dictionary/index.js",
 		"./document": "./dist-cms/packages/documents/documents/index.js",
 		"./document-blueprint": "./dist-cms/packages/documents/document-blueprints/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
index 5044f6ccbd..954fa8d5e5 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
@@ -12,6 +12,7 @@ import './components/index.js';
 
 // TODO: temp solution to load core packages
 const CORE_PACKAGES = [
+	import('../../packages/audit-log/umbraco-package.js'),
 	import('../../packages/core/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
 	import('../../packages/documents/umbraco-package.js'),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/index.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/index.ts
new file mode 100644
index 0000000000..3d76f338dd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/index.ts
@@ -0,0 +1 @@
+export * from './repository/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/manifests.ts
new file mode 100644
index 0000000000..4e1826b900
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/manifests.ts
@@ -0,0 +1,3 @@
+import { manifests as repositoryManifests } from './repository/manifests.js';
+
+export const manifests = [...repositoryManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.repository.ts
new file mode 100644
index 0000000000..79796d6350
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.repository.ts
@@ -0,0 +1,67 @@
+import { UmbAuditLogServerDataSource } from './audit-log.server.data.js';
+import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+import { AuditTypeModel, DirectionModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
+
+export class UmbAuditLogRepository extends UmbBaseController {
+	#dataSource: UmbAuditLogServerDataSource;
+	#notificationService?: UmbNotificationContext;
+	#init;
+
+	constructor(host: UmbControllerHostElement) {
+		super(host);
+		this.#dataSource = new UmbAuditLogServerDataSource(host);
+
+		this.#init = new UmbContextConsumerController(host, UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
+			this.#notificationService = instance;
+		}).asPromise();
+	}
+
+	async getLog({
+		orderDirection,
+		sinceDate,
+		skip = 0,
+		take = 100,
+	}: {
+		orderDirection?: DirectionModel;
+		sinceDate?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		await this.#init;
+
+		return this.#dataSource.getAuditLog({ orderDirection, sinceDate, skip, take });
+	}
+
+	async getAuditLogByUnique({
+		id,
+		orderDirection,
+		skip = 0,
+		take = 100,
+	}: {
+		id: string;
+		orderDirection?: DirectionModel;
+		skip?: number;
+		take?: number;
+	}) {
+		await this.#init;
+		return this.#dataSource.getAuditLogById({ id, orderDirection, skip, take });
+	}
+
+	async getAuditLogTypeByLogType({
+		logType,
+		sinceDate,
+		skip,
+		take,
+	}: {
+		logType: AuditTypeModel;
+		sinceDate?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		await this.#init;
+		return this.#dataSource.getAuditLogTypeByLogType({ logType, sinceDate, skip, take });
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.server.data.ts
new file mode 100644
index 0000000000..7fbd256231
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/audit-log.server.data.ts
@@ -0,0 +1,80 @@
+import { AuditLogResource, DirectionModel, AuditTypeModel } from '@umbraco-cms/backoffice/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * A data source for Data Type items that fetches data from the server
+ * @export
+ * @class UmbAuditLogServerDataSource
+ */
+export class UmbAuditLogServerDataSource {
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbAuditLogServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbAuditLogServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Fetches the items for the given ids from the server
+	 * @param {Array<string>} ids
+	 * @return {*}
+	 * @memberof UmbAuditLogServerDataSource
+	 */
+	async getAuditLog({
+		orderDirection,
+		sinceDate,
+		skip,
+		take,
+	}: {
+		orderDirection?: DirectionModel;
+		sinceDate?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			AuditLogResource.getAuditLog({ orderDirection, sinceDate, skip, take }),
+		);
+	}
+
+	async getAuditLogById({
+		id,
+		orderDirection,
+		sinceDate,
+		skip,
+		take,
+	}: {
+		id: string;
+		orderDirection?: DirectionModel;
+		sinceDate?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			AuditLogResource.getAuditLogById({ id, orderDirection, sinceDate, skip, take }),
+		);
+	}
+
+	async getAuditLogTypeByLogType({
+		logType,
+		sinceDate,
+		skip,
+		take,
+	}: {
+		logType: AuditTypeModel;
+		sinceDate?: string;
+		skip?: number;
+		take?: number;
+	}) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			AuditLogResource.getAuditLogTypeByLogType({ logType, sinceDate, skip, take }),
+		);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/index.ts
new file mode 100644
index 0000000000..0b87786128
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/index.ts
@@ -0,0 +1,2 @@
+export { UMB_AUDIT_LOG_REPOSITORY_ALIAS as AUDIT_LOG_REPOSITORY_ALIAS } from './manifests.js';
+export { UmbAuditLogRepository } from './audit-log.repository.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/manifests.ts
new file mode 100644
index 0000000000..072eb15b79
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/repository/manifests.ts
@@ -0,0 +1,13 @@
+import { UmbAuditLogRepository } from './audit-log.repository.js';
+import type { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_AUDIT_LOG_REPOSITORY_ALIAS = 'Umb.Repository.AuditLog';
+
+const repository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_AUDIT_LOG_REPOSITORY_ALIAS,
+	name: 'AuditLog Repository',
+	api: UmbAuditLogRepository,
+};
+
+export const manifests = [repository];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/audit-log/umbraco-package.ts b/src/Umbraco.Web.UI.Client/src/packages/audit-log/umbraco-package.ts
new file mode 100644
index 0000000000..5f4f04e17c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/audit-log/umbraco-package.ts
@@ -0,0 +1,9 @@
+export const name = 'Umbraco.Core.AuditLog';
+export const extensions = [
+	{
+		name: 'Audit Log Bundle',
+		alias: 'Umb.Bundle.AuditLog',
+		type: 'bundle',
+		js: () => import('./manifests.js'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
index 851f6a5f50..bd8737e579 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
@@ -43,11 +43,11 @@ export class UmbHistoryItemElement extends UmbLitElement {
 				gap: calc(2 * var(--uui-size-space-5));
 				align-items: center;
 			}
+
 			.slots-wrapper {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				flex: 1;
 			}
 
 			slot[name='actions'] {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
index c7cc7117e2..40c9267f90 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
@@ -1,27 +1,15 @@
-import { css, html, nothing, repeat, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-interface HistoryNode {
-	userId?: number;
-	userAvatars?: [];
-	userName?: string;
-	timestamp?: string;
-	comment?: string;
-	entityType?: string;
-	logType?: HistoryLogType;
-	nodeId?: string;
-	parameters?: string;
-}
-
-type HistoryLogType = 'Publish' | 'Save' | 'Unpublish' | 'ContentVersionEnableCleanup' | 'ContentVersionPreventCleanup';
+import './history/document-info-history-workspace-view.element.js';
 
 @customElement('umb-document-info-workspace-view')
 export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
-	@state()
-	private _historyList: HistoryNode[] = [
+	/** Dont delete, need for mock data */
+	/*@state()
+	private _historyList: [] = [
 		{
 			userId: -1,
 			userAvatars: [],
@@ -79,13 +67,7 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 			nodeId: '1058',
 			parameters: undefined,
 		},
-	];
-
-	@state()
-	private _total?: number;
-
-	@state()
-	private _currentPage = 1;
+	];*/
 
 	@state()
 	private _nodeName = '';
@@ -94,7 +76,6 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 	private _documentTypeId = '';
 
 	private _workspaceContext?: typeof UMB_WORKSPACE_CONTEXT.TYPE;
-	private itemsPerPage = 10;
 
 	@state()
 	private _editDocumentTypePath = '';
@@ -130,27 +111,14 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 		*/
 	}
 
-	#onPageChange(event: UUIPaginationEvent) {
-		if (this._currentPage === event.target.current) return;
-		this._currentPage = event.target.current;
-		//TODO: Run endpoint to get next history parts
-	}
-
 	render() {
 		return html`<div class="container">
 				<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;">
 					${this.#renderLinksSection()}
 				</uui-box>
-				<uui-box headline=${this.localize.term('general_history')}>
-					<umb-history-list>
-						${repeat(
-							this._historyList,
-							(item) => item.timestamp,
-							(item) => this.#renderHistory(item),
-						)}
-					</umb-history-list>
-					${this.#renderHistoryPagination()}
-				</uui-box>
+
+				<umb-document-info-history-workspace-view
+					.documentUnique=${this._documentTypeId}></umb-document-info-history-workspace-view>
 			</div>
 			<div class="container">
 				<uui-box headline="General" id="general-section">${this.#renderGeneralSection()}</uui-box>
@@ -158,7 +126,6 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 	}
 
 	#renderLinksSection() {
-		//repeat
 		return html`<div id="link-section">
 			<a href="http://google.com" target="_blank" class="link-item with-href">
 				<span class="link-language">da-DK</span>
@@ -175,104 +142,34 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 		return html`
 			<div class="general-item">
 				<strong>${this.localize.term('content_publishStatus')}</strong>
-				<span
-					><uui-tag color="positive" look="primary" label=${this.localize.term('content_published')}
-						><umb-localize key="content_published"></umb-localize></uui-tag
-				></span>
+				<span>
+					<uui-tag color="positive" look="primary" label=${this.localize.term('content_published')}>
+						<umb-localize key="content_published"></umb-localize>
+					</uui-tag>
+				</span>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="content_createDate"></umb-localize></strong>
-				<span><umb-localize-date date="${new Date()}"></umb-localize-date></span>
+				<span><umb-localize-date .date="${new Date()}"></umb-localize-date></span>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="content_documentType"></umb-localize></strong>
 				<uui-button
+					look="secondary"
 					href=${this._editDocumentTypePath + 'edit/' + this._documentTypeId}
 					label=${this.localize.term('general_edit')}></uui-button>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="template_template"></umb-localize></strong>
-				<span>IMPLEMENT template picker?</span>
+				<uui-button look="secondary" label="Template picker TODO"></uui-button>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="template_id"></umb-localize></strong>
-				<span>...</span>
+				<span>${this._documentTypeId}</span>
 			</div>
 		`;
 	}
 
-	#renderHistory(history: HistoryNode) {
-		return html` <umb-history-item .name="${history.userName}" .detail="${this.localize.date(history.timestamp!)}">
-			<span class="log-type"
-				>${this.#renderTag(history.logType)} ${this.#renderTagDescription(history.logType, history)}</span
-			>
-			<uui-button label=${this.localize.term('actions_rollback')} look="secondary" slot="actions">
-				<uui-icon name="icon-undo"></uui-icon>
-				<umb-localize key="actions_rollback"></umb-localize>
-			</uui-button>
-		</umb-history-item>`;
-	}
-
-	#renderHistoryPagination() {
-		if (!this._total) return nothing;
-
-		const totalPages = Math.ceil(this._total / this.itemsPerPage);
-
-		if (totalPages <= 1) return nothing;
-
-		return html`<div class="pagination">
-			<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
-		</div>`;
-	}
-
-	#renderTag(type?: HistoryLogType) {
-		switch (type) {
-			case 'Publish':
-				return html`<uui-tag look="primary" color="positive" label=${this.localize.term('content_publish')}
-					><umb-localize key="content_publish"></umb-localize
-				></uui-tag>`;
-			case 'Unpublish':
-				return html`<uui-tag look="primary" color="warning" label=${this.localize.term('content_unpublish')}
-					><umb-localize key="content_unpublish"></umb-localize
-				></uui-tag>`;
-			case 'Save':
-				return html`<uui-tag look="primary" label=${this.localize.term('auditTrails_smallSave')}
-					><umb-localize key="auditTrails_smallSave"></umb-localize
-				></uui-tag>`;
-			case 'ContentVersionEnableCleanup':
-				return html`<uui-tag
-					look="secondary"
-					label=${this.localize.term('contentTypeEditor_historyCleanupEnableCleanup')}
-					><umb-localize key="contentTypeEditor_historyCleanupEnableCleanup"></umb-localize
-				></uui-tag>`;
-			case 'ContentVersionPreventCleanup':
-				return html`<uui-tag
-					look="secondary"
-					label=${this.localize.term('contentTypeEditor_historyCleanupPreventCleanup')}
-					><umb-localize key="contentTypeEditor_historyCleanupPreventCleanup"></umb-localize
-				></uui-tag>`;
-			default:
-				return 'Could not detect log type';
-		}
-	}
-
-	#renderTagDescription(type?: HistoryLogType, params?: HistoryNode) {
-		switch (type) {
-			case 'Publish':
-				return this.localize.term('auditTrails_publish');
-			case 'Unpublish':
-				return this.localize.term('auditTrails_unpublish');
-			case 'Save':
-				return this.localize.term('auditTrails_save');
-			case 'ContentVersionEnableCleanup':
-				return this.localize.term('auditTrails_contentversionenablecleanup', [params?.nodeId]);
-			case 'ContentVersionPreventCleanup':
-				return this.localize.term('auditTrails_contentversionpreventcleanup', [params?.nodeId]);
-			default:
-				return 'Could not detect log type';
-		}
-	}
-
 	static styles = [
 		UmbTextStyles,
 		css`
@@ -342,25 +239,6 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 			.link-item.with-href:hover {
 				background: var(--uui-color-divider);
 			}
-
-			//History section
-
-			uui-tag uui-icon {
-				margin-right: var(--uui-size-space-1);
-			}
-
-			.log-type {
-				display: flex;
-				gap: var(--uui-size-space-2);
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-			.pagination {
-				display: flex;
-				justify-content: center;
-				margin-top: var(--uui-size-space-4);
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/general/document-info-general-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/general/document-info-general-workspace-view.element.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
new file mode 100644
index 0000000000..7fde696b4d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
@@ -0,0 +1,170 @@
+import { HistoricTagAndDescription } from './history-utils.js';
+import { css, html, customElement, state, property, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbAuditLogRepository } from '@umbraco-cms/backoffice/audit-log';
+import { AuditLogBaseModel, DirectionModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-document-info-history-workspace-view')
+export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
+	#logRepository: UmbAuditLogRepository;
+	#itemsPerPage = 10;
+
+	@property()
+	documentUnique = '';
+
+	@state()
+	private _total?: number;
+
+	@state()
+	private _items?: Array<AuditLogBaseModel>;
+
+	@state()
+	private _currentPage = 1;
+
+	constructor() {
+		super();
+		this.#logRepository = new UmbAuditLogRepository(this);
+	}
+
+	protected firstUpdated(): void {
+		this.#getLogs();
+	}
+
+	async #getLogs() {
+		this._items = undefined;
+		if (!this.documentUnique) return;
+
+		/*const { data } = await this.#logRepository.getAuditLogByUnique({
+			id: this.documentUnique,
+			orderDirection: DirectionModel.DESCENDING,
+			skip: (this._currentPage - 1) * this.#itemsPerPage,
+			take: this.#itemsPerPage,
+		});
+
+		if (!data) return;
+		this._total = data.total;
+		this._items = data.items;
+		*/
+
+		//TODO: I think there is an issue with the API (backend). Hacking for now.
+		// Uncomment previous code and delete the following when issue fixed.
+
+		const { data } = await this.#logRepository.getAuditLogByUnique({
+			id: '',
+			orderDirection: DirectionModel.DESCENDING,
+			skip: 0,
+			take: 99999,
+		});
+
+		if (!data) return;
+
+		// Hack list to only get the items for the current document
+		const list = data.items.filter((item) => item.entityId === this.documentUnique);
+		this._total = list.length;
+
+		// Hack list to only get the items for the current page
+		this._items = list.slice(
+			(this._currentPage - 1) * this.#itemsPerPage,
+			(this._currentPage - 1) * this.#itemsPerPage + this.#itemsPerPage,
+		);
+	}
+
+	#localizeTimestamp(timestamp: string) {
+		//TODO In what format should we show the timestamps.. Server based? Localized? Other?
+		//What about user's current culture? (American vs European date format) based on their user setting or windows setting?
+		return new Date(timestamp).toLocaleString();
+	}
+
+	#onPageChange(event: UUIPaginationEvent) {
+		if (this._currentPage === event.target.current) return;
+		this._currentPage = event.target.current;
+
+		this.#getLogs();
+	}
+
+	render() {
+		return html`<uui-box headline=${this.localize.term('general_history')}>
+			${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
+			${this.#renderHistoryPagination()}
+		</uui-box>`;
+	}
+
+	#renderHistory() {
+		if (this._items && this._items.length) {
+			return html`
+				<umb-history-list>
+					${repeat(
+						this._items,
+						(item) => item.timestamp,
+						(item) => {
+							const { text, style } = HistoricTagAndDescription(item.logType);
+							return html`<umb-history-item name="TODO Username" detail=${this.#localizeTimestamp(item.timestamp)}>
+								<span class="log-type">
+									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
+									${this.localize.term(text.desc, item.parameters)}
+								</span>
+								<uui-button label=${this.localize.term('actions_rollback')} look="secondary" slot="actions">
+									<uui-icon name="icon-undo"></uui-icon>
+									<umb-localize key="actions_rollback"></umb-localize>
+								</uui-button>
+							</umb-history-item>`;
+						},
+					)}
+				</umb-history-list>
+			`;
+		} else {
+			return html`No items found`;
+		}
+	}
+
+	#renderHistoryPagination() {
+		if (!this._total) return nothing;
+
+		const totalPages = Math.ceil(this._total / this.#itemsPerPage);
+
+		if (totalPages <= 1) return nothing;
+
+		return html`<div class="pagination">
+			<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
+		</div>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			uui-loader-circle {
+				font-size: 2rem;
+			}
+
+			uui-tag uui-icon {
+				margin-right: var(--uui-size-space-1);
+			}
+
+			.log-type {
+				flex-grow: 1;
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+
+			uui-pagination {
+				flex: 1;
+				display: inline-block;
+			}
+			.pagination {
+				display: flex;
+				justify-content: center;
+				margin-top: var(--uui-size-space-4);
+			}
+		`,
+	];
+}
+
+export default UmbDocumentInfoHistoryWorkspaceViewElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-info-history-workspace-view': UmbDocumentInfoHistoryWorkspaceViewElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts
new file mode 100644
index 0000000000..8c21d64b6d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts
@@ -0,0 +1,64 @@
+import { AuditTypeModel } from '@umbraco-cms/backoffice/backend-api';
+
+interface HistoricStyleMap {
+	look: 'default' | 'primary' | 'secondary' | 'outline' | 'placeholder';
+	color: 'default' | 'danger' | 'warning' | 'positive';
+}
+
+interface HistoricText {
+	label: string;
+	desc: string;
+}
+
+interface HistoricData {
+	style: HistoricStyleMap;
+	text: HistoricText;
+}
+
+// Return label, color, look, desc
+
+export function HistoricTagAndDescription(type: AuditTypeModel): HistoricData {
+	switch (type) {
+		case AuditTypeModel.SAVE:
+			return {
+				style: { look: 'primary', color: 'default' },
+				text: { label: 'auditTrails_smallSave', desc: 'auditTrails_save' },
+			};
+
+		case AuditTypeModel.PUBLISH:
+			return {
+				style: { look: 'primary', color: 'positive' },
+				text: { label: 'content_publish', desc: 'auditTrails_publish' },
+			};
+
+		case AuditTypeModel.UNPUBLISH:
+			return {
+				style: { look: 'primary', color: 'warning' },
+				text: { label: 'content_unpublish', desc: 'auditTrails_unpublish' },
+			};
+
+		case AuditTypeModel.CONTENT_VERSION_ENABLE_CLEANUP:
+			return {
+				style: { look: 'secondary', color: 'default' },
+				text: {
+					label: 'contentTypeEditor_historyCleanupEnableCleanup',
+					desc: 'auditTrails_contentversionenablecleanup',
+				},
+			};
+
+		case AuditTypeModel.CONTENT_VERSION_PREVENT_CLEANUP:
+			return {
+				style: { look: 'secondary', color: 'default' },
+				text: {
+					label: 'contentTypeEditor_historyCleanupPreventCleanup',
+					desc: 'auditTrails_contentversionpreventcleanup',
+				},
+			};
+
+		default:
+			return {
+				style: { look: 'placeholder', color: 'danger' },
+				text: { label: type, desc: 'TODO' },
+			};
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/links/document-info-links-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/links/document-info-links-workspace-view.element.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/reference/document-info-reference-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/reference/document-info-reference-workspace-view.element.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 3747bafb49..7357960276 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -87,6 +87,7 @@
 			"@umbraco-cms/backoffice/data-type": ["./src/packages/core/data-type/index.ts"],
 			"@umbraco-cms/backoffice/language": ["./src/packages/settings/languages/index.ts"],
 			"@umbraco-cms/backoffice/logviewer": ["src/packages/log-viewer/index.ts"],
+			"@umbraco-cms/backoffice/audit-log": ["src/packages/audit-log/index.ts"],
 			"@umbraco-cms/backoffice/relation-type": ["./src/packages/settings/relation-types/index.ts"],
 			"@umbraco-cms/backoffice/tags": ["./src/packages/tags/index.ts"],
 			"@umbraco-cms/backoffice/static-file": ["./src/packages/static-file/index.ts"],
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index 91b9dc9e89..e1322ca4d4 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -90,6 +90,7 @@ export default {
 						'@umbraco-cms/backoffice/event': './src/packages/core/event/index.ts',
 						'@umbraco-cms/backoffice/repository': './src/packages/core/repository/index.ts',
 						'@umbraco-cms/backoffice/temporary-file': './src/packages/core/temporary-file/index.ts',
+						'@umbraco-cms/backoffice/audit-log': './src/packages/core/audit-log/index.ts',
 
 						'@umbraco-cms/backoffice/dictionary': './src/packages/dictionary/dictionary/index.ts',
 

From b4f5e165338590c90440ad98d16e1e9a8934df57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:11:18 +1300
Subject: [PATCH 28/86] add object type handler and data

---
 .../data/object-type/object-type.data.ts      | 32 +++++++++++++++++++
 .../src/mocks/handlers/object-type/index.ts   |  3 ++
 .../handlers/object-type/item.handlers.ts     | 11 +++++++
 .../src/mocks/handlers/object-type/slug.ts    |  1 +
 4 files changed, 47 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/data/object-type/object-type.data.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/item.handlers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/slug.ts

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/object-type/object-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/object-type/object-type.data.ts
new file mode 100644
index 0000000000..ced9f0b6c9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/object-type/object-type.data.ts
@@ -0,0 +1,32 @@
+import { UmbEntityData } from '../entity.data.js';
+import type { ObjectTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export const data: Array<ObjectTypeResponseModel> = [
+	{
+		id: '1',
+		name: 'Media',
+	},
+	{
+		id: '2',
+		name: 'Content',
+	},
+	{
+		id: '3',
+		name: 'User',
+	},
+	{
+		id: '4',
+		name: 'Document',
+	},
+];
+
+// Temp mocked database
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+class UmbObjectTypeData extends UmbEntityData<ObjectTypeResponseModel> {
+	constructor() {
+		super(data);
+	}
+}
+
+export const umbObjectTypeData = new UmbObjectTypeData();
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/index.ts
new file mode 100644
index 0000000000..f1df43458a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/index.ts
@@ -0,0 +1,3 @@
+import { handlers as itemHandlers } from './item.handlers.js';
+
+export const handlers = [...itemHandlers];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/item.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/item.handlers.ts
new file mode 100644
index 0000000000..0d4426e00d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/item.handlers.ts
@@ -0,0 +1,11 @@
+const { rest } = window.MockServiceWorker;
+import { umbObjectTypeData } from '../../data/object-type/object-type.data.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const handlers = [
+	rest.get(umbracoPath(`${UMB_SLUG}`), (req, res, ctx) => {
+		const response = umbObjectTypeData.getAll();
+		return res(ctx.status(200), ctx.json(response));
+	}),
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/slug.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/slug.ts
new file mode 100644
index 0000000000..9809e3f7b7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/object-type/slug.ts
@@ -0,0 +1 @@
+export const UMB_SLUG = '/object-types';

From b88bd79eca626a73a83fb9cdddca77fe9dba509a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:11:30 +1300
Subject: [PATCH 29/86] relation mocks

---
 .../src/mocks/browser-handlers.ts             |  5 +-
 .../{ => relations}/relation-type.data.ts     |  4 +-
 .../src/mocks/data/relations/relation.data.ts | 79 +++++++++++++++++++
 .../src/mocks/handlers/relations/index.ts     |  3 +-
 .../detail.handlers.ts                        |  2 +-
 .../index.ts                                  |  2 +-
 .../{relation-types => relation-type}/slug.ts |  0
 .../tree.handlers.ts                          |  2 +-
 .../handlers/relations/relation/index.ts      |  3 +
 .../relations/relation/item.handlers.ts       | 36 +++++++++
 10 files changed, 129 insertions(+), 7 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/mocks/data/{ => relations}/relation-type.data.ts (97%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
 rename src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/{relation-types => relation-type}/detail.handlers.ts (93%)
 rename src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/{relation-types => relation-type}/index.ts (63%)
 rename src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/{relation-types => relation-type}/slug.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/{relation-types => relation-type}/tree.handlers.ts (92%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index cc6544084a..e1fe61b753 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -10,7 +10,8 @@ import { handlers as telemetryHandlers } from './handlers/telemetry.handlers.js'
 import { handlers as userGroupsHandlers } from './handlers/user-group/index.js';
 import { handlers as examineManagementHandlers } from './handlers/examine-management.handlers.js';
 import { handlers as modelsBuilderHandlers } from './handlers/modelsbuilder.handlers.js';
-import { handlers as relationHandlers } from './handlers/relations/index.js';
+import { relationHandlers, relationTypeHandlers } from './handlers/relations/index.js';
+import { handlers as objectTypeHandlers } from './handlers/object-type/index.js';
 import { handlers as healthCheckHandlers } from './handlers/health-check.handlers.js';
 import { handlers as profilingHandlers } from './handlers/performance-profiling.handlers.js';
 import { handlers as documentHandlers } from './handlers/document/index.js';
@@ -59,6 +60,8 @@ const handlers = [
 	...publishedStatusHandlers,
 	...redirectManagementHandlers,
 	...relationHandlers,
+	...objectTypeHandlers,
+	...relationTypeHandlers,
 	...rteEmbedHandlers,
 	...scriptHandlers,
 	...staticFileHandlers,
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/relation-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation-type.data.ts
similarity index 97%
rename from src/Umbraco.Web.UI.Client/src/mocks/data/relation-type.data.ts
rename to src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation-type.data.ts
index 7de5f02825..ffe6093a17 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/relation-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation-type.data.ts
@@ -1,5 +1,5 @@
-import { UmbEntityData } from './entity.data.js';
-import { createEntityTreeItem } from './utils.js';
+import { UmbEntityData } from '../entity.data.js';
+import { createEntityTreeItem } from '../utils.js';
 import type { EntityTreeItemResponseModel, RelationTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 // TODO: investigate why we don't get an entity type as part of the RelationTypeResponseModel
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
new file mode 100644
index 0000000000..4576ad3078
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
@@ -0,0 +1,79 @@
+import type { RelationResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export const data: Array<RelationResponseModel> = [
+	{
+		parentId: '1',
+		parentName: 'TEST Parent 1',
+		childId: '2',
+		childName: 'Child 1',
+		createDate: '2021-01-01',
+		comment: 'Comment 1',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '3',
+		childName: 'Child 2',
+		createDate: '2021-01-01',
+		comment: 'Comment 2',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '4',
+		childName: 'Child 3',
+		createDate: '2021-01-01',
+		comment: 'Comment 3',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '5',
+		childName: 'Child 4',
+		createDate: '2021-01-01',
+		comment: 'Comment 4',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '6',
+		childName: 'Child 5',
+		createDate: '2021-01-01',
+		comment: 'Comment 5',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '7',
+		childName: 'Child 6',
+		createDate: '2021-01-01',
+		comment: 'Comment 6',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '8',
+		childName: 'Child 7',
+		createDate: '2021-01-01',
+		comment: 'Comment 7',
+	},
+	{
+		parentId: '1',
+		parentName: 'Parent 1',
+		childId: '9',
+		childName: 'Child 8',
+		createDate: '2021-01-01',
+		comment: 'Comment 8',
+	},
+];
+
+// Temp mocked database
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+class UmbRelationData extends UmbEntityData<RelationResponseModel> {
+	constructor() {
+		super(data);
+	}
+}
+
+export const umbRelationData = new UmbRelationData();
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts
index 4903a21656..c920b2fd73 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/index.ts
@@ -1 +1,2 @@
-export * from './relation-types/index.js';
+export * from './relation/index.js';
+export * from './relation-type/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/detail.handlers.ts
similarity index 93%
rename from src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts
rename to src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/detail.handlers.ts
index 4f7cf607ba..4d2b87e074 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/detail.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/detail.handlers.ts
@@ -1,5 +1,5 @@
 const { rest } = window.MockServiceWorker;
-import { umbRelationTypeData } from '../../../data/relation-type.data.js';
+import { umbRelationTypeData } from '../../../data/relations/relation-type.data.js';
 import { UMB_SLUG } from './slug.js';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/index.ts
similarity index 63%
rename from src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts
rename to src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/index.ts
index 865bbcb066..8b9e50e347 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/index.ts
@@ -1,4 +1,4 @@
 import { handlers as detailHandlers } from './detail.handlers.js';
 import { handlers as treeHandlers } from './tree.handlers.js';
 
-export const handlers = [...detailHandlers, ...treeHandlers];
+export const relationTypeHandlers = [...detailHandlers, ...treeHandlers];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/slug.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/slug.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/slug.ts
rename to src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/slug.ts
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/tree.handlers.ts
similarity index 92%
rename from src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts
rename to src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/tree.handlers.ts
index c33fae2727..985c09b929 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-types/tree.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation-type/tree.handlers.ts
@@ -1,5 +1,5 @@
 const { rest } = window.MockServiceWorker;
-import { umbRelationTypeData } from '../../../data/relation-type.data.js';
+import { umbRelationTypeData } from '../../../data/relations/relation-type.data.js';
 import { UMB_SLUG } from './slug.js';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/index.ts
new file mode 100644
index 0000000000..46b27bbdb7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/index.ts
@@ -0,0 +1,3 @@
+import { handlers as itemHandlers } from './item.handlers.js';
+
+export const relationHandlers = [...itemHandlers];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts
new file mode 100644
index 0000000000..985c09b929
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts
@@ -0,0 +1,36 @@
+const { rest } = window.MockServiceWorker;
+import { umbRelationTypeData } from '../../../data/relations/relation-type.data.js';
+import { UMB_SLUG } from './slug.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const handlers = [
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/root`), (req, res, ctx) => {
+		const rootItems = umbRelationTypeData.getTreeRoot();
+		const response = {
+			total: rootItems.length,
+			items: rootItems,
+		};
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/children`), (req, res, ctx) => {
+		const parentId = req.url.searchParams.get('parentId');
+		if (!parentId) return;
+
+		const children = umbRelationTypeData.getTreeItemChildren(parentId);
+
+		const response = {
+			total: children.length,
+			items: children,
+		};
+
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/item`), (req, res, ctx) => {
+		const ids = req.url.searchParams.getAll('id');
+		if (!ids) return;
+		const items = umbRelationTypeData.getTreeItem(ids);
+		return res(ctx.status(200), ctx.json(items));
+	}),
+];

From 1244509822e3aca91ed46ef066d10b6b782cd847 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:11:50 +1300
Subject: [PATCH 30/86] relation mocks

---
 .../src/mocks/handlers/relations/relation/slug.ts               | 1 +
 .../relation-types/workspace/relation-type-workspace.stories.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/slug.ts

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/slug.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/slug.ts
new file mode 100644
index 0000000000..ba6bc7ffc4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/slug.ts
@@ -0,0 +1 @@
+export const UMB_SLUG = '/relation';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.stories.ts
index 72fe092d1c..401fd251ed 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type-workspace.stories.ts
@@ -1,7 +1,7 @@
 import './relation-type-workspace.element.js';
 
 import { Meta, Story } from '@storybook/web-components';
-import { data } from '../../../../mocks/data/relation-type.data.js';
+import { data } from '../../../../mocks/data/relations/relation-type.data.js';
 import type { UmbRelationTypeWorkspaceElement } from './relation-type-workspace.element.js';
 import { html, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 

From 3959890d6ca0b27a6a97f36b4f1d0c08a4a9c2de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:35:04 +1300
Subject: [PATCH 31/86] relation mocks

---
 .../src/mocks/data/relations/relation.data.ts | 38 +++++++++++--------
 .../relations/relation/item.handlers.ts       | 31 +++------------
 2 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
index 4576ad3078..ca46d6ca9e 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
@@ -1,65 +1,66 @@
+import { UmbEntityData } from '../entity.data.js';
 import type { RelationResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export const data: Array<RelationResponseModel> = [
 	{
-		parentId: '1',
-		parentName: 'TEST Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '2',
 		childName: 'Child 1',
 		createDate: '2021-01-01',
 		comment: 'Comment 1',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '3',
 		childName: 'Child 2',
 		createDate: '2021-01-01',
 		comment: 'Comment 2',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '4',
 		childName: 'Child 3',
 		createDate: '2021-01-01',
 		comment: 'Comment 3',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '5',
 		childName: 'Child 4',
 		createDate: '2021-01-01',
 		comment: 'Comment 4',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '6',
 		childName: 'Child 5',
 		createDate: '2021-01-01',
 		comment: 'Comment 5',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '7',
 		childName: 'Child 6',
 		createDate: '2021-01-01',
 		comment: 'Comment 6',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '8',
 		childName: 'Child 7',
 		createDate: '2021-01-01',
 		comment: 'Comment 7',
 	},
 	{
-		parentId: '1',
-		parentName: 'Parent 1',
+		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentName: 'Relate Document On Copy',
 		childId: '9',
 		childName: 'Child 8',
 		createDate: '2021-01-01',
@@ -74,6 +75,11 @@ class UmbRelationData extends UmbEntityData<RelationResponseModel> {
 	constructor() {
 		super(data);
 	}
+
+	getRelationsByParentId(id: string) {
+		const test = this.data.filter((relation) => relation.parentId === id);
+		return { items: test, total: test.length };
+	}
 }
 
 export const umbRelationData = new UmbRelationData();
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts
index 985c09b929..80bae2824b 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/relations/relation/item.handlers.ts
@@ -1,36 +1,15 @@
 const { rest } = window.MockServiceWorker;
-import { umbRelationTypeData } from '../../../data/relations/relation-type.data.js';
+import { umbRelationData } from '../../../data/relations/relation.data.js';
 import { UMB_SLUG } from './slug.js';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 export const handlers = [
-	rest.get(umbracoPath(`/tree${UMB_SLUG}/root`), (req, res, ctx) => {
-		const rootItems = umbRelationTypeData.getTreeRoot();
-		const response = {
-			total: rootItems.length,
-			items: rootItems,
-		};
-		return res(ctx.status(200), ctx.json(response));
-	}),
+	rest.get(umbracoPath(`${UMB_SLUG}/type/:id`), (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return;
 
-	rest.get(umbracoPath(`/tree${UMB_SLUG}/children`), (req, res, ctx) => {
-		const parentId = req.url.searchParams.get('parentId');
-		if (!parentId) return;
-
-		const children = umbRelationTypeData.getTreeItemChildren(parentId);
-
-		const response = {
-			total: children.length,
-			items: children,
-		};
+		const response = umbRelationData.getRelationsByParentId(id);
 
 		return res(ctx.status(200), ctx.json(response));
 	}),
-
-	rest.get(umbracoPath(`/tree${UMB_SLUG}/item`), (req, res, ctx) => {
-		const ids = req.url.searchParams.getAll('id');
-		if (!ids) return;
-		const items = umbRelationTypeData.getTreeItem(ids);
-		return res(ctx.status(200), ctx.json(items));
-	}),
 ];

From e64b2242a73a5b9c89fcb3006be006e785a43836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:35:15 +1300
Subject: [PATCH 32/86] use api in relation view

---
 ...ace-view-relation-type-relation.element.ts | 96 +++++--------------
 1 file changed, 25 insertions(+), 71 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
index 58ecf96072..5c57f3cf40 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
@@ -1,6 +1,7 @@
+import { UMB_RELATION_TYPE_WORKSPACE_CONTEXT } from '../../relation-type-workspace.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTableColumn, UmbTableConfig } from '@umbraco-cms/backoffice/components';
+import { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { RelationResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -9,7 +10,27 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis
 export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement implements UmbWorkspaceViewElement {
 	//TODO Use real data
 	@state()
-	_relations: Array<RelationResponseModel> = MockData;
+	_relations: Array<RelationResponseModel> = [];
+
+	#workspaceContext?: typeof UMB_RELATION_TYPE_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_RELATION_TYPE_WORKSPACE_CONTEXT, (instance) => {
+			this.#workspaceContext = instance;
+			this.#getRelations();
+		});
+	}
+
+	async #getRelations() {
+		if (!this.#workspaceContext) {
+			return;
+		}
+
+		const response = await this.#workspaceContext.getRelations();
+		this._relations = response.data?.items ?? [];
+	}
 
 	private _tableConfig: UmbTableConfig = {
 		allowSelection: false,
@@ -35,10 +56,10 @@ export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement i
 		},
 	];
 
-	private get _tableItems() {
+	private get _tableItems(): UmbTableItem[] {
 		return this._relations.map((relation) => {
 			return {
-				key: relation.parentId + '-' + relation.childId,
+				id: relation.parentId + '-' + relation.childId, // Add the missing id property
 				data: [
 					{
 						columnAlias: 'parent',
@@ -78,73 +99,6 @@ export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement i
 	];
 }
 
-const MockData: Array<RelationResponseModel> = [
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '2',
-		childName: 'Child 1',
-		createDate: '2021-01-01',
-		comment: 'Comment 1',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '3',
-		childName: 'Child 2',
-		createDate: '2021-01-01',
-		comment: 'Comment 2',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '4',
-		childName: 'Child 3',
-		createDate: '2021-01-01',
-		comment: 'Comment 3',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '5',
-		childName: 'Child 4',
-		createDate: '2021-01-01',
-		comment: 'Comment 4',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '6',
-		childName: 'Child 5',
-		createDate: '2021-01-01',
-		comment: 'Comment 5',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '7',
-		childName: 'Child 6',
-		createDate: '2021-01-01',
-		comment: 'Comment 6',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '8',
-		childName: 'Child 7',
-		createDate: '2021-01-01',
-		comment: 'Comment 7',
-	},
-	{
-		parentId: '1',
-		parentName: 'Parent 1',
-		childId: '9',
-		childName: 'Child 8',
-		createDate: '2021-01-01',
-		comment: 'Comment 8',
-	},
-];
-
 export default UmbWorkspaceViewRelationTypeRelationElement;
 
 declare global {

From 5738a04f21a056d8b25c1a259063ea21673c4988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:38:00 +1300
Subject: [PATCH 33/86] more mock data

---
 .../src/mocks/data/relations/relation.data.ts | 48 ++++++++++++++-----
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
index ca46d6ca9e..eb2697f274 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/relations/relation.data.ts
@@ -5,7 +5,7 @@ export const data: Array<RelationResponseModel> = [
 	{
 		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
 		parentName: 'Relate Document On Copy',
-		childId: '2',
+		childId: '1',
 		childName: 'Child 1',
 		createDate: '2021-01-01',
 		comment: 'Comment 1',
@@ -13,7 +13,7 @@ export const data: Array<RelationResponseModel> = [
 	{
 		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
 		parentName: 'Relate Document On Copy',
-		childId: '3',
+		childId: '2',
 		childName: 'Child 2',
 		createDate: '2021-01-01',
 		comment: 'Comment 2',
@@ -21,7 +21,7 @@ export const data: Array<RelationResponseModel> = [
 	{
 		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
 		parentName: 'Relate Document On Copy',
-		childId: '4',
+		childId: '3',
 		childName: 'Child 3',
 		createDate: '2021-01-01',
 		comment: 'Comment 3',
@@ -29,43 +29,67 @@ export const data: Array<RelationResponseModel> = [
 	{
 		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
 		parentName: 'Relate Document On Copy',
-		childId: '5',
+		childId: '4',
 		childName: 'Child 4',
 		createDate: '2021-01-01',
 		comment: 'Comment 4',
 	},
 	{
-		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentId: 'ac68cde6-763f-4231-a751-1101b57defd2',
 		parentName: 'Relate Document On Copy',
-		childId: '6',
+		childId: '5',
 		childName: 'Child 5',
 		createDate: '2021-01-01',
 		comment: 'Comment 5',
 	},
 	{
-		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentId: 'ac68cde6-763f-4231-a751-1101b57defd2',
 		parentName: 'Relate Document On Copy',
-		childId: '7',
+		childId: '6',
 		childName: 'Child 6',
 		createDate: '2021-01-01',
 		comment: 'Comment 6',
 	},
 	{
-		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentId: '6f9b800c-762c-42d4-85d9-bf40a77d689e',
 		parentName: 'Relate Document On Copy',
-		childId: '8',
+		childId: '7',
 		childName: 'Child 7',
 		createDate: '2021-01-01',
 		comment: 'Comment 7',
 	},
 	{
-		parentId: 'e0d39ff5-71d8-453f-b682-9d8d31ee5e06',
+		parentId: 'd421727d-43de-4205-b4c6-037404f309ad',
 		parentName: 'Relate Document On Copy',
-		childId: '9',
+		childId: '8',
 		childName: 'Child 8',
 		createDate: '2021-01-01',
 		comment: 'Comment 8',
 	},
+	{
+		parentId: 'd421727d-43de-4205-b4c6-037404f309ad',
+		parentName: 'Relate Document On Copy',
+		childId: '9',
+		childName: 'Child 9',
+		createDate: '2021-01-01',
+		comment: 'Comment 9',
+	},
+	{
+		parentId: 'e9a0a28e-2d5b-4229-ac00-66f2df230513',
+		parentName: 'Relate Document On Copy',
+		childId: '10',
+		childName: 'Child 10',
+		createDate: '2021-01-01',
+		comment: 'Comment 10',
+	},
+	{
+		parentId: 'e9a0a28e-2d5b-4229-ac00-66f2df230513',
+		parentName: 'Relate Document On Copy',
+		childId: '11',
+		childName: 'Child 11',
+		createDate: '2021-01-01',
+		comment: 'Comment 11',
+	},
 ];
 
 // Temp mocked database

From 401e734f52c06ee74518aece110388652e7eade1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:13:46 +1300
Subject: [PATCH 34/86] add story

---
 .../packages/core/components/table/table.stories.ts   | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.stories.ts
index bbd06ebb6c..212b566856 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.stories.ts
@@ -101,3 +101,14 @@ export const WithHiddenIcons: Story = {
 		},
 	},
 };
+
+export const WithHiddenIconsAndDisallowedSelections: Story = {
+	args: {
+		items: items,
+		columns: columns,
+		config: {
+			allowSelection: false,
+			hideIcon: true,
+		},
+	},
+};

From 2ab22e1790bbf61f6a4d204c9ad5fa27de3e324f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:13:49 +1300
Subject: [PATCH 35/86] fix

---
 .../src/packages/core/components/table/table.element.ts     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
index 70a3f182c4..1242c59aa8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
@@ -155,7 +155,11 @@ export class UmbTableElement extends LitElement {
 
 	render() {
 		return html`<uui-table class="uui-text">
-			<uui-table-column style="width: 60px;"></uui-table-column>
+			<uui-table-column
+				.style=${when(
+					!(this.config.allowSelection === false && this.config.hideIcon === true),
+					() => 'width: 60px',
+				)}></uui-table-column>
 			<uui-table-head>
 				${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
 			</uui-table-head>

From fb93d66ad6dc0c9a81353c2af3e15269907be42f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 1 Jan 2024 18:39:35 +0000
Subject: [PATCH 36/86] Bump typescript from 5.3.2 to 5.3.3

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.3.2 to 5.3.3.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v5.3.2...v5.3.3)

---
updated-dependencies:
- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/Umbraco.Web.UI.Client/package-lock.json | 8 ++++----
 src/Umbraco.Web.UI.Client/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 44f780f893..a41d24b123 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -76,7 +76,7 @@
 				"storybook": "7.6.5",
 				"tiny-glob": "^0.2.9",
 				"tsc-alias": "^1.8.8",
-				"typescript": "^5.3.2",
+				"typescript": "^5.3.3",
 				"typescript-json-schema": "^0.62.0",
 				"vite": "^4.4.12",
 				"vite-plugin-static-copy": "^0.17.0",
@@ -21611,9 +21611,9 @@
 			"dev": true
 		},
 		"node_modules/typescript": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
-			"integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+			"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
 			"dev": true,
 			"bin": {
 				"tsc": "bin/tsc",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index f3df7fa2e0..2930fa80bd 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -202,7 +202,7 @@
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
 		"typescript-json-schema": "^0.62.0",
-		"typescript": "^5.3.2",
+		"typescript": "^5.3.3",
 		"vite-plugin-static-copy": "^0.17.0",
 		"vite-tsconfig-paths": "^4.2.0",
 		"vite": "^4.4.12",

From aa1c4455d63acba560c545a078c7565954fad8cf Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 1 Jan 2024 18:39:13 +0000
Subject: [PATCH 37/86] Bump marked from 11.1.0 to 11.1.1

Bumps [marked](https://github.com/markedjs/marked) from 11.1.0 to 11.1.1.
- [Release notes](https://github.com/markedjs/marked/releases)
- [Changelog](https://github.com/markedjs/marked/blob/master/.releaserc.json)
- [Commits](https://github.com/markedjs/marked/compare/v11.1.0...v11.1.1)

---
updated-dependencies:
- dependency-name: marked
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/Umbraco.Web.UI.Client/package-lock.json | 8 ++++----
 src/Umbraco.Web.UI.Client/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index a41d24b123..e058c10403 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -18,7 +18,7 @@
 				"element-internals-polyfill": "^1.3.9",
 				"lit": "^2.8.0",
 				"lodash-es": "4.17.21",
-				"marked": "^11.1.0",
+				"marked": "^11.1.1",
 				"monaco-editor": "^0.45.0",
 				"rxjs": "^7.8.1",
 				"tinymce": "^6.8.2",
@@ -16463,9 +16463,9 @@
 			}
 		},
 		"node_modules/marked": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/marked/-/marked-11.1.0.tgz",
-			"integrity": "sha512-fvKJWAPEafVj1dwGwcPI5mBB/0pvViL6NlCbNDG1HOIRwwAU/jeMoFxfbRLuirO1wRH7m4yPvBqD/O1wyWvayw==",
+			"version": "11.1.1",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-11.1.1.tgz",
+			"integrity": "sha512-EgxRjgK9axsQuUa/oKMx5DEY8oXpKJfk61rT5iY3aRlgU6QJtUcxU5OAymdhCvWvhYcd9FKmO5eQoX8m9VGJXg==",
 			"bin": {
 				"marked": "bin/marked.js"
 			},
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 2930fa80bd..64502a378c 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -143,7 +143,7 @@
 		"element-internals-polyfill": "^1.3.9",
 		"lit": "^2.8.0",
 		"lodash-es": "4.17.21",
-		"marked": "^11.1.0",
+		"marked": "^11.1.1",
 		"monaco-editor": "^0.45.0",
 		"rxjs": "^7.8.1",
 		"tinymce-i18n": "^23.12.4",

From 5295c6fc6d89897a8e7bb968cd710732eb47f6d1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 4 Jan 2024 16:00:26 +0000
Subject: [PATCH 38/86] Property Editor: Number - set numeric value

This was setting the value as a `string`, which would cause issues
when used in certain scenarios, e.g. MNTP min/max configuration,
the value would assumed to be numeric, but it'd be a string, so
conditions like `max === 1` would be false, as it'd be `"1"` instead.

Ensuring the value is a `number` before the "property-value-change"
event is sent appears to resolve this issue.
---
 .../uis/number/property-editor-ui-number.element.ts         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number/property-editor-ui-number.element.ts
index b7c369276c..548c303821 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number/property-editor-ui-number.element.ts
@@ -6,8 +6,8 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 
 @customElement('umb-property-editor-ui-number')
 export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	value = '';
+	@property({ type: Number })
+	value: undefined | number = undefined;
 
 	@state()
 	private _max?: number;
@@ -26,7 +26,7 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	}
 
 	private onInput(e: InputEvent) {
-		this.value = (e.target as HTMLInputElement).value;
+		this.value = Number((e.target as HTMLInputElement).value);
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 

From dbbb5067cf0bd73275b3ff46f805a09b49866751 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 4 Jan 2024 15:51:35 +0000
Subject: [PATCH 39/86] Integer schema name correction

---
 .../packages/core/property-editor/schemas/Umbraco.Integer.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Integer.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Integer.ts
index 726fd458d4..e4a699a8b9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Integer.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Integer.ts
@@ -2,7 +2,7 @@ import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/exten
 
 export const manifest: ManifestPropertyEditorSchema = {
 	type: 'propertyEditorSchema',
-	name: 'Decimal',
+	name: 'Integer',
 	alias: 'Umbraco.Integer',
 	meta: {
 		defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',

From 85df5fc2b96923adc02225e082875d91ad285466 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 8 Jan 2024 10:27:01 +0100
Subject: [PATCH 40/86] latest

---
 ...ment-info-history-workspace-view.element.ts | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
index 7fde696b4d..e37647497a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
@@ -33,7 +33,7 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 	}
 
 	async #getLogs() {
-		this._items = undefined;
+		this._items = undefined; // Reset items to show loader
 		if (!this.documentUnique) return;
 
 		/*const { data } = await this.#logRepository.getAuditLogByUnique({
@@ -50,6 +50,7 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 
 		//TODO: I think there is an issue with the API (backend). Hacking for now.
 		// Uncomment previous code and delete the following when issue fixed.
+		// This should also make it load significantly faster, can consider removing the loader
 
 		const { data } = await this.#logRepository.getAuditLogByUnique({
 			id: '',
@@ -71,12 +72,6 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 		);
 	}
 
-	#localizeTimestamp(timestamp: string) {
-		//TODO In what format should we show the timestamps.. Server based? Localized? Other?
-		//What about user's current culture? (American vs European date format) based on their user setting or windows setting?
-		return new Date(timestamp).toLocaleString();
-	}
-
 	#onPageChange(event: UUIPaginationEvent) {
 		if (this._currentPage === event.target.current) return;
 		this._currentPage = event.target.current;
@@ -86,9 +81,8 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 
 	render() {
 		return html`<uui-box headline=${this.localize.term('general_history')}>
-			${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
-			${this.#renderHistoryPagination()}
-		</uui-box>`;
+				${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `} </uui-box
+			>${this.#renderHistoryPagination()}`;
 	}
 
 	#renderHistory() {
@@ -100,7 +94,7 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 						(item) => item.timestamp,
 						(item) => {
 							const { text, style } = HistoricTagAndDescription(item.logType);
-							return html`<umb-history-item name="TODO Username" detail=${this.#localizeTimestamp(item.timestamp)}>
+							return html`<umb-history-item name="TODO Username" detail=${new Date(item.timestamp).toLocaleString()}>
 								<span class="log-type">
 									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
 									${this.localize.term(text.desc, item.parameters)}
@@ -115,7 +109,7 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 				</umb-history-list>
 			`;
 		} else {
-			return html`No items found`;
+			return html`${this.localize.term('content_noItemsToShow')}`;
 		}
 	}
 

From 103c5fc9d7a5835315d4a597ad7df1f27a6f584c Mon Sep 17 00:00:00 2001
From: Markus Johansson <markus@enkelmedia.se>
Date: Thu, 28 Dec 2023 11:25:48 +0100
Subject: [PATCH 41/86] #1012 label changes for pickers

---
 .../modal/common/tree-picker/tree-picker-modal.element.ts     | 4 ++--
 .../components/input-document/input-document.element.ts       | 4 ++--
 .../media/media/components/input-media/input-media.element.ts | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
index 9cd0f507f9..69868cf5dc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
@@ -51,8 +51,8 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 						?multiple=${this._multiple}></umb-tree>
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this._submitModal}></uui-button>
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
+					<uui-button label=${this.localize.term('general_choose')} look="primary" color="positive" @click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
index 174b3ef549..504d487406 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -115,7 +115,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 			id="add-button"
 			look="placeholder"
 			@click=${() => this.#pickerContext.openPicker()}
-			label=${this.localize.term('general_add')}></uui-button>`;
+			label=${this.localize.term('general_choose')}></uui-button>`;
 	}
 
 	private _renderItem(item: DocumentItemResponseModel) {
@@ -127,7 +127,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 					<uui-button
 						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
 						label="Remove document ${item.name}"
-						>Remove</uui-button
+						>${this.localize.term('general_remove')}</uui-button
 					>
 				</uui-action-bar>
 			</uui-ref-node>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
index d350b8ac7f..9b802c6757 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
@@ -101,9 +101,9 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	#renderButton() {
 		if (this._items && this.max && this._items.length >= this.max) return;
 		return html`
-			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open">
+			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label=${this.localize.term('general_choose')}>
 				<uui-icon name="icon-add"></uui-icon>
-				Add
+				${this.localize.term('general_choose')}
 			</uui-button>
 		`;
 	}

From c6c45cf6cc1b6772189de5aac14d6d38df59a849 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 20 Dec 2023 17:39:18 +0000
Subject: [PATCH 42/86] [WIP] Adds Member Type picker

A placeholder component for `<umb-input-member-type>`,
for use with the Multinode Treepicker property-editor.

Code files were largely duplicated from `umb-document-type-input`.
The modal context code hasn't been copied over as it requires
substantial work with developing the Member Type repository.
---
 .../token/member-type-picker-modal.token.ts   |  18 ++
 .../members/member-types/components/index.ts  |   1 +
 .../input-member-type.context.ts              |  13 ++
 .../input-member-type.element.ts              | 179 ++++++++++++++++++
 .../packages/members/member-types/index.ts    |   5 +
 .../members/member-types/manifests.ts         |  10 +-
 .../members/member-types/repository/index.ts  |   3 +-
 7 files changed, 224 insertions(+), 5 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/modal/token/member-type-picker-modal.token.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.context.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/member-types/index.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/member-type-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/member-type-picker-modal.token.ts
new file mode 100644
index 0000000000..cbb0d5f635
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/member-type-picker-modal.token.ts
@@ -0,0 +1,18 @@
+import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
+import { UmbEntityTreeItemModel } from '@umbraco-cms/backoffice/tree';
+
+export type UmbMemberTypePickerModalData = UmbTreePickerModalData<UmbEntityTreeItemModel>;
+export type UmbMemberTypePickerModalValue = UmbPickerModalValue;
+
+export const UMB_MEMBER_TYPE_PICKER_MODAL = new UmbModalToken<UmbMemberTypePickerModalData, UmbMemberTypePickerModalValue>(
+	'Umb.Modal.TreePicker',
+	{
+		modal: {
+			type: 'sidebar',
+			size: 'small',
+		},
+		data: {
+			treeAlias: 'Umb.Tree.MemberType',
+		},
+	},
+);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts
new file mode 100644
index 0000000000..eacc86c77b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts
@@ -0,0 +1 @@
+import './input-member-type/input-member-type.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.context.ts
new file mode 100644
index 0000000000..e2dbb59411
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.context.ts
@@ -0,0 +1,13 @@
+import { UMB_MEMBER_TYPE_PICKER_MODAL } from '../../../../core/modal/token/member-type-picker-modal.token.js';
+import { UMB_MEMBER_TYPE_REPOSITORY_ALIAS } from '../../repository/index.js';
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { MemberTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export class UmbMemberTypePickerContext extends UmbPickerInputContext<MemberTypeItemResponseModel> {
+	constructor(host: UmbControllerHostElement) {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		super(host, UMB_MEMBER_TYPE_REPOSITORY_ALIAS, UMB_MEMBER_TYPE_PICKER_MODAL);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
new file mode 100644
index 0000000000..12e3e64ffe
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/input-member-type/input-member-type.element.ts
@@ -0,0 +1,179 @@
+import { UmbMemberTypePickerContext } from './input-member-type.context.js';
+import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MemberTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+
+@customElement('umb-input-member-type')
+export class UmbMemberTypeInputElement extends FormControlMixin(UmbLitElement) {
+	/**
+	 * This is a minimum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default 0
+	 */
+	@property({ type: Number })
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
+	public set min(value: number) {
+		this.#pickerContext.min = value;
+	}
+
+	/**
+	 * Min validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	minMessage = 'This field need more items';
+
+	/**
+	 * This is a maximum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default Infinity
+	 */
+	@property({ type: Number })
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
+	public set max(value: number) {
+		this.#pickerContext.max = value;
+	}
+
+	/**
+	 * Max validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	maxMessage = 'This field exceeds the allowed amount of items';
+
+	public get selectedIds(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
+	public set selectedIds(ids: Array<string>) {
+		this.#pickerContext.setSelection(ids);
+	}
+
+	@property()
+	public set value(idsString: string) {
+		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+		this.selectedIds = splitStringToArray(idsString);
+	}
+
+	@property()
+	get pickableFilter() {
+		return this.#pickerContext.pickableFilter;
+	}
+	set pickableFilter(newVal) {
+		this.#pickerContext.pickableFilter = newVal;
+	}
+
+	@state()
+	private _items?: Array<MemberTypeItemResponseModel>;
+
+	#pickerContext = new UmbMemberTypePickerContext(this);
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		this.addValidator(
+			'rangeUnderflow',
+			() => this.minMessage,
+			() => !!this.min && this.#pickerContext.getSelection().length < this.min,
+		);
+
+		this.addValidator(
+			'rangeOverflow',
+			() => this.maxMessage,
+			() => !!this.max && this.#pickerContext.getSelection().length > this.max,
+		);
+
+		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+	}
+
+	protected _openPicker() {
+		this.#pickerContext.openPicker({
+			hideTreeRoot: true,
+		});
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	render() {
+		return html`
+			${this.#renderItems()}
+			${this.#renderAddButton()}
+		`;
+	}
+
+	#renderItems() {
+		if (!this._items) return;
+		// TODO: Add sorting. [LK]
+		return html`
+			<uui-ref-list
+				>${repeat(
+					this._items,
+					(item) => item.id,
+					(item) => this._renderItem(item),
+				)}</uui-ref-list
+			>
+		`;
+	}
+
+	#renderAddButton() {
+		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		return html`
+			<uui-button
+				id="add-button"
+				look="placeholder"
+				@click=${this._openPicker}
+				label="${this.localize.term('general_choose')}"
+				>${this.localize.term('general_choose')}</uui-button
+			>
+		`;
+	}
+
+	private _renderItem(item: MemberTypeItemResponseModel) {
+		if (!item.id) return;
+		return html`
+			<uui-ref-node-document-type name=${ifDefined(item.name)}>
+				<uui-action-bar slot="actions">
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
+						label="Remove Member Type ${item.name}"
+						>${this.localize.term('general_remove')}</uui-button
+					>
+				</uui-action-bar>
+			</uui-ref-node-document-type>
+		`;
+	}
+
+	static styles = [
+		css`
+			#add-button {
+				width: 100%;
+			}
+		`,
+	];
+}
+
+export default UmbMemberTypeInputElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-member-type': UmbMemberTypeInputElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/index.ts
new file mode 100644
index 0000000000..48ebd24242
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/index.ts
@@ -0,0 +1,5 @@
+import './components/index.js';
+
+export * from './components/index.js';
+export * from './repository/index.js';
+export * from './entity.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/manifests.ts
index c2dbcfe939..47e4ffa227 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/manifests.ts
@@ -1,13 +1,15 @@
+import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as menuItemManifests } from './menu-item/manifests.js';
-import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
-import { manifests as entityActionManifests } from './entity-actions/manifests.js';
+
+import './components/index.js';
 
 export const manifests = [
+	...entityActionsManifests,
 	...menuItemManifests,
-	...treeManifests,
 	...repositoryManifests,
+	...treeManifests,
 	...workspaceManifests,
-	...entityActionManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/repository/index.ts
index 8cddbed0b2..8be388a62c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/repository/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/repository/index.ts
@@ -1 +1,2 @@
-export { UmbMemberTypeRepository } from './member-type.repository.js';
+export * from './member-type.repository.js';
+export * from './manifests.js';

From 550c7710cc3fa271bfe87ce82e9fabfc2a6bf1ee Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 3 Jan 2024 15:29:15 +0000
Subject: [PATCH 43/86] [WIP] Input Member picker

A placeholder component for `<umb-input-member>`,
for use with the Multinode Treepicker property-editor.

Code files were largely duplicated from `input-document`.
The modal context code hasn't been copied over as it requires
substantial work with developing the Member repository.
---
 .../src/packages/members/manifests.ts         |   2 +
 .../members/members/components/index.ts       |   3 +
 .../input-member/input-member.element.ts      | 171 ++++++++++++++++++
 .../input-member/input-member.stories.ts      |  14 ++
 .../input-member/input-member.test.ts         |  20 ++
 .../src/packages/members/members/index.ts     |   3 +
 6 files changed, 213 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/members/components/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts
index f928869b69..a643b8be78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/manifests.ts
@@ -4,6 +4,8 @@ import { manifests as memberGroupManifests } from './member-groups/manifests.js'
 import { manifests as memberTypeManifests } from './member-types/manifests.js';
 import { manifests as memberManifests } from './members/manifests.js';
 
+import './members/components/index.js';
+
 export const manifests = [
 	...memberSectionManifests,
 	...menuSectionManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/index.ts
new file mode 100644
index 0000000000..90f47707f8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/index.ts
@@ -0,0 +1,3 @@
+import './input-member/input-member.element.js';
+
+export * from './input-member/input-member.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts
new file mode 100644
index 0000000000..d1106e1f2e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.element.ts
@@ -0,0 +1,171 @@
+import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
+
+@customElement('umb-input-member')
+export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
+	/**
+	 * This is a minimum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default 0
+	 */
+	@property({ type: Number })
+	public get min(): number {
+		//return this.#pickerContext.min;
+		return 0;
+	}
+	public set min(value: number) {
+		//this.#pickerContext.min = value;
+	}
+
+	/**
+	 * Min validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	minMessage = 'This field need more items';
+
+	/**
+	 * This is a maximum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default Infinity
+	 */
+	@property({ type: Number })
+	public get max(): number {
+		//return this.#pickerContext.max;
+		return Infinity;
+	}
+	public set max(value: number) {
+		//this.#pickerContext.max = value;
+	}
+
+	/**
+	 * Max validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	maxMessage = 'This field exceeds the allowed amount of items';
+
+	public get selectedIds(): Array<string> {
+		//return this.#pickerContext.getSelection();
+		return [];
+	}
+	public set selectedIds(ids: Array<string>) {
+		//this.#pickerContext.setSelection(ids);
+	}
+
+	@property()
+	public set value(idsString: string) {
+		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+		this.selectedIds = splitStringToArray(idsString);
+	}
+
+	@state()
+	private _items?: Array<MemberItemResponseModel>;
+
+	// TODO: Create the `UmbMemberPickerContext` [LK]
+	//#pickerContext = new UmbMemberPickerContext(this);
+
+	constructor() {
+		super();
+
+		// this.addValidator(
+		// 	'rangeUnderflow',
+		// 	() => this.minMessage,
+		// 	() => !!this.min && this.#pickerContext.getSelection().length < this.min,
+		// );
+
+		// this.addValidator(
+		// 	'rangeOverflow',
+		// 	() => this.maxMessage,
+		// 	() => !!this.max && this.#pickerContext.getSelection().length > this.max,
+		// );
+
+		// this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+		// this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+	}
+
+	protected _openPicker() {
+		console.log("member.openPicker");
+		// this.#pickerContext.openPicker({
+		// 	hideTreeRoot: true,
+		// });
+	}
+
+	protected _requestRemoveItem(item: MemberItemResponseModel){
+		console.log("member.requestRemoveItem", item);
+		//this.#pickerContext.requestRemoveItem(item.id!);
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	render() {
+		return html`
+			${this.#renderItems()}
+			${this.#renderAddButton()}
+		`;
+	}
+
+	#renderItems() {
+		if (!this._items) return;
+		// TODO: Add sorting. [LK]
+		return html`<uui-ref-list
+			>${repeat(
+				this._items,
+				(item) => item.id,
+				(item) => this._renderItem(item),
+			)}
+		</uui-ref-list>`;
+	}
+
+	#renderAddButton() {
+		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		return html`<uui-button
+			id="add-button"
+			look="placeholder"
+			@click=${this._openPicker}
+			label=${this.localize.term('general_add')}></uui-button>`;
+	}
+
+	private _renderItem(item: MemberItemResponseModel) {
+		if (!item.id) return;
+		return html`
+			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
+				<!-- TODO: implement is deleted <uui-tag size="s" slot="tag" color="danger">Deleted</uui-tag> -->
+				<uui-action-bar slot="actions">
+					<uui-button
+						@click=${() => this._requestRemoveItem(item)}
+						label="Remove member ${item.name}"
+						>Remove</uui-button
+					>
+				</uui-action-bar>
+			</uui-ref-node>
+		`;
+	}
+
+	static styles = [
+		css`
+			#add-button {
+				width: 100%;
+			}
+		`,
+	];
+}
+
+export default UmbInputMemberElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-member': UmbInputMemberElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.stories.ts
new file mode 100644
index 0000000000..7bca7fc5db
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-member.element.js';
+import type { UmbInputMemberElement } from './input-member.element.js';
+
+const meta: Meta<UmbInputMemberElement> = {
+	title: 'Components/Inputs/Member',
+	component: 'umb-input-member',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputMemberElement>;
+export const Overview: Story = {
+	args: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.test.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.test.ts
new file mode 100644
index 0000000000..7bef94720e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/components/input-member/input-member.test.ts
@@ -0,0 +1,20 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputMemberElement } from './input-member.element.js';
+import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+describe('UmbInputMemberElement', () => {
+	let element: UmbInputMemberElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-input-member></umb-input-member> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbInputMemberElement);
+	});
+
+	if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) {
+		it('passes the a11y audit', async () => {
+			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+		});
+	}
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/members/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/members/index.ts
index 3d76f338dd..f23e6176e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/members/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/members/index.ts
@@ -1 +1,4 @@
+import './components/index.js';
+
+export * from './components/index.js';
 export * from './repository/index.js';

From d67f4f26effdcad74b20e5b7be85470459893cc2 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 3 Jan 2024 12:04:35 +0000
Subject: [PATCH 44/86] Selection manager: fixes initial value

When the modal initially opens, the `#multiple` is `false`,
(regardless of how it is configured), so the initial value is set to
`[undefined]`. Then when the `#multiple` is observed as `true`
(there must be an underlying bug with the modal context code here),
then the `#selection` array already has an initial value of
`[undefined]` so will append newly selected values to that array.

I discovered this issue due to a bug with the Tree Picker editor.
---
 .../src/shared/utils/selection-manager/selection.manager.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts b/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts
index b71f1a66d6..ff63bfd93d 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts
@@ -57,7 +57,7 @@ export class UmbSelectionManager extends UmbBaseController {
 	public setSelection(value: Array<string | null>) {
 		if (this.getSelectable() === false) return;
 		if (value === undefined) throw new Error('Value cannot be undefined');
-		const newSelection = this.getMultiple() ? value : [value[0]];
+		const newSelection = this.getMultiple() ? value : value.length > 0 ? [value[0]] : value;
 		this.#selection.next(newSelection);
 	}
 
@@ -78,7 +78,7 @@ export class UmbSelectionManager extends UmbBaseController {
 	public setMultiple(value: boolean) {
 		this.#multiple.next(value);
 
-		/* If multiple is set to false, and the current selection is more than one, 
+		/* If multiple is set to false, and the current selection is more than one,
 		then we need to set the selection to the first item. */
 		if (value === false && this.getSelection().length > 1) {
 			this.setSelection([this.getSelection()[0]]);

From 877274cac47d30114c1b75d418817ee4159bcc56 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 4 Jan 2024 15:36:19 +0000
Subject: [PATCH 45/86] Refactored the initial selection value

---
 .../src/shared/utils/selection-manager/selection.manager.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts b/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts
index ff63bfd93d..477a6d3daa 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/shared/utils/selection-manager/selection.manager.ts
@@ -57,7 +57,7 @@ export class UmbSelectionManager extends UmbBaseController {
 	public setSelection(value: Array<string | null>) {
 		if (this.getSelectable() === false) return;
 		if (value === undefined) throw new Error('Value cannot be undefined');
-		const newSelection = this.getMultiple() ? value : value.length > 0 ? [value[0]] : value;
+		const newSelection = this.getMultiple() ? value : value.slice(0, 1);
 		this.#selection.next(newSelection);
 	}
 

From 0e7fca53634e780222288be4f069fda77cac360e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 13 Dec 2023 11:53:56 +1300
Subject: [PATCH 46/86] Dont do full page reload when creating language from
 the entity action button

---
 .../entity-actions/language-create-entity-action.ts         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts
index 908018aa52..aae26d3732 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/languages/entity-actions/language-create-entity-action.ts
@@ -8,8 +8,8 @@ export class UmbLanguageCreateEntityAction extends UmbEntityActionBase<UmbLangua
 		super(host, repositoryAlias, unique);
 	}
 
-	// TODO: Generate the href or retrieve it from something?
-	async getHref() {
-		return 'section/settings/workspace/language/create';
+	async execute() {
+		// TODO: Generate the href or retrieve it from something?
+		history.pushState(null, '', `section/settings/workspace/language/create`);
 	}
 }

From 17344dd93271720948acc7be08fb1905413c130e Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:04:36 +0100
Subject: [PATCH 47/86] rename and reference

---
 .../history/history-item.element.ts           |  28 ++--
 .../history/history-list.element.ts           |  15 +-
 .../documents/workspace/manifests.ts          |   2 +-
 ...nt-workspace-view-info-history.element.ts} |  24 ++--
 ...t-workspace-view-info-reference.element.ts | 128 ++++++++++++++++++
 ...> document-workspace-view-info.element.ts} |  17 ++-
 ...> document-workspace-view-info.stories.ts} |  12 +-
 ...ent-info-general-workspace-view.element.ts |   0
 ...ument-info-links-workspace-view.element.ts |   0
 ...t-info-reference-workspace-view.element.ts |   0
 .../{history/history-utils.ts => utils.ts}    |  17 ++-
 11 files changed, 186 insertions(+), 57 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/{history/document-info-history-workspace-view.element.ts => document-workspace-view-info-history.element.ts} (85%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
 rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/{document-info-workspace-view.element.ts => document-workspace-view-info.element.ts} (90%)
 rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/{document-info-workspace-view.stories.ts => document-workspace-view-info.stories.ts} (62%)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/general/document-info-general-workspace-view.element.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/links/document-info-links-workspace-view.element.ts
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/reference/document-info-reference-workspace-view.element.ts
 rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/{history/history-utils.ts => utils.ts} (78%)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
index bd8737e579..3a5d2695e7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
@@ -14,7 +14,7 @@ export class UmbHistoryItemElement extends UmbLitElement {
 	detail?: string;
 
 	render() {
-		return html`<div id="wrapper">
+		return html`
 			<div class="user-info">
 				<uui-avatar .name="${this.name ?? 'Unknown'}" ?src="${this.src}"></uui-avatar>
 				<div>
@@ -22,11 +22,9 @@ export class UmbHistoryItemElement extends UmbLitElement {
 					<span class="detail">${this.detail}</span>
 				</div>
 			</div>
-			<div class="slots-wrapper">
-				<slot id="description"></slot>
-				<slot id="actions-container" name="actions"></slot>
-			</div>
-		</div>`;
+			<slot id="description"></slot>
+			<slot id="actions-container" name="actions"></slot>
+		`;
 	}
 
 	static styles = [
@@ -34,20 +32,7 @@ export class UmbHistoryItemElement extends UmbLitElement {
 		css`
 			:host {
 				--avatar-size: calc(2em + 4px);
-				display: block;
-			}
-
-			#wrapper {
-				display: flex;
-				width: 100%;
-				gap: calc(2 * var(--uui-size-space-5));
-				align-items: center;
-			}
-
-			.slots-wrapper {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
+				display: contents;
 			}
 
 			slot[name='actions'] {
@@ -70,14 +55,17 @@ export class UmbHistoryItemElement extends UmbLitElement {
 			}
 
 			.user-info {
+				position: relative;
 				display: flex;
 				align-items: flex-end;
 				gap: var(--uui-size-space-5);
 			}
+
 			.user-info div {
 				display: flex;
 				flex-direction: column;
 			}
+
 			.detail {
 				font-size: var(--uui-size-4);
 				color: var(--uui-color-text-alt);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts
index a4e7d5392b..74a47e1a46 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts
@@ -5,19 +5,24 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-history-list')
 export class UmbHistoryListElement extends UmbLitElement {
 	render() {
-		return html`<div>
-			<slot></slot>
-		</div>`;
+		return html`<slot></slot> `;
 	}
 
 	static styles = [
 		UmbTextStyles,
 		css`
 			:host {
-				display: block;
+				display: grid;
+				grid-template-columns: auto 1fr auto;
+				align-items: start;
 				--avatar-size: calc(2em + 4px);
+				gap: var(--uui-size-6);
+				position: relative;
 			}
 
+			/** TODO: This doesn't work due to "display:contents" in umb-history-item, but is needed for the way I put the grid together.
+			* Find a different solution so we can have the grey line that links each history item together (this is purely a visual effect, no rush)
+
 			::slotted(*) {
 				position: relative;
 			}
@@ -25,7 +30,6 @@ export class UmbHistoryListElement extends UmbLitElement {
 			::slotted(*:not(:last-child)) {
 				margin-bottom: calc(2 * var(--uui-size-space-3));
 			}
-
 			::slotted(*:not(:last-child))::before {
 				content: '';
 				border: 1px solid var(--uui-color-border);
@@ -35,6 +39,7 @@ export class UmbHistoryListElement extends UmbLitElement {
 				top: var(--avatar-size);
 				left: calc(-1px + var(--avatar-size) / 2);
 			}
+			*/
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
index 583a419ad2..476fd19b97 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
@@ -44,7 +44,7 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
 		type: 'workspaceView',
 		alias: 'Umb.WorkspaceView.Document.Info',
 		name: 'Document Workspace Info View',
-		js: () => import('./views/info/document-info-workspace-view.element.js'),
+		js: () => import('./views/info/document-workspace-view-info.element.js'),
 		weight: 100,
 		meta: {
 			label: 'Info',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
similarity index 85%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
index e37647497a..4b146a2823 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/document-info-history-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
@@ -1,13 +1,13 @@
-import { HistoricTagAndDescription } from './history-utils.js';
+import { UmbAuditLogRepository } from '@umbraco-cms/backoffice/audit-log';
+import { HistoryTagStyleAndText } from './utils.js';
 import { css, html, customElement, state, property, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbAuditLogRepository } from '@umbraco-cms/backoffice/audit-log';
 import { AuditLogBaseModel, DirectionModel } from '@umbraco-cms/backoffice/backend-api';
 
-@customElement('umb-document-info-history-workspace-view')
-export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
+@customElement('umb-document-workspace-view-info-history')
+export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	#logRepository: UmbAuditLogRepository;
 	#itemsPerPage = 10;
 
@@ -48,9 +48,9 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 		this._items = data.items;
 		*/
 
-		//TODO: I think there is an issue with the API (backend). Hacking for now.
+		//TODO: I think there is an issue with the API (backend) - error with ID. Hacking for now.
 		// Uncomment previous code and delete the following when issue fixed.
-		// This should also make it load significantly faster, can consider removing the loader
+		// This should also make it load significantly faster
 
 		const { data } = await this.#logRepository.getAuditLogByUnique({
 			id: '',
@@ -81,8 +81,9 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 
 	render() {
 		return html`<uui-box headline=${this.localize.term('general_history')}>
-				${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `} </uui-box
-			>${this.#renderHistoryPagination()}`;
+				${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
+			</uui-box>
+			${this.#renderHistoryPagination()}`;
 	}
 
 	#renderHistory() {
@@ -93,7 +94,7 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 						this._items,
 						(item) => item.timestamp,
 						(item) => {
-							const { text, style } = HistoricTagAndDescription(item.logType);
+							const { text, style } = HistoryTagStyleAndText(item.logType);
 							return html`<umb-history-item name="TODO Username" detail=${new Date(item.timestamp).toLocaleString()}>
 								<span class="log-type">
 									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
@@ -138,7 +139,6 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 
 			.log-type {
 				flex-grow: 1;
-				display: flex;
 				gap: var(--uui-size-space-2);
 			}
 
@@ -155,10 +155,10 @@ export class UmbDocumentInfoHistoryWorkspaceViewElement extends UmbLitElement {
 	];
 }
 
-export default UmbDocumentInfoHistoryWorkspaceViewElement;
+export default UmbDocumentWorkspaceViewInfoHistoryElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-document-info-history-workspace-view': UmbDocumentInfoHistoryWorkspaceViewElement;
+		'umb-document-workspace-view-info-history': UmbDocumentWorkspaceViewInfoHistoryElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
new file mode 100644
index 0000000000..3622af62e0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -0,0 +1,128 @@
+import { css, html, customElement, state, property, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { RelationItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-document-workspace-view-info-reference')
+export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement {
+	#itemsPerPage = 10;
+
+	@state()
+	private _currentPage = 1;
+
+	@state()
+	private _total = 0;
+
+	@state()
+	private _items?: Array<RelationItemResponseModel> = [
+		{
+			nodeId: 'ferewrEW-ewrwerer-ewrwrq',
+			nodeName: 'sadasdf',
+			nodeType: 'document',
+			nodePublished: true,
+			contentTypeIcon: 'icon-document',
+			contentTypeAlias: 'blockListTest',
+			contentTypeName: 'Block List Test',
+			relationTypeName: 'Related Document',
+			relationTypeIsBidirectional: false,
+			relationTypeIsDependency: true,
+		},
+	];
+
+	constructor() {
+		super();
+	}
+
+	#onPageChange(event: UUIPaginationEvent) {
+		if (this._currentPage === event.target.current) return;
+		this._currentPage = event.target.current;
+	}
+
+	render() {
+		if (this._items && this._items.length > 0) {
+			return html`<strong>
+					<umb-localize key="references_labelUsedByItems">Referenced by the following items</umb-localize>
+				</strong>
+				<uui-box style="--uui-box-default-padding:0">
+					<uui-table>
+						<uui-table-head>
+							<uui-table-head-cell></uui-table-head-cell>
+							<uui-table-head-cell>Name</uui-table-head-cell>
+							<uui-table-head-cell>Status</uui-table-head-cell>
+							<uui-table-head-cell>Type Name</uui-table-head-cell>
+							<uui-table-head-cell>Type</uui-table-head-cell>
+							<uui-table-head-cell>Relation</uui-table-head-cell>
+						</uui-table-head>
+
+						${repeat(
+							this._items,
+							(item) => item.nodeId,
+							(item) =>
+								html`<uui-table-row>
+									<uui-table-cell>
+										<uui-icon style=" vertical-align: middle;" name="icon-document"></uui-icon>
+									</uui-table-cell>
+									<uui-table-cell class="link-cell">${item.nodeName}</uui-table-cell>
+									<uui-table-cell>
+										${item.nodePublished
+											? this.localize.term('content_published')
+											: this.localize.term('content_unpublished')}
+									</uui-table-cell>
+									<uui-table-cell>${item.contentTypeName}</uui-table-cell>
+									<uui-table-cell>${item.nodeType}</uui-table-cell>
+									<uui-table-cell>${item.relationTypeName}</uui-table-cell>
+								</uui-table-row>`,
+						)}
+					</uui-table>
+				</uui-box>
+				${this.#renderReferencePagination()}`;
+		} else {
+			return nothing;
+		}
+	}
+
+	#renderReferencePagination() {
+		if (!this._total) return nothing;
+
+		const totalPages = Math.ceil(this._total / this.#itemsPerPage);
+
+		if (totalPages <= 1) return nothing;
+
+		return html`<div class="pagination">
+			<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
+		</div>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			.link-cell {
+				font-weight: bold;
+			}
+
+			uui-table-cell:not(.link-cell) {
+				color: var(--uui-color-text-alt);
+			}
+
+			uui-pagination {
+				flex: 1;
+				display: inline-block;
+			}
+
+			.pagination {
+				display: flex;
+				justify-content: center;
+				margin-top: var(--uui-size-space-4);
+			}
+		`,
+	];
+}
+
+export default UmbDocumentWorkspaceViewInfoReferenceElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-workspace-view-info-reference': UmbDocumentWorkspaceViewInfoReferenceElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 40c9267f90..69b169208f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -3,10 +3,11 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import './history/document-info-history-workspace-view.element.js';
+import './document-workspace-view-info-history.element.js';
+import './document-workspace-view-info-reference.element.js';
 
-@customElement('umb-document-info-workspace-view')
-export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
+@customElement('umb-document-workspace-view-info')
+export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	/** Dont delete, need for mock data */
 	/*@state()
 	private _historyList: [] = [
@@ -117,8 +118,10 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 					${this.#renderLinksSection()}
 				</uui-box>
 
-				<umb-document-info-history-workspace-view
-					.documentUnique=${this._documentTypeId}></umb-document-info-history-workspace-view>
+				<umb-document-workspace-view-info-reference></umb-document-workspace-view-info-reference>
+
+				<umb-document-workspace-view-info-history
+					.documentUnique=${this._documentTypeId}></umb-document-workspace-view-info-history>
 			</div>
 			<div class="container">
 				<uui-box headline="General" id="general-section">${this.#renderGeneralSection()}</uui-box>
@@ -243,10 +246,10 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 	];
 }
 
-export default UmbDocumentInfoWorkspaceViewElement;
+export default UmbDocumentWorkspaceViewInfoElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-document-info-workspace-view': UmbDocumentInfoWorkspaceViewElement;
+		'umb-document-workspace-view-info': UmbDocumentWorkspaceViewInfoElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.stories.ts
similarity index 62%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.stories.ts
index 8d47cf36ae..2a1788a0a7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-info-workspace-view.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.stories.ts
@@ -1,7 +1,7 @@
-import './document-info-workspace-view.element.js';
+import './document-workspace-view-info.element.js';
 
 import { Meta, Story } from '@storybook/web-components';
-import type { UmbDocumentInfoWorkspaceViewElement } from './document-info-workspace-view.element.js';
+import type { UmbDocumentWorkspaceViewInfoElement } from './document-workspace-view-info.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
 
 // import { data } from '../../../../../../core/mocks/data/document.data.js';
@@ -9,8 +9,8 @@ import { html } from '@umbraco-cms/backoffice/external/lit';
 
 export default {
 	title: 'Workspaces/Documents/Views/Info',
-	component: 'umb-document-info-workspace-view',
-	id: 'umb-document-info-workspace-view',
+	component: 'umb-document-workspace-view-info',
+	id: 'umb-document-workspace-view-info',
 	decorators: [
 		(story) => {
 			return html`TODO: make use of mocked workspace context??`;
@@ -21,6 +21,6 @@ export default {
 	],
 } as Meta;
 
-export const AAAOverview: Story<UmbDocumentInfoWorkspaceViewElement> = () =>
-	html` <umb-document-info-workspace-view></umb-document-info-workspace-view>`;
+export const AAAOverview: Story<UmbDocumentWorkspaceViewInfoElement> = () =>
+	html` <umb-document-workspace-view-info></umb-document-workspace-view-info>`;
 AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/general/document-info-general-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/general/document-info-general-workspace-view.element.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/links/document-info-links-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/links/document-info-links-workspace-view.element.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/reference/document-info-reference-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/reference/document-info-reference-workspace-view.element.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts
similarity index 78%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts
index 8c21d64b6d..300f9f95fa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/history/history-utils.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts
@@ -1,23 +1,28 @@
 import { AuditTypeModel } from '@umbraco-cms/backoffice/backend-api';
 
-interface HistoricStyleMap {
+interface HistoryStyleMap {
 	look: 'default' | 'primary' | 'secondary' | 'outline' | 'placeholder';
 	color: 'default' | 'danger' | 'warning' | 'positive';
 }
 
-interface HistoricText {
+interface HistoryLocalizeKeys {
 	label: string;
 	desc: string;
 }
 
-interface HistoricData {
-	style: HistoricStyleMap;
-	text: HistoricText;
+interface HistoryData {
+	style: HistoryStyleMap;
+	text: HistoryLocalizeKeys;
 }
 
 // Return label, color, look, desc
 
-export function HistoricTagAndDescription(type: AuditTypeModel): HistoricData {
+/**
+ * @description Helper function to get look and color for uui-tag and localization keys for the label and description.
+ * @param type AuditTypeModel
+ * @returns {HistoricData}
+ */
+export function HistoryTagStyleAndText(type: AuditTypeModel): HistoryData {
 	switch (type) {
 		case AuditTypeModel.SAVE:
 			return {

From ca9ed114bc1ebcc7f3ea89f2fb635eb2db3f2c09 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:06:32 +0100
Subject: [PATCH 48/86] remove

---
 .../info/document-workspace-view-info-reference.element.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
index 3622af62e0..6f423c604a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -1,4 +1,4 @@
-import { css, html, customElement, state, property, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -17,8 +17,8 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	@state()
 	private _items?: Array<RelationItemResponseModel> = [
 		{
-			nodeId: 'ferewrEW-ewrwerer-ewrwrq',
-			nodeName: 'sadasdf',
+			nodeId: '3f23cc76-a645-4032-82b3-c16458e97215',
+			nodeName: 'hey',
 			nodeType: 'document',
 			nodePublished: true,
 			contentTypeIcon: 'icon-document',

From 31465b38660a92c5215ec0f8ffabcbebdf24751b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 19 Dec 2023 16:11:36 +0000
Subject: [PATCH 49/86] Added `input-document-source` element

This is different to `input-document` as it will also
contain the DynamicRoot functionality.
---
 .../documents/documents/components/index.ts   |   1 +
 .../input-document-source.element.ts          | 108 ++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
index a644a4c547..ce63360331 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
@@ -1,2 +1,3 @@
 export * from './input-document/input-document.element.js';
 export * from './input-document-granular-permission/input-document-granular-permission.element.js';
+export * from './input-document-source/input-document-source.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts
new file mode 100644
index 0000000000..188d196417
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts
@@ -0,0 +1,108 @@
+import { UmbDocumentPickerContext } from '../input-document/input-document.context.js';
+import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-input-document-source')
+export class UmbInputDocumentSourceElement extends FormControlMixin(UmbLitElement) {
+	public get nodeId(): string | null | undefined {
+		return this.#pickerContext.getSelection()[0];
+	}
+	public set nodeId(id: string | null | undefined) {
+		const selection = id ? [id] : [];
+		this.#pickerContext.setSelection(selection);
+	}
+
+	@property()
+	public set value(id: string) {
+		this.nodeId = id;
+	}
+
+	@state()
+	private _items?: Array<DocumentItemResponseModel>;
+
+	#pickerContext = new UmbDocumentPickerContext(this);
+
+	constructor() {
+		super();
+
+		this.#pickerContext.max = 1;
+
+		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+	}
+
+	protected getFormElement() {
+		return undefined;
+	}
+
+	// TODO: Wire up the DynamicRoot picker feature. [LK]
+	private _openDynamicRootPicker(e: Event) {
+		console.log('openDynamicRootPicker', e);
+		const btn = e.target as UUIButtonElement;
+		btn.color = 'warning';
+		btn.label = 'TODO!';
+		btn.look = 'primary';
+	}
+
+	render() {
+		return html`
+			${this._items
+				? html` <uui-ref-list
+						>${repeat(
+							this._items,
+							(item) => item.id,
+							(item) => this._renderItem(item),
+						)}
+				  </uui-ref-list>`
+				: ''}
+			${this.#renderButtons()}
+		`;
+	}
+
+	#renderButtons() {
+		if (this.nodeId) return;
+
+		//TODO: Dynamic paths
+		return html` <uui-button-group>
+			<uui-button
+				look="placeholder"
+				@click=${() => this.#pickerContext.openPicker()}
+				label=${this.localize.term('contentPicker_defineRootNode')}></uui-button>
+			<uui-button
+				look="placeholder"
+				@click=${this._openDynamicRootPicker}
+				label=${this.localize.term('contentPicker_defineDynamicRoot')}></uui-button>
+		</uui-button-group>`;
+	}
+
+	private _renderItem(item: DocumentItemResponseModel) {
+		if (!item.id) return;
+		return html`
+			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
+				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
+				<uui-action-bar slot="actions">
+					<uui-button @click=${() => this.#pickerContext.openPicker()} label="Edit document ${item.name}"
+						>Edit</uui-button
+					>
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
+						label="Remove document ${item.name}"
+						>Remove</uui-button
+					>
+				</uui-action-bar>
+			</uui-ref-node>
+		`;
+	}
+
+	static styles = [css``];
+}
+
+export default UmbInputDocumentSourceElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-document-source': UmbInputDocumentSourceElement;
+	}
+}

From 78715d0bfc1d41923a080f13707be35c97ee522e Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 19 Dec 2023 16:12:24 +0000
Subject: [PATCH 50/86] Added localized keys/terms for the button labels

---
 src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts | 2 ++
 src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
index df0a6a2e45..d3b00b4443 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
@@ -1151,6 +1151,8 @@ export default {
 	},
 	contentPicker: {
 		allowedItemTypes: 'Du kan kun vælge følgende type(r) dokumenter: %0%',
+		defineDynamicRoot: 'Definer Dynamisk Udgangspunkt',
+		defineRootNode: 'Vælg udgangspunkt',
 		pickedTrashedItem: 'Du har valgt et dokument som er slettet eller lagt i papirkurven',
 		pickedTrashedItems: 'Du har valgt dokumenter som er slettede eller lagt i papirkurven',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
index 19de39092d..cfbeba5478 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
@@ -1148,6 +1148,8 @@ export default {
 	},
 	contentPicker: {
 		allowedItemTypes: 'You can only select items of type(s): %0%',
+		defineDynamicRoot: 'Specify a Dynamic Root',
+		defineRootNode: 'Pick root node',
 		pickedTrashedItem: 'You have picked a content item currently deleted or in the recycle bin',
 		pickedTrashedItems: 'You have picked content items currently deleted or in the recycle bin',
 	},

From 6a9574b18a4bd1fb8c1f4290b1ca48b231a207a9 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 19 Dec 2023 16:18:15 +0000
Subject: [PATCH 51/86] Updates to `start-node` elements

to use the new `input-document-source` element.

Extended the `StartNode` type to include the DynamicRoot schema.
---
 .../input-start-node.element.ts               | 64 ++++++++++++++-----
 ...ditor-ui-tree-picker-start-node.element.ts |  8 ++-
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
index d6db6cc9c5..d5392ca592 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
@@ -1,16 +1,26 @@
-import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
+import { UmbInputDocumentSourceElement } from '@umbraco-cms/backoffice/document';
 import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+//import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 export type ContentType = 'content' | 'member' | 'media';
 
+export type DynamicRootQueryStepType = {
+	alias: string;
+	anyOfDocTypeKeys: Array<string>;
+};
+
+export type DynamicRootType = {
+	originAlias: string;
+	querySteps?: Array<DynamicRootQueryStepType> | null;
+};
+
 export type StartNode = {
 	type?: ContentType;
 	id?: string | null;
-	query?: string | null;
+	dynamicRoot?: DynamicRootType | null;
 };
 
 @customElement('umb-input-start-node')
@@ -20,14 +30,21 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	private _type: StartNode['type'] = 'content';
+
 	@property()
 	public set type(value: StartNode['type']) {
+		if (value === undefined) {
+			value = this._type;
+		}
+
 		const oldValue = this._type;
 
 		this._options = this._options.map((option) =>
 			option.value === value ? { ...option, selected: true } : { ...option, selected: false },
 		);
+
 		this._type = value;
+
 		this.requestUpdate('type', oldValue);
 	}
 	public get type(): StartNode['type'] {
@@ -35,30 +52,43 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	@property({ attribute: 'node-id' })
-	nodeId = '';
+	nodeId?: string | null;
 
-	@property({ attribute: 'dynamic-path' })
-	dynamicPath = '';
+	@property({ attribute: false })
+	dynamicRoot?: DynamicRootType | null;
 
 	@state()
 	_options: Array<Option> = [
 		{ value: 'content', name: 'Content' },
-		{ value: 'member', name: 'Members' },
 		{ value: 'media', name: 'Media' },
+		{ value: 'member', name: 'Members' },
 	];
 
 	#onTypeChange(event: UUISelectEvent) {
+		//console.log('onTypeChange');
+
 		this.type = event.target.value as StartNode['type'];
 
-		// Clear others
 		this.nodeId = '';
-		this.dynamicPath = '';
-		this.dispatchEvent(new UmbChangeEvent());
+
+		// TODO: Appears that the event gets bubbled up. Will need to review. [LK]
+		//this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	#onIdChange(event: CustomEvent) {
-		this.nodeId = (event.target as UmbInputDocumentElement | UmbInputMediaElement).selectedIds.join('');
-		this.dispatchEvent(new CustomEvent('change'));
+		//console.log('onIdChange', event.target);
+		switch (this.type) {
+			case 'content':
+				this.nodeId = (<UmbInputDocumentSourceElement>event.target).nodeId;
+				break;
+			case 'media':
+				this.nodeId = (<UmbInputMediaElement>event.target).selectedIds.join('');
+				break;
+			default:
+				break;
+		}
+
+		this.dispatchEvent(new CustomEvent(event.type));
 	}
 
 	render() {
@@ -82,21 +112,21 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderTypeContent() {
-		const nodeId = this.nodeId ? [this.nodeId] : [];
-		//TODO: Dynamic paths
-		return html` <umb-input-document @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-document> `;
+		return html`<umb-input-document-source
+			@change=${this.#onIdChange}
+			.nodeId=${this.nodeId}></umb-input-document-source>`;
 	}
 
 	#renderTypeMedia() {
 		const nodeId = this.nodeId ? [this.nodeId] : [];
 		//TODO => MediaTypes
-		return html` <umb-input-media @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-media> `;
+		return html`<umb-input-media @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-media>`;
 	}
 
 	#renderTypeMember() {
 		const nodeId = this.nodeId ? [this.nodeId] : [];
 		//TODO => Members
-		return html` <umb-input-member @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-member> `;
+		return html`<umb-input-member @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-member>`;
 	}
 
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index de8ba4d70e..c7c60ef8d1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -22,15 +22,17 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 		this.value = {
 			type: target.type,
 			id: target.nodeId,
-			// TODO: Please check this makes sense, Check if we want to support XPath in this version, if not then make sure we handle DynamicRoot correct.
-			query: target.dynamicPath,
+			dynamicRoot: target.dynamicRoot,
 		};
 
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
-		return html`<umb-input-start-node @change="${this.#onChange}" .type=${this.value?.type}></umb-input-start-node>`;
+		return html`<umb-input-start-node
+			@change=${this.#onChange}
+			.type=${this.value?.type}
+			.nodeId=${this.value?.id}></umb-input-start-node>`;
 	}
 
 	static styles = [UmbTextStyles];

From 5e982999e3e652520e73c876b523abbccc84e529 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 10:05:49 +0000
Subject: [PATCH 52/86] Localization - added entry for Dynamic Root (on Tree
 Picker)

ref: https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1082#issuecomment-1864269992
---
 src/Umbraco.Web.UI.Client/.github/localization_overview.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/.github/localization_overview.md b/src/Umbraco.Web.UI.Client/.github/localization_overview.md
index c2dd2453ae..740cebe2c9 100644
--- a/src/Umbraco.Web.UI.Client/.github/localization_overview.md
+++ b/src/Umbraco.Web.UI.Client/.github/localization_overview.md
@@ -135,6 +135,7 @@ Ensure all property editors are properly localized.
 - [ ] Toggle
 - [ ] Tree Picker
 	- [ ] StartNode
+	- [x] DynamicRoot
 - [ ] Upload Field
 - [ ] User Picker
 - [ ] Value Type
@@ -235,4 +236,4 @@ Then we need your help! With Bellissima we added new localization keys, and we s
 - [ ] `tr-TR` - Turkish (Turkey)
 - [ ] `ua-UA` - Ukrainian (Ukraine)
 - [ ] `zh-CN` - Chinese (China)
-- [ ] `zh-TW` - Chinese (Taiwan)
\ No newline at end of file
+- [ ] `zh-TW` - Chinese (Taiwan)

From 4665f0b467cfba07b9e6c1d799ac2cb1b5e61cee Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 10:15:55 +0000
Subject: [PATCH 53/86] Renamed `umb-input-document-source` to
 `umb-input-document-picker-root`

ref: https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1082#pullrequestreview-1794148136
---
 .../input-start-node/input-start-node.element.ts          | 8 ++++----
 .../src/packages/documents/documents/components/index.ts  | 2 +-
 .../input-document-picker-root.element.ts}                | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/{input-document-source/input-document-source.element.ts => input-document-picker-root/input-document-picker-root.element.ts} (91%)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
index d5392ca592..5694745a44 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
@@ -1,4 +1,4 @@
-import { UmbInputDocumentSourceElement } from '@umbraco-cms/backoffice/document';
+import { UmbInputDocumentPickerRootElement } from '@umbraco-cms/backoffice/document';
 import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -79,7 +79,7 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 		//console.log('onIdChange', event.target);
 		switch (this.type) {
 			case 'content':
-				this.nodeId = (<UmbInputDocumentSourceElement>event.target).nodeId;
+				this.nodeId = (<UmbInputDocumentPickerRootElement>event.target).nodeId;
 				break;
 			case 'media':
 				this.nodeId = (<UmbInputMediaElement>event.target).selectedIds.join('');
@@ -112,9 +112,9 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderTypeContent() {
-		return html`<umb-input-document-source
+		return html`<umb-input-document-picker-root
 			@change=${this.#onIdChange}
-			.nodeId=${this.nodeId}></umb-input-document-source>`;
+			.nodeId=${this.nodeId}></umb-input-document-picker-root>`;
 	}
 
 	#renderTypeMedia() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
index ce63360331..180e02062a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts
@@ -1,3 +1,3 @@
 export * from './input-document/input-document.element.js';
 export * from './input-document-granular-permission/input-document-granular-permission.element.js';
-export * from './input-document-source/input-document-source.element.js';
+export * from './input-document-picker-root/input-document-picker-root.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
similarity index 91%
rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
index 188d196417..6e61ac2b6b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-source/input-document-source.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
@@ -4,8 +4,8 @@ import { FormControlMixin, UUIButtonElement } from '@umbraco-cms/backoffice/exte
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-@customElement('umb-input-document-source')
-export class UmbInputDocumentSourceElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-document-picker-root')
+export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitElement) {
 	public get nodeId(): string | null | undefined {
 		return this.#pickerContext.getSelection()[0];
 	}
@@ -99,10 +99,10 @@ export class UmbInputDocumentSourceElement extends FormControlMixin(UmbLitElemen
 	static styles = [css``];
 }
 
-export default UmbInputDocumentSourceElement;
+export default UmbInputDocumentPickerRootElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-input-document-source': UmbInputDocumentSourceElement;
+		'umb-input-document-picker-root': UmbInputDocumentPickerRootElement;
 	}
 }

From d1305164bed66f55364551ed70e52dac6aef04ca Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 10:45:15 +0000
Subject: [PATCH 54/86] Renames `#pickerContext` to `#documentPickerContext`

and adds placeholder stub for `#dynamicRootPickerContext`.

Removed unused imports, e.g. `css` and `UUIButtonElement`.
---
 .../input-document-picker-root.element.ts     | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
index 6e61ac2b6b..68b5ab60b3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.ts
@@ -1,17 +1,17 @@
 import { UmbDocumentPickerContext } from '../input-document/input-document.context.js';
-import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin, UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';
+import { html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-input-document-picker-root')
 export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitElement) {
 	public get nodeId(): string | null | undefined {
-		return this.#pickerContext.getSelection()[0];
+		return this.#documentPickerContext.getSelection()[0];
 	}
 	public set nodeId(id: string | null | undefined) {
 		const selection = id ? [id] : [];
-		this.#pickerContext.setSelection(selection);
+		this.#documentPickerContext.setSelection(selection);
 	}
 
 	@property()
@@ -22,30 +22,28 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
 	@state()
 	private _items?: Array<DocumentItemResponseModel>;
 
-	#pickerContext = new UmbDocumentPickerContext(this);
+	#documentPickerContext = new UmbDocumentPickerContext(this);
+
+	// TODO: DynamicRoot - once feature implemented, wire up context and picker UI. [LK]
+	#dynamicRootPickerContext = {
+		openPicker: () => {
+			throw new Error('DynamicRoot picker has not been implemented yet.');
+		},
+	};
 
 	constructor() {
 		super();
 
-		this.#pickerContext.max = 1;
+		this.#documentPickerContext.max = 1;
 
-		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
-		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+		this.observe(this.#documentPickerContext.selection, (selection) => (super.value = selection.join(',')));
+		this.observe(this.#documentPickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
 	protected getFormElement() {
 		return undefined;
 	}
 
-	// TODO: Wire up the DynamicRoot picker feature. [LK]
-	private _openDynamicRootPicker(e: Event) {
-		console.log('openDynamicRootPicker', e);
-		const btn = e.target as UUIButtonElement;
-		btn.color = 'warning';
-		btn.label = 'TODO!';
-		btn.look = 'primary';
-	}
-
 	render() {
 		return html`
 			${this._items
@@ -68,11 +66,11 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
 		return html` <uui-button-group>
 			<uui-button
 				look="placeholder"
-				@click=${() => this.#pickerContext.openPicker()}
+				@click=${() => this.#documentPickerContext.openPicker()}
 				label=${this.localize.term('contentPicker_defineRootNode')}></uui-button>
 			<uui-button
 				look="placeholder"
-				@click=${this._openDynamicRootPicker}
+				@click=${() => this.#dynamicRootPickerContext.openPicker()}
 				label=${this.localize.term('contentPicker_defineDynamicRoot')}></uui-button>
 		</uui-button-group>`;
 	}
@@ -83,11 +81,11 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
 			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
 				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this.#pickerContext.openPicker()} label="Edit document ${item.name}"
+					<uui-button @click=${() => this.#documentPickerContext.openPicker()} label="Edit document ${item.name}"
 						>Edit</uui-button
 					>
 					<uui-button
-						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
+						@click=${() => this.#documentPickerContext.requestRemoveItem(item.id!)}
 						label="Remove document ${item.name}"
 						>Remove</uui-button
 					>
@@ -95,8 +93,6 @@ export class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitEl
 			</uui-ref-node>
 		`;
 	}
-
-	static styles = [css``];
 }
 
 export default UmbInputDocumentPickerRootElement;

From cf7a4e892d90282bbdb1298f5f9b2f8e59ea3ab2 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:11:14 +0100
Subject: [PATCH 55/86] upgrade storybook packages

---
 src/Umbraco.Web.UI.Client/package-lock.json | 884 ++++++++++++--------
 src/Umbraco.Web.UI.Client/package.json      |  14 +-
 2 files changed, 520 insertions(+), 378 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index e058c10403..43b5e5ac01 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -33,13 +33,13 @@
 				"@rollup/plugin-commonjs": "^25.0.7",
 				"@rollup/plugin-json": "^6.1.0",
 				"@rollup/plugin-node-resolve": "^15.2.3",
-				"@storybook/addon-a11y": "7.6.5",
-				"@storybook/addon-actions": "7.6.5",
-				"@storybook/addon-essentials": "7.6.5",
-				"@storybook/addon-links": "7.6.5",
+				"@storybook/addon-a11y": "7.6.7",
+				"@storybook/addon-actions": "7.6.7",
+				"@storybook/addon-essentials": "7.6.7",
+				"@storybook/addon-links": "7.6.7",
 				"@storybook/mdx2-csf": "^1.1.0",
-				"@storybook/web-components": "7.6.5",
-				"@storybook/web-components-vite": "7.6.5",
+				"@storybook/web-components": "7.6.7",
+				"@storybook/web-components-vite": "7.6.7",
 				"@types/chai": "^4.3.5",
 				"@types/lodash-es": "^4.17.8",
 				"@types/mocha": "^10.0.1",
@@ -73,7 +73,7 @@
 				"rollup-plugin-esbuild": "^6.1.0",
 				"rollup-plugin-import-css": "^3.3.5",
 				"rollup-plugin-web-worker-loader": "^1.6.1",
-				"storybook": "7.6.5",
+				"storybook": "7.6.7",
 				"tiny-glob": "^0.2.9",
 				"tsc-alias": "^1.8.8",
 				"typescript": "^5.3.3",
@@ -288,9 +288,9 @@
 			}
 		},
 		"node_modules/@babel/helper-create-class-features-plugin": {
-			"version": "7.23.6",
-			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.6.tgz",
-			"integrity": "sha512-cBXU1vZni/CpGF29iTu4YRbOZt3Wat6zCoMDxRF1MayiEc4URxOj31tT65HUM0CRpMowA3HCJaAOVOUnMf96cw==",
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.7.tgz",
+			"integrity": "sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==",
 			"dev": true,
 			"dependencies": {
 				"@babel/helper-annotate-as-pure": "^7.22.5",
@@ -625,9 +625,9 @@
 			}
 		},
 		"node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-			"version": "7.23.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz",
-			"integrity": "sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==",
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz",
+			"integrity": "sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==",
 			"dev": true,
 			"dependencies": {
 				"@babel/helper-environment-visitor": "^7.22.20",
@@ -948,9 +948,9 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-async-generator-functions": {
-			"version": "7.23.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.4.tgz",
-			"integrity": "sha512-efdkfPhHYTtn0G6n2ddrESE91fgXxjlqLsnUtPWnJs4a4mZIbUaK7ffqKIIUKXSHwcDvaCVX6GXkaJJFqtX7jw==",
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz",
+			"integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==",
 			"dev": true,
 			"dependencies": {
 				"@babel/helper-environment-visitor": "^7.22.20",
@@ -1046,16 +1046,15 @@
 			}
 		},
 		"node_modules/@babel/plugin-transform-classes": {
-			"version": "7.23.5",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.5.tgz",
-			"integrity": "sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==",
+			"version": "7.23.8",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz",
+			"integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==",
 			"dev": true,
 			"dependencies": {
 				"@babel/helper-annotate-as-pure": "^7.22.5",
-				"@babel/helper-compilation-targets": "^7.22.15",
+				"@babel/helper-compilation-targets": "^7.23.6",
 				"@babel/helper-environment-visitor": "^7.22.20",
 				"@babel/helper-function-name": "^7.23.0",
-				"@babel/helper-optimise-call-expression": "^7.22.5",
 				"@babel/helper-plugin-utils": "^7.22.5",
 				"@babel/helper-replace-supers": "^7.22.20",
 				"@babel/helper-split-export-declaration": "^7.22.6",
@@ -1740,9 +1739,9 @@
 			}
 		},
 		"node_modules/@babel/preset-env": {
-			"version": "7.23.6",
-			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.6.tgz",
-			"integrity": "sha512-2XPn/BqKkZCpzYhUUNZ1ssXw7DcXfKQEjv/uXZUXgaebCMYmkEsfZ2yY+vv+xtXv50WmL5SGhyB6/xsWxIvvOQ==",
+			"version": "7.23.8",
+			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.8.tgz",
+			"integrity": "sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==",
 			"dev": true,
 			"dependencies": {
 				"@babel/compat-data": "^7.23.5",
@@ -1751,7 +1750,7 @@
 				"@babel/helper-validator-option": "^7.23.5",
 				"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
 				"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
-				"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.3",
+				"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7",
 				"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
 				"@babel/plugin-syntax-async-generators": "^7.8.4",
 				"@babel/plugin-syntax-class-properties": "^7.12.13",
@@ -1772,13 +1771,13 @@
 				"@babel/plugin-syntax-top-level-await": "^7.14.5",
 				"@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
 				"@babel/plugin-transform-arrow-functions": "^7.23.3",
-				"@babel/plugin-transform-async-generator-functions": "^7.23.4",
+				"@babel/plugin-transform-async-generator-functions": "^7.23.7",
 				"@babel/plugin-transform-async-to-generator": "^7.23.3",
 				"@babel/plugin-transform-block-scoped-functions": "^7.23.3",
 				"@babel/plugin-transform-block-scoping": "^7.23.4",
 				"@babel/plugin-transform-class-properties": "^7.23.3",
 				"@babel/plugin-transform-class-static-block": "^7.23.4",
-				"@babel/plugin-transform-classes": "^7.23.5",
+				"@babel/plugin-transform-classes": "^7.23.8",
 				"@babel/plugin-transform-computed-properties": "^7.23.3",
 				"@babel/plugin-transform-destructuring": "^7.23.3",
 				"@babel/plugin-transform-dotall-regex": "^7.23.3",
@@ -1820,9 +1819,9 @@
 				"@babel/plugin-transform-unicode-regex": "^7.23.3",
 				"@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
 				"@babel/preset-modules": "0.1.6-no-external-plugins",
-				"babel-plugin-polyfill-corejs2": "^0.4.6",
-				"babel-plugin-polyfill-corejs3": "^0.8.5",
-				"babel-plugin-polyfill-regenerator": "^0.5.3",
+				"babel-plugin-polyfill-corejs2": "^0.4.7",
+				"babel-plugin-polyfill-corejs3": "^0.8.7",
+				"babel-plugin-polyfill-regenerator": "^0.5.4",
 				"core-js-compat": "^3.31.0",
 				"semver": "^6.3.1"
 			},
@@ -1884,15 +1883,15 @@
 			}
 		},
 		"node_modules/@babel/register": {
-			"version": "7.22.15",
-			"resolved": "https://registry.npmjs.org/@babel/register/-/register-7.22.15.tgz",
-			"integrity": "sha512-V3Q3EqoQdn65RCgTLwauZaTfd1ShhwPmbBv+1dkZV/HpCGMKVyn6oFcRlI7RaKqiDQjX2Qd3AuoEguBgdjIKlg==",
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/register/-/register-7.23.7.tgz",
+			"integrity": "sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==",
 			"dev": true,
 			"dependencies": {
 				"clone-deep": "^4.0.1",
 				"find-cache-dir": "^2.0.0",
 				"make-dir": "^2.1.0",
-				"pirates": "^4.0.5",
+				"pirates": "^4.0.6",
 				"source-map-support": "^0.5.16"
 			},
 			"engines": {
@@ -2597,31 +2596,31 @@
 			"dev": true
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.5.2",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
-			"integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
+			"integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
 			"dev": true,
 			"dependencies": {
-				"@floating-ui/utils": "^0.1.3"
+				"@floating-ui/utils": "^0.2.0"
 			}
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.5.3",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-			"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
+			"integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
 			"dev": true,
 			"dependencies": {
-				"@floating-ui/core": "^1.4.2",
-				"@floating-ui/utils": "^0.1.3"
+				"@floating-ui/core": "^1.5.3",
+				"@floating-ui/utils": "^0.2.0"
 			}
 		},
 		"node_modules/@floating-ui/react-dom": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
-			"integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz",
+			"integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==",
 			"dev": true,
 			"dependencies": {
-				"@floating-ui/dom": "^1.5.1"
+				"@floating-ui/dom": "^1.5.4"
 			},
 			"peerDependencies": {
 				"react": ">=16.8.0",
@@ -2629,9 +2628,9 @@
 			}
 		},
 		"node_modules/@floating-ui/utils": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-			"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==",
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
 			"dev": true
 		},
 		"node_modules/@humanwhocodes/config-array": {
@@ -4322,12 +4321,12 @@
 			"dev": true
 		},
 		"node_modules/@storybook/addon-a11y": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.5.tgz",
-			"integrity": "sha512-mbwjgdlNDcp0nL29s9FoF+HEFmWn0fMXfTcgMNjQWHs+sfmOy6w3llk0n0RJeDjc+x2Y8Oj2c+JwLU1hhJBnag==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.7.tgz",
+			"integrity": "sha512-poT2oXIYDwLnhqn6g9ACTQ+7gi8QDHVlib4TQANdcozC/qYg+Bs6Pd99wT6rT4lrC/npVNTSKKwLw+3oXqlCxg==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/addon-highlight": "7.6.5",
+				"@storybook/addon-highlight": "7.6.7",
 				"axe-core": "^4.2.0"
 			},
 			"funding": {
@@ -4336,12 +4335,12 @@
 			}
 		},
 		"node_modules/@storybook/addon-actions": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.5.tgz",
-			"integrity": "sha512-lW/m9YcaNfBZk+TZLxyzHdd563mBWpsUIveOKYjcPdl/q0FblWWZrRsFHqwLK1ldZ4AZXs8J/47G8CBr6Ew2uQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.7.tgz",
+			"integrity": "sha512-+6EZvhIeKEqG/RNsU3R5DxOrd60BL5GEvmzE2w60s2eKaNNxtyilDjiO1g4z2s2zDNyr7JL/Ft03pJ0Jgo0lew==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/core-events": "7.6.5",
+				"@storybook/core-events": "7.6.7",
 				"@storybook/global": "^5.0.0",
 				"@types/uuid": "^9.0.1",
 				"dequal": "^2.0.2",
@@ -4354,9 +4353,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-backgrounds": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.5.tgz",
-			"integrity": "sha512-wZZOL19vg4TTRtOTl71XKqPe5hQx3XUh9Fle0wOi91FiFrBdqusrppnyS89wPS8RQG5lXEOFEUvYcMmdCcdZfw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.7.tgz",
+			"integrity": "sha512-55sBy1YUqponAVe+qL16qtWxdf63vHEnIoqFyHEwGpk7K9IhFA1BmdSpFr5VnWEwXeJXKj30db78frh2LUdk3Q==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/global": "^5.0.0",
@@ -4369,12 +4368,12 @@
 			}
 		},
 		"node_modules/@storybook/addon-controls": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.6.5.tgz",
-			"integrity": "sha512-EdSZ2pYf74mOXZGGJ22lrDvdvL0YKc95iWv9FFEhUFOloMy/0OZPB2ybYmd2KVCy3SeIE4Zfeiw8pDXdCUniOQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.6.7.tgz",
+			"integrity": "sha512-DJ3gfvcdCgqi7AQxu83vx0AEUKiuJrNcSATfWV3Jqi8dH6fYO2yqpemHEeWOEy+DAHxIOaqLKwb1QjIBj+vSRQ==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/blocks": "7.6.5",
+				"@storybook/blocks": "7.6.7",
 				"lodash": "^4.17.21",
 				"ts-dedent": "^2.0.0"
 			},
@@ -4384,26 +4383,26 @@
 			}
 		},
 		"node_modules/@storybook/addon-docs": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.5.tgz",
-			"integrity": "sha512-D9tZyD41IujCHiPYdfS2bKtZRJPNwO4EydzyqODXppomluhFbY3uTEaf0H1UFnJLQxWNXZ7rr3aS0V3O6yu8pA==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.7.tgz",
+			"integrity": "sha512-2dfajNhweofJ3LxjGO83UE5sBMvKtJB0Agj7q8mMtK/9PUCUcbvsFSyZnO/s6X1zAjSn5ZrirbSoTXU4IqxwSA==",
 			"dev": true,
 			"dependencies": {
 				"@jest/transform": "^29.3.1",
 				"@mdx-js/react": "^2.1.5",
-				"@storybook/blocks": "7.6.5",
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/components": "7.6.5",
-				"@storybook/csf-plugin": "7.6.5",
-				"@storybook/csf-tools": "7.6.5",
+				"@storybook/blocks": "7.6.7",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/components": "7.6.7",
+				"@storybook/csf-plugin": "7.6.7",
+				"@storybook/csf-tools": "7.6.7",
 				"@storybook/global": "^5.0.0",
 				"@storybook/mdx2-csf": "^1.0.0",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/postinstall": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
-				"@storybook/react-dom-shim": "7.6.5",
-				"@storybook/theming": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/postinstall": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
+				"@storybook/react-dom-shim": "7.6.7",
+				"@storybook/theming": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"fs-extra": "^11.1.0",
 				"remark-external-links": "^8.0.0",
 				"remark-slug": "^6.0.0",
@@ -4419,24 +4418,24 @@
 			}
 		},
 		"node_modules/@storybook/addon-essentials": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.6.5.tgz",
-			"integrity": "sha512-VCLj1JAEpGoqF5iFJOo1CZFFck/tg4m/98DLdQuNuXvxT6jqaF0NI9UUQuJLIGteDCR7NKRbTFc1hV3/Ev+Ziw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.6.7.tgz",
+			"integrity": "sha512-nNLMrpIvc04z4XCA+kval/44eKAFJlUJeeL2pxwP7F/PSzjWe5BXv1bQHOiw8inRO5II0PzqwWnVCI9jsj7K5A==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/addon-actions": "7.6.5",
-				"@storybook/addon-backgrounds": "7.6.5",
-				"@storybook/addon-controls": "7.6.5",
-				"@storybook/addon-docs": "7.6.5",
-				"@storybook/addon-highlight": "7.6.5",
-				"@storybook/addon-measure": "7.6.5",
-				"@storybook/addon-outline": "7.6.5",
-				"@storybook/addon-toolbars": "7.6.5",
-				"@storybook/addon-viewport": "7.6.5",
-				"@storybook/core-common": "7.6.5",
-				"@storybook/manager-api": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
+				"@storybook/addon-actions": "7.6.7",
+				"@storybook/addon-backgrounds": "7.6.7",
+				"@storybook/addon-controls": "7.6.7",
+				"@storybook/addon-docs": "7.6.7",
+				"@storybook/addon-highlight": "7.6.7",
+				"@storybook/addon-measure": "7.6.7",
+				"@storybook/addon-outline": "7.6.7",
+				"@storybook/addon-toolbars": "7.6.7",
+				"@storybook/addon-viewport": "7.6.7",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/manager-api": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
 				"ts-dedent": "^2.0.0"
 			},
 			"funding": {
@@ -4449,9 +4448,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-highlight": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.5.tgz",
-			"integrity": "sha512-CxzmIb30F9nLPQwT0lCPYhOAwGlGF4IkgkO8hYA7VfGCGUkJZEyyN/YkP/ZCUSdCIRChDBouR3KiFFd4mDFKzg==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.7.tgz",
+			"integrity": "sha512-2F/tJdn45d4zrvf/cmE1vsczl99wK8+I+kkj0G7jLsrJR0w1zTgbgjy6T9j86HBTBvWcnysNFNIRWPAOh5Wdbw==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/global": "^5.0.0"
@@ -4462,9 +4461,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-links": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.6.5.tgz",
-			"integrity": "sha512-Lx4Ng+iXt0YpIrKGr+nOZlpN9ypOoEDoP/7bZ6m7GXuVAkDm3JrRCBp7e2ZKSKcTxPdjPuO9HVKkIjtqjINlpw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.6.7.tgz",
+			"integrity": "sha512-O5LekPslkAIDtXC/TCIyg/3c0htBxDYwb/s+NrZUPTNWJsngxvTAwp6aIk6aVSeSCFUMWvBFcVsuV3hv+ndK6w==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/csf": "^0.1.2",
@@ -4485,9 +4484,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-measure": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.6.5.tgz",
-			"integrity": "sha512-tlUudVQSrA+bwI4dhO8J7nYHtYdylcBZ86ybnqMmdTthsnyc7jnaFVQwbb6bbQJpPxvEvoNds5bVGUFocuvymQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.6.7.tgz",
+			"integrity": "sha512-t1RnnNO4Xzgnsxu63FlZwsCTF0+9jKxr44NiJAUOxW9ppbCvs/JfSDOOvcDRtPWyjgnyzexNUUctMfxvLrU01A==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/global": "^5.0.0",
@@ -4499,9 +4498,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-outline": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.6.5.tgz",
-			"integrity": "sha512-P7X4+Z9L/l/RZW9UvvM+iuK2SUHD22KPc+dbYOifRXDovUqhfmcKVh1CUqTDMyZrg2ZAbropehMz1eI9BlQfxg==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.6.7.tgz",
+			"integrity": "sha512-gu2y46ijjMkXlxy1f8Cctgjw5b5y8vSIqNAYlrs5/Qy+hJAWyU6lj2PFGOCCUG4L+F45fAjwWAin6qz43+WnRQ==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/global": "^5.0.0",
@@ -4513,9 +4512,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-toolbars": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.5.tgz",
-			"integrity": "sha512-/zqWbVNE/SHc8I5Prnd2Q8U57RGEIYvHfeXjfkuLcE2Quc4Iss4x/9eU7SKu4jm+IOO2s0wlN6HcqI3XEf2XxA==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.7.tgz",
+			"integrity": "sha512-vT+YMzw8yVwndhJglI0XtELfXWq1M0HEy5ST3XPzbjmsJ54LgTf1b29UMkh0E/05qBQNFCcbT9B/tLxqWezxlg==",
 			"dev": true,
 			"funding": {
 				"type": "opencollective",
@@ -4523,9 +4522,9 @@
 			}
 		},
 		"node_modules/@storybook/addon-viewport": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.5.tgz",
-			"integrity": "sha512-9ghKTaduIUvQ6oShmWLuwMeTjtMR4RgKeKHrTJ7THMqvE/ydDPCYeL7ugF65ocXZSEz/QmxdK7uL686ZMKsqNA==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.7.tgz",
+			"integrity": "sha512-Q/BKjJaKzl4RWxH45K2iIXwkicj4ReVAUIpIyd7dPBb/Bx+hEDYZxR5dDg82AMkZdA71x5ttMnuDSuVpmWAE6g==",
 			"dev": true,
 			"dependencies": {
 				"memoizerific": "^1.11.3"
@@ -4536,22 +4535,22 @@
 			}
 		},
 		"node_modules/@storybook/blocks": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.5.tgz",
-			"integrity": "sha512-/NjuYkPks5w9lKn47KLgVC5cBkwfc+ERAp0CY0Xe//BQJkP+bcI8lE8d9Qc9IXFbOTvYEULeQrFgCkesk5BmLg==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.7.tgz",
+			"integrity": "sha512-+QEvGQ0he/YvFS3lsZORJWxhQIyqcCDWsxbJxJiByePd+Z4my3q8xwtPhHW0TKRL0xUgNE/GnTfMMqJfevTuSw==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/channels": "7.6.5",
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/components": "7.6.5",
-				"@storybook/core-events": "7.6.5",
+				"@storybook/channels": "7.6.7",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/components": "7.6.7",
+				"@storybook/core-events": "7.6.7",
 				"@storybook/csf": "^0.1.2",
-				"@storybook/docs-tools": "7.6.5",
+				"@storybook/docs-tools": "7.6.7",
 				"@storybook/global": "^5.0.0",
-				"@storybook/manager-api": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
-				"@storybook/theming": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/manager-api": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
+				"@storybook/theming": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/lodash": "^4.14.167",
 				"color-convert": "^2.0.1",
 				"dequal": "^2.0.2",
@@ -4575,15 +4574,15 @@
 			}
 		},
 		"node_modules/@storybook/builder-manager": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.5.tgz",
-			"integrity": "sha512-FQyI+tfzMam2XKXq7k921YVafIJs9Vqvos5qx8vyRnRffo55UU8tgunwjGn0PswtbMm6sThVqE0C0ZzVr7RG8A==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.7.tgz",
+			"integrity": "sha512-6HYpj6+g/qbDMvImVz/G/aANbkhppyBa1ozfHxLK7tRD79YvozCWmj2Z9umRekPv9VIeMxnI5EEzJXOsoMX5DQ==",
 			"dev": true,
 			"dependencies": {
 				"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-				"@storybook/core-common": "7.6.5",
-				"@storybook/manager": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/manager": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
 				"@types/ejs": "^3.1.1",
 				"@types/find-cache-dir": "^3.2.1",
 				"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
@@ -4992,19 +4991,19 @@
 			}
 		},
 		"node_modules/@storybook/builder-vite": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-7.6.5.tgz",
-			"integrity": "sha512-VbAYTGr92lgCWTwO2Z7NgSW3f5/K4Vr0Qxa2IlTgMCymWdDbWdIQiREcmCP0vjAGM2ftq1+vxngohVgx/r7pUw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-7.6.7.tgz",
+			"integrity": "sha512-Sv+0ROFU9k+mkvIPsPHC0lkKDzBeMpvfO9uFRl1RDSsXBfcPPZKNo5YK7U7fOhesH0BILzurGA+U/aaITMSZ9g==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/channels": "7.6.5",
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/core-common": "7.6.5",
-				"@storybook/csf-plugin": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/preview": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/channels": "7.6.7",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/csf-plugin": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/preview": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/find-cache-dir": "^3.2.1",
 				"browser-assert": "^1.2.1",
 				"es-module-lexer": "^0.9.3",
@@ -5053,13 +5052,13 @@
 			}
 		},
 		"node_modules/@storybook/channels": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.5.tgz",
-			"integrity": "sha512-FIlNkyfQy9uHoJfAFL2/wO3ASGJELFvBzURBE2rcEF/TS7GcUiqWnBfiDxAbwSEjSOm2F0eEq3UXhaZEjpJHDw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.7.tgz",
+			"integrity": "sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/core-events": "7.6.5",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/core-events": "7.6.7",
 				"@storybook/global": "^5.0.0",
 				"qs": "^6.10.0",
 				"telejson": "^7.2.0",
@@ -5071,23 +5070,23 @@
 			}
 		},
 		"node_modules/@storybook/cli": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.5.tgz",
-			"integrity": "sha512-w+Y8dx5oCLQVESOVmpsQuFksr/ewARKrnSKl9kwnVMN4sMgjOgoZ3zmV66J7SKexvwyuwlOjf840pmEglGdPPg==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.7.tgz",
+			"integrity": "sha512-DwDWzkifBH17ry+n+d+u52Sv69dZQ+04ETJdDDzghcyAcKnFzrRNukj4tJ21cm+ZAU/r0fKR9d4Qpbogca9fAg==",
 			"dev": true,
 			"dependencies": {
 				"@babel/core": "^7.23.2",
 				"@babel/preset-env": "^7.23.2",
 				"@babel/types": "^7.23.0",
 				"@ndelangen/get-tarball": "^3.0.7",
-				"@storybook/codemod": "7.6.5",
-				"@storybook/core-common": "7.6.5",
-				"@storybook/core-events": "7.6.5",
-				"@storybook/core-server": "7.6.5",
-				"@storybook/csf-tools": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/telemetry": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/codemod": "7.6.7",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/core-events": "7.6.7",
+				"@storybook/core-server": "7.6.7",
+				"@storybook/csf-tools": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/telemetry": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/semver": "^7.3.4",
 				"@yarnpkg/fslib": "2.10.3",
 				"@yarnpkg/libzip": "2.3.0",
@@ -5375,9 +5374,9 @@
 			"dev": true
 		},
 		"node_modules/@storybook/client-logger": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.5.tgz",
-			"integrity": "sha512-S5aROWgssqg7tcs9lgW5wmCAz4SxMAtioiyVj5oFecmPCbQtFVIAREYzeoxE4GfJL+plrfRkum4BzziANn8EhQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz",
+			"integrity": "sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==",
 			"dev": true,
 			"dependencies": {
 				"@storybook/global": "^5.0.0"
@@ -5388,18 +5387,18 @@
 			}
 		},
 		"node_modules/@storybook/codemod": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.5.tgz",
-			"integrity": "sha512-K5C9ltBClZ0aSyujGt3RJFtRicrUZy8nzhHrcADUj27rrQD26jH/p+Y05jWKj9JcI8SyMg978GN5X/1aw2Y31A==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.7.tgz",
+			"integrity": "sha512-an2pD5OHqO7CE8Wb7JxjrDnpQgeoxB22MyOs8PPJ9Rvclhpjg+Ku9RogoObYm//zR4g406l7Ec8mTltUkVCEOA==",
 			"dev": true,
 			"dependencies": {
 				"@babel/core": "^7.23.2",
 				"@babel/preset-env": "^7.23.2",
 				"@babel/types": "^7.23.0",
 				"@storybook/csf": "^0.1.2",
-				"@storybook/csf-tools": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/csf-tools": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/cross-spawn": "^6.0.2",
 				"cross-spawn": "^7.0.3",
 				"globby": "^11.0.2",
@@ -5429,18 +5428,18 @@
 			}
 		},
 		"node_modules/@storybook/components": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.5.tgz",
-			"integrity": "sha512-w4ZucbBBZ+NKMWlJKVj2I/bMBBq7gzDp9lzc4+8QaQ3vUPXKqc1ilIPYo/7UR5oxwDVMZocmMSgl9L8lvf7+Mw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.7.tgz",
+			"integrity": "sha512-1HN4p+MCI4Tx9VGZayZyqbW7SB7mXQLnS5fUbTE1gXaMYHpzFvcrRNROeV1LZPClJX6qx1jgE5ngZojhxGuxMA==",
 			"dev": true,
 			"dependencies": {
 				"@radix-ui/react-select": "^1.2.2",
 				"@radix-ui/react-toolbar": "^1.0.4",
-				"@storybook/client-logger": "7.6.5",
+				"@storybook/client-logger": "7.6.7",
 				"@storybook/csf": "^0.1.2",
 				"@storybook/global": "^5.0.0",
-				"@storybook/theming": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/theming": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"memoizerific": "^1.11.3",
 				"use-resize-observer": "^9.1.0",
 				"util-deprecate": "^1.0.2"
@@ -5455,13 +5454,13 @@
 			}
 		},
 		"node_modules/@storybook/core-client": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.5.tgz",
-			"integrity": "sha512-6FtyJcz8MSl+JYwNJZ53FM6rkT27pFHWcJPdtw/9229Ec8as9RpkNeZ/NBZjRTeDkn9Ki0VOiVAefNie9tZ/8Q==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.7.tgz",
+			"integrity": "sha512-ZQivyEzYsZok8vRj5Qan7LbiMUnO89rueWzTnZs4IS6JIaQtjoPI1rGVq+h6qOCM6tki478hic8FS+zwGQ6q+w==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/preview-api": "7.6.5"
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/preview-api": "7.6.7"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -5469,14 +5468,14 @@
 			}
 		},
 		"node_modules/@storybook/core-common": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.5.tgz",
-			"integrity": "sha512-z4EgzZSIVbID6Ib0jhh3jimKeaDWU8OOhoZYfn3galFmgQWowWOv1oMgipWiXfRLWw9DaLFQiCHIdLANH+VO2g==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.7.tgz",
+			"integrity": "sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/core-events": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/core-events": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/find-cache-dir": "^3.2.1",
 				"@types/node": "^18.0.0",
 				"@types/node-fetch": "^2.6.4",
@@ -5856,9 +5855,9 @@
 			}
 		},
 		"node_modules/@storybook/core-common/node_modules/@types/node": {
-			"version": "18.19.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz",
-			"integrity": "sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==",
+			"version": "18.19.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.5.tgz",
+			"integrity": "sha512-22MG6T02Hos2JWfa1o5jsIByn+bc5iOt1IS4xyg6OG68Bu+wMonVZzdrgCw693++rpLE9RUT/Bx15BeDzO0j+g==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -6000,9 +5999,9 @@
 			}
 		},
 		"node_modules/@storybook/core-events": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.5.tgz",
-			"integrity": "sha512-zk2q/qicYXAzHA4oV3GDbIql+Kd4TOHUgDE8e4jPCOPp856z2ScqEKUAbiJizs6eEJOH4nW9Db1kuzgrBVEykQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.7.tgz",
+			"integrity": "sha512-KZ5d03c47pnr5/kY26pJtWq7WpmCPXLbgyjJZDSc+TTY153BdZksvlBXRHtqM1yj2UM6QsSyIuiJaADJNAbP2w==",
 			"dev": true,
 			"dependencies": {
 				"ts-dedent": "^2.0.0"
@@ -6013,26 +6012,26 @@
 			}
 		},
 		"node_modules/@storybook/core-server": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.5.tgz",
-			"integrity": "sha512-BfKzK/ObTjUcPvE5/r1pogCifM/4nLRhOUYJl7XekwHkOQwn19e6H3/ku1W3jDoYXBu642Dc9X7l/ERjKTqxFg==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.7.tgz",
+			"integrity": "sha512-elKRv/DNahNNkGcQY/FdOBrLPmZF0T0fwmAmbc4qqeAisjl+to9TO77zdo2ieaEHKyRwE3B3dOB4EXomdF4N/g==",
 			"dev": true,
 			"dependencies": {
 				"@aw-web-design/x-default-browser": "1.4.126",
 				"@discoveryjs/json-ext": "^0.5.3",
-				"@storybook/builder-manager": "7.6.5",
-				"@storybook/channels": "7.6.5",
-				"@storybook/core-common": "7.6.5",
-				"@storybook/core-events": "7.6.5",
+				"@storybook/builder-manager": "7.6.7",
+				"@storybook/channels": "7.6.7",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/core-events": "7.6.7",
 				"@storybook/csf": "^0.1.2",
-				"@storybook/csf-tools": "7.6.5",
+				"@storybook/csf-tools": "7.6.7",
 				"@storybook/docs-mdx": "^0.1.0",
 				"@storybook/global": "^5.0.0",
-				"@storybook/manager": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
-				"@storybook/telemetry": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/manager": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
+				"@storybook/telemetry": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/detect-port": "^1.3.0",
 				"@types/node": "^18.0.0",
 				"@types/pretty-hrtime": "^1.0.0",
@@ -6066,9 +6065,9 @@
 			}
 		},
 		"node_modules/@storybook/core-server/node_modules/@types/node": {
-			"version": "18.19.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.3.tgz",
-			"integrity": "sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==",
+			"version": "18.19.5",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.5.tgz",
+			"integrity": "sha512-22MG6T02Hos2JWfa1o5jsIByn+bc5iOt1IS4xyg6OG68Bu+wMonVZzdrgCw693++rpLE9RUT/Bx15BeDzO0j+g==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~5.26.4"
@@ -6169,12 +6168,12 @@
 			}
 		},
 		"node_modules/@storybook/csf-plugin": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.6.5.tgz",
-			"integrity": "sha512-iQ8Y/Qq1IUhHRddjDVicWJA2sM7OZA1FR97OvWUT2240WjCuQSCfy32JD8TQlYjqXgEolJeLPv3zW4qH5om4LQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.6.7.tgz",
+			"integrity": "sha512-YL7e6H4iVcsDI0UpgpdQX2IiGDrlbgaQMHQgDLWXmZyKxBcy0ONROAX5zoT1ml44EHkL60TMaG4f7SinviJCog==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/csf-tools": "7.6.5",
+				"@storybook/csf-tools": "7.6.7",
 				"unplugin": "^1.3.1"
 			},
 			"funding": {
@@ -6183,9 +6182,9 @@
 			}
 		},
 		"node_modules/@storybook/csf-tools": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.5.tgz",
-			"integrity": "sha512-1iaCh7nt+WE7Q5UwRhLLc5flMNoAV/vBr0tvDSCKiHaO+D3dZzlZOe/U+S6wegdyN2QNcvT2xs179CcrX6Qp6w==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.7.tgz",
+			"integrity": "sha512-hyRbUGa2Uxvz3U09BjcOfMNf/5IYgRum1L6XszqK2O8tK9DGte1r6hArCIAcqiEmFMC40d0kalPzqu6WMNn7sg==",
 			"dev": true,
 			"dependencies": {
 				"@babel/generator": "^7.23.0",
@@ -6193,7 +6192,7 @@
 				"@babel/traverse": "^7.23.2",
 				"@babel/types": "^7.23.0",
 				"@storybook/csf": "^0.1.2",
-				"@storybook/types": "7.6.5",
+				"@storybook/types": "7.6.7",
 				"fs-extra": "^11.1.0",
 				"recast": "^0.23.1",
 				"ts-dedent": "^2.0.0"
@@ -6210,14 +6209,14 @@
 			"dev": true
 		},
 		"node_modules/@storybook/docs-tools": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.5.tgz",
-			"integrity": "sha512-UyHkHu5Af6jMpYsR4lZ69D32GQGeA0pLAn7jaBbQndgAjBdK1ykZcifiUC7Wz1hG7+YpuYspEGuDEddOh+X8FQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.7.tgz",
+			"integrity": "sha512-enTO/xVjBqwUraGCYTwdyjMvug3OSAM7TPPUEJ3KPieJNwAzcYkww/qNDMIAR4S39zPMrkAmtS3STvVadlJz7g==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/core-common": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"@types/doctrine": "^0.0.3",
 				"assert": "^2.1.0",
 				"doctrine": "^3.0.0",
@@ -6235,9 +6234,9 @@
 			"dev": true
 		},
 		"node_modules/@storybook/manager": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.5.tgz",
-			"integrity": "sha512-y1KLH0O1PGPyMxGMvOhppzFSO7r4ibjTve5iqsI0JZwxUjNuBKRLYbrhXdAyC2iacvxYNrHgevae1k9XdD+FQw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.7.tgz",
+			"integrity": "sha512-ZCrkB2zEXogzdOcVzD242ZVm4tlHqrayotnI6iOn9uiun0Pgny0m2d7s9Zge6K2dTOO1vZiOHuA/Mr6nnIDjsA==",
 			"dev": true,
 			"funding": {
 				"type": "opencollective",
@@ -6245,23 +6244,22 @@
 			}
 		},
 		"node_modules/@storybook/manager-api": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.5.tgz",
-			"integrity": "sha512-tE3OShOcs6A3XtI3NJd6hYQOZLaP++Fn0dCtowBwYh/vS1EN/AyroVmL97tsxn1DZTyoRt0GidwbB6dvLMBOwA==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.7.tgz",
+			"integrity": "sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/channels": "7.6.5",
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/core-events": "7.6.5",
+				"@storybook/channels": "7.6.7",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/core-events": "7.6.7",
 				"@storybook/csf": "^0.1.2",
 				"@storybook/global": "^5.0.0",
-				"@storybook/router": "7.6.5",
-				"@storybook/theming": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/router": "7.6.7",
+				"@storybook/theming": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"dequal": "^2.0.2",
 				"lodash": "^4.17.21",
 				"memoizerific": "^1.11.3",
-				"semver": "^7.3.7",
 				"store2": "^2.14.2",
 				"telejson": "^7.2.0",
 				"ts-dedent": "^2.0.0"
@@ -6271,39 +6269,6 @@
 				"url": "https://opencollective.com/storybook"
 			}
 		},
-		"node_modules/@storybook/manager-api/node_modules/lru-cache": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-			"dev": true,
-			"dependencies": {
-				"yallist": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@storybook/manager-api/node_modules/semver": {
-			"version": "7.5.4",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-			"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-			"dev": true,
-			"dependencies": {
-				"lru-cache": "^6.0.0"
-			},
-			"bin": {
-				"semver": "bin/semver.js"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@storybook/manager-api/node_modules/yallist": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-			"dev": true
-		},
 		"node_modules/@storybook/mdx2-csf": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
@@ -6311,9 +6276,9 @@
 			"dev": true
 		},
 		"node_modules/@storybook/node-logger": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.5.tgz",
-			"integrity": "sha512-xKw6IH1wLkIssekdBv3bd13xYKUF1t8EwqDR8BYcN8AVjZlqJMTifssqG4bYV+G/B7J3tz4ugJ5nmtWg6RQ0Qw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.7.tgz",
+			"integrity": "sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==",
 			"dev": true,
 			"funding": {
 				"type": "opencollective",
@@ -6321,9 +6286,9 @@
 			}
 		},
 		"node_modules/@storybook/postinstall": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.6.5.tgz",
-			"integrity": "sha512-12WxfpqGKsk7GQ3KWiZSbamsYK8vtRmhOTkavZ9IQkcJ/zuVfmqK80/Mds+njJMudUPzuREuSFGWACczo17EDA==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.6.7.tgz",
+			"integrity": "sha512-mrpRmcwFd9FcvtHPXA9x6vOrHLVCKScZX/Xx2QPWgAvB3W6uzP8G+8QNb1u834iToxrWeuszUMB9UXZK4Qj5yg==",
 			"dev": true,
 			"funding": {
 				"type": "opencollective",
@@ -6331,9 +6296,9 @@
 			}
 		},
 		"node_modules/@storybook/preview": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.5.tgz",
-			"integrity": "sha512-zmLa7C7yFGTYhgGZXoecdww9rx0Z5HpNi/GDBRWoNSK+FEdE8Jj2jF5NJ2ncldtYIyegz9ku29JFMKbhMj9K5Q==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.7.tgz",
+			"integrity": "sha512-/ddKIyT+6b8CKGJAma1wood4nwCAoi/E1olCqgpCmviMeUtAiMzgK0xzPwvq5Mxkz/cPeXVi8CQgaQZCa4yvNA==",
 			"dev": true,
 			"funding": {
 				"type": "opencollective",
@@ -6341,17 +6306,17 @@
 			}
 		},
 		"node_modules/@storybook/preview-api": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.5.tgz",
-			"integrity": "sha512-9XzuDXXgNuA6dDZ3DXsUwEG6ElxeTbzLuYuzcjtS1FusSICZ2iYmxfS0GfSud9MjPPYOJYoSOvMdIHjorjgByA==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.7.tgz",
+			"integrity": "sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/channels": "7.6.5",
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/core-events": "7.6.5",
+				"@storybook/channels": "7.6.7",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/core-events": "7.6.7",
 				"@storybook/csf": "^0.1.2",
 				"@storybook/global": "^5.0.0",
-				"@storybook/types": "7.6.5",
+				"@storybook/types": "7.6.7",
 				"@types/qs": "^6.9.5",
 				"dequal": "^2.0.2",
 				"lodash": "^4.17.21",
@@ -6367,9 +6332,9 @@
 			}
 		},
 		"node_modules/@storybook/react-dom-shim": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.5.tgz",
-			"integrity": "sha512-Qp3N3zENdvx20ikHmz5yI03z+mAWF8bUAwUofqXarVtZUkBNtvfTfUwgAezOAF0eClClH+ktIziIKd976tLSPw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.7.tgz",
+			"integrity": "sha512-b/rmy/YzVrwP+ifyZG4yXVIdeFVdTbmziodHUlbrWiUNsqtTZZur9kqkKRUH/7ofji9MFe81nd0MRlcTNFomqg==",
 			"dev": true,
 			"funding": {
 				"type": "opencollective",
@@ -6381,12 +6346,12 @@
 			}
 		},
 		"node_modules/@storybook/router": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.5.tgz",
-			"integrity": "sha512-QiTC86gRuoepzzmS6HNJZTwfz/n27NcqtaVEIxJi1Yvsx2/kLa9NkRhylNkfTuZ1gEry9stAlKWanMsB2aKyjQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.7.tgz",
+			"integrity": "sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/client-logger": "7.6.5",
+				"@storybook/client-logger": "7.6.7",
 				"memoizerific": "^1.11.3",
 				"qs": "^6.10.0"
 			},
@@ -6396,14 +6361,14 @@
 			}
 		},
 		"node_modules/@storybook/telemetry": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.5.tgz",
-			"integrity": "sha512-FiLRh9k9LoGphqgBqPYySWdGqplihiZyDwqdo+Qs19RcQ/eiKg0W7fdA09nStcdcsHmDl/1cMfRhz9KUiMtwOw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.7.tgz",
+			"integrity": "sha512-NHGzC/LGLXpK4AFbVj8ln5ab86ZiiNFvORQMn3+LNGwUt3ZdsHBzExN+WPZdw7OPtfk4ubUY89FXH2GedhTALw==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/core-common": "7.6.5",
-				"@storybook/csf-tools": "7.6.5",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/core-common": "7.6.7",
+				"@storybook/csf-tools": "7.6.7",
 				"chalk": "^4.1.0",
 				"detect-package-manager": "^2.0.1",
 				"fetch-retry": "^5.0.2",
@@ -6468,13 +6433,13 @@
 			}
 		},
 		"node_modules/@storybook/theming": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.5.tgz",
-			"integrity": "sha512-RpcWT0YEgiobO41McVPDfQQHHFnjyr1sJnNTPJIvOUgSfURdgSj17mQVxtD5xcXcPWUdle5UhIOrCixHbL/NNw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.7.tgz",
+			"integrity": "sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==",
 			"dev": true,
 			"dependencies": {
 				"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-				"@storybook/client-logger": "7.6.5",
+				"@storybook/client-logger": "7.6.7",
 				"@storybook/global": "^5.0.0",
 				"memoizerific": "^1.11.3"
 			},
@@ -6488,12 +6453,12 @@
 			}
 		},
 		"node_modules/@storybook/types": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.5.tgz",
-			"integrity": "sha512-Q757v+fYZZSaEpks/zDL5YgXRozxkgKakXFc+BoQHK5q5sVhJ+0jvpLJiAQAniIIaMIkqY/G24Kd6Uo6UdKBCg==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.7.tgz",
+			"integrity": "sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/channels": "7.6.5",
+				"@storybook/channels": "7.6.7",
 				"@types/babel__core": "^7.0.0",
 				"@types/express": "^4.7.0",
 				"file-system-cache": "2.3.0"
@@ -6504,18 +6469,18 @@
 			}
 		},
 		"node_modules/@storybook/web-components": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/web-components/-/web-components-7.6.5.tgz",
-			"integrity": "sha512-uBL1d/qSwvbmkV/JGBdLySdmyOnZKBK+hn7+lgfQfTPV7JjOmTzuifnnSrhKlI/wupdBM/LYjlax5kGYt3oBXQ==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/web-components/-/web-components-7.6.7.tgz",
+			"integrity": "sha512-TrBhMctSIgV2qqyV7fhhaNIdAvuaca2jEDXLXFiH/M2NkyXRepNjG7AZndWhQUGvG01ojs1+2vRNqJZtKCmFDg==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/client-logger": "7.6.5",
-				"@storybook/core-client": "7.6.5",
-				"@storybook/docs-tools": "7.6.5",
+				"@storybook/client-logger": "7.6.7",
+				"@storybook/core-client": "7.6.7",
+				"@storybook/docs-tools": "7.6.7",
 				"@storybook/global": "^5.0.0",
-				"@storybook/manager-api": "7.6.5",
-				"@storybook/preview-api": "7.6.5",
-				"@storybook/types": "7.6.5",
+				"@storybook/manager-api": "7.6.7",
+				"@storybook/preview-api": "7.6.7",
+				"@storybook/types": "7.6.7",
 				"tiny-invariant": "^1.3.1",
 				"ts-dedent": "^2.0.0"
 			},
@@ -6531,15 +6496,15 @@
 			}
 		},
 		"node_modules/@storybook/web-components-vite": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/@storybook/web-components-vite/-/web-components-vite-7.6.5.tgz",
-			"integrity": "sha512-j4lfrgPjlqAeoUdfXWMESUAxrOn+YUJekGh3saxsHxXIiYnzJBdkiJju4Hzqav4j8645bJzlZBw51e6wJJsuFw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/@storybook/web-components-vite/-/web-components-vite-7.6.7.tgz",
+			"integrity": "sha512-jfnVNhmgDYBdEnOliNcfo9FwfDDke66y6Zw2zkOz9qhJy8DCd5TzgDEmE7AU2XRzb1a464A90xfvJpvlUracfA==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/builder-vite": "7.6.5",
-				"@storybook/core-server": "7.6.5",
-				"@storybook/node-logger": "7.6.5",
-				"@storybook/web-components": "7.6.5",
+				"@storybook/builder-vite": "7.6.7",
+				"@storybook/core-server": "7.6.7",
+				"@storybook/node-logger": "7.6.7",
+				"@storybook/web-components": "7.6.7",
 				"magic-string": "^0.30.0"
 			},
 			"engines": {
@@ -6609,9 +6574,9 @@
 			}
 		},
 		"node_modules/@types/babel__generator": {
-			"version": "7.6.7",
-			"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.7.tgz",
-			"integrity": "sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==",
+			"version": "7.6.8",
+			"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+			"integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
 			"dev": true,
 			"dependencies": {
 				"@babel/types": "^7.0.0"
@@ -6628,9 +6593,9 @@
 			}
 		},
 		"node_modules/@types/babel__traverse": {
-			"version": "7.20.4",
-			"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.4.tgz",
-			"integrity": "sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==",
+			"version": "7.20.5",
+			"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+			"integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
 			"dev": true,
 			"dependencies": {
 				"@babel/types": "^7.20.7"
@@ -7002,9 +6967,9 @@
 			"dev": true
 		},
 		"node_modules/@types/node-fetch": {
-			"version": "2.6.9",
-			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.9.tgz",
-			"integrity": "sha512-bQVlnMLFJ2d35DkPNjEPmd9ueO/rh5EiaZt2bhqiSarPjZIuIV6bPQVqcrEyvNo+AfTrRGVazle1tl597w3gfA==",
+			"version": "2.6.10",
+			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.10.tgz",
+			"integrity": "sha512-PPpPK6F9ALFTn59Ka3BaL+qGuipRfxNE8qVgkp0bVixeiR2c2/L+IVOiBdu9JhhT22sWnQEp6YyHGI2b2+CMcA==",
 			"dev": true,
 			"dependencies": {
 				"@types/node": "*",
@@ -11153,6 +11118,15 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/citty": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.5.tgz",
+			"integrity": "sha512-AS7n5NSc0OQVMV9v6wt3ByujNIrne0/cTjiC2MYqhvao57VNfiuVksTSr2p17nVOhEr2KtqiAkGwHcgMC/qUuQ==",
+			"dev": true,
+			"dependencies": {
+				"consola": "^3.2.3"
+			}
+		},
 		"node_modules/clean-stack": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -11304,12 +11278,6 @@
 			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
 			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
 		},
-		"node_modules/colorette": {
-			"version": "2.0.20",
-			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-			"dev": true
-		},
 		"node_modules/combined-stream": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -11477,6 +11445,15 @@
 				"util-deprecate": "~1.0.1"
 			}
 		},
+		"node_modules/consola": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+			"integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
 		"node_modules/constant-case": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
@@ -11564,9 +11541,9 @@
 			}
 		},
 		"node_modules/core-js-compat": {
-			"version": "3.34.0",
-			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.34.0.tgz",
-			"integrity": "sha512-4ZIyeNbW/Cn1wkMMDy+mvrRUxrwFNjKwbhCfQpDd+eLgYipDqp8oGFGtLmhh18EDPKA0g3VUBYOxQGGwvWLVpA==",
+			"version": "3.35.0",
+			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz",
+			"integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==",
 			"dev": true,
 			"dependencies": {
 				"browserslist": "^4.22.2"
@@ -11792,9 +11769,9 @@
 			}
 		},
 		"node_modules/defu": {
-			"version": "6.1.3",
-			"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.3.tgz",
-			"integrity": "sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ==",
+			"version": "6.1.4",
+			"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+			"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
 			"dev": true
 		},
 		"node_modules/degenerator": {
@@ -13538,9 +13515,9 @@
 			"dev": true
 		},
 		"node_modules/flow-parser": {
-			"version": "0.224.0",
-			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.224.0.tgz",
-			"integrity": "sha512-S1P78o0VLB1FZvkoGSIpaRiiTUQ3xDhm9I4Z1qc3lglmkjehfR2sjM0vhwKS7UC1G12VT4Leb/GGV/KlactqjA==",
+			"version": "0.226.0",
+			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.226.0.tgz",
+			"integrity": "sha512-YlH+Y/P/5s0S7Vg14RwXlJMF/JsGfkG7gcKB/zljyoqaPNX9YVsGzx+g6MLTbhZaWbPhs4347aTpmSb9GgiPtw==",
 			"dev": true,
 			"engines": {
 				"node": ">=0.4.0"
@@ -13920,16 +13897,17 @@
 			}
 		},
 		"node_modules/giget": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/giget/-/giget-1.1.3.tgz",
-			"integrity": "sha512-zHuCeqtfgqgDwvXlR84UNgnJDuUHQcNI5OqWqFxxuk2BshuKbYhJWdxBsEo4PvKqoGh23lUAIvBNpChMLv7/9Q==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/giget/-/giget-1.2.1.tgz",
+			"integrity": "sha512-4VG22mopWtIeHwogGSy1FViXVo0YT+m6BrqZfz0JJFwbSsePsCdOzdLIIli5BtMp7Xe8f/o2OmBpQX2NBOC24g==",
 			"dev": true,
 			"dependencies": {
-				"colorette": "^2.0.20",
-				"defu": "^6.1.2",
-				"https-proxy-agent": "^7.0.2",
-				"mri": "^1.2.0",
-				"node-fetch-native": "^1.4.0",
+				"citty": "^0.1.5",
+				"consola": "^3.2.3",
+				"defu": "^6.1.3",
+				"node-fetch-native": "^1.6.1",
+				"nypm": "^0.3.3",
+				"ohash": "^1.1.3",
 				"pathe": "^1.1.1",
 				"tar": "^6.2.0"
 			},
@@ -16451,9 +16429,9 @@
 			}
 		},
 		"node_modules/markdown-to-jsx": {
-			"version": "7.3.2",
-			"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz",
-			"integrity": "sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==",
+			"version": "7.4.0",
+			"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.0.tgz",
+			"integrity": "sha512-zilc+MIkVVXPyTb4iIUTIz9yyqfcWjszGXnwF9K/aiBWcHXFcmdEMTkG01/oQhwSCH7SY1BnG6+ev5BzWmbPrg==",
 			"dev": true,
 			"engines": {
 				"node": ">= 10"
@@ -17698,9 +17676,9 @@
 			}
 		},
 		"node_modules/node-fetch-native": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.4.1.tgz",
-			"integrity": "sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==",
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.1.tgz",
+			"integrity": "sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==",
 			"dev": true
 		},
 		"node_modules/node-fetch/node_modules/tr46": {
@@ -18087,6 +18065,158 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/nypm": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.4.tgz",
+			"integrity": "sha512-1JLkp/zHBrkS3pZ692IqOaIKSYHmQXgqfELk6YTOfVBnwealAmPA1q2kKK7PHJAHSMBozerThEFZXP3G6o7Ukg==",
+			"dev": true,
+			"dependencies": {
+				"citty": "^0.1.5",
+				"execa": "^8.0.1",
+				"pathe": "^1.1.1",
+				"ufo": "^1.3.2"
+			},
+			"bin": {
+				"nypm": "dist/cli.mjs"
+			},
+			"engines": {
+				"node": "^14.16.0 || >=16.10.0"
+			}
+		},
+		"node_modules/nypm/node_modules/execa": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+			"integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^8.0.1",
+				"human-signals": "^5.0.0",
+				"is-stream": "^3.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^5.1.0",
+				"onetime": "^6.0.0",
+				"signal-exit": "^4.1.0",
+				"strip-final-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=16.17"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/nypm/node_modules/get-stream": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+			"integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/human-signals": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+			"integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.17.0"
+			}
+		},
+		"node_modules/nypm/node_modules/is-stream": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+			"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/mimic-fn": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+			"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/npm-run-path": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
+			"integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/onetime": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+			"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/path-key": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+			"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/nypm/node_modules/strip-final-newline": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+			"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/object-inspect": {
 			"version": "1.13.1",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -18225,6 +18355,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/ohash": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.3.tgz",
+			"integrity": "sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==",
+			"dev": true
+		},
 		"node_modules/on-finished": {
 			"version": "2.4.1",
 			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -20717,12 +20853,12 @@
 			"dev": true
 		},
 		"node_modules/storybook": {
-			"version": "7.6.5",
-			"resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.5.tgz",
-			"integrity": "sha512-uHPrL+g/0v6iIVtDA8J0uWd3jDZcdr51lCR/vPXTkrCY1uVaFjswzl8EMy5PR05I7jMpKUzkJWZtFbgbh9e1Bw==",
+			"version": "7.6.7",
+			"resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.7.tgz",
+			"integrity": "sha512-1Cd895dqYIT5MOUOCDlD73OTWoJubLq/sWC7AMzkMrLu76yD4Cu6f+wv1HDrRAheRaCaeT3yhYEhsMB6qHIcaA==",
 			"dev": true,
 			"dependencies": {
-				"@storybook/cli": "7.6.5"
+				"@storybook/cli": "7.6.7"
 			},
 			"bin": {
 				"sb": "index.js",
@@ -21282,9 +21418,9 @@
 			}
 		},
 		"node_modules/tocbot": {
-			"version": "4.23.0",
-			"resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.23.0.tgz",
-			"integrity": "sha512-5DWuSZXsqG894mkGb8ZsQt9myyQyVxE50AiGRZ0obV0BVUTVkaZmc9jbgpknaAAPUm4FIrzGkEseD6FuQJYJDQ==",
+			"version": "4.25.0",
+			"resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.25.0.tgz",
+			"integrity": "sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==",
 			"dev": true
 		},
 		"node_modules/toidentifier": {
@@ -21703,6 +21839,12 @@
 				"node": "*"
 			}
 		},
+		"node_modules/ufo": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",
+			"integrity": "sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==",
+			"dev": true
+		},
 		"node_modules/uglify-js": {
 			"version": "3.17.4",
 			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -21925,15 +22067,15 @@
 			}
 		},
 		"node_modules/unplugin": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.1.tgz",
-			"integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.6.0.tgz",
+			"integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==",
 			"dev": true,
 			"dependencies": {
 				"acorn": "^8.11.2",
 				"chokidar": "^3.5.3",
 				"webpack-sources": "^3.2.3",
-				"webpack-virtual-modules": "^0.6.0"
+				"webpack-virtual-modules": "^0.6.1"
 			}
 		},
 		"node_modules/untildify": {
@@ -22003,9 +22145,9 @@
 			}
 		},
 		"node_modules/use-callback-ref": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
-			"integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
+			"integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==",
 			"dev": true,
 			"dependencies": {
 				"tslib": "^2.0.0"
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 64502a378c..b2934aac7f 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -158,13 +158,13 @@
 		"@rollup/plugin-commonjs": "^25.0.7",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
-		"@storybook/addon-a11y": "7.6.5",
-		"@storybook/addon-actions": "7.6.5",
-		"@storybook/addon-essentials": "7.6.5",
-		"@storybook/addon-links": "7.6.5",
+		"@storybook/addon-a11y": "7.6.7",
+		"@storybook/addon-actions": "7.6.7",
+		"@storybook/addon-essentials": "7.6.7",
+		"@storybook/addon-links": "7.6.7",
 		"@storybook/mdx2-csf": "^1.1.0",
-		"@storybook/web-components-vite": "7.6.5",
-		"@storybook/web-components": "7.6.5",
+		"@storybook/web-components-vite": "7.6.7",
+		"@storybook/web-components": "7.6.7",
 		"@types/chai": "^4.3.5",
 		"@types/lodash-es": "^4.17.8",
 		"@types/mocha": "^10.0.1",
@@ -198,7 +198,7 @@
 		"rollup-plugin-import-css": "^3.3.5",
 		"rollup-plugin-web-worker-loader": "^1.6.1",
 		"rollup": "^4.9.0",
-		"storybook": "7.6.5",
+		"storybook": "7.6.7",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
 		"typescript-json-schema": "^0.62.0",

From ef08344a55bcc713a82755a2855eb29cdad61734 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:53:58 +0100
Subject: [PATCH 56/86] fix eslint warnings

---
 .../src/apps/backoffice/backoffice.element.ts                   | 2 +-
 .../src/apps/backoffice/components/backoffice-main.element.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
index 17d532a707..27bcf47a4e 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts
@@ -1,4 +1,4 @@
-import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context.js';
+import { UmbBackofficeContext } from './backoffice.context.js';
 import { UmbServerExtensionRegistrator } from './server-extension-registrator.controller.js';
 import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts
index f319f9d9e3..8cd338830b 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts
@@ -76,7 +76,7 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 
 	private _onRouteChange = async (event: UmbRouterSlotChangeEvent) => {
 		const currentPath = event.target.localActiveViewPath || '';
-		const section = this._sections.find((s) => this._routePrefix + (s.manifest as any).meta.pathname === currentPath);
+		const section = this._sections.find((s) => this._routePrefix + s.manifest?.meta.pathname === currentPath);
 		if (!section) return;
 		await section.asPromise();
 		if (section.manifest) {

From 53159d797de3ba03ac03615b88f5de26f2ea700b Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:58:33 +0100
Subject: [PATCH 57/86] fix eslint warnings

---
 .../apps/installer/database/installer-database.stories.ts | 8 +++-----
 .../src/libs/class-api/class.mixin.ts                     | 2 +-
 .../src/libs/class-api/context-base.class.ts              | 1 +
 .../src/libs/context-api/consume/context-consumer.test.ts | 2 ++
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts
index 6d74c051d8..3bfc558ee4 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts
@@ -1,13 +1,11 @@
 import './installer-database.element.js';
 
-import { Meta, Story } from '@storybook/web-components';
 import { html } from '@umbraco-cms/backoffice/external/lit';
-const { rest } = window.MockServiceWorker;
-
-import { installerContextProvider } from '../shared/utils.story-helpers.js';
+import { Meta, Story } from '@storybook/web-components';
 
 import type { UmbInstallerDatabaseElement } from './installer-database.element.js';
-import type { InstallSettingsResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { installerContextProvider } from '../shared/utils.story-helpers.js';
+
 export default {
 	title: 'Apps/Installer/Steps',
 	component: 'umb-installer-database',
diff --git a/src/Umbraco.Web.UI.Client/src/libs/class-api/class.mixin.ts b/src/Umbraco.Web.UI.Client/src/libs/class-api/class.mixin.ts
index c075be0ee0..4073a02727 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/class-api/class.mixin.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/class-api/class.mixin.ts
@@ -122,7 +122,7 @@ export const UmbClassMixin = <T extends ClassConstructor>(superClass: T) => {
 		public destroy() {
 			if (this._host) {
 				this._host.removeController(this);
-				this._host = undefined as any;
+				this._host = undefined as never;
 			}
 			super.destroy();
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/libs/class-api/context-base.class.ts b/src/Umbraco.Web.UI.Client/src/libs/class-api/context-base.class.ts
index 5c1a721c26..204c2c2ae2 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/class-api/context-base.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/class-api/context-base.class.ts
@@ -8,6 +8,7 @@ import { UmbBaseController } from './controller-base.class.js';
  */
 export abstract class UmbContextBase<
 	ContextType,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	GivenContextToken extends UmbContextToken<any, ContextType> = UmbContextToken<any, ContextType>,
 > extends UmbBaseController {
 	constructor(host: UmbControllerHost, contextToken: GivenContextToken | string) {
diff --git a/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.test.ts b/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.test.ts
index aee8547152..749907a3a5 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consumer.test.ts
@@ -153,10 +153,12 @@ describe('UmbContextConsumer', () => {
 		type A = { prop: string };
 
 		function discriminator(instance: unknown): instance is A {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			return typeof (instance as any).prop === 'string';
 		}
 
 		function badDiscriminator(instance: unknown): instance is A {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			return typeof (instance as any).notExistingProp === 'string';
 		}
 

From 3784eb4f2d532c75871f7488c4996a5354d33309 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 9 Jan 2024 13:46:14 +0000
Subject: [PATCH 58/86] Bump follow-redirects from 1.15.2 to 1.15.4

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 src/Umbraco.Web.UI.Client/package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 43b5e5ac01..5160af0068 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -13524,9 +13524,9 @@
 			}
 		},
 		"node_modules/follow-redirects": {
-			"version": "1.15.2",
-			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-			"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+			"version": "1.15.4",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+			"integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
 			"funding": [
 				{
 					"type": "individual",

From c210743756a4b302c19d0197eb6f3812e383188f Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:12:46 +0100
Subject: [PATCH 59/86] tracked reference resource

---
 .../src/packages/documents/documents/index.ts |  1 +
 .../packages/documents/documents/manifests.ts |  2 +
 .../documents/tracked-reference/index.ts      |  2 +
 .../documents/tracked-reference/manifests.ts  |  5 ++
 .../document-tracked-reference.repository.ts  | 37 +++++++++
 .../document-tracked-reference.server.data.ts | 75 +++++++++++++++++++
 .../tracked-reference/repository/index.ts     |  1 +
 .../tracked-reference/repository/manifests.ts | 13 ++++
 ...t-workspace-view-info-reference.element.ts | 15 ++++
 9 files changed, 151 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.repository.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.server.data.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts
index 737764c7f7..6791477575 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/index.ts
@@ -1,6 +1,7 @@
 import './components/index.js';
 
 export * from './repository/index.js';
+export * from './tracked-reference/index.js';
 export * from './workspace/index.js';
 export * from './recycle-bin/index.js';
 export * from './user-permissions/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts
index a68a6c65b6..ba7ad261ff 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/manifests.ts
@@ -8,6 +8,7 @@ import { manifests as entityBulkActionManifests } from './entity-bulk-actions/ma
 import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
 import { manifests as userPermissionManifests } from './user-permissions/manifests.js';
 import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
+import { manifests as trackedReferenceManifests } from './tracked-reference/manifests.js';
 
 export const manifests = [
 	...collectionManifests,
@@ -20,4 +21,5 @@ export const manifests = [
 	...propertyEditorManifests,
 	...userPermissionManifests,
 	...recycleBinManifests,
+	...trackedReferenceManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/index.ts
new file mode 100644
index 0000000000..9f92b38d91
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/index.ts
@@ -0,0 +1,2 @@
+//export * from './manifests.js';
+export * from './repository/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/manifests.ts
new file mode 100644
index 0000000000..1c809b7055
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/manifests.ts
@@ -0,0 +1,5 @@
+import { manifests as repositoryManifests } from './repository/manifests.js';
+
+export const UMB_TRACKED_REFERENCE_DOCUMENT = 'Umb.TrackedReference.Document';
+
+export const manifests = [...repositoryManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.repository.ts
new file mode 100644
index 0000000000..1b2679bdae
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.repository.ts
@@ -0,0 +1,37 @@
+import { UmbDocumentTrackedReferenceServerDataSource } from './document-tracked-reference.server.data.js';
+import { type UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
+
+export class UmbDocumentTrackedReferenceRepository extends UmbBaseController {
+	#trackedReferenceSource: UmbDocumentTrackedReferenceServerDataSource;
+
+	constructor(host: UmbControllerHostElement) {
+		super(host);
+		this.#trackedReferenceSource = new UmbDocumentTrackedReferenceServerDataSource(this);
+	}
+
+	async requestTrackedReference(unique: string, skip = 0, take = 20, filterMustBeIsDependency = false) {
+		if (!unique) throw new Error(`unique is required`);
+		return this.#trackedReferenceSource.getTrackedReferenceById(unique, skip, take, filterMustBeIsDependency);
+	}
+
+	async requestTrackedReferenceDescendantsFromParentUnique(
+		parentUnique: string,
+		skip = 0,
+		take = 20,
+		filterMustBeIsDependency = false,
+	) {
+		if (!parentUnique) throw new Error(`unique is required`);
+		return this.#trackedReferenceSource.getTrackedReferenceDescendantsByParentId(
+			parentUnique,
+			skip,
+			take,
+			filterMustBeIsDependency,
+		);
+	}
+
+	async requestTrackedReferenceItems(uniques: string[], skip = 0, take = 20, filterMustBeIsDependency = true) {
+		if (!uniques) throw new Error(`unique is required`);
+		return this.#trackedReferenceSource.getTrackedReferenceItem(uniques, skip, take, filterMustBeIsDependency);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.server.data.ts
new file mode 100644
index 0000000000..a55e662822
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/document-tracked-reference.server.data.ts
@@ -0,0 +1,75 @@
+import { TrackedReferenceResource } from '@umbraco-cms/backoffice/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * @export
+ * @class UmbUserGroupCollectionServerDataSource
+ * @implements {RepositoryDetailDataSource}
+ */
+export class UmbDocumentTrackedReferenceServerDataSource {
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbDocumentTrackedReferenceServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbDocumentTrackedReferenceServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Fetches the item for the given id from the server
+	 * @param {Array<string>} ids
+	 * @return {*}
+	 * @memberof UmbDataTypeItemServerDataSource
+	 */
+	async getTrackedReferenceById(id: string, skip = 0, take = 20, filterMustBeIsDependency = false) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			TrackedReferenceResource.getTrackedReferenceById({ id, skip, take, filterMustBeIsDependency }),
+		);
+	}
+
+	/**
+	 * Fetches the item descendant for the given id from the server
+	 * @param {Array<string>} ids
+	 * @return {*}
+	 * @memberof UmbDocumentTrackedReferenceServerDataSource
+	 */
+	async getTrackedReferenceDescendantsByParentId(
+		parentId: string,
+		skip = 0,
+		take = 20,
+		filterMustBeIsDependency = false,
+	) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			TrackedReferenceResource.getTrackedReferenceDescendantsByParentId({
+				parentId,
+				skip,
+				take,
+				filterMustBeIsDependency,
+			}),
+		);
+	}
+
+	/**
+	 * Fetches the items for the given ids from the server
+	 * @param {Array<string>} ids
+	 * @return {*}
+	 * @memberof UmbDocumentTrackedReferenceServerDataSource
+	 */
+	async getTrackedReferenceItem(id: string[], skip = 0, take = 20, filterMustBeIsDependency = true) {
+		return await tryExecuteAndNotify(
+			this.#host,
+			TrackedReferenceResource.getTrackedReferenceItem({
+				id,
+				skip,
+				take,
+				filterMustBeIsDependency,
+			}),
+		);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/index.ts
new file mode 100644
index 0000000000..5c3d3be88a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/index.ts
@@ -0,0 +1 @@
+export * from './document-tracked-reference.repository.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/manifests.ts
new file mode 100644
index 0000000000..1ff1228eaa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tracked-reference/repository/manifests.ts
@@ -0,0 +1,13 @@
+import { UmbDocumentTrackedReferenceRepository } from './document-tracked-reference.repository.js';
+import { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_DOCUMENT_TRACKED_REFERENCE_REPOSITORY_ALIAS = 'Umb.Repository.Document.TrackedReference';
+
+const repository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_DOCUMENT_TRACKED_REFERENCE_REPOSITORY_ALIAS,
+	name: 'Document Tracked Reference Repository',
+	api: UmbDocumentTrackedReferenceRepository,
+};
+
+export const manifests = [repository];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
index 6f423c604a..7f2c8b9c3d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -3,10 +3,12 @@ import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { RelationItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbDocumentTrackedReferenceRepository } from '@umbraco-cms/backoffice/document';
 
 @customElement('umb-document-workspace-view-info-reference')
 export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement {
 	#itemsPerPage = 10;
+	#trackedReferenceRepository;
 
 	@state()
 	private _currentPage = 1;
@@ -32,6 +34,19 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 
 	constructor() {
 		super();
+		this.#trackedReferenceRepository = new UmbDocumentTrackedReferenceRepository(this);
+
+		this.#getReferences();
+	}
+
+	async #getReferences() {
+		const { data } = await this.#trackedReferenceRepository.requestTrackedReference(
+			'3f23cc76-a645-4032-82b3-c16458e97215',
+		);
+		if (!data) return;
+
+		this._total = data.total;
+		this._items = data.items;
 	}
 
 	#onPageChange(event: UUIPaginationEvent) {

From ee83754d3c80a2934ee3f6660708cfe24c520888 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:00:20 +0100
Subject: [PATCH 60/86] mock handlers audit log and tracked reference

---
 .../src/mocks/browser-handlers.ts             |  2 ++
 .../src/mocks/data/audit-log.data.ts          |  3 ++
 .../src/mocks/data/tracked-reference.data.ts  | 16 +++++++++++
 .../src/mocks/e2e-handlers.ts                 |  2 ++
 .../src/mocks/handlers/audit-log.handlers.ts  | 19 +++++++++++++
 .../handlers/tracked-reference.handlers.ts    | 18 ++++++++++++
 ...t-workspace-view-info-reference.element.ts | 28 ++++++++-----------
 .../document-workspace-view-info.element.ts   |  3 +-
 8 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/data/tracked-reference.data.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/mocks/handlers/tracked-reference.handlers.ts

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index cac7ae809b..f40b3f7e15 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -21,6 +21,7 @@ import { handlers as memberGroupHandlers } from './handlers/member-group.handler
 import { handlers as memberHandlers } from './handlers/member.handlers.js';
 import { handlers as memberTypeHandlers } from './handlers/member-type.handlers.js';
 import { handlers as templateHandlers } from './handlers/template.handlers.js';
+import { handlers as trackedReferenceHandlers } from './handlers/tracked-reference.handlers.js';
 import { handlers as languageHandlers } from './handlers/language.handlers.js';
 import { handlers as cultureHandlers } from './handlers/culture.handlers.js';
 import { handlers as redirectManagementHandlers } from './handlers/redirect-management.handlers.js';
@@ -66,6 +67,7 @@ const handlers = [
 	...tagHandlers,
 	...telemetryHandlers,
 	...templateHandlers,
+	...trackedReferenceHandlers,
 	...upgradeHandlers,
 	...userGroupsHandlers,
 	...userHandlers,
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
new file mode 100644
index 0000000000..843b6b7678
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
@@ -0,0 +1,3 @@
+import { AuditLogResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export const logs: Array<AuditLogResponseModel> = [];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/tracked-reference.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/tracked-reference.data.ts
new file mode 100644
index 0000000000..9ece80fa23
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/tracked-reference.data.ts
@@ -0,0 +1,16 @@
+import { RelationItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export const items: Array<RelationItemResponseModel> = [
+	{
+		nodeId: 'simple-document-id',
+		nodeName: 'Simple Document',
+		nodeType: 'document',
+		nodePublished: true,
+		contentTypeIcon: 'icon-document',
+		contentTypeName: 'Simple Document Type',
+		contentTypeAlias: 'blogPost',
+		relationTypeIsBidirectional: false,
+		relationTypeIsDependency: true,
+		relationTypeName: 'Related Document',
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
index 84a92de3d8..08393460d2 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
@@ -15,6 +15,7 @@ import { handlers as languageHandlers } from './handlers/language.handlers.js';
 import { handlers as redirectManagementHandlers } from './handlers/redirect-management.handlers.js';
 import { handlers as packageHandlers } from './handlers/package.handlers.js';
 import { handlers as configHandlers } from './handlers/config.handlers.js';
+import { handlers as trackedReferenceHandlers } from './handlers/tracked-reference.handlers.js';
 
 export const handlers = [
 	serverHandlers.serverRunningHandler,
@@ -35,4 +36,5 @@ export const handlers = [
 	...redirectManagementHandlers,
 	...packageHandlers,
 	...configHandlers,
+	...trackedReferenceHandlers,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
new file mode 100644
index 0000000000..6afe821ba2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
@@ -0,0 +1,19 @@
+import { logs } from '../data/audit-log.data.js';
+const { rest } = window.MockServiceWorker;
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+import {
+	PagedAuditLogResponseModel,
+	PagedAuditLogWithUsernameResponseModel,
+} from '@umbraco-cms/backoffice/backend-api';
+
+export const handlers = [
+	rest.get(umbracoPath('/audit-log'), (_req, res, ctx) => {
+		return res(ctx.status(200), ctx.json<PagedAuditLogWithUsernameResponseModel>({ total: 0, items: [] }));
+	}),
+	rest.get(umbracoPath('/audit-log/:id'), (_req, res, ctx) => {
+		return res(ctx.status(200), ctx.json<PagedAuditLogResponseModel>({ total: 0, items: [] }));
+	}),
+	rest.get(umbracoPath('/audit-log/type/:logType'), (_req, res, ctx) => {
+		return res(ctx.status(200), ctx.json<PagedAuditLogResponseModel>({ total: 0, items: [] }));
+	}),
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/tracked-reference.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/tracked-reference.handlers.ts
new file mode 100644
index 0000000000..5b3fa1324e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/tracked-reference.handlers.ts
@@ -0,0 +1,18 @@
+import { items } from '../data/tracked-reference.data.js';
+const { rest } = window.MockServiceWorker;
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+import { PagedRelationItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export const handlers = [
+	rest.get(umbracoPath('/tracked-reference/:id'), (_req, res, ctx) => {
+		const id = _req.params.id as string;
+		if (!id) return;
+
+		const PagedTrackedReference = {
+			total: items.length,
+			items: items,
+		};
+
+		return res(ctx.status(200), ctx.json<PagedRelationItemResponseModel>(PagedTrackedReference));
+	}),
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
index 7f2c8b9c3d..8e926f1c61 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -1,4 +1,4 @@
-import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing, repeat, property } from '@umbraco-cms/backoffice/external/lit';
 import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -10,6 +10,9 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	#itemsPerPage = 10;
 	#trackedReferenceRepository;
 
+	@property()
+	documentUnique = '';
+
 	@state()
 	private _currentPage = 1;
 
@@ -17,31 +20,22 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	private _total = 0;
 
 	@state()
-	private _items?: Array<RelationItemResponseModel> = [
-		{
-			nodeId: '3f23cc76-a645-4032-82b3-c16458e97215',
-			nodeName: 'hey',
-			nodeType: 'document',
-			nodePublished: true,
-			contentTypeIcon: 'icon-document',
-			contentTypeAlias: 'blockListTest',
-			contentTypeName: 'Block List Test',
-			relationTypeName: 'Related Document',
-			relationTypeIsBidirectional: false,
-			relationTypeIsDependency: true,
-		},
-	];
+	private _items?: Array<RelationItemResponseModel> = [];
 
 	constructor() {
 		super();
 		this.#trackedReferenceRepository = new UmbDocumentTrackedReferenceRepository(this);
+	}
 
+	protected firstUpdated(): void {
 		this.#getReferences();
 	}
 
 	async #getReferences() {
 		const { data } = await this.#trackedReferenceRepository.requestTrackedReference(
-			'3f23cc76-a645-4032-82b3-c16458e97215',
+			this.documentUnique,
+			this._currentPage - 1 * this.#itemsPerPage,
+			this.#itemsPerPage,
 		);
 		if (!data) return;
 
@@ -52,6 +46,8 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	#onPageChange(event: UUIPaginationEvent) {
 		if (this._currentPage === event.target.current) return;
 		this._currentPage = event.target.current;
+
+		this.#getReferences();
 	}
 
 	render() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 69b169208f..6794f5bd71 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -118,7 +118,8 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 					${this.#renderLinksSection()}
 				</uui-box>
 
-				<umb-document-workspace-view-info-reference></umb-document-workspace-view-info-reference>
+				<umb-document-workspace-view-info-reference
+					.documentUnique=${this._documentTypeId}></umb-document-workspace-view-info-reference>
 
 				<umb-document-workspace-view-info-history
 					.documentUnique=${this._documentTypeId}></umb-document-workspace-view-info-history>

From 70a1aaedd3dc23d23ac4f072dd8f29236a1c04cd Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:12:12 +0100
Subject: [PATCH 61/86] audit log handlers mock

---
 .../src/mocks/browser-handlers.ts             |  2 +
 .../src/mocks/data/audit-log.data.ts          | 48 ++++++++++++++++++-
 .../src/mocks/e2e-handlers.ts                 |  2 +
 .../src/mocks/handlers/audit-log.handlers.ts  | 28 +++++++++--
 4 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index f40b3f7e15..242756529b 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -1,3 +1,4 @@
+import { handlers as auditLogHandlers } from './handlers/audit-log.handlers.js';
 import { handlers as dataTypeHandlers } from './handlers/data-type/index.js';
 import { handlers as relationTypeHandlers } from './handlers/relation-type.handlers.js';
 import { handlers as documentTypeHandlers } from './handlers/document-type/index.js';
@@ -37,6 +38,7 @@ import { handlers as scriptHandlers } from './handlers/scripts.handlers.js';
 
 const handlers = [
 	serverHandlers.serverVersionHandler,
+	...auditLogHandlers,
 	...configHandlers,
 	...cultureHandlers,
 	...dataTypeHandlers,
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
index 843b6b7678..214cf9df86 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
@@ -1,3 +1,47 @@
-import { AuditLogResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { data as userData } from './user/user.data.js';
+import { data as documentData } from './document.data.js';
+import { AuditLogResponseModel, AuditTypeModel } from '@umbraco-cms/backoffice/backend-api';
 
-export const logs: Array<AuditLogResponseModel> = [];
+const userId = userData[0].id;
+const userName = userData[0].name;
+
+const documentId = documentData[0].id;
+
+export const logs: Array<AuditLogResponseModel> = [
+	{
+		userId: userId,
+		entityId: documentId,
+		entityType: 'Document',
+		timestamp: '2021-09-14T09:32:49.0000000Z',
+		logType: AuditTypeModel.SAVE,
+		comment: undefined,
+		parameters: undefined,
+	},
+	{
+		userId: userId,
+		entityId: documentId,
+		entityType: 'Document',
+		timestamp: '2022-09-14T11:30:49.0000000Z',
+		logType: AuditTypeModel.SAVE,
+		comment: undefined,
+		parameters: undefined,
+	},
+	{
+		userId: userId,
+		entityId: documentId,
+		entityType: 'Document',
+		timestamp: '2022-09-15T09:35:49.0000000Z',
+		logType: AuditTypeModel.SAVE,
+		comment: undefined,
+		parameters: undefined,
+	},
+	{
+		userId: userId,
+		entityId: documentId,
+		entityType: 'Document',
+		timestamp: '2023-01-09T12:00:00.0000000Z',
+		logType: AuditTypeModel.PUBLISH,
+		comment: undefined,
+		parameters: undefined,
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
index 08393460d2..de0db89e66 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/e2e-handlers.ts
@@ -1,3 +1,4 @@
+import { handlers as auditLogHandlers } from './handlers/audit-log.handlers.js';
 import { handlers as dataTypeHandlers } from './handlers/data-type/index.js';
 import { handlers as documentTypeHandlers } from './handlers/document-type/index.js';
 import { handlers as installHandlers } from './handlers/install.handlers.js';
@@ -21,6 +22,7 @@ export const handlers = [
 	serverHandlers.serverRunningHandler,
 	serverHandlers.serverVersionHandler,
 	manifestsHandlers.manifestEmptyHandler,
+	...auditLogHandlers,
 	...installHandlers,
 	...upgradeHandlers,
 	...userHandlers,
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
index 6afe821ba2..e8ea2bc3cc 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
@@ -8,12 +8,34 @@ import {
 
 export const handlers = [
 	rest.get(umbracoPath('/audit-log'), (_req, res, ctx) => {
-		return res(ctx.status(200), ctx.json<PagedAuditLogWithUsernameResponseModel>({ total: 0, items: [] }));
+		PagedAuditLog = {
+			total: logs.length,
+			items: logs,
+		};
+		return res(ctx.status(200), ctx.json<PagedAuditLogWithUsernameResponseModel>(PagedAuditLog));
 	}),
 	rest.get(umbracoPath('/audit-log/:id'), (_req, res, ctx) => {
-		return res(ctx.status(200), ctx.json<PagedAuditLogResponseModel>({ total: 0, items: [] }));
+		const id = _req.params.id as string;
+		if (!id) return;
+
+		const foundLogs = logs.filter((log) => log.entityId === id);
+		PagedAuditLog = {
+			total: foundLogs.length,
+			items: foundLogs,
+		};
+
+		return res(ctx.status(200), ctx.json<PagedAuditLogResponseModel>(PagedAuditLog));
 	}),
 	rest.get(umbracoPath('/audit-log/type/:logType'), (_req, res, ctx) => {
-		return res(ctx.status(200), ctx.json<PagedAuditLogResponseModel>({ total: 0, items: [] }));
+		const logType = _req.params.logType as string;
+		if (!logType) return;
+
+		const foundLogs = logs.filter((log) => log.entityType === logType);
+		PagedAuditLog = {
+			total: foundLogs.length,
+			items: foundLogs,
+		};
+
+		return res(ctx.status(200), ctx.json<PagedAuditLogResponseModel>(PagedAuditLog));
 	}),
 ];

From 175282efc0fbaaf37d38ceab2c560a5835f63915 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:25:59 +0100
Subject: [PATCH 62/86] fix audit log fetch

---
 .../src/mocks/handlers/audit-log.handlers.ts          |  6 +++---
 .../info/document-workspace-view-info.element.ts      | 11 +++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
index e8ea2bc3cc..47a4495106 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
@@ -8,7 +8,7 @@ import {
 
 export const handlers = [
 	rest.get(umbracoPath('/audit-log'), (_req, res, ctx) => {
-		PagedAuditLog = {
+		const PagedAuditLog = {
 			total: logs.length,
 			items: logs,
 		};
@@ -19,7 +19,7 @@ export const handlers = [
 		if (!id) return;
 
 		const foundLogs = logs.filter((log) => log.entityId === id);
-		PagedAuditLog = {
+		const PagedAuditLog = {
 			total: foundLogs.length,
 			items: foundLogs,
 		};
@@ -31,7 +31,7 @@ export const handlers = [
 		if (!logType) return;
 
 		const foundLogs = logs.filter((log) => log.entityType === logType);
-		PagedAuditLog = {
+		const PagedAuditLog = {
 			total: foundLogs.length,
 			items: foundLogs,
 		};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 6794f5bd71..fe6bc90697 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -76,6 +76,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _documentTypeId = '';
 
+	@state()
+	private _documentUnique = '';
+
 	private _workspaceContext?: typeof UMB_WORKSPACE_CONTEXT.TYPE;
 
 	@state()
@@ -105,6 +108,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 		this._nodeName = 'TBD, with variants this is not as simple.';
 		this._documentTypeId = (this._workspaceContext as any).getContentTypeId();
 
+		this.observe(this._workspaceContext.unique, (unique) => {
+			this._documentUnique = unique;
+		});
+
 		/*
 		this.observe(this._workspaceContext.name, (name) => {
 			this._nodeName = name || '';
@@ -119,10 +126,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 				</uui-box>
 
 				<umb-document-workspace-view-info-reference
-					.documentUnique=${this._documentTypeId}></umb-document-workspace-view-info-reference>
+					.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-reference>
 
 				<umb-document-workspace-view-info-history
-					.documentUnique=${this._documentTypeId}></umb-document-workspace-view-info-history>
+					.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-history>
 			</div>
 			<div class="container">
 				<uui-box headline="General" id="general-section">${this.#renderGeneralSection()}</uui-box>

From 08a6baed4e5809eb1491ba596f383103c7b49b5d Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 10 Jan 2024 09:12:39 +0100
Subject: [PATCH 63/86] eslint sort imports

---
 .../src/apps/installer/database/installer-database.stories.ts | 4 ++--
 src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts     | 2 +-
 .../components/variant-selector/variant-selector.element.ts   | 2 +-
 .../core/data-type/workspace/data-type-workspace.context.ts   | 2 +-
 .../common/clear/property-action-clear.element.ts             | 2 +-
 .../property-dataset/property-dataset-base-context.ts         | 2 +-
 .../src/packages/core/property/property/property.context.ts   | 2 +-
 .../document-property-dataset-context.token.ts                | 2 +-
 .../document-property-dataset-context.ts                      | 2 +-
 .../property-editors/tags/property-editor-ui-tags.element.ts  | 2 +-
 10 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts
index 3bfc558ee4..0620957353 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.stories.ts
@@ -1,10 +1,10 @@
 import './installer-database.element.js';
 
-import { html } from '@umbraco-cms/backoffice/external/lit';
 import { Meta, Story } from '@storybook/web-components';
 
-import type { UmbInstallerDatabaseElement } from './installer-database.element.js';
 import { installerContextProvider } from '../shared/utils.story-helpers.js';
+import type { UmbInstallerDatabaseElement } from './installer-database.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 
 export default {
 	title: 'Apps/Installer/Steps',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
index 4cd03fef58..416462c720 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
@@ -2,6 +2,7 @@ import { umbDocumentTypeData } from './document-type/document-type.db.js';
 import { umbUserPermissionData } from './user-permission.data.js';
 import { UmbEntityData } from './entity.data.js';
 import { createDocumentTreeItem } from './utils.js';
+import { UmbMockDocumentTypeModel } from './document-type/document-type.data.js';
 import {
 	ContentStateModel,
 	DocumentItemResponseModel,
@@ -15,7 +16,6 @@ import {
 	PublishedStateModel,
 } from '@umbraco-cms/backoffice/backend-api';
 import { UMB_DOCUMENT_ENTITY_TYPE } from '@umbraco-cms/backoffice/document';
-import { UmbMockDocumentTypeModel } from './document-type/document-type.data.js';
 
 export const data: Array<DocumentResponseModel> = [
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts
index 5761e30546..55e5dad438 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts
@@ -1,5 +1,5 @@
-import { UMB_PROPERTY_DATASET_CONTEXT, isNameablePropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UmbVariantId } from '../../variant/variant-id.class.js';
+import { UMB_PROPERTY_DATASET_CONTEXT, isNameablePropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UUIInputElement, UUIInputEvent, UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui';
 import {
 	css,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts
index b3548f52f6..b927146f38 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts
@@ -1,6 +1,6 @@
-import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UmbDataTypeDetailRepository } from '../repository/detail/data-type-detail.repository.js';
 import type { UmbDataTypeDetailModel } from '../types.js';
+import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import {
 	UmbInvariantableWorkspaceContextInterface,
 	UmbEditableWorkspaceContextBase,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts
index 9024b440a4..5fed429a1b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-action/common/clear/property-action-clear.element.ts
@@ -1,5 +1,5 @@
-import { UmbPropertyContext, UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type { UmbPropertyAction } from '../../shared/property-action/property-action.interface.js';
+import { UmbPropertyContext, UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
index 9f6a32fb01..6536b47d7f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
@@ -1,9 +1,9 @@
+import type { UmbPropertyValueData } from '../types/property-value-data.type.js';
 import {
 	UMB_PROPERTY_DATASET_CONTEXT,
 	type UmbNameablePropertyDatasetContext,
 	type UmbPropertyDatasetContext,
 } from '@umbraco-cms/backoffice/property';
-import type { UmbPropertyValueData } from '../types/property-value-data.type.js';
 import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbArrayState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts
index 21bb1b1517..ddf15ca5e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts
@@ -1,6 +1,6 @@
-import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbPropertyEditorUiElement } from '../../extension-registry/interfaces/property-editor-ui-element.interface.js';
 import { type WorkspacePropertyData } from '../../workspace/types/workspace-property-data.type.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { type UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts
index 882da08611..b7ddcf95ac 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.token.ts
@@ -1,6 +1,6 @@
-import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js';
 import type { UmbDocumentPropertyDataContext } from './document-property-dataset-context.js';
+import { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 export const IsDocumentVariantContext = (
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts
index 24e8b55ac2..951a97ddbe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/document-property-dataset-context.ts
@@ -1,9 +1,9 @@
+import type { UmbDocumentWorkspaceContext } from '../workspace/index.js';
 import {
 	UMB_PROPERTY_DATASET_CONTEXT,
 	UmbNameablePropertyDatasetContext,
 	UmbPropertyDatasetContext,
 } from '@umbraco-cms/backoffice/property';
-import type { UmbDocumentWorkspaceContext } from '../workspace/index.js';
 import { DocumentVariantResponseModel, PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts
index 455a1dab21..636d4866f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts
@@ -1,5 +1,5 @@
-import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbTagsInputElement } from '../../components/tags-input/tags-input.element.js';
+import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';

From 8d538b3c14740269cb11b7179aca323074e25fa7 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:07:36 +0100
Subject: [PATCH 64/86] avatar img and link section

---
 .../history/history-item.element.ts           |  17 ++-
 .../history/history-list.element.ts           |   2 +-
 ...ent-workspace-view-info-history.element.ts |  46 +++++--
 ...t-workspace-view-info-reference.element.ts |  19 ++-
 .../document-workspace-view-info.element.ts   | 116 ++++++------------
 5 files changed, 108 insertions(+), 92 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
index 3a5d2695e7..e9f696d443 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
@@ -1,4 +1,5 @@
-import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
+import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -13,10 +14,22 @@ export class UmbHistoryItemElement extends UmbLitElement {
 	@property({ type: String })
 	detail?: string;
 
+	@state()
+	private _serverUrl?: string;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
+			this._serverUrl = instance.getServerUrl();
+		});
+	}
+
 	render() {
 		return html`
 			<div class="user-info">
-				<uui-avatar .name="${this.name ?? 'Unknown'}" ?src="${this.src}"></uui-avatar>
+				<uui-avatar
+					.name="${this.name ?? 'Unknown'}"
+					.imgSrc="${this.src ? this._serverUrl + this.src : ''}"></uui-avatar>
 				<div>
 					<span class="name">${this.name}</span>
 					<span class="detail">${this.detail}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts
index 74a47e1a46..f27dc407be 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-list.element.ts
@@ -14,7 +14,7 @@ export class UmbHistoryListElement extends UmbLitElement {
 			:host {
 				display: grid;
 				grid-template-columns: auto 1fr auto;
-				align-items: start;
+				align-items: center;
 				--avatar-size: calc(2em + 4px);
 				gap: var(--uui-size-6);
 				position: relative;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
index 4b146a2823..1d091d8af8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
@@ -1,15 +1,30 @@
-import { UmbAuditLogRepository } from '@umbraco-cms/backoffice/audit-log';
 import { HistoryTagStyleAndText } from './utils.js';
-import { css, html, customElement, state, property, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UmbAuditLogRepository } from '@umbraco-cms/backoffice/audit-log';
+import {
+	css,
+	html,
+	customElement,
+	state,
+	property,
+	nothing,
+	repeat,
+	ifDefined,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { AuditLogBaseModel, DirectionModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	AuditLogBaseModel,
+	AuditLogWithUsernameResponseModel,
+	DirectionModel,
+} from '@umbraco-cms/backoffice/backend-api';
+import { UmbCurrentUserContext } from '@umbraco-cms/backoffice/current-user';
 
 @customElement('umb-document-workspace-view-info-history')
 export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	#logRepository: UmbAuditLogRepository;
 	#itemsPerPage = 10;
+	#userIsoCode = 'en-US';
 
 	@property()
 	documentUnique = '';
@@ -18,7 +33,7 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	private _total?: number;
 
 	@state()
-	private _items?: Array<AuditLogBaseModel>;
+	private _items?: Array<AuditLogWithUsernameResponseModel>;
 
 	@state()
 	private _currentPage = 1;
@@ -26,6 +41,10 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	constructor() {
 		super();
 		this.#logRepository = new UmbAuditLogRepository(this);
+		const context = new UmbCurrentUserContext(this);
+		this.observe(context.languageIsoCode, (IsoCode) => {
+			this.#userIsoCode = IsoCode;
+		});
 	}
 
 	protected firstUpdated(): void {
@@ -52,8 +71,7 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 		// Uncomment previous code and delete the following when issue fixed.
 		// This should also make it load significantly faster
 
-		const { data } = await this.#logRepository.getAuditLogByUnique({
-			id: '',
+		const { data } = await this.#logRepository.getLog({
 			orderDirection: DirectionModel.DESCENDING,
 			skip: 0,
 			take: 99999,
@@ -92,10 +110,22 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 				<umb-history-list>
 					${repeat(
 						this._items,
-						(item) => item.timestamp,
+						(item) => item.timestamp + this.#userIsoCode,
 						(item) => {
 							const { text, style } = HistoryTagStyleAndText(item.logType);
-							return html`<umb-history-item name="TODO Username" detail=${new Date(item.timestamp).toLocaleString()}>
+							return html`<umb-history-item
+								.name=${item.userName ?? 'Unknown'}
+								src=${ifDefined(
+									Array.isArray(item.userAvatars) ? item.userAvatars[item.userAvatars.length - 1] : undefined,
+								)}
+								detail=${new Date(item.timestamp).toLocaleString(this.#userIsoCode, {
+									year: 'numeric',
+									month: 'long',
+									day: 'numeric',
+									hour: 'numeric',
+									minute: 'numeric',
+									second: 'numeric',
+								})}>
 								<span class="log-type">
 									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
 									${this.localize.term(text.desc, item.parameters)}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
index 8e926f1c61..3276aa6a8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -4,6 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { RelationItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbDocumentTrackedReferenceRepository } from '@umbraco-cms/backoffice/document';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-document-workspace-view-info-reference')
 export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement {
@@ -13,6 +14,9 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	@property()
 	documentUnique = '';
 
+	@state()
+	private _editDocumentPath = '';
+
 	@state()
 	private _currentPage = 1;
 
@@ -25,6 +29,15 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	constructor() {
 		super();
 		this.#trackedReferenceRepository = new UmbDocumentTrackedReferenceRepository(this);
+
+		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+			.addAdditionalPath('document')
+			.onSetup(() => {
+				return { data: { entityType: 'document', preset: {} } };
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._editDocumentPath = routeBuilder({});
+			});
 	}
 
 	protected firstUpdated(): void {
@@ -74,7 +87,11 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 									<uui-table-cell>
 										<uui-icon style=" vertical-align: middle;" name="icon-document"></uui-icon>
 									</uui-table-cell>
-									<uui-table-cell class="link-cell">${item.nodeName}</uui-table-cell>
+									<uui-table-cell class="link-cell">
+										<uui-button label="Edit" href=${`${this._editDocumentPath}edit/${item.nodeId}`}>
+											${item.nodeName}
+										</uui-button>
+									</uui-table-cell>
 									<uui-table-cell>
 										${item.nodePublished
 											? this.localize.term('content_published')
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index fe6bc90697..014ae1523e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -1,75 +1,15 @@
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import './document-workspace-view-info-history.element.js';
 import './document-workspace-view-info-reference.element.js';
+import { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';
+import { ContentUrlInfoModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-document-workspace-view-info')
 export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
-	/** Dont delete, need for mock data */
-	/*@state()
-	private _historyList: [] = [
-		{
-			userId: -1,
-			userAvatars: [],
-			userName: 'Lone Iversen',
-			timestamp: 'December 5, 2022 2:59 PM',
-			comment: undefined,
-			entityType: 'Document',
-			logType: 'Save',
-			nodeId: '1058',
-			parameters: undefined,
-		},
-		{
-			userId: -1,
-			userAvatars: [],
-			userName: 'Lone Iversen',
-			timestamp: 'December 5, 2022 2:59 PM',
-			comment: undefined,
-			entityType: 'Document',
-			logType: 'Unpublish',
-			nodeId: '1058',
-			parameters: undefined,
-		},
-		{
-			userId: -1,
-			userAvatars: [],
-			userName: 'Lone Iversen',
-			timestamp: 'December 5, 2022 2:59 PM',
-			comment: undefined,
-			entityType: 'Document',
-			logType: 'Publish',
-			nodeId: '1058',
-			parameters: undefined,
-		},
-
-		{
-			userId: -1,
-			userAvatars: [],
-			userName: 'Lone Iversen',
-			timestamp: 'December 5, 2022 2:59 PM',
-			comment: undefined,
-			entityType: 'Document',
-			logType: 'Save',
-			nodeId: '1058',
-			parameters: undefined,
-		},
-
-		{
-			userId: -1,
-			userAvatars: [],
-			userName: 'Lone Iversen',
-			timestamp: 'December 5, 2022 2:59 PM',
-			comment: undefined,
-			entityType: 'Document',
-			logType: 'Save',
-			nodeId: '1058',
-			parameters: undefined,
-		},
-	];*/
-
 	@state()
 	private _nodeName = '';
 
@@ -84,6 +24,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _editDocumentTypePath = '';
 
+	@state()
+	private _urls?: Array<ContentUrlInfoModel>;
+
 	constructor() {
 		super();
 
@@ -106,23 +49,25 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 		if (!this._workspaceContext) return;
 
 		this._nodeName = 'TBD, with variants this is not as simple.';
-		this._documentTypeId = (this._workspaceContext as any).getContentTypeId();
 
-		this.observe(this._workspaceContext.unique, (unique) => {
-			this._documentUnique = unique;
+		this._documentTypeId = (this._workspaceContext as UmbDocumentWorkspaceContext).getContentTypeId()!;
+
+		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).urls, (urls) => {
+			this._urls = urls;
 		});
 
-		/*
-		this.observe(this._workspaceContext.name, (name) => {
-			this._nodeName = name || '';
+		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).unique, (unique) => {
+			this._documentUnique = unique!;
 		});
-		*/
+
+		const something = (this._workspaceContext as UmbDocumentWorkspaceContext).getData();
+		console.log(something);
 	}
 
 	render() {
 		return html`<div class="container">
 				<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;">
-					${this.#renderLinksSection()}
+					<div id="link-section">${this.#renderLinksSection()}</div>
 				</uui-box>
 
 				<umb-document-workspace-view-info-reference
@@ -137,16 +82,26 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	}
 
 	#renderLinksSection() {
-		return html`<div id="link-section">
-			<a href="http://google.com" target="_blank" class="link-item with-href">
-				<span class="link-language">da-DK</span>
-				<span class="link-content"> <uui-icon name="icon-out"></uui-icon>google.com </span>
-			</a>
-			<div class="link-item">
+		if (this._urls && this._urls.length) {
+			return html`
+				${repeat(
+					this._urls,
+					(url) => url.culture,
+					(url) => html`
+						<a href=${url.url} target="_blank" class="link-item with-href">
+							<span class="link-language">${url.culture}</span>
+							<span class="link-content"> ${url.url}</span>
+							<uui-icon name="icon-out"></uui-icon>
+						</a>
+					`,
+				)}
+			`;
+		} else {
+			return html`<div class="link-item">
 				<span class="link-language">en-EN</span>
 				<span class="link-content italic"><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></span>
-			</div>
-		</div>`;
+			</div>`;
+		}
 	}
 
 	#renderGeneralSection() {
@@ -225,7 +180,8 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			.link-item {
 				padding: var(--uui-size-space-4) var(--uui-size-space-6);
 				display: grid;
-				grid-template-columns: 75px 1fr;
+				grid-template-columns: auto 1fr auto;
+				gap: var(--uui-size-6);
 				color: inherit;
 				text-decoration: none;
 			}

From 80acdb4d82c5942a2363a7ed685d61b091e594a6 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:23:41 +0100
Subject: [PATCH 65/86] audit log data mock

---
 .../src/mocks/data/audit-log.data.ts                | 13 ++++++++++++-
 .../src/mocks/handlers/audit-log.handlers.ts        |  6 +++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
index 214cf9df86..6bd136e8a3 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/audit-log.data.ts
@@ -1,9 +1,14 @@
 import { data as userData } from './user/user.data.js';
 import { data as documentData } from './document.data.js';
-import { AuditLogResponseModel, AuditTypeModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	AuditLogResponseModel,
+	AuditLogWithUsernameResponseModel,
+	AuditTypeModel,
+} from '@umbraco-cms/backoffice/backend-api';
 
 const userId = userData[0].id;
 const userName = userData[0].name;
+const userAvatars = userData[0].avatarUrls;
 
 const documentId = documentData[0].id;
 
@@ -45,3 +50,9 @@ export const logs: Array<AuditLogResponseModel> = [
 		parameters: undefined,
 	},
 ];
+
+export const logsWithUser: Array<AuditLogWithUsernameResponseModel> = logs.map((log) => ({
+	...log,
+	userName: userName,
+	userAvatars: userAvatars,
+}));
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
index 47a4495106..18c6d49123 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/audit-log.handlers.ts
@@ -1,4 +1,4 @@
-import { logs } from '../data/audit-log.data.js';
+import { logs, logsWithUser } from '../data/audit-log.data.js';
 const { rest } = window.MockServiceWorker;
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import {
@@ -9,8 +9,8 @@ import {
 export const handlers = [
 	rest.get(umbracoPath('/audit-log'), (_req, res, ctx) => {
 		const PagedAuditLog = {
-			total: logs.length,
-			items: logs,
+			total: logsWithUser.length,
+			items: logsWithUser,
 		};
 		return res(ctx.status(200), ctx.json<PagedAuditLogWithUsernameResponseModel>(PagedAuditLog));
 	}),

From 805e728ab1587bbad84039f05d03afeb4b7a4c43 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:31:38 +0100
Subject: [PATCH 66/86] localize table

---
 ...document-workspace-view-info-reference.element.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
index 3276aa6a8e..ab1a63a690 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -72,11 +72,13 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 					<uui-table>
 						<uui-table-head>
 							<uui-table-head-cell></uui-table-head-cell>
-							<uui-table-head-cell>Name</uui-table-head-cell>
-							<uui-table-head-cell>Status</uui-table-head-cell>
-							<uui-table-head-cell>Type Name</uui-table-head-cell>
-							<uui-table-head-cell>Type</uui-table-head-cell>
-							<uui-table-head-cell>Relation</uui-table-head-cell>
+							<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
+							<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
+							<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
+							<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
+							<uui-table-head-cell>
+								<umb-localize key="relationType_relation">Relation</umb-localize>
+							</uui-table-head-cell>
 						</uui-table-head>
 
 						${repeat(

From a2d22a19d809474081b906e896acc76a53f91db9 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:05:58 +0100
Subject: [PATCH 67/86] date uses localize.date now

---
 ...ment-workspace-view-info-history.element.ts | 18 +++---------------
 .../document-workspace-view-info.element.ts    | 14 +++++++++++---
 .../documents/workspace/views/info/utils.ts    |  9 +++++++++
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
index 1d091d8af8..c74ac7ab8d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
@@ -1,4 +1,4 @@
-import { HistoryTagStyleAndText } from './utils.js';
+import { HistoryTagStyleAndText, TimeOptions } from './utils.js';
 import { UmbAuditLogRepository } from '@umbraco-cms/backoffice/audit-log';
 import {
 	css,
@@ -24,7 +24,6 @@ import { UmbCurrentUserContext } from '@umbraco-cms/backoffice/current-user';
 export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	#logRepository: UmbAuditLogRepository;
 	#itemsPerPage = 10;
-	#userIsoCode = 'en-US';
 
 	@property()
 	documentUnique = '';
@@ -41,10 +40,6 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	constructor() {
 		super();
 		this.#logRepository = new UmbAuditLogRepository(this);
-		const context = new UmbCurrentUserContext(this);
-		this.observe(context.languageIsoCode, (IsoCode) => {
-			this.#userIsoCode = IsoCode;
-		});
 	}
 
 	protected firstUpdated(): void {
@@ -110,7 +105,7 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 				<umb-history-list>
 					${repeat(
 						this._items,
-						(item) => item.timestamp + this.#userIsoCode,
+						(item) => item.timestamp,
 						(item) => {
 							const { text, style } = HistoryTagStyleAndText(item.logType);
 							return html`<umb-history-item
@@ -118,14 +113,7 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 								src=${ifDefined(
 									Array.isArray(item.userAvatars) ? item.userAvatars[item.userAvatars.length - 1] : undefined,
 								)}
-								detail=${new Date(item.timestamp).toLocaleString(this.#userIsoCode, {
-									year: 'numeric',
-									month: 'long',
-									day: 'numeric',
-									hour: 'numeric',
-									minute: 'numeric',
-									second: 'numeric',
-								})}>
+								detail=${this.localize.date(item.timestamp, TimeOptions)}>
 								<span class="log-type">
 									<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
 									${this.localize.term(text.desc, item.parameters)}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 014ae1523e..2e1adf16c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -1,3 +1,4 @@
+import { TimeOptions } from './utils.js';
 import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
@@ -7,6 +8,7 @@ import './document-workspace-view-info-history.element.js';
 import './document-workspace-view-info-reference.element.js';
 import { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';
 import { ContentUrlInfoModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbCurrentUserContext } from '@umbraco-cms/backoffice/current-user';
 
 @customElement('umb-document-workspace-view-info')
 export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
@@ -27,6 +29,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _urls?: Array<ContentUrlInfoModel>;
 
+	@state()
+	private _createDate = 'Unknown';
+
 	constructor() {
 		super();
 
@@ -60,8 +65,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			this._documentUnique = unique!;
 		});
 
-		const something = (this._workspaceContext as UmbDocumentWorkspaceContext).getData();
-		console.log(something);
+		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).variants, (variants) => {
+			this._createDate = Array.isArray(variants) ? variants[0].createDate : 'Unknown';
+		});
 	}
 
 	render() {
@@ -116,7 +122,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="content_createDate"></umb-localize></strong>
-				<span><umb-localize-date .date="${new Date()}"></umb-localize-date></span>
+				<span>
+					<umb-localize-date .date=${this._createDate} .options=${TimeOptions}></umb-localize-date>
+				</span>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="content_documentType"></umb-localize></strong>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts
index 300f9f95fa..2a3bb65c39 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/utils.ts
@@ -67,3 +67,12 @@ export function HistoryTagStyleAndText(type: AuditTypeModel): HistoryData {
 			};
 	}
 }
+
+export const TimeOptions: Intl.DateTimeFormatOptions = {
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+	hour: 'numeric',
+	minute: 'numeric',
+	second: 'numeric',
+};

From 2eefe2672089b0b3282f9214aff39bad934aa965 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:06:12 +0100
Subject: [PATCH 68/86] note

---
 .../workspace/views/info/document-workspace-view-info.element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 2e1adf16c5..c29f9b234c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -65,6 +65,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			this._documentUnique = unique!;
 		});
 
+		/** TODO: Doubt this is the right way to get the create date... */
 		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).variants, (variants) => {
 			this._createDate = Array.isArray(variants) ? variants[0].createDate : 'Unknown';
 		});

From a1d82a298eba5fd302a6a877ad20e8cca1c1b826 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:07:54 +0100
Subject: [PATCH 69/86] todo

---
 .../workspace/views/info/document-workspace-view-info.element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index c29f9b234c..2a61663884 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -89,6 +89,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	}
 
 	#renderLinksSection() {
+		/** TODO Make sure link section is completed */
 		if (this._urls && this._urls.length) {
 			return html`
 				${repeat(

From 0208c807a975c829e10438610c5eadc89da4d607 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 9 Jan 2024 16:03:52 +0000
Subject: [PATCH 70/86] Tree element: adds selection config property

- Adds `UmbTreeSelectionConfiguration` type
- Removes the `selectable`, `selection` and `multiple` properties
- Adds `getSelection` method, to get the selection from the context
---
 .../src/packages/core/tree/tree.element.ts    | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
index 70e5ca72cb..4f6477fde3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
@@ -7,6 +7,12 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import './tree-item-default/tree-item.element.js';
 import './tree-item-base/tree-item-base.element.js';
 
+export type UmbTreeSelectionConfiguration = {
+	multiple?: boolean;
+	selectable?: boolean;
+	selection?: Array<string | null>;
+};
+
 @customElement('umb-tree')
 export class UmbTreeElement extends UmbLitElement {
 	@property({ type: String, reflect: true })
@@ -17,29 +23,21 @@ export class UmbTreeElement extends UmbLitElement {
 		this.#treeContext.setTreeAlias(newVal);
 	}
 
-	@property({ type: Boolean, reflect: true })
-	get selectable() {
-		return this.#treeContext.selection.getSelectable();
-	}
-	set selectable(newVal) {
-		this.#treeContext.selection.setSelectable(newVal);
-	}
+	private _selectionConfiguration: UmbTreeSelectionConfiguration = {
+		multiple: false,
+		selectable: true,
+		selection: [],
+	};
 
-	@property({ type: Array })
-	get selection() {
-		return this.#treeContext.selection.getSelection();
+	@property({ type: Object })
+	get selectionConfiguration(): UmbTreeSelectionConfiguration {
+		return this._selectionConfiguration;
 	}
-	set selection(newVal) {
-		if (!Array.isArray(newVal)) return;
-		this.#treeContext?.selection.setSelection(newVal);
-	}
-
-	@property({ type: Boolean, reflect: true })
-	get multiple() {
-		return this.#treeContext.selection.getMultiple();
-	}
-	set multiple(newVal) {
-		this.#treeContext.selection.setMultiple(newVal);
+	set selectionConfiguration(config: UmbTreeSelectionConfiguration) {
+		this._selectionConfiguration = config;
+		this.#treeContext.selection.setMultiple(config.multiple ?? false);
+		this.#treeContext.selection.setSelectable(config.selectable ?? true);
+		this.#treeContext.selection.setSelection(config.selection ?? []);
 	}
 
 	// TODO: what is the best name for this functionality?
@@ -111,6 +109,10 @@ export class UmbTreeElement extends UmbLitElement {
 		}
 	}
 
+	getSelection() {
+		return this.#treeContext.selection.getSelection();
+	}
+
 	render() {
 		return html` ${this.#renderTreeRoot()} ${this.#renderRootItems()}`;
 	}

From 9982d071a762dd14f0b7c32da6129a3e1e8a4e87 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 9 Jan 2024 16:04:18 +0000
Subject: [PATCH 71/86] tree-picker-modal: updated with selection config

---
 .../tree-picker/tree-picker-modal.element.ts  | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
index 69868cf5dc..8d0b5425d6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
@@ -1,9 +1,8 @@
-import { type UmbTreeElement } from '../../../tree/tree.element.js';
 import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbTreePickerModalData, UmbPickerModalValue, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree';
+import { UmbTreeElement, UmbTreeItemModelBase, type UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree';
 
 @customElement('umb-tree-picker-modal')
 export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase> extends UmbModalBaseElement<
@@ -11,10 +10,11 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 	UmbPickerModalValue
 > {
 	@state()
-	_selection: Array<string | null> = [];
-
-	@state()
-	_multiple = false;
+	_selectionConfiguration: UmbTreeSelectionConfiguration = {
+		multiple: false,
+		selectable: true,
+		selection: [],
+	};
 
 	connectedCallback() {
 		super.connectedCallback();
@@ -22,17 +22,17 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 		// TODO: We should make a nicer way to observe the value..
 		if (this.modalContext) {
 			this.observe(this.modalContext.value, (value) => {
-				this._selection = value?.selection ?? [];
+				this._selectionConfiguration.selection = value?.selection ?? [];
 			});
 		}
 
-		this._multiple = this.data?.multiple ?? false;
+		this._selectionConfiguration.multiple = this.data?.multiple ?? false;
 	}
 
 	#onSelectionChange(e: CustomEvent) {
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		this.value = { selection: element.selection };
+		this.value = { selection: element.getSelection() };
 		this.dispatchEvent(new UmbSelectionChangeEvent());
 	}
 
@@ -44,11 +44,9 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 						?hide-tree-root=${this.data?.hideTreeRoot}
 						alias=${ifDefined(this.data?.treeAlias)}
 						@selection-change=${this.#onSelectionChange}
-						.selection=${this._selection}
-						selectable
+						.selectionConfiguration=${this._selectionConfiguration}
 						.filter=${this.data?.filter}
-						.selectableFilter=${this.data?.pickableFilter}
-						?multiple=${this._multiple}></umb-tree>
+						.selectableFilter=${this.data?.pickableFilter}></umb-tree>
 				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>

From de9ec0a0deb0927406d7413b75619b5f59d7674f Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 9 Jan 2024 16:36:34 +0000
Subject: [PATCH 72/86] partial-view-picker-modal: updated with selection
 config

---
 .../partial-view-picker-modal.element.ts      | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
index 170197832b..107c6b3bea 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker-modal.element.ts
@@ -5,7 +5,7 @@ import {
 	UmbPartialViewPickerModalValue,
 	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
-import { UmbTreeElement } from '@umbraco-cms/backoffice/tree';
+import { UmbTreeElement, type UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree';
 
 @customElement('umb-partial-view-picker-modal')
 export default class UmbPartialViewPickerModalElement extends UmbModalBaseElement<
@@ -13,26 +13,26 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
 	UmbPartialViewPickerModalValue
 > {
 	@state()
-	_selection: Array<string | null> = [];
-
-	@state()
-	_multiple = false;
+	_selectionConfiguration: UmbTreeSelectionConfiguration = {
+		multiple: false,
+		selectable: true,
+		selection: [],
+	};
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._selection = this.value?.selection ?? [];
-		this._multiple = this.data?.multiple ?? true;
+		this._selectionConfiguration.selection = this.value?.selection ?? [];
+		this._selectionConfiguration.multiple = this.data?.multiple ?? true;
 	}
 
 	private _handleSelectionChange(e: CustomEvent) {
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]];
+		this.value = { selection: element.getSelection() };
 		this._submit();
 	}
 
 	private _submit() {
-		this.value = { selection: this._selection };
 		this.modalContext?.submit();
 	}
 
@@ -48,8 +48,7 @@ export default class UmbPartialViewPickerModalElement extends UmbModalBaseElemen
 						<umb-tree
 							alias="Umb.Tree.PartialViews"
 							@selection-change=${this._handleSelectionChange}
-							.selection=${this._selection}
-							selectable></umb-tree>
+							.selectionConfiguration=${this._selectionConfiguration}></umb-tree>
 					</uui-box>
 				</div>
 				<div slot="actions">

From 4b55d10e4ce220e141f126b13ce262a6b79693a1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 9 Jan 2024 16:36:51 +0000
Subject: [PATCH 73/86] import-dictionary-modal: updated with selection config

---
 .../import/import-dictionary-modal.element.ts    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
index 7087ddcc99..dec97973eb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.ts
@@ -8,7 +8,7 @@ import {
 	UmbModalBaseElement,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbId } from '@umbraco-cms/backoffice/id';
-import { UmbEntityTreeItemModel, UmbTreeElement } from '@umbraco-cms/backoffice/tree';
+import { UmbEntityTreeItemModel, UmbTreeElement, type UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree';
 
 interface DictionaryItemPreview {
 	name: string;
@@ -21,6 +21,13 @@ export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 	UmbImportDictionaryModalData,
 	UmbImportDictionaryModalValue
 > {
+	@state()
+	private _selectionConfiguration: UmbTreeSelectionConfiguration = {
+		multiple: false,
+		selectable: true,
+		selection: [],
+	};
+
 	@state()
 	private _parentId?: string;
 
@@ -93,6 +100,7 @@ export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 	connectedCallback(): void {
 		super.connectedCallback();
 		this._parentId = this.data?.unique ?? undefined;
+		this._selectionConfiguration.selection = this._parentId ? [this._parentId] : [];
 	}
 
 	#dictionaryPreviewBuilder(htmlString: string) {
@@ -139,7 +147,7 @@ export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 	}
 
 	#onParentChange() {
-		this._parentId = this._treeElement?.selection[0] ?? undefined;
+		this._parentId = this._treeElement?.getSelection()[0] ?? undefined;
 	}
 
 	async #onFileInput() {
@@ -189,11 +197,9 @@ export class UmbImportDictionaryModalLayout extends UmbModalBaseElement<
 
 					<umb-tree
 						?hide-tree-root=${true}
-						?multiple=${false}
 						alias=${UMB_DICTIONARY_TREE_ALIAS}
 						@selection-change=${this.#onParentChange}
-						.selection=${[this._parentId ?? '']}
-						selectable></umb-tree>
+						.selectionConfiguration=${this._selectionConfiguration}></umb-tree>
 				</div>
 
 				${this.#renderNavigate()}

From 25650540238e28f03f82348abe67400a60dc1f9c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 9 Jan 2024 16:37:06 +0000
Subject: [PATCH 74/86] link-picker-modal: updated with selection config

---
 .../link-picker/link-picker-modal.element.ts  | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
index c7495d0420..7e15711a0c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts
@@ -1,4 +1,4 @@
-import { UmbTreeElement } from '../../../tree/tree.element.js';
+import { UmbTreeElement, type UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree';
 import { css, html, nothing, customElement, query, state, styleMap } from '@umbraco-cms/backoffice/external/lit';
 import { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
 import {
@@ -13,6 +13,13 @@ import { UMB_DOCUMENT_TREE_ALIAS } from '@umbraco-cms/backoffice/document';
 
 @customElement('umb-link-picker-modal')
 export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalValue> {
+		@state()
+	private _selectionConfiguration: UmbTreeSelectionConfiguration = {
+		multiple: false,
+		selectable: true,
+		selection: [],
+	};
+
 	@state()
 	_selectedKey?: string;
 
@@ -51,6 +58,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 			this.observe(this.modalContext.value, (value) => {
 				(this._link as any) = value.link;
 				this._selectedKey = this._link?.udi ? getKeyFromUdi(this._link.udi) : undefined;
+				this._selectionConfiguration.selection = this._selectedKey ? [this._selectedKey] : [];
 			});
 		}
 		this._layout = this.data?.config;
@@ -76,11 +84,13 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		//TODO: Update icon, published, trashed
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		const selectedKey = element.selection[element.selection.length - 1];
+		const selection = element.getSelection();
+		const selectedKey = selection[selection.length - 1];
 
 		if (!selectedKey) {
 			this.#partialUpdateLink({ udi: '', url: undefined });
 			this._selectedKey = undefined;
+			this._selectionConfiguration.selection = [];
 			this.requestUpdate();
 			return;
 		}
@@ -88,6 +98,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 		const udi = buildUdi(entityType, selectedKey);
 
 		this._selectedKey = selectedKey;
+		this._selectionConfiguration.selection = [this._selectedKey];
 		this.#partialUpdateLink({ udi: udi, url: udi });
 		this.requestUpdate();
 	}
@@ -177,11 +188,9 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 					label=${this.localize.term('placeholders_search')}></uui-input>
 				<umb-tree
 					?hide-tree-root=${true}
-					?multiple=${false}
 					alias=${UMB_DOCUMENT_TREE_ALIAS}
 					@selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'document')}
-					.selection=${[this._selectedKey ?? '']}
-					selectable></umb-tree>
+					.selectionConfiguration=${this._selectionConfiguration}></umb-tree>
 			</div>
 			<hr />
 			<uui-symbol-expand
@@ -192,11 +201,9 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 			<div style="${styleMap({ display: !this.mediaExpanded ? 'block' : 'none' })}">
 				<umb-tree
 					?hide-tree-root=${true}
-					?multiple=${false}
 					alias="Umb.Tree.Media"
 					@selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'media')}
-					.selection=${[this._selectedKey ?? '']}
-					selectable></umb-tree>
+					.selectionConfiguration=${this._selectionConfiguration}></umb-tree>
 			</div>
 		`;
 	}

From eda6c6344d322601fe01c971c817524ff550299e Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jan 2024 12:04:25 +0000
Subject: [PATCH 75/86] Reordered `@property` setter methods

to align with supporting Lit 3.
---
 .../src/packages/core/tree/tree.element.ts    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
index 4f6477fde3..368a1db369 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
@@ -16,12 +16,12 @@ export type UmbTreeSelectionConfiguration = {
 @customElement('umb-tree')
 export class UmbTreeElement extends UmbLitElement {
 	@property({ type: String, reflect: true })
-	get alias() {
-		return this.#treeContext.getTreeAlias();
-	}
 	set alias(newVal) {
 		this.#treeContext.setTreeAlias(newVal);
 	}
+	get alias() {
+		return this.#treeContext.getTreeAlias();
+	}
 
 	private _selectionConfiguration: UmbTreeSelectionConfiguration = {
 		multiple: false,
@@ -30,22 +30,19 @@ export class UmbTreeElement extends UmbLitElement {
 	};
 
 	@property({ type: Object })
-	get selectionConfiguration(): UmbTreeSelectionConfiguration {
-		return this._selectionConfiguration;
-	}
 	set selectionConfiguration(config: UmbTreeSelectionConfiguration) {
 		this._selectionConfiguration = config;
 		this.#treeContext.selection.setMultiple(config.multiple ?? false);
 		this.#treeContext.selection.setSelectable(config.selectable ?? true);
 		this.#treeContext.selection.setSelection(config.selection ?? []);
 	}
+	get selectionConfiguration(): UmbTreeSelectionConfiguration {
+		return this._selectionConfiguration;
+	}
 
 	// TODO: what is the best name for this functionality?
 	private _hideTreeRoot = false;
 	@property({ type: Boolean, attribute: 'hide-tree-root' })
-	get hideTreeRoot() {
-		return this._hideTreeRoot;
-	}
 	set hideTreeRoot(newVal: boolean) {
 		const oldVal = this._hideTreeRoot;
 		this._hideTreeRoot = newVal;
@@ -55,22 +52,25 @@ export class UmbTreeElement extends UmbLitElement {
 
 		this.requestUpdate('hideTreeRoot', oldVal);
 	}
+	get hideTreeRoot() {
+		return this._hideTreeRoot;
+	}
 
 	@property()
-	get selectableFilter() {
-		return this.#treeContext.selectableFilter;
-	}
 	set selectableFilter(newVal) {
 		this.#treeContext.selectableFilter = newVal;
 	}
+	get selectableFilter() {
+		return this.#treeContext.selectableFilter;
+	}
 
 	@property()
-	get filter() {
-		return this.#treeContext.filter;
-	}
 	set filter(newVal) {
 		this.#treeContext.filter = newVal;
 	}
+	get filter() {
+		return this.#treeContext.filter;
+	}
 
 	@state()
 	private _items: UmbTreeItemModelBase[] = [];

From 6af5e56bd1765a4786a3bc224414454070a46960 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 19 Dec 2023 17:41:02 +0000
Subject: [PATCH 76/86] Added `umb-property-editor-ui-tree-picker-filter`

to filter content-types from the selected start-node.

Observes the DataType workspace for changes to
the `startNode` configuration.
---
 .../tree-picker/config/filter/manifests.ts    | 14 +++
 ...ty-editor-ui-tree-picker-filter.element.ts | 95 +++++++++++++++++++
 .../uis/tree-picker/manifests.ts              |  7 +-
 3 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts
new file mode 100644
index 0000000000..f8ab97c236
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestPropertyEditorUi = {
+	type: 'propertyEditorUi',
+	alias: 'Umb.PropertyEditorUi.TreePicker.Filter',
+	name: 'Tree Picker Filter Property Editor UI',
+	js: () => import('./property-editor-ui-tree-picker-filter.element.js'),
+	meta: {
+		label: 'Tree Picker Filter',
+		icon: 'icon-page-add',
+		group: 'pickers',
+		propertyEditorSchemaAlias: '',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
new file mode 100644
index 0000000000..575a616fb9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
@@ -0,0 +1,95 @@
+import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../../../../data-type/workspace/data-type-workspace.context.js';
+import { UmbDocumentTypeInputElement } from '../../../../../../documents/document-types/components/document-type-input/document-type-input.element.js';
+import { UmbMediaTypeInputElement } from '../../../../../../media/media-types/components/media-type-input/media-type-input.element.js';
+import { StartNode } from '@umbraco-cms/backoffice/components';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-property-editor-ui-tree-picker-filter')
+export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => {
+			const workspace = instance;
+			this.observe(workspace.data, (data) => {
+				const property = data?.values.find((setting) => setting.alias === 'startNode');
+				if (property) {
+					const startNode = property.value as StartNode;
+					if (startNode.type) {
+						this.sourceType = startNode.type;
+					}
+				}
+			});
+		});
+	}
+
+	@property({ type: Array })
+	value?: string[];
+
+	@property({ attribute: false })
+	sourceType: string = 'content';
+
+	#onChange(event: CustomEvent) {
+		switch (this.sourceType) {
+			case 'content':
+				this.value = (<UmbDocumentTypeInputElement>event.target).selectedIds;
+				break;
+			case 'media':
+				this.value = (<UmbMediaTypeInputElement>event.target).selectedIds;
+				break;
+			default:
+				break;
+		}
+
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
+
+	render() {
+		return this.#renderType();
+	}
+
+	#renderType() {
+		switch (this.sourceType) {
+			case 'content':
+				return this.#renderTypeContent();
+			case 'media':
+				return this.#renderTypeMedia();
+			case 'member':
+				return this.#renderTypeMember();
+			default:
+				// TODO: Could we make this message to be friendlier? [LK]
+				return 'No source type found';
+		}
+	}
+
+	#renderTypeContent() {
+		return html`<umb-document-type-input
+			@change=${this.#onChange}
+			.selectedIds=${this.value || []}></umb-document-type-input>`;
+	}
+
+	#renderTypeMedia() {
+		return html`<umb-media-type-input
+			@change=${this.#onChange}
+			.selectedIds=${this.value || []}></umb-media-type-input>`;
+	}
+
+	#renderTypeMember() {
+		return html`<umb-member-type-input
+			@change=${this.#onChange}
+			.selectedIds=${this.value || []}></umb-member-type-input>`;
+	}
+
+	static styles = [UmbTextStyles];
+}
+
+export default UmbPropertyEditorUITreePickerFilterElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tree-picker-filter': UmbPropertyEditorUITreePickerFilterElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
index 4c81dbda44..b45db5e824 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
@@ -1,3 +1,4 @@
+import { manifest as filter } from './config/filter/manifests.js';
 import { manifest as startNode } from './config/start-node/manifests.js';
 import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -22,8 +23,8 @@ const manifest: ManifestPropertyEditorUi = {
 				{
 					alias: 'filter',
 					label: 'Allow items of type',
-					description: '',
-					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker',
+					description: 'Select the applicable types',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.Filter',
 				},
 				{
 					alias: 'showOpenButton',
@@ -36,6 +37,6 @@ const manifest: ManifestPropertyEditorUi = {
 	},
 };
 
-const config: Array<ManifestPropertyEditorUi> = [startNode];
+const config: Array<ManifestPropertyEditorUi> = [filter, startNode];
 
 export const manifests = [manifest, ...config];

From ac8b9701e719aad639128f44cab86c26822953d3 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 12:30:53 +0000
Subject: [PATCH 77/86] Moved properties to top of the class

ref: https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1083#discussion_r1434848898
---
 .../property-editor-ui-tree-picker-filter.element.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
index 575a616fb9..2941c9d906 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
@@ -3,12 +3,18 @@ import { UmbDocumentTypeInputElement } from '../../../../../../documents/documen
 import { UmbMediaTypeInputElement } from '../../../../../../media/media-types/components/media-type-input/media-type-input.element.js';
 import { StartNode } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-editor-ui-tree-picker-filter')
 export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	@property({ type: Array })
+	value?: string[];
+
+	@state()
+	private sourceType: string = 'content';
+
 	constructor() {
 		super();
 
@@ -26,11 +32,7 @@ export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement im
 		});
 	}
 
-	@property({ type: Array })
-	value?: string[];
 
-	@property({ attribute: false })
-	sourceType: string = 'content';
 
 	#onChange(event: CustomEvent) {
 		switch (this.sourceType) {

From 32db24a4915701ee856686c96859f099cff492cd Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 12:33:36 +0000
Subject: [PATCH 78/86] Changed Workspace Context for Property Dataset Context

ref: https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1083#discussion_r1434832644
---
 ...ty-editor-ui-tree-picker-filter.element.ts | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
index 2941c9d906..bee723286a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
@@ -1,38 +1,56 @@
-import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../../../../data-type/workspace/data-type-workspace.context.js';
 import { UmbDocumentTypeInputElement } from '../../../../../../documents/document-types/components/document-type-input/document-type-input.element.js';
 import { UmbMediaTypeInputElement } from '../../../../../../media/media-types/components/media-type-input/media-type-input.element.js';
-import { StartNode } from '@umbraco-cms/backoffice/components';
+import type { StartNode } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 
 @customElement('umb-property-editor-ui-tree-picker-filter')
 export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	#datasetContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE;
+
 	@property({ type: Array })
 	value?: string[];
 
 	@state()
 	private sourceType: string = 'content';
 
+	#initialized: boolean = false;
+
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => {
-			const workspace = instance;
-			this.observe(workspace.data, (data) => {
-				const property = data?.values.find((setting) => setting.alias === 'startNode');
-				if (property) {
-					const startNode = property.value as StartNode;
-					if (startNode.type) {
-						this.sourceType = startNode.type;
-					}
-				}
-			});
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
+			this.#datasetContext = datasetContext;
+			this._observeProperty();
 		});
 	}
 
+	private async _observeProperty() {
+		if (!this.#datasetContext) return;
+		this.observe(
+			await this.#datasetContext.propertyValueByAlias('startNode'),
+			(value) => {
+				const startNode = value as StartNode;
+				if (startNode.type) {
+					// If we had a sourceType before, we can see this as a change and not the initial value,
+					// so let's reset the value, so we don't carry over content-types to the new source type.
+					if (this.#initialized && this.sourceType !== startNode.type) {
+						this.value = [];
+					}
 
+					this.sourceType = startNode.type;
+
+					if (!this.#initialized) {
+						this.#initialized = true;
+					}
+				}
+			},
+			'observeValue',
+		);
+	}
 
 	#onChange(event: CustomEvent) {
 		switch (this.sourceType) {

From 9775ebd233cf11ade89c7941ea5ea297d2951407 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 12:34:52 +0000
Subject: [PATCH 79/86] Used friendlier import paths

Needed to add exports to the Document/Media Type indexes.
---
 .../filter/property-editor-ui-tree-picker-filter.element.ts   | 4 ++--
 .../src/packages/documents/document-types/components/index.ts | 2 ++
 .../src/packages/documents/document-types/index.ts            | 1 +
 .../src/packages/media/media-types/components/index.ts        | 2 ++
 .../src/packages/media/media-types/index.ts                   | 2 ++
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
index bee723286a..f50fb06ae3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
@@ -1,5 +1,5 @@
-import { UmbDocumentTypeInputElement } from '../../../../../../documents/document-types/components/document-type-input/document-type-input.element.js';
-import { UmbMediaTypeInputElement } from '../../../../../../media/media-types/components/media-type-input/media-type-input.element.js';
+import { UmbDocumentTypeInputElement } from '@umbraco-cms/backoffice/document-type';
+import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
 import type { StartNode } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts
index d0e3e2cad3..9fab8f47f9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/index.ts
@@ -1 +1,3 @@
 import './document-type-input/document-type-input.element.js';
+
+export * from './document-type-input/document-type-input.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts
index df7eace207..e7337b7678 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/index.ts
@@ -1,6 +1,7 @@
 import './components/index.js';
 
 export * from './repository/index.js';
+export * from './components/index.js';
 
 export const UMB_DOCUMENT_TYPE_ROOT_ENTITY_TYPE = 'document-type-root';
 export const UMB_DOCUMENT_TYPE_ENTITY_TYPE = 'document-type';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/index.ts
index 6e336698ee..df9290d984 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/index.ts
@@ -1 +1,3 @@
 import './media-type-input/media-type-input.element.js';
+
+export * from './media-type-input/media-type-input.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts
index 8cf991d68a..3b232278a9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts
@@ -12,3 +12,5 @@ export {
 	UMB_MEDIA_TYPE_ENTITY_TYPE,
 	UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE,
 } from './entity.js';
+
+export * from './components/index.js';

From eefa4519335f285d4407fc9d78ec264ccf7c1262 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Jan 2024 12:35:34 +0000
Subject: [PATCH 80/86] Added placeholder for Member Type input picker

Commented out until the `<umb-member-type-input>` element is ready.
---
 .../filter/property-editor-ui-tree-picker-filter.element.ts  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
index f50fb06ae3..b848e911b2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
@@ -1,5 +1,6 @@
 import { UmbDocumentTypeInputElement } from '@umbraco-cms/backoffice/document-type';
 import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
+//import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
 import type { StartNode } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
@@ -60,6 +61,10 @@ export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement im
 			case 'media':
 				this.value = (<UmbMediaTypeInputElement>event.target).selectedIds;
 				break;
+			// TODO: Uncomment once the `<umb-member-type-input>` element is in place. [LK]
+			// case 'member':
+			// 	this.value = (<UmbMemberTypeInputElement>event.target).selectedIds;
+			// 	break;
 			default:
 				break;
 		}

From c0b8f1029d8b4ad9ec1923a79fec26c3a386cec2 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jan 2024 09:59:50 +0000
Subject: [PATCH 81/86] Renamed "start-node" to "source-picker"

e.g. `<umb-property-editor-ui-tree-picker-source-picker>`
---
 .../{start-node => source-picker}/manifests.ts    |  8 ++++----
 ...ditor-ui-tree-picker-source-picker.element.ts} | 10 +++++-----
 ...editor-ui-tree-picker-source-picker.stories.ts | 15 +++++++++++++++
 ...y-editor-ui-tree-picker-source-picker.test.ts} | 10 +++++-----
 ...ty-editor-ui-tree-picker-start-node.stories.ts | 15 ---------------
 .../property-editor/uis/tree-picker/manifests.ts  |  6 +++---
 6 files changed, 32 insertions(+), 32 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/{start-node => source-picker}/manifests.ts (53%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/{start-node/property-editor-ui-tree-picker-start-node.element.ts => source-picker/property-editor-ui-tree-picker-source-picker.element.ts} (73%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts
 rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/{start-node/property-editor-ui-tree-picker-start-node.test.ts => source-picker/property-editor-ui-tree-picker-source-picker.test.ts} (56%)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/manifests.ts
similarity index 53%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/manifests.ts
index 6f2287e7ab..fd6e0da2f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/manifests.ts
@@ -2,11 +2,11 @@ import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension
 
 export const manifest: ManifestPropertyEditorUi = {
 	type: 'propertyEditorUi',
-	alias: 'Umb.PropertyEditorUi.TreePicker.StartNode',
-	name: 'Tree Picker Start Node Property Editor UI',
-	js: () => import('./property-editor-ui-tree-picker-start-node.element.js'),
+	alias: 'Umb.PropertyEditorUi.TreePicker.SourcePicker',
+	name: 'Tree Picker Source Picker Property Editor UI',
+	js: () => import('./property-editor-ui-tree-picker-source-picker.element.js'),
 	meta: {
-		label: 'Tree Picker Start Node',
+		label: 'Tree Picker Source Picker',
 		icon: 'icon-page-add',
 		group: 'pickers',
 		propertyEditorSchemaAlias: '',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
similarity index 73%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
index c7c60ef8d1..fc72176aa6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
@@ -6,10 +6,10 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
- * @element umb-property-editor-ui-tree-picker-start-node
+ * @element umb-property-editor-ui-tree-picker-source-picker
  */
-@customElement('umb-property-editor-ui-tree-picker-start-node')
-export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+@customElement('umb-property-editor-ui-tree-picker-source-picker')
+export class UmbPropertyEditorUITreePickerSourcePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: Object })
 	value?: StartNode;
 
@@ -38,10 +38,10 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	static styles = [UmbTextStyles];
 }
 
-export default UmbPropertyEditorUITreePickerStartNodeElement;
+export default UmbPropertyEditorUITreePickerSourcePickerElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-ui-tree-picker-start-node': UmbPropertyEditorUITreePickerStartNodeElement;
+		'umb-property-editor-ui-tree-picker-source-picker': UmbPropertyEditorUITreePickerSourcePickerElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts
new file mode 100644
index 0000000000..4da73e7a85
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import type { UmbPropertyEditorUITreePickerSourcePickerElement } from './property-editor-ui-tree-picker-source-picker.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+import './property-editor-ui-tree-picker-source-picker.element.js';
+
+export default {
+	title: 'Property Editor UIs/Tree Picker Start Node',
+	component: 'umb-property-editor-ui-tree-picker-source-picker',
+	id: 'umb-property-editor-ui-tree-picker-source-pickere',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITreePickerSourcePickerElement> = () =>
+	html`<umb-property-editor-ui-tree-picker-source-picker></umb-property-editor-ui-tree-picker-source-picker>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts
similarity index 56%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts
index 7349b7e78b..1ce9777fa8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.test.ts
@@ -1,18 +1,18 @@
 import { expect, fixture, html } from '@open-wc/testing';
-import { UmbPropertyEditorUITreePickerStartNodeElement } from './property-editor-ui-tree-picker-start-node.element.js';
+import { UmbPropertyEditorUITreePickerSourcePickerElement } from './property-editor-ui-tree-picker-source-picker.element.js';
 import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
 
-describe('UmbPropertyEditorUITreePickerStartNodeElement', () => {
-	let element: UmbPropertyEditorUITreePickerStartNodeElement;
+describe('UmbPropertyEditorUITreePickerSourcePickerElement', () => {
+	let element: UmbPropertyEditorUITreePickerSourcePickerElement;
 
 	beforeEach(async () => {
 		element = await fixture(html`
-			<umb-property-editor-ui-tree-picker-start-node></umb-property-editor-ui-tree-picker-start-node>
+			<umb-property-editor-ui-tree-picker-source-picker></umb-property-editor-ui-tree-picker-source-picker>
 		`);
 	});
 
 	it('is defined with its own instance', () => {
-		expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerStartNodeElement);
+		expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerSourcePickerElement);
 	});
 
 	if ((window as any).__UMBRACO_TEST_RUN_A11Y_TEST) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts
deleted file mode 100644
index dbd4d37ebb..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import type { UmbPropertyEditorUITreePickerStartNodeElement } from './property-editor-ui-tree-picker-start-node.element.js';
-import { html } from '@umbraco-cms/backoffice/external/lit';
-
-import './property-editor-ui-tree-picker-start-node.element.js';
-
-export default {
-	title: 'Property Editor UIs/Tree Picker Start Node',
-	component: 'umb-property-editor-ui-tree-picker-start-node',
-	id: 'umb-property-editor-ui-tree-picker-start-node',
-} as Meta;
-
-export const AAAOverview: Story<UmbPropertyEditorUITreePickerStartNodeElement> = () =>
-	html`<umb-property-editor-ui-tree-picker-start-node></umb-property-editor-ui-tree-picker-start-node>`;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
index b45db5e824..3bfe28485a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
@@ -1,5 +1,5 @@
 import { manifest as filter } from './config/filter/manifests.js';
-import { manifest as startNode } from './config/start-node/manifests.js';
+import { manifest as sourcePicker } from './config/source-picker/manifests.js';
 import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
 
 const manifest: ManifestPropertyEditorUi = {
@@ -18,7 +18,7 @@ const manifest: ManifestPropertyEditorUi = {
 					alias: 'startNode',
 					label: 'Node type',
 					description: '',
-					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.StartNode',
+					propertyEditorUiAlias: sourcePicker.alias,
 				},
 				{
 					alias: 'filter',
@@ -37,6 +37,6 @@ const manifest: ManifestPropertyEditorUi = {
 	},
 };
 
-const config: Array<ManifestPropertyEditorUi> = [filter, startNode];
+const config: Array<ManifestPropertyEditorUi> = [sourcePicker, filter];
 
 export const manifests = [manifest, ...config];

From bdd06a7effdef3578b8ec672fd81931f4993c7b6 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jan 2024 10:16:24 +0000
Subject: [PATCH 82/86] Renamed "filter" to "source-type-picker"

e.g. `<umb-property-editor-ui-tree-picker-source-type-picker>`
---
 .../{filter => source-type-picker}/manifests.ts       |  8 ++++----
 ...itor-ui-tree-picker-source-type-picker.element.ts} | 11 +++++++----
 .../core/property-editor/uis/tree-picker/manifests.ts |  6 +++---
 3 files changed, 14 insertions(+), 11 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/{filter => source-type-picker}/manifests.ts (51%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/{filter/property-editor-ui-tree-picker-filter.element.ts => source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts} (87%)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/manifests.ts
similarity index 51%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/manifests.ts
index f8ab97c236..cc098a86bb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/manifests.ts
@@ -2,11 +2,11 @@ import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension
 
 export const manifest: ManifestPropertyEditorUi = {
 	type: 'propertyEditorUi',
-	alias: 'Umb.PropertyEditorUi.TreePicker.Filter',
-	name: 'Tree Picker Filter Property Editor UI',
-	js: () => import('./property-editor-ui-tree-picker-filter.element.js'),
+	alias: 'Umb.PropertyEditorUi.TreePicker.SourceTypePicker',
+	name: 'Tree Picker Source Type Picker Property Editor UI',
+	js: () => import('./property-editor-ui-tree-picker-source-type-picker.element.js'),
 	meta: {
-		label: 'Tree Picker Filter',
+		label: 'Tree Picker Source Type Picker',
 		icon: 'icon-page-add',
 		group: 'pickers',
 		propertyEditorSchemaAlias: '',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
similarity index 87%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
index b848e911b2..e51831a4be 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/filter/property-editor-ui-tree-picker-filter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
@@ -8,8 +8,11 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 
-@customElement('umb-property-editor-ui-tree-picker-filter')
-export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+/**
+ * @element umb-property-editor-ui-tree-picker-source-type-picker
+ */
+@customElement('umb-property-editor-ui-tree-picker-source-type-picker')
+export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	#datasetContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE;
 
 	@property({ type: Array })
@@ -111,10 +114,10 @@ export class UmbPropertyEditorUITreePickerFilterElement extends UmbLitElement im
 	static styles = [UmbTextStyles];
 }
 
-export default UmbPropertyEditorUITreePickerFilterElement;
+export default UmbPropertyEditorUITreePickerSourceTypePickerElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-ui-tree-picker-filter': UmbPropertyEditorUITreePickerFilterElement;
+		'umb-property-editor-ui-tree-picker-source-type-picker': UmbPropertyEditorUITreePickerSourceTypePickerElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
index 3bfe28485a..c459cb5ca5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
@@ -1,5 +1,5 @@
-import { manifest as filter } from './config/filter/manifests.js';
 import { manifest as sourcePicker } from './config/source-picker/manifests.js';
+import { manifest as sourceTypePicker } from './config/source-type-picker/manifests.js';
 import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
 
 const manifest: ManifestPropertyEditorUi = {
@@ -24,7 +24,7 @@ const manifest: ManifestPropertyEditorUi = {
 					alias: 'filter',
 					label: 'Allow items of type',
 					description: 'Select the applicable types',
-					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.Filter',
+					propertyEditorUiAlias: sourceTypePicker.alias,
 				},
 				{
 					alias: 'showOpenButton',
@@ -37,6 +37,6 @@ const manifest: ManifestPropertyEditorUi = {
 	},
 };
 
-const config: Array<ManifestPropertyEditorUi> = [sourcePicker, filter];
+const config: Array<ManifestPropertyEditorUi> = [sourcePicker, sourceTypePicker];
 
 export const manifests = [manifest, ...config];

From 8324ec69e35964175742d5ae58e251e7c13c2cff Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jan 2024 10:25:51 +0000
Subject: [PATCH 83/86] Source Type Picker: enables Member Type Picker

---
 ...or-ui-tree-picker-source-type-picker.element.ts | 14 ++++++--------
 .../members/member-types/components/index.ts       |  2 ++
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
index e51831a4be..50862fa3d7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
@@ -1,6 +1,6 @@
 import { UmbDocumentTypeInputElement } from '@umbraco-cms/backoffice/document-type';
 import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
-//import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
+import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
 import type { StartNode } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
@@ -64,10 +64,9 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 			case 'media':
 				this.value = (<UmbMediaTypeInputElement>event.target).selectedIds;
 				break;
-			// TODO: Uncomment once the `<umb-member-type-input>` element is in place. [LK]
-			// case 'member':
-			// 	this.value = (<UmbMemberTypeInputElement>event.target).selectedIds;
-			// 	break;
+			case 'member':
+				this.value = (<UmbMemberTypeInputElement>event.target).selectedIds;
+				break;
 			default:
 				break;
 		}
@@ -88,7 +87,6 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 			case 'member':
 				return this.#renderTypeMember();
 			default:
-				// TODO: Could we make this message to be friendlier? [LK]
 				return 'No source type found';
 		}
 	}
@@ -106,9 +104,9 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 	}
 
 	#renderTypeMember() {
-		return html`<umb-member-type-input
+		return html`<umb-input-member-type
 			@change=${this.#onChange}
-			.selectedIds=${this.value || []}></umb-member-type-input>`;
+			.selectedIds=${this.value || []}></umb-input-member-type>`;
 	}
 
 	static styles = [UmbTextStyles];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts
index eacc86c77b..086cb33bf0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-types/components/index.ts
@@ -1 +1,3 @@
 import './input-member-type/input-member-type.element.js';
+
+export * from './input-member-type/input-member-type.element.js';

From d153d84e14e36d97067324c9db73f1ca4c26c1a9 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jan 2024 10:47:57 +0000
Subject: [PATCH 84/86] Renamed "input-start-node" to
 "input-tree-picker-source"

e.g. `<umb-input-tree-picker-source>`
---
 .../src/packages/core/components/index.ts                 | 2 +-
 .../packages/core/components/input-start-node/index.ts    | 1 -
 .../core/components/input-tree-picker-source/index.ts     | 1 +
 .../input-tree-picker-source.element.ts}                  | 8 ++++----
 ...roperty-editor-ui-tree-picker-source-picker.element.ts | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/index.ts
 rename src/Umbraco.Web.UI.Client/src/packages/core/components/{input-start-node/input-start-node.element.ts => input-tree-picker-source/input-tree-picker-source.element.ts} (93%)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
index 9c2ae87ad0..e03884ea26 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
@@ -23,7 +23,7 @@ export * from './input-number-range/index.js';
 export * from './input-radio-button-list/index.js';
 export * from './input-section/index.js';
 export * from './input-slider/index.js';
-export * from './input-start-node/index.js';
+export * from './input-tree-picker-source/index.js';
 export * from './input-tiny-mce/index.js';
 export * from './input-toggle/index.js';
 export * from './input-upload-field/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
deleted file mode 100644
index a712befd6d..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './input-start-node.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/index.ts
new file mode 100644
index 0000000000..7f9792d5a4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/index.ts
@@ -0,0 +1 @@
+export * from './input-tree-picker-source.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
similarity index 93%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
index 5694745a44..2a3c5b1823 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
@@ -23,8 +23,8 @@ export type StartNode = {
 	dynamicRoot?: DynamicRootType | null;
 };
 
-@customElement('umb-input-start-node')
-export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
+@customElement('umb-input-tree-picker-source')
+export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElement) {
 	protected getFormElement() {
 		return undefined;
 	}
@@ -140,10 +140,10 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	];
 }
 
-export default UmbInputStartNodeElement;
+export default UmbInputTreePickerSourceElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-input-start-node': UmbInputStartNodeElement;
+		'umb-input-tree-picker-source': UmbInputTreePickerSourceElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
index fc72176aa6..f542c75f97 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
@@ -1,4 +1,4 @@
-import { StartNode, UmbInputStartNodeElement } from '@umbraco-cms/backoffice/components';
+import { StartNode, UmbInputTreePickerSourceElement } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -17,7 +17,7 @@ export class UmbPropertyEditorUITreePickerSourcePickerElement extends UmbLitElem
 	public config?: UmbPropertyEditorConfigCollection;
 
 	#onChange(event: CustomEvent) {
-		const target = event.target as UmbInputStartNodeElement;
+		const target = event.target as UmbInputTreePickerSourceElement;
 
 		this.value = {
 			type: target.type,
@@ -29,10 +29,10 @@ export class UmbPropertyEditorUITreePickerSourcePickerElement extends UmbLitElem
 	}
 
 	render() {
-		return html`<umb-input-start-node
+		return html`<umb-input-tree-picker-source
 			@change=${this.#onChange}
 			.type=${this.value?.type}
-			.nodeId=${this.value?.id}></umb-input-start-node>`;
+			.nodeId=${this.value?.id}></umb-input-tree-picker-source>`;
 	}
 
 	static styles = [UmbTextStyles];

From bd0133065221912e495e94b352d21accafc95454 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 10 Jan 2024 10:52:11 +0000
Subject: [PATCH 85/86] Renamed the types for the tree-picker-source

- `StartNode` to `UmbTreePickerSource`
- `ContentType` to `UmbTreePickerSourceType`
- `DynamicRootType` to `UmbTreePickerDynamicRoot`
- `DynamicRootQueryStepType` to `UmbTreePickerDynamicRootQueryStep`
---
 .../input-tree-picker-source.element.ts       | 36 +++++++++----------
 ...or-ui-tree-picker-source-picker.element.ts |  4 +--
 ...-tree-picker-source-type-picker.element.ts |  4 +--
 .../property-editor-ui-tree-picker.element.ts |  6 ++--
 .../input-tree/input-tree.element.ts          | 10 +++---
 5 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
index 2a3c5b1823..90f59172a5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
@@ -5,34 +5,34 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 //import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
-export type ContentType = 'content' | 'member' | 'media';
+export type UmbTreePickerSource = {
+	type?: UmbTreePickerSourceType;
+	id?: string | null;
+	dynamicRoot?: UmbTreePickerDynamicRoot | null;
+};
 
-export type DynamicRootQueryStepType = {
+export type UmbTreePickerSourceType = 'content' | 'member' | 'media';
+
+export type UmbTreePickerDynamicRoot = {
+	originAlias: string;
+	querySteps?: Array<UmbTreePickerDynamicRootQueryStep> | null;
+};
+
+export type UmbTreePickerDynamicRootQueryStep = {
 	alias: string;
 	anyOfDocTypeKeys: Array<string>;
 };
 
-export type DynamicRootType = {
-	originAlias: string;
-	querySteps?: Array<DynamicRootQueryStepType> | null;
-};
-
-export type StartNode = {
-	type?: ContentType;
-	id?: string | null;
-	dynamicRoot?: DynamicRootType | null;
-};
-
 @customElement('umb-input-tree-picker-source')
 export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElement) {
 	protected getFormElement() {
 		return undefined;
 	}
 
-	private _type: StartNode['type'] = 'content';
+	private _type: UmbTreePickerSource['type'] = 'content';
 
 	@property()
-	public set type(value: StartNode['type']) {
+	public set type(value: UmbTreePickerSource['type']) {
 		if (value === undefined) {
 			value = this._type;
 		}
@@ -47,7 +47,7 @@ export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElem
 
 		this.requestUpdate('type', oldValue);
 	}
-	public get type(): StartNode['type'] {
+	public get type(): UmbTreePickerSource['type'] {
 		return this._type;
 	}
 
@@ -55,7 +55,7 @@ export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElem
 	nodeId?: string | null;
 
 	@property({ attribute: false })
-	dynamicRoot?: DynamicRootType | null;
+	dynamicRoot?: UmbTreePickerDynamicRoot | null;
 
 	@state()
 	_options: Array<Option> = [
@@ -67,7 +67,7 @@ export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElem
 	#onTypeChange(event: UUISelectEvent) {
 		//console.log('onTypeChange');
 
-		this.type = event.target.value as StartNode['type'];
+		this.type = event.target.value as UmbTreePickerSource['type'];
 
 		this.nodeId = '';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
index f542c75f97..67ddcc214b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-picker/property-editor-ui-tree-picker-source-picker.element.ts
@@ -1,4 +1,4 @@
-import { StartNode, UmbInputTreePickerSourceElement } from '@umbraco-cms/backoffice/components';
+import { type UmbTreePickerSource, UmbInputTreePickerSourceElement } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-property-editor-ui-tree-picker-source-picker')
 export class UmbPropertyEditorUITreePickerSourcePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: Object })
-	value?: StartNode;
+	value?: UmbTreePickerSource;
 
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
index 50862fa3d7..f5a5570432 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts
@@ -1,7 +1,7 @@
 import { UmbDocumentTypeInputElement } from '@umbraco-cms/backoffice/document-type';
 import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
 import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
-import type { StartNode } from '@umbraco-cms/backoffice/components';
+import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -37,7 +37,7 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
 		this.observe(
 			await this.#datasetContext.propertyValueByAlias('startNode'),
 			(value) => {
-				const startNode = value as StartNode;
+				const startNode = value as UmbTreePickerSource;
 				if (startNode.type) {
 					// If we had a sourceType before, we can see this as a change and not the initial value,
 					// so let's reset the value, so we don't carry over content-types to the new source type.
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index c397b97a7a..a505a8dd77 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -4,7 +4,7 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbInputTreeElement } from '@umbraco-cms/backoffice/tree';
-import type { StartNode } from '@umbraco-cms/backoffice/components';
+import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-tree-picker
@@ -16,7 +16,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	value = '';
 
 	@state()
-	type?: StartNode['type'];
+	type?: UmbTreePickerSource['type'];
 
 	@state()
 	startNodeId?: string | null;
@@ -38,7 +38,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		const startNode: StartNode | undefined = config?.getValueByAlias('startNode');
+		const startNode: UmbTreePickerSource | undefined = config?.getValueByAlias('startNode');
 		if (startNode) {
 			this.type = startNode.type;
 			this.startNodeId = startNode.id;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
index b2590eb293..93c78f79d6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
@@ -3,7 +3,7 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import type { StartNode } from '@umbraco-cms/backoffice/components';
+import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-input-tree')
 export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
@@ -11,16 +11,16 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
-	private _type: StartNode['type'] = undefined;
+	private _type: UmbTreePickerSource['type'] = undefined;
 	@property()
-	public set type(newType: StartNode['type']) {
+	public set type(newType: UmbTreePickerSource['type']) {
 		const oldType = this._type;
 		if (newType?.toLowerCase() !== this._type) {
-			this._type = newType?.toLowerCase() as StartNode['type'];
+			this._type = newType?.toLowerCase() as UmbTreePickerSource['type'];
 			this.requestUpdate('type', oldType);
 		}
 	}
-	public get type(): StartNode['type'] {
+	public get type(): UmbTreePickerSource['type'] {
 		return this._type;
 	}
 

From cb6b1cf0ff5ed8c28e3c63f9e33f094383675e86 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:48:42 +0100
Subject: [PATCH 86/86] bump dependencies

---
 src/Umbraco.Web.UI.Client/package-lock.json | 145 ++++++++++----------
 src/Umbraco.Web.UI.Client/package.json      |   8 +-
 2 files changed, 78 insertions(+), 75 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index 9348008223..349dc4a6fd 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -70,18 +70,18 @@
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
 				"remark-gfm": "^3.0.1",
-				"rollup": "^4.9.0",
+				"rollup": "^4.9.4",
 				"rollup-plugin-esbuild": "^6.1.0",
-				"rollup-plugin-import-css": "^3.3.5",
+				"rollup-plugin-import-css": "^3.4.0",
 				"rollup-plugin-web-worker-loader": "^1.6.1",
 				"storybook": "7.6.7",
 				"tiny-glob": "^0.2.9",
 				"tsc-alias": "^1.8.8",
 				"typescript": "^5.3.3",
 				"typescript-json-schema": "^0.62.0",
-				"vite": "^5.0.10",
+				"vite": "^5.0.11",
 				"vite-plugin-static-copy": "^1.0.0",
-				"vite-tsconfig-paths": "^4.2.2",
+				"vite-tsconfig-paths": "^4.2.3",
 				"web-component-analyzer": "^2.0.0"
 			},
 			"engines": {
@@ -4168,9 +4168,9 @@
 			}
 		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.0.tgz",
-			"integrity": "sha512-+1ge/xmaJpm1KVBuIH38Z94zj9fBD+hp+/5WLaHgyY8XLq1ibxk/zj6dTXaqM2cAbYKq8jYlhHd6k05If1W5xA==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.4.tgz",
+			"integrity": "sha512-ub/SN3yWqIv5CWiAZPHVS1DloyZsJbtXmX4HxUTIpS0BHm9pW5iYBo2mIZi+hE3AeiTzHz33blwSnhdUo+9NpA==",
 			"cpu": [
 				"arm"
 			],
@@ -4181,9 +4181,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-android-arm64": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.0.tgz",
-			"integrity": "sha512-im6hUEyQ7ZfoZdNvtwgEJvBWZYauC9KVKq1w58LG2Zfz6zMd8gRrbN+xCVoqA2hv/v6fm9lp5LFGJ3za8EQH3A==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.4.tgz",
+			"integrity": "sha512-ehcBrOR5XTl0W0t2WxfTyHCR/3Cq2jfb+I4W+Ch8Y9b5G+vbAecVv0Fx/J1QKktOrgUYsIKxWAKgIpvw56IFNA==",
 			"cpu": [
 				"arm64"
 			],
@@ -4194,9 +4194,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-arm64": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.0.tgz",
-			"integrity": "sha512-u7aTMskN6Dmg1lCT0QJ+tINRt+ntUrvVkhbPfFz4bCwRZvjItx2nJtwJnJRlKMMaQCHRjrNqHRDYvE4mBm3DlQ==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.4.tgz",
+			"integrity": "sha512-1fzh1lWExwSTWy8vJPnNbNM02WZDS8AW3McEOb7wW+nPChLKf3WG2aG7fhaUmfX5FKw9zhsF5+MBwArGyNM7NA==",
 			"cpu": [
 				"arm64"
 			],
@@ -4207,9 +4207,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-darwin-x64": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.0.tgz",
-			"integrity": "sha512-8FvEl3w2ExmpcOmX5RJD0yqXcVSOqAJJUJ29Lca29Ik+3zPS1yFimr2fr5JSZ4Z5gt8/d7WqycpgkX9nocijSw==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.4.tgz",
+			"integrity": "sha512-Gc6cukkF38RcYQ6uPdiXi70JB0f29CwcQ7+r4QpfNpQFVHXRd0DfWFidoGxjSx1DwOETM97JPz1RXL5ISSB0pA==",
 			"cpu": [
 				"x64"
 			],
@@ -4220,9 +4220,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.0.tgz",
-			"integrity": "sha512-lHoKYaRwd4gge+IpqJHCY+8Vc3hhdJfU6ukFnnrJasEBUvVlydP8PuwndbWfGkdgSvZhHfSEw6urrlBj0TSSfg==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.4.tgz",
+			"integrity": "sha512-g21RTeFzoTl8GxosHbnQZ0/JkuFIB13C3T7Y0HtKzOXmoHhewLbVTFBQZu+z5m9STH6FZ7L/oPgU4Nm5ErN2fw==",
 			"cpu": [
 				"arm"
 			],
@@ -4233,9 +4233,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-gnu": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.0.tgz",
-			"integrity": "sha512-JbEPfhndYeWHfOSeh4DOFvNXrj7ls9S/2omijVsao+LBPTPayT1uKcK3dHW3MwDJ7KO11t9m2cVTqXnTKpeaiw==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.4.tgz",
+			"integrity": "sha512-TVYVWD/SYwWzGGnbfTkrNpdE4HON46orgMNHCivlXmlsSGQOx/OHHYiQcMIOx38/GWgwr/po2LBn7wypkWw/Mg==",
 			"cpu": [
 				"arm64"
 			],
@@ -4246,9 +4246,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-arm64-musl": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.0.tgz",
-			"integrity": "sha512-ahqcSXLlcV2XUBM3/f/C6cRoh7NxYA/W7Yzuv4bDU1YscTFw7ay4LmD7l6OS8EMhTNvcrWGkEettL1Bhjf+B+w==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.4.tgz",
+			"integrity": "sha512-XcKvuendwizYYhFxpvQ3xVpzje2HHImzg33wL9zvxtj77HvPStbSGI9czrdbfrf8DGMcNNReH9pVZv8qejAQ5A==",
 			"cpu": [
 				"arm64"
 			],
@@ -4259,9 +4259,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.0.tgz",
-			"integrity": "sha512-uwvOYNtLw8gVtrExKhdFsYHA/kotURUmZYlinH2VcQxNCQJeJXnkmWgw2hI9Xgzhgu7J9QvWiq9TtTVwWMDa+w==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.4.tgz",
+			"integrity": "sha512-LFHS/8Q+I9YA0yVETyjonMJ3UA+DczeBd/MqNEzsGSTdNvSJa1OJZcSH8GiXLvcizgp9AlHs2walqRcqzjOi3A==",
 			"cpu": [
 				"riscv64"
 			],
@@ -4272,9 +4272,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-gnu": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.0.tgz",
-			"integrity": "sha512-m6pkSwcZZD2LCFHZX/zW2aLIISyzWLU3hrLLzQKMI12+OLEzgruTovAxY5sCZJkipklaZqPy/2bEEBNjp+Y7xg==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.4.tgz",
+			"integrity": "sha512-dIYgo+j1+yfy81i0YVU5KnQrIJZE8ERomx17ReU4GREjGtDW4X+nvkBak2xAUpyqLs4eleDSj3RrV72fQos7zw==",
 			"cpu": [
 				"x64"
 			],
@@ -4285,9 +4285,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-linux-x64-musl": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.0.tgz",
-			"integrity": "sha512-VFAC1RDRSbU3iOF98X42KaVicAfKf0m0OvIu8dbnqhTe26Kh6Ym9JrDulz7Hbk7/9zGc41JkV02g+p3BivOdAg==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.4.tgz",
+			"integrity": "sha512-RoaYxjdHQ5TPjaPrLsfKqR3pakMr3JGqZ+jZM0zP2IkDtsGa4CqYaWSfQmZVgFUCgLrTnzX+cnHS3nfl+kB6ZQ==",
 			"cpu": [
 				"x64"
 			],
@@ -4298,9 +4298,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-arm64-msvc": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.0.tgz",
-			"integrity": "sha512-9jPgMvTKXARz4inw6jezMLA2ihDBvgIU9Ml01hjdVpOcMKyxFBJrn83KVQINnbeqDv0+HdO1c09hgZ8N0s820Q==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.4.tgz",
+			"integrity": "sha512-T8Q3XHV+Jjf5e49B4EAaLKV74BbX7/qYBRQ8Wop/+TyyU0k+vSjiLVSHNWdVd1goMjZcbhDmYZUYW5RFqkBNHQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -4311,9 +4311,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-ia32-msvc": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.0.tgz",
-			"integrity": "sha512-WE4pT2kTXQN2bAv40Uog0AsV7/s9nT9HBWXAou8+++MBCnY51QS02KYtm6dQxxosKi1VIz/wZIrTQO5UP2EW+Q==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.4.tgz",
+			"integrity": "sha512-z+JQ7JirDUHAsMecVydnBPWLwJjbppU+7LZjffGf+Jvrxq+dVjIE7By163Sc9DKc3ADSU50qPVw0KonBS+a+HQ==",
 			"cpu": [
 				"ia32"
 			],
@@ -4324,9 +4324,9 @@
 			]
 		},
 		"node_modules/@rollup/rollup-win32-x64-msvc": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.0.tgz",
-			"integrity": "sha512-aPP5Q5AqNGuT0tnuEkK/g4mnt3ZhheiXrDIiSVIHN9mcN21OyXDVbEMqmXPE7e2OplNLDkcvV+ZoGJa2ZImFgw==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.4.tgz",
+			"integrity": "sha512-LfdGXCV9rdEify1oxlN9eamvDSjv9md9ZVMAbNHA87xqIfFCxImxan9qZ8+Un54iK2nnqPlbnSi4R54ONtbWBw==",
 			"cpu": [
 				"x64"
 			],
@@ -6765,9 +6765,9 @@
 			"dev": true
 		},
 		"node_modules/@types/estree": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
 			"dev": true
 		},
 		"node_modules/@types/express": {
@@ -20296,10 +20296,13 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "4.9.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.0.tgz",
-			"integrity": "sha512-bUHW/9N21z64gw8s6tP4c88P382Bq/L5uZDowHlHx6s/QWpjJXivIAbEw6LZthgSvlEizZBfLC4OAvWe7aoF7A==",
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.4.tgz",
+			"integrity": "sha512-2ztU7pY/lrQyXSCnnoU4ICjT/tCG9cdH3/G25ERqE3Lst6vl2BCM5hL2Nw+sslAvAf+ccKsAq1SkKQALyqhR7g==",
 			"dev": true,
+			"dependencies": {
+				"@types/estree": "1.0.5"
+			},
 			"bin": {
 				"rollup": "dist/bin/rollup"
 			},
@@ -20308,19 +20311,19 @@
 				"npm": ">=8.0.0"
 			},
 			"optionalDependencies": {
-				"@rollup/rollup-android-arm-eabi": "4.9.0",
-				"@rollup/rollup-android-arm64": "4.9.0",
-				"@rollup/rollup-darwin-arm64": "4.9.0",
-				"@rollup/rollup-darwin-x64": "4.9.0",
-				"@rollup/rollup-linux-arm-gnueabihf": "4.9.0",
-				"@rollup/rollup-linux-arm64-gnu": "4.9.0",
-				"@rollup/rollup-linux-arm64-musl": "4.9.0",
-				"@rollup/rollup-linux-riscv64-gnu": "4.9.0",
-				"@rollup/rollup-linux-x64-gnu": "4.9.0",
-				"@rollup/rollup-linux-x64-musl": "4.9.0",
-				"@rollup/rollup-win32-arm64-msvc": "4.9.0",
-				"@rollup/rollup-win32-ia32-msvc": "4.9.0",
-				"@rollup/rollup-win32-x64-msvc": "4.9.0",
+				"@rollup/rollup-android-arm-eabi": "4.9.4",
+				"@rollup/rollup-android-arm64": "4.9.4",
+				"@rollup/rollup-darwin-arm64": "4.9.4",
+				"@rollup/rollup-darwin-x64": "4.9.4",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.9.4",
+				"@rollup/rollup-linux-arm64-gnu": "4.9.4",
+				"@rollup/rollup-linux-arm64-musl": "4.9.4",
+				"@rollup/rollup-linux-riscv64-gnu": "4.9.4",
+				"@rollup/rollup-linux-x64-gnu": "4.9.4",
+				"@rollup/rollup-linux-x64-musl": "4.9.4",
+				"@rollup/rollup-win32-arm64-msvc": "4.9.4",
+				"@rollup/rollup-win32-ia32-msvc": "4.9.4",
+				"@rollup/rollup-win32-x64-msvc": "4.9.4",
 				"fsevents": "~2.3.2"
 			}
 		},
@@ -20350,9 +20353,9 @@
 			"dev": true
 		},
 		"node_modules/rollup-plugin-import-css": {
-			"version": "3.3.5",
-			"resolved": "https://registry.npmjs.org/rollup-plugin-import-css/-/rollup-plugin-import-css-3.3.5.tgz",
-			"integrity": "sha512-wSfzveEzvUDlVevo70kmVD5Mk785UN55NG4C7VVnrmdE0qZ8apcVVFajyCPfFYSNxq5YkccOcrGUT2T/2HnEcQ==",
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-import-css/-/rollup-plugin-import-css-3.4.0.tgz",
+			"integrity": "sha512-997dJi7M7yYFn7tZer/UVt72mh4GH/hHBv48j3V4jsGSg+1DdYUXn+QB9SMMCNKF99pSv6QXmIOLTyeuijIsgg==",
 			"dev": true,
 			"dependencies": {
 				"@rollup/pluginutils": "^5.0.4"
@@ -22498,9 +22501,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.0.10",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
-			"integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
+			"version": "5.0.11",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
+			"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.19.3",
@@ -22571,9 +22574,9 @@
 			}
 		},
 		"node_modules/vite-tsconfig-paths": {
-			"version": "4.2.2",
-			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.2.tgz",
-			"integrity": "sha512-dq0FjyxHHDnp0uS3P12WEOX2W7NeuLzX9AWP38D7Zw2CTbFErapwQVlCiT5DMJcVWKQ1MMdTe92PZl/rBQ7qcw==",
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.3.tgz",
+			"integrity": "sha512-xVsA2xe6QSlzBujtWF8q2NYexh7PAUYfzJ4C8Axpe/7d2pcERYxuxGgph9F4f0iQO36g5tyGq6eBUYIssdUrVw==",
 			"dev": true,
 			"dependencies": {
 				"debug": "^4.1.1",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 21c6e62989..4167ab2295 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -197,18 +197,18 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"remark-gfm": "^3.0.1",
-		"rollup": "^4.9.0",
+		"rollup": "^4.9.4",
 		"rollup-plugin-esbuild": "^6.1.0",
-		"rollup-plugin-import-css": "^3.3.5",
+		"rollup-plugin-import-css": "^3.4.0",
 		"rollup-plugin-web-worker-loader": "^1.6.1",
 		"storybook": "7.6.7",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.8",
 		"typescript": "^5.3.3",
 		"typescript-json-schema": "^0.62.0",
-		"vite": "^5.0.10",
+		"vite": "^5.0.11",
 		"vite-plugin-static-copy": "^1.0.0",
-		"vite-tsconfig-paths": "^4.2.2",
+		"vite-tsconfig-paths": "^4.2.3",
 		"web-component-analyzer": "^2.0.0"
 	},
 	"msw": {