@spiffcommerce/core 26.27.1 → 26.28.0

package/dist/index.mjs

@@ -158,10 +158,10 @@ class Sr {
 }
 const mt = new Sr();
 let _e, Xe;
-function nc(r) {
+function rc(r) {
   _e = r;
 }
-function rc(r) {
+function ic(r) {
   Xe = r;
 }
 function Jt() {
@@ -256,7 +256,7 @@ const ln = /* @__PURE__ */ new Map(), Fa = /* @__PURE__ */ new Map(), xa = /* @_
   }
   const e = t();
   return e || "image/svg+xml";
-}, ic = async (r) => {
+}, sc = async (r) => {
   const t = await cn(r), e = ln.get(r) || Ie(t);
   return await Pr(new Blob([t], { type: e }));
 }, Ir = (r) => {
@@ -418,7 +418,7 @@ const Rr = (r) => new Promise((t) => {
 }, Ur = (r) => {
   const e = r.naturalWidth / r.naturalHeight;
   return r.naturalHeight <= 8192 && r.naturalWidth <= 8192 ? [r.naturalWidth, r.naturalHeight] : r.naturalHeight > r.naturalWidth ? [e * 8192, 8192] : [8192, 8192 / e];
-}, Lr = async (r) => {
+}, $r = async (r) => {
   var A;
   const t = await Dr(r), e = await Kt(t), [a, n] = Ur(e);
   if (!await Or()) {
@@ -451,7 +451,7 @@ const Rr = (r) => new Promise((t) => {
   }
   return d.drawImage(e, 0, 0, o, l), c;
 }, De = async (r) => {
-  const t = await Lr(r);
+  const t = await $r(r);
   return Ie(r) === "image/jpeg" ? {
     dataUrl: t.toDataURL("image/jpeg", 1),
     height: t.height,
@@ -3150,16 +3150,16 @@ const Rr = (r) => new Promise((t) => {
   parseInt(r.substring(2, 4), 16),
   parseInt(r.substring(4, 6), 16)
 ]);
-function sc(r) {
+function oc(r) {
   const t = jt.indexOf(r);
   return t >= 0 ? Ft[t] : "";
 }
-function $r(r) {
+function Lr(r) {
   const t = Ft.indexOf(r);
   return t >= 0 ? jt[t] : "";
 }
-function oc(r, t = 64) {
-  const e = [], a = [], n = $r(r);
+function lc(r, t = 64) {
+  const e = [], a = [], n = Lr(r);
   n && e.push({
     pms: n,
     hex: r,
@@ -3177,7 +3177,7 @@ function oc(r, t = 64) {
   return e.sort((A, u) => A.distance - u.distance);
 }
 const Vr = jt.map((r, t) => ({ pms: r, hex: Ft[t] })), zr = new dr(Vr, { keys: ["pms"] });
-function lc(r, t) {
+function cc(r, t) {
   return zr.search(r, t ? { limit: t } : void 0);
 }
 let Qt = null;
@@ -5379,7 +5379,7 @@ const Q = () => {
       ]
     }
   );
-}, cc = (r, t, e, a, n) => {
+}, dc = (r, t, e, a, n) => {
   const i = ft(n), s = e / 2, o = a / 2, l = r + s, c = t + o, d = Math.sin(i), A = Math.cos(i), u = s, h = s, m = -o, g = o, f = u * A - m * d, p = h * A - g * d, C = u * d + m * A, w = h * d + g * A, v = Math.max(Math.abs(f), Math.abs(p)), S = Math.max(Math.abs(C), Math.abs(w));
   return {
     minX: l - v,
@@ -5387,25 +5387,25 @@ const Q = () => {
     minY: c - S,
     maxY: c + S
   };
-}, dc = (r, t, e) => {
+}, Ac = (r, t, e) => {
   const a = Math.sqrt(Math.pow(t.x - r.x, 2) + Math.pow(t.y - r.y, 2)), n = Math.sqrt(Math.pow(t.x - e.x, 2) + Math.pow(t.y - e.y, 2)), i = Math.sqrt(Math.pow(e.x - r.x, 2) + Math.pow(e.y - r.y, 2));
   return Math.acos((n * n + a * a - i * i) / (2 * n * a)) * (180 / Math.PI);
-}, ft = (r) => r * (Math.PI / 180), Ac = (r, t, e) => Math.abs(r - t) < e, uc = (r, t, e) => {
+}, ft = (r) => r * (Math.PI / 180), uc = (r, t, e) => Math.abs(r - t) < e, hc = (r, t, e) => {
   const a = Math.sin(ft(e)), n = Math.cos(ft(e));
   return {
     x: (r.x - t.x) * n - (r.y - t.y) * a + t.x,
     y: (r.x - t.x) * a + (r.y - t.y) * n + t.y
   };
-}, hc = (r, t) => ({
+}, mc = (r, t) => ({
   x: (r.x + t.x) / 2,
   y: (r.y + t.y) / 2
-}), mc = (r, t, e, a) => ({
+}), gc = (r, t, e, a) => ({
   x: r.x + (t == null ? void 0 : t.x) * e,
   y: r.y + (t == null ? void 0 : t.y) * a
-}), gc = (r, t, e, a) => ({
+}), fc = (r, t, e, a) => ({
   x: r.x + ((t == null ? void 0 : t.x) + (t == null ? void 0 : t.width)) * e,
   y: r.y + (t == null ? void 0 : t.y) * a
-}), fc = (r, t, e, a) => ({
+}), pc = (r, t, e, a) => ({
   x: r.x + ((t == null ? void 0 : t.x) + (t == null ? void 0 : t.width)) * e,
   y: r.y + ((t == null ? void 0 : t.y) + (t == null ? void 0 : t.height)) * a
 }), bt = (r) => {
@@ -5427,7 +5427,7 @@ const Q = () => {
     case H.Southwest:
       return H.Northwest;
   }
-}, pc = (r, t) => t > 45 && t <= 135 ? bt(r) : t > 135 && t <= 225 ? bt(bt(r)) : t > 225 && t <= 315 ? bt(bt(bt(r))) : r, Cc = (r, t = { x: 0, y: 0 }, e = { x: 1, y: 1 }) => {
+}, Cc = (r, t) => t > 45 && t <= 135 ? bt(r) : t > 135 && t <= 225 ? bt(bt(r)) : t > 225 && t <= 315 ? bt(bt(bt(r))) : r, wc = (r, t = { x: 0, y: 0 }, e = { x: 1, y: 1 }) => {
   const a = ft(r.rotation), n = {
     x: t.x + r.x * e.x,
     y: t.x + r.y * e.y
@@ -5457,7 +5457,7 @@ const Q = () => {
     x: (r.x - t.x) * n - (r.y - t.y) * a + t.x,
     y: (r.x - t.x) * a + (r.y - t.y) * n + t.y
   };
-}, wc = 0.352778, yc = 0.035277, Fn = (r) => {
+}, yc = 0.352778, Sc = 0.035277, Fn = (r) => {
   const t = r.rotation || 0, e = ft(t), a = Math.cos(e), n = -Math.sin(e);
   return /* @__PURE__ */ x("g", { mask: r.stepName || r.productOverlay ? void 0 : r.mask, children: /* @__PURE__ */ x(
     "g",
@@ -5654,14 +5654,14 @@ class Ui {
     }), a - n;
   }
 }
-const Li = (r) => r.substring(0, 5).toLowerCase().trim() === "data:", Oe = /* @__PURE__ */ new Map(), Tt = async (r) => {
+const $i = (r) => r.substring(0, 5).toLowerCase().trim() === "data:", Oe = /* @__PURE__ */ new Map(), Tt = async (r) => {
   if (Oe.has(r))
     return Oe.get(r);
   const e = (async () => {
     try {
       return St(r).getFont();
     } catch {
-      if (Li(r)) {
+      if ($i(r)) {
         const a = An(r), n = Je(a);
         return aa(r, n), n;
       } else {
@@ -5671,7 +5671,7 @@ const Li = (r) => r.substring(0, 5).toLowerCase().trim() === "data:", Oe = /* @_
     }
   })();
   return Oe.set(r, e), e;
-}, $i = (r) => {
+}, Li = (r) => {
   const t = An(r), e = Je(t);
   return aa(r, e), e;
 }, St = (r) => {
@@ -5682,7 +5682,7 @@ const Li = (r) => r.substring(0, 5).toLowerCase().trim() === "data:", Oe = /* @_
 }, aa = (r, t) => {
   const e = new Ui(t);
   return kn.set(r, e), e;
-}, Sc = async (r) => {
+}, vc = async (r) => {
   const t = dt(), e = t.parseFromString(r, "image/svg+xml"), a = e.firstElementChild, n = /* @__PURE__ */ new Map();
   a.querySelectorAll("style").forEach((d) => {
     var u;
@@ -6144,7 +6144,7 @@ const Zt = (r) => {
     if (r.defaultVariant !== void 0)
       return t.find((e) => e.id === r.defaultVariant);
   }
-}, At = /* @__PURE__ */ new Map(), Lt = /* @__PURE__ */ new Map(), Le = /* @__PURE__ */ new Map(), Nn = async (r, t) => {
+}, At = /* @__PURE__ */ new Map(), $t = /* @__PURE__ */ new Map(), $e = /* @__PURE__ */ new Map(), Nn = async (r, t) => {
   if (!t) {
     if (!r)
       throw new Error("No region or src supplied. Cannot construct frame!");
@@ -6168,11 +6168,11 @@ const Zt = (r) => {
     throw new Error(`No asset for variant with ID: ${r.frameVariantId}`);
   return e;
 }, xe = async (r) => {
-  if (Le.has(r))
-    return Le.get(r);
+  if ($e.has(r))
+    return $e.get(r);
   const e = (async () => {
-    if (Lt.has(r))
-      return Lt.get(r);
+    if ($t.has(r))
+      return $t.get(r);
     await new Promise((u) => setTimeout(u, 0));
     const n = dt().parseFromString(r, "image/svg+xml"), i = n.querySelector("svg");
     if (!i)
@@ -6190,7 +6190,7 @@ const Zt = (r) => {
         width: c,
         height: l
       };
-      return Lt.set(u, h), h;
+      return $t.set(u, h), h;
     }
     if (A) {
       const u = A.getAttribute("d");
@@ -6201,11 +6201,11 @@ const Zt = (r) => {
         width: c,
         height: l
       };
-      return Lt.set(u, h), h;
+      return $t.set(u, h), h;
     }
     throw new Error("Malformed frame SVG");
   })();
-  return Le.set(r, e), e;
+  return $e.set(r, e), e;
 }, Sa = (r, t, e, a) => {
   const n = t.width / t.height, i = r.width / r.height;
   let s;
@@ -6267,9 +6267,9 @@ const Zt = (r) => {
   at(r).then((e) => {
     t(e);
   }).catch((e) => console.error(e));
-}), $e = /* @__PURE__ */ new Map(), qt = async (r) => {
-  if ($e.has(r))
-    return $e.get(r);
+}), Le = /* @__PURE__ */ new Map(), qt = async (r) => {
+  if (Le.has(r))
+    return Le.get(r);
   const t = async (n) => new Promise((i, s) => {
     try {
       if (!(!!URL && !!URL.createObjectURL))
@@ -6301,7 +6301,7 @@ const Zt = (r) => {
       A.resize(m, m);
     return await A.render(), await t(c);
   })();
-  return $e.set(r, a), a;
+  return Le.set(r, a), a;
 }, Ut = async (r, t, e, a) => {
   const n = r.layoutState.layout.useEditableArea && r.layoutState.layout.editableArea || {
     width: r.layoutState.layout.width,
@@ -6334,7 +6334,7 @@ const Zt = (r) => {
   }
   return o;
 };
-class vc {
+class Ec {
   static async getFrame(t, e) {
     const a = await Nn(e.region, e.src), n = await xe(a), i = e.region || await Ut(t, T.Frame);
     return {
@@ -6490,15 +6490,15 @@ class vc {
     };
   }
 }
-class $ extends Error {
+class L extends Error {
   constructor() {
-    super("Element not found!"), Object.setPrototypeOf(this, $.prototype);
+    super("Element not found!"), Object.setPrototypeOf(this, L.prototype);
   }
 }
-const L = (r, t) => _(r, t).elements.find((n) => n.id === r), _ = (r, t) => {
+const $ = (r, t) => _(r, t).elements.find((n) => n.id === r), _ = (r, t) => {
   const e = Object.values(t).find((a) => a.elements.some((n) => n.id === r));
   if (!e)
-    throw new $();
+    throw new L();
   return e;
 }, Z = (r, t) => {
   const e = [...t.elements.filter((n) => n.id !== r.id), r], a = ya(e);
@@ -6507,7 +6507,7 @@ const L = (r, t) => _(r, t).elements.find((n) => n.id === r), _ = (r, t) => {
     elements: a,
     modificationID: Q()
   };
-}, La = async (r) => {
+}, $a = async (r) => {
   var a;
   const t = [...Object.keys(r.layouts)], e = [...new Set(t)];
   for (let n = 0; n < e.length; n++) {
@@ -6569,7 +6569,7 @@ class R {
     this.oldState = t;
   }
 }
-class $a extends R {
+class La extends R {
   constructor(t) {
     super(), this.serializableWorkflow = t;
   }
@@ -6580,15 +6580,15 @@ class $a extends R {
     };
   }
 }
-class Ec extends R {
+class Bc extends R {
   constructor(t, e, a) {
     super(), this.id = t, this.x = e, this.y = a;
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       x: this.x,
@@ -6603,15 +6603,15 @@ class Ec extends R {
     };
   }
 }
-class Bc extends R {
+class bc extends R {
   constructor(t, e) {
     super(), this.id = t, this.angle = e;
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       rotation: this.angle
@@ -6625,15 +6625,15 @@ class Bc extends R {
     };
   }
 }
-class bc extends R {
+class Ic extends R {
   constructor(t, e, a) {
     super(), this.id = t, this.width = Math.abs(e), this.height = Math.abs(a);
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     let a = {
       ...e,
       width: this.width,
@@ -6770,9 +6770,9 @@ class Zi extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       fill: this.color,
@@ -6794,9 +6794,9 @@ class Ve extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       textFillImage: this.imageFill
@@ -6816,9 +6816,9 @@ class ts extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       fontSize: this.size
@@ -6838,9 +6838,9 @@ class Va extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       fontData: this.fontData
@@ -6860,9 +6860,9 @@ class es extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       align: this.align
@@ -6918,9 +6918,9 @@ class ns extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       useThreshold: this.useThreshold,
@@ -6937,15 +6937,15 @@ class ns extends R {
     };
   }
 }
-class Ic extends R {
+class Dc extends R {
   constructor(t, e) {
     super(), this.id = t, this.src = e;
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       src: this.src
@@ -6965,9 +6965,9 @@ class rs extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = _(e.id, Object.values(t.layouts)), n = Z(Xt(e, this.text, e), a);
     return {
       ...t,
@@ -6984,9 +6984,9 @@ class ze extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       strokeColor: this.strokeColor,
@@ -7007,9 +7007,9 @@ class ia extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = e.colors || {}, n = a[this.className];
     typeof this.fill == "string" ? a[this.className] = {
       browserValue: this.fill,
@@ -7039,9 +7039,9 @@ class is extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = {
       ...e,
       svg: this.svgBody,
@@ -7056,7 +7056,7 @@ class is extends R {
     };
   }
 }
-class Dc extends R {
+class Pc extends R {
   /**
    * @param id The targeted element to bring to the front.
    */
@@ -7064,8 +7064,8 @@ class Dc extends R {
     super(), this.id = t;
   }
   apply(t) {
-    if (this.oldState = t, !L(this.id, Object.values(t.layouts)).id)
-      throw new $();
+    if (this.oldState = t, !$(this.id, Object.values(t.layouts)).id)
+      throw new L();
     const a = Object.values(t.layouts).find((s) => s.elements.find((o) => o.id === this.id));
     if (!a)
       throw new Error("Layout missing from state!");
@@ -7085,7 +7085,7 @@ class Dc extends R {
     };
   }
 }
-class Pc extends R {
+class Fc extends R {
   /**
    * @param id The targeted element to bring to the back.
    */
@@ -7094,9 +7094,9 @@ class Pc extends R {
   }
   apply(t) {
     this.oldState = t;
-    const e = L(this.id, Object.values(t.layouts));
+    const e = $(this.id, Object.values(t.layouts));
     if (!e.id)
-      throw new $();
+      throw new L();
     const a = Object.values(t.layouts).find((o) => o.elements.find((l) => l.id === this.id));
     if (!a)
       throw new Error("Layout missing from state!");
@@ -7116,7 +7116,7 @@ class Pc extends R {
     };
   }
 }
-class Fc extends R {
+class xc extends R {
   /**
    * @param id The targeted element to bring to the front.
    */
@@ -7124,8 +7124,8 @@ class Fc extends R {
     super(), this.id = t;
   }
   apply(t) {
-    if (this.oldState = t, !L(this.id, Object.values(t.layouts)).id)
-      throw new $();
+    if (this.oldState = t, !$(this.id, Object.values(t.layouts)).id)
+      throw new L();
     const a = Object.values(t.layouts).find((l) => l.elements.find((c) => c.id === this.id));
     if (!a)
       throw new Error("Layout missing from state!");
@@ -7143,7 +7143,7 @@ class Fc extends R {
     };
   }
 }
-class xc extends R {
+class kc extends R {
   /**
    * @param id The targeted element to bring to the front.
    */
@@ -7151,8 +7151,8 @@ class xc extends R {
     super(), this.id = t;
   }
   apply(t) {
-    if (this.oldState = t, !L(this.id, Object.values(t.layouts)).id)
-      throw new $();
+    if (this.oldState = t, !$(this.id, Object.values(t.layouts)).id)
+      throw new L();
     const a = Object.values(t.layouts).find((l) => l.elements.find((c) => c.id === this.id));
     if (!a)
       throw new Error("Layout missing from state!");
@@ -7285,7 +7285,7 @@ const ss = async (r) => {
     throw console.error(e), new Be("Failed to shorten URL, see console.");
   }
 };
-class Ln {
+class $n {
   async poll() {
     try {
       if (await this.predicate()) {
@@ -7332,7 +7332,7 @@ class os {
       const h = (await ea([e]))[0], m = (f = (g = h == null ? void 0 : h.versions) == null ? void 0 : g.find((p) => p.name === "mpeg4")) == null ? void 0 : f.link;
       return { asset: h, link: m };
     }, s = await new Promise((h, m) => {
-      new Ln(
+      new $n(
         async () => !!(await i()).link,
         async () => {
           const g = await i();
@@ -7400,7 +7400,7 @@ class os {
     } };
   }
 }
-const $n = new os();
+const Ln = new os();
 class we {
   constructor() {
     this.frameSourceSvg = async (t, e) => {
@@ -7522,7 +7522,7 @@ class we {
     const o = e.fileLink || "";
     return o.endsWith(".pdf") || o.endsWith(".eps") || o.endsWith(".ai") ? new Promise((c) => {
       a.addPoller(
-        new Ln(
+        new $n(
           async () => {
             var h;
             const A = (h = (await U.getFromServer(e.key || "")).versions) == null ? void 0 : h.find((m) => m.name === "svg");
@@ -7824,7 +7824,7 @@ class ls {
     if (a.length === 0)
       return [];
     try {
-      return L(
+      return $(
         a[0].id,
         e.getAllLayoutData()
       ).colors;
@@ -7909,7 +7909,7 @@ class ls {
     var h, m;
     if (e.length === 0)
       return;
-    const s = L(
+    const s = $(
       e[0].id,
       n().map((g) => g.layoutState)
     ), o = { ...s.colors }, l = {};
@@ -8636,7 +8636,7 @@ class ms {
     }
   }
 }
-const $t = new ms();
+const Lt = new ms();
 class gs {
   constructor() {
     this.latestToast = null, this.toastType = null, this.toastCallbacks = [];
@@ -8799,7 +8799,7 @@ class Cs {
     return null;
   }
   findLayoutElements(t, e) {
-    return t.getRegionElements(e.stepName).map((i) => L(i.id, t.getAllLayoutData()));
+    return t.getRegionElements(e.stepName).map((i) => $(i.id, t.getAllLayoutData()));
   }
   /**
    * Get the colors that can be used for a given text step.
@@ -9446,7 +9446,7 @@ class Ds extends ws {
     return this.svgElement(t, e);
   }
   svgElement(t, e) {
-    const a = $i(ys), i = t !== "" ? ((w) => w.charAt(0).toUpperCase() + w.substr(1).toLowerCase())(t) : "", s = a.getPath(i, 0, 72, 72), o = s.toSVG(2), l = s.getBoundingBox(), c = l.x2 - l.x1, d = s.toPathData(3), A = () => {
+    const a = Li(ys), i = t !== "" ? ((w) => w.charAt(0).toUpperCase() + w.substr(1).toLowerCase())(t) : "", s = a.getPath(i, 0, 72, 72), o = s.toSVG(2), l = s.getBoundingBox(), c = l.x2 - l.x1, d = s.toPathData(3), A = () => {
       const w = tt("g");
       w.classList.add("module-text-group");
       const v = tt("defs");
@@ -9775,10 +9775,17 @@ const xs = y`
         $id: String!
         $filters: ProductCollectionProductFilterInput
         $tags: ProductCollectionProductTagFilterInput
+        $sortKey: ProductCollectionProductSortKey
+        $sortDescending: Boolean
     ) {
         productCollections(ids: [$id]) {
             id
-            productCollectionProducts(filters: $filters, tags: $tags) {
+            productCollectionProducts(
+                filters: $filters
+                tags: $tags
+                sortKey: $sortKey
+                sortDescending: $sortDescending
+            ) {
                 id
                 product {
                     id
@@ -9794,10 +9801,19 @@ const xs = y`
         $offset: Int
         $filters: ProductCollectionProductFilterInput
         $tags: ProductCollectionProductTagFilterInput
+        $sortKey: ProductCollectionProductSortKey
+        $sortDescending: Boolean
     ) {
         productCollections(ids: [$id]) {
             id
-            productCollectionProductsFeed(filters: $filters, tags: $tags, limit: $limit, offset: $offset) {
+            productCollectionProductsFeed(
+                filters: $filters
+                tags: $tags
+                limit: $limit
+                offset: $offset
+                sortKey: $sortKey
+                sortDescending: $sortDescending
+            ) {
                 items {
                     ...ProductCollectionProductFields
                 }
@@ -9881,13 +9897,13 @@ const xs = y`
             id
         }
     }
-`, Ls = y`
+`, $s = y`
     mutation BundleAddTransaction($id: String!, $transactionId: String!) {
         bundleAddTransaction(id: $id, transactionId: $transactionId) {
             id
         }
     }
-`, $s = y`
+`, Ls = y`
     mutation BundleAddTransactions($id: String!, $transactionIds: [String!]!, $transactionOwnerIds: [String!]) {
         bundleAddTransactions(id: $id, transactionIds: $transactionIds, transactionOwnerIds: $transactionOwnerIds) {
             id
@@ -10343,7 +10359,7 @@ class ao {
     };
     if (!rn(a, this.storage)) {
       this.storage = a;
-      const n = new $a(this.constructSerializableWorkflow());
+      const n = new La(this.constructSerializableWorkflow());
       this.commandContext.apply(n, !0), this.onStepSpecificStorageChange(t), this.onStorageChange();
     }
   }
@@ -10558,7 +10574,7 @@ class ao {
       const B = (S = this.getWorkflowExperience().getStepById(g.stepName)) == null ? void 0 : S.frameService;
       B == null || B.setTargetElements(a.map((E) => E.id));
     }
-    const f = u.map((B) => new vt(B.id)), p = new $a(this.constructSerializableWorkflow()), C = [...m, ...f, p];
+    const f = u.map((B) => new vt(B.id)), p = new La(this.constructSerializableWorkflow()), C = [...m, ...f, p];
     C.length > 0 && this.commandContext.apply(new O(C), !0), await this.ensureStepsAreLoaded(), this.onElementsChange();
     const w = this.getInvalidModelVariants(), v = this.modelContainer;
     if (v) {
@@ -10582,7 +10598,7 @@ class ao {
         switch (this.stepInitialised[l.stepName] = !0, l.type) {
           case D.DigitalContent:
             a.push(
-              $n.init(
+              Ln.init(
                 l,
                 this,
                 this.reloadedState
@@ -10625,7 +10641,7 @@ class ao {
             );
             break;
           case D.Shape:
-            a.push($t.init(l, this, this.reloadedState));
+            a.push(Lt.init(l, this, this.reloadedState));
             break;
           case D.Text:
             a.push(q.init(l, this, this.reloadedState));
@@ -10935,7 +10951,7 @@ class no extends it {
     const t = this.manager.getRegionElements(this.step.stepName) || [];
     if (t.length === 0)
       return;
-    const a = L(t[0].id, this.manager.getAllLayoutData()).colors, n = (o = this.getCurrentVariant()) == null ? void 0 : o.getAssetResource(), i = n == null ? void 0 : n.assetConfiguration, s = (i == null ? void 0 : i.defaultColorVariants) || [];
+    const a = $(t[0].id, this.manager.getAllLayoutData()).colors, n = (o = this.getCurrentVariant()) == null ? void 0 : o.getAssetResource(), i = n == null ? void 0 : n.assetConfiguration, s = (i == null ? void 0 : i.defaultColorVariants) || [];
     if (s.length !== 0) {
       const l = {};
       return s.forEach((c) => {
@@ -11052,7 +11068,7 @@ class lo extends it {
   }
   selectVariant(t) {
     const e = t.getResource();
-    return $t.selectVariant(
+    return Lt.selectVariant(
       this.step,
       {
         fill: e.color,
@@ -11070,7 +11086,7 @@ class lo extends it {
    * @deprecated The shape step can now pass through colors returned by getColors via selectVariant. Please swap setColor for selectVariant.
    */
   setColor(t) {
-    return $t.selectVariant(
+    return Lt.selectVariant(
       this.step,
       t,
       this.manager.getRegionElements(this.step.stepName) || [],
@@ -11082,7 +11098,7 @@ class lo extends it {
    * @returns A list of color definitions that are currently applied to the illustration.
    */
   getColors() {
-    return $t.availableColours(this.step);
+    return Lt.availableColours(this.step);
   }
   /**
    * Allows for setting a custom color when the custom variant is selected. Will
@@ -11090,7 +11106,7 @@ class lo extends it {
    */
   setCustomColor(t) {
     var e, a;
-    return ((e = this.getCurrentVariant()) == null ? void 0 : e.getColor()) !== "#custom" && console.warn(`setting custom color for step ${this.step.stepName} but color is ${(a = this.getCurrentVariant()) == null ? void 0 : a.getColor()}`), $t.setCustomColor(t, this.step, this.manager);
+    return ((e = this.getCurrentVariant()) == null ? void 0 : e.getColor()) !== "#custom" && console.warn(`setting custom color for step ${this.step.stepName} but color is ${(a = this.getCurrentVariant()) == null ? void 0 : a.getColor()}`), Lt.setCustomColor(t, this.step, this.manager);
   }
   getCustomColor() {
     var e, a, n;
@@ -11334,7 +11350,7 @@ class uo extends it {
    * @returns The final URL string for the QR code.
    */
   async selectVideo(t) {
-    return $n.regenerateQRCode(
+    return Ln.regenerateQRCode(
       this.manager.getRegionElements(this.step.stepName),
       t.key,
       this.manager,
@@ -11412,7 +11428,7 @@ class ie {
       case D.Model:
         return new io(t, e, t.getStepTags(e.stepName));
       case D.Frame:
-        return new El(t, e, t.getStepTags(e.stepName));
+        return new Bl(t, e, t.getStepTags(e.stepName));
       case D.Module:
         return new ho(t, e, t.getStepTags(e.stepName));
       default:
@@ -12885,14 +12901,14 @@ class Uo {
     return this.layouts;
   }
 }
-const Lo = () => new Promise((r, t) => {
+const $o = () => new Promise((r, t) => {
   try {
     const a = gt().getContext("webgl2");
     r(!!a);
   } catch {
     r(!1);
   }
-}), $o = Lo();
+}), Lo = $o();
 class Vo {
   constructor(t, e, a, n) {
     this.hasSetStaticContext = !1, this.interactiveDirty = !1, this.staticCtxDirty = !1, this.lastRequestedRenderArguments = void 0, this.lastCompletedStaticRender = void 0, this.renderQueue = new Pn(2), this.id = t, this.name = e, this.service = a, this.panelSize = n;
@@ -12952,7 +12968,7 @@ class Vo {
       new zo(
         this.getID(),
         a,
-        await $o,
+        await Lo,
         () => {
           this.markLastCompletedStaticRender(), this.setStaticContextDirty(!0);
         },
@@ -13029,7 +13045,7 @@ class zo extends Dn {
     u.resize(l, c), await u.render(), this.onRender();
   }
 }
-const kc = (r, t) => {
+const Mc = (r, t) => {
   const e = [];
   return r.forEach((a) => {
     const n = t.steps.find((i) => i.stepName === a.stepName);
@@ -13040,7 +13056,7 @@ const kc = (r, t) => {
       }
     });
   }), e;
-}, Mc = async (r, t, e, a) => {
+}, Tc = async (r, t, e, a) => {
   let n = {
     serializableWorkflow: { steps: [] },
     layouts: {}
@@ -13922,7 +13938,8 @@ class _o {
   }
 }
 const Xo = new _o();
-class Zo {
+var Zo = /* @__PURE__ */ ((r) => (r.Default = "Default", r.Name = "Name", r.Price = "Price", r))(Zo || {});
+class tl {
   constructor(t) {
     this.fullFetched = !1, this.collection = t;
     const e = this.collection.productCollectionProducts;
@@ -13981,9 +13998,9 @@ class Zo {
    * @param filters A list of metafield filters to apply.
    * @param tags An object of tag filters to apply.
    */
-  async filterProducts(t, e) {
-    var s, o;
-    const a = await b.getShadowGraphqlClient().query({
+  async filterProducts(t, e, a, n) {
+    var l, c;
+    const i = await b.getShadowGraphqlClient().query({
       query: Qs,
       errorPolicy: "all",
       variables: {
@@ -13995,15 +14012,17 @@ class Zo {
         tags: e ? {
           include: e.include ?? [],
           exclude: e.exclude ?? []
-        } : void 0
+        } : void 0,
+        sortKey: a,
+        sortDescending: n
       }
     });
-    if (!((s = a.data) != null && s.productCollections) || ((o = a.data) == null ? void 0 : o.productCollections.length) === 0)
+    if (!((l = i.data) != null && l.productCollections) || ((c = i.data) == null ? void 0 : c.productCollections.length) === 0)
       throw new Error("Failed to filter product collection products.");
-    const n = this.getProducts(), i = a.data.productCollections[0].productCollectionProducts.map(
-      (l) => l.product.id
+    const s = this.getProducts(), o = i.data.productCollections[0].productCollectionProducts.map(
+      (d) => d.product.id
     );
-    return n.filter((l) => i.includes(l.getId()));
+    return s.filter((d) => o.includes(d.getId()));
   }
   /**
    * Fetches a paginated feed of products.
@@ -14013,16 +14032,16 @@ class Zo {
    * @param tags Optional object of tag filters to apply.
    * @returns
    */
-  async fetchProductsFeed(t, e, a, n) {
-    var o, l, c, d, A, u;
+  async fetchProductsFeed(t, e, a, n, i, s) {
+    var c, d, A, u, h, m;
     if (this.fullFetched) {
-      const h = await (a ? this.filterProducts(a) : this.fetchProducts());
+      const g = await (a ? this.filterProducts(a) : this.fetchProducts());
       return {
-        total: h.length,
-        items: h.slice(t, t + e)
+        total: g.length,
+        items: g.slice(t, t + e)
       };
     }
-    const i = await b.getShadowGraphqlClient().query({
+    const o = await b.getShadowGraphqlClient().query({
       query: Ns,
       variables: {
         id: this.getId(),
@@ -14035,18 +14054,20 @@ class Zo {
         tags: n ? {
           include: n.include ?? [],
           exclude: n.exclude ?? []
-        } : void 0
+        } : void 0,
+        sortKey: i,
+        sortDescending: s
       },
       errorPolicy: "all"
     });
     return {
-      items: ((c = (l = (o = i == null ? void 0 : i.data) == null ? void 0 : o.productCollections) == null ? void 0 : l[0].productCollectionProductsFeed) == null ? void 0 : c.items.filter((h) => !!h.product).map((h) => new se(h))) || [],
-      total: ((u = (A = (d = i == null ? void 0 : i.data) == null ? void 0 : d.productCollections) == null ? void 0 : A[0].productCollectionProductsFeed) == null ? void 0 : u.total) ?? 0
+      items: ((A = (d = (c = o == null ? void 0 : o.data) == null ? void 0 : c.productCollections) == null ? void 0 : d[0].productCollectionProductsFeed) == null ? void 0 : A.items.filter((g) => !!g.product).map((g) => new se(g))) || [],
+      total: ((m = (h = (u = o == null ? void 0 : o.data) == null ? void 0 : u.productCollections) == null ? void 0 : h[0].productCollectionProductsFeed) == null ? void 0 : m.total) ?? 0
     };
   }
   getTransformCollection() {
     if (this.collection.transformCollection)
-      return new tl(this.collection.transformCollection);
+      return new el(this.collection.transformCollection);
   }
   /**
    * The raw collection resource. This is generally not needed and should be avoided.
@@ -14215,7 +14236,7 @@ class zt {
     return this.workflow.imageUrl;
   }
 }
-class tl {
+class el {
   constructor(t) {
     this.collection = t;
   }
@@ -14235,10 +14256,10 @@ class tl {
    * @returns The transforms in this collection.
    */
   getTransforms() {
-    return this.collection.transforms.map((t) => new el(t));
+    return this.collection.transforms.map((t) => new al(t));
   }
 }
-class el {
+class al {
   constructor(t) {
     this.transform = t;
   }
@@ -14265,7 +14286,7 @@ class el {
     };
   }
 }
-class al {
+class nl {
   constructor() {
     this.listeners = {};
   }
@@ -14292,7 +14313,7 @@ class al {
         delete this.listeners[e];
   }
 }
-const nl = y`
+const rl = y`
     mutation AddAddressToBundle(
         $bundleId: String!
         $streetAddress: String
@@ -14314,13 +14335,13 @@ const nl = y`
             id
         }
     }
-`, rl = y`
+`, il = y`
     mutation AddOrganizationToBundle($bundleId: String!, $organizationName: String!) {
         organizationAttachToBundle(bundleId: $bundleId, organizationName: $organizationName) {
             id
         }
     }
-`, il = y`
+`, sl = y`
     mutation GenerateQuoteId($id: String!) {
         bundleGenerateQuoteId(id: $id) {
             id
@@ -14331,7 +14352,7 @@ const nl = y`
 class He {
   constructor(t, e, a, n, i, s) {
     var c, d, A;
-    this.workflowExperiences = [], this.eventEmitter = new al(), this.client = t, this.id = e.id, this.name = e.name || "", this.quoteId = e.quoteId, this.shareActions = e.bundleShareActions, this.workflowViewerLink = e.workflowViewerLink, this.workflowViewerAmendLink = e.workflowViewerAmendLink, this.ownerId = i, this.metadata = new Map(((c = e.metadata) == null ? void 0 : c.map((u) => [u.key, u.value])) || []), this.completed = e.completed ?? !1, this.productCollection = e.productCollection, this.bundleStateManager = new Jo(e.bundleStateData);
+    this.workflowExperiences = [], this.eventEmitter = new nl(), this.client = t, this.id = e.id, this.name = e.name || "", this.quoteId = e.quoteId, this.shareActions = e.bundleShareActions, this.workflowViewerLink = e.workflowViewerLink, this.workflowViewerAmendLink = e.workflowViewerAmendLink, this.ownerId = i, this.metadata = new Map(((c = e.metadata) == null ? void 0 : c.map((u) => [u.key, u.value])) || []), this.completed = e.completed ?? !1, this.productCollection = e.productCollection, this.bundleStateManager = new Jo(e.bundleStateData);
     const o = (d = this.productCollection) == null ? void 0 : d.globalPropertyConfiguration;
     this.globalConfigurationPropertyId = o == null ? void 0 : o.id, this.globalPropertyStateManager = new Yo(
       this.id,
@@ -14370,7 +14391,7 @@ class He {
   async generateQuoteId() {
     var a, n;
     const e = (n = (a = (await b.getShadowGraphqlClient().mutate({
-      mutation: il,
+      mutation: sl,
       variables: {
         id: this.id
       },
@@ -14382,7 +14403,7 @@ class He {
   }
   async attachAddress(t, e, a, n, i, s) {
     await b.getShadowGraphqlClient().mutate({
-      mutation: nl,
+      mutation: rl,
       variables: {
         bundleId: this.id,
         streetAddress: t || void 0,
@@ -14399,7 +14420,7 @@ class He {
   }
   async attachOrganization(t) {
     await b.getShadowGraphqlClient().mutate({
-      mutation: rl,
+      mutation: il,
       variables: {
         bundleId: this.id,
         organizationName: t
@@ -14472,7 +14493,7 @@ class He {
     return this.workflowExperiences.map((t) => t.getTotalPriceSubunits()).reduce((t, e) => t + e, 0);
   }
   getProductCollection() {
-    return this.productCollection ? new Zo(this.productCollection) : void 0;
+    return this.productCollection ? new tl(this.productCollection) : void 0;
   }
   async initializeAdditionalRequiredColorChannels(t) {
     var e, a, n, i;
@@ -14518,7 +14539,7 @@ class He {
       );
     const n = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), i = e.map((o) => n.get(o));
     await b.getShadowGraphqlClient().mutate({
-      mutation: $s,
+      mutation: Ls,
       variables: {
         id: this.id,
         transactionIds: e,
@@ -14550,7 +14571,7 @@ class He {
       throw new Error("Unable to add transaction to bundle - Already Exists!");
     const s = (k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(a);
     await b.getShadowGraphqlClient().mutate({
-      mutation: Ls,
+      mutation: $s,
       variables: {
         id: this.id,
         transactionId: a
@@ -14991,14 +15012,14 @@ class He {
     };
   }
 }
-const sl = y`
+const ol = y`
     mutation processFlowCreate($processFlowId: String!, $inputs: [String]!) {
         processExecutionCreate(processFlowId: $processFlowId, inputs: $inputs) {
             id
         }
     }
 `;
-class ol {
+class ll {
   /**
    *
    * @param id
@@ -15009,7 +15030,7 @@ class ol {
   async execute(t, e, a) {
     var A, u, h;
     const i = (u = (A = (await b.getShadowGraphqlClient().mutate({
-      mutation: sl,
+      mutation: ol,
       variables: {
         processFlowId: t,
         inputs: [...e.map((m) => m.getValueForTransmission())]
@@ -15051,7 +15072,7 @@ class ol {
           "Execution has failed to complete. See Automation > FLows in Flight on partner account on SpiffCommerce Hub."
         );
       if (m.completedAt) {
-        o = !0, d = new ll(m);
+        o = !0, d = new cl(m);
         break;
       }
       l += 1;
@@ -15065,7 +15086,7 @@ class ol {
     return Promise.resolve(d);
   }
 }
-class ll {
+class cl {
   constructor(t) {
     this.execution = t;
   }
@@ -15150,8 +15171,8 @@ class ba {
     return t.startsWith("[") ? JSON.stringify(JSON.parse(t)) : t;
   }
 }
-var cl = /* @__PURE__ */ ((r) => (r.Transaction = "Transaction", r.Bundle = "Bundle", r.Product = "Product", r.Variant = "Variant", r.Option = "Option", r.LineItem = "LineItem", r.Asset = "Asset", r))(cl || {});
-class Tc extends ba {
+var dl = /* @__PURE__ */ ((r) => (r.Transaction = "Transaction", r.Bundle = "Bundle", r.Product = "Product", r.Variant = "Variant", r.Option = "Option", r.LineItem = "LineItem", r.Asset = "Asset", r))(dl || {});
+class Qc extends ba {
   constructor(t) {
     super(`"${t}"`);
   }
@@ -15166,7 +15187,7 @@ class Xn extends ba {
     return t.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i);
   }
 }
-class Qc extends ba {
+class Nc extends ba {
   constructor(t) {
     super(`[${t.map((e) => e.getRaw()).join(",")}]`);
   }
@@ -15224,7 +15245,7 @@ const Ya = y`
             }
         }
     }
-`, dl = y`
+`, Al = y`
     mutation CustomerCreate($details: CustomerDetailsInput!) {
         customerCreate(details: $details) {
             id
@@ -15234,7 +15255,7 @@ const Ya = y`
             }
         }
     }
-`, Al = y`
+`, ul = y`
     mutation CustomerAuthenticate($loginToken: String!) {
         customerAuthenticate(loginToken: $loginToken) {
             id
@@ -15264,11 +15285,11 @@ const Ya = y`
             }
         }
     }
-`, ul = y`
+`, hl = y`
     mutation CustomerGenerateVerificationCode($emailAddress: String!) {
         customerGenerateVerificationCode(emailAddress: $emailAddress)
     }
-`, hl = y`
+`, ml = y`
     mutation CustomerVerifyCode($emailAddress: String!, $verificationCode: String!) {
         customerVerifyCode(emailAddress: $emailAddress, verificationCode: $verificationCode) {
             id
@@ -15299,7 +15320,7 @@ const Ya = y`
             }
         }
     }
-`, ml = y`
+`, gl = y`
     query CustomerMetafields($id: String!) {
         metafields(entityId: $id) {
             id
@@ -15317,7 +15338,7 @@ const Ya = y`
             }
         }
     }
-`, gl = async (r, t) => {
+`, fl = async (r, t) => {
   var n;
   const e = await b.getShadowGraphqlClient().query({
     query: Bi(((n = t == null ? void 0 : t.assets) == null ? void 0 : n.metadata) || !1),
@@ -15341,7 +15362,7 @@ const Ya = y`
       }), Ht.set({ id: s.option.id }, Promise.resolve(s.option)));
     }), i.finalizeStepConfig || (i.finalizeStepConfig = {}), i.finalizeStepConfig.termsMarkdown = i.finalizeStepConfig.termsMarkdown || i.partner.termsMarkdown;
   }), a;
-}, fl = async (r, t) => {
+}, pl = async (r, t) => {
   const a = (await t).find((n) => n.id === r);
   if (!a)
     throw new Error(`Workflow not found: ${r}`);
@@ -15350,11 +15371,11 @@ const Ya = y`
   const e = r.map((o) => Ht.get({ id: o, options: t })), a = r.filter((o, l) => e[l] === void 0);
   if (a.length === 0)
     return Promise.all(e);
-  const n = gl(a, t), i = a.map(
-    (o) => Ht.set({ id: o, options: t }, fl(o, n))
+  const n = fl(a, t), i = a.map(
+    (o) => Ht.set({ id: o, options: t }, pl(o, n))
   ), s = e.filter((o) => o !== void 0);
   return await Promise.all(s.concat(i));
-}, Nc = async (r, t) => (await Zn([r], t))[0], pl = (r) => r.sort((t, e) => t.index - e.index).map((t) => ({
+}, Rc = async (r, t) => (await Zn([r], t))[0], Cl = (r) => r.sort((t, e) => t.index - e.index).map((t) => ({
   id: Q(),
   panelId: t.name,
   name: t.name,
@@ -15368,11 +15389,11 @@ const Ya = y`
   previewRegion: t.previewRegion,
   useEditableArea: t.useEditableArea,
   editableArea: t.editableArea
-})), Cl = (r, t) => {
+})), wl = (r, t) => {
   const e = r.workflowState, a = e ? JSON.parse(e) : void 0;
-  return a ? Object.values(a.layouts).map((n) => n.layout) : pl(t.panels);
+  return a ? Object.values(a.layouts).map((n) => n.layout) : Cl(t.panels);
 };
-class Rc {
+class Oc {
   constructor(t) {
     this.activeIntegration = void 0, this.updateTransactionState = async (e) => {
       try {
@@ -15383,7 +15404,7 @@ class Rc {
       } catch (a) {
         throw console.error(a), new ut("Critical - Unable to synchronize workflow state with server.");
       }
-    }, this.options = t, this.options.applicationKey && Fr(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 26.27.1"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
+    }, this.options = t, this.options.applicationKey && Fr(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 26.28.0"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
   }
   configure(t) {
     mt.setHubUrl(t.hubUrl), mt.setServerUrl(t.serverUrl), mt.setServicesApiUrl(t.servicesApiUrl), this.marketplaceThemeInstallId = t.marketplaceThemeInstallId, this.marketplaceThemeInstallConfigurationId = t.marketplaceThemeInstallConfigurationId, t.bearerAuthenticationToken && kr(t.bearerAuthenticationToken), this.options.applicationKey && this.getIntegration();
@@ -15403,14 +15424,14 @@ class Rc {
   getFlowService() {
     if (!xr())
       throw new Error("Application key required to use Flow Service.");
-    return new ol();
+    return new ll();
   }
   async getIntegration() {
     if (this.activeIntegration)
       return this.activeIntegration;
     if (!this.options.applicationKey)
       throw new Error("Cannot get current Integration without specifying an Application Key.");
-    return this.activeIntegration = wl(this.options.applicationKey), this.activeIntegration;
+    return this.activeIntegration = yl(this.options.applicationKey), this.activeIntegration;
   }
   async canUseAddon(t) {
     var e;
@@ -15559,7 +15580,7 @@ class Rc {
     })).data.customer;
     if (!n.id) {
       const l = (s = (await e.mutate({
-        mutation: dl,
+        mutation: Al,
         errorPolicy: "all",
         fetchPolicy: "no-cache",
         variables: {
@@ -15594,7 +15615,7 @@ class Rc {
     if (!n)
       return !1;
     const s = (o = (await e.mutate({
-      mutation: Al,
+      mutation: ul,
       errorPolicy: "all",
       fetchPolicy: "no-cache",
       variables: {
@@ -15609,7 +15630,7 @@ class Rc {
    */
   async generateVerificationCode(t) {
     await b.getShadowGraphqlClient().mutate({
-      mutation: ul,
+      mutation: hl,
       variables: {
         emailAddress: t
       }
@@ -15624,7 +15645,7 @@ class Rc {
   async verifyCode(t, e) {
     var i, s;
     const n = (i = (await b.getShadowGraphqlClient().mutate({
-      mutation: hl,
+      mutation: ml,
       errorPolicy: "all",
       fetchPolicy: "no-cache",
       variables: {
@@ -15648,7 +15669,7 @@ class Rc {
     if (!((e = this.customer) != null && e.id))
       throw new Error("Customer must be logged in before calling this function.");
     return (await b.getShadowGraphqlClient().query({
-      query: ml,
+      query: gl,
       variables: {
         id: this.customer.id
       }
@@ -15909,12 +15930,12 @@ class Rc {
       };
       if (M.type === "transaction" && B.workflowState) {
         const G = JSON.parse(B.workflowState);
-        V.layouts = Object.values(G.layouts || {}).map((nt) => nt.layout), await La(G), V.reloadedState = G;
+        V.layouts = Object.values(G.layouts || {}).map((nt) => nt.layout), await $a(G), V.reloadedState = G;
       } else if (!I && M.workflowState) {
         const G = JSON.parse(M.workflowState);
-        V.layouts = Object.values(G.layouts || {}).map((nt) => nt.layout), await La(G), V.reloadedState = G;
+        V.layouts = Object.values(G.layouts || {}).map((nt) => nt.layout), await $a(G), V.reloadedState = G;
       } else
-        V.layouts = Cl(
+        V.layouts = wl(
           V.transaction,
           V.workflow
         );
@@ -15998,7 +16019,7 @@ class Rc {
     };
   }
 }
-const wl = async (r, t) => (await b.getShadowGraphqlClient().query({
+const yl = async (r, t) => (await b.getShadowGraphqlClient().query({
   query: Pi,
   errorPolicy: "all",
   fetchPolicy: "no-cache",
@@ -16010,7 +16031,7 @@ const wl = async (r, t) => (await b.getShadowGraphqlClient().query({
   variables: {
     themeConfigurationId: t
   }
-})).data.currentIntegration, Oc = async (r) => {
+})).data.currentIntegration, Uc = async (r) => {
   const e = await b.getShadowGraphqlClient().query({
     query: mi,
     errorPolicy: "all",
@@ -16021,7 +16042,7 @@ const wl = async (r, t) => (await b.getShadowGraphqlClient().query({
   });
   if (e.data.transactions.length !== 0)
     return e.data.transactions[0];
-}, Uc = async (r, t) => {
+}, $c = async (r, t) => {
   var a;
   return (a = (await b.getShadowGraphqlClient().query({
     query: Di,
@@ -16040,7 +16061,7 @@ const wl = async (r, t) => (await b.getShadowGraphqlClient().query({
       id: r
     }
   })).data) == null ? void 0 : e.bundles) == null ? void 0 : a[0]) == null ? void 0 : n.marketplaceThemeInstallConfiguration;
-}, $c = async (r) => {
+}, Vc = async (r) => {
   var e, a, n;
   return (n = (a = (e = (await b.getShadowGraphqlClient().query({
     query: Fi,
@@ -16050,7 +16071,7 @@ const wl = async (r, t) => (await b.getShadowGraphqlClient().query({
     }
   })).data) == null ? void 0 : e.transactions) == null ? void 0 : a[0]) == null ? void 0 : n.marketplaceThemeInstallConfiguration;
 };
-function yl(r, t, e, a) {
+function Sl(r, t, e, a) {
   const n = e.width * r.zoom, i = e.height * r.zoom;
   if (a) {
     const o = r, l = Math.max(t.width / e.width, t.height / e.height);
@@ -16064,7 +16085,7 @@ function yl(r, t, e, a) {
 function le(r, t, e) {
   return Math.min(Math.max(r, t), e);
 }
-class Sl {
+class vl {
   constructor(t, e) {
     this.minZoomScale = [0.03], this.maxZoomScale = [20], this._debouncedUpdateFrameOffsets = sn(this.updateFrameOffsets, 200), this.targetElements = [], this.onFrameDataChangeListeners = [], this.onZoomChangeListeners = [], this.forceImageCover = t, this.initialZoom = e, this.thresholdSettings = {
       useThreshold: !1,
@@ -16121,7 +16142,7 @@ class Sl {
       return;
     }
     t.forEach((e, a) => {
-      const n = Lt.get(e);
+      const n = $t.get(e);
       n && (this.frameData || (this.frameData = new Array(t.length)), this.frameData[a] = n);
     });
   }
@@ -16207,7 +16228,7 @@ class Sl {
       return;
     }
     (!this.offsets || this.offsets.length !== this.frameData.length) && (this.offsets = new Array(this.frameData.length)), this.frameData.forEach((s, o) => {
-      this.offsets[o] = yl(t[o], s, this.imageData, this.forceImageCover);
+      this.offsets[o] = Sl(t[o], s, this.imageData, this.forceImageCover);
     }), this._debouncedUpdateFrameOffsets(
       this.offsets,
       n,
@@ -16286,7 +16307,7 @@ class Sl {
     }), this._debouncedUpdateFrameOffsets(this.offsets, t, this.frameData, this.thresholdSettings));
   }
 }
-class Vc {
+class zc {
   approveTransaction(t) {
     throw new Error("Method not implemented.");
   }
@@ -16445,12 +16466,12 @@ class Vc {
     return [];
   }
 }
-var vl = /* @__PURE__ */ ((r) => (r.SelectFrame = "SelectFrame", r.SelectImage = "SelectImage", r.Position = "Position", r))(vl || {});
-class El extends it {
+var El = /* @__PURE__ */ ((r) => (r.SelectFrame = "SelectFrame", r.SelectImage = "SelectImage", r.Position = "Position", r))(El || {});
+class Bl extends it {
   constructor(t, e, a) {
     super(t, e, a);
     const n = e.data;
-    this.frameService = new Sl(n.forceImageCover, n.initialZoomLevel), this.frameService.connectWorkflowManager(t, e.stepName);
+    this.frameService = new vl(n.forceImageCover, n.initialZoomLevel), this.frameService.connectWorkflowManager(t, e.stepName);
   }
   selectVariant(t) {
     const e = this.manager.getRegionElements(this.step.stepName);
@@ -16619,7 +16640,7 @@ class El extends it {
     return this.manager.getStepStorage(this.step.stepName);
   }
 }
-const Bl = y`
+const bl = y`
     query GetLoggedInCustomer($email: String!) {
         customer(emailAddress: $email) {
             id
@@ -16662,21 +16683,21 @@ const Bl = y`
             total
         }
     }
-`, bl = y`
+`, Il = y`
     mutation SetTransactionDesignName($id: String!, $name: String!) {
         transactionUpdate(id: $id, designName: $name) {
             id
             designName
         }
     }
-`, Il = y`
+`, Dl = y`
     mutation DuplicateTransaction($id: String!, $template: Boolean!) {
         transactionDuplicate(id: $id, template: $template) {
             id
             workflowViewerLink
         }
     }
-`, Dl = y`
+`, Pl = y`
     query GetCustomerBundles($id: String!, $limit: Int!, $offset: Int!) {
         customerBundlesFeed(id: $id, limit: $limit, offset: $offset) {
             items {
@@ -16689,7 +16710,7 @@ const Bl = y`
             total
         }
     }
-`, Pl = y`
+`, Fl = y`
     query GetTransactionsForBundle($id: String!) {
         bundles(ids: [$id]) {
             id
@@ -16710,21 +16731,21 @@ const Bl = y`
             }
         }
     }
-`, Fl = y`
+`, xl = y`
     mutation SetBundleName($id: String!, $name: String!) {
         bundleUpdate(id: $id, name: $name) {
             id
             name
         }
     }
-`, xl = y`
+`, kl = y`
     mutation DuplicateBundle($id: String!, $template: Boolean!) {
         bundleDuplicate(id: $id, template: $template) {
             id
             workflowViewerLink
         }
     }
-`, kl = y`
+`, Ml = y`
     query GetBundleTemplates($id: String!, $limit: Int!, $offset: Int!) {
         customerBundlesFeed(id: $id, limit: $limit, offset: $offset, template: true) {
             items {
@@ -16737,43 +16758,43 @@ const Bl = y`
             total
         }
     }
-`, zc = async (r, t, e) => await b.getShadowGraphqlClient().mutate({
-  mutation: Fl,
+`, Gc = async (r, t, e) => await b.getShadowGraphqlClient().mutate({
+  mutation: xl,
   errorPolicy: "all",
   variables: {
     id: r,
     name: t
   },
   context: e
-}), Gc = async (r, t) => await b.getShadowGraphqlClient().mutate({
-  mutation: bl,
+}), Wc = async (r, t) => await b.getShadowGraphqlClient().mutate({
+  mutation: Il,
   errorPolicy: "all",
   variables: {
     id: r,
     name: t
   }
-}), Wc = async (r, t) => await b.getShadowGraphqlClient().mutate({
-  mutation: xl,
+}), jc = async (r, t) => await b.getShadowGraphqlClient().mutate({
+  mutation: kl,
   errorPolicy: "all",
   variables: {
     id: r,
     template: t
   }
-}), jc = async (r, t) => await b.getShadowGraphqlClient().mutate({
-  mutation: Il,
+}), Hc = async (r, t) => await b.getShadowGraphqlClient().mutate({
+  mutation: Dl,
   errorPolicy: "all",
   variables: {
     id: r,
     template: t
   }
-}), Hc = async (r) => (await b.getShadowGraphqlClient().query({
-  query: Bl,
+}), qc = async (r) => (await b.getShadowGraphqlClient().query({
+  query: bl,
   errorPolicy: "all",
   variables: {
     email: r
   }
-})).data.customer, qc = async (r, t, e) => await b.getShadowGraphqlClient().query({
-  query: Dl,
+})).data.customer, Yc = async (r, t, e) => await b.getShadowGraphqlClient().query({
+  query: Pl,
   errorPolicy: "all",
   fetchPolicy: "no-cache",
   variables: {
@@ -16781,15 +16802,15 @@ const Bl = y`
     offset: e,
     limit: t
   }
-}), Yc = async (r, t) => await b.getShadowGraphqlClient().query({
-  query: Pl,
+}), Jc = async (r, t) => await b.getShadowGraphqlClient().query({
+  query: Fl,
   errorPolicy: "all",
   fetchPolicy: "no-cache",
   variables: {
     id: r
   },
   context: t
-}), Jc = async (r, t, e) => {
+}), Kc = async (r, t, e) => {
   var n;
   const a = await b.getShadowGraphqlClient().query({
     query: Ia,
@@ -16813,7 +16834,7 @@ const Bl = y`
     }
   });
   return ((n = a == null ? void 0 : a.data.customerTransactionsFeed) == null ? void 0 : n.items) || [];
-}, Kc = async (r, t, e) => {
+}, _c = async (r, t, e) => {
   var n;
   const a = await b.getShadowGraphqlClient().query({
     query: Ia,
@@ -16837,7 +16858,7 @@ const Bl = y`
     }
   });
   return ((n = a == null ? void 0 : a.data.customerTransactionsFeed) == null ? void 0 : n.items) || [];
-}, _c = async (r, t, e) => {
+}, Xc = async (r, t, e) => {
   var n;
   const a = await b.getShadowGraphqlClient().query({
     query: Ia,
@@ -16857,10 +16878,10 @@ const Bl = y`
     }
   });
   return ((n = a == null ? void 0 : a.data.customerTransactionsFeed) == null ? void 0 : n.items) || [];
-}, Xc = async (r, t, e) => {
+}, Zc = async (r, t, e) => {
   var n;
   const a = await b.getShadowGraphqlClient().query({
-    query: kl,
+    query: Ml,
     errorPolicy: "all",
     fetchPolicy: "no-cache",
     variables: {
@@ -16881,7 +16902,7 @@ const Bl = y`
     console.error("vite-plugin-css-injected-by-js", t);
   }
 })();
-var Ml = /* @__PURE__ */ ((r) => (r.Manual = "Manual", r.OnStart = "OnStart", r.OnQuit = "OnQuit", r.OnEnd = "OnEnd", r))(Ml || {}), Tl = /* @__PURE__ */ ((r) => (r.Email = "Email", r.FirstName = "FirstName", r.LastName = "LastName", r.Phone = "Phone", r.Apartment = "Apartment", r.City = "City", r.Country = "Country", r.OrganizationName = "OrganizationName", r.PostCode = "PostCode", r.State = "State", r.StreetAddress = "StreetAddress", r.DesignName = "DesignName", r.PurchaseOrder = "PurchaseOrder", r.DispatchDate = "DispatchDate", r.Stakeholders = "Stakeholders", r))(Tl || {}), K;
+var Tl = /* @__PURE__ */ ((r) => (r.Manual = "Manual", r.OnStart = "OnStart", r.OnQuit = "OnQuit", r.OnEnd = "OnEnd", r))(Tl || {}), Ql = /* @__PURE__ */ ((r) => (r.Email = "Email", r.FirstName = "FirstName", r.LastName = "LastName", r.Phone = "Phone", r.Apartment = "Apartment", r.City = "City", r.Country = "Country", r.OrganizationName = "OrganizationName", r.PostCode = "PostCode", r.State = "State", r.StreetAddress = "StreetAddress", r.DesignName = "DesignName", r.PurchaseOrder = "PurchaseOrder", r.DispatchDate = "DispatchDate", r.Stakeholders = "Stakeholders", r))(Ql || {}), K;
 K = { __e: function(r, t, e, a) {
   for (var n, i, s; t = t.__; )
     if ((n = t.__c) && !n.__)
@@ -16894,7 +16915,7 @@ K = { __e: function(r, t, e, a) {
   throw r;
 } }, typeof Promise == "function" && Promise.prototype.then.bind(Promise.resolve());
 var ot, qe, Ja, tr = [], Ye = [], Ka = K.__b, _a = K.__r, Xa = K.diffed, Za = K.__c, tn = K.unmount;
-function Ql() {
+function Nl() {
   for (var r; r = tr.shift(); )
     if (r.__P && r.__H)
       try {
@@ -16914,7 +16935,7 @@ K.__b = function(r) {
 }, K.diffed = function(r) {
   Xa && Xa(r);
   var t = r.__c;
-  t && t.__H && (t.__H.__h.length && (tr.push(t) !== 1 && Ja === K.requestAnimationFrame || ((Ja = K.requestAnimationFrame) || Nl)(Ql)), t.__H.__.forEach(function(e) {
+  t && t.__H && (t.__H.__h.length && (tr.push(t) !== 1 && Ja === K.requestAnimationFrame || ((Ja = K.requestAnimationFrame) || Rl)(Nl)), t.__H.__.forEach(function(e) {
     e.i && (e.__H = e.i), e.__V !== Ye && (e.__ = e.__V), e.i = void 0, e.__V = Ye;
   })), qe = ot = null;
 }, K.__c = function(r, t) {
@@ -16941,7 +16962,7 @@ K.__b = function(r) {
   }), e.__H = void 0, t && K.__e(t, e.__v));
 };
 var en = typeof requestAnimationFrame == "function";
-function Nl(r) {
+function Rl(r) {
   var t, e = function() {
     clearTimeout(a), en && cancelAnimationFrame(t), setTimeout(r);
   }, a = setTimeout(e, 100);
@@ -16957,35 +16978,35 @@ function la(r) {
 }
 export {
   da as AddonHandle,
-  Qc as ArrayInput,
+  Nc as ArrayInput,
   et as AspectType,
   yt as AssetNotFoundError,
   he as AssetType,
-  Fc as BringForwardCommand,
-  Pc as BringToBackCommand,
-  Dc as BringToFrontCommand,
+  xc as BringForwardCommand,
+  Fc as BringToBackCommand,
+  Pc as BringToFrontCommand,
   mr as BundleDesignCreationCartAddMode,
   R as CanvasCommand,
   se as CollectionProduct,
   Ha as ColorOptionGlobalPropertyHandle,
   _i as CommandContext,
-  Tl as ConversionDataType,
-  Ml as ConversionLocation,
+  Ql as ConversionDataType,
+  Tl as ConversionLocation,
   W as CreateElementCommand,
   Un as CreateLayoutCommand,
   vt as DeleteElementCommand,
   uo as DigitalContentStepHandle,
   Wo as FileUploadGlobalPropertyHandle,
   oe as FlowExecutionNodeResult,
-  ll as FlowExecutionResult,
-  ol as FlowService,
+  cl as FlowExecutionResult,
+  ll as FlowService,
   es as FontAlignmentCommand,
   Zi as FontColorCommand,
   ts as FontSizeCommand,
   Va as FontSourceCommand,
-  Sl as FrameService,
-  vl as FrameStep,
-  El as FrameStepHandle,
+  vl as FrameService,
+  El as FrameStep,
+  Bl as FrameStepHandle,
   Ba as GlobalPropertyHandle,
   O as GroupCommand,
   no as IllustrationStepHandle,
@@ -16993,37 +17014,38 @@ export {
   Ao as InformationStepHandle,
   qa as IntegrationProduct,
   fr as IntegrationType,
-  vc as LayoutElementFactory,
+  Ec as LayoutElementFactory,
   T as LayoutElementType,
   Y as LayoutNotFoundError,
   Gt as LayoutRenderingPurpose,
   ro as MaterialStepHandle,
   fe as MisconfigurationError,
-  Vc as MockWorkflowManager,
+  zc as MockWorkflowManager,
   io as ModelStepHandle,
   ho as ModuleStepHandle,
-  Ec as MoveCommand,
+  Bc as MoveCommand,
   Xn as ObjectInput,
-  cl as ObjectInputType,
+  dl as ObjectInputType,
   _n as OptionGlobalPropertyHandle,
   ge as OptionNotFoundError,
   Dt as ParseError,
   so as PictureStepHandle,
   pr as ProductCameraRig,
-  Zo as ProductCollection,
+  tl as ProductCollection,
+  Zo as ProductCollectionProductSortKey,
   zt as ProductWorkflow,
   Ht as PromiseCache,
   Pn as PromiseQueue,
   oo as QuestionStepHandle,
   Dn as QueueablePromise,
-  bc as ResizeCommand,
+  Ic as ResizeCommand,
   Wt as ResourceNotFoundError,
-  Bc as RotateCommand,
+  bc as RotateCommand,
   H as ScaleAxis,
-  xc as SendBackwardsCommand,
+  kc as SendBackwardsCommand,
   lo as ShapeStepHandle,
   gr as ShareActionType,
-  Rc as SpiffCommerceClient,
+  Oc as SpiffCommerceClient,
   me as StakeholderType,
   hr as StepAspectType,
   it as StepHandle,
@@ -17031,95 +17053,95 @@ export {
   kt as TextAlgorithm,
   rs as TextChangeCommand,
   jo as TextGlobalPropertyHandle,
-  Tc as TextInput,
+  Qc as TextInput,
   co as TextStepHandle,
-  el as Transform,
-  tl as TransformCollection,
+  al as Transform,
+  el as TransformCollection,
   z as UnhandledBehaviorError,
   Cr as UnitOfMeasurement,
-  Ic as UpdateImageSourceCommand,
+  Dc as UpdateImageSourceCommand,
   st as Variant,
   bo as WorkflowExperienceEventType,
   Io as WorkflowExperienceImpl,
   U as assetService,
   Gr as browserColorToHex,
-  yc as cmPerPixel,
+  Sc as cmPerPixel,
   wo as createDesign,
-  pc as currentDirection,
-  ic as dataUrlFromExternalUrl,
+  Cc as currentDirection,
+  sc as dataUrlFromExternalUrl,
   je as designService,
   Ae as determineCorrectFontSizeAndLines,
-  $n as digitalContentStepService,
+  Ln as digitalContentStepService,
   dt as domParser,
-  Wc as duplicateBundle,
-  jc as duplicateTransaction,
+  jc as duplicateBundle,
+  Hc as duplicateTransaction,
   at as fetchAsString,
-  dc as findAngle,
-  L as findElement,
-  lc as findPmsColors,
-  Lt as frameDataCache,
+  Ac as findAngle,
+  $ as findElement,
+  cc as findPmsColors,
+  $t as frameDataCache,
   Ct as frameStepService,
   Q as generate,
   Oo as generateCommands,
   lt as generateSVGWithUnknownColors,
-  Mc as generateStateFromDesignInputSteps,
+  Tc as generateStateFromDesignInputSteps,
   De as getAttributesFromArrayBuffer,
-  cc as getAxisAlignedBoundingBox,
-  yl as getBoundedOffsets,
+  dc as getAxisAlignedBoundingBox,
+  Sl as getBoundedOffsets,
   Lc as getBundleThemeConfiguration,
-  Hc as getCustomer,
-  qc as getCustomerBundles,
-  Cc as getElementVertices,
+  qc as getCustomer,
+  Yc as getCustomerBundles,
+  wc as getElementVertices,
   xe as getFrameData,
-  wl as getIntegration,
-  gc as getNEPoint,
-  mc as getNWPoint,
-  Kc as getOrderedTransactions,
-  Uc as getOverrideThemeConfiguration,
-  hc as getPointOfRotation,
-  fc as getSEPoint,
+  yl as getIntegration,
+  fc as getNEPoint,
+  gc as getNWPoint,
+  _c as getOrderedTransactions,
+  $c as getOverrideThemeConfiguration,
+  mc as getPointOfRotation,
+  pc as getSEPoint,
   wa as getSvgElement,
-  Xc as getTemplateBundles,
-  _c as getTemplateTransactions,
-  Oc as getTransaction,
-  $c as getTransactionThemeConfiguration,
-  Yc as getTransactionsForBundle,
-  uc as getTrueCoordinates,
-  Jc as getUnorderedTransactions,
-  Nc as getWorkflow,
+  Zc as getTemplateBundles,
+  Xc as getTemplateTransactions,
+  Uc as getTransaction,
+  Vc as getTransactionThemeConfiguration,
+  Jc as getTransactionsForBundle,
+  hc as getTrueCoordinates,
+  Kc as getUnorderedTransactions,
+  Rc as getWorkflow,
   Zn as getWorkflows,
   b as graphQlManager,
   de as illustrationStepService,
-  Ac as isCloseToValue,
+  uc as isCloseToValue,
   Tt as loadFont,
-  oc as matchHexToPms,
+  lc as matchHexToPms,
   Vn as materialStepService,
   Xo as metafieldManager,
-  wc as mmPerPixel,
+  yc as mmPerPixel,
   zn as modelStepService,
   fa as modifySVGColors,
   Gn as moduleStepService,
-  zc as nameBundle,
-  Gc as nameTransaction,
+  Gc as nameBundle,
+  Wc as nameTransaction,
   X as optionService,
-  Sc as outlineFontsInSvg,
+  vc as outlineFontsInSvg,
   At as patternImageDataCache,
   k as persistenceService,
   Wn as pictureStepService,
-  sc as pmsToRgb,
+  oc as pmsToRgb,
   jn as questionStepService,
-  rc as registerFetchImplementation,
-  nc as registerWindowImplementation,
-  La as rehydrateSerializedLayout,
-  $r as rgbToPms,
+  ic as registerFetchImplementation,
+  rc as registerWindowImplementation,
+  $a as rehydrateSerializedLayout,
+  Lr as rgbToPms,
   re as rotateAroundPoint,
   ma as sanitizeSvgTree,
   kr as setBearerAuthenticationToken,
   mn as setCanvasModule,
-  $t as shapeStepService,
+  Lt as shapeStepService,
   ss as shortenUrl,
   mt as spiffCoreConfiguration,
-  kc as stepAspectValuesToDesignInputSteps,
+  Mc as stepAspectValuesToDesignInputSteps,
   Qa as svgColorValueToDefinition,
   Rn as svgStringDimensions,
   Aa as svgToDataUrl,