@spiffcommerce/core 18.1.0-beta.1 → 18.2.0-beta.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createHttpLink as ct, InMemoryCache as gt, ApolloClient as lt, from as Bt, gql as M } from "@apollo/client/core";
-import { fetch as qA, getAttributesFromArrayBuffer as pe, AssetType as re, StepType as f, getFrameData as ZA, frameDataCache as dt, GroupCommand as R, UpdateFramePattern as De, UpdateFrameThresholdSettingsCommand as wt, calculateOffsets as $A, LayoutElementType as U, generate as k, CreateElementCommand as b, generateSVGWithUnknownColors as fe, svgObjectURL as pA, fetchAsString as q, DeleteElementCommand as Z, generateDefaultRectangleFrameSvg as ce, GetSVGDimensions as Et, patternImageDataCache as ge, fetchAsArrayBuffer as ht, findElement as DA, modifySVGWithElementProperties as Ct, IllustrationColorCommand as OA, IllustrationCacheCommand as Qt, getFontMetrics as ut, getPatternImageData as zA, FontAlignmentCommand as mt, FontColorCommand as It, FontImageFillCommand as kA, applyTextTransformations as KA, determineCorrectFontSizeAndLines as uA, FontSourceCommand as le, loadFont as _A, TextChangeCommand as pt, FontSizeCommand as Dt, createElementNS as ft, createElement as lA, _loadFontExternalDataURL as Ae, UpdateWorkflowStateCommand as Be, CommandContext as Ft, createCanvas as fA, getSvgElement as Fe, LayoutRenderingPurpose as Me, renderPapyrusComponentAsString as ye, loadImage as Ye, getDomParser as Se, toBase64 as de, getVariant as Mt, generateFrameSVG as yt, getDefaultVariant as PA, domParser as xe, sanitizeSvgTree as Ne, traverse as Yt, xmlSerializer as Pe, CreateLayoutCommand as St, AspectType as mA, rehydrateSerializedLayout as _ } from "@spiffcommerce/papyrus";
-import { AssetType as Ps, BringForwardCommand as Hs, BringToBackCommand as Rs, BringToFrontCommand as Us, CanvasCommand as Gs, CommandContext as vs, CreateElementCommand as ks, CreateLayoutCommand as Js, DeleteElementCommand as bs, FontAlignmentCommand as Ls, FontColorCommand as Ts, FontSizeCommand as Os, FontSourceCommand as zs, GroupCommand as Ks, LayoutElementFactory as js, LayoutElementType as Vs, MoveCommand as Ws, ResizeCommand as Xs, RotateCommand as qs, SendBackwardsCommand as Zs, StepAspectType as $s, StepType as _s, TextChangeCommand as Ai, UnitOfMeasurement as ei, dataUrlFromExternalUrl as ti, determineCorrectFontSizeAndLines as ai, findElement as ni, frameDataCache as si, generate as ii, generateSVGWithUnknownColors as oi, getAttributesFromArrayBuffer as ri, getAxisAlignedBoundingBox as ci, getFrameData as gi, getSvgElement as li, loadFont as Bi, patternImageDataCache as di, registerFetchImplementation as wi, registerWindowImplementation as Ei, rehydrateSerializedLayout as hi, setCanvasModule as Ci } from "@spiffcommerce/papyrus";
+import { fetch as qA, getAttributesFromArrayBuffer as pe, AssetType as re, StepType as f, getFrameData as ZA, frameDataCache as dt, GroupCommand as R, UpdateFramePattern as De, UpdateFrameThresholdSettingsCommand as wt, calculateOffsets as $A, LayoutElementType as U, generate as k, CreateElementCommand as b, generateSVGWithUnknownColors as fe, svgObjectURL as pA, fetchAsString as q, DeleteElementCommand as Z, generateDefaultRectangleFrameSvg as ce, GetSVGDimensions as Et, patternImageDataCache as ge, fetchAsArrayBuffer as ht, findElement as DA, modifySVGWithElementProperties as Ct, IllustrationColorCommand as TA, IllustrationCacheCommand as Qt, getFontMetrics as ut, getPatternImageData as zA, FontAlignmentCommand as mt, FontColorCommand as It, FontImageFillCommand as kA, applyTextTransformations as KA, determineCorrectFontSizeAndLines as uA, FontSourceCommand as le, loadFont as _A, TextChangeCommand as pt, FontSizeCommand as Dt, createElementNS as ft, createElement as lA, _loadFontExternalDataURL as Ae, UpdateWorkflowStateCommand as Be, CommandContext as Ft, createCanvas as fA, getSvgElement as Fe, LayoutRenderingPurpose as Me, renderPapyrusComponentAsString as ye, loadImage as Ye, getDomParser as Se, toBase64 as de, getVariant as Mt, generateFrameSVG as yt, getDefaultVariant as PA, domParser as xe, sanitizeSvgTree as Ne, traverse as Yt, xmlSerializer as Pe, CreateLayoutCommand as St, AspectType as mA, rehydrateSerializedLayout as _ } from "@spiffcommerce/papyrus";
+import { AssetType as Ps, BringForwardCommand as Hs, BringToBackCommand as Rs, BringToFrontCommand as Us, CanvasCommand as Gs, CommandContext as vs, CreateElementCommand as ks, CreateLayoutCommand as Js, DeleteElementCommand as bs, FontAlignmentCommand as Ls, FontColorCommand as Os, FontSizeCommand as Ts, FontSourceCommand as zs, GroupCommand as Ks, LayoutElementFactory as js, LayoutElementType as Vs, MoveCommand as Ws, ResizeCommand as Xs, RotateCommand as qs, SendBackwardsCommand as Zs, StepAspectType as $s, StepType as _s, TextChangeCommand as Ai, UnitOfMeasurement as ei, dataUrlFromExternalUrl as ti, determineCorrectFontSizeAndLines as ai, findElement as ni, frameDataCache as si, generate as ii, generateSVGWithUnknownColors as oi, getAttributesFromArrayBuffer as ri, getAxisAlignedBoundingBox as ci, getFrameData as gi, getSvgElement as li, loadFont as Bi, patternImageDataCache as di, registerFetchImplementation as wi, registerWindowImplementation as Ei, rehydrateSerializedLayout as hi, setCanvasModule as Ci } from "@spiffcommerce/papyrus";
 import { setContext as xt } from "@apollo/client/link/context";
 import { onError as Nt } from "@apollo/client/link/error";
 import { Pith as He } from "pith";
@@ -25,7 +25,7 @@ class FA extends cA {
     super(`Option not Configured: ${A.stepTitle}`), this.optionId = (A == null ? void 0 : A.optionId) || "N/A";
   }
 }
-class T extends cA {
+class O extends cA {
   constructor(A) {
     super(`Panel not Found: ${A.panelId}`), this.panelId = (A == null ? void 0 : A.panelId) || "N/A";
   }
@@ -185,8 +185,8 @@ class kt {
         if (window && window.__SENTRY__) {
           const h = window.__SENTRY__.hub;
           if (h) {
-            const I = h.traceHeaders();
-            Object.entries(I).forEach(([u, D]) => {
+            const m = h.traceHeaders();
+            Object.entries(m).forEach(([u, D]) => {
               r[u] = D;
             });
           }
@@ -333,7 +333,7 @@ const N = new kt(), Jt = M`
             ...MaterialFields
         }
     }
-`, Tt = M`
+`, Ot = M`
     mutation CreateAsset($name: String!, $type: String!, $mimeType: String!, $anonymous: Boolean, $temporary: Boolean) {
         assetCreate(name: $name, type: $type, mimeType: $mimeType, anonymous: $anonymous, temporary: $temporary) {
             uploadUrl
@@ -354,7 +354,7 @@ const N = new kt(), Jt = M`
   variables: {
     keys: c
   }
-})).data.assets, Ot = async (c) => (await N.getShadowGraphqlClient().query({
+})).data.assets, Tt = async (c) => (await N.getShadowGraphqlClient().query({
   query: Lt,
   errorPolicy: "all",
   fetchPolicy: "no-cache",
@@ -364,7 +364,7 @@ const N = new kt(), Jt = M`
 })).data.materials, zt = async (c, A, e, t, a) => {
   var s;
   return (s = (await N.getShadowGraphqlClient().mutate({
-    mutation: Tt,
+    mutation: Ot,
     errorPolicy: "all",
     fetchPolicy: "no-cache",
     variables: {
@@ -427,7 +427,7 @@ class Kt {
   async getMaterialLocalOrFromServer(A) {
     if (this.materialCache.has(A))
       return this.materialCache.get(A);
-    const t = (async () => (await Ot([A]))[0])();
+    const t = (async () => (await Tt([A]))[0])();
     return this.materialCache.set(A, t), t;
   }
   /**
@@ -692,18 +692,21 @@ class Zt {
 const K = new Zt();
 var $t = /* @__PURE__ */ ((c) => (c.Hub = "Hub", c.Shopify = "Shopify", c))($t || {}), _t = /* @__PURE__ */ ((c) => (c[c.Orbit = 0] = "Orbit", c[c.Pan = 1] = "Pan", c))(_t || {}), Aa = /* @__PURE__ */ ((c) => (c.Manual = "Manual", c.OnStart = "OnStart", c.OnQuit = "OnQuit", c.OnEnd = "OnEnd", c))(Aa || {}), ea = /* @__PURE__ */ ((c) => (c.Email = "Email", c.FirstName = "FirstName", c.LastName = "LastName", c.Phone = "Phone", c))(ea || {}), YA = /* @__PURE__ */ ((c) => (c.Owner = "Owner", c.Approver = "Approver", c.Editor = "Editor", c.Viewer = "Viewer", c))(YA || {});
 const gA = M`
-    fragment AdditionalProductFields on Product {
+    fragment AdditionalIntegrationProductFields on IntegrationProduct {
         id
-        basePrice
-        enabled
-        name
-        sku
-        skuCode
-        weight
-        imageUrl
-        modelUrl
-        overlayImageUrl
-        preloadImageUrl
+        product {
+            id
+            basePrice
+            enabled
+            name
+            sku
+            skuCode
+            weight
+            imageUrl
+            modelUrl
+            overlayImageUrl
+            preloadImageUrl
+        }
     }
 `, he = M`
     ${gA}
@@ -783,8 +786,8 @@ const gA = M`
                 externalVariantId
                 additionalExternalProductId
                 additionalExternalVariantId
-                additionalProduct {
-                    ...AdditionalProductFields
+                additionalIntegrationProduct {
+                    ...AdditionalIntegrationProductFields
                 }
             }
         }
@@ -855,8 +858,8 @@ const gA = M`
                 externalVariantId
                 additionalExternalProductId
                 additionalExternalVariantId
-                additionalProduct {
-                    ...AdditionalProductFields
+                additionalIntegrationProduct {
+                    ...AdditionalIntegrationProductFields
                 }
             }
         }
@@ -927,8 +930,8 @@ const gA = M`
                 externalVariantId
                 additionalExternalProductId
                 additionalExternalVariantId
-                additionalProduct {
-                    ...AdditionalProductFields
+                additionalIntegrationProduct {
+                    ...AdditionalIntegrationProductFields
                 }
             }
         }
@@ -1006,8 +1009,8 @@ const gA = M`
                 externalVariantId
                 additionalExternalProductId
                 additionalExternalVariantId
-                additionalProduct {
-                    ...AdditionalProductFields
+                additionalIntegrationProduct {
+                    ...AdditionalIntegrationProductFields
                 }
             }
         }
@@ -1065,7 +1068,7 @@ M`
         }
     }
 `;
-const Te = M`
+const Oe = M`
     query ReadWorkflowStates($ids: [String]!) {
         transactions(ids: $ids) {
             id
@@ -1161,7 +1164,7 @@ const Te = M`
     );
   return n;
 };
-class Oe {
+class Te {
   constructor() {
     this.timestamp = Date.now();
   }
@@ -1430,7 +1433,7 @@ class Ce {
       var o, r, g, B;
       const n = this.layouts.find((l) => l.panelId === a.panelId);
       if (!n)
-        throw new T(a);
+        throw new O(a);
       let s = "";
       if (this.configuration.type === f.ProductOverlay) {
         let l = "";
@@ -1514,7 +1517,7 @@ class Ce {
       return this.configuration.type === f.ProductOverlay ? Promise.all(
         this.configuration.data.regions.map((A) => {
           if (!this.layouts.find((t) => A.panelId === t.panelId))
-            throw new T(A);
+            throw new O(A);
           return this.processRegion(A);
         })
       ) : Promise.reject("Unknown silent step. This is a bug");
@@ -1584,9 +1587,9 @@ class da {
     if (!e && t !== "" && a === "") {
       const g = async () => {
         var u, D;
-        const h = (await be([t]))[0], I = (D = (u = h == null ? void 0 : h.versions) == null ? void 0 : u.find((p) => p.name === "mpeg4")) == null ? void 0 : D.link;
-        return { asset: h, link: I };
-      }, B = await new Promise((h, I) => {
+        const h = (await be([t]))[0], m = (D = (u = h == null ? void 0 : h.versions) == null ? void 0 : u.find((p) => p.name === "mpeg4")) == null ? void 0 : D.link;
+        return { asset: h, link: m };
+      }, B = await new Promise((h, m) => {
         new Ke(
           async () => !!(await g()).link,
           async () => {
@@ -1599,7 +1602,7 @@ class da {
             });
           },
           () => {
-            I("Poller timed out with 40 attempts @ 3 second interval");
+            m("Poller timed out with 40 attempts @ 3 second interval");
           },
           3e3,
           40
@@ -1632,7 +1635,7 @@ class da {
     const n = t.getLayouts(), i = `data:image/svg+xml;base64,${btoa(await Ge(A, { type: "svg" }))}`, o = e.map((r) => {
       const g = r.region, B = n.find((l) => l.panelId === (g == null ? void 0 : g.panelId));
       if (!B && g)
-        throw new T(g);
+        throw new O(g);
       if (B && !g)
         throw new Error("Region not found");
       if (!B || !g)
@@ -1838,7 +1841,7 @@ class Ea {
     n && n(!0);
     const r = await Promise.all(
       A.data.regions.map(async (d, w) => {
-        const C = await ZA(o[w]), E = i.getImageData(), Q = t.map((m) => new Z(m.id)), h = E ? $A(E, C) : void 0, I = E ? {
+        const C = await ZA(o[w]), E = i.getImageData(), Q = t.map((I) => new Z(I.id)), h = E ? $A(E, C) : void 0, m = E ? {
           id: k(),
           src: E.src,
           x: (h == null ? void 0 : h.x) || 0,
@@ -1848,13 +1851,13 @@ class Ea {
           scaleX: (h == null ? void 0 : h.zoom) || 1,
           scaleY: (h == null ? void 0 : h.zoom) || 1,
           rotation: 0
-        } : void 0, u = k(), p = a.getLayouts().find((m) => m.panelId === d.panelId);
+        } : void 0, u = k(), p = a.getLayouts().find((I) => I.panelId === d.panelId);
         if (!p)
-          throw new T(d);
+          throw new O(d);
         return {
           command: this.getCreateElementCommand(u, d, p, {
             frameData: C,
-            pattern: I,
+            pattern: m,
             disablePlaceholder: A.data.disablePlaceholder,
             focalBlur: A.data.focalBlur,
             focalBlurStrength: A.data.focalBlurStrength,
@@ -2019,7 +2022,7 @@ class ha {
     const i = Ct(A, e, t, s), o = await pA(i), r = [];
     for (const B of a) {
       for (const [l, d] of n.entries())
-        r.push(new OA(B, l, d));
+        r.push(new TA(B, l, d));
       r.push(new Qt(B, i, o));
     }
     return new R(r);
@@ -2080,13 +2083,13 @@ class ha {
     if (!o)
       throw new oA(i);
     const r = await fe(await this.getIllustrationBody(o)), g = await pA(r.svg), B = (h) => {
-      const I = n.getLayouts().find((D) => D.panelId === h.panelId);
-      if (!I)
-        throw new T(h);
+      const m = n.getLayouts().find((D) => D.panelId === h.panelId);
+      if (!m)
+        throw new O(h);
       const u = k();
       return {
         regionElement: { id: u, region: h },
-        command: this.getCreateElementCommand(u, h, I, {
+        command: this.getCreateElementCommand(u, h, m, {
           stepName: A.stepName,
           src: o,
           objectURL: g,
@@ -2097,9 +2100,9 @@ class ha {
     let C = Array.from(Object.values(r.colors)).map((h) => h.browserValue);
     const E = A.data.colorOption;
     return E && ((Q = E.variants) == null || Q.forEach((h) => {
-      C = C.map((I) => {
+      C = C.map((m) => {
         var u;
-        return I.toLowerCase() === ((u = h.color) == null ? void 0 : u.toLowerCase()) ? h.name : I;
+        return m.toLowerCase() === ((u = h.color) == null ? void 0 : u.toLowerCase()) ? h.name : m;
       });
     })), n.updateMetadata(A.stepName, { colors: C }), {
       command: new R(w),
@@ -2107,11 +2110,22 @@ class ha {
         await n.setSelectionsAndElements(
           A.stepName,
           [e],
-          l.map((h) => h.regionElement),
+          l.map((u) => u.regionElement),
           async () => {
             n.setMandatoryFulfilled(A.stepName, !0), a(!1);
           }
         );
+        const h = await this.availableColors(A, n) || [], m = Object.keys(r.colors);
+        if (A.data.colorPickerEnabled && h.length === 1 && m.length === 1) {
+          const u = h[0], D = m[0];
+          await this.changeColors(
+            A,
+            l.map((p) => p.regionElement),
+            n,
+            () => n.getCommandContext().getAllLayouts(),
+            /* @__PURE__ */ new Map([[D, u.variant.color]])
+          );
+        }
       }
     };
   }
@@ -2441,7 +2455,7 @@ class Ia {
     const o = t.getRegionElements(A.stepName).map((B) => new Z(B.id)), r = (B) => {
       const d = t.getLayouts().find((C) => C.panelId === B.panelId);
       if (!d)
-        throw new T(B);
+        throw new O(B);
       const w = k();
       return {
         regionElement: { id: w, region: B },
@@ -2559,8 +2573,8 @@ class Da {
     const a = t.getLayouts(), s = (t.getRegionElements(e.stepName) || []).map((i) => {
       const o = i.region;
       if (!a.find((g) => g.panelId === (o == null ? void 0 : o.panelId)))
-        throw new T(o);
-      return new OA(i.id, this.shapeFillId, A);
+        throw new O(o);
+      return new TA(i.id, this.shapeFillId, A);
     }).filter((i) => !!i);
     t.getCommandDispatcher()(new R(s)), t.updateStorage(e.stepName, { colour: A });
   }
@@ -2630,9 +2644,9 @@ class Da {
       const r = (B) => {
         const l = B.region;
         if (!n.find((C) => C.panelId === (l == null ? void 0 : l.panelId)))
-          throw new T(l);
+          throw new O(l);
         const w = i();
-        return new OA(B.id, this.shapeFillId, w);
+        return new TA(B.id, this.shapeFillId, w);
       }, g = t.map(r).filter((B) => !!B);
       return {
         command: new R(g),
@@ -2646,9 +2660,9 @@ class Da {
       };
     } else {
       const r = (d) => {
-        const w = n.find((I) => I.panelId === d.panelId);
+        const w = n.find((m) => m.panelId === d.panelId);
         if (!w)
-          throw new T(d);
+          throw new O(d);
         const C = i(), E = `
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -2984,14 +2998,14 @@ class ya {
       if (o && l) {
         const d = (r = o.variants) == null ? void 0 : r.find((w) => w.id === l);
         if (d) {
-          const w = await this.fontDataFromVariant(d), C = i.map((I) => ({ id: I.id, region: I.stepRegion })), E = (g = a.storage) == null ? void 0 : g.color, Q = (B = a.storage) == null ? void 0 : B.text;
+          const w = await this.fontDataFromVariant(d), C = i.map((m) => ({ id: m.id, region: m.stepRegion })), E = (g = a.storage) == null ? void 0 : g.color, Q = (B = a.storage) == null ? void 0 : B.text;
           await e.setSelectionsAndElements(
             A.stepName,
             [d],
             C,
             async () => {
               e.updateMetadata(A.stepName, { color: E, text: Q }), e.updateStorage(A.stepName, { text: Q, inputText: Q });
-              const I = i.map((D) => new le(D.id, w)), u = new R(I);
+              const m = i.map((D) => new le(D.id, w)), u = new R(m);
               e.getCommandDispatcher()(u), e.setMandatoryFulfilled(A.stepName, !0);
             }
           );
@@ -3116,18 +3130,18 @@ class ya {
         let Q;
         if (E && E.variants) {
           const S = E.variants.find((J) => {
-            var O;
-            return J.id === ((O = E.defaultVariant) == null ? void 0 : O.id);
+            var T;
+            return J.id === ((T = E.defaultVariant) == null ? void 0 : T.id);
           }) || E.variants[0];
           Q = this.createTextFillSpotColor(E, S), s.updateStorage(A, {
             colorProfileAssetKey: (C = E.colorProfile) == null ? void 0 : C.key
           });
         }
-        const h = await this.getDefaultColor(t), I = h || "#000000", u = {
+        const h = await this.getDefaultColor(t), m = h || "#000000", u = {
           stepRegion: B,
           stepName: A,
           align: this.textAlign(t),
-          fill: n.color ? n.color : I,
+          fill: n.color ? n.color : m,
           fontSize: t.size || bA,
           fontData: a,
           id: w,
@@ -3147,7 +3161,7 @@ class ya {
           curved: t.curved,
           paths: t.paths,
           fillSpotColorDefinition: Q
-        }, D = [], p = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
+        }, D = [], p = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map();
         if (!u.fontData)
           throw new v("Failed to resolve font data for text.");
         const [F, Y] = uA(
@@ -3164,7 +3178,7 @@ class ya {
           [o],
           { size: t.size, minSize: t.minSize, maxSize: t.maxSize }
         );
-        p.set(u.id, F), m.set(u.id, Y);
+        p.set(u.id, F), I.set(u.id, Y);
         const y = t.curved || t.vertical ? o : (Y || []).join(`
 `);
         D.push(
@@ -3225,13 +3239,13 @@ class ya {
         return g && g(!0), { info: "0" };
       const u = s.getProfanities(), D = jA(l.toLowerCase());
       for (const p of D)
-        for (const m in u) {
-          const F = u[m].toLowerCase().replace(/\s/g, "");
+        for (const I in u) {
+          const F = u[I].toLowerCase().replace(/\s/g, "");
           if (p === F)
             return o(!0), { error: "Blocked profanity." };
         }
       return !A.data.vertical && !A.data.allowNewlines && (l.includes(`
-`) || l.includes("\r")) ? (o(!0), { error: "Cannot span multiple lines." }) : !A.data.curved && !Array.from(C.values()).every((m) => m) ? (o(!0), { error: "Does not fit." }) : (o(!1), { info: (A.data.maxLength - l.length).toString() });
+`) || l.includes("\r")) ? (o(!0), { error: "Cannot span multiple lines." }) : !A.data.curved && !Array.from(C.values()).every((I) => I) ? (o(!0), { error: "Does not fit." }) : (o(!1), { info: (A.data.maxLength - l.length).toString() });
     })();
     if (Q.error) {
       r(Q.error);
@@ -4701,8 +4715,8 @@ class Ra extends ae {
     const t = A.toSVG(2), a = A.getBoundingBox(), n = a.x2 - a.x1, s = A.toPathData(3), i = () => {
       const D = P("g"), p = P("defs");
       D.appendChild(p), p.appendChild($e(3, 7, 4, "shadow"));
-      const m = P("g");
-      D.appendChild(m), m.setAttribute("filter", "url(#shadow)"), m.innerHTML = t;
+      const I = P("g");
+      D.appendChild(I), I.setAttribute("filter", "url(#shadow)"), I.innerHTML = t;
       const F = P("g");
       D.appendChild(F), F.setAttribute("fill", "red"), F.setAttribute("stroke", "red"), F.setAttribute("stroke-width", "9"), F.innerHTML = t;
       const Y = P("g");
@@ -4720,8 +4734,8 @@ class Ra extends ae {
     Q.setAttribute("opacity", "0"), E.appendChild(Q);
     const h = P("g");
     E.appendChild(h);
-    const I = i();
-    h.appendChild(I);
+    const m = i();
+    h.appendChild(m);
     const u = ee(s);
     return se(h, u, l, d), _e(o.outerHTML);
   }
@@ -4743,17 +4757,17 @@ class Ga extends ae {
   }
   brandSvg(A, e, t) {
     const a = A.toSVG(2), n = A.getBoundingBox(), s = n.y2 - n.y1, i = n.x2 - n.x1, o = A.toPathData(3), r = () => {
-      const m = P("g"), F = P("g");
-      m.appendChild(F), F.setAttribute("stroke", "#5C1A0D"), F.setAttribute("stroke-width", "4"), F.setAttribute("transform", "translate(1,1)"), F.innerHTML = a;
+      const I = P("g"), F = P("g");
+      I.appendChild(F), F.setAttribute("stroke", "#5C1A0D"), F.setAttribute("stroke-width", "4"), F.setAttribute("transform", "translate(1,1)"), F.innerHTML = a;
       const Y = P("g");
-      m.appendChild(Y), Y.setAttribute("fill", "#FFE386"), Y.setAttribute("transform", "translate(1,1)"), Y.innerHTML = a;
+      I.appendChild(Y), Y.setAttribute("fill", "#FFE386"), Y.setAttribute("transform", "translate(1,1)"), Y.innerHTML = a;
       const y = P("g");
-      m.appendChild(y), y.setAttribute("fill", "white"), y.innerHTML = a;
-      const G = new ie(m);
+      I.appendChild(y), y.setAttribute("fill", "white"), y.innerHTML = a;
+      const G = new ie(I);
       return G.transform(([S, J]) => [S, J + ((i - S) * J) ** 2 / (i * 5e4)]), G.transform(([S, J]) => [
         S,
         J + (i / 3 - S) ** 2 / i * this.indicator(S < i / 3)
-      ]), G.transform(([S, J]) => [S - (s - J) * (i - S) / 800, J]), m;
+      ]), G.transform(([S, J]) => [S - (s - J) * (i - S) / 800, J]), I;
     }, [g, B, l] = qe(e);
     if (!g)
       return "";
@@ -4763,8 +4777,8 @@ class Ga extends ae {
     t ? (w = B * 0.25 * (1 + 0.1), C = l / 2 * (1 + 0.1), E = l * 0.22, Q = B * 0.32) : (w = B * 0.22 * (1 + 0.1), C = l * 0.8, E = l * 0.067, Q = B * 0.33);
     const h = P("g");
     g.appendChild(h), h.setAttribute("transform", `translate(${E} ${Q}) rotate(-10)`);
-    const I = ne(w, C);
-    I.setAttribute("opacity", "0"), h.appendChild(I);
+    const m = ne(w, C);
+    m.setAttribute("opacity", "0"), h.appendChild(m);
     const u = P("g");
     h.appendChild(u);
     const D = r();
@@ -4786,21 +4800,21 @@ class ka extends ae {
     return this.svgElement(A, e);
   }
   svgElement(A, e) {
-    const t = Ae(va), n = A !== "" ? ((I) => I.charAt(0).toUpperCase() + I.substr(1).toLowerCase())(A) : "", s = t.getPath(n, 0, 72, 72), i = s.toSVG(2), o = s.getBoundingBox(), r = o.x2 - o.x1, g = s.toPathData(3), B = () => {
-      const I = P("g");
-      I.classList.add("module-text-group");
+    const t = Ae(va), n = A !== "" ? ((m) => m.charAt(0).toUpperCase() + m.substr(1).toLowerCase())(A) : "", s = t.getPath(n, 0, 72, 72), i = s.toSVG(2), o = s.getBoundingBox(), r = o.x2 - o.x1, g = s.toPathData(3), B = () => {
+      const m = P("g");
+      m.classList.add("module-text-group");
       const u = P("defs");
-      I.appendChild(u), u.appendChild($e(0, 2, 2, "shadow"));
+      m.appendChild(u), u.appendChild($e(0, 2, 2, "shadow"));
       const D = P("path");
       D.setAttribute("d", g), D.setAttribute("stroke", "black"), D.setAttribute("stroke-width", "3"), u.appendChild(D);
       const p = P("g");
-      p.classList.add("module-layer0"), I.appendChild(p), p.setAttribute("filter", "url(#shadow)"), p.innerHTML = D.outerHTML;
-      const m = P("g");
-      m.classList.add("module-layer1"), I.appendChild(m), m.setAttribute("stroke-width", "3"), m.setAttribute("stroke", "rgb(45,41,38)"), m.setAttribute("fill", "rgb(45,41,38)"), m.setAttribute("transform", "translate(0.5,0)"), m.innerHTML = i;
+      p.classList.add("module-layer0"), m.appendChild(p), p.setAttribute("filter", "url(#shadow)"), p.innerHTML = D.outerHTML;
+      const I = P("g");
+      I.classList.add("module-layer1"), m.appendChild(I), I.setAttribute("stroke-width", "3"), I.setAttribute("stroke", "rgb(45,41,38)"), I.setAttribute("fill", "rgb(45,41,38)"), I.setAttribute("transform", "translate(0.5,0)"), I.innerHTML = i;
       const F = P("g");
-      F.classList.add("module-layer2"), I.appendChild(F), F.setAttribute("fill", "rgb(255,209,0)"), F.setAttribute("transform", "translate(1,-0.1)"), F.innerHTML = i;
+      F.classList.add("module-layer2"), m.appendChild(F), F.setAttribute("fill", "rgb(255,209,0)"), F.setAttribute("transform", "translate(1,-0.1)"), F.innerHTML = i;
       const Y = P("g");
-      return Y.classList.add("module-layer3"), I.appendChild(Y), Y.setAttribute("fill", "white"), Y.innerHTML = i, new ie(I).transform(([G, S]) => [G, S + (r / 2 - G) ** 2 / (r * 6)]), I;
+      return Y.classList.add("module-layer3"), m.appendChild(Y), Y.setAttribute("fill", "white"), Y.innerHTML = i, new ie(m).transform(([G, S]) => [G, S + (r / 2 - G) ** 2 / (r * 6)]), m;
     }, l = P("g");
     l.classList.add("module-root");
     const d = P("defs");
@@ -4830,7 +4844,7 @@ async function At(c) {
 }
 var NA = /* @__PURE__ */ ((c) => (c.Error = "Error", c.Warning = "Warning", c.Info = "Info", c))(NA || {});
 const Ja = 1e3;
-class ue extends Oe {
+class ue extends Te {
   constructor(A) {
     super(), this.createdAt = /* @__PURE__ */ new Date(), this.update = A;
   }
@@ -5244,11 +5258,11 @@ class ba {
     this.stepSelections = {
       ...this.stepSelections,
       [A]: { selectedVariants: e }
-    }, this.selectionCost = Object.values(this.stepSelections).reduce((p, m) => p + m.selectedVariants.map((F) => F.priceModifier || 0).reduce((F, Y) => F + Y, 0), 0), this.workflow.steps.forEach((p) => {
+    }, this.selectionCost = Object.values(this.stepSelections).reduce((p, I) => p + I.selectedVariants.map((F) => F.priceModifier || 0).reduce((F, Y) => F + Y, 0), 0), this.workflow.steps.forEach((p) => {
       tA(p, this.stepSelections) || (this.stepInitialised[p.stepName] = !1, delete this.stepMetadata[p.stepName], delete this.stepSelections[p.stepName], delete this.storage[p.stepName]);
     });
     const s = this.allScenes, i = eA(s, n), o = eA(s, this.stepSelections), r = i.map((p) => p.silentSteps).flat(), B = o.map((p) => p.silentSteps).flat().filter(
-      (p) => !r.some((m) => m.stepName === p.stepName)
+      (p) => !r.some((I) => I.stepName === p.stepName)
     );
     r.forEach((p) => {
       tA(p, this.stepSelections) || (this.stepInitialised[p.stepName] = !1);
@@ -5262,15 +5276,15 @@ class ba {
     const C = this.workflow.steps.find((p) => p.stepName === A);
     if ((C == null ? void 0 : C.type) === f.Frame) {
       const p = this.getStepSpecificServices(A);
-      (D = p == null ? void 0 : p.frameService) == null || D.setTargetElements(t.map((m) => m.id));
+      (D = p == null ? void 0 : p.frameService) == null || D.setTargetElements(t.map((I) => I.id));
     }
     const E = l.map((p) => new Z(p.id)), Q = new Be(this.constructSerializableWorkflow()), h = [...w, ...E, Q];
     h.length > 0 && this.commandContext.apply(new R(h), !0), await this.ensureStepsAreLoaded(), this.onElementsChange();
-    const I = this.getInvalidModelVariants(), u = this.modelContainer;
+    const m = this.getInvalidModelVariants(), u = this.modelContainer;
     if (u) {
-      const p = I.map(
-        (m) => u.applyModelVariant(
-          m,
+      const p = m.map(
+        (I) => u.applyModelVariant(
+          I,
           {
             contextService: this.getLayoutPreviewService()
           },
@@ -5635,7 +5649,7 @@ class La extends j {
     return this.step.data.colorPickerEnabled;
   }
 }
-class Ta extends j {
+class Oa extends j {
   constructor(A, e) {
     super(A, e);
   }
@@ -5648,7 +5662,7 @@ class Ta extends j {
     );
   }
 }
-class Oa extends j {
+class Ta extends j {
   constructor(A, e) {
     super(A, e);
   }
@@ -5959,9 +5973,9 @@ class wA {
       case f.Shape:
         return new ja(A, e);
       case f.Material:
-        return new Ta(A, e);
-      case f.Model:
         return new Oa(A, e);
+      case f.Model:
+        return new Ta(A, e);
       case f.Frame:
         return new Es(A, e);
       default:
@@ -6164,19 +6178,19 @@ const tt = M`
 }, nt = async (c, A, e, t, a, n, s, i, o, r) => {
   var F;
   await (async () => {
-    var O;
+    var T;
     if (r !== void 0)
       return r;
     await c.outstandingRequestsPromise();
     const y = (x.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(a.id), S = await N.getShadowGraphqlClient().query({
-      query: Te,
+      query: Oe,
       variables: { ids: [a.id] },
       fetchPolicy: "no-cache",
       errorPolicy: "all",
       context: {
         transactionOwnerId: y
       }
-    }), J = (O = S.data) == null ? void 0 : O.transactions[0].workflowState;
+    }), J = (T = S.data) == null ? void 0 : T.transactions[0].workflowState;
     return S.errors ? (S.errors.forEach((W) => {
       S.errors && console.log("Server Error:", W.message);
     }), null) : J ?? null;
@@ -6186,11 +6200,11 @@ const tt = M`
     let G = 0;
     if (Object.keys(n).length > 0)
       for (const S of Object.keys(n)) {
-        const J = n[S], O = A.steps.find((W) => W.stepName === S);
+        const J = n[S], T = A.steps.find((W) => W.stepName === S);
         for (let W = 0; W < J.selections.length; ++W) {
           const X = J.selections[W];
-          if (O && (!Y || O.option && (O.option.variants || []).length > 1 && !O.data.hideSelectionInCart && !O.data.hideSelectionsInCart)) {
-            const vA = O.stepTitle;
+          if (T && (!Y || T.option && (T.option.variants || []).length > 1 && !T.data.hideSelectionInCart && !T.data.hideSelectionsInCart)) {
+            const vA = T.stepTitle;
             y[vA] ? y[vA].push({
               id: X.id || "",
               name: X.name,
@@ -6207,7 +6221,7 @@ const tt = M`
         }
       }
     return [y, G];
-  }, [h] = await Q(!0), I = Object.fromEntries(
+  }, [h] = await Q(!0), m = Object.fromEntries(
     Object.keys(h).map((Y) => [Y, h[Y].map((y) => y.id)])
   ), [u] = await Q(!1), D = Object.fromEntries(
     Object.keys(u).map((Y) => [
@@ -6234,7 +6248,7 @@ const tt = M`
           y.push({ key: G, value: S });
         Y.metadata = y;
       }
-      if (I) {
+      if (m) {
         const y = [];
         for (const [G, S] of Object.entries(D))
           y.push({ key: G, ids: S });
@@ -6284,7 +6298,7 @@ const tt = M`
   const a = await (async () => {
     var r;
     const o = await N.getShadowGraphqlClient().query({
-      query: Te,
+      query: Oe,
       variables: { ids: c.map((g) => g.transaction.id) },
       fetchPolicy: "no-cache",
       errorPolicy: "all"
@@ -6479,12 +6493,12 @@ class EA {
     return this.workflowManager;
   }
   async createPreviewImage(A, e) {
-    var h, I;
+    var h, m;
     const t = this.workflowManager.getWorkflow(), a = (h = t == null ? void 0 : t.finalizeStepConfig) == null ? void 0 : h.lookAtAnimation;
     if (A) {
       if (!a)
         throw new Error("Failed to generate cart preview image!");
-      return await ((I = this.workflowManager.getPreviewService()) == null ? void 0 : I.renderSceneScreenshot(e ?? 512, a)) || "";
+      return await ((m = this.workflowManager.getPreviewService()) == null ? void 0 : m.renderSceneScreenshot(e ?? 512, a)) || "";
     }
     let n = 2048;
     e && e <= 2048 && (n = e);
@@ -6711,7 +6725,7 @@ const nn = [
   const o = i.toString(), g = `data:image/svg+xml;base64,${de(await Ge(o, { type: "svg" }))}`, B = (d) => {
     const w = c.find((E) => E.panelId === d.panelId);
     if (!w)
-      throw new T(d);
+      throw new O(d);
     const C = k();
     return new b(
       {
@@ -6747,7 +6761,7 @@ const nn = [
         (C = i == null ? void 0 : i.asset) == null ? void 0 : C.fileLink
       ), B = await ZA(g), l = k(), d = c.find((E) => E.panelId === r.panelId);
       if (!d)
-        throw new T(r);
+        throw new O(r);
       const w = $A(s, B, {
         scale: a.scale,
         left: a.x,
@@ -6790,7 +6804,7 @@ const nn = [
   const a = e.data, n = t.option;
   if (!n)
     return console.error(`No option for step ${t.stepName}.`), [];
-  const s = ((D = n.variants) == null ? void 0 : D.find((m) => m.id === a.illustrationVariantId)) || PA(n);
+  const s = ((D = n.variants) == null ? void 0 : D.find((I) => I.id === a.illustrationVariantId)) || PA(n);
   if (!s)
     return console.error(`No variant with ID: ${a.illustrationVariantId}`), [];
   if (!s.asset)
@@ -6804,32 +6818,32 @@ const nn = [
     return console.error("Failed to read SVG."), [];
   Ne(w);
   const C = {};
-  Yt(w, (m) => {
-    nn.includes(m.tagName) && !m.attributes.getNamedItem("fill") && m.setAttribute("fill", "#000000");
-    const F = m.attributes.getNamedItem("fill");
+  Yt(w, (I) => {
+    nn.includes(I.tagName) && !I.attributes.getNamedItem("fill") && I.setAttribute("fill", "#000000");
+    const F = I.attributes.getNamedItem("fill");
     if (F && F.value !== "none") {
       const y = F.value, S = `spiff-fill-${y.replace(/\W/g, "")}`;
-      m.classList.add(S), C[S] = { browserValue: y };
+      I.classList.add(S), C[S] = { browserValue: y };
     }
-    const Y = m.attributes.getNamedItem("stroke");
+    const Y = I.attributes.getNamedItem("stroke");
     if (Y && Y.value !== "none") {
       const y = Y.value, S = `spiff-stroke-${y.replace(/\W/g, "")}`;
-      m.classList.add(S), C[S] = { browserValue: y };
+      I.classList.add(S), C[S] = { browserValue: y };
     }
   });
   const Q = Pe().serializeToString(w), h = a.colors;
   if (h) {
-    for (const [m, F] of Object.entries(C))
+    for (const [I, F] of Object.entries(C))
       for (const Y of Object.keys(h))
         if (F.browserValue === Y) {
-          C[m] = { browserValue: h[Y] };
+          C[I] = { browserValue: h[Y] };
           break;
         }
   }
-  const I = (m) => {
-    const F = c.find((y) => y.panelId === m.panelId);
+  const m = (I) => {
+    const F = c.find((y) => y.panelId === I.panelId);
     if (!F)
-      throw new T(m);
+      throw new O(I);
     const Y = k();
     return new b(
       {
@@ -6837,28 +6851,28 @@ const nn = [
         id: Y,
         svg: Q,
         type: U.Illustration,
-        y: m.top,
-        x: m.left,
-        rotation: m.rotation,
-        width: m.width,
-        height: m.height,
-        layer: m.layer,
-        layerIndex: m.layerIndex,
-        immutable: m.immutable
+        y: I.top,
+        x: I.left,
+        rotation: I.rotation,
+        width: I.width,
+        height: I.height,
+        layer: I.layer,
+        layerIndex: I.layerIndex,
+        immutable: I.immutable
       },
       F
     );
   }, u = t.data.regions;
   try {
-    return u.map(I);
-  } catch (m) {
-    return console.error(m), [];
+    return u.map(m);
+  } catch (I) {
+    return console.error(I), [];
   }
 }, cn = async (c, A, e) => {
   const t = await At(e.data.module), a = A.data, n = (i, o) => {
     const r = c.find((B) => B.panelId === o.panelId);
     if (!r)
-      throw new T(o);
+      throw new O(o);
     const g = k();
     return new b(
       {
@@ -6901,7 +6915,7 @@ const nn = [
   const o = (l) => {
     const d = c.find((C) => C.panelId === l.panelId);
     if (!d)
-      throw new T(l);
+      throw new O(l);
     const w = k();
     return new b(
       {
@@ -6938,7 +6952,7 @@ const nn = [
   const i = (g) => {
     const B = c.find((E) => E.panelId === g.panelId);
     if (!B)
-      throw new T(g);
+      throw new O(g);
     const l = `
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -6993,7 +7007,7 @@ const nn = [
       o.forEach((r) => {
         const g = c.find((l) => l.panelId === r.panelId);
         if (!g)
-          throw new T(r);
+          throw new O(r);
         const B = {
           id: k(),
           src: n,
@@ -7026,7 +7040,7 @@ const nn = [
     o.forEach((B) => {
       const l = c.find((w) => w.panelId === B.panelId);
       if (!l)
-        throw new T(B);
+        throw new O(B);
       const d = {
         id: k(),
         src: n,
@@ -7052,11 +7066,11 @@ const nn = [
   return t;
 }, dn = async (c, A, e, t) => {
   const a = [], n = e.data, s = 30, i = (E) => E.vertical ? "center" : E.textAlign || "center", o = () => {
-    var I;
+    var m;
     const E = t.option;
     if (!E)
       return;
-    const Q = ((I = E.variants) == null ? void 0 : I.find((u) => u.id === n.fontVariantId)) || PA(E);
+    const Q = ((m = E.variants) == null ? void 0 : m.find((u) => u.id === n.fontVariantId)) || PA(E);
     if (!Q || !Q.asset)
       return;
     A[t.stepName] = { selectedVariants: [Q] };
@@ -7083,7 +7097,7 @@ const nn = [
     return h == null ? void 0 : h.color;
   }, w = n.color || await d(t.data), C = t.data.regions;
   for (const E of C) {
-    const Q = c.find((I) => I.panelId === E.panelId);
+    const Q = c.find((m) => m.panelId === E.panelId);
     if (!Q)
       continue;
     const h = {
@@ -7108,7 +7122,7 @@ const nn = [
       y: E.top
     };
     if (g) {
-      const [I, u] = uA(
+      const [m, u] = uA(
         t.data.size || s,
         g,
         E,
@@ -7128,7 +7142,7 @@ const nn = [
         new b(
           {
             ...h,
-            fontSize: I,
+            fontSize: m,
             text: h.curved ? h.text : (u || []).join(`
 `)
           },
@@ -7298,7 +7312,7 @@ class Qn {
     );
   }
 }
-class un extends Oe {
+class un extends Te {
   constructor(A, e, t, a, n, s, i) {
     super(), this.layoutId = A, this.ctx = e, this.nonPOTSupport = t, this.onRender = a, this.workflow = n, this.layouts = s, this.productOverlayImageUrl = i;
   }
@@ -7396,8 +7410,8 @@ const ys = (c, A) => {
             externalVariantId
             additionalExternalProductId
             additionalExternalVariantId
-            additionalProduct {
-                ...AdditionalProductFields
+            additionalIntegrationProduct {
+                ...AdditionalIntegrationProductFields
             }
             integration {
                 enabled
@@ -8007,7 +8021,7 @@ class Ln {
     throw new Error(`Unable to create global property state for bundle: ${this.bundleId}`);
   }
 }
-class Tn {
+class On {
   constructor(A) {
     this.setState(A);
   }
@@ -8078,7 +8092,7 @@ class Tn {
     };
   }
 }
-class On {
+class Tn {
   constructor(A) {
     this.collection = A;
   }
@@ -8201,7 +8215,7 @@ class zn {
         var i;
         return ((i = s.integration) == null ? void 0 : i.externalIntegrationId) === A.externalId;
       }
-    ) : t = this.getIntegrationByType(A.integrationType), !t || !t.additionalProduct ? e : e + (t.additionalProduct.basePrice || 0);
+    ) : t = this.getIntegrationByType(A.integrationType), !t || !t.additionalIntegrationProduct || !t.additionalIntegrationProduct.product ? e : e + (t.additionalIntegrationProduct.product.basePrice || 0);
   }
 }
 class me {
@@ -8281,7 +8295,7 @@ class jn {
 class Ie {
   constructor(A, e, t, a, n) {
     var s, i, o;
-    this.eventListeners = /* @__PURE__ */ new Map(), this.workflowExperiences = [], this.client = A, this.id = e.id, this.name = e.name || "", this.ownerId = n, this.metadata = new Map(((s = e.metadata) == null ? void 0 : s.map((r) => [r.key, r.value])) || []), this.productCollection = e.productCollection, this.bundleStateManager = new Tn(e.bundleStateData), this.globalConfiguration = (i = this.productCollection) == null ? void 0 : i.globalPropertyConfiguration, this.globalPropertyStateManager = new Ln(
+    this.eventListeners = /* @__PURE__ */ new Map(), this.workflowExperiences = [], this.client = A, this.id = e.id, this.name = e.name || "", this.ownerId = n, this.metadata = new Map(((s = e.metadata) == null ? void 0 : s.map((r) => [r.key, r.value])) || []), this.productCollection = e.productCollection, this.bundleStateManager = new On(e.bundleStateData), this.globalConfiguration = (i = this.productCollection) == null ? void 0 : i.globalPropertyConfiguration, this.globalPropertyStateManager = new Ln(
       this.id,
       this.ownerId,
       this.checkConditionalHandlesChanged.bind(this)
@@ -8343,7 +8357,7 @@ class Ie {
     return this.workflowExperiences.map((A) => A.getTotalPriceSubunits()).reduce((A, e) => A + e, 0);
   }
   getProductCollection() {
-    return this.productCollection ? new On(this.productCollection) : void 0;
+    return this.productCollection ? new Tn(this.productCollection) : void 0;
   }
   async addWorkflowExperience(A) {
     await this.appendWorkflowExperience(A), await this.injectExperienceIntoPreviewService(A);
@@ -9546,7 +9560,7 @@ const $n = M`
   previewRegion: A.previewRegion,
   useEditableArea: A.useEditableArea,
   editableArea: A.editableArea
-})), TA = (c, A) => {
+})), OA = (c, A) => {
   const e = c.workflowState, t = e ? JSON.parse(e) : void 0;
   return t ? Object.values(t.layouts).map((a) => a.layout) : Bs(A.panels);
 };
@@ -9645,14 +9659,14 @@ class ds {
       const E = i.get(A);
       if (E && await this.authenticateCustomerId(E)) {
         const h = ((d = (l = this.customer) == null ? void 0 : l.bundleStakeholders) == null ? void 0 : d.find(
-          (I) => {
+          (m) => {
             var u, D;
-            return (D = (u = I.bundle) == null ? void 0 : u.transactions) == null ? void 0 : D.some((p) => p.id === A);
+            return (D = (u = m.bundle) == null ? void 0 : u.transactions) == null ? void 0 : D.some((p) => p.id === A);
           }
         )) || ((C = (w = this.customer) == null ? void 0 : w.stakeholders) == null ? void 0 : C.find(
-          (I) => {
+          (m) => {
             var u;
-            return ((u = I.transaction) == null ? void 0 : u.id) === A;
+            return ((u = m.transaction) == null ? void 0 : u.id) === A;
           }
         ));
         if (h)
@@ -9875,10 +9889,10 @@ class ds {
       var Q, h;
       const E = N.getShadowGraphqlClient();
       if (a.type === "transaction") {
-        const { transactionId: I, readOnly: u } = a, D = await E.query({
+        const { transactionId: m, readOnly: u } = a, D = await E.query({
           query: BA,
           variables: {
-            ids: [I]
+            ids: [m]
           },
           errorPolicy: "all",
           fetchPolicy: "no-cache"
@@ -9888,20 +9902,20 @@ class ds {
         const p = (h = D.data) == null ? void 0 : h.transactions[0];
         if (!p.workflowId)
           throw new H("Existing transaction has no workflow ID.");
-        const m = await QA(p.workflowId);
+        const I = await QA(p.workflowId);
         if (!p.product)
           throw new H("Failed to load transaction, product not available.");
-        return { transaction: p, workflow: m, readOnly: u };
+        return { transaction: p, workflow: I, readOnly: u };
       }
       if (a.type === "integration" || a.type === "external") {
-        const I = async () => {
-          const m = a.type === "integration" ? { integrationProductId: a.integrationProductId } : {
+        const m = async () => {
+          const I = a.type === "integration" ? { integrationProductId: a.integrationProductId } : {
             externalIntegrationId: a.externalIntegrationId,
             externalProductId: a.externalProductId
           }, F = await E.mutate({
             mutation: he,
             variables: {
-              ...m,
+              ...I,
               workflowId: a.workflowId,
               claim: !0
             },
@@ -9916,7 +9930,7 @@ class ds {
           if (!Y.product)
             throw new H("Failed to create transaction, product not available.");
           return Y;
-        }, u = QA(a.workflowId, a == null ? void 0 : a.graphql), [D, p] = await Promise.all([I(), u]);
+        }, u = QA(a.workflowId, a == null ? void 0 : a.graphql), [D, p] = await Promise.all([m(), u]);
         return { transaction: D, workflow: p };
       }
       throw new H("No workflow ID provided.");
@@ -9943,7 +9957,7 @@ class ds {
       const E = JSON.parse(a.workflowState);
       r.layouts = Object.values(E.layouts).map((Q) => Q.layout), await _(E), await AA(E), r.reloadedState = E;
     } else
-      r.layouts = TA(
+      r.layouts = OA(
         r.transaction,
         r.workflow
       );
@@ -9974,30 +9988,30 @@ class ds {
   async getWorkflowExperiences(A, e) {
     if (A.length === 0)
       throw new H("No options provided!");
-    const t = N.getShadowGraphqlClient(), a = A.map((h, I) => ({ option: h, index: I })), n = a.filter((h) => h.option.type === "transaction"), s = a.filter(
+    const t = N.getShadowGraphqlClient(), a = A.map((h, m) => ({ option: h, index: m })), n = a.filter((h) => h.option.type === "transaction"), s = a.filter(
       (h) => h.option.type === "integration" || h.option.type === "external"
     ), i = async () => {
       var D, p;
       if (n.length === 0)
         return [];
-      const h = n.map((m) => m.option.transactionId), I = await t.query({
+      const h = n.map((I) => I.option.transactionId), m = await t.query({
         query: BA,
         variables: {
           ids: h
         },
         errorPolicy: "all",
         fetchPolicy: "no-cache"
-      }), u = I.data.transactions;
+      }), u = m.data.transactions;
       if (u.length !== n.length) {
-        const m = ((p = (D = I.errors) == null ? void 0 : D[0]) == null ? void 0 : p.message) || "Unknown error";
-        throw new H(`Not all transactions were found: ${m}`);
+        const I = ((p = (D = m.errors) == null ? void 0 : D[0]) == null ? void 0 : p.message) || "Unknown error";
+        throw new H(`Not all transactions were found: ${I}`);
       }
-      return u.map((m, F) => {
+      return u.map((I, F) => {
         var Y;
         return {
-          transaction: m,
-          workflowId: m.workflowId,
-          readOnly: ((Y = n.find((y) => y.option.transactionId === m.id)) == null ? void 0 : Y.option.readOnly) ?? !1,
+          transaction: I,
+          workflowId: I.workflowId,
+          readOnly: ((Y = n.find((y) => y.option.transactionId === I.id)) == null ? void 0 : Y.option.readOnly) ?? !1,
           index: n[F].index
         };
       });
@@ -10008,51 +10022,51 @@ class ds {
       const h = await t.mutate({
         mutation: ta,
         variables: {
-          inputs: s.map((m) => ({
-            integrationProductId: m.option.type === "integration" ? m.option.integrationProductId : void 0,
-            externalIntegrationId: m.option.type === "external" ? m.option.externalIntegrationId : void 0,
-            externalProductId: m.option.type === "external" ? m.option.externalProductId : void 0,
-            workflowId: m.option.workflowId,
+          inputs: s.map((I) => ({
+            integrationProductId: I.option.type === "integration" ? I.option.integrationProductId : void 0,
+            externalIntegrationId: I.option.type === "external" ? I.option.externalIntegrationId : void 0,
+            externalProductId: I.option.type === "external" ? I.option.externalProductId : void 0,
+            workflowId: I.option.workflowId,
             claim: !0
           }))
         },
         errorPolicy: "all",
         fetchPolicy: "no-cache"
-      }), I = (u = h.data) == null ? void 0 : u.transactionCreateMany;
-      if (!I || I.length === 0) {
-        const m = ((p = (D = h.errors) == null ? void 0 : D[0]) == null ? void 0 : p.message) || "Unknown error";
-        throw new H(`Failed to create transactions: ${m}`);
+      }), m = (u = h.data) == null ? void 0 : u.transactionCreateMany;
+      if (!m || m.length === 0) {
+        const I = ((p = (D = h.errors) == null ? void 0 : D[0]) == null ? void 0 : p.message) || "Unknown error";
+        throw new H(`Failed to create transactions: ${I}`);
       }
-      return I.map((m, F) => ({
-        transaction: m,
-        workflowId: m.workflowId,
+      return m.map((I, F) => ({
+        transaction: I,
+        workflowId: I.workflowId,
         readOnly: !1,
         index: s[F].index
       }));
     }, r = (await Promise.all([i(), o()])).flat(), g = [...new Set(r.map((h) => h.workflowId))], B = await rt(g, e), l = new Map(B.map((h) => [h.id, h])), d = x.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), w = r.map(async (h) => {
       var G;
-      const { transaction: I, workflowId: u, readOnly: D, index: p } = h, m = l.get(u), F = A[p];
-      !d.get(I.id) && I.transactionOwnerId && d.set(I.id, I.transactionOwnerId);
-      const Y = d.get(I.id) || void 0, y = {
-        product: I.product,
-        transaction: I,
+      const { transaction: m, workflowId: u, readOnly: D, index: p } = h, I = l.get(u), F = A[p];
+      !d.get(m.id) && m.transactionOwnerId && d.set(m.id, m.transactionOwnerId);
+      const Y = d.get(m.id) || void 0, y = {
+        product: m.product,
+        transaction: m,
         layouts: [],
         singleVariantsRenderable: (G = F == null ? void 0 : F.workflowConfiguration) == null ? void 0 : G.singleVariantsRenderable,
         stateMutationFunc: D ? async () => {
           throw new v("State mutation is forbidden in read only mode!");
         } : async (S) => this.updateTransactionState({ ...S, context: { transactionOwnerId: Y } }),
         readOnly: D,
-        workflow: m,
+        workflow: I,
         isReloadedTransaction: F.type === "transaction"
       };
-      if (F.type === "transaction" && I.workflowState) {
-        const S = JSON.parse(I.workflowState);
+      if (F.type === "transaction" && m.workflowState) {
+        const S = JSON.parse(m.workflowState);
         y.layouts = Object.values(S.layouts).map((J) => J.layout), await _(S), await AA(S), y.reloadedState = S;
       } else if (!D && F.workflowState) {
         const S = JSON.parse(F.workflowState);
         y.layouts = Object.values(S.layouts).map((J) => J.layout), await _(S), await AA(S), y.reloadedState = S;
       } else
-        y.layouts = TA(
+        y.layouts = OA(
           y.transaction,
           y.workflow
         );
@@ -10061,8 +10075,8 @@ class ds {
       ), this.initialized = !0, this.experienceOptions = y, { experienceOptions: y, index: p, options: F };
     });
     x.setMap("transactionOwnerIds", d);
-    const Q = (await Promise.all(w)).sort((h, I) => h.index - I.index).map(async (h) => {
-      const { experienceOptions: I, options: u } = h, D = new EA(this, I);
+    const Q = (await Promise.all(w)).sort((h, m) => h.index - m.index).map(async (h) => {
+      const { experienceOptions: m, options: u } = h, D = new EA(this, m);
       return await D.getWorkflowManager().getInitializationPromise(), u.type !== "transaction" && this.customer && await D.attachCustomerDetails({ email: this.customer.emailAddress }), D;
     });
     return await Promise.all(Q);
@@ -10213,7 +10227,7 @@ class ds {
         const d = JSON.parse(e);
         this.experienceOptions.layouts = Object.values(d.layouts).map((w) => w.layout), await _(d), await AA(d), this.experienceOptions.reloadedState = d;
       } else
-        this.experienceOptions.layouts = TA(
+        this.experienceOptions.layouts = OA(
           this.experienceOptions.transaction,
           this.experienceOptions.workflow
         );
@@ -10439,8 +10453,8 @@ export {
   Xn as FlowExecutionResult,
   Wn as FlowService,
   Ls as FontAlignmentCommand,
-  Ts as FontColorCommand,
-  Os as FontSizeCommand,
+  Os as FontColorCommand,
+  Ts as FontSizeCommand,
   zs as FontSourceCommand,
   la as FrameService,
   ws as FrameStep,
@@ -10453,11 +10467,11 @@ export {
   $t as IntegrationType,
   js as LayoutElementFactory,
   Vs as LayoutElementType,
-  T as LayoutNotFoundError,
-  Ta as MaterialStepHandle,
+  O as LayoutNotFoundError,
+  Oa as MaterialStepHandle,
   MA as MisconfigurationError,
   Ss as MockWorkflowManager,
-  Oa as ModelStepHandle,
+  Ta as ModelStepHandle,
   Ws as MoveCommand,
   ot as ObjectInput,
   Zn as ObjectInputType,
@@ -10465,12 +10479,12 @@ export {
   sA as ParseError,
   za as PictureStepHandle,
   _t as ProductCameraRig,
-  On as ProductCollection,
+  Tn as ProductCollection,
   me as ProductWorkflow,
   rA as PromiseCache,
   ze as PromiseQueue,
   Ka as QuestionStepHandle,
-  Oe as QueueablePromise,
+  Te as QueueablePromise,
   Xs as ResizeCommand,
   oA as ResourceNotFoundError,
   qs as RotateCommand,