@orangelogic/design-system 2.163.0 → 2.164.0

package/library/chunks/{asset-link-format.BdB6fQA_.js → asset-link-format.0q_MQOYh.js}

@@ -1,48 +1,49 @@
 import "../components/cropper.js";
-import { C as K } from "./button.DGyqdBou.js";
-import O from "../components/space.js";
-import { C as L } from "./typography.IqHbnd3C.js";
-import { n as l, C as U } from "./lib-cortex-element.CVMmyPMC.js";
-import { h as M, a as Dt, C as Nt, S as qt, b as jt, c as Vt, d as Gt } from "./endpoints.CwgTrs4A.js";
-import { M as Rt, U as o, T as u } from "./asset-link-format.QzzboHHE.js";
+import { C as Z } from "./button.DGyqdBou.js";
+import L from "../components/space.js";
+import { C as U } from "./typography.IqHbnd3C.js";
+import { n as l, C as B } from "./lib-cortex-element.CVMmyPMC.js";
+import { h as I, a as Nt, C as Ot, S as jt, b as Vt, c as Gt, d as Qt } from "./endpoints.CwgTrs4A.js";
+import { M as $t, U as o, T as u } from "./asset-link-format.ClaYu_v8.js";
 import "./browser.BHOCIF_A.js";
-import { i as B, x as A, E as Qt } from "./lit-element.jLBm65_O.js";
+import { i as q, x as A, E as Xt } from "./lit-element.jLBm65_O.js";
 import "./form.CP9KLGjF.js";
-import { L as q } from "./i18n.Bchq8v1d.js";
-import { a as Xt } from "./string.BhJ0Zogu.js";
+import { L as j } from "./i18n.Bchq8v1d.js";
+import { a as Kt } from "./string.BhJ0Zogu.js";
 import "./date-picker.BGHn6qg8.js";
-import "./content-builder.BX4pHujE.js";
+import { a as Pt, b as rt } from "./transformation.8uLv6uwG.js";
 import "./unsafe-html.Dff7-rCx.js";
-import { b as Kt } from "./_baseUniq.lwMgmtt2.js";
-import { c as j } from "./component.styles.CRO4Odto.js";
-import { a as $t, b as ot } from "./transformation.D1alV_s4.js";
-import { v as Zt } from "./v4.CKZ6klMF.js";
-import { c as V } from "./custom-element.L4WJXn1j.js";
-import { w as F } from "./watch.DJF5K-8U.js";
-import { s as Pt, a as rt } from "./number.Cx2ncfJJ.js";
-import { r as k } from "./state.CSDxrqLd.js";
+import { b as Zt } from "./_baseUniq.lwMgmtt2.js";
+import { c as V } from "./component.styles.CRO4Odto.js";
+import { v as Yt } from "./v4.CKZ6klMF.js";
+import { P as W } from "./position-picker.DjnhxIKF.js";
+import { c as G } from "./custom-element.L4WJXn1j.js";
+import { w as M } from "./watch.DJF5K-8U.js";
+import { s as Mt, a as nt } from "./number.Cx2ncfJJ.js";
+import { r as R } from "./state.CSDxrqLd.js";
 import { n as _ } from "./when.Dr1es41R.js";
-import J from "../components/details.js";
-import Yt from "../components/divider.js";
-import { C as tt } from "./icon.D5iM9wXS.js";
+import et from "../components/details.js";
+import Jt from "../components/divider.js";
+import { C as it } from "./icon.D5iM9wXS.js";
 import { C as vt } from "./icon-button.BwmMJ0bI.js";
 import { C as bt } from "./input.DOorVTYZ.js";
-import { C as ft } from "./option.DyNR1vzy.js";
-import gt from "../components/select.js";
-import { c as Jt } from "./image.Y5c_hFx8.js";
-import { e as et } from "./query.BBf1UFkC.js";
-import { c as at } from "./repeat.CFjcER6_.js";
-import { o as W } from "./style-map.llVFPd__.js";
-import Ot from "../components/tooltip.js";
-import te from "../components/button-group.js";
-import ee from "../components/checkbox.js";
-function ie(t) {
-  return t && t.length ? Kt(t) : [];
+import { C as gt } from "./option.DyNR1vzy.js";
+import xt from "../components/select.js";
+import te from "../components/position-picker.js";
+import { c as ee } from "./image.Y5c_hFx8.js";
+import { e as Y } from "./query.BBf1UFkC.js";
+import { c as ot } from "./repeat.CFjcER6_.js";
+import { o as D } from "./style-map.llVFPd__.js";
+import Lt from "../components/tooltip.js";
+import ie from "../components/button-group.js";
+import se from "../components/checkbox.js";
+function ae(t) {
+  return t && t.length ? Zt(t) : [];
 }
-function se(t) {
+function oe(t) {
   return typeof t == "object" && t !== null && "URI" in t;
 }
-const ae = {
+const re = {
   artist: "Artist",
   color: "Color",
   createDate: "CreateDate",
@@ -64,7 +65,7 @@ const ae = {
   systemIdentifier: "SystemIdentifier",
   text: "Text",
   title: "Title"
-}, oe = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
+}, ne = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
 function zt(t) {
   return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(t) && !/^(?:OR|AND|NOT)$/.test(t) ? t : `"${t.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
 }
@@ -72,27 +73,27 @@ function Ft(t, e) {
   const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${zt(a)}`);
   return s.length > 1 ? `(${s.join(" OR ")})` : s[0] ?? "";
 }
-function re(t, e) {
+function he(t, e) {
   return (Array.isArray(e) ? e : [e]).map((s) => `${t}${s.operator}${s.value}`).join(" AND ");
 }
-function he(t) {
+function le(t) {
   const e = [];
   for (const i of Object.keys(t)) {
     const s = i, a = t[s];
     if (a == null)
       continue;
     if (s === "custom") {
-      for (const [h, n] of Object.entries(
+      for (const [n, h] of Object.entries(
         a
       ))
-        e.push(Ft(h, n));
+        e.push(Ft(n, h));
       continue;
     }
-    const r = ae[s];
+    const r = re[s];
     if (r) {
-      if (oe.has(s)) {
+      if (ne.has(s)) {
         e.push(
-          re(r, a)
+          he(r, a)
         );
         continue;
       }
@@ -101,14 +102,14 @@ function he(t) {
         continue;
       }
       if (s === "parentFolderIdentifier") {
-        const h = Array.isArray(a) ? a : [a];
-        if (h.length === 0)
+        const n = Array.isArray(a) ? a : [a];
+        if (n.length === 0)
           continue;
-        const n = [
-          ...h.map((d) => `ParentFolderIdentifier:${zt(String(d))}`),
-          ...h.map((d) => `ParentAlbumIdentifier:${zt(String(d))}`)
+        const h = [
+          ...n.map((d) => `ParentFolderIdentifier:${zt(String(d))}`),
+          ...n.map((d) => `ParentAlbumIdentifier:${zt(String(d))}`)
         ];
-        e.push(`(${n.join(" OR ")})`);
+        e.push(`(${h.join(" OR ")})`);
         continue;
       }
       e.push(Ft(r, a));
@@ -127,123 +128,123 @@ function ht(t) {
     const e = ht(t.not);
     return e ? `NOT (${e})` : "";
   }
-  return he(t);
+  return le(t);
 }
-const wt = "CoreField.LargeSizePreview", nt = "CoreField.DocType", ne = "Document.Title", le = "Document.CaptionLong", lt = "Document.FileExtension", Mt = "CoreField.FileSize", _t = "CoreField.Identifier", It = "CoreField.Keywords", ct = "CoreField.MaxHeight", pt = "CoreField.MaxWidth", dt = "Document.RecordID", Et = "CoreField.DocSubType", Lt = "CoreField.TitleWithFallback", ut = "CoreField.OriginalFileName", mt = "CoreField.UpdatedFileName", Y = "CoreField.OriginalPreview", St = {
+const wt = "CoreField.LargeSizePreview", lt = "CoreField.DocType", ce = "Document.Title", pe = "Document.CaptionLong", ct = "Document.FileExtension", _t = "CoreField.FileSize", It = "CoreField.Identifier", Et = "CoreField.Keywords", pt = "CoreField.MaxHeight", dt = "CoreField.MaxWidth", ut = "Document.RecordID", Ht = "CoreField.DocSubType", Ut = "CoreField.TitleWithFallback", mt = "CoreField.OriginalFileName", ft = "CoreField.UpdatedFileName", tt = "CoreField.OriginalPreview", Ct = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
-}, Ut = {
-  [wt]: St.DEFAULT_VIEW_SIZE,
-  [Lt]: St.FIELD_TITLE_WITH_FALLBACK,
-  [Y]: St.ORIGINAL_VIEW_SIZE
-}, ce = Object.fromEntries(
-  Object.entries(Ut).map(([t, e]) => [
+}, Bt = {
+  [wt]: Ct.DEFAULT_VIEW_SIZE,
+  [Ut]: Ct.FIELD_TITLE_WITH_FALLBACK,
+  [tt]: Ct.ORIGINAL_VIEW_SIZE
+}, de = Object.fromEntries(
+  Object.entries(Bt).map(([t, e]) => [
     e,
     t
   ])
 );
-function pe(t) {
-  return Ut[t] ?? t;
+function ue(t) {
+  return Bt[t] ?? t;
 }
-function Ht(t) {
+function Tt(t) {
   const e = {};
   for (const [i, s] of Object.entries(t)) {
-    const a = ce[i] ?? i;
+    const a = de[i] ?? i;
     e[a] = s;
   }
   return e;
 }
-async function Bt({
+async function qt({
   countPerPage: t,
   fields: e,
   getPermanentAssetsPaths: i,
   isSiteBuilder: s,
   pageNumber: a,
   query: r,
-  securityByPassToken: h,
-  siteUrl: n,
+  securityByPassToken: n,
+  siteUrl: h,
   sort: d,
   token: m,
   useSession: c
 }) {
-  const f = e?.map(pe);
+  const f = e?.map(ue);
   try {
-    return (await M.request({
-      baseURL: n,
+    return (await I.request({
+      baseURL: h,
       headers: m ? { Authorization: `Bearer ${m}` } : void 0,
       method: "GET",
       params: {
         CountPerPage: t,
-        Fields: ie(f),
+        Fields: ae(f),
         Format: "json",
         GetPermanentAssetsPaths: i || void 0,
         PageNumber: a,
         Query: ht(r),
-        SecurityByPassToken: h || void 0,
+        SecurityByPassToken: n || void 0,
         Sort: d || void 0,
         UseSession: c || void 0
       },
       paramsSerializer: { indexes: null },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
+        ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
         s ? (p) => ({
-          items: (p.results?.Items ?? []).map(Ht),
+          items: (p.results?.Items ?? []).map(Tt),
           sort: p.results?.GlobalInfo?.Sort ?? "",
           totalCount: p.results?.GlobalInfo?.TotalCount ?? 0
         }) : (p) => ({
-          items: (p.APIResponse?.Items ?? []).map(Ht),
+          items: (p.APIResponse?.Items ?? []).map(Tt),
           sort: p.APIResponse?.GlobalInfo?.Sort ?? "",
           totalCount: p.APIResponse?.GlobalInfo?.TotalCount ?? 0
         })
       ],
-      url: s ? Nt.SEARCH_ASSETS : qt["4.0"]
+      url: s ? Ot.SEARCH_ASSETS : jt["4.0"]
     })).data;
   } catch {
     return { items: [], sort: "", totalCount: 0 };
   }
 }
-async function de({
+async function me({
   assetId: t,
   extension: e,
   format: i,
   siteUrl: s,
   token: a,
   transformations: r,
-  useSession: h
+  useSession: n
 }) {
   try {
-    return (await M.request({
+    return (await I.request({
       baseURL: s,
       method: "GET",
       params: {
         SourceAssetFormat: i,
         SourceAssetRecordID: t,
-        TargetExtension: Xt(e),
+        TargetExtension: Kt(e),
         Token: a || void 0,
         Transformations: r,
-        UseSession: h || void 0
+        UseSession: n || void 0
       },
       /**
        * https://link.orangelogic.com/Tasks/41S1XH
        */
       timeout: 3e5,
       // 5 minutes
-      url: Dt.GET_TRANSFORM_ASSET_LINK
+      url: Nt.GET_TRANSFORM_ASSET_LINK
     })).data;
   } catch {
     return null;
   }
 }
-const ue = 50;
-function me(t, e) {
+const fe = 50;
+function ge(t, e) {
   const i = [];
   for (let s = 0; s < t.length; s += e)
     i.push(t.slice(s, s + e));
   return i;
 }
-async function fe({
+async function xe({
   extraFields: t,
   getPermanentAssetsPaths: e,
   isSiteBuilder: i,
@@ -253,19 +254,19 @@ async function fe({
 }) {
   if (!Array.isArray(s) || s.length === 0)
     return { facets: [], items: [], totalCount: 0 };
-  const h = t?.filter((p) => p && typeof p == "string") ?? [], n = [
-    ...h,
-    Y,
+  const n = t?.filter((p) => p && typeof p == "string") ?? [], h = [
+    ...n,
+    tt,
+    ft,
     mt,
-    ut,
-    ne,
-    le,
-    dt
-  ], d = me(s, ue), m = await Promise.all(
+    ce,
+    pe,
+    ut
+  ], d = ge(s, fe), m = await Promise.all(
     d.map(
-      (p) => Bt({
+      (p) => qt({
         countPerPage: p.length,
-        fields: n,
+        fields: h,
         getPermanentAssetsPaths: e,
         isSiteBuilder: i,
         pageNumber: 1,
@@ -275,13 +276,13 @@ async function fe({
       })
     )
   ), c = new Map(s.map((p, w) => [p, w])), f = m.flatMap((p) => p.items).map((p) => {
-    let w = C(p, mt);
-    return w === "" && (w = C(p, ut)), {
+    let w = k(p, ft);
+    return w === "" && (w = k(p, mt)), {
       name: w,
-      originalUrl: C(p, Y),
-      recordId: C(p, dt),
-      ...h.reduce(
-        (R, x) => (R[x] = C(p, x), R),
+      originalUrl: k(p, tt),
+      recordId: k(p, ut),
+      ...n.reduce(
+        (b, x) => (b[x] = k(p, x), b),
         {}
       )
     };
@@ -293,87 +294,87 @@ async function fe({
   );
   return { facets: [], items: f, totalCount: S };
 }
-function C(t, e) {
+function k(t, e) {
   const i = t[e];
-  return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : se(i) ? i.URI : "";
+  return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : oe(i) ? i.URI : "";
 }
-async function ge({
+async function ye({
   countPerPage: t,
   directParentFolderIdentifier: e,
   extraFields: i,
   getPermanentAssetsPaths: s,
   isSiteBuilder: a,
   limitedDocTypes: r,
-  pageNumber: h,
-  parentFolderIdentifier: n,
+  pageNumber: n,
+  parentFolderIdentifier: h,
   searchTerm: d,
   securityByPassToken: m,
   sortOrder: c,
   token: f
 }) {
-  if (!e && !n)
+  if (!e && !h)
     return { facets: [], items: [], totalCount: 0 };
   const S = (i?.filter((x) => x && typeof x == "string") ?? []).map((x) => x.replace("%20", " ")), p = {
     directParentFolderIdentifier: e,
-    parentFolderIdentifier: n,
-    ...r.length > 0 ? { docType: [Rt.Image, Rt.Audio] } : {}
-  }, w = await Bt({
+    parentFolderIdentifier: h,
+    ...r.length > 0 ? { docType: [$t.Image, $t.Audio] } : {}
+  }, w = await qt({
     countPerPage: t,
     fields: [
       ...S,
-      Lt,
+      Ut,
       wt,
-      Y,
-      It,
-      pt,
-      ct,
-      Mt,
-      nt,
+      tt,
       Et,
+      dt,
+      pt,
       _t,
       lt,
-      dt,
+      Ht,
+      It,
+      ct,
       ut,
-      mt
+      mt,
+      ft
     ],
     getPermanentAssetsPaths: s,
     isSiteBuilder: a,
-    pageNumber: h,
+    pageNumber: n,
     query: p,
     securityByPassToken: m,
     sort: void 0,
     token: f
-  }), R = w.items.map((x) => {
-    let E = C(x, lt), P = C(x, mt), it = C(x, wt);
-    E && !E.startsWith(".") && (E = "." + E), P === "" && (P = C(x, ut)), E.toLowerCase() === ".gif" && (it = C(x, Y));
-    const yt = C(x, dt);
+  }), b = w.items.map((x) => {
+    let F = k(x, ct), P = k(x, ft), st = k(x, wt);
+    F && !F.startsWith(".") && (F = "." + F), P === "" && (P = k(x, mt)), F.toLowerCase() === ".gif" && (st = k(x, tt));
+    const St = k(x, ut);
     return {
-      docSubType: C(x, Et),
-      docType: C(x, nt) || "",
-      extension: E,
-      height: C(x, ct) || "0",
-      id: yt,
-      identifier: C(x, _t),
-      imageUrl: it,
+      docSubType: k(x, Ht),
+      docType: k(x, lt) || "",
+      extension: F,
+      height: k(x, pt) || "0",
+      id: St,
+      identifier: k(x, It),
+      imageUrl: st,
       name: P,
-      originalUrl: C(x, Y),
-      recordId: yt,
-      size: C(x, Mt) || "0 MB",
-      tags: C(x, It),
-      width: C(x, pt) || "0",
+      originalUrl: k(x, tt),
+      recordId: St,
+      size: k(x, _t) || "0 MB",
+      tags: k(x, Et),
+      width: k(x, dt) || "0",
       ...S.reduce(
-        (Q, st) => (Q[st] = C(x, st), Q),
+        (X, at) => (X[at] = k(x, at), X),
         {}
       )
     };
   });
   return {
     facets: [],
-    items: R,
+    items: b,
     totalCount: w.totalCount
   };
 }
-async function xe({
+async function Se({
   autoCropMode: t,
   cropHeight: e,
   cropWidth: i,
@@ -381,7 +382,7 @@ async function xe({
   useSession: a
 }) {
   try {
-    return (await M.request({
+    return (await I.request({
       method: "GET",
       params: {
         AutoCropMode: t,
@@ -394,21 +395,21 @@ async function xe({
       timeout: 3e5,
       // 5 minutes
       transformResponse: [
-        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
-        (h) => ({
-          height: h.cropHeight,
-          width: h.cropWidth,
-          x: h.cropX,
-          y: h.cropY
+        ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
+        (n) => ({
+          height: n.cropHeight,
+          width: n.cropWidth,
+          x: n.cropX,
+          y: n.cropY
         })
       ],
-      url: Dt.GET_CROP_ZONE_SUGGESTION
+      url: Nt.GET_CROP_ZONE_SUGGESTION
     })).data;
   } catch {
     return null;
   }
 }
-async function Ri({
+async function Mi({
   assetRecordId: t,
   isSiteBuilder: e,
   siteUrl: i,
@@ -416,7 +417,7 @@ async function Ri({
   useSession: a
 }) {
   try {
-    return (await M.request({
+    return (await I.request({
       baseURL: i,
       method: "GET",
       params: {
@@ -426,35 +427,35 @@ async function Ri({
       },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
-        (h) => !h || typeof h != "object" ? [] : h.proxies?.map((n) => ({
-          cdnName: n.cdnName,
-          extension: n.extension,
-          formatHeight: n.formatHeight,
-          formatWidth: n.formatWidth,
-          height: n.height,
-          permanentLink: n.permanentLink,
-          proxyLabel: n.proxyLabel,
-          proxyName: n.proxyName,
-          width: n.width
+        ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
+        (n) => !n || typeof n != "object" ? [] : n.proxies?.map((h) => ({
+          cdnName: h.cdnName,
+          extension: h.extension,
+          formatHeight: h.formatHeight,
+          formatWidth: h.formatWidth,
+          height: h.height,
+          permanentLink: h.permanentLink,
+          proxyLabel: h.proxyLabel,
+          proxyName: h.proxyName,
+          width: h.width
         })) ?? []
       ],
-      url: e ? Nt.GET_AVAILABLE_PROXIES : Gt
+      url: e ? Ot.GET_AVAILABLE_PROXIES : Qt
     })).data;
   } catch {
     return [];
   }
 }
-async function $i({
+async function Fi({
   siteUrl: t
 } = {}) {
   try {
-    return (await M.request({
+    return (await I.request({
       baseURL: t,
       method: "GET",
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
+        ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
         (i) => !i || typeof i != "object" ? {
           formatsByDocType: {
             Audio: {},
@@ -466,13 +467,13 @@ async function $i({
           formatsByDocType: i.formatsByDocType ?? {}
         }
       ],
-      url: jt
+      url: Vt
     })).data;
   } catch {
     return { formatsByDocType: {} };
   }
 }
-async function Pi({
+async function _i({
   recordIds: t,
   rightsToCheck: e
 }) {
@@ -483,19 +484,19 @@ async function Pi({
     invalidObjects: []
   };
   try {
-    const { data: s } = await M.request({
+    const { data: s } = await I.request({
       method: "GET",
       params: { RecordIDs: t, RightsToCheck: e },
       paramsSerializer: { indexes: null },
       responseType: "json",
-      url: Vt.GET_AUTHORIZED_OBJECTS
+      url: Gt.GET_AUTHORIZED_OBJECTS
     });
     return s;
   } catch {
     return i;
   }
 }
-const Tt = 20, Wt = "TR1", ye = /* @__PURE__ */ new Set([
+const Wt = 20, Dt = "TR1", Ce = /* @__PURE__ */ new Set([
   ".avif",
   ".bmp",
   ".gif",
@@ -508,15 +509,15 @@ const Tt = 20, Wt = "TR1", ye = /* @__PURE__ */ new Set([
 ]);
 function At(t) {
   const e = t.toLowerCase(), i = e.startsWith(".") ? e : `.${e}`;
-  return ye.has(i);
+  return Ce.has(i);
 }
-class Fi {
+class Ii {
   constructor(e, i) {
-    this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = 1 / 0, this.pageSize = Tt, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
+    this.data = [], this.folderId = "", this.fetchedPages = /* @__PURE__ */ new Set(), this.totalCount = 0, this.maxEnd = 1 / 0, this.pageSize = Wt, this.requestEpoch = 0, this.host = e, this.host.addController?.(this);
     const s = i?.maxEnd;
     this.maxEnd = typeof s == "number" && Number.isFinite(s) && s >= 0 ? Math.floor(s) : 1 / 0;
     const a = i?.pageSize;
-    this.pageSize = typeof a == "number" && Number.isFinite(a) && a >= 1 ? Math.floor(a) : Tt, this.authToken = i?.token, this.securityByPassToken = i?.securityByPassToken, this.isSiteBuilder = i?.isSiteBuilder ?? !1;
+    this.pageSize = typeof a == "number" && Number.isFinite(a) && a >= 1 ? Math.floor(a) : Wt, this.authToken = i?.token, this.securityByPassToken = i?.securityByPassToken, this.isSiteBuilder = i?.isSiteBuilder ?? !1;
   }
   get totalDataCount() {
     return this.totalCount;
@@ -535,14 +536,14 @@ class Fi {
       return this.data;
     if (this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < a))
       return this.data;
-    const h = this.requestEpoch;
-    if (!this.folderId || h !== this.requestEpoch)
+    const n = this.requestEpoch;
+    if (!this.folderId || n !== this.requestEpoch)
       return this.data;
-    const n = s ? `path_${s}` : void 0, d = s === "TRX", m = `path_${Wt}`, c = n ? d && n !== m ? [n, m] : [n] : [], f = Math.floor(a / this.pageSize) + 1, S = Math.floor(e / this.pageSize) + 1;
+    const h = s ? `path_${s}` : void 0, d = s === "TRX", m = `path_${Dt}`, c = h ? d && h !== m ? [h, m] : [h] : [], f = Math.floor(a / this.pageSize) + 1, S = Math.floor(e / this.pageSize) + 1;
     for (let p = f; p <= S; p++) {
       if (this.fetchedPages.has(p))
         continue;
-      const w = await ge({
+      const w = await ye({
         countPerPage: this.pageSize,
         directParentFolderIdentifier: this.folderId,
         extraFields: [...i, ...c],
@@ -555,31 +556,31 @@ class Fi {
         sortOrder: "",
         token: this.authToken
       });
-      if (h !== this.requestEpoch)
+      if (n !== this.requestEpoch)
         return this.data;
       if (this.fetchedPages.add(p), !this.totalCount && w.totalCount) {
         const x = Math.min(this.maxEnd, w.totalCount);
         this.totalCount = x, this.data = Array.from({ length: x }, () => ({
           alt: "",
-          id: `temp-${Zt()}`,
+          id: `temp-${Yt()}`,
           name: "",
           src: ""
         }));
       }
-      const R = (p - 1) * this.pageSize;
+      const b = (p - 1) * this.pageSize;
       for (let x = 0; x < w.items.length; x++) {
-        const E = R + x;
-        if (E < this.data.length) {
-          const P = w.items[x], it = !P.extension || At(P.extension);
-          let Q = n && (!d || it) && P[n] || d && !it && P[m] || P.imageUrl;
-          Q && r && r.length > 0 && (Q = $t(Q, r)), this.data[E] = {
+        const F = b + x;
+        if (F < this.data.length) {
+          const P = w.items[x], st = !P.extension || At(P.extension);
+          let X = h && (!d || st) && P[h] || d && !st && P[m] || P.imageUrl;
+          X && r && r.length > 0 && (X = Pt(X, r)), this.data[F] = {
             alt: P.name,
             docType: P.docType,
             id: P.id,
             name: P.name,
-            src: Q,
+            src: X,
             ...i.reduce(
-              (st, kt) => (st[kt] = P[kt] ?? "", st),
+              (at, Rt) => (at[Rt] = P[Rt] ?? "", at),
               {}
             )
           };
@@ -593,19 +594,19 @@ class Fi {
     folderId: s,
     forceRefetch: a = !1,
     format: r,
-    minLimit: h = 5,
-    noPlaceholders: n = !1,
+    minLimit: n = 5,
+    noPlaceholders: h = !1,
     transformations: d
   }) {
     (!this.folderId || this.folderId !== s) && (this.folderId = s, this.resetFolderState()), a && this.resetPageCache();
-    const m = Math.max(5, h), c = e, f = e + m, S = [
+    const m = Math.max(5, n), c = e, f = e + m, S = [
       ...i,
-      ct,
-      pt
+      pt,
+      dt
     ];
     await this.fetchImages({
       end: f,
-      extraFields: S.filter((R) => R !== ""),
+      extraFields: S.filter((b) => b !== ""),
       format: r,
       start: c,
       transformations: d
@@ -615,11 +616,11 @@ class Fi {
     const w = p + m;
     return await this.fetchImages({
       end: w,
-      extraFields: S.filter((R) => R !== ""),
+      extraFields: S.filter((b) => b !== ""),
       format: r,
       start: p,
       transformations: d
-    }), n ? this.data.filter((R) => R.id && !R.id.startsWith("temp-")) : this.data;
+    }), h ? this.data.filter((b) => b.id && !b.id.startsWith("temp-")) : this.data;
   }
   async fetchImagesByIDs({
     extraFields: e = [],
@@ -629,13 +630,13 @@ class Fi {
   }) {
     if (s.length === 0)
       return [];
-    const r = i ? `path_${i}` : void 0, h = i === "TRX", n = `path_${Wt}`, d = r ? h && r !== n ? [r, n] : [r] : [], m = h ? [lt] : [], c = [
+    const r = i ? `path_${i}` : void 0, n = i === "TRX", h = `path_${Dt}`, d = r ? n && r !== h ? [r, h] : [r] : [], m = n ? [ct] : [], c = [
       ...e,
-      nt,
-      ct,
-      pt
+      lt,
+      pt,
+      dt
     ];
-    return (await fe({
+    return (await xe({
       extraFields: [...c, ...d, ...m].filter((S) => S !== ""),
       getPermanentAssetsPaths: d.length > 0 || void 0,
       isSiteBuilder: this.isSiteBuilder,
@@ -643,16 +644,16 @@ class Fi {
       securityByPassToken: this.securityByPassToken,
       token: this.authToken
     })).items.map((S) => {
-      const p = h && S[lt] || "", w = !p || At(p);
-      let x = r && (!h || w) && S[r] || h && !w && S[n] || S.originalUrl;
-      return x && a && a.length > 0 && (x = $t(x, a)), {
+      const p = n && S[ct] || "", w = !p || At(p);
+      let x = r && (!n || w) && S[r] || n && !w && S[h] || S.originalUrl;
+      return x && a && a.length > 0 && (x = Pt(x, a)), {
         alt: S.name,
-        docType: S[nt],
+        docType: S[lt],
         id: S.recordId,
         name: S.name,
         src: x,
         ...c.reduce(
-          (E, P) => (E[P] = S[P] ?? "", E),
+          (F, P) => (F[P] = S[P] ?? "", F),
           {}
         )
       };
@@ -664,12 +665,12 @@ class Fi {
     forceRefetch: s = !1,
     format: a,
     noPlaceholders: r = !1,
-    page: h,
-    pageSize: n = 10,
+    page: n,
+    pageSize: h = 10,
     transformations: d
   }) {
     (!this.folderId || this.folderId !== i) && (this.folderId = i, this.resetFolderState()), s && this.resetPageCache();
-    const m = h * n, c = m + n - 1;
+    const m = n * h, c = m + h - 1;
     return await this.fetchImages({
       end: c,
       extraFields: e,
@@ -684,8 +685,8 @@ class Fi {
     extraFields: s = [],
     folderId: a,
     forceRefetch: r = !1,
-    format: h,
-    start: n = 0,
+    format: n,
+    start: h = 0,
     transformations: d
   }) {
     const m = Math.max(1, e);
@@ -693,17 +694,17 @@ class Fi {
       await this.fetchImages({
         end: i,
         extraFields: s,
-        format: h,
-        start: n,
+        format: n,
+        start: h,
         transformations: d
       }), yield this.data;
       return;
     }
-    let c = n, f = n + m;
+    let c = h, f = h + m;
     if (await this.fetchImages({
       end: f,
       extraFields: s,
-      format: h,
+      format: n,
       start: c,
       transformations: d
     }), yield this.data, !(!this.totalCount || this.totalCount <= f))
@@ -711,7 +712,7 @@ class Fi {
         c = f, f = Math.min(f + m, this.totalCount), await this.fetchImages({
           end: f,
           extraFields: s,
-          format: h,
+          format: n,
           start: c,
           transformations: d
         }), yield this.data;
@@ -728,15 +729,15 @@ class Fi {
     this.resetPageCache();
   }
 }
-const Se = B`.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}`, ze = B`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`;
-var we = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, v = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ae(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && we(e, i, a), a;
+const ze = q`.asset-link-format__details{--header-padding:var(--cx-spacing-small) var(--cx-spacing-medium)}.asset-link-format__details::part(icon){width:var(--cx-font-size-3x-large);height:var(--cx-font-size-3x-large);background-color:var(--cx-color-neutral-100);border-radius:var(--cx-border-radius-large);color:var(--cx-color-neutral-600);font-size:var(--cx-font-size-large);justify-content:center;align-items:center;display:flex}.asset-link-format__details::part(input-label){color:var(--cx-color-neutral-400);margin-inline-start:var(--cx-spacing-small)}.asset-link-format__header{padding:var(--cx-spacing-medium)}.asset-link-format__section-header{padding:0 var(--cx-spacing-medium);border-top:var(--section-header-border-width,1px) solid var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-50)}.asset-link-format__undo,.asset-link-format__reset{--color:var(--cx-color-primary);--background-color:transparent}`, we = q`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`;
+var Ae = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, z = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && Ae(e, i, a), a;
 };
-let z = class extends U {
+let C = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.lastAppliedSetting = {
+    super(...arguments), this.localize = new j(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.percentageWidth = 0, this.percentageHeight = 0, this.unit = o.Pixel, this.disabledApply = !1, this.noRatioModes = !1, this.showPositionPicker = !1, this.lastAppliedSetting = {
       [o.Pixel]: {
         height: 0,
         percentageHeight: 100,
@@ -755,7 +756,7 @@ let z = class extends U {
         x: 0,
         y: 0
       }
-    }, this.loading = !1, this.cropModes = [], this.focusModes = [], this.focusMode = "manual", this.cropMode = "free", this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
+    }, this.loading = !1, this.cropModes = [], this.focusModes = [], this.focusMode = "manual", this.cropMode = "free", this.position = W.CenterCenter, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
   }
   get selectedMode() {
     return this.cropModes.find((t) => t.value === this.cropMode);
@@ -847,15 +848,15 @@ let z = class extends U {
     else if (!i) {
       const [s, a] = e.split(":").map(Number);
       if (this.unit === o.Pixel) {
-        let r = s, h = a;
-        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: h, width: r } = Jt(
+        let r = s, n = a;
+        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = ee(
           this.maxWidth,
           this.maxHeight,
           s,
           a
         )), this.emit("cx-asset-link-format-crop-change", {
           detail: {
-            height: h,
+            height: n,
             keepAspectRatio: !0,
             silent: !0,
             unit: o.Pixel,
@@ -887,6 +888,13 @@ let z = class extends U {
       }
     });
   }
+  onPositionChange() {
+    this.emit("cx-asset-link-format-crop-position-change", {
+      detail: {
+        position: this.positionPicker.value
+      }
+    });
+  }
   /**
    * Handles the change of the unit of measurement for the crop settings.
    * When the unit is changed to Aspect Ratio, it emits an event with the last applied settings for Aspect Ratio.
@@ -921,6 +929,7 @@ let z = class extends U {
     this.loading || this.emit("cx-asset-link-format-crop-apply", {
       detail: {
         height: this.height,
+        position: this.showPositionPicker ? this.position : void 0,
         unit: this.unit,
         width: this.width
       }
@@ -960,9 +969,9 @@ let z = class extends U {
     const t = this.cropModes.filter((i) => !i.auto), e = this.cropModes.filter((i) => i.auto);
     return A`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="crop"></cx-icon></div><cx-typography variant="body2">${this.localize.term("crop")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small">${_(
       !this.noRatioModes,
-      () => A`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${W({
+      () => A`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${D({
         width: "100%"
-      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${at(
+      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${ot(
         t,
         (i) => i.value,
         ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
@@ -971,14 +980,14 @@ let z = class extends U {
         e.length > 0,
         () => A`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
       )}
-              ${at(
+              ${ot(
         e,
         (i) => i.value,
         ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
     )}<cx-space spacing="small"><div class="crop__input-group"><cx-input data-testid="cx-asset-link-format-crop-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === 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=${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=${D({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-crop-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === 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
@@ -987,121 +996,135 @@ let z = class extends U {
       () => A`<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>${_(
       this.focusModes.length > 0,
-      () => A`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${W({
+      () => A`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${D({
         width: "100%"
-      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${at(
+      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${ot(
         this.focusModes,
         (i) => i.value,
         ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
-    )}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${W({
+    )}
+        ${_(
+      this.showPositionPicker && this.focusMode === "manual",
+      () => A`<cx-position-picker data-testid="cx-asset-link-format-crop-position" value=${this.position} @cx-change=${this.onPositionChange}></cx-position-picker>`
+    )}<cx-button data-testid="cx-asset-link-format-crop-apply" variant="primary" ?disabled=${this.disabledApply || this.invalidHeight || this.invalidWidth} ?loading=${this.loading} style=${D({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-z.styles = [j, ze];
-z.dependencies = {
-  "cx-button": K,
-  "cx-details": J,
-  "cx-divider": Yt,
-  "cx-icon": tt,
+C.styles = [V, we];
+C.dependencies = {
+  "cx-button": Z,
+  "cx-details": et,
+  "cx-divider": Jt,
+  "cx-icon": it,
   "cx-icon-button": vt,
   "cx-input": bt,
-  "cx-option": ft,
-  "cx-select": gt,
-  "cx-space": O,
-  "cx-typography": L
+  "cx-option": gt,
+  "cx-position-picker": te,
+  "cx-select": xt,
+  "cx-space": L,
+  "cx-typography": U
 };
-v([
-  et(".details")
-], z.prototype, "base", 2);
-v([
+z([
+  Y(".details")
+], C.prototype, "base", 2);
+z([
+  Y("cx-position-picker")
+], C.prototype, "positionPicker", 2);
+z([
   l({ reflect: !0, type: Boolean })
-], z.prototype, "open", 2);
-v([
+], C.prototype, "open", 2);
+z([
   l({ reflect: !0, type: Number })
-], z.prototype, "width", 2);
-v([
+], C.prototype, "width", 2);
+z([
   l({ reflect: !0, type: Number })
-], z.prototype, "height", 2);
-v([
+], C.prototype, "height", 2);
+z([
   l({ attribute: "max-width", reflect: !0, type: Number })
-], z.prototype, "maxWidth", 2);
-v([
+], C.prototype, "maxWidth", 2);
+z([
   l({ attribute: "max-height", reflect: !0, type: Number })
-], z.prototype, "maxHeight", 2);
-v([
+], C.prototype, "maxHeight", 2);
+z([
   l({ attribute: "ratio-width", reflect: !0, type: Number })
-], z.prototype, "ratioWidth", 2);
-v([
+], C.prototype, "ratioWidth", 2);
+z([
   l({ attribute: "ratio-height", reflect: !0, type: Number })
-], z.prototype, "ratioHeight", 2);
-v([
+], C.prototype, "ratioHeight", 2);
+z([
   l({ attribute: "percentage-width", reflect: !0, type: Number })
-], z.prototype, "percentageWidth", 2);
-v([
+], C.prototype, "percentageWidth", 2);
+z([
   l({ attribute: "percentage-height", reflect: !0, type: Number })
-], z.prototype, "percentageHeight", 2);
-v([
+], C.prototype, "percentageHeight", 2);
+z([
   l({ reflect: !0, type: String })
-], z.prototype, "unit", 2);
-v([
+], C.prototype, "unit", 2);
+z([
   l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
-], z.prototype, "disabledApply", 2);
-v([
+], C.prototype, "disabledApply", 2);
+z([
   l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
-], z.prototype, "noRatioModes", 2);
-v([
+], C.prototype, "noRatioModes", 2);
+z([
+  l({ attribute: "show-position-picker", reflect: !0, type: Boolean })
+], C.prototype, "showPositionPicker", 2);
+z([
   l({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], z.prototype, "lastAppliedSetting", 2);
-v([
+], C.prototype, "lastAppliedSetting", 2);
+z([
   l({ reflect: !0, type: Boolean })
-], z.prototype, "loading", 2);
-v([
+], C.prototype, "loading", 2);
+z([
   l({ attribute: "crop-modes", reflect: !1, type: Array })
-], z.prototype, "cropModes", 2);
-v([
+], C.prototype, "cropModes", 2);
+z([
   l({ attribute: "focus-modes", reflect: !1, type: Object })
-], z.prototype, "focusModes", 2);
-v([
+], C.prototype, "focusModes", 2);
+z([
   l({ attribute: "focus-mode", reflect: !0, type: String })
-], z.prototype, "focusMode", 2);
-v([
+], C.prototype, "focusMode", 2);
+z([
   l({ attribute: "crop-mode", reflect: !0, type: String })
-], z.prototype, "cropMode", 2);
-v([
+], C.prototype, "cropMode", 2);
+z([
+  l({ reflect: !0, type: String })
+], C.prototype, "position", 2);
+z([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], z.prototype, "keepAspectRatio", 2);
-v([
-  k()
-], z.prototype, "invalidWidth", 2);
-v([
-  k()
-], z.prototype, "invalidHeight", 2);
-v([
-  k()
-], z.prototype, "aspectRatio", 2);
-v([
-  F("cropMode", { waitUntilFirstUpdate: !0 }),
-  F("maxWidth", { waitUntilFirstUpdate: !0 }),
-  F("maxHeight", { waitUntilFirstUpdate: !0 }),
-  F("keepAspectRatio")
-], z.prototype, "handleCropModeChange", 1);
-v([
-  F("open", { waitUntilFirstUpdate: !0 })
-], z.prototype, "handleOpenChange", 1);
-z = v([
-  V("cx-asset-link-format-crop")
-], z);
-const ve = B`.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%}}`;
-var be = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, Ct = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ce(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && be(e, i, a), a;
+], C.prototype, "keepAspectRatio", 2);
+z([
+  R()
+], C.prototype, "invalidWidth", 2);
+z([
+  R()
+], C.prototype, "invalidHeight", 2);
+z([
+  R()
+], C.prototype, "aspectRatio", 2);
+z([
+  M("cropMode", { waitUntilFirstUpdate: !0 }),
+  M("maxWidth", { waitUntilFirstUpdate: !0 }),
+  M("maxHeight", { waitUntilFirstUpdate: !0 }),
+  M("keepAspectRatio")
+], C.prototype, "handleCropModeChange", 1);
+z([
+  M("open", { waitUntilFirstUpdate: !0 })
+], C.prototype, "handleOpenChange", 1);
+C = z([
+  G("cx-asset-link-format-crop")
+], C);
+const be = q`.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%}}`;
+var ke = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, kt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Re(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && ke(e, i, a), a;
 };
-let X = class extends U {
+let K = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(this), this.value = "", this.items = [];
+    super(...arguments), this.localize = new j(this), this.value = "", this.items = [];
   }
   handleExtensionChange(t) {
     const e = t.target.value;
@@ -1110,38 +1133,38 @@ let X = class extends U {
     });
   }
   render() {
-    return A`<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}>${at(
+    return A`<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}>${ot(
       this.items,
       (t) => t.value,
       (t) => A`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
-X.styles = [j, ve];
-X.dependencies = {
-  "cx-option": ft,
-  "cx-select": gt,
-  "cx-space": O,
-  "cx-typography": L
+K.styles = [V, be];
+K.dependencies = {
+  "cx-option": gt,
+  "cx-select": xt,
+  "cx-space": L,
+  "cx-typography": U
 };
-Ct([
+kt([
   l({ reflect: !0, type: String })
-], X.prototype, "value", 2);
-Ct([
+], K.prototype, "value", 2);
+kt([
   l({ reflect: !1, type: Array })
-], X.prototype, "items", 2);
-X = Ct([
-  V("cx-asset-link-format-extension")
-], X);
-const ke = B`cx-details::part(base){border-bottom-width:0}`;
-var Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, D = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? $e(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Re(e, i, a), a;
+], K.prototype, "items", 2);
+K = kt([
+  G("cx-asset-link-format-extension")
+], K);
+const $e = q`cx-details::part(base){border-bottom-width:0}`;
+var Pe = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, N = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Me(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && Pe(e, i, a), a;
 };
-let I = class extends U {
+let E = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
+    super(...arguments), this.localize = new j(this), this.open = !1, this.value = "", this.items = [], this.loading = !1, this.scopedValue = "";
   }
   handleValueChange() {
     this.scopedValue = this.value;
@@ -1185,61 +1208,61 @@ let I = class extends U {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<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}>${at(
+    return A`<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}>${ot(
       this.items,
       (t) => t.id,
       (t) => A`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
-    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${W({
+    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${D({
       "margin-left": "auto"
     })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-I.styles = [j, ke];
-I.dependencies = {
-  "cx-button": K,
-  "cx-details": J,
-  "cx-icon": tt,
-  "cx-option": ft,
-  "cx-select": gt,
-  "cx-space": O,
-  "cx-typography": L
+E.styles = [V, $e];
+E.dependencies = {
+  "cx-button": Z,
+  "cx-details": et,
+  "cx-icon": it,
+  "cx-option": gt,
+  "cx-select": xt,
+  "cx-space": L,
+  "cx-typography": U
 };
-D([
-  et(".details")
-], I.prototype, "base", 2);
-D([
+N([
+  Y(".details")
+], E.prototype, "base", 2);
+N([
   l({ reflect: !0, type: Boolean })
-], I.prototype, "open", 2);
-D([
+], E.prototype, "open", 2);
+N([
   l({ reflect: !0, type: String })
-], I.prototype, "value", 2);
-D([
+], E.prototype, "value", 2);
+N([
   l({ reflect: !1, type: Array })
-], I.prototype, "items", 2);
-D([
+], E.prototype, "items", 2);
+N([
   l({ reflect: !0, type: Boolean })
-], I.prototype, "loading", 2);
-D([
-  k()
-], I.prototype, "scopedValue", 2);
-D([
-  F("value")
-], I.prototype, "handleValueChange", 1);
-D([
-  F("open", { waitUntilFirstUpdate: !0 })
-], I.prototype, "handleOpenChange", 1);
-I = D([
-  V("cx-asset-link-format-proxy")
-], I);
-const Pe = B`cx-details::part(base){border-bottom-width:0}`;
-var Fe = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, Z = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Me(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Fe(e, i, a), a;
+], E.prototype, "loading", 2);
+N([
+  R()
+], E.prototype, "scopedValue", 2);
+N([
+  M("value")
+], E.prototype, "handleValueChange", 1);
+N([
+  M("open", { waitUntilFirstUpdate: !0 })
+], E.prototype, "handleOpenChange", 1);
+E = N([
+  G("cx-asset-link-format-proxy")
+], E);
+const Fe = q`cx-details::part(base){border-bottom-width:0}`;
+var _e = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, J = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ie(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && _e(e, i, a), a;
 };
-let T = class extends U {
+let T = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
+    super(...arguments), this.localize = new j(this), this.open = !1, this.value = 100, this.loading = !1, this.scopedValue = 100;
   }
   /**
    * A computed property that checks if the current quality value is invalid.
@@ -1283,51 +1306,51 @@ let T = class extends U {
     t.target !== this.base && t.stopPropagation();
   }
   render() {
-    return A`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: { mask: Number, max: 100, min: 1 } }} value=${this.scopedValue.toString()} style=${W({
+    return A`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="blur_on"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("quality")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-quality-tooltip" content=${this.localize.term("qualityHelpText")} hoist><cx-input data-testid="cx-asset-link-format-quality" class="details__checkbox" mask="num" .maskBlocks=${{ num: { mask: Number, max: 100, min: 1 } }} value=${this.scopedValue.toString()} style=${D({
       flex: "1"
     })} @cx-input=${this.handleQualityChange}></cx-input></cx-tooltip><cx-button data-testid="cx-asset-link-format-quality-apply" variant="primary" ?disabled=${this.invalidValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-T.styles = [j, Pe];
+T.styles = [V, Fe];
 T.dependencies = {
-  "cx-button": K,
-  "cx-details": J,
-  "cx-icon": tt,
+  "cx-button": Z,
+  "cx-details": et,
+  "cx-icon": it,
   "cx-input": bt,
-  "cx-space": O,
-  "cx-tooltip": Ot,
-  "cx-typography": L
+  "cx-space": L,
+  "cx-tooltip": Lt,
+  "cx-typography": U
 };
-Z([
-  et(".details")
+J([
+  Y(".details")
 ], T.prototype, "base", 2);
-Z([
+J([
   l({ reflect: !0, type: Boolean })
 ], T.prototype, "open", 2);
-Z([
+J([
   l({ reflect: !0, type: Number })
 ], T.prototype, "value", 2);
-Z([
+J([
   l({ reflect: !0, type: Boolean })
 ], T.prototype, "loading", 2);
-Z([
-  k()
+J([
+  R()
 ], T.prototype, "scopedValue", 2);
-Z([
-  F("value")
+J([
+  M("value")
 ], T.prototype, "handleValueChange", 1);
-T = Z([
-  V("cx-asset-link-format-quality")
+T = J([
+  G("cx-asset-link-format-quality")
 ], T);
-const _e = B`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}`;
-var Ie = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, $ = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ee(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Ie(e, i, a), a;
+const Ee = q`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}`;
+var He = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, $ = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Te(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && He(e, i, a), a;
 };
-let b = class extends U {
+let v = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(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 = {
+    super(...arguments), this.localize = new j(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 },
       [o.AspectRatio]: { height: 1, width: 1 }
     }, this.loading = !1, this.noRatioModes = !1, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
@@ -1466,99 +1489,99 @@ let b = class extends U {
   render() {
     return A`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="aspect_ratio"></cx-icon></div><cx-typography variant="body2">${this.localize.term("resize")}</cx-typography></cx-space><cx-space direction="vertical" spacing="small"><cx-space spacing="small"><div class="resize__input-group"><cx-input data-testid="cx-asset-link-format-resize-width" placeholder=${this.localize.term("width")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === 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=${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=${D({
       color: this.keepAspectRatio ? "var(--cx-color-primary)" : void 0
     })} ?disabled=${this.loading}></cx-icon-button><cx-input data-testid="cx-asset-link-format-resize-height" placeholder=${this.localize.term("height")} mask="num" .maskBlocks=${{ num: { mask: Number, min: 1 } }} value=${this.unit === 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>${_(
       !this.noRatioModes,
       () => A`<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=${W({
+    )}</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=${D({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-b.styles = [j, _e];
-b.dependencies = {
-  "cx-button": K,
-  "cx-details": J,
-  "cx-icon": tt,
+v.styles = [V, Ee];
+v.dependencies = {
+  "cx-button": Z,
+  "cx-details": et,
+  "cx-icon": it,
   "cx-icon-button": vt,
   "cx-input": bt,
-  "cx-option": ft,
-  "cx-select": gt,
-  "cx-space": O,
-  "cx-typography": L
+  "cx-option": gt,
+  "cx-select": xt,
+  "cx-space": L,
+  "cx-typography": U
 };
 $([
-  et(".details")
-], b.prototype, "base", 2);
+  Y(".details")
+], v.prototype, "base", 2);
 $([
   l({ reflect: !0, type: Boolean })
-], b.prototype, "open", 2);
+], v.prototype, "open", 2);
 $([
   l({ reflect: !0, type: Number })
-], b.prototype, "width", 2);
+], v.prototype, "width", 2);
 $([
   l({ reflect: !0, type: Number })
-], b.prototype, "height", 2);
+], v.prototype, "height", 2);
 $([
   l({ attribute: "max-width", reflect: !0, type: Number })
-], b.prototype, "maxWidth", 2);
+], v.prototype, "maxWidth", 2);
 $([
   l({ attribute: "max-height", reflect: !0, type: Number })
-], b.prototype, "maxHeight", 2);
+], v.prototype, "maxHeight", 2);
 $([
   l({ attribute: "ratio-width", reflect: !0, type: Number })
-], b.prototype, "ratioWidth", 2);
+], v.prototype, "ratioWidth", 2);
 $([
   l({ attribute: "ratio-height", reflect: !0, type: Number })
-], b.prototype, "ratioHeight", 2);
+], v.prototype, "ratioHeight", 2);
 $([
   l({ reflect: !0, type: String })
-], b.prototype, "unit", 2);
+], v.prototype, "unit", 2);
 $([
   l({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], b.prototype, "lastAppliedSetting", 2);
+], v.prototype, "lastAppliedSetting", 2);
 $([
   l({ reflect: !0, type: Boolean })
-], b.prototype, "loading", 2);
+], v.prototype, "loading", 2);
 $([
   l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
-], b.prototype, "noRatioModes", 2);
+], v.prototype, "noRatioModes", 2);
 $([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], b.prototype, "keepAspectRatio", 2);
+], v.prototype, "keepAspectRatio", 2);
 $([
-  k()
-], b.prototype, "invalidWidth", 2);
+  R()
+], v.prototype, "invalidWidth", 2);
 $([
-  k()
-], b.prototype, "invalidHeight", 2);
+  R()
+], v.prototype, "invalidHeight", 2);
 $([
-  k()
-], b.prototype, "aspectRatio", 2);
+  R()
+], v.prototype, "aspectRatio", 2);
 $([
-  F("cropMode", { waitUntilFirstUpdate: !0 }),
-  F("maxWidth", { waitUntilFirstUpdate: !0 }),
-  F("maxHeight", { waitUntilFirstUpdate: !0 }),
-  F("keepAspectRatio")
-], b.prototype, "handleCropModeChange", 1);
+  M("cropMode", { waitUntilFirstUpdate: !0 }),
+  M("maxWidth", { waitUntilFirstUpdate: !0 }),
+  M("maxHeight", { waitUntilFirstUpdate: !0 }),
+  M("keepAspectRatio")
+], v.prototype, "handleCropModeChange", 1);
 $([
-  F("open", { waitUntilFirstUpdate: !0 })
-], b.prototype, "handleOpenChange", 1);
-b = $([
-  V("cx-asset-link-format-resize")
-], b);
-const He = B`cx-details::part(base){border-bottom-width:0}`;
-var Te = Object.defineProperty, We = Object.getOwnPropertyDescriptor, G = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? We(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Te(e, i, a), a;
+  M("open", { waitUntilFirstUpdate: !0 })
+], v.prototype, "handleOpenChange", 1);
+v = $([
+  G("cx-asset-link-format-resize")
+], v);
+const We = q`cx-details::part(base){border-bottom-width:0}`;
+var De = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ne(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && De(e, i, a), a;
 };
-let H = class extends U {
+let H = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
+    super(...arguments), this.localize = new j(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
   }
   handleOpenChange() {
     this.open || this.emit("cx-asset-link-format-rotation-change", {
@@ -1569,14 +1592,14 @@ let H = class extends U {
     const e = t.target.value, i = Number(e);
     if (Number.isNaN(i))
       return;
-    const s = Pt(i);
+    const s = Mt(i);
     (i > 360 || i < -360) && (t.target.value = s.toString()), this.emit("cx-asset-link-format-rotation-change", {
       detail: s
     });
   }
   handleButtonClick(t) {
     this.emit("cx-asset-link-format-rotation-change", {
-      detail: Pt(t)
+      detail: Mt(t)
     });
   }
   handleClockwiseClick() {
@@ -1596,55 +1619,55 @@ let H = class extends U {
     });
   }
   render() {
-    return A`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: { mask: Number, max: 360, min: -360, signed: !0 } }} ?disabled=${this.loading} style=${W({
+    return A`<cx-details class="details" ?open=${this.open}><cx-space slot="summary" align-items="center"><div part="icon"><cx-icon name="rotate_90_degrees_cw"></cx-icon></div><cx-typography variant="body2">Rotate</cx-typography></cx-space><cx-space spacing="small"><cx-button-group label=${this.localize.term("history")}><cx-icon-button data-testid="cx-asset-link-format-rotation-ccw" name="rotate_90_degrees_ccw" label=${this.localize.term("undo")} outline size="small" ?disabled=${this.loading || this.value === -360} @click=${this.handleCounterClockwiseClick}></cx-icon-button><cx-icon-button data-testid="cx-asset-link-format-rotation-cw" name="rotate_90_degrees_cw" label=${this.localize.term("redo")} outline size="small" ?disabled=${this.loading || this.value === 360} @click=${this.handleClockwiseClick}></cx-icon-button></cx-button-group><cx-input data-testid="cx-asset-link-format-rotation" value=${(this.value + this.defaultValue).toString()} placeholder="0" mask="num" .maskBlocks=${{ num: { mask: Number, max: 360, min: -360, signed: !0 } }} ?disabled=${this.loading} style=${D({
       flex: "none",
       width: "80px"
     })} @cx-input=${this.handleRotationChange}></cx-input><cx-button data-testid="cx-asset-link-format-rotation-apply" variant="primary" ?disabled=${this.value === this.lastAppliedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-H.styles = [j, He];
+H.styles = [V, We];
 H.dependencies = {
-  "cx-button": K,
-  "cx-button-group": te,
-  "cx-details": J,
-  "cx-icon": tt,
+  "cx-button": Z,
+  "cx-button-group": ie,
+  "cx-details": et,
+  "cx-icon": it,
   "cx-icon-button": vt,
-  "cx-space": O,
-  "cx-typography": L
+  "cx-space": L,
+  "cx-typography": U
 };
-G([
-  et(".details")
+Q([
+  Y(".details")
 ], H.prototype, "base", 2);
-G([
+Q([
   l({ reflect: !0, type: Boolean })
 ], H.prototype, "open", 2);
-G([
+Q([
   l({ reflect: !0, type: Number })
 ], H.prototype, "value", 2);
-G([
+Q([
   l({ attribute: "default-value", reflect: !0, type: Number })
 ], H.prototype, "defaultValue", 2);
-G([
+Q([
   l({ reflect: !0, type: Boolean })
 ], H.prototype, "loading", 2);
-G([
+Q([
   l({ attribute: "last-applied-value", reflect: !0, type: Number })
 ], H.prototype, "lastAppliedValue", 2);
-G([
-  F("open", { waitUntilFirstUpdate: !0 })
+Q([
+  M("open", { waitUntilFirstUpdate: !0 })
 ], H.prototype, "handleOpenChange", 1);
-H = G([
-  V("cx-asset-link-format-rotation")
+H = Q([
+  G("cx-asset-link-format-rotation")
 ], H);
-const De = B`cx-details::part(base){border-bottom-width:0}`;
-var Ne = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, xt = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Oe(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Ne(e, i, a), a;
+const Oe = q`cx-details::part(base){border-bottom-width:0}`;
+var Le = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, yt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ue(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && Le(e, i, a), a;
 };
-let N = class extends U {
+let O = class extends B {
   constructor() {
-    super(...arguments), this.localize = new q(this), this.open = !1, this.value = !1;
+    super(...arguments), this.localize = new j(this), this.open = !1, this.value = !1;
   }
   handleApply(t) {
     this.emit("cx-asset-link-format-metadata-change", {
@@ -1671,36 +1694,36 @@ let N = class extends U {
     return A`<cx-details class="details" ?open=${this.open} @cx-show=${this.onShowDetails} @cx-hide=${this.onHideDetails}><cx-space slot="summary" align-items="center"><div class="details__summary__icon"><div part="icon"><cx-icon name="short_text"></cx-icon></div></div><cx-typography variant="body2">${this.localize.term("metadata")}</cx-typography></cx-space><cx-space spacing="small"><cx-tooltip data-testid="cx-asset-link-format-metadata-tooltip" content=${this.localize.term("metadataHelpText")} hoist><cx-checkbox data-testid="cx-asset-link-format-metadata" class="details__checkbox" ?checked=${this.value} @cx-change=${this.handleApply}>${this.localize.term("preserveMetadata")}</cx-checkbox></cx-tooltip></cx-space></cx-details>`;
   }
 };
-N.styles = [j, De];
-N.dependencies = {
-  "cx-button": K,
-  "cx-checkbox": ee,
-  "cx-details": J,
-  "cx-icon": tt,
-  "cx-space": O,
-  "cx-tooltip": Ot,
-  "cx-typography": L
+O.styles = [V, Oe];
+O.dependencies = {
+  "cx-button": Z,
+  "cx-checkbox": se,
+  "cx-details": et,
+  "cx-icon": it,
+  "cx-space": L,
+  "cx-tooltip": Lt,
+  "cx-typography": U
 };
-xt([
-  et(".details")
-], N.prototype, "base", 2);
-xt([
+yt([
+  Y(".details")
+], O.prototype, "base", 2);
+yt([
   l({ reflect: !0, type: Boolean })
-], N.prototype, "open", 2);
-xt([
+], O.prototype, "open", 2);
+yt([
   l({ reflect: !0, type: Boolean })
-], N.prototype, "value", 2);
-N = xt([
-  V("cx-asset-link-format-metadata")
-], N);
-var Le = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, y = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Ue(e, i) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (a = (s ? h(e, i, a) : h(a)) || a);
-  return s && a && Le(e, i, a), a;
+], O.prototype, "value", 2);
+O = yt([
+  G("cx-asset-link-format-metadata")
+], O);
+var Be = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, y = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? qe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (s ? n(e, i, a) : n(a)) || a);
+  return s && a && Be(e, i, a), a;
 };
-let g = class extends U {
+let g = class extends B {
   constructor() {
-    super(), this.localize = new q(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
+    super(), this.localize = new j(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
         label: "Free",
         value: "free"
@@ -1786,6 +1809,7 @@ let g = class extends U {
       keepAspectRatio: !0,
       percentageHeight: 0,
       percentageWidth: 0,
+      position: W.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -1795,7 +1819,7 @@ let g = class extends U {
     }, 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.apiGetTransformAssetLink = de, this.apiGetCropFocusMode = xe, 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.apiGetTransformAssetLink = me, this.apiGetCropFocusMode = Se, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
   }
   /**
    * Transform requests must resolve to a web-displayable image (the browser renders the
@@ -1830,6 +1854,16 @@ let g = class extends U {
       (e) => e.key === u.Crop
     )?.value.focusMode ?? "manual";
   }
+  /**
+   * The anchor position of the last applied crop transformation, for the no-asset case
+   * only. Reflects whatever position the last committed Crop transformation used, or
+   * top-left when nothing has been applied yet.
+   */
+  get lastAppliedCropPosition() {
+    return this.transformations.findLast(
+      (e) => e.key === u.Crop
+    )?.value.position ?? W.CenterCenter;
+  }
   /**
    * Checks if the crop apply button should be disabled.
    * This is determined by comparing the current crop size with the last crop size.
@@ -1841,9 +1875,9 @@ let g = class extends U {
       return !1;
     if (this.cropSize.unit === o.AspectRatio && !this.asset) {
       const e = this.lastCropSize[o.AspectRatio];
-      return this.cropSize.ratioWidth === e.width && this.cropSize.ratioHeight === e.height && this.cropSize.focusMode === this.lastAppliedCropFocusMode;
+      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)
+    if (!this.asset && this.cropSize.focusMode !== this.lastAppliedCropFocusMode || !this.asset && this.cropSize.position !== this.lastAppliedCropPosition)
       return !1;
     const t = [
       "height",
@@ -1909,14 +1943,14 @@ let g = class extends U {
           }
         };
       if (e?.value.width && e?.value.height) {
-        const { height: i, width: s, x: a = 0, y: r = 0 } = e.value, h = rt(s, i);
+        const { height: i, width: s, x: a = 0, y: r = 0 } = e.value, n = nt(s, i);
         return {
           [o.AspectRatio]: {
-            height: h.height,
+            height: n.height,
             percentageHeight: 100,
             percentageWidth: 100,
             unit: o.AspectRatio,
-            width: h.width,
+            width: n.width,
             x: 0,
             y: 0
           },
@@ -1932,7 +1966,7 @@ let g = class extends U {
         };
       }
     }
-    const t = this.lastImageSize.width && this.lastImageSize.height ? rt(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
+    const t = this.lastImageSize.width && this.lastImageSize.height ? nt(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
     return {
       [o.AspectRatio]: {
         height: t.height,
@@ -1979,7 +2013,7 @@ let g = class extends U {
           }
         };
       if (e?.value.width && e?.value.height) {
-        const { height: i, width: s } = e.value, a = rt(s, i);
+        const { height: i, width: s } = e.value, a = nt(s, i);
         return {
           [o.AspectRatio]: {
             height: a.height,
@@ -1994,7 +2028,7 @@ let g = class extends U {
         };
       }
     }
-    const t = this.lastImageSize.width && this.lastImageSize.height ? rt(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
+    const t = this.lastImageSize.width && this.lastImageSize.height ? nt(this.lastImageSize.width, this.lastImageSize.height) : { height: 1, width: 1 };
     return {
       [o.AspectRatio]: {
         height: t.height,
@@ -2025,7 +2059,7 @@ let g = class extends U {
    * Returns the transformation string for the asset link.
    */
   get transformationString() {
-    return ot({
+    return rt({
       asset: this.asset,
       baseUrl: "",
       parameters: this.parameters,
@@ -2080,7 +2114,7 @@ let g = class extends U {
            */
         });
       });
-      const i = ot({
+      const i = rt({
         asset: this.asset,
         baseUrl: "",
         extension: this.selectedFormat.extension,
@@ -2113,7 +2147,7 @@ let g = class extends U {
   async handleTransformationsChange() {
     if (await this.updateComplete, !this.asset) {
       this.emit("cx-asset-link-format-change", {
-        detail: ot({
+        detail: rt({
           asset: this.asset,
           baseUrl: "",
           options: {
@@ -2128,19 +2162,20 @@ let g = class extends U {
         (c) => c.key === u.Crop && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width && c.value.height)
       );
       if (r?.value.unit === o.AspectRatio && r.value.ratioWidth && r.value.ratioHeight) {
-        const { focusMode: c, ratioHeight: f, ratioWidth: S } = r.value;
+        const { focusMode: c, position: f, ratioHeight: S, ratioWidth: p } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
           percentageHeight: 100,
           percentageWidth: 100,
-          ratioHeight: f,
-          ratioWidth: S,
+          position: f ?? W.CenterCenter,
+          ratioHeight: S,
+          ratioWidth: p,
           unit: o.AspectRatio
         };
       } else if (r) {
-        const { focusMode: c, height: f, unit: S, width: p, x: w = 0, y: R = 0 } = r.value;
+        const { focusMode: c, height: f, position: S, unit: p, width: w, x: b = 0, y: x = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
@@ -2148,10 +2183,11 @@ let g = class extends U {
           height: f,
           percentageHeight: 100,
           percentageWidth: 100,
-          unit: S ?? o.Pixel,
-          width: p,
-          x: w,
-          y: R
+          position: S ?? W.CenterCenter,
+          unit: p ?? o.Pixel,
+          width: w,
+          x: b,
+          y: x
         };
       } else
         this.cropSize = {
@@ -2167,24 +2203,25 @@ let g = class extends U {
           height: 1,
           percentageHeight: 0,
           percentageWidth: 0,
+          position: W.CenterCenter,
           unit: o.Pixel,
           width: 1,
           x: 0,
           y: 0
         };
-      const h = this.transformations.findLast(
+      const n = this.transformations.findLast(
         (c) => c.key === u.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
       );
-      if (h?.value.unit === o.AspectRatio && h.value.ratioWidth && h.value.ratioHeight) {
-        const { ratioHeight: c, ratioWidth: f } = h.value;
+      if (n?.value.unit === o.AspectRatio && n.value.ratioWidth && n.value.ratioHeight) {
+        const { ratioHeight: c, ratioWidth: f } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           ratioHeight: c,
           ratioWidth: f,
           unit: o.AspectRatio
         };
-      } else if (h) {
-        const { height: c = 0, unit: f, width: S = 0 } = h.value;
+      } else if (n) {
+        const { height: c = 0, unit: f, width: S = 0 } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           height: c,
@@ -2203,10 +2240,10 @@ let g = class extends U {
           unit: o.Pixel,
           width: 1
         };
-      const n = this.transformations.findLast(
+      const h = this.transformations.findLast(
         (c) => c.key === u.Rotate
       );
-      this.rotation = n?.value.rotation ?? 0;
+      this.rotation = h?.value.rotation ?? 0;
       const d = this.transformations.findLast((c) => c.key === u.Quality)?.value.quality ?? 100, m = this.transformations.some(
         (c) => c.key === u.Metadata
       );
@@ -2257,6 +2294,7 @@ let g = class extends U {
       keepAspectRatio: this.cropSize.keepAspectRatio,
       percentageHeight: 100,
       percentageWidth: 100,
+      position: W.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -2281,7 +2319,7 @@ let g = class extends U {
        * url: `${this.baseUrl}/${response.relativePath}`,
        */
     };
-    const a = ot({
+    const a = rt({
       asset: this.asset,
       baseUrl: "",
       extension: this.selectedFormat.extension,
@@ -2337,6 +2375,7 @@ let g = class extends U {
       keepAspectRatio: !0,
       percentageHeight: 100,
       percentageWidth: 100,
+      position: W.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -2360,24 +2399,24 @@ let g = class extends U {
     const i = this.proxies?.find((s) => s.id === t);
     i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
       if (s.key === u.Crop) {
-        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, h = a.height / i.formatHeight * e.formatHeight, n = a.x / i.formatWidth * e.formatWidth, d = a.y / i.formatHeight * e.formatHeight;
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, h = a.x / i.formatWidth * e.formatWidth, d = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
             ...s.value,
-            height: h,
+            height: n,
             width: r,
-            x: n,
+            x: h,
             y: d
           }
         };
       }
       if (s.key === u.Resize) {
-        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, h = a.height / i.formatHeight * e.formatHeight;
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
-            height: h,
+            height: n,
             width: r
           }
         };
@@ -2397,6 +2436,7 @@ let g = class extends U {
       keepAspectRatio: !0,
       percentageHeight: 100,
       percentageWidth: 100,
+      position: W.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -2444,8 +2484,8 @@ let g = class extends U {
     keepAspectRatio: s,
     percentageHeight: a,
     percentageWidth: r,
-    ratioHeight: h,
-    ratioWidth: n,
+    ratioHeight: n,
+    ratioWidth: h,
     unit: d,
     useCropMode: m,
     width: c
@@ -2478,8 +2518,8 @@ let g = class extends U {
           focusMode: e
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
-        ratioHeight: h ?? this.cropSize.ratioHeight,
-        ratioWidth: n ?? this.cropSize.ratioWidth,
+        ratioHeight: n ?? this.cropSize.ratioHeight,
+        ratioWidth: h ?? this.cropSize.ratioWidth,
         unit: d ?? this.cropSize.unit
       };
     }
@@ -2494,9 +2534,9 @@ let g = class extends U {
     } = e;
     if (s === 0 || i === 0)
       return;
-    const h = this.cropSize.percentageWidth !== s, n = this.cropSize.percentageHeight !== i;
+    const n = this.cropSize.percentageWidth !== s, h = this.cropSize.percentageHeight !== i;
     let d = this.cropSize.height, m = this.cropSize.width;
-    h && (m = Math.round(s * this.selectedFormat.width / 100)), n && (d = Math.round(
+    n && (m = Math.round(s * this.selectedFormat.width / 100)), h && (d = Math.round(
       i * this.selectedFormat.height / 100
     ));
     const c = this.cropSize.focusMode;
@@ -2551,8 +2591,8 @@ let g = class extends U {
       const s = this.focusModes.find(
         (d) => d.value === this.cropSize.focusMode
       )?.auto;
-      let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, h = this.cropSize.x, n = this.cropSize.y;
-      e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (h = 0, n = 0), s ? await this.handleRequestAutoCropSuggestion({
+      let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, h = this.cropSize.y;
+      e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (n = 0, h = 0), s ? await this.handleRequestAutoCropSuggestion({
         cropMode: e,
         focusMode: r,
         height: this.cropSize.height,
@@ -2563,8 +2603,8 @@ let g = class extends U {
         cropMode: e,
         focusMode: r,
         keepAspectRatio: a,
-        x: h,
-        y: n
+        x: n,
+        y: h
       };
     }
   }
@@ -2579,6 +2619,12 @@ let g = class extends U {
       focusMode: e
     };
   }
+  onCropPositionChange(t) {
+    this.cropSize = {
+      ...this.cropSize,
+      position: t.detail.position
+    };
+  }
   async onCropChange(t) {
     const e = this.cropSize.unit;
     if (t.detail.unit === o.AspectRatio) {
@@ -2588,37 +2634,37 @@ let g = class extends U {
       ) : 0, a = this.asset ? Math.min(
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
-      ) : 0, r = this.asset ? a * 100 / this.selectedFormat.height : 100, h = this.asset ? s * 100 / this.selectedFormat.width : 100;
-      let n = this.cropSize.x, d = this.cropSize.y;
-      n + h > 100 && (n = 100 - h), d + r > 100 && (d = 100 - r);
+      ) : 0, r = this.asset ? a * 100 / this.selectedFormat.height : 100, n = this.asset ? s * 100 / this.selectedFormat.width : 100;
+      let h = this.cropSize.x, d = this.cropSize.y;
+      h + n > 100 && (h = 100 - n), d + r > 100 && (d = 100 - r);
       let m = this.cropSize.cropMode;
       this.cropModes.find(
         (f) => f.value === m
-      )?.auto && (m = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = h, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
+      )?.auto && (m = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = r, this.cropSize.percentageWidth = n, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
         cropMode: m,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
-        percentageWidth: h,
+        percentageWidth: n,
         ratioHeight: t.detail.height,
         ratioWidth: t.detail.width,
         unit: o.AspectRatio,
         width: s,
-        x: n,
+        x: h,
         y: d
       };
     } else {
       const i = this.asset ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.asset ? t.detail.width * 100 / this.selectedFormat.width : 100;
       let a = this.cropSize.x, r = this.cropSize.y;
       a + s > 100 && (a = 100 - s), r + i > 100 && (r = 100 - i);
-      let h = this.cropSize.cropMode;
-      const n = this.cropModes.find(
-        (d) => d.value === h
+      let n = this.cropSize.cropMode;
+      const h = this.cropModes.find(
+        (d) => d.value === n
       )?.auto;
-      (t.detail.breakAspectRatio || n) && (h = "free"), t.detail.silent ? (this.cropSize.cropMode = h, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = r) : this.cropSize = {
+      (t.detail.breakAspectRatio || h) && (n = "free"), t.detail.silent ? (this.cropSize.cropMode = n, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = r) : this.cropSize = {
         ...this.cropSize,
-        cropMode: h,
+        cropMode: n,
         height: t.detail.height,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: i,
@@ -2646,40 +2692,50 @@ let g = class extends U {
   onCropApply(t) {
     if (this.preResetTransformations = void 0, this.lastAction = u.Crop, !this.asset) {
       const {
-        focusMode: n,
+        focusMode: h,
         height: d,
-        ratioHeight: m,
-        ratioWidth: c,
-        unit: f,
-        width: S,
-        x: p,
-        y: w
-      } = this.cropSize, R = this.focusModes.find(
-        (x) => x.value === n
+        position: m,
+        ratioHeight: c,
+        ratioWidth: f,
+        unit: S,
+        width: p,
+        x: w,
+        y: b
+      } = this.cropSize, x = this.focusModes.find(
+        (F) => F.value === h
       )?.auto ?? !1;
-      if (f === o.AspectRatio) {
-        c && m && this.upsertTransformation({
+      if (S === o.AspectRatio) {
+        f && c && this.upsertTransformation({
           key: u.Crop,
           value: {
-            focusMode: n,
-            isFocusModeAuto: R,
-            ratioHeight: m,
-            ratioWidth: c,
-            unit: f
+            focusMode: h,
+            isFocusModeAuto: x,
+            position: m,
+            ratioHeight: c,
+            ratioWidth: f,
+            unit: S
           }
         });
         return;
       }
-      (d || S) && this.upsertTransformation({
+      (d || p) && this.upsertTransformation({
         key: u.Crop,
         value: {
-          focusMode: n,
+          focusMode: h,
           height: d,
-          isFocusModeAuto: R,
-          unit: f,
-          width: S,
-          x: Number.isFinite(p) ? p : void 0,
-          y: Number.isFinite(w) ? w : void 0
+          isFocusModeAuto: x,
+          position: m,
+          unit: S,
+          width: p,
+          /**
+           * Without an asset there is no cropper to drag, so x/y are always the 0
+           * placeholder from cropSize's default — never a real manual offset. Omit
+           * zero values (matching the `omitZeroXY` behavior used for the live preview
+           * string) so `hasManualXY` in buildTransformationString doesn't spuriously
+           * suppress the focus mode / position `c_g_` gravity value.
+           */
+          x: Number.isFinite(w) && w !== 0 ? w : void 0,
+          y: Number.isFinite(b) && b !== 0 ? b : void 0
         }
       });
       return;
@@ -2687,12 +2743,12 @@ let g = class extends U {
     const { height: e, mode: i, unit: s, width: a } = t.detail;
     if (!this.cropperElement || !this.selectedFormat)
       return;
-    const r = this.cropSize.focusMode, h = this.focusModes.find(
-      (n) => n.value === r
+    const r = this.cropSize.focusMode, n = this.focusModes.find(
+      (h) => h.value === r
     )?.auto ?? !1;
     if (e && a && s) {
-      let n = a, d = e;
-      if (s === o.AspectRatio && (n = this.cropSize.percentageWidth * this.selectedFormat.width / 100, d = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+      let h = a, d = e;
+      if (s === o.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, d = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
         this.transformations = [
           ...this.transformations,
           {
@@ -2700,9 +2756,9 @@ let g = class extends U {
             value: {
               focusMode: r,
               height: d,
-              isFocusModeAuto: h,
+              isFocusModeAuto: n,
               mode: i,
-              width: n
+              width: h
             }
           }
         ];
@@ -2715,9 +2771,9 @@ let g = class extends U {
             value: {
               focusMode: r,
               height: d,
-              isFocusModeAuto: h,
+              isFocusModeAuto: n,
               unit: s,
-              width: n,
+              width: h,
               x: m,
               y: c
             }
@@ -2730,7 +2786,7 @@ let g = class extends U {
         key: u.Crop,
         value: {
           focusMode: r,
-          isFocusModeAuto: h,
+          isFocusModeAuto: n,
           mode: i
         }
       }
@@ -2788,15 +2844,15 @@ let g = class extends U {
     if (!this.selectedFormat)
       return;
     const a = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
-    let h = s, n = e;
-    this.resizeSize.unit !== i ? (h = a, n = r) : i === o.AspectRatio && (h = Math.round(s / e * r), n = r), this.transformations = [
+    let n = s, h = e;
+    this.resizeSize.unit !== i ? (n = a, h = r) : i === o.AspectRatio && (n = Math.round(s / e * r), h = r), this.transformations = [
       ...this.transformations,
       {
         key: u.Resize,
         value: {
-          height: n,
+          height: h,
           unit: i,
-          width: h
+          width: n
         }
       }
     ];
@@ -2891,7 +2947,7 @@ let g = class extends U {
     return A`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${_(
       !this.hideHeader,
       () => A`<cx-space class="asset-link-format__section-header" direction="horizontal" spacing="small" align-items="center" justify-content="space-between"><cx-typography variant="body3">${this.localize.term("transformations")}</cx-typography><cx-space direction="horizontal" spacing="3x-small" align-items="center"><cx-button class="asset-link-format__undo" variant="custom" ?disabled=${!this.hasUnfrozenTransformations && this.preResetTransformations === void 0} @click=${this.handleUndo}>${this.localize.term("undo")}</cx-button>${_(this.canReset, () => A`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${this.transformations.length === 0} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
-      () => Qt
+      () => Xt
     )}
       ${_(
       !this.noFormat,
@@ -2899,7 +2955,7 @@ let g = class extends U {
     )}
       ${_(
       !this.noCrop,
-      () => A`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === u.Crop} ?no-ratio-modes=${!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=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} percentage-width=${this.cropSize.percentageWidth} percentage-height=${this.cropSize.percentageHeight} 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-change=${this.onCropChange} @cx-asset-link-format-crop-changed=${this.onCropChanged} @cx-asset-link-format-crop-apply=${this.onCropApply}></cx-asset-link-format-crop>`
+      () => A`<cx-asset-link-format-crop class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-crop"} ?disabled-apply=${this.disabledCropApply} ?loading=${this.loading && this.lastAction === u.Crop} ?keep-aspect-ratio=${this.cropSize.keepAspectRatio} ?show-position-picker=${!this.asset} focus-mode=${this.cropSize.focusMode} crop-mode=${this.cropSize.cropMode} width=${this.cropSize.width} height=${this.cropSize.height} max-width=${this.asset ? this.lastResizeSize[o.Pixel].width : 1 / 0} max-height=${this.asset ? this.lastResizeSize[o.Pixel].height : 1 / 0} 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>`
     )}
       ${_(
       !this.noResize,
@@ -2918,18 +2974,18 @@ let g = class extends U {
     )}</div>`;
   }
 };
-g.styles = [j, Se];
+g.styles = [V, ze];
 g.dependencies = {
-  "cx-asset-link-format-crop": z,
-  "cx-asset-link-format-extension": X,
-  "cx-asset-link-format-metadata": N,
-  "cx-asset-link-format-proxy": I,
+  "cx-asset-link-format-crop": C,
+  "cx-asset-link-format-extension": K,
+  "cx-asset-link-format-metadata": O,
+  "cx-asset-link-format-proxy": E,
   "cx-asset-link-format-quality": T,
-  "cx-asset-link-format-resize": b,
+  "cx-asset-link-format-resize": v,
   "cx-asset-link-format-rotation": H,
-  "cx-button": K,
-  "cx-space": O,
-  "cx-typography": L
+  "cx-button": Z,
+  "cx-space": L,
+  "cx-typography": U
 };
 y([
   l({ attribute: "base-url", type: String })
@@ -2998,74 +3054,74 @@ y([
   l({ attribute: !1, reflect: !1, type: Object })
 ], g.prototype, "queryElement", 2);
 y([
-  k()
+  R()
 ], g.prototype, "activeSetting", 2);
 y([
-  k()
+  R()
 ], g.prototype, "selectedFormat", 2);
 y([
-  k()
+  R()
 ], g.prototype, "resizeSize", 2);
 y([
-  k()
+  R()
 ], g.prototype, "cropSize", 2);
 y([
-  k()
+  R()
 ], g.prototype, "rotation", 2);
 y([
-  k()
+  R()
 ], g.prototype, "defaultSize", 2);
 y([
-  k()
+  R()
 ], g.prototype, "cropperElement", 2);
 y([
-  k()
+  R()
 ], g.prototype, "parameters", 2);
 y([
-  k()
+  R()
 ], g.prototype, "loading", 2);
 y([
-  k()
+  R()
 ], g.prototype, "lastAction", 2);
 y([
-  k()
+  R()
 ], g.prototype, "frozenIndex", 2);
 y([
-  k()
+  R()
 ], g.prototype, "preResetTransformations", 2);
 y([
-  F("transformations")
+  M("transformations")
 ], g.prototype, "handleTransformationsChange", 1);
 y([
-  F("selectedProxy")
+  M("selectedProxy")
 ], g.prototype, "handleSelectedProxyChange", 1);
 y([
-  F("loading")
+  M("loading")
 ], g.prototype, "handleLoadingChange", 1);
 g = y([
-  V("cx-asset-link-format")
+  G("cx-asset-link-format")
 ], g);
 export {
   g as C,
   wt as D,
-  lt as F,
-  Y as O,
-  fe as a,
-  ne as b,
-  Lt as c,
-  $i as d,
-  Pi as e,
-  Ri as f,
-  Bt as g,
-  dt as h,
+  ct as F,
+  tt as O,
+  xe as a,
+  ce as b,
+  Ut as c,
+  Fi as d,
+  _i as e,
+  Mi as f,
+  qt as g,
+  ut as h,
   At as i,
-  nt as j,
-  Mt as k,
-  _t as l,
-  ct as m,
-  pt as n,
-  Et as o,
-  Fi as p,
-  se as q,
-  ie as u
+  lt as j,
+  _t as k,
+  It as l,
+  pt as m,
+  dt as n,
+  Ht as o,
+  Ii as p,
+  oe as q,
+  ae as u
 };