@orangelogic/design-system 4.50.0 → 4.51.0

package/library/chunks/{asset-link-format.Ca8KxyCV.js → asset-link-format.CV-Jw-hk.js}

@@ -13,38 +13,38 @@ import { t as _ } from "./button.DnOMjl_G.js";
 import { m as ee } from "./string.DAuTpyw8.js";
 import { t as te } from "./tooltip.DJl5qcTx.js";
 import { n as v } from "./position-picker.dY_vgF_H.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.Da60zYvc.js";
-import { t as S } from "./space.Dd8jezXK.js";
-import { t as C } from "./select.NhbQgMNA.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.CFxipFzl.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.D1UkXp3F.js";
+import { t as S } from "./option.Da60zYvc.js";
+import { t as C } from "./space.Dd8jezXK.js";
+import { t as w } from "./select.NhbQgMNA.js";
+import { t as se } from "./visually-hidden.Bv3SInZp.js";
+import { E as ce, T as le, b as ue, d as de, h as fe, p as pe, w as me, y as he } from "./src.CFxipFzl.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 { t as ge } from "./divider.CqSNZCU8.js";
+import { a as E, c as D, l as O, n as _e, o as k, r as A, s as j, t as M } from "./asset-link-format.COPyGdND.js";
+import { t as ve } from "./menu-label.B-FOyfAX.js";
+import { t as ye } from "./switch.CBho2RVW.js";
+import { t as be } 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";
+import { t as xe } from "./_baseUniq.h_pGICPH.js";
+import { d as Se, i as Ce, n as we, o as Te, p as N, r as Ee, s as De, t as Oe } from "./string-array.Dstcqyjm.js";
+import { t as ke } from "./position-picker.DzRyAx7a.js";
 //#region ../../node_modules/lodash-es/uniq.js
-function ke(e) {
-	return e && e.length ? be(e) : [];
+function Ae(e) {
+	return e && e.length ? xe(e) : [];
 }
 //#endregion
 //#region ../../packages/services/src/api/asset/asset.utils.ts
-function Ae(e) {
+function je(e) {
 	return typeof e == "object" && !!e && "URI" in e;
 }
-var je = {
+var Me = {
 	artist: "Artist",
 	color: "Color",
 	createDate: "CreateDate",
@@ -66,34 +66,34 @@ var je = {
 	systemIdentifier: "SystemIdentifier",
 	text: "Text",
 	title: "Title"
-}, Me = /* @__PURE__ */ new Set([
+}, Ne = /* @__PURE__ */ new Set([
 	"mediaDate",
 	"createDate",
 	"editDate"
 ]);
-function Ne(e) {
+function Pe(e) {
 	return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(e) && !/^(?:OR|AND|NOT)$/.test(e) ? e : `"${e.replace(/\\/g, "\\\\").replace(/"/g, "\\\"")}"`;
 }
-function Pe(e, t) {
-	let n = (Array.isArray(t) ? t : [t]).map((t) => `${e}:${Ne(t)}`);
+function Fe(e, t) {
+	let n = (Array.isArray(t) ? t : [t]).map((t) => `${e}:${Pe(t)}`);
 	return n.length > 1 ? `(${n.join(" OR ")})` : n[0] ?? "";
 }
-function Fe(e, t) {
+function Ie(e, t) {
 	return (Array.isArray(t) ? t : [t]).map((t) => `${e}${t.operator}${t.value}`).join(" AND ");
 }
-function Ie(e) {
+function Le(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(Pe(e, n));
+			for (let [e, n] of Object.entries(i)) t.push(Fe(e, n));
 			continue;
 		}
-		let a = je[r];
+		let a = Me[r];
 		if (a) {
-			if (Me.has(r)) {
-				t.push(Fe(a, i));
+			if (Ne.has(r)) {
+				t.push(Ie(a, i));
 				continue;
 			}
 			if (r === "color") {
@@ -103,87 +103,87 @@ function Ie(e) {
 			if (r === "parentFolderIdentifier") {
 				let e = Array.isArray(i) ? i : [i];
 				if (e.length === 0) continue;
-				let n = [...e.map((e) => `ParentFolderIdentifier:${Ne(String(e))}`), ...e.map((e) => `ParentAlbumIdentifier:${Ne(String(e))}`)];
+				let n = [...e.map((e) => `ParentFolderIdentifier:${Pe(String(e))}`), ...e.map((e) => `ParentAlbumIdentifier:${Pe(String(e))}`)];
 				t.push(`(${n.join(" OR ")})`);
 				continue;
 			}
-			t.push(Pe(a, i));
+			t.push(Fe(a, i));
 		}
 	}
 	return t.join(" AND ");
 }
-function Le(e) {
-	if ("and" in e) return e.and.map(Le).filter(Boolean).join(" AND ");
+function Re(e) {
+	if ("and" in e) return e.and.map(Re).filter(Boolean).join(" AND ");
 	if ("or" in e) {
-		let t = e.or.map(Le).filter(Boolean);
+		let t = e.or.map(Re).filter(Boolean);
 		return t.length > 1 ? `(${t.join(" OR ")})` : t[0] ?? "";
 	}
 	if ("not" in e) {
-		let t = Le(e.not);
+		let t = Re(e.not);
 		return t ? `NOT (${t})` : "";
 	}
-	return Ie(e);
+	return Le(e);
 }
 //#endregion
 //#region ../../packages/services/src/api/asset/asset.ts
-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 = {
+var ze = "CoreField.LargeSizePreview", P = "CoreField.DocType", Be = "Document.Title", Ve = "Document.CaptionLong", F = "Document.FileExtension", He = "CoreField.FileSize", Ue = "CoreField.Identifier", We = "CoreField.MaxHeight", Ge = "CoreField.MaxWidth", I = "Document.RecordID", Ke = "CoreField.DocSubType", qe = "CoreField.TitleWithFallback", L = "CoreField.OriginalFileName", Je = "__width", Ye = "__height", Xe = "CoreField.OriginalPreview", Ze = "Document.DocSubType", Qe = "Document.InPoint", $e = "Document.OutPoint", et = {
 	DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
 	ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
-}, 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;
-}
+}, tt = {
+	[ze]: et.DEFAULT_VIEW_SIZE,
+	[Xe]: et.ORIGINAL_VIEW_SIZE
+}, nt = Object.fromEntries(Object.entries(tt).map(([e, t]) => [t, e]));
 function rt(e) {
-	return e === "CoreField.TitleWithFallback" ? [ze, R] : [nt(e)];
+	return tt[e] ?? e;
 }
 function it(e) {
+	return e === "CoreField.TitleWithFallback" ? [Be, L] : [rt(e)];
+}
+function at(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) {
-		let e = tt[n] ?? n;
+		let e = nt[n] ?? n;
 		t[e] = r;
 	}
 	return t;
 }
-function at(e, t, n) {
-	e[n] = z(t, n);
+function ot(e, t, n) {
+	e[n] = R(t, n);
 	let r = t[n];
-	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;
+	return r != null && je(r) && (typeof r.Width == "number" && r.Width > 0 && (e[`${n}${Je}`] = String(r.Width)), typeof r.Height == "number" && r.Height > 0 && (e[`${n}${Ye}`] = String(r.Height))), e;
 }
-function ot(e) {
+function st(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 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;
+async function ct({ 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(it), h = n?.includes("CoreField.TitleWithFallback") ?? !1, g = (e) => {
+		let t = at(e);
+		return h && (t[qe] = R(t, "Document.Title") || R(t, "CoreField.OriginalFileName")), t;
 	}, _ = {
 		Consistency: e || void 0,
 		CountPerPage: t,
-		Fields: ke(m),
+		Fields: Ae(m),
 		Format: "json",
 		GetPermanentAssetsPaths: r ?? void 0,
 		PageNumber: o,
-		Query: Le(s),
+		Query: Re(s),
 		SecurityByPassToken: c || void 0,
 		Sort: u || void 0,
 		UseSession: p || void 0
 	}, ee = i === "POST";
 	try {
-		return (await P.request({
+		return (await N.request({
 			baseURL: l,
 			headers: f ? { Authorization: `Bearer ${f}` } : void 0,
 			method: i,
-			...ee ? { data: ot(_) } : {
+			...ee ? { data: st(_) } : {
 				params: _,
 				paramsSerializer: { indexes: null }
 			},
 			responseType: "json",
-			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], a ? (e) => ({
+			transformResponse: [...Array.isArray(N.defaults.transformResponse) ? N.defaults.transformResponse : [], a ? (e) => ({
 				items: (e.results?.Items ?? []).map(g),
 				sort: e.results?.GlobalInfo?.Sort ?? "",
 				totalCount: e.results?.GlobalInfo?.TotalCount ?? 0
@@ -192,7 +192,7 @@ async function st({ consistency: e, countPerPage: t, fields: n, getPermanentAsse
 				sort: e.APIResponse?.GlobalInfo?.Sort ?? "",
 				totalCount: e.APIResponse?.GlobalInfo?.TotalCount ?? 0
 			})],
-			url: a ? Ee.SEARCH_ASSETS : xe["4.0"]
+			url: a ? De.SEARCH_ASSETS : Se["4.0"]
 		})).data;
 	} catch (e) {
 		if (d) throw e;
@@ -203,9 +203,9 @@ async function st({ consistency: e, countPerPage: t, fields: n, getPermanentAsse
 		};
 	}
 }
-async function ct({ assetId: e, extension: t, format: n, siteUrl: r, token: i, transformations: a, useSession: o }) {
+async function lt({ assetId: e, extension: t, format: n, siteUrl: r, token: i, transformations: a, useSession: o }) {
 	try {
-		return (await P.request({
+		return (await N.request({
 			baseURL: r,
 			method: "GET",
 			params: {
@@ -217,19 +217,19 @@ async function ct({ assetId: e, extension: t, format: n, siteUrl: r, token: i, t
 				UseSession: o || void 0
 			},
 			timeout: 3e5,
-			url: Te.GET_TRANSFORM_ASSET_LINK
+			url: Ee.GET_TRANSFORM_ASSET_LINK
 		})).data;
 	} catch {
 		return null;
 	}
 }
-var lt = 50;
-function ut(e, t) {
+var ut = 50;
+function dt(e, t) {
 	let n = [];
 	for (let r = 0; r < e.length; r += t) n.push(e.slice(r, r + t));
 	return n;
 }
-async function dt({ consistency: e, extraFields: t, getPermanentAssetsPaths: n, isSiteBuilder: r, recordIds: i, securityByPassToken: a, throwOnError: o, token: s }) {
+async function ft({ 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: [],
@@ -237,11 +237,11 @@ async function dt({ consistency: e, extraFields: t, getPermanentAssetsPaths: n,
 	};
 	let c = t?.filter((e) => e && typeof e == "string") ?? [], l = [
 		...c,
-		R,
-		ze,
+		L,
 		Be,
-		L
-	], u = ut(i, lt), d = await Promise.all(u.map((t) => st({
+		Ve,
+		I
+	], u = dt(i, ut), d = await Promise.all(u.map((t) => ct({
 		consistency: e,
 		countPerPage: t.length,
 		fields: l,
@@ -257,18 +257,18 @@ async function dt({ consistency: e, extraFields: t, getPermanentAssetsPaths: n,
 	return {
 		facets: [],
 		items: d.flatMap((e) => e.items).map((e) => ({
-			name: z(e, R),
-			recordId: z(e, L),
-			...c.reduce((t, n) => at(t, e, n), {})
+			name: R(e, L),
+			recordId: R(e, I),
+			...c.reduce((t, n) => ot(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 z(e, t) {
+function R(e, t) {
 	let n = e[t];
-	return n == null ? "" : typeof n == "string" ? n : typeof n == "number" || typeof n == "boolean" ? String(n) : Ae(n) ? n.URI : "";
+	return n == null ? "" : typeof n == "string" ? n : typeof n == "number" || typeof n == "boolean" ? String(n) : je(n) ? n.URI : "";
 }
-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 }) {
+async function pt({ 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: [],
@@ -279,19 +279,19 @@ async function ft({ consistency: e, countPerPage: t, directParentFolderIdentifie
 		parentFolderIdentifier: c,
 		...l ? { text: l } : {},
 		...o && o.length > 0 ? { docType: o } : {}
-	}, g = await st({
+	}, g = await ct({
 		consistency: e,
 		countPerPage: t,
 		fields: [
 			...m,
+			qe,
+			He,
+			P,
 			Ke,
-			Ve,
+			Ue,
 			F,
-			Ge,
-			He,
 			I,
-			L,
-			R
+			L
 		],
 		getPermanentAssetsPaths: i,
 		isSiteBuilder: a,
@@ -305,27 +305,27 @@ async function ft({ consistency: e, countPerPage: t, directParentFolderIdentifie
 	return {
 		facets: [],
 		items: g.items.map((e) => {
-			let t = z(e, I);
+			let t = R(e, F);
 			t && !t.startsWith(".") && (t = "." + t);
-			let n = z(e, L);
+			let n = R(e, I);
 			return {
-				docSubType: z(e, Ge),
-				docType: z(e, "CoreField.DocType") || "",
+				docSubType: R(e, Ke),
+				docType: R(e, "CoreField.DocType") || "",
 				extension: t,
 				id: n,
-				identifier: z(e, He),
-				name: z(e, R),
+				identifier: R(e, Ue),
+				name: R(e, L),
 				recordId: n,
-				size: z(e, "CoreField.FileSize") || "0 MB",
-				...m.reduce((t, n) => at(t, e, n), {})
+				size: R(e, "CoreField.FileSize") || "0 MB",
+				...m.reduce((t, n) => ot(t, e, n), {})
 			};
 		}),
 		totalCount: g.totalCount
 	};
 }
-async function pt({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, useSession: i }) {
+async function mt({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, useSession: i }) {
 	try {
-		return (await P.request({
+		return (await N.request({
 			method: "GET",
 			params: {
 				AutoCropMode: e,
@@ -336,21 +336,21 @@ async function pt({ autoCropMode: e, cropHeight: t, cropWidth: n, imageUrl: r, u
 			},
 			responseType: "json",
 			timeout: 3e5,
-			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], (e) => ({
+			transformResponse: [...Array.isArray(N.defaults.transformResponse) ? N.defaults.transformResponse : [], (e) => ({
 				height: e.cropHeight,
 				width: e.cropWidth,
 				x: e.cropX,
 				y: e.cropY
 			})],
-			url: Te.GET_CROP_ZONE_SUGGESTION
+			url: Ee.GET_CROP_ZONE_SUGGESTION
 		})).data;
 	} catch {
 		return null;
 	}
 }
-async function mt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, useSession: i }) {
+async function ht({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, useSession: i }) {
 	try {
-		return (await P.request({
+		return (await N.request({
 			baseURL: n,
 			method: "GET",
 			params: {
@@ -359,7 +359,7 @@ async function mt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, us
 				UseSession: i || void 0
 			},
 			responseType: "json",
-			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? [] : e.proxies?.map((e) => ({
+			transformResponse: [...Array.isArray(N.defaults.transformResponse) ? N.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? [] : e.proxies?.map((e) => ({
 				cdnName: e.cdnName,
 				extension: e.extension,
 				formatHeight: e.formatHeight,
@@ -370,31 +370,31 @@ async function mt({ assetRecordId: e, isSiteBuilder: t, siteUrl: n, token: r, us
 				proxyName: e.proxyName,
 				width: e.width
 			})) ?? []],
-			url: t ? Ee.GET_AVAILABLE_PROXIES : we
+			url: t ? De.GET_AVAILABLE_PROXIES : Te
 		})).data;
 	} catch {
 		return [];
 	}
 }
-async function ht({ siteUrl: e } = {}) {
+async function gt({ siteUrl: e } = {}) {
 	try {
-		return (await P.request({
+		return (await N.request({
 			baseURL: e,
 			method: "GET",
 			responseType: "json",
-			transformResponse: [...Array.isArray(P.defaults.transformResponse) ? P.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? { formatsByDocType: {
+			transformResponse: [...Array.isArray(N.defaults.transformResponse) ? N.defaults.transformResponse : [], (e) => !e || typeof e != "object" ? { formatsByDocType: {
 				Audio: {},
 				Image: {},
 				Multimedia: {},
 				Video: {}
 			} } : { formatsByDocType: e.formatsByDocType ?? {} }],
-			url: Ce
+			url: we
 		})).data;
 	} catch {
 		return { formatsByDocType: {} };
 	}
 }
-async function gt({ recordIds: e, rightsToCheck: t }) {
+async function _t({ recordIds: e, rightsToCheck: t }) {
 	let n = {
 		authorizedObjects: [],
 		forbiddenObjectsOfReadPermission: [],
@@ -402,7 +402,7 @@ async function gt({ recordIds: e, rightsToCheck: t }) {
 		invalidObjects: []
 	};
 	try {
-		let { data: n } = await P.request({
+		let { data: n } = await N.request({
 			method: "GET",
 			params: {
 				RecordIDs: e,
@@ -410,7 +410,7 @@ async function gt({ recordIds: e, rightsToCheck: t }) {
 			},
 			paramsSerializer: { indexes: null },
 			responseType: "json",
-			url: Se.GET_AUTHORIZED_OBJECTS
+			url: Ce.GET_AUTHORIZED_OBJECTS
 		});
 		return n;
 	} catch {
@@ -419,7 +419,7 @@ async function gt({ recordIds: e, rightsToCheck: t }) {
 }
 //#endregion
 //#region ../../packages/tools/src/fetch-image/fetch-image.ts
-var _t = 20, B = "TR1", V = "TRX", vt = /* @__PURE__ */ new Set([".gif"]), yt = /* @__PURE__ */ new Set([
+var vt = 20, z = "TR1", B = "TRX", yt = /* @__PURE__ */ new Set([".gif"]), bt = /* @__PURE__ */ new Set([
 	".avif",
 	".bmp",
 	".gif",
@@ -430,18 +430,18 @@ var _t = 20, B = "TR1", V = "TRX", vt = /* @__PURE__ */ new Set([".gif"]), yt =
 	".svg",
 	".webp"
 ]);
-function bt(e) {
+function xt(e) {
 	let t = e.toLowerCase(), n = t.startsWith(".") ? t : `.${t}`;
-	return yt.has(n);
+	return bt.has(n);
 }
-function xt(e, t) {
-	return e !== void 0 && e !== "" && e !== M.Image ? !1 : !t || bt(t);
+function St(e, t) {
+	return e !== void 0 && e !== "" && e !== j.Image ? !1 : !t || xt(t);
 }
-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) => {
+function Ct({ 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_${z}`, f = (n, r) => {
 		let i = a[n];
 		if (!i) return;
-		let s = a[`${n}${qe}`], u = a[`${n}${Je}`], d = e && !c ? fe(i, [], {
+		let s = a[`${n}${Je}`], u = a[`${n}${Ye}`], d = e && !c ? de(i, [], {
 			autoFormat: !o,
 			extension: l,
 			format: r
@@ -453,28 +453,28 @@ function St({ autoFormat: e, buildSrcset: t, docType: n, extension: r, format: i
 			srcset: t && !c ? pe(d, {
 				extension: l,
 				format: r,
-				maxWidth: de(o, s)
+				maxWidth: ue(o, s)
 			}) : ""
 		};
 	};
 	if (c) {
-		let e = ue(a, xt(n, l), l);
+		let e = le(a, St(n, l), l);
 		return e ? f(e) ?? {} : {};
 	}
 	if (!o) {
 		let e = he(l, s);
-		return f(`path_${e}`, e) ?? f(d, B) ?? {};
+		return f(`path_${e}`, e) ?? f(d, z) ?? {};
 	}
 	let p = i ? `path_${i}` : void 0;
-	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) ?? {};
+	return p && a[p] ? i !== B || St(n, l) ? f(p, i) ?? {} : f(d, z) ?? {} : l && yt.has(u) ? f(`path_${B}`, B) ?? f(d, z) ?? {} : f(d, z) ?? {};
 }
-var Ct = class {
+var wt = class {
 	constructor(e, t) {
-		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);
+		this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = Infinity, this.pageSize = vt, 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) : _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;
+		this.pageSize = typeof r == "number" && Number.isFinite(r) && r >= 1 ? Math.floor(r) : vt, 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;
@@ -483,7 +483,7 @@ var Ct = class {
 		this.securityByPassToken !== e && (this.securityByPassToken = e, this.resetPageCache());
 	}
 	setPageSize(e) {
-		let t = Number.isFinite(e) && e >= 1 ? Math.floor(e) : _t;
+		let t = Number.isFinite(e) && e >= 1 ? Math.floor(e) : vt;
 		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()));
@@ -492,25 +492,25 @@ var Ct = class {
 		if (e < i || this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < i)) return this.data;
 		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_${B}`, d = `path_${V}`, f = c ? [u, d] : [...new Set([
+		let l = n ? `path_${n}` : void 0, u = `path_${z}`, d = `path_${B}`, 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 ft({
+			let i = await pt({
 				consistency: this.consistency,
 				countPerPage: this.pageSize,
 				directParentFolderIdentifier: this.folderId,
 				extraFields: [...t, ...f],
-				getPermanentAssetsPaths: le(this.host.ownerDocument.defaultView),
+				getPermanentAssetsPaths: ce(this.host.ownerDocument.defaultView),
 				isSiteBuilder: this.isSiteBuilder,
 				limitedDocTypes: [
-					M.Image,
-					M.Audio,
-					M.Video,
-					M.Multimedia
+					j.Image,
+					j.Audio,
+					j.Video,
+					j.Multimedia
 				],
 				pageNumber: e,
 				searchTerm: "",
@@ -524,7 +524,7 @@ var Ct = class {
 				let e = Math.min(this.maxEnd, i.totalCount);
 				this.totalCount = e, this.data = Array.from({ length: e }, () => ({
 					alt: "",
-					id: `temp-${ye()}`,
+					id: `temp-${be()}`,
 					name: "",
 					src: ""
 				}));
@@ -533,7 +533,7 @@ var Ct = 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 } = St({
+					let s = i.items[e], { maxHeight: l, maxWidth: u, src: d, srcset: f } = Ct({
 						autoFormat: this.autoFormat,
 						buildSrcset: this.buildSrcset,
 						docType: s.docType,
@@ -544,7 +544,7 @@ var Ct = class {
 						size: s.size,
 						useExpiringAssetUrls: c
 					}), p = d, m = f;
-					!c && p && o && o.length > 0 && (p = fe(p, o), m = ""), this.data[a] = {
+					!c && p && o && o.length > 0 && (p = de(p, o), m = ""), this.data[a] = {
 						alt: s.name,
 						docType: s.docType,
 						extension: s.extension,
@@ -587,39 +587,39 @@ var Ct = class {
 	}
 	async fetchImagesByIDs({ extraFields: e = [], format: t, manualFormat: n = !0, recordIds: r, throwOnError: i = !1, transformations: a }) {
 		if (r.length === 0) return [];
-		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([
+		let o = me(this.host.ownerDocument.defaultView), s = t ? `path_${t}` : void 0, c = `path_${z}`, l = `path_${B}`, u = o ? [c, l] : [...new Set([
 			s,
 			c,
 			l
-		].filter((e) => !!e))], d = [I, ...o ? [] : [Ve]], f = [...e, F];
-		return (await dt({
+		].filter((e) => !!e))], d = [F, ...o ? [] : [He]], f = [...e, P];
+		return (await ft({
 			consistency: this.consistency,
 			extraFields: [
 				...f,
 				...u,
 				...d
 			].filter((e) => e !== ""),
-			getPermanentAssetsPaths: le(this.host.ownerDocument.defaultView),
+			getPermanentAssetsPaths: ce(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 } = St({
+			let { maxHeight: r, maxWidth: i, src: s, srcset: c } = Ct({
 				autoFormat: this.autoFormat,
 				buildSrcset: this.buildSrcset,
-				docType: e[F],
-				extension: e[I],
+				docType: e[P],
+				extension: e[F],
 				format: t,
 				item: e,
 				manualFormat: n,
-				size: e[Ve],
+				size: e[He],
 				useExpiringAssetUrls: o
 			}), l = s, u = c;
-			return !o && l && a && a.length > 0 && (l = fe(l, a), u = ""), {
+			return !o && l && a && a.length > 0 && (l = de(l, a), u = ""), {
 				alt: e.name,
-				docType: e[F],
+				docType: e[P],
 				extension: e["Document.FileExtension"] || "",
 				id: e.recordId,
 				maxHeight: r,
@@ -686,46 +686,56 @@ var Ct = class {
 	resetFolderState() {
 		this.resetPageCache();
 	}
-}, 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__panel--placeholder,.asset-link-format--formats .asset-link-format__panel--placeholder:not(:last-child){height:var(--cx-spacing-3x-small);background-color:var(--cx-color-primary);border:none;overflow:hidden}.asset-link-format__panel--placeholder>*{visibility:hidden}.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 {
+}, Tt = 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__panel--placeholder,.asset-link-format--formats .asset-link-format__panel--placeholder:not(:last-child){height:var(--cx-spacing-3x-small);background-color:var(--cx-color-primary);border:none;overflow:hidden}.asset-link-format__panel--placeholder>*{visibility:hidden}.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}`, Et = 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}`, V, H = class extends s {
+	static #e = V = this;
 	constructor(...e) {
-		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]: {
+		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 = O.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.showPositionPicker = !1, this.lastAppliedSetting = {
+			[O.Pixel]: {
 				height: 0,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: k.Pixel,
+				unit: O.Pixel,
 				width: 0,
 				x: 0,
 				y: 0
 			},
-			[k.AspectRatio]: {
+			[O.AspectRatio]: {
 				height: 1,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: k.AspectRatio,
+				unit: O.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, Tt];
-	static #t = this.dependencies = {
+	static #t = this.styles = [l, Et];
+	static #n = this.dependencies = {
 		"cx-button": _,
 		"cx-details": T,
-		"cx-divider": E,
+		"cx-divider": ge,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-input": se,
-		"cx-option": x,
-		"cx-position-picker": Oe,
-		"cx-select": C,
-		"cx-space": S,
-		"cx-typography": y
+		"cx-input": oe,
+		"cx-option": S,
+		"cx-position-picker": ke,
+		"cx-select": w,
+		"cx-space": C,
+		"cx-typography": b
 	};
+	static getRatioSize(e, t, n, r, i) {
+		return n === O.Pixel && Number.isFinite(r) && Number.isFinite(i) ? re(r, i, e, t) : {
+			height: t,
+			width: e
+		};
+	}
 	get selectedMode() {
 		return this.cropModes.find((e) => e.value === this.cropMode);
 	}
+	get hasMaxSize() {
+		return Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight);
+	}
 	async handleCropModeChange() {
 		if (typeof this.cropMode == "string" && /^\d+:\d+$/.test(this.cropMode)) {
 			let [e, t] = this.cropMode.split(":").map(Number);
@@ -733,11 +743,11 @@ var Ct = class {
 			return;
 		}
 		if (this.keepAspectRatio) {
-			if (this.unit === k.Pixel && this.width && this.height) {
+			if (this.unit === O.Pixel && this.width && this.height) {
 				this.aspectRatio = this.width / this.height;
 				return;
 			}
-			if (this.unit === k.AspectRatio && this.ratioWidth && this.ratioHeight) {
+			if (this.unit === O.AspectRatio && this.ratioWidth && this.ratioHeight) {
 				this.aspectRatio = this.ratioWidth / this.ratioHeight;
 				return;
 			}
@@ -765,9 +775,9 @@ var Ct = class {
 			this.invalidWidth = !0;
 			return;
 		}
-		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: {
+		this.invalidWidth = !1, this.unit === O.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1));
+		let n = this.unit === O.Pixel ? this.height : this.ratioHeight, r = !1;
+		this.keepAspectRatio && (n = Math.max(Math.round(t / this.aspectRatio), 1)), this.unit === O.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,
@@ -781,9 +791,9 @@ var Ct = class {
 			this.invalidHeight = !0;
 			return;
 		}
-		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: {
+		this.invalidHeight = !1, this.unit === O.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1));
+		let n = this.unit === O.Pixel ? this.width : this.ratioWidth, r = !1;
+		this.keepAspectRatio && (n = Math.max(Math.round(t * this.aspectRatio), 1)), this.unit === O.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,
@@ -794,29 +804,19 @@ var Ct = 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[k.Pixel].height,
+			height: this.lastAppliedSetting[O.Pixel].height,
 			keepAspectRatio: !1,
 			silent: !0,
-			unit: k.Pixel,
-			width: this.lastAppliedSetting[k.Pixel].width
+			unit: O.Pixel,
+			width: this.lastAppliedSetting[O.Pixel].width
 		} });
 		else if (!n) {
-			let [e, n] = t.split(":").map(Number);
-			if (this.unit === k.Pixel) {
-				let t = e, r = n;
-				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: k.Pixel,
-					width: t
-				} });
-			} else this.emit("cx-asset-link-format-crop-change", { detail: {
-				height: n,
-				keepAspectRatio: !0,
+			let [e, n] = t.split(":").map(Number), r = this.unit === O.Pixel && this.hasMaxSize ? O.Pixel : O.AspectRatio;
+			this.emit("cx-asset-link-format-crop-change", { detail: {
+				...V.getRatioSize(e, n, r, this.maxWidth, this.maxHeight),
+				keepAspectRatio: r === O.Pixel || !this.inline,
 				silent: !0,
-				unit: k.AspectRatio,
-				width: e
+				unit: r
 			} });
 		}
 		this.emit("cx-asset-link-format-crop-mode-change", { detail: { mode: t } });
@@ -829,18 +829,38 @@ var Ct = class {
 		this.emit("cx-asset-link-format-crop-position-change", { detail: { position: this.positionPicker.value } });
 	}
 	onUnitChange(e) {
-		e.target.value === k.AspectRatio ? this.emit("cx-asset-link-format-crop-change", { detail: {
-			height: this.lastAppliedSetting[k.AspectRatio].height,
-			keepAspectRatio: this.keepAspectRatio,
-			unit: k.AspectRatio,
-			width: this.lastAppliedSetting[k.AspectRatio].width
-		} }) : this.emit("cx-asset-link-format-crop-change", { detail: {
-			height: this.lastAppliedSetting[k.Pixel].height,
+		let t = e.target.value === O.AspectRatio ? O.AspectRatio : O.Pixel;
+		if (this.inline && !this.selectedMode?.auto) {
+			this.emit("cx-asset-link-format-crop-change", { detail: {
+				...this.#r(t),
+				unit: t
+			} });
+			return;
+		}
+		this.emit("cx-asset-link-format-crop-change", { detail: {
+			height: this.lastAppliedSetting[t].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: k.Pixel,
-			width: this.lastAppliedSetting[k.Pixel].width
+			unit: t,
+			width: this.lastAppliedSetting[t].width
 		} }), this.emit("cx-asset-link-format-crop-mode-change", { detail: { mode: "free" } });
 	}
+	#r(e) {
+		let t = e === O.Pixel;
+		if (/^\d+:\d+$/.test(this.cropMode)) {
+			let [n, r] = this.cropMode.split(":").map(Number);
+			return {
+				...V.getRatioSize(n, r, e, this.maxWidth, this.maxHeight),
+				keepAspectRatio: t
+			};
+		}
+		return e === O.AspectRatio ? {
+			...y(this.width, this.height),
+			keepAspectRatio: t
+		} : {
+			...V.getRatioSize(this.ratioWidth, this.ratioHeight, e, this.maxWidth, this.maxHeight),
+			keepAspectRatio: t
+		};
+	}
 	handleInputChange(e) {
 		e.stopPropagation(), this.emit("cx-asset-link-format-crop-changed");
 	}
@@ -860,14 +880,14 @@ var Ct = 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 === k.Pixel ? this.height : this.ratioHeight,
+			height: this.unit === O.Pixel ? this.height : this.ratioHeight,
 			keepAspectRatio: !this.keepAspectRatio,
 			unit: this.unit,
-			width: this.unit === k.Pixel ? this.width : this.ratioWidth
+			width: this.unit === O.Pixel ? this.width : this.ratioWidth
 		} });
 	}
 	getSizeMaskBlocks(e) {
-		let t = this.unit === k.Pixel && e >= 1 ? e : Infinity;
+		let t = this.unit === O.Pixel && e >= 1 ? e : Infinity;
 		return { num: {
 			autofix: !0,
 			mask: Number,
@@ -879,18 +899,18 @@ var Ct = class {
 	}
 	render() {
 		let t = this.cropModes.filter((e) => !e.auto), n = this.cropModes.filter((e) => e.auto);
-		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>`)}
+		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}>${x(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>`)}
-              ${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">
+              ${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=${this.getSizeMaskBlocks(this.maxWidth)} value=${this.unit === O.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=${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">
+              </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 || this.inline && this.unit === O.AspectRatio}></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 === O.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=${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>`)}
+              </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=${O.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${O.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>`)}
         ${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", 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({
+a([c(".details"), o("design:type", T === void 0 ? Object : T)], H.prototype, "base", void 0), a([c("cx-position-picker"), o("design:type", ke === void 0 ? Object : ke)], H.prototype, "positionPicker", void 0), a([r({
 	reflect: !0,
 	type: Boolean
 }), o("design:type", Boolean)], H.prototype, "open", void 0), a([r({
@@ -929,7 +949,7 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], H.prototype, "ba
 }), o("design:type", Number)], H.prototype, "percentageHeight", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", k === void 0 ? Object : k)], H.prototype, "unit", void 0), a([r({
+}), o("design:type", O === void 0 ? Object : O)], H.prototype, "unit", void 0), a([r({
 	attribute: "disabled-apply",
 	reflect: !0,
 	type: Boolean
@@ -984,15 +1004,15 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], H.prototype, "ba
 	o("design:type", Function),
 	o("design:paramtypes", []),
 	o("design:returntype", Promise)
-], 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: {
+], H.prototype, "handleOpenChange", null), H = V = a([u("cx-asset-link-format-crop")], H);
+var Dt = H, Ot = 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}`, kt = {
+	[k.Percent]: { num: {
 		mask: Number,
 		min: 1,
 		radix: ".",
 		scale: 2
 	} },
-	[A.Pixel]: { num: {
+	[k.Pixel]: { num: {
 		mask: Number,
 		min: 1,
 		radix: ".",
@@ -1000,33 +1020,33 @@ var Et = H, Dt = t`:host{display:block}.asset-link-format__dimensions-select{wid
 	} }
 }, 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]: {
+		super(...e), this.localize = new d(this), this.open = !1, this.inline = !1, this.applyBehavior = M.Legacy, this.loading = !1, this.items = [], this.canCustom = !1, this.customDimensionsUnit = k.Pixel, this.dimensionsSelection = "", this.customDimensionsDrafts = {
+			[k.Percent]: {
 				height: "100",
 				width: "100"
 			},
-			[A.Pixel]: {
+			[k.Pixel]: {
 				height: "1080",
 				width: "1920"
 			}
 		};
 	}
-	static #e = this.styles = [l, Dt];
+	static #e = this.styles = [l, Ot];
 	static #t = this.dependencies = {
 		"cx-button": _,
 		"cx-details": T,
-		"cx-divider": E,
+		"cx-divider": ge,
 		"cx-icon": h,
-		"cx-input": se,
-		"cx-menu-label": _e,
-		"cx-option": x,
-		"cx-select": C,
-		"cx-space": S,
-		"cx-typography": y
+		"cx-input": oe,
+		"cx-menu-label": ve,
+		"cx-option": S,
+		"cx-select": w,
+		"cx-space": C,
+		"cx-typography": b
 	};
 	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.dimensionsSelection = e?.mode === E.Custom ? E.Custom : e?.mode === E.Preset ? `preset:${e.value}` : "", e?.mode === E.Custom && (this.customDimensionsUnit = e.unit, this.customDimensionsDrafts = {
 			...this.customDimensionsDrafts,
 			[e.unit]: {
 				height: String(e.height),
@@ -1039,26 +1059,26 @@ var Et = H, Dt = t`:host{display:block}.asset-link-format__dimensions-select{wid
 	}
 	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 {
+		if (!(!Number.isFinite(n) || !Number.isFinite(r) || n < 1 || r < 1) && (e !== k.Pixel || Number.isInteger(n) && Number.isInteger(r))) return {
 			height: r,
-			mode: D.Custom,
+			mode: E.Custom,
 			unit: e,
 			width: n
 		};
 	}
 	get pendingValue() {
-		if (this.dimensionsSelection === D.Custom) return this.getCustomDimensionsValue();
+		if (this.dimensionsSelection === E.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,
+				mode: E.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;
+		return !e || !this.value || e.mode !== this.value.mode ? !e : e.mode === E.Preset && this.value.mode === E.Preset ? e.value === this.value.value : e.mode === E.Custom && this.value.mode === E.Custom && e.height === this.value.height && e.unit === this.value.unit && e.width === this.value.width;
 	}
 	applyPendingValue() {
 		let e = this.pendingValue;
@@ -1067,11 +1087,11 @@ var Et = H, Dt = t`:host{display:block}.asset-link-format__dimensions-select{wid
 	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();
+		if (t === E.Custom && this.canCustom) this.dimensionsSelection = E.Custom, this.applyBehavior !== M.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,
+			e && (this.dimensionsSelection = t, this.applyBehavior !== M.Manual && this.emitDimensionsValue({
+				mode: E.Preset,
 				value: e.value
 			}));
 		}
@@ -1088,12 +1108,12 @@ var Et = H, Dt = t`:host{display:block}.asset-link-format__dimensions-select{wid
 		};
 	}
 	onDimensionsCustomChange(e) {
-		e.target === e.currentTarget && !this.loading && this.canCustom && e.currentTarget.reportValidity() && this.applyBehavior !== N.Manual && this.applyPendingValue();
+		e.target === e.currentTarget && !this.loading && this.canCustom && e.currentTarget.reportValidity() && this.applyBehavior !== M.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());
+		(t === k.Pixel || t === k.Percent) && (this.customDimensionsUnit = t, this.applyBehavior !== M.Manual && this.applyPendingValue());
 	}
 	onApply() {
 		!this.loading && !this.applyDisabled && this.applyPendingValue();
@@ -1106,21 +1126,21 @@ var Et = H, Dt = t`:host{display:block}.asset-link-format__dimensions-select{wid
 	}
 	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>`;
+		return e`<cx-space class="asset-link-format__dimensions-custom" spacing="small"><cx-input name="width" mask="num" .maskBlocks=${kt[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=${kt[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=${k.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${k.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`
+		let t = this.canCustom && this.dimensionsSelection === E.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 === E.Custom && !this.canCustom ? "" : this.dimensionsSelection} ?disabled=${this.loading} hoist @cx-change=${this.onDimensionsSelectChange}>${x(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>`;
+            ${m(this.items.length > 0, () => e`<cx-divider></cx-divider>`)}<cx-option value=${E.Custom}><cx-icon slot="prefix" name="edit"></cx-icon>${this.localize.term("custom")}</cx-option>`)}</cx-select>${m(t, () => this.renderCustomDimensions())}
+        ${m(this.applyBehavior === M.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()}
@@ -1155,23 +1175,23 @@ a([r({
 	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 {
+var At = U, jt = 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, At];
+	static #e = this.styles = [l, jt];
 	static #t = this.dependencies = {
-		"cx-option": x,
-		"cx-select": C,
-		"cx-space": S,
-		"cx-typography": y
+		"cx-option": S,
+		"cx-select": w,
+		"cx-space": C,
+		"cx-typography": b
 	};
 	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}>${b(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}>${x(this.items, (e) => e.value, (t) => e`<cx-option value=${t.value}>${t.displayName}</cx-option>`)}</cx-select></cx-space>`;
 	}
 };
 a([r({
@@ -1181,23 +1201,23 @@ a([r({
 	reflect: !1,
 	type: Array
 }), 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 {
+var Mt = W, Nt = t`cx-details::part(base){border-bottom-width:0}`, Pt = "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, Mt];
+	static #e = this.styles = [l, Nt];
 	static #t = this.dependencies = {
 		"cx-button": _,
 		"cx-details": T,
-		"cx-divider": E,
+		"cx-divider": ge,
 		"cx-icon": h,
-		"cx-option": x,
-		"cx-select": C,
-		"cx-space": S,
-		"cx-typography": y
+		"cx-option": S,
+		"cx-select": w,
+		"cx-space": C,
+		"cx-typography": b
 	};
 	get committedValue() {
-		return this.autoFormat ? Nt : this.value;
+		return this.autoFormat ? Pt : this.value;
 	}
 	handleValueChange() {
 		this.scopedValue = this.committedValue;
@@ -1228,8 +1248,8 @@ var jt = W, Mt = t`cx-details::part(base){border-bottom-width:0}`, Nt = "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}>${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>`;
+		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=${Pt}>${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", T === void 0 ? Object : T)], G.prototype, "base", void 0), a([r({
@@ -1264,22 +1284,22 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], G.prototype, "ba
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
 ], 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 {
+var Ft = G, It = 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.inline = !1, this.applyBehavior = N.Legacy, this.value = 100, this.items = [], this.customSelected = !1, this.loading = !1, this.scopedValue = 100;
+		super(...e), this.localize = new d(this), this.open = !1, this.inline = !1, this.applyBehavior = M.Legacy, this.value = 100, this.items = [], this.customSelected = !1, this.loading = !1, this.scopedValue = 100;
 	}
-	static #e = this.styles = [l, Ft];
+	static #e = this.styles = [l, It];
 	static #t = this.dependencies = {
 		"cx-button": _,
 		"cx-details": T,
-		"cx-divider": E,
+		"cx-divider": ge,
 		"cx-icon": h,
-		"cx-input": se,
-		"cx-option": x,
-		"cx-select": C,
-		"cx-space": S,
+		"cx-input": oe,
+		"cx-option": S,
+		"cx-select": w,
+		"cx-space": C,
 		"cx-tooltip": te,
-		"cx-typography": y
+		"cx-typography": b
 	};
 	get invalidValue() {
 		return isNaN(Number(this.scopedValue)) || Number(this.scopedValue) < 1 || Number(this.scopedValue) > 100 || this.value === this.scopedValue;
@@ -1292,14 +1312,14 @@ var Pt = G, Ft = t`cx-details::part(base){border-bottom-width:0}.asset-link-form
 		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());
+		!n || !Number.isFinite(n.value) || n.value < 1 || n.value > 100 || (this.scopedValue = n.value, n.value !== this.value && this.applyBehavior !== M.Manual && this.handleApply());
 	}
 	handleQualityChange(e) {
 		let t = e.target.value;
 		this.customSelected = !0, this.scopedValue = Number(t);
 	}
 	handleQualityCommit(e) {
-		e.target === e.currentTarget && this.applyBehavior === N.Automatic && this.handleApply();
+		e.target === e.currentTarget && this.applyBehavior === M.Automatic && this.handleApply();
 	}
 	handleApply() {
 		this.loading || this.invalidValue || this.emit("cx-asset-link-format-quality-change", { detail: Number(this.scopedValue) });
@@ -1312,7 +1332,7 @@ var Pt = G, Ft = t`cx-details::part(base){border-bottom-width:0}.asset-link-form
 	}
 	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}
+		return e`<cx-select data-label=${this.localize.term("quality")} value=${t} ?disabled=${this.loading} hoist @cx-change=${this.handlePresetChange}>${x(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() {
@@ -1330,8 +1350,8 @@ var Pt = G, Ft = t`cx-details::part(base){border-bottom-width:0}.asset-link-form
 			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>`;
+		} }} value=${this.scopedValue.toString()} style=${g({ flex: "1" })} @cx-input=${this.handleQualityChange} @cx-change=${this.handleQualityCommit}></cx-input></cx-tooltip>${m(this.applyBehavior === M.Legacy, () => this.renderApplyButton())}</cx-space>`)}
+        ${m(this.applyBehavior === M.Manual, () => this.renderApplyButton())}</cx-space>`;
 	}
 	render() {
 		return this.inline ? e`<div class="asset-link-format__quality-inline">${this.renderSummary()}
@@ -1363,30 +1383,30 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], K.prototype, "ba
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
 ], 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 {
+var Lt = K, Rt = 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 = k.Pixel, this.lastAppliedSetting = {
-			[k.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 = O.Pixel, this.lastAppliedSetting = {
+			[O.Pixel]: {
 				height: 0,
 				width: 0
 			},
-			[k.AspectRatio]: {
+			[O.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, Lt];
+	static #e = this.styles = [l, Rt];
 	static #t = this.dependencies = {
 		"cx-button": _,
 		"cx-details": T,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-input": se,
-		"cx-option": x,
-		"cx-select": C,
-		"cx-space": S,
-		"cx-typography": y
+		"cx-input": oe,
+		"cx-option": S,
+		"cx-select": w,
+		"cx-space": C,
+		"cx-typography": b
 	};
 	get disabledApply() {
 		return this.lastAppliedSetting[this.unit].width === this.width && this.lastAppliedSetting[this.unit].height === this.height;
@@ -1394,11 +1414,11 @@ var It = K, Lt = 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 === k.AspectRatio && this.ratioWidth && this.ratioHeight) {
+			if (this.unit === O.AspectRatio && this.ratioWidth && this.ratioHeight) {
 				this.aspectRatio = this.ratioWidth / this.ratioHeight;
 				return;
 			}
-			if (this.unit === k.Pixel && !e && this.width && this.height) {
+			if (this.unit === O.Pixel && !e && this.width && this.height) {
 				this.aspectRatio = this.width / this.height;
 				return;
 			}
@@ -1426,8 +1446,8 @@ var It = K, Lt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 			this.invalidWidth = !0;
 			return;
 		}
-		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.invalidWidth = !1, this.unit === O.Pixel && (t = Math.max(Math.min(t, this.maxWidth), 1)), e.target.value = t.toString();
+		let n = this.unit === O.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,
@@ -1441,8 +1461,8 @@ var It = K, Lt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 			this.invalidHeight = !0;
 			return;
 		}
-		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.invalidHeight = !1, this.unit === O.Pixel && (t = Math.max(Math.min(t, this.maxHeight), 1)), e.target.value = t.toString();
+		let n = this.unit === O.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,
@@ -1451,16 +1471,16 @@ var It = K, Lt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 		} });
 	}
 	onUnitChange(e) {
-		e.target.value === k.AspectRatio ? this.emit("cx-asset-link-format-resize-change", { detail: {
-			height: this.lastAppliedSetting[k.AspectRatio].height,
+		e.target.value === O.AspectRatio ? this.emit("cx-asset-link-format-resize-change", { detail: {
+			height: this.lastAppliedSetting[O.AspectRatio].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: k.AspectRatio,
-			width: this.lastAppliedSetting[k.AspectRatio].width
+			unit: O.AspectRatio,
+			width: this.lastAppliedSetting[O.AspectRatio].width
 		} }) : this.emit("cx-asset-link-format-resize-change", { detail: {
-			height: this.lastAppliedSetting[k.Pixel].height,
+			height: this.lastAppliedSetting[O.Pixel].height,
 			keepAspectRatio: this.keepAspectRatio,
-			unit: k.Pixel,
-			width: this.lastAppliedSetting[k.Pixel].width
+			unit: O.Pixel,
+			width: this.lastAppliedSetting[O.Pixel].width
 		} });
 	}
 	handleApply() {
@@ -1478,10 +1498,10 @@ var It = K, Lt = 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 === k.Pixel ? this.height : this.ratioHeight,
+			height: this.unit === O.Pixel ? this.height : this.ratioHeight,
 			keepAspectRatio: !this.keepAspectRatio,
 			unit: this.unit,
-			width: this.unit === k.Pixel ? this.width : this.ratioWidth
+			width: this.unit === O.Pixel ? this.width : this.ratioWidth
 		} });
 	}
 	render() {
@@ -1490,16 +1510,16 @@ var It = K, Lt = t`cx-details::part(base){border-bottom-width:0}cx-space{width:1
 			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">
+		} }} value=${this.unit === O.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,
 			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">
+		} }} value=${this.unit === O.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=${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>`;
+              </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=${O.Pixel}>${this.localize.term("pixels")}</cx-option><cx-option value=${O.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", T === void 0 ? Object : T)], q.prototype, "base", void 0), a([r({
@@ -1530,7 +1550,7 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], q.prototype, "ba
 }), o("design:type", Number)], q.prototype, "ratioHeight", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", k === void 0 ? Object : k)], q.prototype, "unit", void 0), a([r({
+}), o("design:type", O === void 0 ? Object : O)], q.prototype, "unit", void 0), a([r({
 	attribute: "last-applied-setting",
 	reflect: !1,
 	type: Object
@@ -1559,19 +1579,19 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], q.prototype, "ba
 	o("design:paramtypes", []),
 	o("design:returntype", Promise)
 ], 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 {
+var zt = q, Bt = 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.inline = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
 	}
-	static #e = this.styles = [l, zt];
+	static #e = this.styles = [l, Bt];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-button-group": ae,
+		"cx-button-group": ie,
 		"cx-details": T,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-space": S,
-		"cx-typography": y
+		"cx-space": C,
+		"cx-typography": b
 	};
 	handleOpenChange() {
 		this.open || this.emit("cx-asset-link-format-rotation-change", { detail: this.lastAppliedValue });
@@ -1641,19 +1661,19 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], J.prototype, "ba
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
 ], 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 {
+var Vt = J, Ht = 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, Vt];
+	static #e = this.styles = [l, Ht];
 	static #t = this.dependencies = {
 		"cx-button": _,
-		"cx-checkbox": oe,
+		"cx-checkbox": ae,
 		"cx-details": T,
 		"cx-icon": h,
-		"cx-space": S,
+		"cx-space": C,
 		"cx-tooltip": te,
-		"cx-typography": y
+		"cx-typography": b
 	};
 	handleApply(e) {
 		this.emit("cx-asset-link-format-metadata-change", { detail: e.target.checked });
@@ -1675,57 +1695,57 @@ a([c(".details"), o("design:type", T === void 0 ? Object : T)], Y.prototype, "ba
 	reflect: !0,
 	type: Boolean
 }), 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
+var Ut = Y, X, Wt = {
+	[A.Crop]: D.Crop,
+	[A.Dimensions]: D.Dimensions,
+	[A.Quality]: D.Quality,
+	[A.Resize]: D.Resize,
+	[A.Rotate]: D.Rotate
 }, Z = [
-	j.Proxy,
-	j.Crop,
-	j.Resize,
-	j.Rotate,
-	j.Quality,
-	j.Metadata
-], Wt = [
-	j.Proxy,
-	j.Dimensions,
+	A.Proxy,
+	A.Crop,
+	A.Resize,
+	A.Rotate,
+	A.Quality,
+	A.Metadata
+], Gt = [
+	A.Proxy,
+	A.Dimensions,
 	...Z.slice(1)
 ], Q = [
-	j.Dimensions,
-	j.Crop,
-	j.Resize,
-	j.Rotate,
-	j.Quality
+	A.Dimensions,
+	A.Crop,
+	A.Resize,
+	A.Rotate,
+	A.Quality
 ], $ = class extends s {
 	static #e = X = this;
-	static #t = this.styles = [l, wt];
+	static #t = this.styles = [l, Tt];
 	static #n = this.dependencies = {
-		"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-asset-link-format-crop": Dt,
+		"cx-asset-link-format-dimensions": At,
+		"cx-asset-link-format-extension": Mt,
+		"cx-asset-link-format-metadata": Ut,
+		"cx-asset-link-format-proxy": Ft,
+		"cx-asset-link-format-quality": Lt,
+		"cx-asset-link-format-resize": zt,
+		"cx-asset-link-format-rotation": Vt,
 		"cx-button": _,
 		"cx-icon": h,
 		"cx-icon-button": p,
-		"cx-space": S,
-		"cx-switch": ve,
-		"cx-typography": y,
-		"cx-visually-hidden": ce
+		"cx-space": C,
+		"cx-switch": ye,
+		"cx-typography": b,
+		"cx-visually-hidden": se
 	};
 	static getTransformExtension(e) {
-		return !e || bt(e) ? e : "jpg";
+		return !e || xt(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;
+		let n = t.map((e) => Wt[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) {
@@ -1736,8 +1756,8 @@ var Ht = Y, X, Ut = {
 		} : 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 {
+		if (e?.mode === E.Preset) return X.getDimensionsPresetSize(e.value);
+		if (e?.mode === E.Custom && e.unit === k.Pixel && Number.isInteger(e.width) && Number.isInteger(e.height) && e.width >= 1 && e.height >= 1) return {
 			height: e.height,
 			width: e.width
 		};
@@ -1745,15 +1765,15 @@ var Ht = Y, X, Ut = {
 	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 ? {
+			case D.Resize: return i !== O.AspectRatio && o ? {
 				height: Math.round(n),
 				width: Math.round(a)
 			} : void 0;
-			case O.Dimensions: return o ? {
+			case D.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: {
+			case D.Rotate: {
 				if (!e) return;
 				let t = r * Math.PI / 180, n = Math.abs(Math.cos(t)), i = Math.abs(Math.sin(t));
 				return {
@@ -1768,24 +1788,24 @@ var Ht = Y, X, Ut = {
 		return this.reorderable && !this.asset;
 	}
 	get isFormatsLayout() {
-		return this.layout === ge.Formats;
+		return this.layout === _e.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 === O.Crop)?.value.unit ?? k.Pixel;
+		return this.transformations.findLast((e) => e.key === D.Crop)?.value.unit ?? O.Pixel;
 	}
 	get lastAppliedCropFocusMode() {
-		return this.transformations.findLast((e) => e.key === O.Crop)?.value.focusMode ?? "manual";
+		return this.transformations.findLast((e) => e.key === D.Crop)?.value.focusMode ?? "manual";
 	}
 	get lastAppliedCropPosition() {
-		return this.transformations.findLast((e) => e.key === O.Crop)?.value.position ?? v.CenterCenter;
+		return this.transformations.findLast((e) => e.key === D.Crop)?.value.position ?? v.CenterCenter;
 	}
 	get disabledCropApply() {
 		if (!this.asset && this.cropSize.unit !== this.lastAppliedCropUnit) return !1;
-		if (this.cropSize.unit === k.AspectRatio && !this.asset) {
-			let e = this.lastCropSize[k.AspectRatio];
+		if (this.cropSize.unit === O.AspectRatio && !this.asset) {
+			let e = this.lastCropSize[O.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;
@@ -1796,14 +1816,14 @@ var Ht = Y, X, Ut = {
 			"width",
 			"x",
 			"y"
-		]) if (this.cropSize[e] !== this.lastCropSize[k.Pixel][e]) return !1;
+		]) if (this.cropSize[e] !== this.lastCropSize[O.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();
+		let e = new Set(Object.values(A)), t = /* @__PURE__ */ new Set();
 		for (let n of this.parts) e.has(n) && t.add(n);
 		return [...t];
 	}
@@ -1814,11 +1834,11 @@ var Ht = Y, X, Ut = {
 		};
 	}
 	get stepsBeforeCrop() {
-		let e = this.transformations.findIndex((e) => e.key === O.Crop);
+		let e = this.transformations.findIndex((e) => e.key === D.Crop);
 		if (e >= 0) return this.transformations.slice(0, e);
 		if (!this.canReorder) return this.transformations;
 		let t = {
-			key: O.Crop,
+			key: D.Crop,
 			value: {}
 		}, n = X.orderTransformations([...this.transformations, t], this.activeParts);
 		return n.slice(0, n.indexOf(t));
@@ -1831,44 +1851,44 @@ var Ht = Y, X, Ut = {
 	}
 	get lastCropSize() {
 		if (!this.asset) {
-			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]: {
+			let e = this.transformations.findLast((e) => e.key === D.Crop);
+			if (e?.value.unit === O.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
+				[O.AspectRatio]: {
 					height: e.value.ratioHeight,
 					percentageHeight: 100,
 					percentageWidth: 100,
-					unit: k.AspectRatio,
+					unit: O.AspectRatio,
 					width: e.value.ratioWidth,
 					x: 0,
 					y: 0
 				},
-				[k.Pixel]: {
+				[O.Pixel]: {
 					height: 1,
 					percentageHeight: 100,
 					percentageWidth: 100,
-					unit: k.Pixel,
+					unit: O.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 = re(n, t);
+				let { height: t, width: n, x: r = 0, y: i = 0 } = e.value, a = y(n, t);
 				return {
-					[k.AspectRatio]: {
+					[O.AspectRatio]: {
 						height: a.height,
 						percentageHeight: 100,
 						percentageWidth: 100,
-						unit: k.AspectRatio,
+						unit: O.AspectRatio,
 						width: a.width,
 						x: 0,
 						y: 0
 					},
-					[k.Pixel]: {
+					[O.Pixel]: {
 						height: t,
 						percentageHeight: 100,
 						percentageWidth: 100,
-						unit: k.Pixel,
+						unit: O.Pixel,
 						width: n,
 						x: r,
 						y: i
@@ -1876,25 +1896,25 @@ var Ht = Y, X, Ut = {
 				};
 			}
 		}
-		let e = this.lastImageSize.width && this.lastImageSize.height ? re(this.lastImageSize.width, this.lastImageSize.height) : {
+		let e = this.lastImageSize.width && this.lastImageSize.height ? y(this.lastImageSize.width, this.lastImageSize.height) : {
 			height: 1,
 			width: 1
 		};
 		return {
-			[k.AspectRatio]: {
+			[O.AspectRatio]: {
 				height: e.height,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: k.AspectRatio,
+				unit: O.AspectRatio,
 				width: e.width,
 				x: 0,
 				y: 0
 			},
-			[k.Pixel]: {
+			[O.Pixel]: {
 				height: this.lastImageSize.height,
 				percentageHeight: 100,
 				percentageWidth: 100,
-				unit: k.Pixel,
+				unit: O.Pixel,
 				width: this.lastImageSize.width,
 				x: 0,
 				y: 0
@@ -1903,57 +1923,57 @@ var Ht = Y, X, Ut = {
 	}
 	get lastResizeSize() {
 		if (!this.asset) {
-			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]: {
+			let e = this.transformations.findLast((e) => e.key === D.Resize);
+			if (e?.value.unit === O.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) return {
+				[O.AspectRatio]: {
 					height: e.value.ratioHeight,
-					unit: k.AspectRatio,
+					unit: O.AspectRatio,
 					width: e.value.ratioWidth
 				},
-				[k.Pixel]: {
+				[O.Pixel]: {
 					height: 1,
-					unit: k.Pixel,
+					unit: O.Pixel,
 					width: 1
 				}
 			};
 			if (e?.value.width && e?.value.height) {
-				let { height: t, width: n } = e.value, r = re(n, t);
+				let { height: t, width: n } = e.value, r = y(n, t);
 				return {
-					[k.AspectRatio]: {
+					[O.AspectRatio]: {
 						height: r.height,
-						unit: k.AspectRatio,
+						unit: O.AspectRatio,
 						width: r.width
 					},
-					[k.Pixel]: {
+					[O.Pixel]: {
 						height: t,
-						unit: k.Pixel,
+						unit: O.Pixel,
 						width: n
 					}
 				};
 			}
 		}
-		let e = this.lastImageSize.width && this.lastImageSize.height ? re(this.lastImageSize.width, this.lastImageSize.height) : {
+		let e = this.lastImageSize.width && this.lastImageSize.height ? y(this.lastImageSize.width, this.lastImageSize.height) : {
 			height: 1,
 			width: 1
 		};
 		return {
-			[k.AspectRatio]: {
+			[O.AspectRatio]: {
 				height: e.height,
-				unit: k.AspectRatio,
+				unit: O.AspectRatio,
 				width: e.width
 			},
-			[k.Pixel]: {
+			[O.Pixel]: {
 				height: this.lastImageSize.height,
-				unit: k.Pixel,
+				unit: O.Pixel,
 				width: this.lastImageSize.width
 			}
 		};
 	}
 	get lastRotation() {
-		return this.asset ? 0 : this.transformations.findLast((e) => e.key === O.Rotate)?.value.rotation ?? 0;
+		return this.asset ? 0 : this.transformations.findLast((e) => e.key === D.Rotate)?.value.rotation ?? 0;
 	}
 	get transformationString() {
-		return w({
+		return fe({
 			asset: this.asset,
 			baseUrl: "",
 			parameters: this.parameters,
@@ -2021,7 +2041,7 @@ var Ht = Y, X, Ut = {
 				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.parts = this.initialParts, this.layout = ge.Accordion, this.cropEnabled = !1, this.reorderable = !1, this.dimensionsItems = [], this.qualityItems = [], this.canCustomDimensions = !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 = _e.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 = {
@@ -2029,7 +2049,7 @@ var Ht = Y, X, Ut = {
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
+			unit: O.Pixel,
 			width: 1
 		}, this.cropSize = {
 			cropMode: "free",
@@ -2041,14 +2061,14 @@ var Ht = Y, X, Ut = {
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
+			unit: O.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.reorderAnnouncement = "", this.orderUndo = [], this.apiGetTransformAssetLink = ct, this.apiGetCropFocusMode = pt, 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 = lt, this.apiGetCropFocusMode = mt, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
 	}
 	runConnectedCallback() {
 		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)));
@@ -2067,7 +2087,7 @@ var Ht = Y, X, Ut = {
 		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 === O.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
+				this.loading = !1, e?.relativePath && this.selectedFormat && (this.lastAction === D.Rotate && (this.rotation = 0), this.lastAction = void 0, this.lastImageSize = {
 					height: e.height,
 					width: e.width
 				}, this.selectedFormat = {
@@ -2077,7 +2097,7 @@ var Ht = Y, X, Ut = {
 					width: e.width
 				});
 			});
-			let t = w({
+			let t = fe({
 				asset: this.asset,
 				baseUrl: "",
 				extension: this.selectedFormat.extension,
@@ -2131,7 +2151,7 @@ var Ht = Y, X, Ut = {
 		this.frozenIndex = this.transformations.length - 1;
 	}
 	upsertTransformation(e) {
-		this.asset || (this.transformations = X.uniqueTransformations(this.transformations));
+		e.key === D.Crop && (this.editedCrop = 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];
@@ -2140,12 +2160,25 @@ var Ht = Y, X, Ut = {
 		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;
+		let { height: t, ratioHeight: n, ratioWidth: r, unit: i = O.Pixel, width: a } = e.value;
+		return i === this.cropSize.unit ? i === O.AspectRatio ? r === this.cropSize.ratioWidth && n === this.cropSize.ratioHeight : a === this.cropSize.width && t === this.cropSize.height : !1;
+	}
+	#r(e) {
+		let { height: t = 0, ratioHeight: n = 0, ratioWidth: r = 0, unit: i = O.Pixel, width: a = 0 } = e.value, o = i === O.AspectRatio, s = o ? r : a, c = o ? n : t;
+		if (!s || !c) return;
+		let l = this.cropModes.filter((e) => !e.auto && /^\d+:\d+$/.test(e.value)).map(({ value: e }) => {
+			let [t, n] = e.split(":").map(Number);
+			return {
+				modeHeight: n,
+				modeWidth: t,
+				value: e
+			};
+		}), u = l.find(({ modeHeight: e, modeWidth: t }) => t * c === e * s);
+		return u || o ? u?.value : l.find(({ modeHeight: e, modeWidth: t }) => Math.abs(t * c - e * s) <= Math.max(t, e) / 2)?.value;
 	}
 	capCropToMaxSize() {
-		let e = this.transformations.find((e) => e.key === O.Crop);
-		if (this.asset || !e || (e.value.unit ?? k.Pixel) !== k.Pixel) return;
+		let e = this.transformations.find((e) => e.key === D.Crop);
+		if (this.asset || !e || (e.value.unit ?? O.Pixel) !== O.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;
@@ -2170,7 +2203,7 @@ var Ht = Y, X, Ut = {
 			(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({
+			if (this.emit("cx-asset-link-format-change", { detail: fe({
 				asset: this.asset,
 				baseUrl: "",
 				options: { omitZeroXY: !0 },
@@ -2178,34 +2211,36 @@ var Ht = Y, X, Ut = {
 				transformations: this.transformations,
 				useSession: this.useSession
 			}).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;
+			let e = this.transformations.findLast((e) => e.key === D.Crop && (e.value.unit === O.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width && e.value.height)), t = e !== void 0 && e === this.editedCrop && this.isCropPanelSize(e), r = e && !t ? this.#r(e) : void 0, i = t ? this.cropSize.cropMode : r ?? "free";
+			if (e?.value.unit === O.AspectRatio && e.value.ratioWidth && e.value.ratioHeight) {
+				let { focusMode: n, position: r, ratioHeight: a, ratioWidth: o } = e.value;
 				this.cropSize = {
 					...this.cropSize,
-					cropMode: t,
+					cropMode: i,
 					focusMode: n ?? "manual",
+					keepAspectRatio: t && this.cropSize.keepAspectRatio,
 					percentageHeight: 100,
 					percentageWidth: 100,
 					position: r ?? v.CenterCenter,
-					ratioHeight: i,
-					ratioWidth: a,
-					unit: k.AspectRatio
+					ratioHeight: a,
+					ratioWidth: o,
+					unit: O.AspectRatio
 				};
 			} else if (e) {
-				let { focusMode: n, height: r, position: i, unit: a, width: o, x: s = 0, y: c = 0 } = e.value;
+				let { focusMode: t, height: n, position: a, unit: o, width: s, x: c = 0, y: l = 0 } = e.value;
 				this.cropSize = {
 					...this.cropSize,
-					cropMode: t,
-					focusMode: n ?? "manual",
-					height: r,
+					cropMode: i,
+					focusMode: t ?? "manual",
+					height: n,
+					keepAspectRatio: r !== void 0 || this.cropSize.keepAspectRatio,
 					percentageHeight: 100,
 					percentageWidth: 100,
-					position: i ?? v.CenterCenter,
-					unit: a ?? k.Pixel,
-					width: o,
-					x: s,
-					y: c
+					position: a ?? v.CenterCenter,
+					unit: o ?? O.Pixel,
+					width: s,
+					x: c,
+					y: l
 				};
 			} else this.cropSize = {
 				...this.cropSize,
@@ -2215,46 +2250,46 @@ var Ht = Y, X, Ut = {
 				percentageHeight: 0,
 				percentageWidth: 0,
 				position: v.CenterCenter,
-				unit: k.Pixel,
+				unit: O.Pixel,
 				width: 1,
 				x: 0,
 				y: 0
 			};
-			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;
+			let a = this.transformations.findLast((e) => e.key === D.Resize && (e.value.unit === O.AspectRatio && e.value.ratioWidth && e.value.ratioHeight || e.value.width || e.value.height));
+			if (a?.value.unit === O.AspectRatio && a.value.ratioWidth && a.value.ratioHeight) {
+				let { ratioHeight: e, ratioWidth: t } = a.value;
 				this.resizeSize = {
 					...this.resizeSize,
 					ratioHeight: e,
 					ratioWidth: t,
-					unit: k.AspectRatio
+					unit: O.AspectRatio
 				};
-			} else if (r) {
-				let { height: e = 0, unit: t, width: n = 0 } = r.value;
+			} else if (a) {
+				let { height: e = 0, unit: t, width: n = 0 } = a.value;
 				this.resizeSize = {
 					...this.resizeSize,
 					height: e,
-					unit: t ?? k.Pixel,
+					unit: t ?? O.Pixel,
 					width: n
 				};
 			} else this.resizeSize = {
 				...this.resizeSize,
 				height: 1,
-				unit: k.Pixel,
+				unit: O.Pixel,
 				width: 1
 			};
-			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);
+			let o = this.transformations.findLast((e) => e.key === D.Rotate);
+			this.rotation = o?.value.rotation ?? 0;
+			let s = this.transformations.findLast((e) => e.key === D.Quality)?.value.quality ?? 100, c = this.transformations.some((e) => e.key === D.Metadata);
 			this.selectedFormat = this.selectedFormat ? {
 				...this.selectedFormat,
-				keepMetadata: o,
-				quality: a
+				keepMetadata: c,
+				quality: s
 			} : {
 				extension: "",
 				height: 0,
-				keepMetadata: o,
-				quality: a,
+				keepMetadata: c,
+				quality: s,
 				rotation: 0,
 				url: "",
 				width: 0,
@@ -2275,7 +2310,7 @@ var Ht = Y, X, Ut = {
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
+			unit: O.Pixel,
 			width: r.width
 		}, this.cropSize = {
 			cropMode: "free",
@@ -2287,12 +2322,12 @@ var Ht = Y, X, Ut = {
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
+			unit: O.Pixel,
 			width: r.width,
 			x: 0,
 			y: 0
-		}, 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.lastAction === D.Rotate && (this.rotation = 0), this.lastAction = void 0;
+		let i = this.transformations.some((e) => e.key === D.Metadata), a = this.transformations.findLast((e) => e.key === D.Quality);
 		this.selectedFormat = {
 			...this.selectedFormat,
 			height: r.height,
@@ -2301,7 +2336,7 @@ var Ht = Y, X, Ut = {
 			url: this.baseUrl && this.baseUrl.length > 0 ? `${this.baseUrl}/${r.relativePath}` : r.relativePath,
 			width: r.width
 		};
-		let o = w({
+		let o = fe({
 			asset: this.asset,
 			baseUrl: "",
 			extension: this.selectedFormat.extension,
@@ -2323,7 +2358,7 @@ var Ht = Y, X, Ut = {
 			height: Number.parseInt(this.asset.height, 10),
 			width: Number.parseInt(this.asset.width, 10)
 		});
-		let e = this.transformations.findLast((e) => e.key === O.Quality);
+		let e = this.transformations.findLast((e) => e.key === D.Quality);
 		this.selectedFormat = {
 			extension: this.asset.extension,
 			height: this.defaultSize.height,
@@ -2348,7 +2383,7 @@ var Ht = Y, X, Ut = {
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
+			unit: O.Pixel,
 			width: this.defaultSize.width,
 			x: 0,
 			y: 0
@@ -2367,7 +2402,7 @@ var Ht = Y, X, Ut = {
 		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 === O.Crop) {
+			if (e.key === D.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,
@@ -2380,7 +2415,7 @@ var Ht = Y, X, Ut = {
 					}
 				};
 			}
-			if (e.key === O.Resize) {
+			if (e.key === D.Resize) {
 				let r = e.value, i = r.width / n.formatWidth * t.formatWidth, a = r.height / n.formatHeight * t.formatHeight;
 				return {
 					...e,
@@ -2401,24 +2436,24 @@ var Ht = Y, X, Ut = {
 		}, await this.updateComplete, this.cropSize = {
 			cropMode: "free",
 			focusMode: "manual",
-			height: this.lastCropSize[k.Pixel].height,
+			height: this.lastCropSize[O.Pixel].height,
 			keepAspectRatio: !0,
 			percentageHeight: 100,
 			percentageWidth: 100,
 			position: v.CenterCenter,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
-			width: this.lastCropSize[k.Pixel].width,
+			unit: O.Pixel,
+			width: this.lastCropSize[O.Pixel].width,
 			x: 0,
 			y: 0
 		}, this.resizeSize = {
-			height: this.lastResizeSize[k.Pixel].height,
+			height: this.lastResizeSize[O.Pixel].height,
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
-			width: this.lastResizeSize[k.Pixel].width
+			unit: O.Pixel,
+			width: this.lastResizeSize[O.Pixel].width
 		};
 	}
 	handleLoadingChange() {
@@ -2438,7 +2473,7 @@ var Ht = Y, X, Ut = {
 	}
 	handlePartsChange() {
 		if (this.activeParts.some((e) => {
-			let t = e === j.Rotate ? "rotation" : e;
+			let t = e === A.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);
@@ -2447,8 +2482,8 @@ var Ht = Y, X, Ut = {
 	}
 	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);
+			let e = X.uniqueTransformations(this.transformations).flatMap((e) => Z.filter((t) => Wt[t] === e.key)), t = [...e, ...Z.filter((t) => Wt[t] && !e.includes(t))], n = 0;
+			this.parts = Z.map((e) => Wt[e] ? t[n++] : e);
 		}
 		this.handlePartsChange(), this.syncSortable();
 	}
@@ -2520,17 +2555,17 @@ var Ht = Y, X, Ut = {
 	}
 	handleActiveSettingChange() {
 		this.cropperElement && (this.resizeSize = {
-			height: this.lastResizeSize[k.Pixel].height,
+			height: this.lastResizeSize[O.Pixel].height,
 			keepAspectRatio: !0,
 			ratioHeight: 1,
 			ratioWidth: 1,
-			unit: k.Pixel,
-			width: this.lastResizeSize[k.Pixel].width
+			unit: O.Pixel,
+			width: this.lastResizeSize[O.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 = O.Crop;
+		this.loading = !0, this.lastAction = D.Crop;
 		let d = await this.apiGetCropFocusMode({
 			autoCropMode: t,
 			cropHeight: n,
@@ -2606,7 +2641,7 @@ var Ht = Y, X, Ut = {
 	}
 	onProxyChange(e) {
 		let t = e.detail;
-		if (this.lastAction = O.Proxy, t.autoFormat) {
+		if (this.lastAction = D.Proxy, t.autoFormat) {
 			this.autoFormat = !0;
 			let e = this.autoResolvedProxyId;
 			e && (this.selectedProxy = e);
@@ -2622,7 +2657,7 @@ var Ht = Y, X, Ut = {
 		});
 		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 === k.Pixel && !e && (i = 0, a = 0), e ? await this.handleRequestAutoCropSuggestion({
+			t === "free" ? (n = !1, r = "manual") : this.cropSize.unit === O.Pixel && !e && (i = 0, a = 0), e ? await this.handleRequestAutoCropSuggestion({
 				cropMode: t,
 				focusMode: r,
 				height: this.cropSize.height,
@@ -2658,11 +2693,11 @@ var Ht = Y, X, Ut = {
 	}
 	async onCropChange(e) {
 		let t = this.cropSize.unit;
-		if (e.detail.unit === k.AspectRatio) {
+		if (e.detail.unit === O.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 = k.AspectRatio, this.cropSize.width = n) : this.cropSize = {
+			let c = this.cropSize.cropMode, l = this.cropModes.find((e) => e.value === c)?.auto, u = /^(\d+):(\d+)$/.exec(c), d = u !== null && !e.detail.keepAspectRatio && Number(u[1]) * e.detail.height !== Number(u[2]) * e.detail.width;
+			(l || d) && (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 = O.AspectRatio, this.cropSize.width = n) : this.cropSize = {
 				...this.cropSize,
 				cropMode: c,
 				height: r,
@@ -2671,7 +2706,7 @@ var Ht = Y, X, Ut = {
 				percentageWidth: a,
 				ratioHeight: e.detail.height,
 				ratioWidth: e.detail.width,
-				unit: k.AspectRatio,
+				unit: O.AspectRatio,
 				width: n,
 				x: o,
 				y: s
@@ -2680,23 +2715,23 @@ var Ht = Y, X, Ut = {
 			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 = k.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 = O.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: k.Pixel,
+				unit: O.Pixel,
 				width: e.detail.width,
 				x: r,
 				y: i
 			};
 		}
-		t !== this.cropSize.unit && (this.cropSize = {
+		t !== this.cropSize.unit && (this.isFormatsLayout || (this.cropSize = {
 			...this.cropSize,
 			cropMode: "free"
-		}, this.onCropChanged()), this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
+		}), this.onCropChanged()), this.isFormatsLayout && this.cropEnabled && this.applyCropTransformation();
 	}
 	async onCropChanged() {
 		this.focusModes.find((e) => e.value === this.cropSize.focusMode)?.auto && await this.handleRequestAutoCropSuggestion({
@@ -2713,11 +2748,11 @@ var Ht = Y, X, Ut = {
 		unit: this.cropSize.unit,
 		width: this.cropSize.width
 	}) {
-		if (this.clearResetSnapshot(), this.lastAction = O.Crop, !this.asset) {
+		if (this.clearResetSnapshot(), this.lastAction = D.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 === k.AspectRatio) {
+			if (a === O.AspectRatio) {
 				i && r && this.upsertTransformation({
-					key: O.Crop,
+					key: D.Crop,
 					value: {
 						focusMode: e,
 						isFocusModeAuto: l,
@@ -2730,7 +2765,7 @@ var Ht = Y, X, Ut = {
 				return;
 			}
 			(t || o) && Number.isFinite(t) && Number.isFinite(o) && this.upsertTransformation({
-				key: O.Crop,
+				key: D.Crop,
 				value: {
 					focusMode: e,
 					height: t,
@@ -2749,8 +2784,8 @@ var Ht = Y, X, Ut = {
 		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 === 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,
+			if (r === O.AspectRatio && (e = this.cropSize.percentageWidth * this.selectedFormat.width / 100, s = this.cropSize.percentageHeight * this.selectedFormat.height / 100), n) this.transformations = [...this.transformations, {
+				key: D.Crop,
 				value: {
 					focusMode: a,
 					height: s,
@@ -2762,7 +2797,7 @@ var Ht = Y, X, Ut = {
 			else {
 				let t = this.cropSize.x / 100 * this.selectedFormat.width, n = this.cropSize.y / 100 * this.selectedFormat.height;
 				this.transformations = [...this.transformations, {
-					key: O.Crop,
+					key: D.Crop,
 					value: {
 						focusMode: a,
 						height: s,
@@ -2775,7 +2810,7 @@ var Ht = Y, X, Ut = {
 				}];
 			}
 		} else n && (this.transformations = [...this.transformations, {
-			key: O.Crop,
+			key: D.Crop,
 			value: {
 				focusMode: a,
 				isFocusModeAuto: o,
@@ -2784,8 +2819,8 @@ var Ht = Y, X, Ut = {
 		}]);
 	}
 	onResizeChange(e) {
-		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);
+		if (e.detail.unit === O.AspectRatio) {
+			let t = e.detail.width / e.detail.height, n = Math.max(Math.round(this.lastResizeSize[O.Pixel].height * t), 0), r = Math.max(Math.round(n / t), 0);
 			this.resizeSize = {
 				...this.resizeSize,
 				height: r,
@@ -2806,11 +2841,11 @@ var Ht = Y, X, Ut = {
 	onResizeApply(e) {
 		let { height: t, unit: n, width: r } = e.detail;
 		if (!Number.isFinite(r) || !Number.isFinite(t)) return;
-		if (this.clearResetSnapshot(), this.lastAction = O.Resize, !this.asset) {
-			if (n === k.AspectRatio) {
+		if (this.clearResetSnapshot(), this.lastAction = D.Resize, !this.asset) {
+			if (n === O.AspectRatio) {
 				let { ratioHeight: e, ratioWidth: t } = this.resizeSize;
 				t && e && this.upsertTransformation({
-					key: O.Resize,
+					key: D.Resize,
 					value: {
 						ratioHeight: e,
 						ratioWidth: t,
@@ -2820,7 +2855,7 @@ var Ht = Y, X, Ut = {
 				return;
 			}
 			(t || r) && (this.upsertTransformation({
-				key: O.Resize,
+				key: D.Resize,
 				value: {
 					height: t,
 					unit: n,
@@ -2831,8 +2866,8 @@ var Ht = Y, X, Ut = {
 		}
 		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 === k.AspectRatio && (o = Math.round(r / t * a), s = a) : (o = i, s = a), this.transformations = [...this.transformations, {
-			key: O.Resize,
+		this.resizeSize.unit === n ? n === O.AspectRatio && (o = Math.round(r / t * a), s = a) : (o = i, s = a), this.transformations = [...this.transformations, {
+			key: D.Resize,
 			value: {
 				height: s,
 				unit: n,
@@ -2847,23 +2882,23 @@ var Ht = Y, X, Ut = {
 		this.applyRotationTransformation(e.detail);
 	}
 	applyRotationTransformation(e) {
-		if (this.clearResetSnapshot(), this.lastAction = O.Rotate, !this.asset) {
+		if (this.clearResetSnapshot(), this.lastAction = D.Rotate, !this.asset) {
 			e ? this.upsertTransformation({
-				key: O.Rotate,
+				key: D.Rotate,
 				value: { rotation: e }
-			}) : this.transformations = this.transformations.filter((e) => e.key !== O.Rotate);
+			}) : this.transformations = this.transformations.filter((e) => e.key !== D.Rotate);
 			return;
 		}
 		this.selectedFormat && (this.transformations = [...this.transformations, {
-			key: O.Rotate,
+			key: D.Rotate,
 			value: { rotation: e }
 		}]);
 	}
 	onQualityChange(e) {
 		let t = e.detail;
-		this.selectedFormat && (this.selectedFormat.quality = t), this.clearResetSnapshot(), this.lastAction = O.Quality;
+		this.selectedFormat && (this.selectedFormat.quality = t), this.clearResetSnapshot(), this.lastAction = D.Quality;
 		let n = {
-			key: O.Quality,
+			key: D.Quality,
 			value: { quality: t }
 		};
 		this.asset ? this.transformations = [...this.transformations, n] : this.upsertTransformation(n);
@@ -2875,15 +2910,15 @@ var Ht = Y, X, Ut = {
 			keepMetadata: t
 		}, !this.asset) {
 			t ? this.upsertTransformation({
-				key: O.Metadata,
+				key: D.Metadata,
 				value: { keepMetadata: t }
-			}) : this.transformations = this.transformations.filter((e) => e.key !== O.Metadata);
+			}) : this.transformations = this.transformations.filter((e) => e.key !== D.Metadata);
 			return;
 		}
 		t ? this.upsertTransformation({
-			key: O.Metadata,
+			key: D.Metadata,
 			value: { keepMetadata: t }
-		}) : this.transformations = this.transformations.filter((e) => e.key !== O.Metadata);
+		}) : this.transformations = this.transformations.filter((e) => e.key !== D.Metadata);
 	}
 	onExtensionChange(e) {
 		let t = e.detail;
@@ -2893,14 +2928,14 @@ var Ht = Y, X, Ut = {
 		};
 	}
 	syncQuality() {
-		let e = this.transformations.findLast((e) => e.key === O.Quality)?.value?.quality;
+		let e = this.transformations.findLast((e) => e.key === D.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);
+		let t = this.transformations.findLast((e) => e.key === D.Dimensions), n = X.getDimensionsSize(this.selectedDimensions);
 		if (!t) {
 			n && (this.selectedDimensions = void 0);
 			return;
@@ -2912,17 +2947,17 @@ var Ht = Y, X, Ut = {
 			return !e.disabled && t?.width === r && t.height === i;
 		});
 		this.selectedDimensions = a ? {
-			mode: D.Preset,
+			mode: E.Preset,
 			value: a.value
 		} : {
 			height: i,
-			mode: D.Custom,
-			unit: A.Pixel,
+			mode: E.Custom,
+			unit: k.Pixel,
 			width: r
 		};
 	}
 	get hasResettableState() {
-		let e = Wt.filter((e) => this.activeParts.includes(e));
+		let e = Gt.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() {
@@ -2942,21 +2977,21 @@ var Ht = Y, X, Ut = {
 			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.canReorder && (this.parts = Wt.filter((e) => this.activeParts.includes(e)), this.emitReorder()), this.frozenIndex = -1, this.syncQuality();
+		this.transformations = [], this.canReorder && (this.parts = Gt.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,
+		this.clearResetSnapshot(), this.lastAction = D.Dimensions, this.selectedDimensions = { ...e.detail }, t ? this.upsertTransformation({
+			key: D.Dimensions,
 			value: t
-		}) : this.transformations = this.transformations.filter((e) => e.key !== O.Dimensions), this.capCropToMaxSize();
+		}) : this.transformations = this.transformations.filter((e) => e.key !== D.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 });
+		e.stopPropagation(), this.clearResetSnapshot(), this.cropEnabled = e.currentTarget.checked, this.cropEnabled || (this.transformations = this.transformations.filter((e) => e.key !== D.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>`;
+		return e`<cx-asset-link-format-dimensions class="asset-link-format__details" .applyBehavior=${this.isFormatsLayout ? M.Automatic : M.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);
@@ -2965,42 +3000,42 @@ var Ht = Y, X, Ut = {
 		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>`;
+		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 === D.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>`;
+		let n = this.asset ? this.lastResizeSize[O.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 === D.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>`;
+		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 === D.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>`;
+		return e`<cx-asset-link-format-rotation class="asset-link-format__details" .inline=${this.isFormatsLayout} ?loading=${this.loading && this.lastAction === D.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>`;
+		return e`<cx-asset-link-format-quality class="asset-link-format__details" .applyBehavior=${this.isFormatsLayout ? M.Automatic : M.Manual} .inline=${this.isFormatsLayout} ?loading=${this.loading && this.lastAction === D.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();
+			case A.Dimensions: return this.renderDimensionsPart();
+			case A.Proxy: return this.renderProxyPart();
+			case A.Crop: return this.renderCropPart();
+			case A.Resize: return this.renderResizePart();
+			case A.Rotate: return this.renderRotatePart();
+			case A.Quality: return this.renderQualityPart();
+			case A.Metadata: return this.renderMetadataPart();
 			default: return n;
 		}
 	}
 	render() {
 		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.renderOrderHint()}<div class="asset-link-format__panels">${x(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>`;
 	}
 };
@@ -3060,12 +3095,12 @@ a([r({
 	type: Boolean
 }), o("design:type", Boolean)], $.prototype, "useCustomExtension", void 0), a([r({
 	attribute: "parts",
-	converter: De,
+	converter: Oe,
 	type: Array
 }), o("design:type", Array)], $.prototype, "parts", void 0), a([r({
 	reflect: !0,
 	type: String
-}), o("design:type", ge === void 0 ? Object : ge)], $.prototype, "layout", void 0), a([r({
+}), o("design:type", _e === void 0 ? Object : _e)], $.prototype, "layout", void 0), a([r({
 	attribute: "crop-enabled",
 	reflect: !0,
 	type: Boolean
@@ -3119,6 +3154,6 @@ a([r({
 	o("design:paramtypes", []),
 	o("design:returntype", void 0)
 ], $.prototype, "handleReorderableChange", null), $ = X = a([u("cx-asset-link-format"), o("design:paramtypes", [])], $);
-var Gt = $;
+var Kt = $;
 //#endregion
-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 };
+export { ct as C, ht as S, Ae as T, qe as _, Ze as a, ft as b, F as c, Qe as d, We as f, Ke as g, I as h, xt as i, He as l, $e as m, wt as n, Be as o, Ge as p, St as r, P as s, Kt as t, Ue as u, Je as v, je as w, _t as x, gt as y };