@orangelogic/design-system 2.191.0 → 3.0.0-4296IL-beta-2

package/library/chunks/{asset-link-format.CEDcHah6.js → asset-link-format.BttMn2Id.js}

@@ -1,49 +1,50 @@
 import "../components/cropper.js";
-import { C as Z } from "./button.BnkkUqiI.js";
+import { C as Z } from "./button.CpY4FCwE.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 Dt, C as Nt, S as qt, b as jt, c as Vt, d as Gt } from "./endpoints.mJ5S-tIs.js";
+import { n as h, C as B } from "./lib-cortex-element.CVMmyPMC.js";
+import { h as I, a as Wt, C as Dt, S as Gt, b as Qt, c as Kt, d as Xt } from "./endpoints.mJ5S-tIs.js";
 import "./browser.BHOCIF_A.js";
-import { i as q, x as A, E as Qt } from "./lit-element.jLBm65_O.js";
+import { i as q, x as z, E as Nt } from "./lit-element.jLBm65_O.js";
 import "./form.DSsy3Fcy.js";
-import { L as j } from "./i18n.DbXTTLXx.js";
-import { a as Xt } from "./string.CfI2ejyR.js";
+import { L as j } from "./i18n.BA19xtyU.js";
+import { a as Zt } from "./string.CfI2ejyR.js";
 import "./date-picker.BGHn6qg8.js";
-import { a as $t, b as rt } from "./transformation.8uLv6uwG.js";
+import "./content-builder.BX4pHujE.js";
 import "./unsafe-html.Dff7-rCx.js";
-import { b as Kt } from "./_baseUniq.lwMgmtt2.js";
+import { a as Rt, r as Ot, c as rt } from "./transformation.BHN5MvL0.js";
+import { b as Yt } from "./_baseUniq.lwMgmtt2.js";
 import { c as V } from "./component.styles.CRO4Odto.js";
-import { v as Zt } from "./v4.CKZ6klMF.js";
+import { v as Jt } from "./v4.CKZ6klMF.js";
 import { U as o, T as m } from "./asset-link-format.ClaYu_v8.js";
-import { P as W } from "./position-picker.DjnhxIKF.js";
+import { P as D } from "./position-picker.DjnhxIKF.js";
 import { c as G } from "./custom-element.L4WJXn1j.js";
-import { w as F } from "./watch.DJF5K-8U.js";
-import { s as Pt, a as nt } from "./number.Cx2ncfJJ.js";
-import { r as R } from "./state.CSDxrqLd.js";
-import { n as M } from "./when.Dr1es41R.js";
+import { w as $ } from "./watch.DJF5K-8U.js";
+import { s as $t, a as nt } from "./number.Cx2ncfJJ.js";
+import { r as b } from "./state.CSDxrqLd.js";
+import { n as _ } from "./when.Dr1es41R.js";
 import et from "../components/details.js";
-import Yt from "../components/divider.js";
+import Lt from "../components/divider.js";
 import { C as it } from "./icon.CpHbi8tH.js";
-import { C as vt } from "./icon-button.CVrxJcZq.js";
-import { C as bt } from "./input.33UmFGqR.js";
-import { C as gt } from "./option.B6odSlS2.js";
-import xt from "../components/select.js";
-import Jt from "../components/position-picker.js";
-import { c as te } from "./image.Y5c_hFx8.js";
+import { C as zt } from "./icon-button.BWJ1Vqn5.js";
+import { C as wt } from "./input.xgeLCG8I.js";
+import { C as ft } from "./option.jeaj7_Lr.js";
+import gt 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 Ot from "../components/tooltip.js";
-import ee from "../components/button-group.js";
-import ie from "../components/checkbox.js";
-function se(t) {
-  return t && t.length ? Kt(t) : [];
-}
+import { c as at } from "./repeat.CFjcER6_.js";
+import { o as N } from "./style-map.llVFPd__.js";
+import Ut from "../components/tooltip.js";
+import ie from "../components/button-group.js";
+import se from "../components/checkbox.js";
 function ae(t) {
+  return t && t.length ? Yt(t) : [];
+}
+function oe(t) {
   return typeof t == "object" && t !== null && "URI" in t;
 }
-const oe = {
+const re = {
   artist: "Artist",
   color: "Color",
   createDate: "CreateDate",
@@ -65,35 +66,35 @@ const oe = {
   systemIdentifier: "SystemIdentifier",
   text: "Text",
   title: "Title"
-}, re = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
-function zt(t) {
+}, ne = /* @__PURE__ */ new Set(["mediaDate", "createDate", "editDate"]);
+function At(t) {
   return !/[\s&+/*"\\:(),'<>~|[\]{}]/.test(t) && !/^(?:OR|AND|NOT)$/.test(t) ? t : `"${t.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
 }
-function Ft(t, e) {
-  const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${zt(a)}`);
+function Pt(t, e) {
+  const s = (Array.isArray(e) ? e : [e]).map((a) => `${t}:${At(a)}`);
   return s.length > 1 ? `(${s.join(" OR ")})` : s[0] ?? "";
 }
-function ne(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 [n, h] of Object.entries(
+      for (const [n, l] of Object.entries(
         a
       ))
-        e.push(Ft(n, h));
+        e.push(Pt(n, l));
       continue;
     }
-    const r = oe[s];
+    const r = re[s];
     if (r) {
-      if (re.has(s)) {
+      if (ne.has(s)) {
         e.push(
-          ne(r, a)
+          he(r, a)
         );
         continue;
       }
@@ -105,14 +106,14 @@ function he(t) {
         const n = Array.isArray(a) ? a : [a];
         if (n.length === 0)
           continue;
-        const h = [
-          ...n.map((p) => `ParentFolderIdentifier:${zt(String(p))}`),
-          ...n.map((p) => `ParentAlbumIdentifier:${zt(String(p))}`)
+        const l = [
+          ...n.map((p) => `ParentFolderIdentifier:${At(String(p))}`),
+          ...n.map((p) => `ParentAlbumIdentifier:${At(String(p))}`)
         ];
-        e.push(`(${h.join(" OR ")})`);
+        e.push(`(${l.join(" OR ")})`);
         continue;
       }
-      e.push(Ft(r, a));
+      e.push(Pt(r, a));
     }
   }
   return e.join(" AND ");
@@ -128,40 +129,40 @@ function ht(t) {
     const e = ht(t.not);
     return e ? `NOT (${e})` : "";
   }
-  return he(t);
+  return le(t);
 }
-const wt = "CoreField.LargeSizePreview", lt = "CoreField.DocType", le = "Document.Title", ce = "Document.CaptionLong", ct = "Document.FileExtension", _t = "CoreField.FileSize", Mt = "CoreField.Identifier", It = "CoreField.Keywords", pt = "CoreField.MaxHeight", dt = "CoreField.MaxWidth", ut = "Document.RecordID", Et = "CoreField.DocSubType", Lt = "CoreField.TitleWithFallback", mt = "CoreField.OriginalFileName", ft = "CoreField.UpdatedFileName", tt = "CoreField.OriginalPreview", Fi = "Document.DocSubType", _i = "Document.InPoint", Mi = "Document.OutPoint", Ct = {
+const ce = "CoreField.LargeSizePreview", lt = "CoreField.DocType", pe = "Document.Title", de = "Document.CaptionLong", ot = "Document.FileExtension", Ft = "CoreField.FileSize", _t = "CoreField.Identifier", Mt = "CoreField.Keywords", ct = "CoreField.MaxHeight", pt = "CoreField.MaxWidth", dt = "Document.RecordID", It = "CoreField.DocSubType", Bt = "CoreField.TitleWithFallback", ut = "CoreField.OriginalFileName", mt = "CoreField.UpdatedFileName", ue = "CoreField.OriginalPreview", Hi = "Document.DocSubType", Ti = "Document.InPoint", Wi = "Document.OutPoint", yt = {
   DEFAULT_VIEW_SIZE: "Document.LargeSizePreview",
   FIELD_TITLE_WITH_FALLBACK: "Document.TitleWithFallback",
   ORIGINAL_VIEW_SIZE: "Document.OriginalPreview"
-}, Ut = {
-  [wt]: Ct.DEFAULT_VIEW_SIZE,
-  [Lt]: Ct.FIELD_TITLE_WITH_FALLBACK,
-  [tt]: Ct.ORIGINAL_VIEW_SIZE
-}, pe = Object.fromEntries(
-  Object.entries(Ut).map(([t, e]) => [
+}, qt = {
+  [ce]: yt.DEFAULT_VIEW_SIZE,
+  [Bt]: yt.FIELD_TITLE_WITH_FALLBACK,
+  [ue]: yt.ORIGINAL_VIEW_SIZE
+}, me = Object.fromEntries(
+  Object.entries(qt).map(([t, e]) => [
     e,
     t
   ])
 );
-function de(t) {
-  return Ut[t] ?? t;
+function fe(t) {
+  return qt[t] ?? t;
 }
-function Ht(t) {
+function Et(t) {
   const e = {};
   for (const [i, s] of Object.entries(t)) {
-    const a = pe[i] ?? i;
+    const a = me[i] ?? i;
     e[a] = s;
   }
   return e;
 }
-function ue(t) {
+function ge(t) {
   const e = new URLSearchParams();
   for (const [i, s] of Object.entries(t))
     s != null && (Array.isArray(s) ? s.forEach((a) => e.append(i, String(a))) : e.append(i, String(s)));
   return e;
 }
-async function Bt({
+async function jt({
   countPerPage: t,
   fields: e,
   getPermanentAssetsPaths: i,
@@ -169,23 +170,23 @@ async function Bt({
   isSiteBuilder: a,
   pageNumber: r,
   query: n,
-  securityByPassToken: h,
+  securityByPassToken: l,
   siteUrl: p,
-  sort: f,
+  sort: g,
   token: c,
-  useSession: g
+  useSession: S
 }) {
-  const y = e?.map(de), d = {
+  const A = e?.map(fe), d = {
     CountPerPage: t,
-    Fields: se(y),
+    Fields: ae(A),
     Format: "json",
     GetPermanentAssetsPaths: i || void 0,
     PageNumber: r,
     Query: ht(n),
-    SecurityByPassToken: h || void 0,
-    Sort: f || void 0,
-    UseSession: g || void 0
-  }, z = s === "POST";
+    SecurityByPassToken: l || void 0,
+    Sort: g || void 0,
+    UseSession: S || void 0
+  }, y = s === "POST";
   try {
     return (await I.request({
       baseURL: p,
@@ -193,27 +194,27 @@ async function Bt({
       method: s,
       // POST large RecordID queries as a urlencoded body to dodge the ~2KB URL cap;
       // GET keeps the same fields on the query string.
-      ...z ? { data: ue(d) } : { params: d, paramsSerializer: { indexes: null } },
+      ...y ? { data: ge(d) } : { params: d, paramsSerializer: { indexes: null } },
       responseType: "json",
       transformResponse: [
         ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
-        a ? (u) => ({
-          items: (u.results?.Items ?? []).map(Ht),
-          sort: u.results?.GlobalInfo?.Sort ?? "",
-          totalCount: u.results?.GlobalInfo?.TotalCount ?? 0
-        }) : (u) => ({
-          items: (u.APIResponse?.Items ?? []).map(Ht),
-          sort: u.APIResponse?.GlobalInfo?.Sort ?? "",
-          totalCount: u.APIResponse?.GlobalInfo?.TotalCount ?? 0
+        a ? (f) => ({
+          items: (f.results?.Items ?? []).map(Et),
+          sort: f.results?.GlobalInfo?.Sort ?? "",
+          totalCount: f.results?.GlobalInfo?.TotalCount ?? 0
+        }) : (f) => ({
+          items: (f.APIResponse?.Items ?? []).map(Et),
+          sort: f.APIResponse?.GlobalInfo?.Sort ?? "",
+          totalCount: f.APIResponse?.GlobalInfo?.TotalCount ?? 0
         })
       ],
-      url: a ? Nt.SEARCH_ASSETS : qt["4.0"]
+      url: a ? Dt.SEARCH_ASSETS : Gt["4.0"]
     })).data;
   } catch {
     return { items: [], sort: "", totalCount: 0 };
   }
 }
-async function me({
+async function xe({
   assetId: t,
   extension: e,
   format: i,
@@ -229,7 +230,7 @@ async function me({
       params: {
         SourceAssetFormat: i,
         SourceAssetRecordID: t,
-        TargetExtension: Xt(e),
+        TargetExtension: Zt(e),
         Token: a || void 0,
         Transformations: r,
         UseSession: n || void 0
@@ -239,20 +240,20 @@ async function me({
        */
       timeout: 3e5,
       // 5 minutes
-      url: Dt.GET_TRANSFORM_ASSET_LINK
+      url: Wt.GET_TRANSFORM_ASSET_LINK
     })).data;
   } catch {
     return null;
   }
 }
-const fe = 50;
-function ge(t, e) {
+const ye = 50;
+function Se(t, e) {
   const i = [];
   for (let s = 0; s < t.length; s += e)
     i.push(t.slice(s, s + e));
   return i;
 }
-async function xe({
+async function Ae({
   extraFields: t,
   getPermanentAssetsPaths: e,
   isSiteBuilder: i,
@@ -262,19 +263,18 @@ async function xe({
 }) {
   if (!Array.isArray(s) || s.length === 0)
     return { facets: [], items: [], totalCount: 0 };
-  const n = t?.filter((d) => d && typeof d == "string") ?? [], h = [
+  const n = t?.filter((d) => d && typeof d == "string") ?? [], l = [
     ...n,
-    tt,
-    ft,
     mt,
-    le,
-    ce,
-    ut
-  ], p = ge(s, fe), f = await Promise.all(
+    ut,
+    pe,
+    de,
+    dt
+  ], p = Se(s, ye), g = await Promise.all(
     p.map(
-      (d) => Bt({
+      (d) => jt({
         countPerPage: d.length,
-        fields: h,
+        fields: l,
         getPermanentAssetsPaths: e,
         httpMethod: i ? "GET" : "POST",
         isSiteBuilder: i,
@@ -284,30 +284,29 @@ async function xe({
         token: r
       })
     )
-  ), c = new Map(s.map((d, z) => [d, z])), g = f.flatMap((d) => d.items).map((d) => {
-    let z = k(d, ft);
-    return z === "" && (z = k(d, mt)), {
-      name: z,
-      originalUrl: k(d, tt),
-      recordId: k(d, ut),
+  ), c = new Map(s.map((d, y) => [d, y])), S = g.flatMap((d) => d.items).map((d) => {
+    let y = P(d, mt);
+    return y === "" && (y = P(d, ut)), {
+      name: y,
+      recordId: P(d, dt),
       ...n.reduce(
-        (b, u) => (b[u] = k(d, u), b),
+        (k, f) => (k[f] = P(d, f), k),
         {}
       )
     };
   }).sort(
-    (d, z) => (c.get(d.recordId) ?? 1 / 0) - (c.get(z.recordId) ?? 1 / 0)
-  ), y = f.reduce(
-    (d, z) => d + z.totalCount,
+    (d, y) => (c.get(d.recordId) ?? 1 / 0) - (c.get(y.recordId) ?? 1 / 0)
+  ), A = g.reduce(
+    (d, y) => d + y.totalCount,
     0
   );
-  return { facets: [], items: g, totalCount: y };
+  return { facets: [], items: S, totalCount: A };
 }
-function k(t, e) {
+function P(t, e) {
   const i = t[e];
-  return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : ae(i) ? i.URI : "";
+  return i == null ? "" : typeof i == "string" ? i : typeof i == "number" || typeof i == "boolean" ? String(i) : oe(i) ? i.URI : "";
 }
-async function ye({
+async function ve({
   countPerPage: t,
   directParentFolderIdentifier: e,
   extraFields: i,
@@ -315,75 +314,71 @@ async function ye({
   isSiteBuilder: a,
   limitedDocTypes: r,
   pageNumber: n,
-  parentFolderIdentifier: h,
+  parentFolderIdentifier: l,
   searchTerm: p,
-  securityByPassToken: f,
+  securityByPassToken: g,
   sortOrder: c,
-  token: g
+  token: S
 }) {
-  if (!e && !h)
+  if (!e && !l)
     return { facets: [], items: [], totalCount: 0 };
-  const y = (i?.filter((u) => u && typeof u == "string") ?? []).map((u) => u.replace("%20", " ")), d = {
+  const A = (i?.filter((f) => f && typeof f == "string") ?? []).map((f) => f.replace("%20", " ")), d = {
     directParentFolderIdentifier: e,
-    parentFolderIdentifier: h,
+    parentFolderIdentifier: l,
     ...r && r.length > 0 ? { docType: r } : {}
-  }, z = await Bt({
+  }, y = await jt({
     countPerPage: t,
     fields: [
-      ...y,
-      Lt,
-      wt,
-      tt,
-      It,
-      dt,
-      pt,
-      _t,
-      lt,
-      Et,
+      ...A,
+      Bt,
       Mt,
+      pt,
       ct,
+      Ft,
+      lt,
+      It,
+      _t,
+      ot,
+      dt,
       ut,
-      mt,
-      ft
+      mt
     ],
     getPermanentAssetsPaths: s,
     isSiteBuilder: a,
     pageNumber: n,
     query: d,
-    securityByPassToken: f,
+    securityByPassToken: g,
     sort: void 0,
-    token: g
-  }), b = z.items.map((u) => {
-    let _ = k(u, ct), P = k(u, ft), st = k(u, wt);
-    _ && !_.startsWith(".") && (_ = "." + _), P === "" && (P = k(u, mt)), _.toLowerCase() === ".gif" && (st = k(u, tt));
-    const St = k(u, ut);
+    token: S
+  }), k = y.items.map((f) => {
+    let F = P(f, ot), tt = P(f, mt);
+    F && !F.startsWith(".") && (F = "." + F), tt === "" && (tt = P(f, ut));
+    const H = P(f, dt);
     return {
-      docSubType: k(u, Et),
-      docType: k(u, lt) || "",
-      extension: _,
-      height: k(u, pt) || "0",
-      id: St,
-      identifier: k(u, Mt),
-      imageUrl: st,
-      name: P,
-      originalUrl: k(u, tt),
-      recordId: St,
-      size: k(u, _t) || "0 MB",
-      tags: k(u, It),
-      width: k(u, dt) || "0",
-      ...y.reduce(
-        (X, at) => (X[at] = k(u, at), X),
+      docSubType: P(f, It),
+      docType: P(f, lt) || "",
+      extension: F,
+      height: P(f, ct) || "0",
+      id: H,
+      identifier: P(f, _t),
+      name: tt,
+      recordId: H,
+      size: P(f, Ft) || "0 MB",
+      tags: P(f, Mt),
+      width: P(f, pt) || "0",
+      ...A.reduce(
+        (K, st) => (K[st] = P(f, st), K),
         {}
       )
     };
   });
   return {
     facets: [],
-    items: b,
-    totalCount: z.totalCount
+    items: k,
+    totalCount: y.totalCount
   };
 }
-async function Se({
+async function Ce({
   autoCropMode: t,
   cropHeight: e,
   cropWidth: i,
@@ -412,13 +407,13 @@ async function Se({
           y: n.cropY
         })
       ],
-      url: Dt.GET_CROP_ZONE_SUGGESTION
+      url: Wt.GET_CROP_ZONE_SUGGESTION
     })).data;
   } catch {
     return null;
   }
 }
-async function Ii({
+async function Di({
   assetRecordId: t,
   isSiteBuilder: e,
   siteUrl: i,
@@ -437,25 +432,25 @@ async function Ii({
       responseType: "json",
       transformResponse: [
         ...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
+        (n) => !n || typeof n != "object" ? [] : n.proxies?.map((l) => ({
+          cdnName: l.cdnName,
+          extension: l.extension,
+          formatHeight: l.formatHeight,
+          formatWidth: l.formatWidth,
+          height: l.height,
+          permanentLink: l.permanentLink,
+          proxyLabel: l.proxyLabel,
+          proxyName: l.proxyName,
+          width: l.width
         })) ?? []
       ],
-      url: e ? Nt.GET_AVAILABLE_PROXIES : Gt
+      url: e ? Dt.GET_AVAILABLE_PROXIES : Xt
     })).data;
   } catch {
     return [];
   }
 }
-async function Ei({
+async function Ni({
   siteUrl: t
 } = {}) {
   try {
@@ -476,13 +471,13 @@ async function Ei({
           formatsByDocType: i.formatsByDocType ?? {}
         }
       ],
-      url: jt
+      url: Qt
     })).data;
   } catch {
     return { formatsByDocType: {} };
   }
 }
-async function Hi({
+async function Oi({
   recordIds: t,
   rightsToCheck: e
 }) {
@@ -498,14 +493,14 @@ async function Hi({
       params: { RecordIDs: t, RightsToCheck: e },
       paramsSerializer: { indexes: null },
       responseType: "json",
-      url: Vt.GET_AUTHORIZED_OBJECTS
+      url: Kt.GET_AUTHORIZED_OBJECTS
     });
     return s;
   } catch {
     return i;
   }
 }
-const Tt = 20, Wt = "TR1", Ce = /* @__PURE__ */ new Set([
+const Ht = 20, vt = "TR1", Ct = "TRX", ze = /* @__PURE__ */ new Set([".gif"]), we = /* @__PURE__ */ new Set([
   ".avif",
   ".bmp",
   ".gif",
@@ -516,17 +511,31 @@ const Tt = 20, Wt = "TR1", Ce = /* @__PURE__ */ new Set([
   ".svg",
   ".webp"
 ]);
-function At(t) {
+function Vt(t) {
   const e = t.toLowerCase(), i = e.startsWith(".") ? e : `.${e}`;
-  return Ce.has(i);
+  return we.has(i);
+}
+function Tt({
+  extension: t,
+  format: e,
+  item: i,
+  manualFormat: s
+}) {
+  const a = t?.toLowerCase() ?? "", r = a.startsWith(".") ? a : `.${a}`, n = `path_${vt}`;
+  if (!s)
+    return i[`path_${Ot(a)}`] || i[n];
+  if (!!a && ze.has(r))
+    return i[`path_${Ct}`] || i[n];
+  const p = !a || Vt(a), g = e ? `path_${e}` : void 0;
+  return g && p && i[g] ? i[g] : i[n];
 }
-class Ti {
+class Li {
   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 = Ht, 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) : Ht, this.authToken = i?.token, this.securityByPassToken = i?.securityByPassToken, this.isSiteBuilder = i?.isSiteBuilder ?? !1;
   }
   get totalDataCount() {
     return this.totalCount;
@@ -538,57 +547,70 @@ class Ti {
     end: e,
     extraFields: i = [],
     format: s,
-    start: a,
-    transformations: r
+    manualFormat: a = !0,
+    start: r,
+    transformations: n
   }) {
-    if (e < a)
+    if (e < r)
       return this.data;
-    if (this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < a))
+    if (this.totalCount > 0 && e >= this.totalCount && (e = this.totalCount - 1, e < r))
       return this.data;
-    const n = this.requestEpoch;
-    if (!this.folderId || n !== this.requestEpoch)
+    const l = this.requestEpoch;
+    if (!this.folderId || l !== this.requestEpoch)
       return this.data;
-    const h = s ? `path_${s}` : void 0, p = s === "TRX", f = `path_${Wt}`, c = h ? p && h !== f ? [h, f] : [h] : [], g = Math.floor(a / this.pageSize) + 1, y = Math.floor(e / this.pageSize) + 1;
-    for (let d = g; d <= y; d++) {
-      if (this.fetchedPages.has(d))
+    const p = s ? `path_${s}` : void 0, g = `path_${vt}`, c = `path_${Ct}`, S = [
+      ...new Set(
+        [p, g, c].filter(
+          (y) => !!y
+        )
+      )
+    ], A = Math.floor(r / this.pageSize) + 1, d = Math.floor(e / this.pageSize) + 1;
+    for (let y = A; y <= d; y++) {
+      if (this.fetchedPages.has(y))
         continue;
-      const z = await ye({
+      const k = await ve({
         countPerPage: this.pageSize,
         directParentFolderIdentifier: this.folderId,
-        extraFields: [...i, ...c],
-        getPermanentAssetsPaths: c.length > 0 || void 0,
+        extraFields: [...i, ...S],
+        getPermanentAssetsPaths: !0,
         isSiteBuilder: this.isSiteBuilder,
-        pageNumber: d,
+        pageNumber: y,
         searchTerm: "",
         securityByPassToken: this.securityByPassToken,
         sortOrder: "",
         token: this.authToken
       });
-      if (n !== this.requestEpoch)
+      if (l !== this.requestEpoch)
         return this.data;
-      if (this.fetchedPages.add(d), !this.totalCount && z.totalCount) {
-        const u = Math.min(this.maxEnd, z.totalCount);
-        this.totalCount = u, this.data = Array.from({ length: u }, () => ({
+      if (this.fetchedPages.add(y), !this.totalCount && k.totalCount) {
+        const F = Math.min(this.maxEnd, k.totalCount);
+        this.totalCount = F, this.data = Array.from({ length: F }, () => ({
           alt: "",
-          id: `temp-${Zt()}`,
+          id: `temp-${Jt()}`,
           name: "",
           src: ""
         }));
       }
-      const b = (d - 1) * this.pageSize;
-      for (let u = 0; u < z.items.length; u++) {
-        const _ = b + u;
-        if (_ < this.data.length) {
-          const P = z.items[u], st = !P.extension || At(P.extension);
-          let X = h && (!p || st) && P[h] || p && !st && P[f] || P.imageUrl;
-          X && r && r.length > 0 && (X = $t(X, r)), this.data[_] = {
-            alt: P.name,
-            docType: P.docType,
-            id: P.id,
-            name: P.name,
-            src: X,
+      const f = (y - 1) * this.pageSize;
+      for (let F = 0; F < k.items.length; F++) {
+        const tt = f + F;
+        if (tt < this.data.length) {
+          const H = k.items[F];
+          let K = Tt({
+            extension: H.extension,
+            format: s,
+            item: H,
+            manualFormat: a
+          });
+          K && n && n.length > 0 && (K = Rt(K, n)), this.data[tt] = {
+            alt: H.name,
+            docType: H.docType,
+            extension: H.extension,
+            id: H.id,
+            name: H.name,
+            src: K,
             ...i.reduce(
-              (at, Rt) => (at[Rt] = P[Rt] ?? "", at),
+              (st, kt) => (st[kt] = H[kt] ?? "", st),
               {}
             )
           };
@@ -602,66 +624,81 @@ class Ti {
     folderId: s,
     forceRefetch: a = !1,
     format: r,
-    minLimit: n = 5,
-    noPlaceholders: h = !1,
-    transformations: p
+    manualFormat: n = !0,
+    minLimit: l = 5,
+    noPlaceholders: p = !1,
+    transformations: g
   }) {
     (!this.folderId || this.folderId !== s) && (this.folderId = s, this.resetFolderState()), a && this.resetPageCache();
-    const f = Math.max(5, n), c = e, g = e + f, y = [
+    const c = Math.max(5, l), S = e, A = e + c, d = [
       ...i,
-      pt,
-      dt
+      ct,
+      pt
     ];
     await this.fetchImages({
-      end: g,
-      extraFields: y.filter((b) => b !== ""),
+      end: A,
+      extraFields: d.filter((f) => f !== ""),
       format: r,
-      start: c,
-      transformations: p
+      manualFormat: n,
+      start: S,
+      transformations: g
     });
-    let d = e - f;
-    d < 0 && (this.totalCount === 0 ? d = 0 : d = Math.max(0, this.totalCount + d));
-    const z = d + f;
+    let y = e - c;
+    y < 0 && (this.totalCount === 0 ? y = 0 : y = Math.max(0, this.totalCount + y));
+    const k = y + c;
     return await this.fetchImages({
-      end: z,
-      extraFields: y.filter((b) => b !== ""),
+      end: k,
+      extraFields: d.filter((f) => f !== ""),
       format: r,
-      start: d,
-      transformations: p
-    }), h ? this.data.filter((b) => b.id && !b.id.startsWith("temp-")) : this.data;
+      manualFormat: n,
+      start: y,
+      transformations: g
+    }), p ? this.data.filter((f) => f.id && !f.id.startsWith("temp-")) : this.data;
   }
   async fetchImagesByIDs({
     extraFields: e = [],
     format: i,
-    recordIds: s,
-    transformations: a
+    manualFormat: s = !0,
+    recordIds: a,
+    transformations: r
   }) {
-    if (s.length === 0)
+    if (a.length === 0)
       return [];
-    const r = i ? `path_${i}` : void 0, n = i === "TRX", h = `path_${Wt}`, p = r ? n && r !== h ? [r, h] : [r] : [], f = n ? [ct] : [], c = [
+    const n = i ? `path_${i}` : void 0, l = `path_${vt}`, p = `path_${Ct}`, g = [
+      ...new Set(
+        [n, l, p].filter(
+          (d) => !!d
+        )
+      )
+    ], c = [ot], S = [
       ...e,
       lt,
-      pt,
-      dt
+      ct,
+      pt
     ];
-    return (await xe({
-      extraFields: [...c, ...p, ...f].filter((y) => y !== ""),
-      getPermanentAssetsPaths: p.length > 0 || void 0,
+    return (await Ae({
+      extraFields: [...S, ...g, ...c].filter((d) => d !== ""),
+      getPermanentAssetsPaths: !0,
       isSiteBuilder: this.isSiteBuilder,
-      recordIds: s,
+      recordIds: a,
       securityByPassToken: this.securityByPassToken,
       token: this.authToken
-    })).items.map((y) => {
-      const d = n && y[ct] || "", z = !d || At(d);
-      let u = r && (!n || z) && y[r] || n && !z && y[h] || y.originalUrl;
-      return u && a && a.length > 0 && (u = $t(u, a)), {
-        alt: y.name,
-        docType: y[lt],
-        id: y.recordId,
-        name: y.name,
-        src: u,
-        ...c.reduce(
-          (_, P) => (_[P] = y[P] ?? "", _),
+    })).items.map((d) => {
+      let y = Tt({
+        extension: d[ot],
+        format: i,
+        item: d,
+        manualFormat: s
+      });
+      return y && r && r.length > 0 && (y = Rt(y, r)), {
+        alt: d.name,
+        docType: d[lt],
+        extension: d[ot] || "",
+        id: d.recordId,
+        name: d.name,
+        src: y,
+        ...S.reduce(
+          (k, f) => (k[f] = d[f] ?? "", k),
           {}
         )
       };
@@ -672,20 +709,22 @@ class Ti {
     folderId: i,
     forceRefetch: s = !1,
     format: a,
-    noPlaceholders: r = !1,
-    page: n,
-    pageSize: h = 10,
-    transformations: p
+    manualFormat: r = !0,
+    noPlaceholders: n = !1,
+    page: l,
+    pageSize: p = 10,
+    transformations: g
   }) {
     (!this.folderId || this.folderId !== i) && (this.folderId = i, this.resetFolderState()), s && this.resetPageCache();
-    const f = n * h, c = f + h - 1;
+    const c = l * p, S = c + p - 1;
     return await this.fetchImages({
-      end: c,
+      end: S,
       extraFields: e,
       format: a,
-      start: f,
-      transformations: p
-    }), r ? this.data.filter((g) => g.id && !g.id.startsWith("temp-")) : this.data;
+      manualFormat: r,
+      start: c,
+      transformations: g
+    }), n ? this.data.filter((A) => A.id && !A.id.startsWith("temp-")) : this.data;
   }
   async *fetchImagesInFolderByChunk({
     chunkSize: e = 10,
@@ -694,35 +733,39 @@ class Ti {
     folderId: a,
     forceRefetch: r = !1,
     format: n,
-    start: h = 0,
-    transformations: p
+    manualFormat: l = !0,
+    start: p = 0,
+    transformations: g
   }) {
-    const f = Math.max(1, e);
+    const c = Math.max(1, e);
     if ((!this.folderId || this.folderId !== a) && (this.folderId = a, this.resetFolderState()), r && this.resetPageCache(), i !== -1) {
       await this.fetchImages({
         end: i,
         extraFields: s,
         format: n,
-        start: h,
-        transformations: p
+        manualFormat: l,
+        start: p,
+        transformations: g
       }), yield this.data;
       return;
     }
-    let c = h, g = h + f;
+    let S = p, A = p + c;
     if (await this.fetchImages({
-      end: g,
+      end: A,
       extraFields: s,
       format: n,
-      start: c,
-      transformations: p
-    }), yield this.data, !(!this.totalCount || this.totalCount <= g))
-      for (; g < this.totalCount; )
-        c = g, g = Math.min(g + f, this.totalCount), await this.fetchImages({
-          end: g,
+      manualFormat: l,
+      start: S,
+      transformations: g
+    }), yield this.data, !(!this.totalCount || this.totalCount <= A))
+      for (; A < this.totalCount; )
+        S = A, A = Math.min(A + c, this.totalCount), await this.fetchImages({
+          end: A,
           extraFields: s,
           format: n,
-          start: c,
-          transformations: p
+          manualFormat: l,
+          start: S,
+          transformations: g
         }), yield this.data;
   }
   hostConnected() {
@@ -737,13 +780,13 @@ class Ti {
     this.resetPageCache();
   }
 }
-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, w = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? ve(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+const be = 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}`, ke = 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 Re = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, C = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? $e(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;
+  return s && a && Re(e, i, a), a;
 };
-let C = class extends B {
+let v = class extends B {
   constructor() {
     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]: {
@@ -764,7 +807,7 @@ let C = class extends B {
         x: 0,
         y: 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;
+    }, this.loading = !1, this.cropModes = [], this.focusModes = [], this.focusMode = "manual", this.cropMode = "free", this.position = D.CenterCenter, this.keepAspectRatio = !1, this.invalidWidth = !1, this.invalidHeight = !1, this.aspectRatio = 0;
   }
   get selectedMode() {
     return this.cropModes.find((t) => t.value === this.cropMode);
@@ -857,7 +900,7 @@ let C = class extends B {
       const [s, a] = e.split(":").map(Number);
       if (this.unit === o.Pixel) {
         let r = s, n = a;
-        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = te(
+        Number.isFinite(this.maxWidth) && Number.isFinite(this.maxHeight) && ({ height: n, width: r } = ee(
           this.maxWidth,
           this.maxHeight,
           s,
@@ -975,162 +1018,162 @@ let C = class extends B {
   }
   render() {
     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">${M(
+    return z`<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=${D({
+      () => z`<cx-select data-testid="cx-asset-link-format-crop-mode" value=${this.cropMode} hoist style=${N({
         width: "100%"
-      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${ot(
+      })} @cx-change=${this.onCropModeChange} ?disabled=${this.loading}>${at(
         t,
         (i) => i.value,
-        ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => z`<cx-option value=${s}>${i}</cx-option>`
       )}
-              ${M(
+              ${_(
         e.length > 0,
-        () => A`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
+        () => z`<cx-divider></cx-divider><small>${this.localize.term("autoCropping")}</small>`
       )}
-              ${ot(
+              ${at(
         e,
         (i) => i.value,
-        ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => z`<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=${D({
+              </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=${N({
       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
-              </cx-typography></cx-input></div>${M(
+              </cx-typography></cx-input></div>${_(
       !this.noRatioModes,
-      () => 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>${M(
+      () => z`<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=${D({
+      () => z`<cx-select data-testid="cx-asset-link-format-crop-focus-mode" value=${this.focusMode} hoist style=${N({
         width: "100%"
-      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${ot(
+      })} @cx-change=${this.onFocusModeChange} ?disabled=${this.loading || this.selectedMode?.disabledSize}>${at(
         this.focusModes,
         (i) => i.value,
-        ({ label: i, value: s }) => A`<cx-option value=${s}>${i}</cx-option>`
+        ({ label: i, value: s }) => z`<cx-option value=${s}>${i}</cx-option>`
       )}</cx-select>`
     )}
-        ${M(
+        ${_(
       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({
+      () => z`<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=${N({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-C.styles = [V, we];
-C.dependencies = {
+v.styles = [V, ke];
+v.dependencies = {
   "cx-button": Z,
   "cx-details": et,
-  "cx-divider": Yt,
+  "cx-divider": Lt,
   "cx-icon": it,
-  "cx-icon-button": vt,
-  "cx-input": bt,
-  "cx-option": gt,
-  "cx-position-picker": Jt,
-  "cx-select": xt,
+  "cx-icon-button": zt,
+  "cx-input": wt,
+  "cx-option": ft,
+  "cx-position-picker": te,
+  "cx-select": gt,
   "cx-space": L,
   "cx-typography": U
 };
-w([
+C([
   Y(".details")
-], C.prototype, "base", 2);
-w([
+], v.prototype, "base", 2);
+C([
   Y("cx-position-picker")
-], C.prototype, "positionPicker", 2);
-w([
-  l({ reflect: !0, type: Boolean })
-], C.prototype, "open", 2);
-w([
-  l({ reflect: !0, type: Number })
-], C.prototype, "width", 2);
-w([
-  l({ reflect: !0, type: Number })
-], C.prototype, "height", 2);
-w([
-  l({ attribute: "max-width", reflect: !0, type: Number })
-], C.prototype, "maxWidth", 2);
-w([
-  l({ attribute: "max-height", reflect: !0, type: Number })
-], C.prototype, "maxHeight", 2);
-w([
-  l({ attribute: "ratio-width", reflect: !0, type: Number })
-], C.prototype, "ratioWidth", 2);
-w([
-  l({ attribute: "ratio-height", reflect: !0, type: Number })
-], C.prototype, "ratioHeight", 2);
-w([
-  l({ attribute: "percentage-width", reflect: !0, type: Number })
-], C.prototype, "percentageWidth", 2);
-w([
-  l({ attribute: "percentage-height", reflect: !0, type: Number })
-], C.prototype, "percentageHeight", 2);
-w([
-  l({ reflect: !0, type: String })
-], C.prototype, "unit", 2);
-w([
-  l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
-], C.prototype, "disabledApply", 2);
-w([
-  l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
-], C.prototype, "noRatioModes", 2);
-w([
-  l({ attribute: "show-position-picker", reflect: !0, type: Boolean })
-], C.prototype, "showPositionPicker", 2);
-w([
-  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], C.prototype, "lastAppliedSetting", 2);
-w([
-  l({ reflect: !0, type: Boolean })
-], C.prototype, "loading", 2);
-w([
-  l({ attribute: "crop-modes", reflect: !1, type: Array })
-], C.prototype, "cropModes", 2);
-w([
-  l({ attribute: "focus-modes", reflect: !1, type: Object })
-], C.prototype, "focusModes", 2);
-w([
-  l({ attribute: "focus-mode", reflect: !0, type: String })
-], C.prototype, "focusMode", 2);
-w([
-  l({ attribute: "crop-mode", reflect: !0, type: String })
-], C.prototype, "cropMode", 2);
-w([
-  l({ reflect: !0, type: String })
-], C.prototype, "position", 2);
-w([
-  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], C.prototype, "keepAspectRatio", 2);
-w([
-  R()
-], C.prototype, "invalidWidth", 2);
-w([
-  R()
-], C.prototype, "invalidHeight", 2);
-w([
-  R()
-], C.prototype, "aspectRatio", 2);
-w([
-  F("cropMode", { waitUntilFirstUpdate: !0 }),
-  F("maxWidth", { waitUntilFirstUpdate: !0 }),
-  F("maxHeight", { waitUntilFirstUpdate: !0 }),
-  F("keepAspectRatio")
-], C.prototype, "handleCropModeChange", 1);
-w([
-  F("open", { waitUntilFirstUpdate: !0 })
-], C.prototype, "handleOpenChange", 1);
-C = w([
+], v.prototype, "positionPicker", 2);
+C([
+  h({ reflect: !0, type: Boolean })
+], v.prototype, "open", 2);
+C([
+  h({ reflect: !0, type: Number })
+], v.prototype, "width", 2);
+C([
+  h({ reflect: !0, type: Number })
+], v.prototype, "height", 2);
+C([
+  h({ attribute: "max-width", reflect: !0, type: Number })
+], v.prototype, "maxWidth", 2);
+C([
+  h({ attribute: "max-height", reflect: !0, type: Number })
+], v.prototype, "maxHeight", 2);
+C([
+  h({ attribute: "ratio-width", reflect: !0, type: Number })
+], v.prototype, "ratioWidth", 2);
+C([
+  h({ attribute: "ratio-height", reflect: !0, type: Number })
+], v.prototype, "ratioHeight", 2);
+C([
+  h({ attribute: "percentage-width", reflect: !0, type: Number })
+], v.prototype, "percentageWidth", 2);
+C([
+  h({ attribute: "percentage-height", reflect: !0, type: Number })
+], v.prototype, "percentageHeight", 2);
+C([
+  h({ reflect: !0, type: String })
+], v.prototype, "unit", 2);
+C([
+  h({ attribute: "disabled-apply", reflect: !0, type: Boolean })
+], v.prototype, "disabledApply", 2);
+C([
+  h({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], v.prototype, "noRatioModes", 2);
+C([
+  h({ attribute: "show-position-picker", reflect: !0, type: Boolean })
+], v.prototype, "showPositionPicker", 2);
+C([
+  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], v.prototype, "lastAppliedSetting", 2);
+C([
+  h({ reflect: !0, type: Boolean })
+], v.prototype, "loading", 2);
+C([
+  h({ attribute: "crop-modes", reflect: !1, type: Array })
+], v.prototype, "cropModes", 2);
+C([
+  h({ attribute: "focus-modes", reflect: !1, type: Object })
+], v.prototype, "focusModes", 2);
+C([
+  h({ attribute: "focus-mode", reflect: !0, type: String })
+], v.prototype, "focusMode", 2);
+C([
+  h({ attribute: "crop-mode", reflect: !0, type: String })
+], v.prototype, "cropMode", 2);
+C([
+  h({ reflect: !0, type: String })
+], v.prototype, "position", 2);
+C([
+  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], v.prototype, "keepAspectRatio", 2);
+C([
+  b()
+], v.prototype, "invalidWidth", 2);
+C([
+  b()
+], v.prototype, "invalidHeight", 2);
+C([
+  b()
+], v.prototype, "aspectRatio", 2);
+C([
+  $("cropMode", { waitUntilFirstUpdate: !0 }),
+  $("maxWidth", { waitUntilFirstUpdate: !0 }),
+  $("maxHeight", { waitUntilFirstUpdate: !0 }),
+  $("keepAspectRatio")
+], v.prototype, "handleCropModeChange", 1);
+C([
+  $("open", { waitUntilFirstUpdate: !0 })
+], v.prototype, "handleOpenChange", 1);
+v = C([
   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--)
+], v);
+const Pe = 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 Fe = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, bt = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? _e(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;
+  return s && a && Fe(e, i, a), a;
 };
-let K = class extends B {
+let X = class extends B {
   constructor() {
     super(...arguments), this.localize = new j(this), this.value = "", this.items = [];
   }
@@ -1141,44 +1184,52 @@ let K = class extends B {
     });
   }
   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}>${ot(
+    return z`<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(
       this.items,
       (t) => t.value,
-      (t) => A`<cx-option value=${t.value}>${t.displayName}</cx-option>`
+      (t) => z`<cx-option value=${t.value}>${t.displayName}</cx-option>`
     )}</cx-select></cx-space>`;
   }
 };
-K.styles = [V, be];
-K.dependencies = {
-  "cx-option": gt,
-  "cx-select": xt,
+X.styles = [V, Pe];
+X.dependencies = {
+  "cx-option": ft,
+  "cx-select": gt,
   "cx-space": L,
   "cx-typography": U
 };
-kt([
-  l({ reflect: !0, type: String })
-], K.prototype, "value", 2);
-kt([
-  l({ reflect: !1, type: Array })
-], K.prototype, "items", 2);
-K = kt([
+bt([
+  h({ reflect: !0, type: String })
+], X.prototype, "value", 2);
+bt([
+  h({ reflect: !1, type: Array })
+], X.prototype, "items", 2);
+X = bt([
   G("cx-asset-link-format-extension")
-], K);
-const $e = q`cx-details::part(base){border-bottom-width:0}`;
-var Pe = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, N = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? Fe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+], X);
+const Me = q`cx-details::part(base){border-bottom-width:0}`;
+var Ie = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, W = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Ee(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;
+  return s && a && Ie(e, i, a), a;
 };
-let E = class extends B {
+const St = "auto";
+let M = class extends B {
   constructor() {
-    super(...arguments), this.localize = new j(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.canAutoFormat = !1, this.autoFormat = !1, this.loading = !1, this.scopedValue = "";
+  }
+  /**
+   * The listbox value that represents the committed choice: the `Auto` entry when that is
+   * active, otherwise the resolved proxy id.
+   */
+  get committedValue() {
+    return this.autoFormat ? St : this.value;
   }
   handleValueChange() {
-    this.scopedValue = this.value;
+    this.scopedValue = this.committedValue;
   }
   handleOpenChange() {
-    this.open || (this.scopedValue = this.value);
+    this.open || (this.scopedValue = this.committedValue);
   }
   handleProxyChange(t) {
     const e = t.target.value;
@@ -1192,11 +1243,17 @@ let E = class extends B {
   handleApply() {
     if (this.loading)
       return;
-    const t = this.items.find(
-      (e) => e.id === this.scopedValue
+    if (this.scopedValue === St) {
+      this.emit("cx-asset-link-format-proxy-change", {
+        detail: { autoFormat: !0 }
+      });
+      return;
+    }
+    const e = this.items.find(
+      (i) => i.id === this.scopedValue
     );
-    t && this.emit("cx-asset-link-format-proxy-change", {
-      detail: t
+    e && this.emit("cx-asset-link-format-proxy-change", {
+      detail: { ...e, autoFormat: !1 }
     });
   }
   /**
@@ -1216,57 +1273,70 @@ let E = class extends B {
     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}>${ot(
+    return z`<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(
       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=${D({
+      (t) => z`<cx-option value=${t.id}>${t.proxyLabel}</cx-option>`
+    )}
+            ${_(
+      this.canAutoFormat,
+      () => z`<cx-divider></cx-divider><cx-option data-testid="cx-asset-link-format-proxy-auto-option" value=${St}>${this.localize.term("auto")}</cx-option>`,
+      () => Nt
+    )}</cx-select><cx-button data-testid="cx-asset-link-format-proxy-apply" variant="primary" style=${N({
       "margin-left": "auto"
-    })} ?disabled=${this.scopedValue === this.value} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
+    })} ?disabled=${this.scopedValue === this.committedValue} ?loading=${this.loading} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-E.styles = [V, $e];
-E.dependencies = {
+M.styles = [V, Me];
+M.dependencies = {
   "cx-button": Z,
   "cx-details": et,
+  "cx-divider": Lt,
   "cx-icon": it,
-  "cx-option": gt,
-  "cx-select": xt,
+  "cx-option": ft,
+  "cx-select": gt,
   "cx-space": L,
   "cx-typography": U
 };
-N([
+W([
   Y(".details")
-], E.prototype, "base", 2);
-N([
-  l({ reflect: !0, type: Boolean })
-], E.prototype, "open", 2);
-N([
-  l({ reflect: !0, type: String })
-], E.prototype, "value", 2);
-N([
-  l({ reflect: !1, type: Array })
-], E.prototype, "items", 2);
-N([
-  l({ reflect: !0, type: Boolean })
-], E.prototype, "loading", 2);
-N([
-  R()
-], E.prototype, "scopedValue", 2);
-N([
-  F("value")
-], E.prototype, "handleValueChange", 1);
-N([
-  F("open", { waitUntilFirstUpdate: !0 })
-], E.prototype, "handleOpenChange", 1);
-E = N([
+], M.prototype, "base", 2);
+W([
+  h({ reflect: !0, type: Boolean })
+], M.prototype, "open", 2);
+W([
+  h({ reflect: !0, type: String })
+], M.prototype, "value", 2);
+W([
+  h({ reflect: !1, type: Array })
+], M.prototype, "items", 2);
+W([
+  h({ attribute: "can-auto-format", reflect: !0, type: Boolean })
+], M.prototype, "canAutoFormat", 2);
+W([
+  h({ attribute: "auto-format", reflect: !0, type: Boolean })
+], M.prototype, "autoFormat", 2);
+W([
+  h({ reflect: !0, type: Boolean })
+], M.prototype, "loading", 2);
+W([
+  b()
+], M.prototype, "scopedValue", 2);
+W([
+  $("autoFormat"),
+  $("value")
+], M.prototype, "handleValueChange", 1);
+W([
+  $("open", { waitUntilFirstUpdate: !0 })
+], M.prototype, "handleOpenChange", 1);
+M = W([
   G("cx-asset-link-format-proxy")
-], E);
-const _e = q`cx-details::part(base){border-bottom-width:0}`;
-var Me = 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--)
+], M);
+const He = q`cx-details::part(base){border-bottom-width:0}`;
+var Te = Object.defineProperty, We = Object.getOwnPropertyDescriptor, J = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? We(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 && Me(e, i, a), a;
+  return s && a && Te(e, i, a), a;
 };
 let T = class extends B {
   constructor() {
@@ -1314,49 +1384,49 @@ let T = class extends B {
     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=${D({
+    return z`<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=${N({
       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 = [V, _e];
+T.styles = [V, He];
 T.dependencies = {
   "cx-button": Z,
   "cx-details": et,
   "cx-icon": it,
-  "cx-input": bt,
+  "cx-input": wt,
   "cx-space": L,
-  "cx-tooltip": Ot,
+  "cx-tooltip": Ut,
   "cx-typography": U
 };
 J([
   Y(".details")
 ], T.prototype, "base", 2);
 J([
-  l({ reflect: !0, type: Boolean })
+  h({ reflect: !0, type: Boolean })
 ], T.prototype, "open", 2);
 J([
-  l({ reflect: !0, type: Number })
+  h({ reflect: !0, type: Number })
 ], T.prototype, "value", 2);
 J([
-  l({ reflect: !0, type: Boolean })
+  h({ reflect: !0, type: Boolean })
 ], T.prototype, "loading", 2);
 J([
-  R()
+  b()
 ], T.prototype, "scopedValue", 2);
 J([
-  F("value")
+  $("value")
 ], T.prototype, "handleValueChange", 1);
 T = J([
   G("cx-asset-link-format-quality")
 ], T);
-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--)
+const De = 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 Ne = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, R = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Oe(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;
+  return s && a && Ne(e, i, a), a;
 };
-let v = class extends B {
+let w = class extends B {
   constructor() {
     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 },
@@ -1497,99 +1567,99 @@ let v = class extends B {
     });
   }
   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">
+    return z`<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=${D({
+              </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=${N({
       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>${M(
+              </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=${D({
+      () => z`<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=${N({
       marginLeft: "auto"
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-v.styles = [V, Ee];
-v.dependencies = {
+w.styles = [V, De];
+w.dependencies = {
   "cx-button": Z,
   "cx-details": et,
   "cx-icon": it,
-  "cx-icon-button": vt,
-  "cx-input": bt,
-  "cx-option": gt,
-  "cx-select": xt,
+  "cx-icon-button": zt,
+  "cx-input": wt,
+  "cx-option": ft,
+  "cx-select": gt,
   "cx-space": L,
   "cx-typography": U
 };
-$([
+R([
   Y(".details")
-], v.prototype, "base", 2);
-$([
-  l({ reflect: !0, type: Boolean })
-], v.prototype, "open", 2);
-$([
-  l({ reflect: !0, type: Number })
-], v.prototype, "width", 2);
-$([
-  l({ reflect: !0, type: Number })
-], v.prototype, "height", 2);
-$([
-  l({ attribute: "max-width", reflect: !0, type: Number })
-], v.prototype, "maxWidth", 2);
-$([
-  l({ attribute: "max-height", reflect: !0, type: Number })
-], v.prototype, "maxHeight", 2);
-$([
-  l({ attribute: "ratio-width", reflect: !0, type: Number })
-], v.prototype, "ratioWidth", 2);
-$([
-  l({ attribute: "ratio-height", reflect: !0, type: Number })
-], v.prototype, "ratioHeight", 2);
-$([
-  l({ reflect: !0, type: String })
-], v.prototype, "unit", 2);
-$([
-  l({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], v.prototype, "lastAppliedSetting", 2);
-$([
-  l({ reflect: !0, type: Boolean })
-], v.prototype, "loading", 2);
-$([
-  l({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
-], v.prototype, "noRatioModes", 2);
-$([
-  l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], v.prototype, "keepAspectRatio", 2);
-$([
-  R()
-], v.prototype, "invalidWidth", 2);
-$([
-  R()
-], v.prototype, "invalidHeight", 2);
-$([
-  R()
-], v.prototype, "aspectRatio", 2);
-$([
-  F("cropMode", { waitUntilFirstUpdate: !0 }),
-  F("maxWidth", { waitUntilFirstUpdate: !0 }),
-  F("maxHeight", { waitUntilFirstUpdate: !0 }),
-  F("keepAspectRatio")
-], v.prototype, "handleCropModeChange", 1);
-$([
-  F("open", { waitUntilFirstUpdate: !0 })
-], v.prototype, "handleOpenChange", 1);
-v = $([
+], w.prototype, "base", 2);
+R([
+  h({ reflect: !0, type: Boolean })
+], w.prototype, "open", 2);
+R([
+  h({ reflect: !0, type: Number })
+], w.prototype, "width", 2);
+R([
+  h({ reflect: !0, type: Number })
+], w.prototype, "height", 2);
+R([
+  h({ attribute: "max-width", reflect: !0, type: Number })
+], w.prototype, "maxWidth", 2);
+R([
+  h({ attribute: "max-height", reflect: !0, type: Number })
+], w.prototype, "maxHeight", 2);
+R([
+  h({ attribute: "ratio-width", reflect: !0, type: Number })
+], w.prototype, "ratioWidth", 2);
+R([
+  h({ attribute: "ratio-height", reflect: !0, type: Number })
+], w.prototype, "ratioHeight", 2);
+R([
+  h({ reflect: !0, type: String })
+], w.prototype, "unit", 2);
+R([
+  h({ attribute: "last-applied-setting", reflect: !1, type: Object })
+], w.prototype, "lastAppliedSetting", 2);
+R([
+  h({ reflect: !0, type: Boolean })
+], w.prototype, "loading", 2);
+R([
+  h({ attribute: "no-ratio-modes", reflect: !0, type: Boolean })
+], w.prototype, "noRatioModes", 2);
+R([
+  h({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
+], w.prototype, "keepAspectRatio", 2);
+R([
+  b()
+], w.prototype, "invalidWidth", 2);
+R([
+  b()
+], w.prototype, "invalidHeight", 2);
+R([
+  b()
+], w.prototype, "aspectRatio", 2);
+R([
+  $("cropMode", { waitUntilFirstUpdate: !0 }),
+  $("maxWidth", { waitUntilFirstUpdate: !0 }),
+  $("maxHeight", { waitUntilFirstUpdate: !0 }),
+  $("keepAspectRatio")
+], w.prototype, "handleCropModeChange", 1);
+R([
+  $("open", { waitUntilFirstUpdate: !0 })
+], w.prototype, "handleOpenChange", 1);
+w = R([
   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--)
+], w);
+const Le = q`cx-details::part(base){border-bottom-width:0}`;
+var Ue = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, Q = (t, e, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? Be(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;
+  return s && a && Ue(e, i, a), a;
 };
-let H = class extends B {
+let E = class extends B {
   constructor() {
     super(...arguments), this.localize = new j(this), this.open = !1, this.value = 0, this.defaultValue = 0, this.loading = !1, this.lastAppliedValue = 0;
   }
@@ -1602,14 +1672,14 @@ let H = class extends B {
     const e = t.target.value, i = Number(e);
     if (Number.isNaN(i))
       return;
-    const s = Pt(i);
+    const s = $t(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: $t(t)
     });
   }
   handleClockwiseClick() {
@@ -1629,51 +1699,51 @@ let H = class extends B {
     });
   }
   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=${D({
+    return z`<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=${N({
       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 = [V, We];
-H.dependencies = {
+E.styles = [V, Le];
+E.dependencies = {
   "cx-button": Z,
-  "cx-button-group": ee,
+  "cx-button-group": ie,
   "cx-details": et,
   "cx-icon": it,
-  "cx-icon-button": vt,
+  "cx-icon-button": zt,
   "cx-space": L,
   "cx-typography": U
 };
 Q([
   Y(".details")
-], H.prototype, "base", 2);
+], E.prototype, "base", 2);
 Q([
-  l({ reflect: !0, type: Boolean })
-], H.prototype, "open", 2);
+  h({ reflect: !0, type: Boolean })
+], E.prototype, "open", 2);
 Q([
-  l({ reflect: !0, type: Number })
-], H.prototype, "value", 2);
+  h({ reflect: !0, type: Number })
+], E.prototype, "value", 2);
 Q([
-  l({ attribute: "default-value", reflect: !0, type: Number })
-], H.prototype, "defaultValue", 2);
+  h({ attribute: "default-value", reflect: !0, type: Number })
+], E.prototype, "defaultValue", 2);
 Q([
-  l({ reflect: !0, type: Boolean })
-], H.prototype, "loading", 2);
+  h({ reflect: !0, type: Boolean })
+], E.prototype, "loading", 2);
 Q([
-  l({ attribute: "last-applied-value", reflect: !0, type: Number })
-], H.prototype, "lastAppliedValue", 2);
+  h({ attribute: "last-applied-value", reflect: !0, type: Number })
+], E.prototype, "lastAppliedValue", 2);
 Q([
-  F("open", { waitUntilFirstUpdate: !0 })
-], H.prototype, "handleOpenChange", 1);
-H = Q([
+  $("open", { waitUntilFirstUpdate: !0 })
+], E.prototype, "handleOpenChange", 1);
+E = Q([
   G("cx-asset-link-format-rotation")
-], H);
-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--)
+], E);
+const qe = q`cx-details::part(base){border-bottom-width:0}`;
+var je = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, xt = (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 && Le(e, i, a), a;
+  return s && a && je(e, i, a), a;
 };
 let O = class extends B {
   constructor() {
@@ -1701,37 +1771,37 @@ let O = class extends B {
     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="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>`;
+    return z`<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>`;
   }
 };
-O.styles = [V, Oe];
+O.styles = [V, qe];
 O.dependencies = {
   "cx-button": Z,
-  "cx-checkbox": ie,
+  "cx-checkbox": se,
   "cx-details": et,
   "cx-icon": it,
   "cx-space": L,
-  "cx-tooltip": Ot,
+  "cx-tooltip": Ut,
   "cx-typography": U
 };
-yt([
+xt([
   Y(".details")
 ], O.prototype, "base", 2);
-yt([
-  l({ reflect: !0, type: Boolean })
+xt([
+  h({ reflect: !0, type: Boolean })
 ], O.prototype, "open", 2);
-yt([
-  l({ reflect: !0, type: Boolean })
+xt([
+  h({ reflect: !0, type: Boolean })
 ], O.prototype, "value", 2);
-O = yt([
+O = xt([
   G("cx-asset-link-format-metadata")
 ], O);
-var Be = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, S = (t, e, i, s) => {
-  for (var a = s > 1 ? void 0 : s ? qe(e, i) : e, r = t.length - 1, n; r >= 0; r--)
+var Ge = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, x = (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;
+  return s && a && Ge(e, i, a), a;
 };
-let x = class extends B {
+let u = class extends B {
   constructor() {
     super(), this.localize = new j(this), this.baseUrl = void 0, this.token = void 0, this.asset = void 0, this.cropModes = [
       {
@@ -1792,7 +1862,7 @@ let x = class extends B {
         label: "Smart Swatch",
         value: "SmartSwatch"
       }
-    ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.defaultProxy = "", this.useCustomExtension = !1, this.noMetadata = !1, this.noFormat = !1, this.noCrop = !1, this.noResize = !1, this.noRotate = !1, this.lastImageSize = {
+    ], this.extensions = [], this.proxies = void 0, this.forCropper = void 0, this.useSession = "", this.transformations = [], this.selectedProxy = "", this.defaultProxy = "", this.canAutoFormat = !1, this.autoFormat = !1, this.useCustomExtension = !1, this.noMetadata = !1, this.noFormat = !1, this.noCrop = !1, this.noResize = !1, this.noRotate = !1, this.lastImageSize = {
       height: 0,
       width: 0
     }, this.hideHeader = !1, this.canReset = !1, this.queryElement = null, this.activeSetting = "cx-asset-link-format-proxy", this.selectedFormat = void 0, this.resizeSize = {
@@ -1819,7 +1889,7 @@ let x = class extends B {
       keepAspectRatio: !0,
       percentageHeight: 0,
       percentageWidth: 0,
-      position: W.CenterCenter,
+      position: D.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -1829,7 +1899,7 @@ let x = class extends B {
     }, 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 = me, this.apiGetCropFocusMode = Se, this.onCropComplete = this.onCropComplete.bind(this), this.onCropDragStart = this.onCropDragStart.bind(this);
+    }, this.cropperElement = null, this.parameters = [], this.loading = !1, this.lastAction = void 0, this.frozenIndex = void 0, this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0, this.apiGetTransformAssetLink = xe, this.apiGetCropFocusMode = Ce, 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
@@ -1838,7 +1908,7 @@ let x = class extends B {
    * extension fallback in asset-transformation-dialog.
    */
   static getTransformExtension(t) {
-    return !t || At(t) ? t : "jpg";
+    return !t || Vt(t) ? t : "jpg";
   }
   /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
   get hasUnfrozenTransformations() {
@@ -1872,7 +1942,7 @@ let x = class extends B {
   get lastAppliedCropPosition() {
     return this.transformations.findLast(
       (e) => e.key === m.Crop
-    )?.value.position ?? W.CenterCenter;
+    )?.value.position ?? D.CenterCenter;
   }
   /**
    * Checks if the crop apply button should be disabled.
@@ -2096,7 +2166,11 @@ let x = class extends B {
     ));
   }
   updated(t) {
-    if ((t.has("forCropper") || t.has("queryElement")) && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
+    if ((t.has("forCropper") || t.has("queryElement")) && this.handleCropperSelectorChange(), t.has("asset") && this.handleAssetChange(), t.has("proxies") && this.handleProxiesChange(), this.autoFormat && (t.has("asset") || t.has("proxies"))) {
+      const e = this.autoResolvedProxyId;
+      e && (this.selectedProxy = e);
+    }
+    if (t.has("activeSetting") && this.handleActiveSettingChange(), t.has("selectedFormat") && this.handleSelectedFormatChange(), t.has("resizeSize") && this.handleResizeSizeChange(), t.has("cropSize") && this.handleCropSizeChange(), t.has("rotation") && this.handleRotationChange(), t.has("cropperElement") && this.handleCropperElementChange(), t.has("selectedFormat")) {
       if (!this.asset || !this.selectedFormat || this.selectedFormat.extension === t.get("selectedFormat")?.extension)
         return;
       const e = this.proxies?.find(
@@ -2104,7 +2178,7 @@ let x = class extends B {
       );
       this.loading = !0, this.apiGetTransformAssetLink({
         assetId: this.asset.id,
-        extension: x.getTransformExtension(this.asset.extension),
+        extension: u.getTransformExtension(this.asset.extension),
         format: e?.proxyName ?? "",
         siteUrl: this.baseUrl,
         token: this.token,
@@ -2172,32 +2246,32 @@ let x = class extends B {
         (c) => c.key === m.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, position: g, ratioHeight: y, ratioWidth: d } = r.value;
+        const { focusMode: c, position: S, ratioHeight: A, ratioWidth: d } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
           percentageHeight: 100,
           percentageWidth: 100,
-          position: g ?? W.CenterCenter,
-          ratioHeight: y,
+          position: S ?? D.CenterCenter,
+          ratioHeight: A,
           ratioWidth: d,
           unit: o.AspectRatio
         };
       } else if (r) {
-        const { focusMode: c, height: g, position: y, unit: d, width: z, x: b = 0, y: u = 0 } = r.value;
+        const { focusMode: c, height: S, position: A, unit: d, width: y, x: k = 0, y: f = 0 } = r.value;
         this.cropSize = {
           ...this.cropSize,
           cropMode: "free",
           focusMode: c ?? "manual",
-          height: g,
+          height: S,
           percentageHeight: 100,
           percentageWidth: 100,
-          position: y ?? W.CenterCenter,
+          position: A ?? D.CenterCenter,
           unit: d ?? o.Pixel,
-          width: z,
-          x: b,
-          y: u
+          width: y,
+          x: k,
+          y: f
         };
       } else
         this.cropSize = {
@@ -2213,7 +2287,7 @@ let x = class extends B {
           height: 1,
           percentageHeight: 0,
           percentageWidth: 0,
-          position: W.CenterCenter,
+          position: D.CenterCenter,
           unit: o.Pixel,
           width: 1,
           x: 0,
@@ -2223,20 +2297,20 @@ let x = class extends B {
         (c) => c.key === m.Resize && (c.value.unit === o.AspectRatio && c.value.ratioWidth && c.value.ratioHeight || c.value.width || c.value.height)
       );
       if (n?.value.unit === o.AspectRatio && n.value.ratioWidth && n.value.ratioHeight) {
-        const { ratioHeight: c, ratioWidth: g } = n.value;
+        const { ratioHeight: c, ratioWidth: S } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           ratioHeight: c,
-          ratioWidth: g,
+          ratioWidth: S,
           unit: o.AspectRatio
         };
       } else if (n) {
-        const { height: c = 0, unit: g, width: y = 0 } = n.value;
+        const { height: c = 0, unit: S, width: A = 0 } = n.value;
         this.resizeSize = {
           ...this.resizeSize,
           height: c,
-          unit: g ?? o.Pixel,
-          width: y
+          unit: S ?? o.Pixel,
+          width: A
         };
       } else
         this.resizeSize = {
@@ -2250,18 +2324,17 @@ let x = class extends B {
           unit: o.Pixel,
           width: 1
         };
-      const h = this.transformations.findLast(
+      const l = this.transformations.findLast(
         (c) => c.key === m.Rotate
       );
-      this.rotation = h?.value.rotation ?? 0;
-      const p = this.transformations.findLast((c) => c.key === m.Quality)?.value.quality ?? 100, f = this.transformations.some(
+      this.rotation = l?.value.rotation ?? 0;
+      const p = this.transformations.findLast((c) => c.key === m.Quality)?.value.quality ?? 100, g = this.transformations.some(
         (c) => c.key === m.Metadata
       );
-      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: f, quality: p } : this.selectedFormat = {
+      this.selectedFormat ? this.selectedFormat = { ...this.selectedFormat, keepMetadata: g, quality: p } : this.selectedFormat = {
         extension: "",
         height: 0,
-        keepMetadata: f,
-        originalUrl: "",
+        keepMetadata: g,
         quality: p,
         rotation: 0,
         url: "",
@@ -2279,7 +2352,7 @@ let x = class extends B {
     this.loading = !0;
     const e = await this.apiGetTransformAssetLink({
       assetId: this.asset.id,
-      extension: x.getTransformExtension(this.selectedFormat.extension),
+      extension: u.getTransformExtension(this.selectedFormat.extension),
       format: t?.proxyName ?? "",
       siteUrl: this.baseUrl,
       token: this.token,
@@ -2304,7 +2377,7 @@ let x = class extends B {
       keepAspectRatio: this.cropSize.keepAspectRatio,
       percentageHeight: 100,
       percentageWidth: 100,
-      position: W.CenterCenter,
+      position: D.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -2367,7 +2440,6 @@ let x = class extends B {
       extension: this.asset.extension,
       height: this.defaultSize.height,
       keepMetadata: !1,
-      originalUrl: this.asset.originalUrl,
       quality: t?.value?.quality || 100,
       rotation: 0,
       url: this.asset.imageUrl,
@@ -2385,17 +2457,26 @@ let x = class extends B {
       keepAspectRatio: !0,
       percentageHeight: 100,
       percentageWidth: 100,
-      position: W.CenterCenter,
+      position: D.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
       width: this.defaultSize.width,
       x: 0,
       y: 0
-    }, this.selectedProxy || (this.selectedProxy = this.proxies && this.proxies.length > 0 ? this.proxies[0].id : "");
+    }, this.selectedProxy || (this.selectedProxy = this.resolveFallbackProxyId());
+  }
+  /**
+   * The proxy id to fall back to when none is set or the current one is not in the list.
+   *
+   * Under `Auto` the asset's extension decides, so the first proxy in the list is only a
+   * last resort — used when the mapped format is not offered for this asset.
+   */
+  resolveFallbackProxyId() {
+    return !this.proxies || this.proxies.length === 0 ? "" : this.autoFormat ? this.autoResolvedProxyId || this.proxies[0].id : this.proxies[0].id;
   }
   handleProxiesChange() {
-    !this.proxies || this.proxies.length === 0 || (!this.selectedProxy || !this.proxies.some((t) => t.id === this.selectedProxy)) && (this.selectedProxy = this.proxies[0].id);
+    !this.proxies || this.proxies.length === 0 || (!this.selectedProxy || !this.proxies.some((t) => t.id === this.selectedProxy)) && (this.selectedProxy = this.resolveFallbackProxyId());
   }
   async handleSelectedProxyChange(t) {
     if (!this.asset || !this.selectedProxy)
@@ -2409,14 +2490,14 @@ let x = class extends B {
     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 === m.Crop) {
-        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, p = a.y / i.formatHeight * e.formatHeight;
+        const a = s.value, r = a.width / i.formatWidth * e.formatWidth, n = a.height / i.formatHeight * e.formatHeight, l = a.x / i.formatWidth * e.formatWidth, p = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
             ...s.value,
             height: n,
             width: r,
-            x: h,
+            x: l,
             y: p
           }
         };
@@ -2446,7 +2527,7 @@ let x = class extends B {
       keepAspectRatio: !0,
       percentageHeight: 100,
       percentageWidth: 100,
-      position: W.CenterCenter,
+      position: D.CenterCenter,
       ratioHeight: 1,
       ratioWidth: 1,
       unit: o.Pixel,
@@ -2495,31 +2576,31 @@ let x = class extends B {
     percentageHeight: a,
     percentageWidth: r,
     ratioHeight: n,
-    ratioWidth: h,
+    ratioWidth: l,
     unit: p,
-    useCropMode: f,
+    useCropMode: g,
     width: c
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
     this.loading = !0, this.lastAction = m.Crop;
-    const g = await this.apiGetCropFocusMode({
+    const S = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
       cropWidth: c,
       imageUrl: this.selectedFormat.url
     });
-    if (g) {
-      let y = a, d = r;
-      i || (y = g.height * 100 / this.selectedFormat.height), c || (d = g.width * 100 / this.selectedFormat.width), this.cropSize = {
+    if (S) {
+      let A = a, d = r;
+      i || (A = S.height * 100 / this.selectedFormat.height), c || (d = S.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
-        height: g.height,
-        percentageHeight: y ?? this.cropSize.percentageHeight,
+        height: S.height,
+        percentageHeight: A ?? this.cropSize.percentageHeight,
         percentageWidth: d ?? this.cropSize.percentageWidth,
-        width: g.width,
-        x: g.x * 100 / this.selectedFormat.width,
-        y: g.y * 100 / this.selectedFormat.height,
-        ...f ? {
+        width: S.width,
+        x: S.x * 100 / this.selectedFormat.width,
+        y: S.y * 100 / this.selectedFormat.height,
+        ...g ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -2529,7 +2610,7 @@ let x = class extends B {
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
         ratioHeight: n ?? this.cropSize.ratioHeight,
-        ratioWidth: h ?? this.cropSize.ratioWidth,
+        ratioWidth: l ?? this.cropSize.ratioWidth,
         unit: p ?? this.cropSize.unit
       };
     }
@@ -2544,26 +2625,26 @@ let x = class extends B {
     } = e;
     if (s === 0 || i === 0)
       return;
-    const n = this.cropSize.percentageWidth !== s, h = this.cropSize.percentageHeight !== i;
-    let p = this.cropSize.height, f = this.cropSize.width;
-    n && (f = Math.round(s * this.selectedFormat.width / 100)), h && (p = Math.round(
+    const n = this.cropSize.percentageWidth !== s, l = this.cropSize.percentageHeight !== i;
+    let p = this.cropSize.height, g = this.cropSize.width;
+    n && (g = Math.round(s * this.selectedFormat.width / 100)), l && (p = Math.round(
       i * this.selectedFormat.height / 100
     ));
     const c = this.cropSize.focusMode;
     this.focusModes.find(
-      (y) => y.value === c
+      (A) => A.value === c
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
       focusMode: c,
       height: p,
       percentageHeight: i,
       percentageWidth: s,
-      width: f
+      width: g
     }) : this.cropSize = {
       ...this.cropSize,
       height: p,
       percentageHeight: i,
       percentageWidth: s,
-      width: f,
+      width: g,
       x: a,
       y: r
     };
@@ -2586,9 +2667,26 @@ let x = class extends B {
   onDetailsHide(t) {
     this.activeSetting === t.target.localName && (this.activeSetting = "");
   }
+  /**
+   * The proxy id that `Auto` resolves to for the current asset, or `''` when the mapped
+   * format is not among the available proxies.
+   *
+   * `resolveAutoFormat` yields a proxy *name* (`TRX` / `TR1`) while `selectedProxy` holds
+   * a proxy *id*, so the name has to be looked up in `proxies` rather than used directly.
+   */
+  get autoResolvedProxyId() {
+    const t = Ot(this.asset?.extension);
+    return this.proxies?.find((e) => e.proxyName === t)?.id ?? "";
+  }
   onProxyChange(t) {
     const e = t.detail;
-    this.lastAction = m.Proxy, this.selectedProxy = e.id;
+    if (this.lastAction = m.Proxy, e.autoFormat) {
+      this.autoFormat = !0;
+      const i = this.autoResolvedProxyId;
+      i && (this.selectedProxy = i);
+      return;
+    }
+    this.autoFormat = !1, this.selectedProxy = e.id;
   }
   async onCropModeChange(t) {
     const { mode: e } = t.detail;
@@ -2601,8 +2699,8 @@ let x = class extends B {
       const s = this.focusModes.find(
         (p) => p.value === this.cropSize.focusMode
       )?.auto;
-      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({
+      let a = this.cropSize.keepAspectRatio, r = this.cropSize.focusMode, n = this.cropSize.x, l = this.cropSize.y;
+      e === "free" ? (a = !1, r = "manual") : this.cropSize.unit === o.Pixel && !s && (n = 0, l = 0), s ? await this.handleRequestAutoCropSuggestion({
         cropMode: e,
         focusMode: r,
         height: this.cropSize.height,
@@ -2614,7 +2712,7 @@ let x = class extends B {
         focusMode: r,
         keepAspectRatio: a,
         x: n,
-        y: h
+        y: l
       };
     }
   }
@@ -2645,14 +2743,14 @@ let x = class extends B {
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
       ) : 0, r = this.asset ? a * 100 / this.selectedFormat.height : 100, n = this.asset ? s * 100 / this.selectedFormat.width : 100;
-      let h = this.cropSize.x, p = this.cropSize.y;
-      h + n > 100 && (h = 100 - n), p + r > 100 && (p = 100 - r);
-      let f = this.cropSize.cropMode;
+      let l = this.cropSize.x, p = this.cropSize.y;
+      l + n > 100 && (l = 100 - n), p + r > 100 && (p = 100 - r);
+      let g = this.cropSize.cropMode;
       this.cropModes.find(
-        (g) => g.value === f
-      )?.auto && (f = "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 = {
+        (S) => S.value === g
+      )?.auto && (g = "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: f,
+        cropMode: g,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: r,
@@ -2661,7 +2759,7 @@ let x = class extends B {
         ratioWidth: t.detail.width,
         unit: o.AspectRatio,
         width: s,
-        x: h,
+        x: l,
         y: p
       };
     } else {
@@ -2669,10 +2767,10 @@ let x = class extends B {
       let a = this.cropSize.x, r = this.cropSize.y;
       a + s > 100 && (a = 100 - s), r + i > 100 && (r = 100 - i);
       let n = this.cropSize.cropMode;
-      const h = this.cropModes.find(
+      const l = this.cropModes.find(
         (p) => p.value === n
       )?.auto;
-      (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 = {
+      (t.detail.breakAspectRatio || l) && (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: n,
         height: t.detail.height,
@@ -2700,30 +2798,30 @@ let x = class extends B {
     });
   }
   onCropApply(t) {
-    if (this.preResetTransformations = void 0, this.lastAction = m.Crop, !this.asset) {
+    if (this.clearResetSnapshot(), this.lastAction = m.Crop, !this.asset) {
       const {
-        focusMode: h,
+        focusMode: l,
         height: p,
-        position: f,
+        position: g,
         ratioHeight: c,
-        ratioWidth: g,
-        unit: y,
+        ratioWidth: S,
+        unit: A,
         width: d,
-        x: z,
-        y: b
-      } = this.cropSize, u = this.focusModes.find(
-        (_) => _.value === h
+        x: y,
+        y: k
+      } = this.cropSize, f = this.focusModes.find(
+        (F) => F.value === l
       )?.auto ?? !1;
-      if (y === o.AspectRatio) {
-        g && c && this.upsertTransformation({
+      if (A === o.AspectRatio) {
+        S && c && this.upsertTransformation({
           key: m.Crop,
           value: {
-            focusMode: h,
-            isFocusModeAuto: u,
-            position: f,
+            focusMode: l,
+            isFocusModeAuto: f,
+            position: g,
             ratioHeight: c,
-            ratioWidth: g,
-            unit: y
+            ratioWidth: S,
+            unit: A
           }
         });
         return;
@@ -2731,11 +2829,11 @@ let x = class extends B {
       (p || d) && this.upsertTransformation({
         key: m.Crop,
         value: {
-          focusMode: h,
+          focusMode: l,
           height: p,
-          isFocusModeAuto: u,
-          position: f,
-          unit: y,
+          isFocusModeAuto: f,
+          position: g,
+          unit: A,
           width: d,
           /**
            * Without an asset there is no cropper to drag, so x/y are always the 0
@@ -2744,8 +2842,8 @@ let x = class extends B {
            * string) so `hasManualXY` in buildTransformationString doesn't spuriously
            * suppress the focus mode / position `c_g_` gravity value.
            */
-          x: Number.isFinite(z) && z !== 0 ? z : void 0,
-          y: Number.isFinite(b) && b !== 0 ? b : void 0
+          x: Number.isFinite(y) && y !== 0 ? y : void 0,
+          y: Number.isFinite(k) && k !== 0 ? k : void 0
         }
       });
       return;
@@ -2754,11 +2852,11 @@ let x = class extends B {
     if (!this.cropperElement || !this.selectedFormat)
       return;
     const r = this.cropSize.focusMode, n = this.focusModes.find(
-      (h) => h.value === r
+      (l) => l.value === r
     )?.auto ?? !1;
     if (e && a && s) {
-      let h = a, p = e;
-      if (s === o.AspectRatio && (h = this.cropSize.percentageWidth * this.selectedFormat.width / 100, p = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
+      let l = a, p = e;
+      if (s === o.AspectRatio && (l = this.cropSize.percentageWidth * this.selectedFormat.width / 100, p = this.cropSize.percentageHeight * this.selectedFormat.height / 100), i)
         this.transformations = [
           ...this.transformations,
           {
@@ -2768,12 +2866,12 @@ let x = class extends B {
               height: p,
               isFocusModeAuto: n,
               mode: i,
-              width: h
+              width: l
             }
           }
         ];
       else {
-        const f = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
+        const g = this.cropSize.x / 100 * this.selectedFormat.width, c = this.cropSize.y / 100 * this.selectedFormat.height;
         this.transformations = [
           ...this.transformations,
           {
@@ -2783,8 +2881,8 @@ let x = class extends B {
               height: p,
               isFocusModeAuto: n,
               unit: s,
-              width: h,
-              x: f,
+              width: l,
+              x: g,
               y: c
             }
           }
@@ -2828,14 +2926,14 @@ let x = class extends B {
   }
   onResizeApply(t) {
     const { height: e, unit: i, width: s } = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = m.Resize, !this.asset) {
+    if (this.clearResetSnapshot(), this.lastAction = m.Resize, !this.asset) {
       if (i === o.AspectRatio) {
-        const { ratioHeight: p, ratioWidth: f } = this.resizeSize;
-        f && p && this.upsertTransformation({
+        const { ratioHeight: p, ratioWidth: g } = this.resizeSize;
+        g && p && this.upsertTransformation({
           key: m.Resize,
           value: {
             ratioHeight: p,
-            ratioWidth: f,
+            ratioWidth: g,
             unit: i
           }
         });
@@ -2854,13 +2952,13 @@ let x = class extends B {
     if (!this.selectedFormat)
       return;
     const a = this.selectedFormat.width || this.defaultSize.width, r = this.selectedFormat.height || this.defaultSize.height;
-    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 = [
+    let n = s, l = e;
+    this.resizeSize.unit !== i ? (n = a, l = r) : i === o.AspectRatio && (n = Math.round(s / e * r), l = r), this.transformations = [
       ...this.transformations,
       {
         key: m.Resize,
         value: {
-          height: h,
+          height: l,
           unit: i,
           width: n
         }
@@ -2872,7 +2970,7 @@ let x = class extends B {
   }
   onRotationApply(t) {
     const e = t.detail;
-    if (this.preResetTransformations = void 0, this.lastAction = m.Rotate, !this.asset) {
+    if (this.clearResetSnapshot(), this.lastAction = m.Rotate, !this.asset) {
       e ? this.upsertTransformation({
         key: m.Rotate,
         value: {
@@ -2895,7 +2993,7 @@ let x = class extends B {
   }
   onQualityChange(t) {
     const e = t.detail;
-    this.selectedFormat && (this.selectedFormat.quality = e), this.preResetTransformations = void 0, this.lastAction = m.Quality;
+    this.selectedFormat && (this.selectedFormat.quality = e), this.clearResetSnapshot(), this.lastAction = m.Quality;
     const i = {
       key: m.Quality,
       value: {
@@ -2906,7 +3004,7 @@ let x = class extends B {
   }
   onMetadataChange(t) {
     const e = t.detail;
-    if (this.preResetTransformations = void 0, this.selectedFormat && (this.selectedFormat = {
+    if (this.clearResetSnapshot(), this.selectedFormat && (this.selectedFormat = {
       ...this.selectedFormat,
       keepMetadata: e
     }), !this.asset) {
@@ -2945,196 +3043,228 @@ let x = class extends B {
       quality: t ?? 100
     });
   }
+  /**
+   * Whether there is anything for Reset to undo.
+   *
+   * Transformations are one way to diverge from the defaults; leaving `Auto` for an
+   * explicit format is another, and Reset is what puts that back.
+   */
+  get hasResettableState() {
+    return this.transformations.length > 0 ? !0 : this.canAutoFormat && !this.autoFormat;
+  }
+  /**
+   * Drops the one-step Reset snapshot.
+   *
+   * Called whenever the user applies a new transformation: at that point Undo means
+   * "remove that transformation", not "go back to before the Reset".
+   */
+  clearResetSnapshot() {
+    this.preResetTransformations = void 0, this.preResetAutoFormat = void 0, this.preResetSelectedProxy = void 0;
+  }
   handleUndo() {
-    !this.hasUnfrozenTransformations && this.preResetTransformations !== void 0 ? (this.transformations = this.preResetTransformations, this.preResetTransformations = void 0) : this.transformations = this.transformations.slice(0, -1), this.syncQuality();
+    !this.hasUnfrozenTransformations && this.preResetTransformations !== void 0 ? (this.transformations = this.preResetTransformations, this.preResetTransformations = void 0, this.preResetAutoFormat !== void 0 && (this.autoFormat = this.preResetAutoFormat, this.preResetAutoFormat = void 0), this.preResetSelectedProxy !== void 0 && (this.selectedProxy = this.preResetSelectedProxy, this.preResetSelectedProxy = void 0)) : this.transformations = this.transformations.slice(0, -1), this.syncQuality();
   }
   handleReset() {
-    this.preResetTransformations = [...this.transformations];
-    const t = !!this.defaultProxy && !!this.proxies?.some((e) => e.id === this.defaultProxy);
-    this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "", this.transformations = [], this.frozenIndex = -1, this.syncQuality();
+    if (this.preResetTransformations = [...this.transformations], this.preResetAutoFormat = this.autoFormat, this.preResetSelectedProxy = this.selectedProxy, this.canAutoFormat)
+      this.autoFormat = !0, this.selectedProxy = this.autoResolvedProxyId || this.selectedProxy;
+    else {
+      const t = !!this.defaultProxy && !!this.proxies?.some((e) => e.id === this.defaultProxy);
+      this.selectedProxy = t ? this.defaultProxy : this.selectedProxy || this.proxies?.[0]?.id || "";
+    }
+    this.transformations = [], this.frozenIndex = -1, this.syncQuality();
   }
   render() {
-    return A`<div class="asset-link-format" @cx-show=${this.onDetailsShow} @cx-hide=${this.onDetailsHide}>${M(
+    return z`<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>${M(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
+      () => z`<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, () => z`<cx-button class="asset-link-format__reset" variant="custom" ?disabled=${!this.hasResettableState} @click=${this.handleReset}>${this.localize.term("reset")}</cx-button>`)}</cx-space></cx-space>`,
+      () => Nt
     )}
-      ${M(
+      ${_(
       !this.noFormat,
-      () => A`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} .items=${this.formats} ?loading=${this.loading && this.lastAction === m.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
+      () => z`<cx-asset-link-format-proxy class="asset-link-format__details" value=${this.selectedProxy || this.proxies?.[0]?.id || ""} ?open=${this.activeSetting === "cx-asset-link-format-proxy"} ?auto-format=${this.autoFormat} ?can-auto-format=${this.canAutoFormat} .items=${this.formats} ?loading=${this.loading && this.lastAction === m.Proxy} @cx-asset-link-format-proxy-change=${this.onProxyChange}></cx-asset-link-format-proxy>`
     )}
-      ${M(
+      ${_(
       !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 === m.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>`
+      () => z`<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 === m.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>`
     )}
-      ${M(
+      ${_(
       !this.noResize,
-      () => A`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === m.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
+      () => z`<cx-asset-link-format-resize class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-resize"} ?loading=${this.loading && this.lastAction === m.Resize} ?no-ratio-modes=${!this.asset} ?keep-aspect-ratio=${this.resizeSize.keepAspectRatio} width=${this.resizeSize.width} height=${this.resizeSize.height} max-width=${this.asset ? this.imageSize.width : 1 / 0} max-height=${this.asset ? this.imageSize.height : 1 / 0} ratio-width=${this.resizeSize.ratioWidth} ratio-height=${this.resizeSize.ratioHeight} unit=${this.resizeSize.unit} .lastAppliedSetting=${this.lastResizeSize} @cx-asset-link-format-resize-change=${this.onResizeChange} @cx-asset-link-format-resize-apply=${this.onResizeApply}></cx-asset-link-format-resize>`
     )}
-      ${M(
+      ${_(
       !this.noRotate,
-      () => A`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
-    )}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${M(
+      () => z`<cx-asset-link-format-rotation class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.Rotate} ?open=${this.activeSetting === "cx-asset-link-format-rotation"} default-value=${this.selectedFormat?.rotation ?? 0} last-applied-value=${this.lastRotation} value=${this.rotation} @cx-asset-link-format-rotation-change=${this.onRotationChange} @cx-asset-link-format-rotation-apply=${this.onRotationApply}></cx-asset-link-format-rotation>`
+    )}<cx-asset-link-format-quality class="asset-link-format__details" ?loading=${this.loading && this.lastAction === m.Quality} ?open=${this.activeSetting === "cx-asset-link-format-quality"} value=${this.selectedFormat?.quality ?? 100} @cx-asset-link-format-quality-change=${this.onQualityChange}></cx-asset-link-format-quality>${_(
       !this.noMetadata,
-      () => A`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
+      () => z`<cx-asset-link-format-metadata class="asset-link-format__details" ?open=${this.activeSetting === "cx-asset-link-format-metadata"} .value=${this.selectedFormat?.keepMetadata ?? !1} @cx-asset-link-format-metadata-change=${this.onMetadataChange}></cx-asset-link-format-metadata>`
     )}
-      ${M(
+      ${_(
       this.useCustomExtension,
-      () => A`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`
+      () => z`<cx-asset-link-format-extension .items=${this.extensions} value=${this.selectedFormat?.extension ?? ""} @cx-asset-link-format-extension-change=${this.onExtensionChange}></cx-asset-link-format-extension>`
     )}</div>`;
   }
 };
-x.styles = [V, ze];
-x.dependencies = {
-  "cx-asset-link-format-crop": C,
-  "cx-asset-link-format-extension": K,
+u.styles = [V, be];
+u.dependencies = {
+  "cx-asset-link-format-crop": v,
+  "cx-asset-link-format-extension": X,
   "cx-asset-link-format-metadata": O,
-  "cx-asset-link-format-proxy": E,
+  "cx-asset-link-format-proxy": M,
   "cx-asset-link-format-quality": T,
-  "cx-asset-link-format-resize": v,
-  "cx-asset-link-format-rotation": H,
+  "cx-asset-link-format-resize": w,
+  "cx-asset-link-format-rotation": E,
   "cx-button": Z,
   "cx-space": L,
   "cx-typography": U
 };
-S([
-  l({ attribute: "base-url", type: String })
-], x.prototype, "baseUrl", 2);
-S([
-  l({ attribute: "token", type: String })
-], x.prototype, "token", 2);
-S([
-  l({ reflect: !1, type: Object })
-], x.prototype, "asset", 2);
-S([
-  l({ attribute: "crop-modes", reflect: !1, type: Array })
-], x.prototype, "cropModes", 2);
-S([
-  l({ attribute: "focus-modes", reflect: !1, type: Object })
-], x.prototype, "focusModes", 2);
-S([
-  l({ reflect: !1, type: Array })
-], x.prototype, "extensions", 2);
-S([
-  l({ reflect: !1, type: Array })
-], x.prototype, "proxies", 2);
-S([
-  l({ attribute: "for-cropper", reflect: !0, type: String })
-], x.prototype, "forCropper", 2);
-S([
-  l({ attribute: "use-session", reflect: !0, type: String })
-], x.prototype, "useSession", 2);
-S([
-  l({ reflect: !1, type: Array })
-], x.prototype, "transformations", 2);
-S([
-  l({ attribute: "selected-proxy", reflect: !0, type: String })
-], x.prototype, "selectedProxy", 2);
-S([
-  l({ attribute: "default-proxy", reflect: !0, type: String })
-], x.prototype, "defaultProxy", 2);
-S([
-  l({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
-], x.prototype, "useCustomExtension", 2);
-S([
-  l({ attribute: "no-metadata", reflect: !0, type: Boolean })
-], x.prototype, "noMetadata", 2);
-S([
-  l({ attribute: "no-format", reflect: !0, type: Boolean })
-], x.prototype, "noFormat", 2);
-S([
-  l({ attribute: "no-crop", reflect: !0, type: Boolean })
-], x.prototype, "noCrop", 2);
-S([
-  l({ attribute: "no-resize", reflect: !0, type: Boolean })
-], x.prototype, "noResize", 2);
-S([
-  l({ attribute: "no-rotate", reflect: !0, type: Boolean })
-], x.prototype, "noRotate", 2);
-S([
-  l({ attribute: "last-image-size", reflect: !1, type: Object })
-], x.prototype, "lastImageSize", 2);
-S([
-  l({ attribute: "hide-header", reflect: !1, type: Boolean })
-], x.prototype, "hideHeader", 2);
-S([
-  l({ attribute: "can-reset", type: Boolean })
-], x.prototype, "canReset", 2);
-S([
-  l({ attribute: !1, reflect: !1, type: Object })
-], x.prototype, "queryElement", 2);
-S([
-  R()
-], x.prototype, "activeSetting", 2);
-S([
-  R()
-], x.prototype, "selectedFormat", 2);
-S([
-  R()
-], x.prototype, "resizeSize", 2);
-S([
-  R()
-], x.prototype, "cropSize", 2);
-S([
-  R()
-], x.prototype, "rotation", 2);
-S([
-  R()
-], x.prototype, "defaultSize", 2);
-S([
-  R()
-], x.prototype, "cropperElement", 2);
-S([
-  R()
-], x.prototype, "parameters", 2);
-S([
-  R()
-], x.prototype, "loading", 2);
-S([
-  R()
-], x.prototype, "lastAction", 2);
-S([
-  R()
-], x.prototype, "frozenIndex", 2);
-S([
-  R()
-], x.prototype, "preResetTransformations", 2);
-S([
-  F("transformations")
-], x.prototype, "handleTransformationsChange", 1);
-S([
-  F("selectedProxy")
-], x.prototype, "handleSelectedProxyChange", 1);
-S([
-  F("loading")
-], x.prototype, "handleLoadingChange", 1);
-x = S([
+x([
+  h({ attribute: "base-url", type: String })
+], u.prototype, "baseUrl", 2);
+x([
+  h({ attribute: "token", type: String })
+], u.prototype, "token", 2);
+x([
+  h({ reflect: !1, type: Object })
+], u.prototype, "asset", 2);
+x([
+  h({ attribute: "crop-modes", reflect: !1, type: Array })
+], u.prototype, "cropModes", 2);
+x([
+  h({ attribute: "focus-modes", reflect: !1, type: Object })
+], u.prototype, "focusModes", 2);
+x([
+  h({ reflect: !1, type: Array })
+], u.prototype, "extensions", 2);
+x([
+  h({ reflect: !1, type: Array })
+], u.prototype, "proxies", 2);
+x([
+  h({ attribute: "for-cropper", reflect: !0, type: String })
+], u.prototype, "forCropper", 2);
+x([
+  h({ attribute: "use-session", reflect: !0, type: String })
+], u.prototype, "useSession", 2);
+x([
+  h({ reflect: !1, type: Array })
+], u.prototype, "transformations", 2);
+x([
+  h({ attribute: "selected-proxy", reflect: !0, type: String })
+], u.prototype, "selectedProxy", 2);
+x([
+  h({ attribute: "default-proxy", reflect: !0, type: String })
+], u.prototype, "defaultProxy", 2);
+x([
+  h({ attribute: "can-auto-format", reflect: !0, type: Boolean })
+], u.prototype, "canAutoFormat", 2);
+x([
+  h({ attribute: "auto-format", reflect: !0, type: Boolean })
+], u.prototype, "autoFormat", 2);
+x([
+  h({ attribute: "use-custom-extension", reflect: !0, type: Boolean })
+], u.prototype, "useCustomExtension", 2);
+x([
+  h({ attribute: "no-metadata", reflect: !0, type: Boolean })
+], u.prototype, "noMetadata", 2);
+x([
+  h({ attribute: "no-format", reflect: !0, type: Boolean })
+], u.prototype, "noFormat", 2);
+x([
+  h({ attribute: "no-crop", reflect: !0, type: Boolean })
+], u.prototype, "noCrop", 2);
+x([
+  h({ attribute: "no-resize", reflect: !0, type: Boolean })
+], u.prototype, "noResize", 2);
+x([
+  h({ attribute: "no-rotate", reflect: !0, type: Boolean })
+], u.prototype, "noRotate", 2);
+x([
+  h({ attribute: "last-image-size", reflect: !1, type: Object })
+], u.prototype, "lastImageSize", 2);
+x([
+  h({ attribute: "hide-header", reflect: !1, type: Boolean })
+], u.prototype, "hideHeader", 2);
+x([
+  h({ attribute: "can-reset", type: Boolean })
+], u.prototype, "canReset", 2);
+x([
+  h({ attribute: !1, reflect: !1, type: Object })
+], u.prototype, "queryElement", 2);
+x([
+  b()
+], u.prototype, "activeSetting", 2);
+x([
+  b()
+], u.prototype, "selectedFormat", 2);
+x([
+  b()
+], u.prototype, "resizeSize", 2);
+x([
+  b()
+], u.prototype, "cropSize", 2);
+x([
+  b()
+], u.prototype, "rotation", 2);
+x([
+  b()
+], u.prototype, "defaultSize", 2);
+x([
+  b()
+], u.prototype, "cropperElement", 2);
+x([
+  b()
+], u.prototype, "parameters", 2);
+x([
+  b()
+], u.prototype, "loading", 2);
+x([
+  b()
+], u.prototype, "lastAction", 2);
+x([
+  b()
+], u.prototype, "frozenIndex", 2);
+x([
+  b()
+], u.prototype, "preResetTransformations", 2);
+x([
+  b()
+], u.prototype, "preResetAutoFormat", 2);
+x([
+  b()
+], u.prototype, "preResetSelectedProxy", 2);
+x([
+  $("transformations")
+], u.prototype, "handleTransformationsChange", 1);
+x([
+  $("selectedProxy")
+], u.prototype, "handleSelectedProxyChange", 1);
+x([
+  $("loading")
+], u.prototype, "handleLoadingChange", 1);
+u = x([
   G("cx-asset-link-format")
-], x);
+], u);
 export {
-  x as C,
-  wt as D,
-  ct as F,
-  tt as O,
-  xe as a,
-  le as b,
-  Lt as c,
-  Ei as d,
-  Hi as e,
-  Ii as f,
-  Bt as g,
-  ut as h,
-  At as i,
+  u as C,
+  ot as F,
+  Ae as a,
+  pe as b,
+  Bt as c,
+  Ni as d,
+  Oi as e,
+  Di as f,
+  jt as g,
+  dt as h,
+  Vt as i,
   lt as j,
-  _t as k,
-  Mt as l,
-  pt as m,
-  dt as n,
-  Et as o,
-  Ti as p,
-  ae as q,
-  Fi as r,
-  _i as s,
-  Mi as t,
-  se as u
+  Ft as k,
+  _t as l,
+  ct as m,
+  pt as n,
+  It as o,
+  Li as p,
+  oe as q,
+  Hi as r,
+  Ti as s,
+  Wi as t,
+  ae as u
 };