@orangelogic/design-system 4.38.0 → 4.40.0

package/library/chunks/{asset-link-format.vbmd2KkO.js → asset-link-format.P8WKO488.js}

@@ -3,45 +3,48 @@ import { a as r, i, n as a, r as o, t as s } from "./cortex-element.DTrNUtdr.js"
 import { t as c } from "./query.B1yi7t71.js";
 import { t as l } from "./component.styles.0xM1ZmBs.js";
 import { t as u } from "./custom-element.BEMYNDK1.js";
-import { t as d } from "./i18n.BJ2p4em8.js";
+import { t as d } from "./i18n.CQPiI18Q.js";
 import { t as f } from "./watch.Ub5r8btz.js";
-import { t as p } from "./icon-button.Dd-oDRfX.js";
+import { t as p } from "./icon-button.BAUsYiQh.js";
 import { t as m } from "./when.BUskJLtZ.js";
 import { t as h } from "./icon.CeQpEaQz.js";
 import { t as g } from "./style-map.DPGQIxip.js";
-import { t as _ } from "./button.BlhGCsjP.js";
+import { t as _ } from "./button.DnOMjl_G.js";
 import { m as ee } from "./string.DAuTpyw8.js";
-import { t as te } from "./tooltip.GjnTzFeL.js";
+import { t as te } from "./tooltip.DWx9VYtS.js";
 import { n as v } from "./position-picker.dY_vgF_H.js";
-import { l as ne, r as y } from "./number.CNp5LKkv.js";
-import { t as re } from "./image.C0s1gL4z.js";
-import { t as b } from "./typography.B0mkhqTB.js";
-import { t as ie } from "./button-group.CPfXrqyq.js";
-import { t as ae } from "./checkbox.aFoOxk2j.js";
-import { t as x } from "./repeat.CKv9FPlC.js";
-import { t as oe } from "./input.Fmdh6pnf.js";
-import { t as S } from "./option._7i4rjM5.js";
-import { t as C } from "./space.Dd8jezXK.js";
-import { t as w } from "./select.BddyhkLW.js";
-import { E as se, T as ce, b as le, d as ue, h as T, p as de, w as fe, y as pe } from "./src.CDbx_BKW.js";
-import { t as E } from "./details.BacO3ROq.js";
-import { t as me } from "./divider.CqSNZCU8.js";
-import { i as D, n as O, r as k } from "./asset-link-format.DhdgEsA0.js";
-import { t as he } from "./v4.JyXW8GUB.js";
-import "./cropper.D4ymxgab.js";
-import { t as ge } from "./_baseUniq.h_pGICPH.js";
-import { a as _e, f as A, n as ve, o as ye, r as be, t as xe, u as Se } from "./endpoints.jOHOmF_t.js";
-import { t as j } from "./position-picker.DwDC9gDl.js";
+import { l as ne, r as re } from "./number.CNp5LKkv.js";
+import { t as ie } from "./image.C0s1gL4z.js";
+import { t as y } from "./typography.B0mkhqTB.js";
+import { t as ae } from "./button-group.CPfXrqyq.js";
+import { t as oe } from "./checkbox.aFoOxk2j.js";
+import { t as b } from "./repeat.CKv9FPlC.js";
+import { t as se } from "./input.D1UkXp3F.js";
+import { t as x } from "./option.C97GEvQ6.js";
+import { t as S } from "./space.Dd8jezXK.js";
+import { t as C } from "./select.DGL9C_32.js";
+import { t as ce } from "./visually-hidden.Bv3SInZp.js";
+import { E as le, T as ue, b as de, d as fe, h as w, p as pe, w as me, y as he } from "./src.QIRlv8bQ.js";
+import { t as T } from "./details.BGlfx87d.js";
+import { t as E } from "./divider.CqSNZCU8.js";
+import { a as D, c as O, l as k, n as ge, o as A, r as j, s as M, t as N } from "./asset-link-format.COPyGdND.js";
+import { t as _e } from "./menu-label.B-FOyfAX.js";
+import { t as ve } from "./switch.CBho2RVW.js";
+import { t as ye } from "./v4.JyXW8GUB.js";
+import "./cropper.BRsN8h2t.js";
+import { t as be } from "./_baseUniq.h_pGICPH.js";
+import { d as xe, i as Se, n as Ce, o as we, p as P, r as Te, s as Ee, t as De } from "./string-array.Dstcqyjm.js";
+import { t as Oe } from "./position-picker.DzRyAx7a.js";
 //#region ../../node_modules/lodash-es/uniq.js
-function Ce(e) {
-	return e && e.length ? ge(e) : [];
+function ke(e) {
+	return e && e.length ? be(e) : [];
 }
 //#endregion
 //#region ../../packages/services/src/api/asset/asset.utils.ts
-function M(e) {
+function Ae(e) {
 	return typeof e == "object" && !!e && "URI" in e;
 }
-var we = {
+var je = {
 	artist: "Artist",
 	color: "Color",
 	createDate: "CreateDate",
@@ -63,34 +66,34 @@ var we = {
 	systemIdentifier: "SystemIdentifier",
 	text: "Text",
 	title: "Title"
-}, Te = /* @__PURE__ */ new Set([
+}, Me = /* @__PURE__ */ new Set([
 	"mediaDate",
 	"createDate",
 	"editDate"
 ]);
-function N(e) {
+function Ne(e) {
 	return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(e) && !/^(?:OR|AND|NOT)$/.test(e) ? e : `"${e.replace(/\\/g, "\\\\").replace(/"/g, "\\\"")}"`;
 }
-function Ee(e, t) {
-	let n = (Array.isArray(t) ? t : [t]).map((t) => `${e}:${N(t)}`);
+function Pe(e, t) {
+	let n = (Array.isArray(t) ? t : [t]).map((t) => `${e}:${Ne(t)}`);
 	return n.length > 1 ? `(${n.join(" OR ")})` : n[0] ?? "";
 }
-function De(e, t) {
+function Fe(e, t) {
 	return (Array.isArray(t) ? t : [t]).map((t) => `${e}${t.operator}${t.value}`).join(" AND ");
 }
-function Oe(e) {
+function Ie(e) {
 	let t = [];
 	for (let n of Object.keys(e)) {
 		let r = n, i = e[r];
 		if (i == null) continue;
 		if (r === "custom") {
-			for (let [e, n] of Object.entries(i)) t.push(Ee(e, n));
+			for (let [e, n] of Object.entries(i)) t.push(Pe(e, n));
 			continue;
 		}
-		let a = we[r];
+		let a = je[r];
 		if (a) {
-			if (Te.has(r)) {
-				t.push(De(a, i));
+			if (Me.has(r)) {
+				t.push(Fe(a, i));
 				continue;
 			}
 			if (r === "color") {
@@ -100,87 +103,87 @@ function Oe(e) {
 			if (r === "parentFolderIdentifier") {
 				let e = Array.isArray(i) ? i : [i];
 				if (e.length === 0) continue;
-				let n = [...e.map((e) => `ParentFolderIdentifier:${N(String(e))}`), ...e.map((e) => `ParentAlbumIdentifier:${N(String(e))}`)];
+				let n = [...e.map((e) => `ParentFolderIdentifier:${Ne(String(e))}`), ...e.map((e) => `ParentAlbumIdentifier:${Ne(String(e))}`)];
 				t.push(`(${n.join(" OR ")})`);
 				continue;
 			}
-			t.push(Ee(a, i));
+			t.push(Pe(a, i));
 		}
 	}
 	return t.join(" AND ");
 }
-function P(e) {
-	if ("and" in e) return e.and.map(P).filter(Boolean).join(" AND ");
+function Le(e) {
+	if ("and" in e) return e.and.map(Le).filter(Boolean).join(" AND ");
 	if ("or" in e) {
-		let t = e.or.map(P).filter(Boolean);
+		let t = e.or.map(Le).filter(Boolean);
 		return t.length > 1 ? `(${t.join(" OR ")})` : t[0] ?? "";
 	}
 	if ("not" in e) {
-		let t = P(e.not);
+		let t = Le(e.not);
 		return t ? `NOT (${t})` : "";
 	}
-	return Oe(e);
+	return Ie(e);
 }
 //#endregion
 //#region ../../packages/services/src/api/asset/asset.ts
-var ke = "CoreField.LargeSizePreview", F = "CoreField.DocType", I = "Document.Title", Ae = "Document.CaptionLong", L = "Document.FileExtension", R = "CoreField.FileSize", z = "CoreField.Identifier", je = "CoreField.MaxHeight", Me = "CoreField.MaxWidth", B = "Document.RecordID", V = "CoreField.DocSubType", Ne = "CoreField.TitleWithFallback", H = "CoreField.OriginalFileName", Pe = "__width", Fe = "__height", Ie = "CoreField.OriginalPreview", Le = "Document.DocSubType", Re = "Document.InPoint", ze = "Document.OutPoint", Be = {
+var Re = "CoreField.LargeSizePreview", F = "CoreField.DocType", ze = "Document.Title", Be = "Document.CaptionLong", I = "Document.FileExtension", Ve = "CoreField.FileSize", He = "CoreField.Identifier", Ue = "CoreField.MaxHeight", We = "CoreField.MaxWidth", L = "Document.RecordID", Ge = "CoreField.DocSubType", Ke = "CoreField.TitleWithFallback", R = "CoreField.OriginalFileName", qe = "__width", Je = "__height", Ye = "CoreField.OriginalPreview", Xe = "Document.DocSubType", Ze = "Document.InPoint", Qe = "Document.OutPoint", $e = {
 	DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
 	ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
-}, Ve = {
-	[ke]: Be.DEFAULT_VIEW_SIZE,
-	[Ie]: Be.ORIGINAL_VIEW_SIZE
-}, He = Object.fromEntries(Object.entries(Ve).map(([e, t]) => [t, e]));
-function Ue(e) {
-	return Ve[e] ?? e;
+}, et = {
+	[Re]: $e.DEFAULT_VIEW_SIZE,
+	[Ye]: $e.ORIGINAL_VIEW_SIZE
+}, tt = Object.fromEntries(Object.entries(et).map(([e, t]) => [t, e]));
+function nt(e) {
+	return et[e] ?? e;
 }
-function We(e) {
-	return e === "CoreField.TitleWithFallback" ? [I, H] : [Ue(e)];
+function rt(e) {
+	return e === "CoreField.TitleWithFallback" ? [ze, R] : [nt(e)];
 }
-function Ge(e) {
+function it(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) {
-		let e = He[n] ?? n;
+		let e = tt[n] ?? n;
 		t[e] = r;
 	}
 	return t;
 }
-function Ke(e, t, n) {
-	e[n] = U(t, n);
+function at(e, t, n) {
+	e[n] = z(t, n);
 	let r = t[n];
-	return r != null && M(r) && (typeof r.Width == "number" && r.Width > 0 && (e[`${n}${Pe}`] = String(r.Width)), typeof r.Height == "number" && r.Height > 0 && (e[`${n}${Fe}`] = String(r.Height))), e;
+	return r != null && Ae(r) && (typeof r.Width == "number" && r.Width > 0 && (e[`${n}${qe}`] = String(r.Width)), typeof r.Height == "number" && r.Height > 0 && (e[`${n}${Je}`] = String(r.Height))), e;
 }
-function qe(e) {
+function ot(e) {
 	let t = new URLSearchParams();
 	for (let [n, r] of Object.entries(e)) r != null && (Array.isArray(r) ? r.forEach((e) => t.append(n, String(e))) : t.append(n, String(r)));
 	return t;
 }
-async function Je({ consistency: e, countPerPage: t, fields: n, getPermanentAssetsPaths: r, httpMethod: i = "GET", isSiteBuilder: a, pageNumber: o, query: s, securityByPassToken: c, siteUrl: l, sort: u, throwOnError: d, token: f, useSession: p }) {
-	let m = n?.flatMap(We), h = n?.includes("CoreField.TitleWithFallback") ?? !1, g = (e) => {
-		let t = Ge(e);
-		return h && (t[Ne] = U(t, "Document.Title") || U(t, "CoreField.OriginalFileName")), t;
+async function st({ consistency: e, countPerPage: t, fields: n, getPermanentAssetsPaths: r, httpMethod: i = "GET", isSiteBuilder: a, pageNumber: o, query: s, securityByPassToken: c, siteUrl: l, sort: u, throwOnError: d, token: f, useSession: p }) {
+	let m = n?.flatMap(rt), h = n?.includes("CoreField.TitleWithFallback") ?? !1, g = (e) => {
+		let t = it(e);
+		return h && (t[Ke] = z(t, "Document.Title") || z(t, "CoreField.OriginalFileName")), t;
 	}, _ = {
 		Consistency: e || void 0,
 		CountPerPage: t,
-		Fields: Ce(m),
+		Fields: ke(m),
 		Format: "json",
 		GetPermanentAssetsPaths: r ?? void 0,
 		PageNumber: o,
-		Query: P(s),
+		Query: Le(s),
 		SecurityByPassToken: c || void 0,
 		Sort: u || void 0,
 		UseSession: p || void 0
 	}, ee = i === "POST";
 	try {
-		return (await A.request({
+		return (await P.request({
 			baseURL: l,
 			headers: f ? { Authorization: `Bearer ${f}` } : void 0,
 			method: i,
-			...ee ? { data: qe(_) } : {
+			...ee ? { data: ot(_) } : {
 				params: _,
 				paramsSerializer: { indexes: null }
 			},
 			responseType: "json",
-			transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], a ? (e) => ({
+			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], a ? (e) => ({
 				items: (e.results?.Items ?? []).map(g),
 				sort: e.results?.GlobalInfo?.Sort ?? "",
 				totalCount: e.results?.GlobalInfo?.TotalCount ?? 0
@@ -189,7 +192,7 @@ async function Je({ consistency: e, countPerPage: t, fields: n, getPermanentAsse
 				sort: e.APIResponse?.GlobalInfo?.Sort ?? "",
 				totalCount: e.APIResponse?.GlobalInfo?.TotalCount ?? 0
 			})],
-			url: a ? ye.SEARCH_ASSETS : Se["4.0"]
+			url: a ? Ee.SEARCH_ASSETS : xe["4.0"]
 		})).data;
 	} catch (e) {
 		if (d) throw e;
@@ -200,9 +203,9 @@ async function Je({ consistency: e, countPerPage: t, fields: n, getPermanentAsse
 		};
 	}
 }
-async function Ye({ assetId: e, extension: t, format: n, siteUrl: r, token: i, transformations: a, useSession: o }) {
+async function ct({ assetId: e, extension: t, format: n, siteUrl: r, token: i, transformations: a, useSession: o }) {
 	try {
-		return (await A.request({
+		return (await P.request({
 			baseURL: r,
 			method: "GET",
 			params: {
@@ -214,19 +217,19 @@ async function Ye({ assetId: e, extension: t, format: n, siteUrl: r, token: i, t
 				UseSession: o || void 0
 			},
 			timeout: 3e5,
-			url: ve.GET_TRANSFORM_ASSET_LINK
+			url: Te.GET_TRANSFORM_ASSET_LINK
 		})).data;
 	} catch {
 		return null;
 	}
 }
-var Xe = 50;
-function Ze(e, t) {
+var lt = 50;
+function ut(e, t) {
 	let n = [];
 	for (let r = 0; r < e.length; r += t) n.push(e.slice(r, r + t));
 	return n;
 }
-async function Qe({ consistency: e, extraFields: t, getPermanentAssetsPaths: n, isSiteBuilder: r, recordIds: i, securityByPassToken: a, throwOnError: o, token: s }) {
+async function dt({ consistency: e, extraFields: t, getPermanentAssetsPaths: n, isSiteBuilder: r, recordIds: i, securityByPassToken: a, throwOnError: o, token: s }) {
 	if (!Array.isArray(i) || i.length === 0) return {
 		facets: [],
 		items: [],
@@ -234,11 +237,11 @@ async function Qe({ consistency: e, extraFields: t, getPermanentAssetsPaths: n,
 	};
 	let c = t?.filter((e) => e && typeof e == "string") ?? [], l = [
 		...c,
-		H,
-		I,
-		Ae,
-		B
-	], u = Ze(i, Xe), d = await Promise.all(u.map((t) => Je({
+		R,
+		ze,
+		Be,
+		L
+	], u = ut(i, lt), d = await Promise.all(u.map((t) => st({
 		consistency: e,
 		countPerPage: t.length,
 		fields: l,
@@ -254,18 +257,18 @@ async function Qe({ consistency: e, extraFields: t, getPermanentAssetsPaths: n,
 	return {
 		facets: [],
 		items: d.flatMap((e) => e.items).map((e) => ({
-			name: U(e, H),
-			recordId: U(e, B),
-			...c.reduce((t, n) => Ke(t, e, n), {})
+			name: z(e, R),
+			recordId: z(e, L),
+			...c.reduce((t, n) => at(t, e, n), {})
 		})).sort((e, t) => (f.get(e.recordId) ?? Infinity) - (f.get(t.recordId) ?? Infinity)),
 		totalCount: d.reduce((e, t) => e + t.totalCount, 0)
 	};
 }
-function U(e, t) {
+function z(e, t) {
 	let n = e[t];
-	return n == null ? "" : typeof n == "string" ? n : typeof n == "number" || typeof n == "boolean" ? String(n) : M(n) ? n.URI : "";
+	return n == null ? "" : typeof n == "string" ? n : typeof n == "number" || typeof n == "boolean" ? String(n) : Ae(n) ? n.URI : "";
 }
-async function $e({ consistency: e, countPerPage: t, directParentFolderIdentifier: n, extraFields: r, getPermanentAssetsPaths: i, isSiteBuilder: a, limitedDocTypes: o, pageNumber: s, parentFolderIdentifier: c, searchTerm: l, securityByPassToken: u, sortOrder: d, throwOnError: f, token: p }) {
+async function ft({ consistency: e, countPerPage: t, directParentFolderIdentifier: n, extraFields: r, getPermanentAssetsPaths: i, isSiteBuilder: a, limitedDocTypes: o, pageNumber: s, parentFolderIdentifier: c, searchTerm: l, securityByPassToken: u, sortOrder: d, throwOnError: f, token: p }) {
 	if (!n && !c) return {
 		facets: [],
 		items: [],
@@ -276,19 +279,19 @@ async function $e({ consistency: e, countPerPage: t, directParentFolderIdentifie
 		parentFolderIdentifier: c,
 		...l ? { text: l } : {},
 		...o && o.length > 0 ? { docType: o } : {}
-	}, g = await Je({
+	}, g = await st({
 		consistency: e,
 		countPerPage: t,
 		fields: [
 			...m,
-			Ne,
-			R,
+			Ke,
+			Ve,
 			F,
-			V,
-			z,
+			Ge,
+			He,
+			I,
 			L,
-			B,
-			H
+			R
 		],
 		getPermanentAssetsPaths: i,
 		isSiteBuilder: a,
@@ -302,27 +305,27 @@ async function $e({ consistency: e, countPerPage: t, directParentFolderIdentifie
 	return {
 		facets: [],
 		items: g.items.map((e) => {
-			let t = U(e, L);
+			let t = z(e, I);
 			t && !t.startsWith(".") && (t = "." + t);
-			let n = U(e, B);
+			let n = z(e, L);
 			return {
-				docSubType: U(e, V),
-				docType: U(e, "CoreField.DocType") || "",
+				docSubType: z(e, Ge),
+				docType: z(e, "CoreField.DocType") || "",
 				extension: t,
 				id: n,
-				identifier: U(e, z),
-				name: U(e, H),
+				identifier: z(e, He),
+				name: z(e, R),
 				recordId: n,
-				size: U(e, "CoreField.FileSize") || "0 MB",
-				...m.reduce((t, n) => Ke(t, e, n), {})
+				size: z(e, "CoreField.FileSize") || "0 MB",
+				...m.reduce((t, n) => at(t, e, n), {})
 			};
 		}),
 		totalCount: g.totalCount
 	};
 }
-async function et({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, useSession: i }) {
+async function pt({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, useSession: i }) {
 	try {
-		return (await A.request({
+		return (await P.request({
 			method: "GET",
 			params: {
 				AutoCropMode: e,
@@ -333,21 +336,21 @@ async function et({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, u
 			},
 			responseType: "json",
 			timeout: 3e5,
-			transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], (e) => ({
+			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], (e) => ({
 				height: e.cropHeight,
 				width: e.cropWidth,
 				x: e.cropX,
 				y: e.cropY
 			})],
-			url: ve.GET_CROP_ZONE_SUGGESTION
+			url: Te.GET_CROP_ZONE_SUGGESTION
 		})).data;
 	} catch {
 		return null;
 	}
 }
-async function tt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, useSession: i }) {
+async function mt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, useSession: i }) {
 	try {
-		return (await A.request({
+		return (await P.request({
 			baseURL: n,
 			method: "GET",
 			params: {
@@ -356,7 +359,7 @@ async function tt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, us
 				UseSession: i || void 0
 			},
 			responseType: "json",
-			transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? [] : e.proxies?.map((e) => ({
+			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? [] : e.proxies?.map((e) => ({
 				cdnName: e.cdnName,
 				extension: e.extension,
 				formatHeight: e.formatHeight,
@@ -367,31 +370,31 @@ async function tt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, us
 				proxyName: e.proxyName,
 				width: e.width
 			})) ?? []],
-			url: t ? ye.GET_AVAILABLE_PROXIES : _e
+			url: t ? Ee.GET_AVAILABLE_PROXIES : we
 		})).data;
 	} catch {
 		return [];
 	}
 }
-async function nt({ siteUrl: e } = {}) {
+async function ht({ siteUrl: e } = {}) {
 	try {
-		return (await A.request({
+		return (await P.request({
 			baseURL: e,
 			method: "GET",
 			responseType: "json",
-			transformResponse: [...Array.isArray(A.defaults.transformResponse) ? A.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? { formatsByDocType: {
+			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? { formatsByDocType: {
 				Audio: {},
 				Image: {},
 				Multimedia: {},
 				Video: {}
 			} } : { formatsByDocType: e.formatsByDocType ?? {} }],
-			url: xe
+			url: Ce
 		})).data;
 	} catch {
 		return { formatsByDocType: {} };
 	}
 }
-async function rt({ recordIds: e, rightsToCheck: t }) {
+async function gt({ recordIds: e, rightsToCheck: t }) {
 	let n = {
 		authorizedObjects: [],
 		forbiddenObjectsOfReadPermission: [],
@@ -399,7 +402,7 @@ async function rt({ recordIds: e, rightsToCheck: t }) {
 		invalidObjects: []
 	};
 	try {
-		let { data: n } = await A.request({
+		let { data: n } = await P.request({
 			method: "GET",
 			params: {
 				RecordIDs: e,
@@ -407,7 +410,7 @@ async function rt({ recordIds: e, rightsToCheck: t }) {
 			},
 			paramsSerializer: { indexes: null },
 			responseType: "json",
-			url: be.GET_AUTHORIZED_OBJECTS
+			url: Se.GET_AUTHORIZED_OBJECTS
 		});
 		return n;
 	} catch {
@@ -416,7 +419,7 @@ async function rt({ recordIds: e, rightsToCheck: t }) {
 }
 //#endregion
 //#region ../../packages/tools/src/fetch-image/fetch-image.ts
-var it = 20, W = "TR1", G = "TRX", at = /* @__PURE__ */ new Set([".gif"]), ot = /* @__PURE__ */ new Set([
+var _t = 20, B = "TR1", V = "TRX", vt = /* @__PURE__ */ new Set([".gif"]), yt = /* @__PURE__ */ new Set([
 	".avif",
 	".bmp",
 	".gif",
@@ -427,18 +430,18 @@ var it = 20, W = "TR1", G = "TRX", at = /* @__PURE__ */ new Set([".gif"]), ot =
 	".svg",
 	".webp"
 ]);
-function st(e) {
+function bt(e) {
 	let t = e.toLowerCase(), n = t.startsWith(".") ? t : `.${t}`;
-	return ot.has(n);
+	return yt.has(n);
 }
-function ct(e, t) {
-	return e !== void 0 && e !== "" && e !== O.Image ? !1 : !t || st(t);
+function xt(e, t) {
+	return e !== void 0 && e !== "" && e !== M.Image ? !1 : !t || bt(t);
 }
-function lt({ autoFormat: e, buildSrcset: t, docType: n, extension: r, format: i, item: a, manualFormat: o, size: s, useExpiringAssetUrls: c }) {
-	let l = r?.toLowerCase() ?? "", u = l.startsWith(".") ? l : `.${l}`, d = `path_${W}`, f = (n, r) => {
+function St({ autoFormat: e, buildSrcset: t, docType: n, extension: r, format: i, item: a, manualFormat: o, size: s, useExpiringAssetUrls: c }) {
+	let l = r?.toLowerCase() ?? "", u = l.startsWith(".") ? l : `.${l}`, d = `path_${B}`, f = (n, r) => {
 		let i = a[n];
 		if (!i) return;
-		let s = a[`${n}${Pe}`], u = a[`${n}${Fe}`], d = e && !c ? ue(i, [], {
+		let s = a[`${n}${qe}`], u = a[`${n}${Je}`], d = e && !c ? fe(i, [], {
 			autoFormat: !o,
 			extension: l,
 			format: r
@@ -447,31 +450,31 @@ function lt({ autoFormat: e, buildSrcset: t, docType: n, extension: r, format: i
 			maxHeight: u,
 			maxWidth: s,
 			src: d,
-			srcset: t && !c ? de(d, {
+			srcset: t && !c ? pe(d, {
 				extension: l,
 				format: r,
-				maxWidth: le(o, s)
+				maxWidth: de(o, s)
 			}) : ""
 		};
 	};
 	if (c) {
-		let e = ce(a, ct(n, l), l);
+		let e = ue(a, xt(n, l), l);
 		return e ? f(e) ?? {} : {};
 	}
 	if (!o) {
-		let e = pe(l, s);
-		return f(`path_${e}`, e) ?? f(d, W) ?? {};
+		let e = he(l, s);
+		return f(`path_${e}`, e) ?? f(d, B) ?? {};
 	}
 	let p = i ? `path_${i}` : void 0;
-	return p && a[p] ? i !== G || ct(n, l) ? f(p, i) ?? {} : f(d, W) ?? {} : l && at.has(u) ? f(`path_${G}`, G) ?? f(d, W) ?? {} : f(d, W) ?? {};
+	return p && a[p] ? i !== V || xt(n, l) ? f(p, i) ?? {} : f(d, B) ?? {} : l && vt.has(u) ? f(`path_${V}`, V) ?? f(d, B) ?? {} : f(d, B) ?? {};
 }
-var ut = class {
+var Ct = class {
 	constructor(e, t) {
-		this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = Infinity, this.pageSize = it, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
+		this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = Infinity, this.pageSize = _t, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
 		let n = t?.maxEnd;
 		this.maxEnd = typeof n == "number" && Number.isFinite(n) && n >= 0 ? Math.floor(n) : Infinity;
 		let r = t?.pageSize;
-		this.pageSize = typeof r == "number" && Number.isFinite(r) && r >= 1 ? Math.floor(r) : it, this.authToken = t?.token, this.securityByPassToken = t?.securityByPassToken, this.isSiteBuilder = t?.isSiteBuilder ?? !1, this.autoFormat = t?.autoFormat ?? !1, this.buildSrcset = t?.buildSrcset ?? !1, this.consistency = t?.consistency;
+		this.pageSize = typeof r == "number" && Number.isFinite(r) && r >= 1 ? Math.floor(r) : _t, this.authToken = t?.token, this.securityByPassToken = t?.securityByPassToken, this.isSiteBuilder = t?.isSiteBuilder ?? !1, this.autoFormat = t?.autoFormat ?? !1, this.buildSrcset = t?.buildSrcset ?? !1, this.consistency = t?.consistency;
 	}
 	get totalDataCount() {
 		return this.totalCount;
@@ -480,34 +483,34 @@ var ut = class {
 		this.securityByPassToken !== e && (this.securityByPassToken = e, this.resetPageCache());
 	}
 	setPageSize(e) {
-		let t = Number.isFinite(e) && e >= 1 ? Math.floor(e) : it;
+		let t = Number.isFinite(e) && e >= 1 ? Math.floor(e) : _t;
 		if (this.pageSize === t) return;
 		let n = this.fetchedPages.size > 0;
 		n && t < this.pageSize || (this.pageSize = t, n && (this.requestEpoch += 1, this.fetchedPages.clear()));
 	}
 	async fetchImages({ end: e, extraFields: t = [], format: n, manualFormat: r = !0, start: i, throwOnError: a = !1, transformations: o }) {
 		if (e < i || this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < i)) return this.data;
-		let s = this.requestEpoch, c = fe(this.host.ownerDocument.defaultView);
+		let s = this.requestEpoch, c = me(this.host.ownerDocument.defaultView);
 		if (!this.folderId || s !== this.requestEpoch) return this.data;
-		let l = n ? `path_${n}` : void 0, u = `path_${W}`, d = `path_${G}`, f = c ? [u, d] : [...new Set([
+		let l = n ? `path_${n}` : void 0, u = `path_${B}`, d = `path_${V}`, f = c ? [u, d] : [...new Set([
 			l,
 			u,
 			d
 		].filter((e) => !!e))], p = Math.floor(i / this.pageSize) + 1, m = Math.floor(e / this.pageSize) + 1;
 		for (let e = p; e <= m; e++) {
 			if (this.fetchedPages.has(e)) continue;
-			let i = await $e({
+			let i = await ft({
 				consistency: this.consistency,
 				countPerPage: this.pageSize,
 				directParentFolderIdentifier: this.folderId,
 				extraFields: [...t, ...f],
-				getPermanentAssetsPaths: se(this.host.ownerDocument.defaultView),
+				getPermanentAssetsPaths: le(this.host.ownerDocument.defaultView),
 				isSiteBuilder: this.isSiteBuilder,
 				limitedDocTypes: [
-					O.Image,
-					O.Audio,
-					O.Video,
-					O.Multimedia
+					M.Image,
+					M.Audio,
+					M.Video,
+					M.Multimedia
 				],
 				pageNumber: e,
 				searchTerm: "",
@@ -521,7 +524,7 @@ var ut = class {
 				let e = Math.min(this.maxEnd, i.totalCount);
 				this.totalCount = e, this.data = Array.from({ length: e }, () => ({
 					alt: "",
-					id: `temp-${he()}`,
+					id: `temp-${ye()}`,
 					name: "",
 					src: ""
 				}));
@@ -530,7 +533,7 @@ var ut = class {
 			for (let e = 0; e < i.items.length; e++) {
 				let a = l + e;
 				if (a < this.data.length) {
-					let s = i.items[e], { maxHeight: l, maxWidth: u, src: d, srcset: f } = lt({
+					let s = i.items[e], { maxHeight: l, maxWidth: u, src: d, srcset: f } = St({
 						autoFormat: this.autoFormat,
 						buildSrcset: this.buildSrcset,
 						docType: s.docType,
@@ -541,7 +544,7 @@ var ut = class {
 						size: s.size,
 						useExpiringAssetUrls: c
 					}), p = d, m = f;
-					!c && p && o && o.length > 0 && (p = ue(p, o), m = ""), this.data[a] = {
+					!c && p && o && o.length > 0 && (p = fe(p, o), m = ""), this.data[a] = {
 						alt: s.name,
 						docType: s.docType,
 						extension: s.extension,
@@ -584,37 +587,37 @@ var ut = class {
 	}
 	async fetchImagesByIDs({ extraFields: e = [], format: t, manualFormat: n = !0, recordIds: r, throwOnError: i = !1, transformations: a }) {
 		if (r.length === 0) return [];
-		let o = fe(this.host.ownerDocument.defaultView), s = t ? `path_${t}` : void 0, c = `path_${W}`, l = `path_${G}`, u = o ? [c, l] : [...new Set([
+		let o = me(this.host.ownerDocument.defaultView), s = t ? `path_${t}` : void 0, c = `path_${B}`, l = `path_${V}`, u = o ? [c, l] : [...new Set([
 			s,
 			c,
 			l
-		].filter((e) => !!e))], d = [L, ...o ? [] : [R]], f = [...e, F];
-		return (await Qe({
+		].filter((e) => !!e))], d = [I, ...o ? [] : [Ve]], f = [...e, F];
+		return (await dt({
 			consistency: this.consistency,
 			extraFields: [
 				...f,
 				...u,
 				...d
 			].filter((e) => e !== ""),
-			getPermanentAssetsPaths: se(this.host.ownerDocument.defaultView),
+			getPermanentAssetsPaths: le(this.host.ownerDocument.defaultView),
 			isSiteBuilder: this.isSiteBuilder,
 			recordIds: r,
 			securityByPassToken: this.securityByPassToken,
 			throwOnError: i,
 			token: this.authToken
 		})).items.map((e) => {
-			let { maxHeight: r, maxWidth: i, src: s, srcset: c } = lt({
+			let { maxHeight: r, maxWidth: i, src: s, srcset: c } = St({
 				autoFormat: this.autoFormat,
 				buildSrcset: this.buildSrcset,
 				docType: e[F],
-				extension: e[L],
+				extension: e[I],
 				format: t,
 				item: e,
 				manualFormat: n,
-				size: e[R],
+				size: e[Ve],
 				useExpiringAssetUrls: o
 			}), l = s, u = c;
-			return !o && l && a && a.length > 0 && (l = ue(l, a), u = ""), {
+			return !o && l && a && a.length > 0 && (l = fe(l, a), u = ""), {
 				alt: e.name,
 				docType: e[F],
 				extension: e["Document.FileExtension"] || "",
@@ -683,42 +686,42 @@ var ut = class {
 	resetFolderState() {
 		this.resetPageCache();
 	}
-}, dt = t`.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}.asset-link-format__footer,.asset-link-format__footer>slot{display:block}`, ft = t`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`, K = class extends s {
+}, wt = t`.asset-link-format__panel{position:relative}.asset-link-format--formats .asset-link-format__panel:not(:last-child){border-bottom:1px solid var(--cx-color-neutral-200)}.asset-link-format__drag-handle{cursor:grab;touch-action:none;width:max-content;margin-inline:auto;position:absolute;inset-block-start:calc(var(--cx-spacing-small) + var(--cx-font-size-3x-large) / 2);inset-inline:0;transform:translateY(-50%)}.asset-link-format__drag-handle::part(base){cursor:grab}.asset-link-format__drag-handle:active,.asset-link-format__drag-handle:active::part(base){cursor:grabbing}.asset-link-format__drag-handle::part(icon){color:var(--cx-color-neutral-300);rotate:90deg}.asset-link-format__announcement{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.asset-link-format__order-hint{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border-bottom:1px solid var(--cx-color-neutral-200);color:var(--cx-color-success);font:var(--cx-font-label-x-small)}.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__formats-summary{padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__formats-summary [part=icon]{width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__formats-crop cx-asset-link-format-crop{box-sizing:border-box;width:100%;padding:0 var(--cx-spacing-medium) var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}.asset-link-format__footer,.asset-link-format__footer>slot{display:block}`, Tt = t`:host([inline]){display:block}cx-details::part(base){border-bottom-width:0}.details--inline::part(base){border-width:0}.details--inline::part(header){display:none}.details--inline::part(content){padding:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`, H = class extends s {
 	constructor(...e) {
-		super(...e), this.localize = new d(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = D.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.showPositionPicker = !1, this.lastAppliedSetting = {
-			[D.Pixel]: {
+		super(...e), this.localize = new d(this), this.open = !1, this.inline = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = k.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.showPositionPicker = !1, this.lastAppliedSetting = {
+			[k.Pixel]: {
 				height: 0,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: D.Pixel,
+				unit: k.Pixel,
 				width: 0,
 				x: 0,
 				y: 0
 			},
-			[D.AspectRatio]: {
+			[k.AspectRatio]: {
 				height: 1,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: D.AspectRatio,
+				unit: k.AspectRatio,
 				width: 1,
 				x: 0,
 				y: 0
 			}
 		}, this.loading = !1, this.cropModes = [], this.focusModes = [], this.focusMode = "manual", this.cropMode = "free", this.position = v.CenterCenter, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
 	}
-	static #e = this.styles = [l, ft];
+	static #e = this.styles = [l, Tt];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-details": E,
-		"cx-divider": me,
+		"cx-details": T,
+		"cx-divider": E,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-input": oe,
-		"cx-option": S,
-		"cx-position-picker": j,
-		"cx-select": w,
-		"cx-space": C,
-		"cx-typography": b
+		"cx-input": se,
+		"cx-option": x,
+		"cx-position-picker": Oe,
+		"cx-select": C,
+		"cx-space": S,
+		"cx-typography": y
 	};
 	get selectedMode() {
 		return this.cropModes.find((e) => e.value === this.cropMode);
@@ -730,11 +733,11 @@ var ut = class {
 			return;
 		}
 		if (this.keepAspectRatio) {
-			if (this.unit === D.Pixel && this.width && this.height) {
+			if (this.unit === k.Pixel && this.width && this.height) {
 				this.aspectRatio = this.width / this.height;
 				return;
 			}
-			if (this.unit === D.AspectRatio && this.ratioWidth && this.ratioHeight) {
+			if (this.unit === k.AspectRatio && this.ratioWidth && this.ratioHeight) {
 				this.aspectRatio = this.ratioWidth / this.ratioHeight;
 				return;
 			}
@@ -757,15 +760,14 @@ var ut = class {
 		}
 	}
 	handleWidthChange(e) {
-		if (!e.target.value) {
+		let t = Number(e.target.value);
+		if (!e.target.value || !Number.isFinite(t)) {
 			this.invalidWidth = !0;
 			return;
 		}
-		this.invalidWidth = !1;
-		let t = Number(e.target.value);
-		this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1)), e.target.value = t.toString();
-		let n = this.unit === D.Pixel ? this.height : this.ratioHeight, r = !1;
-		this.keepAspectRatio && (n = Math.round(t / this.aspectRatio), this.unit === D.Pixel && n > this.maxHeight && (n = this.maxHeight, r = !0)), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", { detail: {
+		this.invalidWidth = !1, this.unit === k.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1));
+		let n = this.unit === k.Pixel ? this.height : this.ratioHeight, r = !1;
+		this.keepAspectRatio && (n = Math.max(Math.round(t / this.aspectRatio), 1)), this.unit === k.Pixel && this.maxHeight >= 1 && n > this.maxHeight && (n = this.maxHeight, r = this.keepAspectRatio), e.target.value = t.toString(), this.invalidHeight = !1, this.emit("cx-asset-link-format-crop-change", { detail: {
 			breakAspectRatio: r,
 			height: n,
 			keepAspectRatio: this.keepAspectRatio,
@@ -774,15 +776,14 @@ var ut = class {
 		} });
 	}
 	handleHeightChange(e) {
-		if (!e.target.value) {
+		let t = Number(e.target.value);
+		if (!e.target.value || !Number.isFinite(t)) {
 			this.invalidHeight = !0;
 			return;
 		}
-		this.invalidHeight = !1;
-		let t = Number(e.target.value);
-		this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1)), e.target.value = t.toString();
-		let n = this.unit === D.Pixel ? this.width : this.ratioWidth, r = !1;
-		this.keepAspectRatio && (n = Math.round(t * this.aspectRatio), this.unit === D.Pixel && n > this.maxWidth && (n = this.maxWidth, r = !0)), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", { detail: {
+		this.invalidHeight = !1, this.unit === k.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1));
+		let n = this.unit === k.Pixel ? this.width : this.ratioWidth, r = !1;
+		this.keepAspectRatio && (n = Math.max(Math.round(t * this.aspectRatio), 1)), this.unit === k.Pixel && this.maxWidth >= 1 && n > this.maxWidth && (n = this.maxWidth, r = this.keepAspectRatio), e.target.value = t.toString(), this.invalidWidth = !1, this.emit("cx-asset-link-format-crop-change", { detail: {
 			breakAspectRatio: r,
 			height: t,
 			keepAspectRatio: this.keepAspectRatio,
@@ -793,28 +794,28 @@ var ut = class {
 	onCropModeChange(e) {
 		let t = e.target.value, n = this.cropModes.find((e) => e.value === t)?.auto;
 		if (t === "free") this.selectedMode?.auto && this.emit("cx-asset-link-format-crop-change", { detail: {
-			height: this.lastAppliedSetting[D.Pixel].height,
+			height: this.lastAppliedSetting[k.Pixel].height,
 			keepAspectRatio: !1,
 			silent: !0,
-			unit: D.Pixel,
-			width: this.lastAppliedSetting[D.Pixel].width
+			unit: k.Pixel,
+			width: this.lastAppliedSetting[k.Pixel].width
 		} });
 		else if (!n) {
 			let [e, n] = t.split(":").map(Number);
-			if (this.unit === D.Pixel) {
+			if (this.unit === k.Pixel) {
 				let t = e, r = n;
-				Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({height: r, width: t} = re(this.maxWidth, this.maxHeight, e, n)), this.emit("cx-asset-link-format-crop-change", { detail: {
+				Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({height: r, width: t} = ie(this.maxWidth, this.maxHeight, e, n)), this.emit("cx-asset-link-format-crop-change", { detail: {
 					height: r,
 					keepAspectRatio: !0,
 					silent: !0,
-					unit: D.Pixel,
+					unit: k.Pixel,
 					width: t
 				} });
 			} else this.emit("cx-asset-link-format-crop-change", { detail: {
 				height: n,
 				keepAspectRatio: !0,
 				silent: !0,
-				unit: D.AspectRatio,
+				unit: k.AspectRatio,
 				width: e
 			} });
 		}
@@ -828,16 +829,16 @@ var ut = class {
 		this.emit("cx-asset-link-format-crop-position-change", { detail: { position: this.positionPicker.value } });
 	}
 	onUnitChange(e) {
-		e.target.value === D.AspectRatio ? this.emit("cx-asset-link-format-crop-change", { detail: {
-			height: this.lastAppliedSetting[D.AspectRatio].height,
+		e.target.value === k.AspectRatio ? this.emit("cx-asset-link-format-crop-change", { detail: {
+			height: this.lastAppliedSetting[k.AspectRatio].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: D.AspectRatio,
-			width: this.lastAppliedSetting[D.AspectRatio].width
+			unit: k.AspectRatio,
+			width: this.lastAppliedSetting[k.AspectRatio].width
 		} }) : this.emit("cx-asset-link-format-crop-change", { detail: {
-			height: this.lastAppliedSetting[D.Pixel].height,
+			height: this.lastAppliedSetting[k.Pixel].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: D.Pixel,
-			width: this.lastAppliedSetting[D.Pixel].width
+			unit: k.Pixel,
+			width: this.lastAppliedSetting[k.Pixel].width
 		} }), this.emit("cx-asset-link-format-crop-mode-change", { detail: { mode: "free" } });
 	}
 	handleInputChange(e) {
@@ -859,109 +860,118 @@ var ut = class {
 	}
 	handleAspectRatioClick() {
 		this.keepAspectRatio && this.cropMode !== "free" && this.emit("cx-asset-link-format-crop-mode-change", { detail: { mode: "free" } }), this.emit("cx-asset-link-format-crop-change", { detail: {
-			height: this.unit === D.Pixel ? this.height : this.ratioHeight,
+			height: this.unit === k.Pixel ? this.height : this.ratioHeight,
 			keepAspectRatio: !this.keepAspectRatio,
 			unit: this.unit,
-			width: this.unit === D.Pixel ? this.width : this.ratioWidth
+			width: this.unit === k.Pixel ? this.width : this.ratioWidth
 		} });
 	}
+	getSizeMaskBlocks(e) {
+		let t = this.unit === k.Pixel && e >= 1 ? e : Infinity;
+		return { num: {
+			autofix: !0,
+			mask: Number,
+			max: t,
+			min: 1,
+			radix: ".",
+			scale: 0
+		} };
+	}
 	render() {
 		let t = this.cropModes.filter((e) => !e.auto), n = this.cropModes.filter((e) => e.auto);
-		return e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${m(!this.noRatioModes, () => e`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${g({ width: "100%" })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${x(t, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}
+		return e`<cx-details class="details ${this.inline ? "details--inline" : ""}" ?open=${this.inline || this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${m(!this.noRatioModes, () => e`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${g({ width: "100%" })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${b(t, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}
               ${m(n.length > 0, () => e`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`)}
-              ${x(n, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}</cx-select>`)}<cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: {
-			mask: Number,
-			min: 1
-		} }} value=${this.unit === D.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+              ${b(n, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}</cx-select>`)}<cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${this.getSizeMaskBlocks(this.maxWidth)} value=${this.unit === k.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-change=${this.handleInputChange} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 W
-              </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-crop-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${g({ color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0 })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: {
-			mask: Number,
-			min: 1
-		} }} value=${this.unit === D.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
+              </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-crop-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${g({ color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0 })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${this.getSizeMaskBlocks(this.maxHeight)} value=${this.unit === k.Pixel ? this.height.toString() : this.ratioHeight.toString()} ?disabled=${this.loading} @cx-change=${this.handleInputChange} @cx-input=${this.handleHeightChange} required><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${D.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${D.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`)}</cx-space>${m(this.focusModes.length > 0, () => e`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${g({ width: "100%" })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${x(this.focusModes, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}</cx-select>`)}
-        ${m(this.showPositionPicker && this.focusMode === "manual", () => e`<cx-position-picker data-testid="cx-asset-link-format-crop-position" value=${this.position} @cx-change=${this.onPositionChange}></cx-position-picker>`)}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${g({ marginLeft: "auto" })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+              </cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<cx-select data-testid="cx-asset-link-format-crop-unit" value=${this.unit} hoist class="crop__unit-select" ?disabled=${this.loading} @cx-change=${this.onUnitChange}><cx-option value=${k.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${k.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`)}</cx-space>${m(this.focusModes.length > 0, () => e`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${g({ width: "100%" })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${b(this.focusModes, (e) => e.value, ({ label: t, value: n }) => e`<cx-option value=${n}>${t}</cx-option>`)}</cx-select>`)}
+        ${m(this.showPositionPicker && this.focusMode === "manual", () => e`<cx-position-picker data-testid="cx-asset-link-format-crop-position" value=${this.position} @cx-change=${this.onPositionChange}></cx-position-picker>`)}
+        ${m(!this.inline, () => e`<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${g({ marginLeft: "auto" })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space></cx-details>`;
 	}
 };
-a([c(".details"), o("design:type", E === void 0 ? Object : E)], K.prototype, "base", void 0), a([c("cx-position-picker"), o("design:type", j === void 0 ? Object : j)], K.prototype, "positionPicker", void 0), a([r({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], H.prototype, "base", void 0), a([c("cx-position-picker"), o("design:type", Oe === void 0 ? Object : Oe)], H.prototype, "positionPicker", void 0), a([r({
+	reflect: !0,
+	type: Boolean
+}), o("design:type", Boolean)], H.prototype, "open", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], K.prototype, "open", void 0), a([r({
+}), o("design:type", Boolean)], H.prototype, "inline", void 0), a([r({
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "width", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "width", void 0), a([r({
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "height", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "height", void 0), a([r({
 	attribute: "max-width",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "maxWidth", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "maxWidth", void 0), a([r({
 	attribute: "max-height",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "maxHeight", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "maxHeight", void 0), a([r({
 	attribute: "ratio-width",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "ratioWidth", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "ratioWidth", void 0), a([r({
 	attribute: "ratio-height",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "ratioHeight", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "ratioHeight", void 0), a([r({
 	attribute: "percentage-width",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "percentageWidth", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "percentageWidth", void 0), a([r({
 	attribute: "percentage-height",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], K.prototype, "percentageHeight", void 0), a([r({
+}), o("design:type", Number)], H.prototype, "percentageHeight", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", D === void 0 ? Object : D)], K.prototype, "unit", void 0), a([r({
+}), o("design:type", k === void 0 ? Object : k)], H.prototype, "unit", void 0), a([r({
 	attribute: "disabled-apply",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], K.prototype, "disabledApply", void 0), a([r({
+}), o("design:type", Boolean)], H.prototype, "disabledApply", void 0), a([r({
 	attribute: "no-ratio-modes",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], K.prototype, "noRatioModes", void 0), a([r({
+}), o("design:type", Boolean)], H.prototype, "noRatioModes", void 0), a([r({
 	attribute: "show-position-picker",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], K.prototype, "showPositionPicker", void 0), a([r({
+}), o("design:type", Boolean)], H.prototype, "showPositionPicker", void 0), a([r({
 	attribute: "last-applied-setting",
 	reflect: !1,
 	type: Object
-}), o("design:type", typeof Record > "u" ? Object : Record)], K.prototype, "lastAppliedSetting", void 0), a([r({
+}), o("design:type", typeof Record > "u" ? Object : Record)], H.prototype, "lastAppliedSetting", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], K.prototype, "loading", void 0), a([r({
+}), o("design:type", Boolean)], H.prototype, "loading", void 0), a([r({
 	attribute: "crop-modes",
 	reflect: !1,
 	type: Array
-}), o("design:type", Array)], K.prototype, "cropModes", void 0), a([r({
+}), o("design:type", Array)], H.prototype, "cropModes", void 0), a([r({
 	attribute: "focus-modes",
 	reflect: !1,
 	type: Object
-}), o("design:type", Array)], K.prototype, "focusModes", void 0), a([r({
+}), o("design:type", Array)], H.prototype, "focusModes", void 0), a([r({
 	attribute: "focus-mode",
 	reflect: !0,
 	type: String
-}), o("design:type", String)], K.prototype, "focusMode", void 0), a([r({
+}), o("design:type", String)], H.prototype, "focusMode", void 0), a([r({
 	attribute: "crop-mode",
 	reflect: !0,
 	type: String
-}), o("design:type", String)], K.prototype, "cropMode", void 0), a([r({
+}), o("design:type", String)], H.prototype, "cropMode", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", v === void 0 ? Object : v)], K.prototype, "position", void 0), a([r({
+}), o("design:type", v === void 0 ? Object : v)], H.prototype, "position", void 0), a([r({
 	attribute: "keep-aspect-ratio",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], K.prototype, "keepAspectRatio", void 0), a([i(), o("design:type", Boolean)], K.prototype, "invalidWidth", void 0), a([i(), o("design:type", Boolean)], K.prototype, "invalidHeight", void 0), a([i(), o("design:type", Number)], K.prototype, "aspectRatio", void 0), a([
+}), o("design:type", Boolean)], H.prototype, "keepAspectRatio", void 0), a([i(), o("design:type", Boolean)], H.prototype, "invalidWidth", void 0), a([i(), o("design:type", Boolean)], H.prototype, "invalidHeight", void 0), a([i(), o("design:type", Number)], H.prototype, "aspectRatio", void 0), a([
 	f("cropMode", { waitUntilFirstUpdate: !0 }),
 	f("maxWidth", { waitUntilFirstUpdate: !0 }),
 	f("maxHeight", { waitUntilFirstUpdate: !0 }),
@@ -969,55 +979,225 @@ a([c(".details"), o("design:type", E === void 0 ? Object : E)], K.prototype, "ba
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", Promise)
-], K.prototype, "handleCropModeChange", null), a([
+], H.prototype, "handleCropModeChange", null), a([
 	f("open", { waitUntilFirstUpdate: !0 }),
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", Promise)
-], K.prototype, "handleOpenChange", null), K = a([u("cx-asset-link-format-crop")], K);
-var pt = K, mt = t`.extension{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border:solid 1px var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-0);& cx-select{flex:1;width:100%}}`, q = class extends s {
+], H.prototype, "handleOpenChange", null), H = a([u("cx-asset-link-format-crop")], H);
+var Et = H, Dt = t`:host{display:block}.asset-link-format__dimensions-select{width:100%}.details::part(base){border-bottom-width:0}.asset-link-format__dimensions-inline{padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__dimensions-inline .asset-link-format__dimensions-summary{margin-block-end:var(--cx-spacing-small)}.asset-link-format__dimensions-custom{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,7rem);align-items:center;display:grid}.asset-link-format__dimensions-custom cx-input,.asset-link-format__dimensions-custom cx-select{min-width:0}.asset-link-format__dimensions-apply{margin-inline-start:auto}`, Ot = {
+	[A.Percent]: { num: {
+		mask: Number,
+		min: 1,
+		radix: ".",
+		scale: 2
+	} },
+	[A.Pixel]: { num: {
+		mask: Number,
+		min: 1,
+		radix: ".",
+		scale: 0
+	} }
+}, U = class extends s {
+	constructor(...e) {
+		super(...e), this.localize = new d(this), this.open = !1, this.inline = !1, this.applyBehavior = N.Legacy, this.loading = !1, this.items = [], this.canCustom = !1, this.customDimensionsUnit = A.Pixel, this.dimensionsSelection = "", this.customDimensionsDrafts = {
+			[A.Percent]: {
+				height: "100",
+				width: "100"
+			},
+			[A.Pixel]: {
+				height: "1080",
+				width: "1920"
+			}
+		};
+	}
+	static #e = this.styles = [l, Dt];
+	static #t = this.dependencies = {
+		"cx-button": _,
+		"cx-details": T,
+		"cx-divider": E,
+		"cx-icon": h,
+		"cx-input": se,
+		"cx-menu-label": _e,
+		"cx-option": x,
+		"cx-select": C,
+		"cx-space": S,
+		"cx-typography": y
+	};
+	handleDimensionsValueChange() {
+		let e = this.value;
+		this.dimensionsSelection = e?.mode === D.Custom ? D.Custom : e?.mode === D.Preset ? `preset:${e.value}` : "", e?.mode === D.Custom && (this.customDimensionsUnit = e.unit, this.customDimensionsDrafts = {
+			...this.customDimensionsDrafts,
+			[e.unit]: {
+				height: String(e.height),
+				width: String(e.width)
+			}
+		});
+	}
+	emitDimensionsValue(e) {
+		this.value = e, this.emit("cx-asset-link-format-dimensions-change", { detail: { ...e } });
+	}
+	getCustomDimensionsValue() {
+		let e = this.customDimensionsUnit, t = this.customDimensionsDrafts[e], n = Number(t.width), r = Number(t.height);
+		if (!(!Number.isFinite(n) || !Number.isFinite(r) || n < 1 || r < 1) && (e !== A.Pixel || Number.isInteger(n) && Number.isInteger(r))) return {
+			height: r,
+			mode: D.Custom,
+			unit: e,
+			width: n
+		};
+	}
+	get pendingValue() {
+		if (this.dimensionsSelection === D.Custom) return this.getCustomDimensionsValue();
+		if (this.dimensionsSelection.startsWith("preset:")) {
+			let e = this.items.find((e) => `preset:${e.value}` === this.dimensionsSelection && !e.disabled);
+			return e ? {
+				mode: D.Preset,
+				value: e.value
+			} : void 0;
+		}
+	}
+	get applyDisabled() {
+		let e = this.pendingValue;
+		return !e || !this.value || e.mode !== this.value.mode ? !e : e.mode === D.Preset && this.value.mode === D.Preset ? e.value === this.value.value : e.mode === D.Custom && this.value.mode === D.Custom && e.height === this.value.height && e.unit === this.value.unit && e.width === this.value.width;
+	}
+	applyPendingValue() {
+		let e = this.pendingValue;
+		e && this.emitDimensionsValue(e);
+	}
+	onDimensionsSelectChange(e) {
+		if (e.target !== e.currentTarget || this.loading) return;
+		let t = e.currentTarget.value;
+		if (t === D.Custom && this.canCustom) this.dimensionsSelection = D.Custom, this.applyBehavior !== N.Manual && this.applyPendingValue();
+		else if (t.startsWith("preset:")) {
+			let e = this.items.find((e) => `preset:${e.value}` === t && !e.disabled);
+			e && (this.dimensionsSelection = t, this.applyBehavior !== N.Manual && this.emitDimensionsValue({
+				mode: D.Preset,
+				value: e.value
+			}));
+		}
+	}
+	onDimensionsInput(e) {
+		if (e.target !== e.currentTarget || this.loading || !this.canCustom) return;
+		let t = e.currentTarget, n = t.name === "height" ? "height" : "width", r = this.customDimensionsUnit;
+		this.customDimensionsDrafts = {
+			...this.customDimensionsDrafts,
+			[r]: {
+				...this.customDimensionsDrafts[r],
+				[n]: t.value
+			}
+		};
+	}
+	onDimensionsCustomChange(e) {
+		e.target === e.currentTarget && !this.loading && this.canCustom && e.currentTarget.reportValidity() && this.applyBehavior !== N.Manual && this.applyPendingValue();
+	}
+	onDimensionsUnitChange(e) {
+		if (e.target !== e.currentTarget || this.loading || !this.canCustom) return;
+		let t = e.currentTarget.value;
+		(t === A.Pixel || t === A.Percent) && (this.customDimensionsUnit = t, this.applyBehavior !== N.Manual && this.applyPendingValue());
+	}
+	onApply() {
+		!this.loading && !this.applyDisabled && this.applyPendingValue();
+	}
+	onDimensionsShow(e) {
+		e.target !== e.currentTarget && e.stopPropagation();
+	}
+	onDimensionsHide(e) {
+		e.target !== e.currentTarget && e.stopPropagation();
+	}
+	renderCustomDimensions() {
+		let t = this.customDimensionsUnit, n = this.customDimensionsDrafts[t];
+		return e`<cx-space class="asset-link-format__dimensions-custom" spacing="small"><cx-input name="width" mask="num" .maskBlocks=${Ot[t]} aria-label=${this.localize.term("maxWidth")} value=${n.width} ?disabled=${this.loading} @cx-input=${this.onDimensionsInput} @cx-change=${this.onDimensionsCustomChange}><cx-typography slot="prefix" variant="body3" part="input-label">W</cx-typography></cx-input><cx-input name="height" mask="num" .maskBlocks=${Ot[t]} aria-label=${this.localize.term("maxHeight")} value=${n.height} ?disabled=${this.loading} @cx-input=${this.onDimensionsInput} @cx-change=${this.onDimensionsCustomChange}><cx-typography slot="prefix" variant="body3" part="input-label">H</cx-typography></cx-input><cx-select data-label=${this.localize.term("unit")} value=${t} ?disabled=${this.loading} hoist @cx-change=${this.onDimensionsUnitChange}><cx-option value=${A.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${A.Percent}>${this.localize.term("dimensionsPercent")}</cx-option></cx-select></cx-space>`;
+	}
+	renderSummary() {
+		return e`<cx-space class="asset-link-format__dimensions-summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("dimensions")}</cx-typography></cx-space>`;
+	}
+	renderContent() {
+		let t = this.canCustom && this.dimensionsSelection === D.Custom;
+		return e`<cx-space class="asset-link-format__dimensions-content" direction="vertical" spacing="small"><cx-select class="asset-link-format__dimensions-select" data-label=${this.localize.term("dimensions")} value=${this.dimensionsSelection === D.Custom && !this.canCustom ? "" : this.dimensionsSelection} ?disabled=${this.loading} hoist @cx-change=${this.onDimensionsSelectChange}>${b(this.items, (e) => e.value, (t, n) => e`
+            ${m(t.group !== this.items[n - 1]?.group, () => e`
+              ${m(n > 0, () => e`<cx-divider></cx-divider>`)}
+              ${m(!!t.group, () => e`<cx-menu-label>${t.group}</cx-menu-label>`)}
+            `)}<cx-option value=${`preset:${t.value}`} ?disabled=${t.disabled}>${t.label}</cx-option>`)}
+          ${m(this.canCustom, () => e`
+            ${m(this.items.length > 0, () => e`<cx-divider></cx-divider>`)}<cx-option value=${D.Custom}><cx-icon slot="prefix" name="edit"></cx-icon>${this.localize.term("custom")}</cx-option>`)}</cx-select>${m(t, () => this.renderCustomDimensions())}
+        ${m(this.applyBehavior === N.Manual, () => e`<cx-button class="asset-link-format__dimensions-apply" data-testid="cx-asset-link-format-dimensions-apply" variant="primary" ?disabled=${this.applyDisabled} ?loading=${this.loading} @click=${this.onApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space>`;
+	}
+	render() {
+		return this.inline ? e`<div class="asset-link-format__dimensions-inline">${this.renderSummary()}
+          ${this.renderContent()}</div>` : e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onDimensionsShow} @cx-hide=${this.onDimensionsHide}><div slot="summary">${this.renderSummary()}</div>${this.renderContent()}</cx-details>`;
+	}
+};
+a([r({
+	reflect: !0,
+	type: Boolean
+}), o("design:type", Object)], U.prototype, "open", void 0), a([r({
+	reflect: !0,
+	type: Boolean
+}), o("design:type", Object)], U.prototype, "inline", void 0), a([r({
+	attribute: "apply-behavior",
+	reflect: !0,
+	type: String
+}), o("design:type", Object)], U.prototype, "applyBehavior", void 0), a([r({
+	reflect: !0,
+	type: Boolean
+}), o("design:type", Object)], U.prototype, "loading", void 0), a([r({
+	attribute: !1,
+	type: Array
+}), o("design:type", Array)], U.prototype, "items", void 0), a([r({
+	attribute: "can-custom",
+	type: Boolean
+}), o("design:type", Object)], U.prototype, "canCustom", void 0), a([r({
+	attribute: !1,
+	type: Object
+}), o("design:type", Object)], U.prototype, "value", void 0), a([i(), o("design:type", Object)], U.prototype, "customDimensionsUnit", void 0), a([i(), o("design:type", Object)], U.prototype, "dimensionsSelection", void 0), a([i(), o("design:type", Object)], U.prototype, "customDimensionsDrafts", void 0), a([
+	f("value"),
+	o("design:type", Function),
+	o("design:paramtypes", []),
+	o("design:returntype", void 0)
+], U.prototype, "handleDimensionsValueChange", null), U = a([u("cx-asset-link-format-dimensions")], U);
+var kt = U, At = t`.extension{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border:solid 1px var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-0);& cx-select{flex:1;width:100%}}`, W = class extends s {
 	constructor(...e) {
 		super(...e), this.localize = new d(this), this.value = "", this.items = [];
 	}
-	static #e = this.styles = [l, mt];
+	static #e = this.styles = [l, At];
 	static #t = this.dependencies = {
-		"cx-option": S,
-		"cx-select": w,
-		"cx-space": C,
-		"cx-typography": b
+		"cx-option": x,
+		"cx-select": C,
+		"cx-space": S,
+		"cx-typography": y
 	};
 	handleExtensionChange(e) {
 		let t = e.target.value;
 		this.emit("cx-asset-link-format-extension-change", { detail: t });
 	}
 	render() {
-		return e`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${x(this.items, (e) => e.value, (t) => e`<cx-option value=${t.value}>${t.displayName}</cx-option>`)}</cx-select></cx-space>`;
+		return e`<cx-space direction="vertical" spacing="small" class="extension"><cx-typography variant="body2">${this.localize.term("extension")}</cx-typography><cx-select data-label=${this.localize.term("extension")} data-testid="cx-asset-link-format-extension-select" value=${this.value} hoist @cx-change=${this.handleExtensionChange}>${b(this.items, (e) => e.value, (t) => e`<cx-option value=${t.value}>${t.displayName}</cx-option>`)}</cx-select></cx-space>`;
 	}
 };
 a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", String)], q.prototype, "value", void 0), a([r({
+}), o("design:type", String)], W.prototype, "value", void 0), a([r({
 	reflect: !1,
 	type: Array
-}), o("design:type", typeof Array > "u" ? Object : Array)], q.prototype, "items", void 0), q = a([u("cx-asset-link-format-extension")], q);
-var ht = q, gt = t`cx-details::part(base){border-bottom-width:0}`, _t = "auto", J = class extends s {
+}), o("design:type", typeof Array > "u" ? Object : Array)], W.prototype, "items", void 0), W = a([u("cx-asset-link-format-extension")], W);
+var jt = W, Mt = t`cx-details::part(base){border-bottom-width:0}`, Nt = "auto", G = class extends s {
 	constructor(...e) {
 		super(...e), this.localize = new d(this), this.open = !1, this.value = "", this.items = [], this.canAutoFormat = !1, this.autoFormat = !1, this.loading = !1, this.scopedValue = "";
 	}
-	static #e = this.styles = [l, gt];
+	static #e = this.styles = [l, Mt];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-details": E,
-		"cx-divider": me,
+		"cx-details": T,
+		"cx-divider": E,
 		"cx-icon": h,
-		"cx-option": S,
-		"cx-select": w,
-		"cx-space": C,
-		"cx-typography": b
+		"cx-option": x,
+		"cx-select": C,
+		"cx-space": S,
+		"cx-typography": y
 	};
 	get committedValue() {
-		return this.autoFormat ? _t : this.value;
+		return this.autoFormat ? Nt : this.value;
 	}
 	handleValueChange() {
 		this.scopedValue = this.committedValue;
@@ -1048,68 +1228,81 @@ var ht = q, gt = t`cx-details::part(base){border-bottom-width:0}`, _t = "auto",
 		e.target !== this.base && e.stopPropagation();
 	}
 	render() {
-		return e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${x(this.items, (e) => e.id, (t) => e`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`)}
-            ${m(this.canAutoFormat, () => e`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${_t}>${this.localize.term("auto")}</cx-option>`, () => n)}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${g({ "margin-left": "auto" })} ?disabled=${this.scopedValue === this.committedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+		return e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="photo_size_select_large"></cx-icon></div><cx-typography variant="body2">${this.localize.term("format")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small" class="format"><cx-select data-label=${this.localize.term("imageFormat")} data-testid="cx-asset-link-format-proxy-select" value=${this.scopedValue} hoist @cx-change=${this.handleProxyChange} ?disabled=${this.loading}>${b(this.items, (e) => e.id, (t) => e`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`)}
+            ${m(this.canAutoFormat, () => e`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${Nt}>${this.localize.term("auto")}</cx-option>`, () => n)}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${g({ "margin-left": "auto" })} ?disabled=${this.scopedValue === this.committedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
 	}
 };
-a([c(".details"), o("design:type", E === void 0 ? Object : E)], J.prototype, "base", void 0), a([r({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], G.prototype, "base", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], J.prototype, "open", void 0), a([r({
+}), o("design:type", Object)], G.prototype, "open", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", Object)], J.prototype, "value", void 0), a([r({
+}), o("design:type", Object)], G.prototype, "value", void 0), a([r({
 	reflect: !1,
 	type: Array
-}), o("design:type", Array)], J.prototype, "items", void 0), a([r({
+}), o("design:type", Array)], G.prototype, "items", void 0), a([r({
 	attribute: "can-auto-format",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], J.prototype, "canAutoFormat", void 0), a([r({
+}), o("design:type", Object)], G.prototype, "canAutoFormat", void 0), a([r({
 	attribute: "auto-format",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], J.prototype, "autoFormat", void 0), a([r({
+}), o("design:type", Object)], G.prototype, "autoFormat", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], J.prototype, "loading", void 0), a([i(), o("design:type", Object)], J.prototype, "scopedValue", void 0), a([
+}), o("design:type", Object)], G.prototype, "loading", void 0), a([i(), o("design:type", Object)], G.prototype, "scopedValue", void 0), a([
 	f("autoFormat"),
 	f("value"),
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
-], J.prototype, "handleValueChange", null), a([
+], G.prototype, "handleValueChange", null), a([
 	f("open", { waitUntilFirstUpdate: !0 }),
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
-], J.prototype, "handleOpenChange", null), J = a([u("cx-asset-link-format-proxy")], J);
-var vt = J, yt = t`cx-details::part(base){border-bottom-width:0}`, Y = class extends s {
+], G.prototype, "handleOpenChange", null), G = a([u("cx-asset-link-format-proxy")], G);
+var Pt = G, Ft = t`cx-details::part(base){border-bottom-width:0}.asset-link-format__quality-inline{padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__quality-inline .asset-link-format__quality-summary{margin-block-end:var(--cx-spacing-small)}.asset-link-format__quality-apply{margin-inline-start:auto}`, K = class extends s {
 	constructor(...e) {
-		super(...e), this.localize = new d(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+		super(...e), this.localize = new d(this), this.open = !1, this.inline = !1, this.applyBehavior = N.Legacy, this.value = 100, this.items = [], this.customSelected = !1, this.loading = !1, this.scopedValue = 100;
 	}
-	static #e = this.styles = [l, yt];
+	static #e = this.styles = [l, Ft];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-details": E,
+		"cx-details": T,
+		"cx-divider": E,
 		"cx-icon": h,
-		"cx-input": oe,
-		"cx-space": C,
+		"cx-input": se,
+		"cx-option": x,
+		"cx-select": C,
+		"cx-space": S,
 		"cx-tooltip": te,
-		"cx-typography": b
+		"cx-typography": y
 	};
 	get invalidValue() {
 		return isNaN(Number(this.scopedValue)) || Number(this.scopedValue) < 1 || Number(this.scopedValue) > 100 || this.value === this.scopedValue;
 	}
 	handleValueChange() {
-		this.scopedValue = this.value;
+		this.scopedValue = this.value, this.customSelected = !1;
+	}
+	handlePresetChange(e) {
+		if (e.target !== e.currentTarget || this.loading) return;
+		let t = e.currentTarget.value;
+		if (this.customSelected = t === "custom", this.customSelected) return;
+		let n = this.items.find((e) => String(e.value) === t && !e.disabled);
+		!n || !Number.isFinite(n.value) || n.value < 1 || n.value > 100 || (this.scopedValue = n.value, n.value !== this.value && this.applyBehavior !== N.Manual && this.handleApply());
 	}
 	handleQualityChange(e) {
 		let t = e.target.value;
-		this.scopedValue = Number(t);
+		this.customSelected = !0, this.scopedValue = Number(t);
+	}
+	handleQualityCommit(e) {
+		e.target === e.currentTarget && this.applyBehavior === N.Automatic && this.handleApply();
 	}
 	handleApply() {
-		this.loading || this.emit("cx-asset-link-format-quality-change", { detail: Number(this.scopedValue) });
+		this.loading || this.invalidValue || this.emit("cx-asset-link-format-quality-change", { detail: Number(this.scopedValue) });
 	}
 	onShowDetails(e) {
 		e.target !== this.base && e.stopPropagation();
@@ -1117,53 +1310,83 @@ var vt = J, yt = t`cx-details::part(base){border-bottom-width:0}`, Y = class ext
 	onHideDetails(e) {
 		e.target !== this.base && e.stopPropagation();
 	}
-	render() {
-		return e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: {
+	renderPresets() {
+		let t = !this.customSelected && this.items.some((e) => e.value === this.scopedValue) ? String(this.scopedValue) : "custom";
+		return e`<cx-select data-label=${this.localize.term("quality")} value=${t} ?disabled=${this.loading} hoist @cx-change=${this.handlePresetChange}>${b(this.items, (e) => e.value, (t) => e`<cx-option value=${String(t.value)} ?disabled=${t.disabled}>${t.label}
+            ${m(!!t.description, () => e`<span slot="help-text">${t.description}</span>`)}</cx-option>`)}<cx-divider></cx-divider><cx-option value="custom"><cx-icon slot="prefix" name="edit"></cx-icon>${this.localize.term("custom")}<span slot="help-text">${this.localize.term("qualityHelpText")}</span></cx-option></cx-select>`;
+	}
+	renderSummary() {
+		return e`<cx-space class="asset-link-format__quality-summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space>`;
+	}
+	renderApplyButton() {
+		return e`<cx-button class="asset-link-format__quality-apply" data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`;
+	}
+	renderContent() {
+		let t = this.items.length === 0 || this.customSelected || !this.items.some((e) => e.value === this.scopedValue);
+		return e`<cx-space class="asset-link-format__quality-content" direction="vertical" spacing="small">${m(this.items.length > 0, () => this.renderPresets())}
+        ${m(t, () => e`<cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: {
 			mask: Number,
 			max: 100,
-			min: 1
-		} }} value=${this.scopedValue.toString()} style=${g({ flex: "1" })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+			min: 1,
+			radix: ".",
+			scale: 0
+		} }} value=${this.scopedValue.toString()} style=${g({ flex: "1" })} @cx-input=${this.handleQualityChange} @cx-change=${this.handleQualityCommit}></cx-input></cx-tooltip>${m(this.applyBehavior === N.Legacy, () => this.renderApplyButton())}</cx-space>`)}
+        ${m(this.applyBehavior === N.Manual, () => this.renderApplyButton())}</cx-space>`;
+	}
+	render() {
+		return this.inline ? e`<div class="asset-link-format__quality-inline">${this.renderSummary()}
+          ${this.renderContent()}</div>` : e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><div slot="summary">${this.renderSummary()}</div>${this.renderContent()}</cx-details>`;
 	}
 };
-a([c(".details"), o("design:type", E === void 0 ? Object : E)], Y.prototype, "base", void 0), a([r({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], K.prototype, "base", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], Y.prototype, "open", void 0), a([r({
+}), o("design:type", Object)], K.prototype, "open", void 0), a([r({
+	reflect: !0,
+	type: Boolean
+}), o("design:type", Object)], K.prototype, "inline", void 0), a([r({
+	attribute: "apply-behavior",
+	reflect: !0,
+	type: String
+}), o("design:type", Object)], K.prototype, "applyBehavior", void 0), a([r({
 	reflect: !0,
 	type: Number
-}), o("design:type", Object)], Y.prototype, "value", void 0), a([r({
+}), o("design:type", Object)], K.prototype, "value", void 0), a([r({
+	attribute: !1,
+	type: Array
+}), o("design:type", Array)], K.prototype, "items", void 0), a([i(), o("design:type", Object)], K.prototype, "customSelected", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], Y.prototype, "loading", void 0), a([i(), o("design:type", Object)], Y.prototype, "scopedValue", void 0), a([
+}), o("design:type", Object)], K.prototype, "loading", void 0), a([i(), o("design:type", Object)], K.prototype, "scopedValue", void 0), a([
 	f("value"),
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
-], Y.prototype, "handleValueChange", null), Y = a([u("cx-asset-link-format-quality")], Y);
-var bt = Y, xt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.resize__unit-select{width:120px}.resize__input-group{flex:1;display:flex}`, X = class extends s {
+], K.prototype, "handleValueChange", null), K = a([u("cx-asset-link-format-quality")], K);
+var It = K, Lt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.resize__unit-select{width:120px}.resize__input-group{flex:1;display:flex}`, q = class extends s {
 	constructor(...e) {
-		super(...e), this.localize = new d(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = D.Pixel, this.lastAppliedSetting = {
-			[D.Pixel]: {
+		super(...e), this.localize = new d(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = k.Pixel, this.lastAppliedSetting = {
+			[k.Pixel]: {
 				height: 0,
 				width: 0
 			},
-			[D.AspectRatio]: {
+			[k.AspectRatio]: {
 				height: 1,
 				width: 1
 			}
 		}, this.loading = !1, this.noRatioModes = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
 	}
-	static #e = this.styles = [l, xt];
+	static #e = this.styles = [l, Lt];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-details": E,
+		"cx-details": T,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-input": oe,
-		"cx-option": S,
-		"cx-select": w,
-		"cx-space": C,
-		"cx-typography": b
+		"cx-input": se,
+		"cx-option": x,
+		"cx-select": C,
+		"cx-space": S,
+		"cx-typography": y
 	};
 	get disabledApply() {
 		return this.lastAppliedSetting[this.unit].width === this.width && this.lastAppliedSetting[this.unit].height === this.height;
@@ -1171,11 +1394,11 @@ var bt = Y, xt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 	async handleCropModeChange() {
 		let e = Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && this.maxWidth > 0 && this.maxHeight > 0;
 		if (this.keepAspectRatio) {
-			if (this.unit === D.AspectRatio && this.ratioWidth && this.ratioHeight) {
+			if (this.unit === k.AspectRatio && this.ratioWidth && this.ratioHeight) {
 				this.aspectRatio = this.ratioWidth / this.ratioHeight;
 				return;
 			}
-			if (this.unit === D.Pixel && !e && this.width && this.height) {
+			if (this.unit === k.Pixel && !e && this.width && this.height) {
 				this.aspectRatio = this.width / this.height;
 				return;
 			}
@@ -1198,15 +1421,14 @@ var bt = Y, xt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 		}
 	}
 	handleWidthChange(e) {
-		if (!e.target.value) {
+		let t = Number(e.target.value);
+		if (!e.target.value || !Number.isFinite(t)) {
 			this.invalidWidth = !0;
 			return;
 		}
-		this.invalidWidth = !1;
-		let t = Number(e.target.value);
-		this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1)), e.target.value = t.toString();
-		let n = this.unit === D.Pixel ? this.height : this.ratioHeight;
-		this.keepAspectRatio && (n = Math.min(Math.round(t / this.aspectRatio), this.maxHeight), this.invalidHeight = !1), this.emit("cx-asset-link-format-resize-change", { detail: {
+		this.invalidWidth = !1, this.unit === k.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1)), e.target.value = t.toString();
+		let n = this.unit === k.Pixel ? this.height : this.ratioHeight;
+		this.keepAspectRatio && (n = Math.max(Math.min(Math.round(t / this.aspectRatio), this.maxHeight), 1), this.invalidHeight = !1), this.emit("cx-asset-link-format-resize-change", { detail: {
 			height: n,
 			keepAspectRatio: this.keepAspectRatio,
 			unit: this.unit,
@@ -1214,15 +1436,14 @@ var bt = Y, xt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 		} });
 	}
 	handleHeightChange(e) {
-		if (!e.target.value) {
+		let t = Number(e.target.value);
+		if (!e.target.value || !Number.isFinite(t)) {
 			this.invalidHeight = !0;
 			return;
 		}
-		this.invalidHeight = !1;
-		let t = Number(e.target.value);
-		this.unit === D.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1)), e.target.value = t.toString();
-		let n = this.unit === D.Pixel ? this.width : this.ratioWidth;
-		this.keepAspectRatio && (n = Math.min(Math.round(t * this.aspectRatio), this.maxWidth), this.invalidWidth = !1), this.emit("cx-asset-link-format-resize-change", { detail: {
+		this.invalidHeight = !1, this.unit === k.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1)), e.target.value = t.toString();
+		let n = this.unit === k.Pixel ? this.width : this.ratioWidth;
+		this.keepAspectRatio && (n = Math.max(Math.min(Math.round(t * this.aspectRatio), this.maxWidth), 1), this.invalidWidth = !1), this.emit("cx-asset-link-format-resize-change", { detail: {
 			height: t,
 			keepAspectRatio: this.keepAspectRatio,
 			unit: this.unit,
@@ -1230,16 +1451,16 @@ var bt = Y, xt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 		} });
 	}
 	onUnitChange(e) {
-		e.target.value === D.AspectRatio ? this.emit("cx-asset-link-format-resize-change", { detail: {
-			height: this.lastAppliedSetting[D.AspectRatio].height,
+		e.target.value === k.AspectRatio ? this.emit("cx-asset-link-format-resize-change", { detail: {
+			height: this.lastAppliedSetting[k.AspectRatio].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: D.AspectRatio,
-			width: this.lastAppliedSetting[D.AspectRatio].width
+			unit: k.AspectRatio,
+			width: this.lastAppliedSetting[k.AspectRatio].width
 		} }) : this.emit("cx-asset-link-format-resize-change", { detail: {
-			height: this.lastAppliedSetting[D.Pixel].height,
+			height: this.lastAppliedSetting[k.Pixel].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: D.Pixel,
-			width: this.lastAppliedSetting[D.Pixel].width
+			unit: k.Pixel,
+			width: this.lastAppliedSetting[k.Pixel].width
 		} });
 	}
 	handleApply() {
@@ -1257,70 +1478,74 @@ var bt = Y, xt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 	}
 	handleAspectRatioClick() {
 		this.emit("cx-asset-link-format-resize-change", { detail: {
-			height: this.unit === D.Pixel ? this.height : this.ratioHeight,
+			height: this.unit === k.Pixel ? this.height : this.ratioHeight,
 			keepAspectRatio: !this.keepAspectRatio,
 			unit: this.unit,
-			width: this.unit === D.Pixel ? this.width : this.ratioWidth
+			width: this.unit === k.Pixel ? this.width : this.ratioWidth
 		} });
 	}
 	render() {
 		return e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: {
 			mask: Number,
-			min: 1
-		} }} value=${this.unit === D.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+			min: 1,
+			radix: ".",
+			scale: 0
+		} }} value=${this.unit === k.Pixel ? this.width.toString() : this.ratioWidth.toString()} @cx-input=${this.handleWidthChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 W
               </cx-typography></cx-input><cx-icon-button data-testid="cx-asset-link-format-resize-aspect-ratio" name=${this.keepAspectRatio ? "insert_link" : "link_off"} @click=${this.handleAspectRatioClick} style=${g({ color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0 })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: {
 			mask: Number,
-			min: 1
-		} }} value=${this.unit === D.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
+			min: 1,
+			radix: ".",
+			scale: 0
+		} }} value=${this.unit === k.Pixel ? this.height.toString() : this.ratioHeight.toString()} @cx-input=${this.handleHeightChange} required ?disabled=${this.loading}><cx-typography slot="prefix" variant="body3" part="input-label">
                 H
-              </cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${D.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${D.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`)}</cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${g({ marginLeft: "auto" })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+              </cx-typography></cx-input></div>${m(!this.noRatioModes, () => e`<cx-select data-testid="cx-asset-link-format-resize-unit" value=${this.unit} hoist class="resize__unit-select" @cx-change=${this.onUnitChange}><cx-option value=${k.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${k.AspectRatio}>${this.localize.term("aspectRatio")}</cx-option></cx-select>`)}</cx-space><cx-button data-testid="cx-asset-link-format-resize-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${g({ marginLeft: "auto" })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
 	}
 };
-a([c(".details"), o("design:type", E === void 0 ? Object : E)], X.prototype, "base", void 0), a([r({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], q.prototype, "base", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], X.prototype, "open", void 0), a([r({
+}), o("design:type", Boolean)], q.prototype, "open", void 0), a([r({
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], X.prototype, "width", void 0), a([r({
+}), o("design:type", Number)], q.prototype, "width", void 0), a([r({
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], X.prototype, "height", void 0), a([r({
+}), o("design:type", Number)], q.prototype, "height", void 0), a([r({
 	attribute: "max-width",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], X.prototype, "maxWidth", void 0), a([r({
+}), o("design:type", Number)], q.prototype, "maxWidth", void 0), a([r({
 	attribute: "max-height",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], X.prototype, "maxHeight", void 0), a([r({
+}), o("design:type", Number)], q.prototype, "maxHeight", void 0), a([r({
 	attribute: "ratio-width",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], X.prototype, "ratioWidth", void 0), a([r({
+}), o("design:type", Number)], q.prototype, "ratioWidth", void 0), a([r({
 	attribute: "ratio-height",
 	reflect: !0,
 	type: Number
-}), o("design:type", Number)], X.prototype, "ratioHeight", void 0), a([r({
+}), o("design:type", Number)], q.prototype, "ratioHeight", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", D === void 0 ? Object : D)], X.prototype, "unit", void 0), a([r({
+}), o("design:type", k === void 0 ? Object : k)], q.prototype, "unit", void 0), a([r({
 	attribute: "last-applied-setting",
 	reflect: !1,
 	type: Object
-}), o("design:type", typeof Record > "u" ? Object : Record)], X.prototype, "lastAppliedSetting", void 0), a([r({
+}), o("design:type", typeof Record > "u" ? Object : Record)], q.prototype, "lastAppliedSetting", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], X.prototype, "loading", void 0), a([r({
+}), o("design:type", Boolean)], q.prototype, "loading", void 0), a([r({
 	attribute: "no-ratio-modes",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], X.prototype, "noRatioModes", void 0), a([r({
+}), o("design:type", Boolean)], q.prototype, "noRatioModes", void 0), a([r({
 	attribute: "keep-aspect-ratio",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], X.prototype, "keepAspectRatio", void 0), a([i(), o("design:type", Boolean)], X.prototype, "invalidWidth", void 0), a([i(), o("design:type", Boolean)], X.prototype, "invalidHeight", void 0), a([i(), o("design:type", Number)], X.prototype, "aspectRatio", void 0), a([
+}), o("design:type", Boolean)], q.prototype, "keepAspectRatio", void 0), a([i(), o("design:type", Boolean)], q.prototype, "invalidWidth", void 0), a([i(), o("design:type", Boolean)], q.prototype, "invalidHeight", void 0), a([i(), o("design:type", Number)], q.prototype, "aspectRatio", void 0), a([
 	f("cropMode", { waitUntilFirstUpdate: !0 }),
 	f("maxWidth", { waitUntilFirstUpdate: !0 }),
 	f("maxHeight", { waitUntilFirstUpdate: !0 }),
@@ -1328,25 +1553,25 @@ a([c(".details"), o("design:type", E === void 0 ? Object : E)], X.prototype, "ba
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", Promise)
-], X.prototype, "handleCropModeChange", null), a([
+], q.prototype, "handleCropModeChange", null), a([
 	f("open", { waitUntilFirstUpdate: !0 }),
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", Promise)
-], X.prototype, "handleOpenChange", null), X = a([u("cx-asset-link-format-resize")], X);
-var St = X, Ct = t`cx-details::part(base){border-bottom-width:0}`, Z = class extends s {
+], q.prototype, "handleOpenChange", null), q = a([u("cx-asset-link-format-resize")], q);
+var Rt = q, zt = t`cx-details::part(base){border-bottom-width:0}.asset-link-format__rotation-inline{padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__rotation-inline .asset-link-format__rotation-summary{margin-block-end:var(--cx-spacing-small)}`, J = class extends s {
 	constructor(...e) {
-		super(...e), this.localize = new d(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
+		super(...e), this.localize = new d(this), this.open = !1, this.inline = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
 	}
-	static #e = this.styles = [l, Ct];
+	static #e = this.styles = [l, zt];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-button-group": ie,
-		"cx-details": E,
+		"cx-button-group": ae,
+		"cx-details": T,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-space": C,
-		"cx-typography": b
+		"cx-space": S,
+		"cx-typography": y
 	};
 	handleOpenChange() {
 		this.open || this.emit("cx-asset-link-format-rotation-change", { detail: this.lastAppliedValue });
@@ -1369,54 +1594,66 @@ var St = X, Ct = t`cx-details::part(base){border-bottom-width:0}`, Z = class ext
 	handleApply() {
 		this.value === 360 || this.value === -360 || this.loading || this.emit("cx-asset-link-format-rotation-apply", { detail: this.value });
 	}
-	render() {
-		return e`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: {
+	renderSummary() {
+		return e`<cx-space class="asset-link-format__rotation-summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">${this.localize.term("rotate")}</cx-typography></cx-space>`;
+	}
+	renderControls() {
+		return e`<cx-space class="asset-link-format__rotation-controls" spacing="small"><cx-button-group label=${this.localize.term("rotate")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("rotateCounterclockwise")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("rotateClockwise")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: {
 			mask: Number,
 			max: 360,
 			min: -360,
+			radix: ".",
+			scale: 0,
 			signed: !0
 		} }} ?disabled=${this.loading} style=${g({
 			flex: "none",
 			width: "80px"
-		})} @cx-input=${this.handleRotationChange}></cx-input><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === this.lastAppliedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+		})} @cx-input=${this.handleRotationChange}></cx-input>${m(!this.inline, () => e`<cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === this.lastAppliedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button>`)}</cx-space>`;
+	}
+	render() {
+		return this.inline ? e`<div class="asset-link-format__rotation-inline">${this.renderSummary()}
+          ${this.renderControls()}</div>` : e`<cx-details class="details" ?open=${this.open}><div slot="summary">${this.renderSummary()}</div>${this.renderControls()}</cx-details>`;
 	}
 };
-a([c(".details"), o("design:type", E === void 0 ? Object : E)], Z.prototype, "base", void 0), a([r({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], J.prototype, "base", void 0), a([r({
+	reflect: !0,
+	type: Boolean
+}), o("design:type", Object)], J.prototype, "open", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], Z.prototype, "open", void 0), a([r({
+}), o("design:type", Object)], J.prototype, "inline", void 0), a([r({
 	reflect: !0,
 	type: Number
-}), o("design:type", Object)], Z.prototype, "value", void 0), a([r({
+}), o("design:type", Object)], J.prototype, "value", void 0), a([r({
 	attribute: "default-value",
 	reflect: !0,
 	type: Number
-}), o("design:type", Object)], Z.prototype, "defaultValue", void 0), a([r({
+}), o("design:type", Object)], J.prototype, "defaultValue", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], Z.prototype, "loading", void 0), a([r({
+}), o("design:type", Object)], J.prototype, "loading", void 0), a([r({
 	attribute: "last-applied-value",
 	reflect: !0,
 	type: Number
-}), o("design:type", Object)], Z.prototype, "lastAppliedValue", void 0), a([
+}), o("design:type", Object)], J.prototype, "lastAppliedValue", void 0), a([
 	f("open", { waitUntilFirstUpdate: !0 }),
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
-], Z.prototype, "handleOpenChange", null), Z = a([u("cx-asset-link-format-rotation")], Z);
-var wt = Z, Tt = t`cx-details::part(base){border-bottom-width:0}`, Q = class extends s {
+], J.prototype, "handleOpenChange", null), J = a([u("cx-asset-link-format-rotation")], J);
+var Bt = J, Vt = t`cx-details::part(base){border-bottom-width:0}`, Y = class extends s {
 	constructor(...e) {
 		super(...e), this.localize = new d(this), this.open = !1, this.value = !1;
 	}
-	static #e = this.styles = [l, Tt];
+	static #e = this.styles = [l, Vt];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-checkbox": ae,
-		"cx-details": E,
+		"cx-checkbox": oe,
+		"cx-details": T,
 		"cx-icon": h,
-		"cx-space": C,
+		"cx-space": S,
 		"cx-tooltip": te,
-		"cx-typography": b
+		"cx-typography": y
 	};
 	handleApply(e) {
 		this.emit("cx-asset-link-format-metadata-change", { detail: e.target.checked });
@@ -1431,47 +1668,124 @@ var wt = Z, Tt = t`cx-details::part(base){border-bottom-width:0}`, Q = class ext
 		return e`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
 	}
 };
-a([c(".details"), o("design:type", E === void 0 ? Object : E)], Q.prototype, "base", void 0), a([r({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], Y.prototype, "base", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], Q.prototype, "open", void 0), a([r({
+}), o("design:type", Object)], Y.prototype, "open", void 0), a([r({
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Object)], Q.prototype, "value", void 0), Q = a([u("cx-asset-link-format-metadata")], Q);
-var Et = Q, Dt, $ = class extends s {
-	static #e = Dt = this;
-	static #t = this.styles = [l, dt];
+}), o("design:type", Object)], Y.prototype, "value", void 0), Y = a([u("cx-asset-link-format-metadata")], Y);
+var Ht = Y, X, Ut = {
+	[j.Crop]: O.Crop,
+	[j.Dimensions]: O.Dimensions,
+	[j.Quality]: O.Quality,
+	[j.Resize]: O.Resize,
+	[j.Rotate]: O.Rotate
+}, Z = [
+	j.Proxy,
+	j.Crop,
+	j.Resize,
+	j.Rotate,
+	j.Quality,
+	j.Metadata
+], Wt = [
+	j.Proxy,
+	j.Dimensions,
+	...Z.slice(1)
+], Q = [
+	j.Dimensions,
+	j.Crop,
+	j.Resize,
+	j.Rotate,
+	j.Quality
+], $ = class extends s {
+	static #e = X = this;
+	static #t = this.styles = [l, wt];
 	static #n = this.dependencies = {
-		"cx-asset-link-format-crop": pt,
-		"cx-asset-link-format-extension": ht,
-		"cx-asset-link-format-metadata": Et,
-		"cx-asset-link-format-proxy": vt,
-		"cx-asset-link-format-quality": bt,
-		"cx-asset-link-format-resize": St,
-		"cx-asset-link-format-rotation": wt,
+		"cx-asset-link-format-crop": Et,
+		"cx-asset-link-format-dimensions": kt,
+		"cx-asset-link-format-extension": jt,
+		"cx-asset-link-format-metadata": Ht,
+		"cx-asset-link-format-proxy": Pt,
+		"cx-asset-link-format-quality": It,
+		"cx-asset-link-format-resize": Rt,
+		"cx-asset-link-format-rotation": Bt,
 		"cx-button": _,
-		"cx-space": C,
-		"cx-typography": b
+		"cx-icon": h,
+		"cx-icon-button": p,
+		"cx-space": S,
+		"cx-switch": ve,
+		"cx-typography": y,
+		"cx-visually-hidden": ce
 	};
 	static getTransformExtension(e) {
-		return !e || st(e) ? e : "jpg";
+		return !e || bt(e) ? e : "jpg";
+	}
+	static uniqueTransformations(e) {
+		return [...new Map(e.map((e) => [e.key, e])).values()];
+	}
+	static orderTransformations(e, t) {
+		let n = t.map((e) => Ut[e]).filter((e) => e !== void 0), r = e.filter((e) => n.includes(e.key)).sort((e, t) => n.indexOf(e.key) - n.indexOf(t.key)), i = 0;
+		return e.map((e) => n.includes(e.key) ? r[i++] : e);
+	}
+	static getDimensionsPresetSize(e) {
+		let t = /^(\d+)\s*[x×_]\s*(\d+)$/i.exec(e.trim()), n = Number(t?.[1]), r = Number(t?.[2]);
+		return n >= 1 && r >= 1 ? {
+			height: r,
+			width: n
+		} : void 0;
+	}
+	static getDimensionsSize(e) {
+		if (e?.mode === D.Preset) return X.getDimensionsPresetSize(e.value);
+		if (e?.mode === D.Custom && e.unit === A.Pixel && Number.isInteger(e.width) && Number.isInteger(e.height) && e.width >= 1 && e.height >= 1) return {
+			height: e.height,
+			width: e.width
+		};
+	}
+	static getSizeBoundAfterStep(e, t) {
+		let { height: n = 0, rotation: r = 0, unit: i, width: a = 0 } = t.value, o = Math.round(a) >= 1 && Math.round(n) >= 1;
+		switch (t.key) {
+			case O.Resize: return i !== k.AspectRatio && o ? {
+				height: Math.round(n),
+				width: Math.round(a)
+			} : void 0;
+			case O.Dimensions: return o ? {
+				height: Math.min(e?.height ?? Infinity, Math.round(n)),
+				width: Math.min(e?.width ?? Infinity, Math.round(a))
+			} : e;
+			case O.Rotate: {
+				if (!e) return;
+				let t = r * Math.PI / 180, n = Math.abs(Math.cos(t)), i = Math.abs(Math.sin(t));
+				return {
+					height: Math.ceil(e.width * i + e.height * n - 1e-9),
+					width: Math.ceil(e.width * n + e.height * i - 1e-9)
+				};
+			}
+			default: return e;
+		}
+	}
+	get canReorder() {
+		return this.reorderable && !this.asset;
+	}
+	get isFormatsLayout() {
+		return this.layout === ge.Formats;
 	}
 	get hasUnfrozenTransformations() {
 		return !(this.transformations.length === 0 || this.frozenIndex !== void 0 && this.frozenIndex >= this.transformations.length - 1);
 	}
 	get lastAppliedCropUnit() {
-		return this.transformations.findLast((e) => e.key === k.Crop)?.value.unit ?? D.Pixel;
+		return this.transformations.findLast((e) => e.key === O.Crop)?.value.unit ?? k.Pixel;
 	}
 	get lastAppliedCropFocusMode() {
-		return this.transformations.findLast((e) => e.key === k.Crop)?.value.focusMode ?? "manual";
+		return this.transformations.findLast((e) => e.key === O.Crop)?.value.focusMode ?? "manual";
 	}
 	get lastAppliedCropPosition() {
-		return this.transformations.findLast((e) => e.key === k.Crop)?.value.position ?? v.CenterCenter;
+		return this.transformations.findLast((e) => e.key === O.Crop)?.value.position ?? v.CenterCenter;
 	}
 	get disabledCropApply() {
 		if (!this.asset && this.cropSize.unit !== this.lastAppliedCropUnit) return !1;
-		if (this.cropSize.unit === D.AspectRatio && !this.asset) {
-			let e = this.lastCropSize[D.AspectRatio];
+		if (this.cropSize.unit === k.AspectRatio && !this.asset) {
+			let e = this.lastCropSize[k.AspectRatio];
 			return this.cropSize.ratioWidth === e.width && this.cropSize.ratioHeight === e.height && this.cropSize.focusMode === this.lastAppliedCropFocusMode && this.cropSize.position === this.lastAppliedCropPosition;
 		}
 		if (!this.asset && this.cropSize.focusMode !== this.lastAppliedCropFocusMode || !this.asset && this.cropSize.position !== this.lastAppliedCropPosition) return !1;
@@ -1482,58 +1796,79 @@ var Et = Q, Dt, $ = class extends s {
 			"width",
 			"x",
 			"y"
-		]) if (this.cropSize[e] !== this.lastCropSize[D.Pixel][e]) return !1;
+		]) if (this.cropSize[e] !== this.lastCropSize[k.Pixel][e]) return !1;
 		return !0;
 	}
 	get formats() {
 		return this.proxies?.filter((e) => !e.cdnName) || [];
 	}
+	get activeParts() {
+		let e = new Set(Object.values(j)), t = /* @__PURE__ */ new Set();
+		for (let n of this.parts) e.has(n) && t.add(n);
+		return [...t];
+	}
 	get imageSize() {
 		return {
 			height: this.selectedFormat?.height ?? 0,
 			width: this.selectedFormat?.width ?? 0
 		};
 	}
+	get stepsBeforeCrop() {
+		let e = this.transformations.findIndex((e) => e.key === O.Crop);
+		if (e >= 0) return this.transformations.slice(0, e);
+		if (!this.canReorder) return this.transformations;
+		let t = {
+			key: O.Crop,
+			value: {}
+		}, n = X.orderTransformations([...this.transformations, t], this.activeParts);
+		return n.slice(0, n.indexOf(t));
+	}
+	get cropMaxSize() {
+		return this.stepsBeforeCrop.reduce(X.getSizeBoundAfterStep, void 0) ?? {
+			height: Infinity,
+			width: Infinity
+		};
+	}
 	get lastCropSize() {
 		if (!this.asset) {
-			let e = this.transformations.findLast((e) => e.key === k.Crop);
-			if (e?.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
-				[D.AspectRatio]: {
+			let e = this.transformations.findLast((e) => e.key === O.Crop);
+			if (e?.value.unit === k.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
+				[k.AspectRatio]: {
 					height: e.value.ratioHeight,
 					percentageHeight: 100,
 					percentageWidth: 100,
-					unit: D.AspectRatio,
+					unit: k.AspectRatio,
 					width: e.value.ratioWidth,
 					x: 0,
 					y: 0
 				},
-				[D.Pixel]: {
+				[k.Pixel]: {
 					height: 1,
 					percentageHeight: 100,
 					percentageWidth: 100,
-					unit: D.Pixel,
+					unit: k.Pixel,
 					width: 1,
 					x: 0,
 					y: 0
 				}
 			};
 			if (e?.value.width && e?.value.height) {
-				let { height: t, width: n, x: r = 0, y: i = 0 } = e.value, a = y(n, t);
+				let { height: t, width: n, x: r = 0, y: i = 0 } = e.value, a = re(n, t);
 				return {
-					[D.AspectRatio]: {
+					[k.AspectRatio]: {
 						height: a.height,
 						percentageHeight: 100,
 						percentageWidth: 100,
-						unit: D.AspectRatio,
+						unit: k.AspectRatio,
 						width: a.width,
 						x: 0,
 						y: 0
 					},
-					[D.Pixel]: {
+					[k.Pixel]: {
 						height: t,
 						percentageHeight: 100,
 						percentageWidth: 100,
-						unit: D.Pixel,
+						unit: k.Pixel,
 						width: n,
 						x: r,
 						y: i
@@ -1541,25 +1876,25 @@ var Et = Q, Dt, $ = class extends s {
 				};
 			}
 		}
-		let e = this.lastImageSize.width && this.lastImageSize.height ? y(this.lastImageSize.width, this.lastImageSize.height) : {
+		let e = this.lastImageSize.width && this.lastImageSize.height ? re(this.lastImageSize.width, this.lastImageSize.height) : {
 			height: 1,
 			width: 1
 		};
 		return {
-			[D.AspectRatio]: {
+			[k.AspectRatio]: {
 				height: e.height,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: D.AspectRatio,
+				unit: k.AspectRatio,
 				width: e.width,
 				x: 0,
 				y: 0
 			},
-			[D.Pixel]: {
+			[k.Pixel]: {
 				height: this.lastImageSize.height,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: D.Pixel,
+				unit: k.Pixel,
 				width: this.lastImageSize.width,
 				x: 0,
 				y: 0
@@ -1568,57 +1903,57 @@ var Et = Q, Dt, $ = class extends s {
 	}
 	get lastResizeSize() {
 		if (!this.asset) {
-			let e = this.transformations.findLast((e) => e.key === k.Resize);
-			if (e?.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
-				[D.AspectRatio]: {
+			let e = this.transformations.findLast((e) => e.key === O.Resize);
+			if (e?.value.unit === k.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
+				[k.AspectRatio]: {
 					height: e.value.ratioHeight,
-					unit: D.AspectRatio,
+					unit: k.AspectRatio,
 					width: e.value.ratioWidth
 				},
-				[D.Pixel]: {
+				[k.Pixel]: {
 					height: 1,
-					unit: D.Pixel,
+					unit: k.Pixel,
 					width: 1
 				}
 			};
 			if (e?.value.width && e?.value.height) {
-				let { height: t, width: n } = e.value, r = y(n, t);
+				let { height: t, width: n } = e.value, r = re(n, t);
 				return {
-					[D.AspectRatio]: {
+					[k.AspectRatio]: {
 						height: r.height,
-						unit: D.AspectRatio,
+						unit: k.AspectRatio,
 						width: r.width
 					},
-					[D.Pixel]: {
+					[k.Pixel]: {
 						height: t,
-						unit: D.Pixel,
+						unit: k.Pixel,
 						width: n
 					}
 				};
 			}
 		}
-		let e = this.lastImageSize.width && this.lastImageSize.height ? y(this.lastImageSize.width, this.lastImageSize.height) : {
+		let e = this.lastImageSize.width && this.lastImageSize.height ? re(this.lastImageSize.width, this.lastImageSize.height) : {
 			height: 1,
 			width: 1
 		};
 		return {
-			[D.AspectRatio]: {
+			[k.AspectRatio]: {
 				height: e.height,
-				unit: D.AspectRatio,
+				unit: k.AspectRatio,
 				width: e.width
 			},
-			[D.Pixel]: {
+			[k.Pixel]: {
 				height: this.lastImageSize.height,
-				unit: D.Pixel,
+				unit: k.Pixel,
 				width: this.lastImageSize.width
 			}
 		};
 	}
 	get lastRotation() {
-		return this.asset ? 0 : this.transformations.findLast((e) => e.key === k.Rotate)?.value.rotation ?? 0;
+		return this.asset ? 0 : this.transformations.findLast((e) => e.key === O.Rotate)?.value.rotation ?? 0;
 	}
 	get transformationString() {
-		return T({
+		return w({
 			asset: this.asset,
 			baseUrl: "",
 			parameters: this.parameters,
@@ -1627,7 +1962,7 @@ var Et = Q, Dt, $ = class extends s {
 		}).replace(/\/t\//g, "");
 	}
 	constructor() {
-		super(), this.localize = new d(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
+		super(), this.localize = new d(this), this.initialParts = [...Z], this.sortableRevision = 0, this.dragPreviousSibling = null, this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
 			{
 				label: "Free",
 				value: "free"
@@ -1686,7 +2021,7 @@ var Et = Q, Dt, $ = class extends s {
 				label: "Smart Swatch",
 				value: "SmartSwatch"
 			}
-		], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.defaultProxy = "", this.canAutoFormat = !1, this.autoFormat = !1, this.useCustomExtension = !1, this.noMetadata = !1, this.noFormat = !1, this.noCrop = !1, this.noResize = !1, this.noRotate = !1, this.lastImageSize = {
+		], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.defaultProxy = "", this.canAutoFormat = !1, this.autoFormat = !1, this.useCustomExtension = !1, this.parts = this.initialParts, this.layout = ge.Accordion, this.cropEnabled = !1, this.reorderable = !1, this.dimensionsItems = [], this.qualityItems = [], this.canCustomDimensions = !1, this.lastImageSize = {
 			height: 0,
 			width: 0
 		}, this.hideHeader = !1, this.canReset = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
@@ -1694,7 +2029,7 @@ var Et = Q, Dt, $ = class extends s {
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
+			unit: k.Pixel,
 			width: 1
 		}, this.cropSize = {
 			cropMode: "free",
@@ -1706,20 +2041,23 @@ var Et = Q, Dt, $ = class extends s {
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
+			unit: k.Pixel,
 			width: 1,
 			x: 0,
 			y: 0
 		}, this.rotation = 0, this.defaultSize = {
 			height: 0,
 			width: 0
-		}, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0, this.apiGetTransformAssetLink = Ye, this.apiGetCropFocusMode = et, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
+		}, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0, this.reorderAnnouncement = "", this.orderUndo = [], this.apiGetTransformAssetLink = ct, this.apiGetCropFocusMode = pt, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
 	}
 	runConnectedCallback() {
-		this.hasUpdated && (this.handleCropperSelectorChange(), this.cropperElement && (this.cropperElement.addEventListener("cx-cropper-crop-complete", this.onCropComplete), this.cropperElement.addEventListener("cx-cropper-crop-drag-start", this.onCropDragStart)));
+		this.hasUpdated && (this.syncSortable(), this.handleCropperSelectorChange(), this.cropperElement && (this.cropperElement.addEventListener("cx-cropper-crop-complete", this.onCropComplete), this.cropperElement.addEventListener("cx-cropper-crop-drag-start", this.onCropDragStart)));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.cropperElement && (this.cropperElement.removeEventListener("cx-cropper-crop-complete", this.onCropComplete), this.cropperElement.removeEventListener("cx-cropper-crop-drag-start", this.onCropDragStart));
+		super.disconnectedCallback(), this.sortableRevision++, this.sortable?.destroy(), this.sortable = void 0, this.cropperElement && (this.cropperElement.removeEventListener("cx-cropper-crop-complete", this.onCropComplete), this.cropperElement.removeEventListener("cx-cropper-crop-drag-start", this.onCropDragStart));
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("dimensionsItems") && this.syncSelectedDimensions(!1);
 	}
 	updated(e) {
 		if ((e.has("forCropper") || e.has("queryElement")) && this.handleCropperSelectorChange(), e.has("asset") && this.handleAssetChange(), e.has("proxies") && this.handleProxiesChange(), this.autoFormat && (e.has("asset") || e.has("proxies"))) {
@@ -1729,7 +2067,7 @@ var Et = Q, Dt, $ = class extends s {
 		if (e.has("activeSetting") && this.handleActiveSettingChange(), e.has("selectedFormat") && this.handleSelectedFormatChange(), e.has("resizeSize") && this.handleResizeSizeChange(), e.has("cropSize") && this.handleCropSizeChange(), e.has("rotation") && this.handleRotationChange(), e.has("cropperElement") && this.handleCropperElementChange(), e.has("selectedFormat")) {
 			if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === e.get("selectedFormat")?.extension) return;
 			this.loading = !0, this.requestTransformAsset().then((e) => {
-				this.loading = !1, e?.relativePath && this.selectedFormat && (this.lastAction === k.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+				this.loading = !1, e?.relativePath && this.selectedFormat && (this.lastAction === O.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
 					height: e.height,
 					width: e.width
 				}, this.selectedFormat = {
@@ -1739,7 +2077,7 @@ var Et = Q, Dt, $ = class extends s {
 					width: e.width
 				});
 			});
-			let t = T({
+			let t = w({
 				asset: this.asset,
 				baseUrl: "",
 				extension: this.selectedFormat.extension,
@@ -1763,7 +2101,7 @@ var Et = Q, Dt, $ = class extends s {
 	get transformRequestOptions() {
 		return {
 			assetId: this.asset?.id ?? "",
-			extension: Dt.getTransformExtension(this.selectedFormat?.extension ?? ""),
+			extension: X.getTransformExtension(this.selectedFormat?.extension ?? ""),
 			format: this.proxies?.find((e) => e.id === this.selectedProxy)?.proxyName ?? "",
 			siteUrl: this.baseUrl,
 			token: this.token,
@@ -1793,50 +2131,81 @@ var Et = Q, Dt, $ = class extends s {
 		this.frozenIndex = this.transformations.length - 1;
 	}
 	upsertTransformation(e) {
+		this.asset || (this.transformations = X.uniqueTransformations(this.transformations));
 		let t = this.transformations.findIndex((t) => t.key === e.key);
 		if (t >= 0) {
 			let n = [...this.transformations];
 			n[t] = e, this.transformations = n;
 		} else this.transformations = [...this.transformations, e];
+		this.canReorder && (this.transformations = X.orderTransformations(this.transformations, this.activeParts));
+	}
+	isCropPanelSize(e) {
+		let { height: t, ratioHeight: n, ratioWidth: r, unit: i = k.Pixel, width: a } = e.value;
+		return i === this.cropSize.unit ? i === k.AspectRatio ? r === this.cropSize.ratioWidth && n === this.cropSize.ratioHeight : a === this.cropSize.width && t === this.cropSize.height : !1;
+	}
+	capCropToMaxSize() {
+		let e = this.transformations.find((e) => e.key === O.Crop);
+		if (this.asset || !e || (e.value.unit ?? k.Pixel) !== k.Pixel) return;
+		let { height: t = 0, width: n = 0 } = e.value, r = this.cropMaxSize;
+		if (n <= r.width && t <= r.height) return;
+		let i = Math.min(t, r.height), a = Math.min(n, r.width), o = this.isCropPanelSize(e) && n * i === t * a;
+		this.cropSize = {
+			...this.cropSize,
+			cropMode: o ? this.cropSize.cropMode : "free",
+			height: i,
+			width: a
+		}, this.upsertTransformation({
+			...e,
+			value: {
+				...e.value,
+				height: i,
+				width: a
+			}
+		});
 	}
-	async handleTransformationsChange() {
-		if (await this.updateComplete, !this.asset) {
-			this.emit("cx-asset-link-format-change", { detail: T({
+	async handleTransformationsChange(e) {
+		let t = e, n = this.canReorder && t !== void 0 && t.length === this.transformations.length && t.every((e) => this.transformations.includes(e));
+		if (!this.asset) {
+			let e = X.uniqueTransformations(this.transformations), t = this.canReorder ? X.orderTransformations(e, this.activeParts) : e;
+			(t.length !== this.transformations.length || t.some((e, t) => e !== this.transformations[t])) && (this.transformations = t);
+		}
+		if (this.syncSelectedDimensions(), await this.updateComplete, !this.asset) {
+			if (this.emit("cx-asset-link-format-change", { detail: w({
 				asset: this.asset,
 				baseUrl: "",
 				options: { omitZeroXY: !0 },
 				parameters: this.parameters,
 				transformations: this.transformations,
 				useSession: this.useSession
-			}).replace(/\/t\//g, "") });
-			let e = this.transformations.findLast((e) => e.key === k.Crop && (e.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width && e.value.height));
-			if (e?.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) {
-				let { focusMode: t, position: n, ratioHeight: r, ratioWidth: i } = e.value;
+			}).replace(/\/t\//g, "") }), n) return;
+			let e = this.transformations.findLast((e) => e.key === O.Crop && (e.value.unit === k.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width && e.value.height)), t = e && this.isCropPanelSize(e) ? this.cropSize.cropMode : "free";
+			if (e?.value.unit === k.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) {
+				let { focusMode: n, position: r, ratioHeight: i, ratioWidth: a } = e.value;
 				this.cropSize = {
 					...this.cropSize,
-					cropMode: "free",
-					focusMode: t ?? "manual",
+					cropMode: t,
+					focusMode: n ?? "manual",
 					percentageHeight: 100,
 					percentageWidth: 100,
-					position: n ?? v.CenterCenter,
-					ratioHeight: r,
-					ratioWidth: i,
-					unit: D.AspectRatio
+					position: r ?? v.CenterCenter,
+					ratioHeight: i,
+					ratioWidth: a,
+					unit: k.AspectRatio
 				};
 			} else if (e) {
-				let { focusMode: t, height: n, position: r, unit: i, width: a, x: o = 0, y: s = 0 } = e.value;
+				let { focusMode: n, height: r, position: i, unit: a, width: o, x: s = 0, y: c = 0 } = e.value;
 				this.cropSize = {
 					...this.cropSize,
-					cropMode: "free",
-					focusMode: t ?? "manual",
-					height: n,
+					cropMode: t,
+					focusMode: n ?? "manual",
+					height: r,
 					percentageHeight: 100,
 					percentageWidth: 100,
-					position: r ?? v.CenterCenter,
-					unit: i ?? D.Pixel,
-					width: a,
-					x: o,
-					y: s
+					position: i ?? v.CenterCenter,
+					unit: a ?? k.Pixel,
+					width: o,
+					x: s,
+					y: c
 				};
 			} else this.cropSize = {
 				...this.cropSize,
@@ -1846,46 +2215,46 @@ var Et = Q, Dt, $ = class extends s {
 				percentageHeight: 0,
 				percentageWidth: 0,
 				position: v.CenterCenter,
-				unit: D.Pixel,
+				unit: k.Pixel,
 				width: 1,
 				x: 0,
 				y: 0
 			};
-			let t = this.transformations.findLast((e) => e.key === k.Resize && (e.value.unit === D.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width || e.value.height));
-			if (t?.value.unit === D.AspectRatio && t.value.ratioWidth && t.value.ratioHeight) {
-				let { ratioHeight: e, ratioWidth: n } = t.value;
+			let r = this.transformations.findLast((e) => e.key === O.Resize && (e.value.unit === k.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width || e.value.height));
+			if (r?.value.unit === k.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
+				let { ratioHeight: e, ratioWidth: t } = r.value;
 				this.resizeSize = {
 					...this.resizeSize,
 					ratioHeight: e,
-					ratioWidth: n,
-					unit: D.AspectRatio
+					ratioWidth: t,
+					unit: k.AspectRatio
 				};
-			} else if (t) {
-				let { height: e = 0, unit: n, width: r = 0 } = t.value;
+			} else if (r) {
+				let { height: e = 0, unit: t, width: n = 0 } = r.value;
 				this.resizeSize = {
 					...this.resizeSize,
 					height: e,
-					unit: n ?? D.Pixel,
-					width: r
+					unit: t ?? k.Pixel,
+					width: n
 				};
 			} else this.resizeSize = {
 				...this.resizeSize,
 				height: 1,
-				unit: D.Pixel,
+				unit: k.Pixel,
 				width: 1
 			};
-			let n = this.transformations.findLast((e) => e.key === k.Rotate);
-			this.rotation = n?.value.rotation ?? 0;
-			let r = this.transformations.findLast((e) => e.key === k.Quality)?.value.quality ?? 100, i = this.transformations.some((e) => e.key === k.Metadata);
+			let i = this.transformations.findLast((e) => e.key === O.Rotate);
+			this.rotation = i?.value.rotation ?? 0;
+			let a = this.transformations.findLast((e) => e.key === O.Quality)?.value.quality ?? 100, o = this.transformations.some((e) => e.key === O.Metadata);
 			this.selectedFormat = this.selectedFormat ? {
 				...this.selectedFormat,
-				keepMetadata: i,
-				quality: r
+				keepMetadata: o,
+				quality: a
 			} : {
 				extension: "",
 				height: 0,
-				keepMetadata: i,
-				quality: r,
+				keepMetadata: o,
+				quality: a,
 				rotation: 0,
 				url: "",
 				width: 0,
@@ -1896,43 +2265,43 @@ var Et = Q, Dt, $ = class extends s {
 		}
 		if (!this.selectedFormat) return;
 		this.loading = !0;
-		let e = await this.requestTransformAsset();
-		if (this.loading = !1, !e?.relativePath || !this.selectedFormat) return;
+		let r = await this.requestTransformAsset();
+		if (this.loading = !1, !r?.relativePath || !this.selectedFormat) return;
 		this.lastImageSize = {
-			height: e.height,
-			width: e.width
+			height: r.height,
+			width: r.width
 		}, this.resizeSize = {
-			height: e.height,
+			height: r.height,
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
-			width: e.width
+			unit: k.Pixel,
+			width: r.width
 		}, this.cropSize = {
 			cropMode: "free",
 			focusMode: "manual",
-			height: e.height,
+			height: r.height,
 			keepAspectRatio: this.cropSize.keepAspectRatio,
 			percentageHeight: 100,
 			percentageWidth: 100,
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
-			width: e.width,
+			unit: k.Pixel,
+			width: r.width,
 			x: 0,
 			y: 0
-		}, this.lastAction === k.Rotate && (this.rotation = 0), this.lastAction = void 0;
-		let t = this.transformations.some((e) => e.key === k.Metadata), n = this.transformations.findLast((e) => e.key === k.Quality);
+		}, this.lastAction === O.Rotate && (this.rotation = 0), this.lastAction = void 0;
+		let i = this.transformations.some((e) => e.key === O.Metadata), a = this.transformations.findLast((e) => e.key === O.Quality);
 		this.selectedFormat = {
 			...this.selectedFormat,
-			height: e.height,
-			keepMetadata: t,
-			quality: n?.value?.quality ?? this.selectedFormat.quality,
-			url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${e.relativePath}` : e.relativePath,
-			width: e.width
+			height: r.height,
+			keepMetadata: i,
+			quality: a?.value?.quality ?? this.selectedFormat.quality,
+			url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${r.relativePath}` : r.relativePath,
+			width: r.width
 		};
-		let r = T({
+		let o = w({
 			asset: this.asset,
 			baseUrl: "",
 			extension: this.selectedFormat.extension,
@@ -1940,7 +2309,7 @@ var Et = Q, Dt, $ = class extends s {
 			transformations: this.transformations,
 			useSession: this.useSession
 		});
-		this.emit("cx-asset-link-format-change", { detail: r });
+		this.emit("cx-asset-link-format-change", { detail: o });
 	}
 	handleCropperElementChange() {
 		this.cropperElement && (this.cropperElement.resizer = this.resizeSize, this.cropperElement.cropper = this.cropSize, this.cropperElement.rotation = this.rotation, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop", this.cropperElement.addEventListener("cx-cropper-crop-complete", this.onCropComplete), this.cropperElement.addEventListener("cx-cropper-crop-drag-start", this.onCropDragStart), this.cropperElement.loadable = !0);
@@ -1954,7 +2323,7 @@ var Et = Q, Dt, $ = class extends s {
 			height: Number.parseInt(this.asset.height, 10),
 			width: Number.parseInt(this.asset.width, 10)
 		});
-		let e = this.transformations.findLast((e) => e.key === k.Quality);
+		let e = this.transformations.findLast((e) => e.key === O.Quality);
 		this.selectedFormat = {
 			extension: this.asset.extension,
 			height: this.defaultSize.height,
@@ -1979,7 +2348,7 @@ var Et = Q, Dt, $ = class extends s {
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
+			unit: k.Pixel,
 			width: this.defaultSize.width,
 			x: 0,
 			y: 0
@@ -1998,7 +2367,7 @@ var Et = Q, Dt, $ = class extends s {
 		t.proxyName === "TRX" && (t.formatHeight = Number(this.asset.height), t.formatWidth = Number(this.asset.width));
 		let n = this.proxies?.find((t) => t.id === e);
 		n && (this.asset && n.proxyName === "TRX" && (n.formatHeight = Number(this.asset.height), n.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((e) => {
-			if (e.key === k.Crop) {
+			if (e.key === O.Crop) {
 				let r = e.value, i = r.width / n.formatWidth * t.formatWidth, a = r.height / n.formatHeight * t.formatHeight, o = r.x / n.formatWidth * t.formatWidth, s = r.y / n.formatHeight * t.formatHeight;
 				return {
 					...e,
@@ -2011,7 +2380,7 @@ var Et = Q, Dt, $ = class extends s {
 					}
 				};
 			}
-			if (e.key === k.Resize) {
+			if (e.key === O.Resize) {
 				let r = e.value, i = r.width / n.formatWidth * t.formatWidth, a = r.height / n.formatHeight * t.formatHeight;
 				return {
 					...e,
@@ -2032,24 +2401,24 @@ var Et = Q, Dt, $ = class extends s {
 		}, await this.updateComplete, this.cropSize = {
 			cropMode: "free",
 			focusMode: "manual",
-			height: this.lastCropSize[D.Pixel].height,
+			height: this.lastCropSize[k.Pixel].height,
 			keepAspectRatio: !0,
 			percentageHeight: 100,
 			percentageWidth: 100,
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
-			width: this.lastCropSize[D.Pixel].width,
+			unit: k.Pixel,
+			width: this.lastCropSize[k.Pixel].width,
 			x: 0,
 			y: 0
 		}, this.resizeSize = {
-			height: this.lastResizeSize[D.Pixel].height,
+			height: this.lastResizeSize[k.Pixel].height,
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
-			width: this.lastResizeSize[D.Pixel].width
+			unit: k.Pixel,
+			width: this.lastResizeSize[k.Pixel].width
 		};
 	}
 	handleLoadingChange() {
@@ -2067,19 +2436,96 @@ var Et = Q, Dt, $ = class extends s {
 	handleRotationChange() {
 		this.cropperElement && (this.cropperElement.rotation = this.rotation);
 	}
+	handlePartsChange() {
+		if (this.activeParts.some((e) => {
+			let t = e === j.Rotate ? "rotation" : e;
+			return this.activeSetting === `cx-asset-link-format-${t}`;
+		}) || (this.activeSetting = ""), this.canReorder) {
+			let e = X.orderTransformations(X.uniqueTransformations(this.transformations), this.activeParts);
+			(e.length !== this.transformations.length || e.some((e, t) => e !== this.transformations[t])) && (this.transformations = e);
+		}
+	}
+	handleReorderableChange() {
+		if (this.orderUndo = [], this.canReorder && this.parts === this.initialParts && this.transformations.length > 0) {
+			let e = X.uniqueTransformations(this.transformations).flatMap((e) => Z.filter((t) => Ut[t] === e.key)), t = [...e, ...Z.filter((t) => Ut[t] && !e.includes(t))], n = 0;
+			this.parts = Z.map((e) => Ut[e] ? t[n++] : e);
+		}
+		this.handlePartsChange(), this.syncSortable();
+	}
+	async syncSortable() {
+		let e = ++this.sortableRevision;
+		if (this.sortable?.destroy(), this.sortable = void 0, !this.canReorder) return;
+		await this.updateComplete;
+		let { default: t } = await import("./sortable.esm.BVU0_hc5.js").then((e) => e.n);
+		if (e !== this.sortableRevision || !this.isConnected || !this.canReorder) return;
+		let n = this.shadowRoot?.querySelector(".asset-link-format__panels");
+		n && (this.sortable = t.create(n, {
+			animation: 0,
+			direction: "vertical",
+			draggable: "[data-reorderable]",
+			handle: ".asset-link-format__drag-handle",
+			invertSwap: !0,
+			invertedSwapThreshold: .5,
+			onEnd: (e) => {
+				let t = e.item.dataset.part, r = [...n.querySelectorAll("[data-reorderable]")].map((e) => e.dataset.part);
+				this.dragPreviousSibling?.after(e.item), this.dragPreviousSibling = null, this.movePart(t, r.indexOf(t));
+			},
+			onStart: (e) => {
+				this.dragPreviousSibling = e.item.previousSibling;
+			}
+		}));
+	}
+	rememberOrder() {
+		this.orderUndo = [...this.orderUndo, {
+			autoFormat: this.autoFormat,
+			parts: [...this.activeParts],
+			selectedProxy: this.selectedProxy,
+			transformations: this.transformations.map((e) => ({
+				...e,
+				value: { ...e.value }
+			}))
+		}];
+	}
+	emitReorder() {
+		this.emit("cx-asset-link-format-reorder", { detail: {
+			parts: [...this.activeParts],
+			transformations: this.transformations.map((e) => ({
+				...e,
+				value: { ...e.value }
+			}))
+		} });
+	}
+	movePart(e, t) {
+		if (!this.canReorder || this.loading) return;
+		let n = this.activeParts.filter((e) => Q.includes(e)), r = n.indexOf(e);
+		if (r < 0 || t < 0 || t >= n.length || r === t) return;
+		this.rememberOrder(), n.splice(r, 1), n.splice(t, 0, e);
+		let i = 0;
+		this.parts = this.activeParts.map((e) => Q.includes(e) ? n[i++] : e);
+		let a = X.orderTransformations(this.transformations, this.parts);
+		a.some((e, t) => e !== this.transformations[t]) && (this.transformations = a), this.capCropToMaxSize(), this.reorderAnnouncement = `${this.localize.term(e)}: ${t + 1} / ${n.length}`, this.emitReorder(), this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector(`[data-part="${e}"] .asset-link-format__drag-handle`)?.focus();
+		});
+	}
+	handleReorderKeyDown(e) {
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+		e.preventDefault(), e.stopPropagation();
+		let t = e.currentTarget.closest("[data-part]")?.dataset.part, n = this.activeParts.filter((e) => Q.includes(e));
+		this.movePart(t, n.indexOf(t) + (e.key === "ArrowUp" ? -1 : 1));
+	}
 	handleActiveSettingChange() {
 		this.cropperElement && (this.resizeSize = {
-			height: this.lastResizeSize[D.Pixel].height,
+			height: this.lastResizeSize[k.Pixel].height,
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: D.Pixel,
-			width: this.lastResizeSize[D.Pixel].width
+			unit: k.Pixel,
+			width: this.lastResizeSize[k.Pixel].width
 		}, this.cropperElement.disabled = this.activeSetting !== "cx-asset-link-format-crop");
 	}
 	async handleRequestAutoCropSuggestion({ cropMode: e, focusMode: t, height: n, keepAspectRatio: r, percentageHeight: i, percentageWidth: a, ratioHeight: o, ratioWidth: s, unit: c, useCropMode: l, width: u }) {
 		if (!this.selectedFormat?.url || t === "manual") return;
-		this.loading = !0, this.lastAction = k.Crop;
+		this.loading = !0, this.lastAction = O.Crop;
 		let d = await this.apiGetCropFocusMode({
 			autoCropMode: t,
 			cropHeight: n,
@@ -2150,12 +2596,12 @@ var Et = Q, Dt, $ = class extends s {
 		this.activeSetting === e.target.localName && (this.activeSetting = "");
 	}
 	get autoResolvedProxyId() {
-		let e = pe(this.asset?.extension, this.asset?.size);
+		let e = he(this.asset?.extension, this.asset?.size);
 		return this.proxies?.find((t) => t.proxyName === e)?.id ?? "";
 	}
 	onProxyChange(e) {
 		let t = e.detail;
-		if (this.lastAction = k.Proxy, t.autoFormat) {
+		if (this.lastAction = O.Proxy, t.autoFormat) {
 			this.autoFormat = !0;
 			let e = this.autoResolvedProxyId;
 			e && (this.selectedProxy = e);
@@ -2171,7 +2617,7 @@ var Et = Q, Dt, $ = class extends s {
 		});
 		else {
 			let e = this.focusModes.find((e) => e.value === this.cropSize.focusMode)?.auto, n = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, i = this.cropSize.x, a = this.cropSize.y;
-			t === "free" ? (n = !1, r = "manual") : this.cropSize.unit === D.Pixel && !e && (i = 0, a = 0), e ? await this.handleRequestAutoCropSuggestion({
+			t === "free" ? (n = !1, r = "manual") : this.cropSize.unit === k.Pixel && !e && (i = 0, a = 0), e ? await this.handleRequestAutoCropSuggestion({
 				cropMode: t,
 				focusMode: r,
 				height: this.cropSize.height,
@@ -2186,31 +2632,32 @@ var Et = Q, Dt, $ = class extends s {
 				y: a
 			};
 		}
+		this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
 	}
-	onCropFocusModeChange(e) {
+	async onCropFocusModeChange(e) {
 		let { mode: t } = e.detail;
-		this.focusModes.find((e) => e.value === t)?.auto && this.selectedFormat?.url ? this.handleRequestAutoCropSuggestion({
+		this.focusModes.find((e) => e.value === t)?.auto && this.selectedFormat?.url ? await this.handleRequestAutoCropSuggestion({
 			focusMode: t,
 			height: this.cropSize.height,
 			width: this.cropSize.width
 		}) : this.cropSize = {
 			...this.cropSize,
 			focusMode: t
-		};
+		}, this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
 	}
 	onCropPositionChange(e) {
 		this.cropSize = {
 			...this.cropSize,
 			position: e.detail.position
-		};
+		}, this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
 	}
 	async onCropChange(e) {
 		let t = this.cropSize.unit;
-		if (e.detail.unit === D.AspectRatio) {
+		if (e.detail.unit === k.AspectRatio) {
 			let t = e.detail.width / e.detail.height, n = this.asset ? Math.min(Math.max(Math.round(this.cropSize.height * t), 0), this.resizeSize.width) : 0, r = this.asset ? Math.min(Math.max(Math.round(n / t), 0), this.resizeSize.height) : 0, i = this.asset ? r * 100 / this.selectedFormat.height : 100, a = this.asset ? n * 100 / this.selectedFormat.width : 100, o = this.cropSize.x, s = this.cropSize.y;
 			o + a > 100 && (o = 100 - a), s + i > 100 && (s = 100 - i);
 			let c = this.cropSize.cropMode;
-			this.cropModes.find((e) => e.value === c)?.auto && (c = "free"), e.detail.silent ? (this.cropSize.height = r, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = a, this.cropSize.ratioHeight = e.detail.height, this.cropSize.ratioWidth = e.detail.width, this.cropSize.unit = D.AspectRatio, this.cropSize.width = n) : this.cropSize = {
+			this.cropModes.find((e) => e.value === c)?.auto && (c = "free"), e.detail.silent ? (this.cropSize.height = r, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = a, this.cropSize.ratioHeight = e.detail.height, this.cropSize.ratioWidth = e.detail.width, this.cropSize.unit = k.AspectRatio, this.cropSize.width = n) : this.cropSize = {
 				...this.cropSize,
 				cropMode: c,
 				height: r,
@@ -2219,7 +2666,7 @@ var Et = Q, Dt, $ = class extends s {
 				percentageWidth: a,
 				ratioHeight: e.detail.height,
 				ratioWidth: e.detail.width,
-				unit: D.AspectRatio,
+				unit: k.AspectRatio,
 				width: n,
 				x: o,
 				y: s
@@ -2228,14 +2675,14 @@ var Et = Q, Dt, $ = class extends s {
 			let t = this.asset ? e.detail.height * 100 / this.selectedFormat.height : 100, n = this.asset ? e.detail.width * 100 / this.selectedFormat.width : 100, r = this.cropSize.x, i = this.cropSize.y;
 			r + n > 100 && (r = 100 - n), i + t > 100 && (i = 100 - t);
 			let a = this.cropSize.cropMode, o = this.cropModes.find((e) => e.value === a)?.auto;
-			(e.detail.breakAspectRatio || o) && (a = "free"), e.detail.silent ? (this.cropSize.cropMode = a, this.cropSize.height = e.detail.height, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = t, this.cropSize.percentageWidth = n, this.cropSize.unit = D.Pixel, this.cropSize.width = e.detail.width, this.cropSize.x = r, this.cropSize.y = i) : this.cropSize = {
+			(e.detail.breakAspectRatio || o) && (a = "free"), e.detail.silent ? (this.cropSize.cropMode = a, this.cropSize.height = e.detail.height, this.cropSize.keepAspectRatio = e.detail.keepAspectRatio, this.cropSize.percentageHeight = t, this.cropSize.percentageWidth = n, this.cropSize.unit = k.Pixel, this.cropSize.width = e.detail.width, this.cropSize.x = r, this.cropSize.y = i) : this.cropSize = {
 				...this.cropSize,
 				cropMode: a,
 				height: e.detail.height,
 				keepAspectRatio: e.detail.keepAspectRatio,
 				percentageHeight: t,
 				percentageWidth: n,
-				unit: D.Pixel,
+				unit: k.Pixel,
 				width: e.detail.width,
 				x: r,
 				y: i
@@ -2244,21 +2691,28 @@ var Et = Q, Dt, $ = class extends s {
 		t !== this.cropSize.unit && (this.cropSize = {
 			...this.cropSize,
 			cropMode: "free"
-		}, this.onCropChanged());
+		}, this.onCropChanged()), this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
 	}
 	async onCropChanged() {
 		this.focusModes.find((e) => e.value === this.cropSize.focusMode)?.auto && await this.handleRequestAutoCropSuggestion({
 			focusMode: this.cropSize.focusMode,
 			height: this.cropSize.height,
 			width: this.cropSize.width
-		});
+		}), this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
 	}
 	onCropApply(e) {
-		if (this.clearResetSnapshot(), this.lastAction = k.Crop, !this.asset) {
+		this.applyCropTransformation(e.detail);
+	}
+	applyCropTransformation(e = {
+		height: this.cropSize.height,
+		unit: this.cropSize.unit,
+		width: this.cropSize.width
+	}) {
+		if (this.clearResetSnapshot(), this.lastAction = O.Crop, !this.asset) {
 			let { focusMode: e, height: t, position: n, ratioHeight: r, ratioWidth: i, unit: a, width: o, x: s, y: c } = this.cropSize, l = this.focusModes.find((t) => t.value === e)?.auto ?? !1;
-			if (a === D.AspectRatio) {
+			if (a === k.AspectRatio) {
 				i && r && this.upsertTransformation({
-					key: k.Crop,
+					key: O.Crop,
 					value: {
 						focusMode: e,
 						isFocusModeAuto: l,
@@ -2270,8 +2724,8 @@ var Et = Q, Dt, $ = class extends s {
 				});
 				return;
 			}
-			(t || o) && this.upsertTransformation({
-				key: k.Crop,
+			(t || o) && Number.isFinite(t) && Number.isFinite(o) && this.upsertTransformation({
+				key: O.Crop,
 				value: {
 					focusMode: e,
 					height: t,
@@ -2285,13 +2739,13 @@ var Et = Q, Dt, $ = class extends s {
 			});
 			return;
 		}
-		let { height: t, mode: n, unit: r, width: i } = e.detail;
+		let { height: t, mode: n, unit: r, width: i } = e;
 		if (!this.cropperElement || !this.selectedFormat) return;
 		let a = this.cropSize.focusMode, o = this.focusModes.find((e) => e.value === a)?.auto ?? !1;
 		if (t && i && r) {
 			let e = i, s = t;
-			if (r === D.AspectRatio && (e = this.cropSize.percentageWidth * this.selectedFormat.width / 100, s = this.cropSize.percentageHeight * this.selectedFormat.height / 100), n) this.transformations = [...this.transformations, {
-				key: k.Crop,
+			if (r === k.AspectRatio && (e = this.cropSize.percentageWidth * this.selectedFormat.width / 100, s = this.cropSize.percentageHeight * this.selectedFormat.height / 100), n) this.transformations = [...this.transformations, {
+				key: O.Crop,
 				value: {
 					focusMode: a,
 					height: s,
@@ -2303,7 +2757,7 @@ var Et = Q, Dt, $ = class extends s {
 			else {
 				let t = this.cropSize.x / 100 * this.selectedFormat.width, n = this.cropSize.y / 100 * this.selectedFormat.height;
 				this.transformations = [...this.transformations, {
-					key: k.Crop,
+					key: O.Crop,
 					value: {
 						focusMode: a,
 						height: s,
@@ -2316,7 +2770,7 @@ var Et = Q, Dt, $ = class extends s {
 				}];
 			}
 		} else n && (this.transformations = [...this.transformations, {
-			key: k.Crop,
+			key: O.Crop,
 			value: {
 				focusMode: a,
 				isFocusModeAuto: o,
@@ -2325,8 +2779,8 @@ var Et = Q, Dt, $ = class extends s {
 		}]);
 	}
 	onResizeChange(e) {
-		if (e.detail.unit === D.AspectRatio) {
-			let t = e.detail.width / e.detail.height, n = Math.max(Math.round(this.lastResizeSize[D.Pixel].height * t), 0), r = Math.max(Math.round(n / t), 0);
+		if (e.detail.unit === k.AspectRatio) {
+			let t = e.detail.width / e.detail.height, n = Math.max(Math.round(this.lastResizeSize[k.Pixel].height * t), 0), r = Math.max(Math.round(n / t), 0);
 			this.resizeSize = {
 				...this.resizeSize,
 				height: r,
@@ -2346,11 +2800,12 @@ var Et = Q, Dt, $ = class extends s {
 	}
 	onResizeApply(e) {
 		let { height: t, unit: n, width: r } = e.detail;
-		if (this.clearResetSnapshot(), this.lastAction = k.Resize, !this.asset) {
-			if (n === D.AspectRatio) {
+		if (!Number.isFinite(r) || !Number.isFinite(t)) return;
+		if (this.clearResetSnapshot(), this.lastAction = O.Resize, !this.asset) {
+			if (n === k.AspectRatio) {
 				let { ratioHeight: e, ratioWidth: t } = this.resizeSize;
 				t && e && this.upsertTransformation({
-					key: k.Resize,
+					key: O.Resize,
 					value: {
 						ratioHeight: e,
 						ratioWidth: t,
@@ -2359,20 +2814,20 @@ var Et = Q, Dt, $ = class extends s {
 				});
 				return;
 			}
-			(t || r) && this.upsertTransformation({
-				key: k.Resize,
+			(t || r) && (this.upsertTransformation({
+				key: O.Resize,
 				value: {
 					height: t,
 					unit: n,
 					width: r
 				}
-			});
+			}), this.capCropToMaxSize());
 			return;
 		}
 		if (!this.selectedFormat) return;
 		let i = this.selectedFormat.width || this.defaultSize.width, a = this.selectedFormat.height || this.defaultSize.height, o = r, s = t;
-		this.resizeSize.unit === n ? n === D.AspectRatio && (o = Math.round(r / t * a), s = a) : (o = i, s = a), this.transformations = [...this.transformations, {
-			key: k.Resize,
+		this.resizeSize.unit === n ? n === k.AspectRatio && (o = Math.round(r / t * a), s = a) : (o = i, s = a), this.transformations = [...this.transformations, {
+			key: O.Resize,
 			value: {
 				height: s,
 				unit: n,
@@ -2381,27 +2836,29 @@ var Et = Q, Dt, $ = class extends s {
 		}];
 	}
 	onRotationChange(e) {
-		this.rotation = e.detail;
+		this.rotation = e.detail, this.isFormatsLayout && this.applyRotationTransformation(e.detail);
 	}
 	onRotationApply(e) {
-		let t = e.detail;
-		if (this.clearResetSnapshot(), this.lastAction = k.Rotate, !this.asset) {
-			t ? this.upsertTransformation({
-				key: k.Rotate,
-				value: { rotation: t }
-			}) : this.transformations = this.transformations.filter((e) => e.key !== k.Rotate);
+		this.applyRotationTransformation(e.detail);
+	}
+	applyRotationTransformation(e) {
+		if (this.clearResetSnapshot(), this.lastAction = O.Rotate, !this.asset) {
+			e ? this.upsertTransformation({
+				key: O.Rotate,
+				value: { rotation: e }
+			}) : this.transformations = this.transformations.filter((e) => e.key !== O.Rotate);
 			return;
 		}
 		this.selectedFormat && (this.transformations = [...this.transformations, {
-			key: k.Rotate,
-			value: { rotation: t }
+			key: O.Rotate,
+			value: { rotation: e }
 		}]);
 	}
 	onQualityChange(e) {
 		let t = e.detail;
-		this.selectedFormat && (this.selectedFormat.quality = t), this.clearResetSnapshot(), this.lastAction = k.Quality;
+		this.selectedFormat && (this.selectedFormat.quality = t), this.clearResetSnapshot(), this.lastAction = O.Quality;
 		let n = {
-			key: k.Quality,
+			key: O.Quality,
 			value: { quality: t }
 		};
 		this.asset ? this.transformations = [...this.transformations, n] : this.upsertTransformation(n);
@@ -2413,15 +2870,15 @@ var Et = Q, Dt, $ = class extends s {
 			keepMetadata: t
 		}, !this.asset) {
 			t ? this.upsertTransformation({
-				key: k.Metadata,
+				key: O.Metadata,
 				value: { keepMetadata: t }
-			}) : this.transformations = this.transformations.filter((e) => e.key !== k.Metadata);
+			}) : this.transformations = this.transformations.filter((e) => e.key !== O.Metadata);
 			return;
 		}
 		t ? this.upsertTransformation({
-			key: k.Metadata,
+			key: O.Metadata,
 			value: { keepMetadata: t }
-		}) : this.transformations = this.transformations.filter((e) => e.key !== k.Metadata);
+		}) : this.transformations = this.transformations.filter((e) => e.key !== O.Metadata);
 	}
 	onExtensionChange(e) {
 		let t = e.detail;
@@ -2431,36 +2888,115 @@ var Et = Q, Dt, $ = class extends s {
 		};
 	}
 	syncQuality() {
-		let e = this.transformations.findLast((e) => e.key === k.Quality)?.value?.quality;
+		let e = this.transformations.findLast((e) => e.key === O.Quality)?.value?.quality;
 		this.selectedFormat &&= {
 			...this.selectedFormat,
 			quality: e ?? 100
 		};
 	}
+	syncSelectedDimensions(e = !0) {
+		let t = this.transformations.findLast((e) => e.key === O.Dimensions), n = X.getDimensionsSize(this.selectedDimensions);
+		if (!t) {
+			n && (this.selectedDimensions = void 0);
+			return;
+		}
+		let r = Math.round(t.value.width ?? 0), i = Math.round(t.value.height ?? 0);
+		if (e && n?.width === r && n.height === i) return;
+		let a = this.dimensionsItems.find((e) => {
+			let t = X.getDimensionsPresetSize(e.value);
+			return !e.disabled && t?.width === r && t.height === i;
+		});
+		this.selectedDimensions = a ? {
+			mode: D.Preset,
+			value: a.value
+		} : {
+			height: i,
+			mode: D.Custom,
+			unit: A.Pixel,
+			width: r
+		};
+	}
 	get hasResettableState() {
-		return this.transformations.length > 0 || this.canAutoFormat && !this.autoFormat;
+		let e = Wt.filter((e) => this.activeParts.includes(e));
+		return this.canReorder && this.activeParts.some((t, n) => t !== e[n]) || this.transformations.length > 0 ? !0 : this.canAutoFormat && !this.autoFormat;
 	}
 	clearResetSnapshot() {
-		this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0;
+		this.canReorder && this.rememberOrder(), this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0;
 	}
 	handleUndo() {
+		if (this.canReorder && this.orderUndo.length > 0) {
+			let e = this.orderUndo[this.orderUndo.length - 1];
+			this.orderUndo = this.orderUndo.slice(0, -1), this.parts = e.parts, this.autoFormat = e.autoFormat, this.selectedProxy = e.selectedProxy, this.transformations = e.transformations, this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0, this.emitReorder(), this.syncQuality();
+			return;
+		}
 		!this.hasUnfrozenTransformations && this.preResetTransformations !== void 0 ? (this.transformations = this.preResetTransformations, this.preResetTransformations = void 0, this.preResetAutoFormat !== void 0 && (this.autoFormat = this.preResetAutoFormat, this.preResetAutoFormat = void 0), this.preResetSelectedProxy !== void 0 && (this.selectedProxy = this.preResetSelectedProxy, this.preResetSelectedProxy = void 0)) : this.transformations = this.transformations.slice(0, -1), this.syncQuality();
 	}
 	handleReset() {
-		if (this.preResetTransformations = [...this.transformations], this.preResetAutoFormat = this.autoFormat, this.preResetSelectedProxy = this.selectedProxy, this.canAutoFormat) this.autoFormat = !0, this.selectedProxy = this.autoResolvedProxyId || this.selectedProxy;
+		if (this.canReorder && this.rememberOrder(), this.preResetTransformations = [...this.transformations], this.preResetAutoFormat = this.autoFormat, this.preResetSelectedProxy = this.selectedProxy, this.canAutoFormat) this.autoFormat = !0, this.selectedProxy = this.autoResolvedProxyId || this.selectedProxy;
 		else {
 			let e = !!this.defaultProxy && !!this.proxies?.some((e) => e.id === this.defaultProxy);
 			this.selectedProxy = e ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "";
 		}
-		this.transformations = [], this.frozenIndex = -1, this.syncQuality();
+		this.transformations = [], this.canReorder && (this.parts = Wt.filter((e) => this.activeParts.includes(e)), this.emitReorder()), this.frozenIndex = -1, this.syncQuality();
+	}
+	onDimensionsChange(e) {
+		e.stopPropagation();
+		let t = X.getDimensionsSize(e.detail);
+		this.clearResetSnapshot(), this.lastAction = O.Dimensions, this.selectedDimensions = { ...e.detail }, t ? this.upsertTransformation({
+			key: O.Dimensions,
+			value: t
+		}) : this.transformations = this.transformations.filter((e) => e.key !== O.Dimensions), this.capCropToMaxSize();
+	}
+	onCropToggle(e) {
+		e.stopPropagation(), this.clearResetSnapshot(), this.cropEnabled = e.currentTarget.checked, this.cropEnabled || (this.transformations = this.transformations.filter((e) => e.key !== O.Crop)), this.emit("cx-asset-link-format-crop-toggle", { detail: this.cropEnabled });
+	}
+	renderDimensionsPart() {
+		return e`<cx-asset-link-format-dimensions class="asset-link-format__details" .applyBehavior=${this.isFormatsLayout ? N.Automatic : N.Manual} .inline=${this.isFormatsLayout} ?open=${this.activeSetting === "cx-asset-link-format-dimensions"} ?loading=${this.loading} .items=${this.dimensionsItems} .value=${this.selectedDimensions} ?can-custom=${this.canCustomDimensions} @cx-asset-link-format-dimensions-change=${this.onDimensionsChange}></cx-asset-link-format-dimensions>`;
+	}
+	renderHeader() {
+		return m(!this.hideHeader && !this.isFormatsLayout, () => e`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0 && (!this.canReorder || this.orderUndo.length === 0)} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${m(this.canReset, () => e`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${!this.hasResettableState} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`, () => n);
+	}
+	renderOrderHint() {
+		return m(this.canReorder, () => e`<div class="asset-link-format__order-hint" data-testid="cx-asset-link-format-order-hint">${this.localize.term("transformationOrderHint")}</div>`);
+	}
+	renderProxyPart() {
+		return e`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} ?auto-format=${this.autoFormat} ?can-auto-format=${this.canAutoFormat} .items=${this.formats} ?loading=${this.loading && this.lastAction === O.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`;
+	}
+	renderCropEditor(t) {
+		let n = this.asset ? this.lastResizeSize[k.Pixel] : this.cropMaxSize;
+		return e`<cx-asset-link-format-crop class="asset-link-format__details" .inline=${t} ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === O.Crop} ?show-position-picker=${!this.asset} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${n.width} max-height=${n.height} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} position=${this.cropSize.position} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-position-change=${this.onCropPositionChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`;
+	}
+	renderCropPart() {
+		return this.isFormatsLayout ? e`<div class="asset-link-format__formats-crop"><cx-space class="asset-link-format__formats-summary" align-items="center" justify-content="space-between"><cx-space align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-switch data-testid="cx-asset-link-format-crop-toggle" .checked=${this.cropEnabled} ?disabled=${this.loading} @cx-change=${this.onCropToggle}><cx-visually-hidden>${this.localize.term("crop")}</cx-visually-hidden></cx-switch></cx-space>${m(this.cropEnabled, () => this.renderCropEditor(!0))}</div>` : this.renderCropEditor(!1);
+	}
+	renderResizePart() {
+		return e`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === O.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : Infinity} max-height=${this.asset ? this.imageSize.height : Infinity} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`;
+	}
+	renderRotatePart() {
+		return e`<cx-asset-link-format-rotation class="asset-link-format__details" .inline=${this.isFormatsLayout} ?loading=${this.loading && this.lastAction === O.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`;
+	}
+	renderQualityPart() {
+		return e`<cx-asset-link-format-quality class="asset-link-format__details" .applyBehavior=${this.isFormatsLayout ? N.Automatic : N.Manual} .inline=${this.isFormatsLayout} ?loading=${this.loading && this.lastAction === O.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} .items=${this.qualityItems} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>`;
+	}
+	renderMetadataPart() {
+		return e`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`;
+	}
+	renderPart(e) {
+		switch (e) {
+			case j.Dimensions: return this.renderDimensionsPart();
+			case j.Proxy: return this.renderProxyPart();
+			case j.Crop: return this.renderCropPart();
+			case j.Resize: return this.renderResizePart();
+			case j.Rotate: return this.renderRotatePart();
+			case j.Quality: return this.renderQualityPart();
+			case j.Metadata: return this.renderMetadataPart();
+			default: return n;
+		}
 	}
 	render() {
-		return e`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${m(!this.hideHeader, () => e`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${m(this.canReset, () => e`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${!this.hasResettableState} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`, () => n)}
-      ${m(!this.noFormat, () => e`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} ?auto-format=${this.autoFormat} ?can-auto-format=${this.canAutoFormat} .items=${this.formats} ?loading=${this.loading && this.lastAction === k.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`)}
-      ${m(!this.noCrop, () => e`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === k.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} ?show-position-picker=${!this.asset} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[D.Pixel].width : Infinity} max-height=${this.asset ? this.lastResizeSize[D.Pixel].height : Infinity} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} position=${this.cropSize.position} ratio-width=${this.cropSize.ratioWidth} ratio-height=${this.cropSize.ratioHeight} unit=${this.cropSize.unit} .lastAppliedSetting=${this.lastCropSize} .cropModes=${this.cropModes} .focusModes=${this.focusModes} @cx-asset-link-format-crop-mode-change=${this.onCropModeChange} @cx-asset-link-format-crop-focus-mode-change=${this.onCropFocusModeChange} @cx-asset-link-format-crop-position-change=${this.onCropPositionChange} @cx-asset-link-format-crop-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`)}
-      ${m(!this.noResize, () => e`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === k.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : Infinity} max-height=${this.asset ? this.imageSize.height : Infinity} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`)}
-      ${m(!this.noRotate, () => e`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === k.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`)}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === k.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${m(!this.noMetadata, () => e`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`)}
-      ${m(this.useCustomExtension, () => e`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`)}<div class="asset-link-format__footer"><slot name="footer"></slot></div></div>`;
+		return e`<div class="asset-link-format ${this.isFormatsLayout ? "asset-link-format--formats" : ""}" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${this.renderHeader()}
+      ${this.renderOrderHint()}<div class="asset-link-format__panels">${b(this.activeParts, (e) => e, (t) => e`<div class="asset-link-format__panel" data-part=${t} ?data-reorderable=${this.canReorder && Q.includes(t)}>${m(this.canReorder && Q.includes(t), () => e`<cx-icon-button class="asset-link-format__drag-handle" name="drag_indicator" label=${this.localize.term("reorderTransformation", this.localize.term(t))} ?disabled=${this.loading} @keydown=${this.handleReorderKeyDown}></cx-icon-button>`)}
+            ${this.renderPart(t)}</div>`)}</div><span class="asset-link-format__announcement" role="status" aria-live="polite">${this.reorderAnnouncement}</span>${m(this.useCustomExtension, () => e`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`)}<div class="asset-link-format__footer"><slot name="footer"></slot></div></div>`;
 	}
 };
 a([r({
@@ -2518,26 +3054,26 @@ a([r({
 	reflect: !0,
 	type: Boolean
 }), o("design:type", Boolean)], $.prototype, "useCustomExtension", void 0), a([r({
-	attribute: "no-metadata",
-	reflect: !0,
-	type: Boolean
-}), o("design:type", Boolean)], $.prototype, "noMetadata", void 0), a([r({
-	attribute: "no-format",
-	reflect: !0,
-	type: Boolean
-}), o("design:type", Boolean)], $.prototype, "noFormat", void 0), a([r({
-	attribute: "no-crop",
+	attribute: "parts",
+	converter: De,
+	type: Array
+}), o("design:type", Array)], $.prototype, "parts", void 0), a([r({
 	reflect: !0,
-	type: Boolean
-}), o("design:type", Boolean)], $.prototype, "noCrop", void 0), a([r({
-	attribute: "no-resize",
+	type: String
+}), o("design:type", ge === void 0 ? Object : ge)], $.prototype, "layout", void 0), a([r({
+	attribute: "crop-enabled",
 	reflect: !0,
 	type: Boolean
-}), o("design:type", Boolean)], $.prototype, "noResize", void 0), a([r({
-	attribute: "no-rotate",
-	reflect: !0,
+}), o("design:type", Boolean)], $.prototype, "cropEnabled", void 0), a([r({ type: Boolean }), o("design:type", Object)], $.prototype, "reorderable", void 0), a([r({
+	attribute: !1,
+	type: Array
+}), o("design:type", Array)], $.prototype, "dimensionsItems", void 0), a([r({
+	attribute: !1,
+	type: Array
+}), o("design:type", Array)], $.prototype, "qualityItems", void 0), a([r({
+	attribute: "can-custom-dimensions",
 	type: Boolean
-}), o("design:type", Boolean)], $.prototype, "noRotate", void 0), a([r({
+}), o("design:type", Object)], $.prototype, "canCustomDimensions", void 0), a([r({
 	attribute: "last-image-size",
 	reflect: !1,
 	type: Object
@@ -2552,10 +3088,10 @@ a([r({
 	attribute: !1,
 	reflect: !1,
 	type: Object
-}), o("design:type", Object)], $.prototype, "queryElement", void 0), a([i(), o("design:type", String)], $.prototype, "activeSetting", void 0), a([i(), o("design:type", Object)], $.prototype, "selectedFormat", void 0), a([i(), o("design:type", Object)], $.prototype, "resizeSize", void 0), a([i(), o("design:type", Object)], $.prototype, "cropSize", void 0), a([i(), o("design:type", Number)], $.prototype, "rotation", void 0), a([i(), o("design:type", Object)], $.prototype, "defaultSize", void 0), a([i(), o("design:type", Object)], $.prototype, "cropperElement", void 0), a([i(), o("design:type", Array)], $.prototype, "parameters", void 0), a([i(), o("design:type", Boolean)], $.prototype, "loading", void 0), a([i(), o("design:type", Object)], $.prototype, "lastAction", void 0), a([i(), o("design:type", Object)], $.prototype, "frozenIndex", void 0), a([i(), o("design:type", Object)], $.prototype, "preResetTransformations", void 0), a([i(), o("design:type", Object)], $.prototype, "preResetAutoFormat", void 0), a([i(), o("design:type", Object)], $.prototype, "preResetSelectedProxy", void 0), a([
+}), o("design:type", Object)], $.prototype, "queryElement", void 0), a([i(), o("design:type", String)], $.prototype, "activeSetting", void 0), a([i(), o("design:type", Object)], $.prototype, "selectedFormat", void 0), a([i(), o("design:type", Object)], $.prototype, "resizeSize", void 0), a([i(), o("design:type", Object)], $.prototype, "cropSize", void 0), a([i(), o("design:type", Number)], $.prototype, "rotation", void 0), a([i(), o("design:type", Object)], $.prototype, "defaultSize", void 0), a([i(), o("design:type", Object)], $.prototype, "cropperElement", void 0), a([i(), o("design:type", Array)], $.prototype, "parameters", void 0), a([i(), o("design:type", Boolean)], $.prototype, "loading", void 0), a([i(), o("design:type", Object)], $.prototype, "lastAction", void 0), a([i(), o("design:type", Object)], $.prototype, "frozenIndex", void 0), a([i(), o("design:type", Object)], $.prototype, "preResetTransformations", void 0), a([i(), o("design:type", Object)], $.prototype, "preResetAutoFormat", void 0), a([i(), o("design:type", Object)], $.prototype, "preResetSelectedProxy", void 0), a([i(), o("design:type", Object)], $.prototype, "reorderAnnouncement", void 0), a([i(), o("design:type", Object)], $.prototype, "selectedDimensions", void 0), a([i(), o("design:type", typeof Array > "u" ? Object : Array)], $.prototype, "orderUndo", void 0), a([
 	f("transformations"),
 	o("design:type", Function),
-	o("design:paramtypes", []),
+	o("design:paramtypes", [Object]),
 	o("design:returntype", Promise)
 ], $.prototype, "handleTransformationsChange", null), a([
 	f("selectedProxy"),
@@ -2567,7 +3103,17 @@ a([r({
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
-], $.prototype, "handleLoadingChange", null), $ = Dt = a([u("cx-asset-link-format"), o("design:paramtypes", [])], $);
-var Ot = $;
+], $.prototype, "handleLoadingChange", null), a([
+	f("parts"),
+	o("design:type", Function),
+	o("design:paramtypes", []),
+	o("design:returntype", void 0)
+], $.prototype, "handlePartsChange", null), a([
+	f(["reorderable", "asset"]),
+	o("design:type", Function),
+	o("design:paramtypes", []),
+	o("design:returntype", void 0)
+], $.prototype, "handleReorderableChange", null), $ = X = a([u("cx-asset-link-format"), o("design:paramtypes", [])], $);
+var Gt = $;
 //#endregion
-export { Je as C, tt as S, Ce as T, Ne as _, Le as a, Qe as b, L as c, Re as d, je as f, V as g, B as h, st as i, R as l, ze as m, ut as n, I as o, Me as p, ct as r, F as s, Ot as t, z as u, Pe as v, M as w, rt as x, nt as y };
+export { st as C, mt as S, ke as T, Ke as _, Xe as a, dt as b, I as c, Ze as d, Ue as f, Ge as g, L as h, bt as i, Ve as l, Qe as m, Ct as n, ze as o, We as p, xt as r, F as s, Gt as t, He as u, qe as v, Ae as w, gt as x, ht as y };