@spiffcommerce/core 33.13.2 → 33.13.3

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { createHttpLink as Ii, ApolloClient as Bi, InMemoryCache as Pi, from as Di, gql as C } from "@apollo/client/core";
-import { setContext as Fi } from "@apollo/client/link/context";
-import { onError as xi } from "@apollo/client/link/error";
+import { createHttpLink as Ii, ApolloClient as Bi, InMemoryCache as Pi, from as xi, gql as C } from "@apollo/client/core";
+import { setContext as Di } from "@apollo/client/link/context";
+import { onError as Fi } from "@apollo/client/link/error";
 import { renderToStaticMarkup as ki } from "preact-render-to-string";
 import { removeTypenameFromVariables as Mi } from "@apollo/client/link/remove-typename";
 import { orientation as Ti } from "exifr/dist/mini.umd.cjs";
@@ -9,7 +9,7 @@ import Ni from "fuse.js";
 import { Pith as va } from "pith";
 import It from "lodash.clonedeep";
 import Jt from "lodash.isequal";
-import { jsx as P, jsxs as dt, Fragment as qt } from "preact/jsx-runtime";
+import { jsx as B, jsxs as dt, Fragment as qt } from "preact/jsx-runtime";
 import { parse as la } from "opentype.js";
 import Qi from "handlebars";
 import { dataUriToBuffer as Ri } from "data-uri-to-buffer";
@@ -24,7 +24,7 @@ import vn from "lodash.debounce";
 import "fs";
 import "path";
 import Vi from "lodash.omit";
-var Ie = /* @__PURE__ */ ((n) => (n.Data = "Data", n.Font = "Font", n.Frame = "Frame", n.Illustration = "Illustration", n.Image = "Image", n.Model = "Model", n.Material = "Material", n.Color = "Color", n.QuestionnaireCollateral = "QuestionnaireCollateral", n.RequestCollateral = "RequestCollateral", n.SignupCollateral = "SignupCollateral", n.Video = "Video", n.ColorProfile = "ColorProfile", n.Environment = "Environment", n))(Ie || {}), En = /* @__PURE__ */ ((n) => (n.AND = "AND", n.OR = "OR", n))(En || {}), G = /* @__PURE__ */ ((n) => (n.FileUpload = "FileUpload", n.Option = "Option", n.ColorOption = "ColorOption", n.Text = "Text", n))(G || {}), v = /* @__PURE__ */ ((n) => (n.Information = "Information", n.Bulk = "Bulk", n.DigitalContent = "DigitalContent", n.Finish = "Finish", n.Frame = "Frame", n.Illustration = "Illustration", n.Introduction = "Introduction", n.Material = "Material", n.Model = "Model", n.Module = "Module", n.Picture = "Picture", n.Photo = "Photo", n.ProductOverlay = "ProductOverlay", n.Question = "Question", n.Shape = "Shape", n.SilentIllustration = "SilentIllustration", n.Text = "Text", n))(v || {}), zi = /* @__PURE__ */ ((n) => (n.Color = "Color", n.Colors = "Colors", n.Selection = "Selection", n.Selections = "Selections", n.Text = "Text", n.Upload = "Upload", n))(zi || {}), Kt = /* @__PURE__ */ ((n) => (n.ThreeD = "ThreeD", n.FreeDesign = "FreeDesign", n.Print = "Print", n))(Kt || {}), F = /* @__PURE__ */ ((n) => (n.Frame = "frame", n.Group = "group", n.Image = "image", n.Pattern = "pattern", n.Illustration = "illustration", n.Textbox = "textbox", n))(F || {}), Gi = /* @__PURE__ */ ((n) => (n.Default = "Default", n.FirstTransaction = "FirstTransaction", n.OneToOne = "OneToOne", n))(Gi || {}), bn = /* @__PURE__ */ ((n) => (n.Pending = "Pending", n.Failed = "Failed", n.Validated = "Validated", n.Overridden = "Overridden", n))(bn || {}), Wi = /* @__PURE__ */ ((n) => (n.Hyperlink = "Hyperlink", n.Edit = "Edit", n.Approve = "Approve", n))(Wi || {}), qi = /* @__PURE__ */ ((n) => (n.Hub = "Hub", n.Shopify = "Shopify", n))(qi || {}), Ea = /* @__PURE__ */ ((n) => (n.BackgroundRemover = "BackgroundRemover", n.ConversionAccelerator = "Conversion Accelerator", n.ProcessBuilder = "ProcessBuilder", n))(Ea || {}), Hi = /* @__PURE__ */ ((n) => (n[n.Orbit = 0] = "Orbit", n[n.Pan = 1] = "Pan", n))(Hi || {}), Be = /* @__PURE__ */ ((n) => (n.Owner = "Owner", n.Approver = "Approver", n.Editor = "Editor", n.Viewer = "Viewer", n))(Be || {}), Tt = /* @__PURE__ */ ((n) => (n.Autosize = "Autosize", n.Traditional = "Traditional", n))(Tt || {}), Y = /* @__PURE__ */ ((n) => (n[n.North = 0] = "North", n[n.Northeast = 1] = "Northeast", n[n.East = 2] = "East", n[n.Southeast = 3] = "Southeast", n[n.South = 4] = "South", n[n.Southwest = 5] = "Southwest", n[n.West = 6] = "West", n[n.Northwest = 7] = "Northwest", n))(Y || {}), ji = /* @__PURE__ */ ((n) => (n.Pixel = "px", n.Millimeter = "mm", n.Centimeter = "cm", n))(ji || {});
+var Ie = /* @__PURE__ */ ((n) => (n.Data = "Data", n.Font = "Font", n.Frame = "Frame", n.Illustration = "Illustration", n.Image = "Image", n.Model = "Model", n.Material = "Material", n.Color = "Color", n.QuestionnaireCollateral = "QuestionnaireCollateral", n.RequestCollateral = "RequestCollateral", n.SignupCollateral = "SignupCollateral", n.Video = "Video", n.ColorProfile = "ColorProfile", n.Environment = "Environment", n))(Ie || {}), En = /* @__PURE__ */ ((n) => (n.AND = "AND", n.OR = "OR", n))(En || {}), G = /* @__PURE__ */ ((n) => (n.FileUpload = "FileUpload", n.Option = "Option", n.ColorOption = "ColorOption", n.Text = "Text", n))(G || {}), E = /* @__PURE__ */ ((n) => (n.Information = "Information", n.Bulk = "Bulk", n.DigitalContent = "DigitalContent", n.Finish = "Finish", n.Frame = "Frame", n.Illustration = "Illustration", n.Introduction = "Introduction", n.Material = "Material", n.Model = "Model", n.Module = "Module", n.Picture = "Picture", n.Photo = "Photo", n.ProductOverlay = "ProductOverlay", n.Question = "Question", n.Shape = "Shape", n.SilentIllustration = "SilentIllustration", n.Text = "Text", n))(E || {}), zi = /* @__PURE__ */ ((n) => (n.Color = "Color", n.Colors = "Colors", n.Selection = "Selection", n.Selections = "Selections", n.Text = "Text", n.Upload = "Upload", n))(zi || {}), Kt = /* @__PURE__ */ ((n) => (n.ThreeD = "ThreeD", n.FreeDesign = "FreeDesign", n.Print = "Print", n))(Kt || {}), D = /* @__PURE__ */ ((n) => (n.Frame = "frame", n.Group = "group", n.Image = "image", n.Pattern = "pattern", n.Illustration = "illustration", n.Textbox = "textbox", n))(D || {}), Gi = /* @__PURE__ */ ((n) => (n.Default = "Default", n.FirstTransaction = "FirstTransaction", n.OneToOne = "OneToOne", n))(Gi || {}), bn = /* @__PURE__ */ ((n) => (n.Pending = "Pending", n.Failed = "Failed", n.Validated = "Validated", n.Overridden = "Overridden", n))(bn || {}), Wi = /* @__PURE__ */ ((n) => (n.Hyperlink = "Hyperlink", n.Edit = "Edit", n.Approve = "Approve", n))(Wi || {}), qi = /* @__PURE__ */ ((n) => (n.Hub = "Hub", n.Shopify = "Shopify", n))(qi || {}), Ea = /* @__PURE__ */ ((n) => (n.BackgroundRemover = "BackgroundRemover", n.ConversionAccelerator = "Conversion Accelerator", n.ProcessBuilder = "ProcessBuilder", n))(Ea || {}), Hi = /* @__PURE__ */ ((n) => (n[n.Orbit = 0] = "Orbit", n[n.Pan = 1] = "Pan", n))(Hi || {}), Be = /* @__PURE__ */ ((n) => (n.Owner = "Owner", n.Approver = "Approver", n.Editor = "Editor", n.Viewer = "Viewer", n))(Be || {}), Tt = /* @__PURE__ */ ((n) => (n.Autosize = "Autosize", n.Traditional = "Traditional", n))(Tt || {}), Y = /* @__PURE__ */ ((n) => (n[n.North = 0] = "North", n[n.Northeast = 1] = "Northeast", n[n.East = 2] = "East", n[n.Southeast = 3] = "Southeast", n[n.South = 4] = "South", n[n.Southwest = 5] = "Southwest", n[n.West = 6] = "West", n[n.Northwest = 7] = "Northwest", n))(Y || {}), ji = /* @__PURE__ */ ((n) => (n.Pixel = "px", n.Millimeter = "mm", n.Centimeter = "cm", n))(ji || {});
 class In extends Error {
   constructor(t) {
     super(t), this.name = this.constructor.name;
@@ -55,7 +55,7 @@ class _t extends ae {
     super(`Resource not found for asset: ${t.name}`), this.asset = t;
   }
 }
-class De extends ae {
+class xe extends ae {
   constructor(t, e) {
     super(`Workflow Misconfiguration: ${t.stepName} - ${e}`), this.step = t;
   }
@@ -70,12 +70,12 @@ class R extends Qe {
     super(`Unhandled Behavior Encountered: ${t}`);
   }
 }
-class Ft extends Qe {
+class Dt extends Qe {
   constructor(t) {
     super(`Parsing Error: ${t}`);
   }
 }
-class gt extends Qe {
+class mt extends Qe {
   constructor(t) {
     super(`Client Error: ${t}`);
   }
@@ -217,7 +217,7 @@ const Bn = /* @__PURE__ */ new Map(), Wa = /* @__PURE__ */ new Map(), qa = /* @_
   t ? _i(n).then(e).catch(a) : it(n).then((i) => {
     i.text().then(e).catch(a);
   }).catch(a);
-}), Dn = (n) => ki(n), je = /* @__PURE__ */ new Map(), tr = async (n, t) => {
+}), xn = (n) => ki(n), je = /* @__PURE__ */ new Map(), tr = async (n, t) => {
   if (Nt([typeof FontFace])) {
     if (je.has(t))
       return je.get(t);
@@ -269,7 +269,7 @@ const Bn = /* @__PURE__ */ new Map(), Wa = /* @__PURE__ */ new Map(), qa = /* @_
 }, ar = async (n) => {
   const t = $e(n), e = new Uint8Array(n), a = er(e), i = btoa(a);
   return `data:${t};base64,${i}`;
-}, ba = (n) => `data:image/svg+xml;base64,${btoa(n)}`, Fn = (n) => {
+}, ba = (n) => `data:image/svg+xml;base64,${btoa(n)}`, Dn = (n) => {
   const t = n.replace(/\r?\n/g, ""), e = t.indexOf(",");
   if (e === -1 || e <= 4)
     throw new TypeError("malformed data: URI");
@@ -292,9 +292,9 @@ let ir, Ia;
 const rr = (n) => {
   Ia = n;
 }, or = () => Ia;
-let xn;
+let Fn;
 const sr = (n) => {
-  xn = n;
+  Fn = n;
 }, lr = () => new Promise((n) => {
   const t = ft.getHubUrl(), e = (a) => {
     a.origin === t && (window.removeEventListener("message", e), n(a.data));
@@ -304,7 +304,7 @@ const sr = (n) => {
   const n = {
     applicationKey: Ia,
     customerToken: ir,
-    bearer: xn
+    bearer: Fn
   };
   return typeof window < "u" && (window.location.href.includes("/workflows/product/") || window.location.href.includes("hub=true")) ? { ...await lr(), ...n } : n;
 };
@@ -329,7 +329,7 @@ class Ar {
     const t = Ii({
       uri: `${ft.getServerUrl()}/graphql`,
       fetch: dr
-    }), e = Fi(async (r, o) => {
+    }), e = Di(async (r, o) => {
       const { headers: s } = o, l = s || {}, c = await cr();
       let d = o.bearer ?? c.bearer;
       if (this.spiffClient)
@@ -337,28 +337,28 @@ class Ar {
           d = await this.spiffClient.loggedInBearerToken();
         } catch {
         }
-      const A = o.partnerId ?? c.partnerId, u = o.activeIntegration ?? c.activeIntegration, h = o.transactionOwnerId, m = o.customerToken ?? c.customerToken, p = o.applicationKey ?? c.applicationKey, g = o.bundleOwnerId;
+      const A = o.partnerId ?? c.partnerId, u = o.activeIntegration ?? c.activeIntegration, h = o.transactionOwnerId, g = o.customerToken ?? c.customerToken, m = o.applicationKey ?? c.applicationKey, p = o.bundleOwnerId;
       try {
         if (window && window.__SENTRY__) {
           const f = window.__SENTRY__.hub;
           if (f) {
             const S = f.traceHeaders();
-            Object.entries(S).forEach(([w, I]) => {
-              l[w] = I;
+            Object.entries(S).forEach(([w, x]) => {
+              l[w] = x;
             });
           }
         }
       } catch {
       }
-      return d && (l.Authorization = `Bearer ${d}`), A && (l.partnerId = A), u && (l.activeIntegration = u), h && (l.transactionOwnerId = h), m && (l.customerToken = m), p && (l["X-Application-Key"] = p), g && (l.bundleOwnerId = g), l["Allow-Moonlight-Redirect"] = "true", {
+      return d && (l.Authorization = `Bearer ${d}`), A && (l.partnerId = A), u && (l.activeIntegration = u), h && (l.transactionOwnerId = h), g && (l.customerToken = g), m && (l["X-Application-Key"] = m), p && (l.bundleOwnerId = p), l["Allow-Moonlight-Redirect"] = "true", {
         headers: l
       };
-    }), a = xi(({ operation: r, graphQLErrors: o, networkError: s }) => {
+    }), a = Fi(({ operation: r, graphQLErrors: o, networkError: s }) => {
       const l = o || [], c = r.getContext();
       s && !c?.fetchOptions?.signal?.aborted && console.log("GraphQL Network error"), l.forEach(() => console.log("GraphQL Error: " + r.operationName));
     }), i = Mi();
     return new Bi({
-      link: Di([i, a, e, t]),
+      link: xi([i, a, e, t]),
       cache: new Pi(),
       name: "Core"
     });
@@ -421,11 +421,11 @@ const ur = (n) => new Promise((t) => {
     return !Ae;
   const t = await ie("data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/xABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAAAAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQvoP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXwH/9k=");
   return Ae = t.width === 2 && t.height === 3, !Ae;
-}, mr = (n) => {
+}, gr = (n) => {
   const e = n.naturalWidth / n.naturalHeight;
   return n.naturalHeight <= 8192 && n.naturalWidth <= 8192 ? [n.naturalWidth, n.naturalHeight] : n.naturalHeight > n.naturalWidth ? [e * 8192, 8192] : [8192, 8192 / e];
-}, gr = async (n) => {
-  const t = await ar(n), e = await ie(t), [a, i] = mr(e);
+}, mr = async (n) => {
+  const t = await ar(n), e = await ie(t), [a, i] = gr(e);
   if (!await hr()) {
     const A = Ct(a, i);
     return A.getContext("2d")?.drawImage(e, 0, 0, a, i), A;
@@ -456,7 +456,7 @@ const ur = (n) => new Promise((t) => {
   }
   return d.drawImage(e, 0, 0, s, l), c;
 }, Ue = async (n) => {
-  const t = await gr(n);
+  const t = await mr(n);
   return $e(n) === "image/jpeg" ? {
     dataUrl: t.toDataURL("image/jpeg", 1),
     height: t.height,
@@ -3317,12 +3317,12 @@ const ue = (n) => {
       }
     });
   });
-}, Rn = (n) => Pt().serializeToString(n), Da = (n, t, e, a, i) => {
+}, Rn = (n) => Pt().serializeToString(n), xa = (n, t, e, a, i) => {
   const r = Nn(n);
   if (!r)
     throw new Error("Failed to read SVG.");
   return Er(r, t, e), Qn(r, a, i), Rn(r);
-}, Fa = (n, t, e) => {
+}, Da = (n, t, e) => {
   const a = Nn(n);
   if (!a)
     throw new Error("Failed to read SVG.");
@@ -3410,7 +3410,7 @@ const ue = (n) => {
             ...AssetFields
         }
     }
-`, xa = C`
+`, Fa = C`
     fragment MaterialFields on Material {
         id
         name
@@ -3458,13 +3458,13 @@ const ue = (n) => {
         }
     }
 `, Pr = C`
-    ${xa}
+    ${Fa}
     query GetMaterials($ids: [String]) {
         materials(id: $ids) {
             ...MaterialFields
         }
     }
-`, Dr = C`
+`, xr = C`
     mutation CreateAsset($name: String!, $type: String!, $mimeType: String!, $anonymous: Boolean, $temporary: Boolean) {
         assetCreate(name: $name, type: $type, mimeType: $mimeType, anonymous: $anonymous, temporary: $temporary) {
             uploadUrl
@@ -3478,28 +3478,28 @@ const ue = (n) => {
             }
         }
     }
-`, Fr = C`
+`, Dr = C`
     ${re(!1)}
     mutation RemoveBackgroundFromAsset($key: String!) {
         assetRemoveBackground(key: $key) {
             ...AssetFields
         }
     }
-`, Fe = async (n) => (await y.getShadowGraphqlClient().query({
+`, De = async (n) => (await y.getShadowGraphqlClient().query({
   query: Br,
   errorPolicy: "all",
   fetchPolicy: "no-cache",
   variables: {
     keys: n
   }
-})).data.assets, xr = async (n) => (await y.getShadowGraphqlClient().query({
+})).data.assets, Fr = async (n) => (await y.getShadowGraphqlClient().query({
   query: Pr,
   errorPolicy: "all",
   variables: {
     ids: n
   }
 })).data.materials, kr = async (n, t, e, a, i) => (await y.getShadowGraphqlClient().mutate({
-  mutation: Dr,
+  mutation: xr,
   errorPolicy: "all",
   fetchPolicy: "no-cache",
   variables: {
@@ -3534,14 +3534,14 @@ class Mr {
       if (!i) throw new R("Failed to get asset from cache!");
       return i;
     }
-    const a = (async () => (await Fe([t]))[0])();
+    const a = (async () => (await De([t]))[0])();
     return this.cache.set(t, a), a;
   }
   /**
    * Retrieves the asset from the server, bypassing cache (but still writing the result to cache)
    */
   async getFromServer(t) {
-    const a = (async () => (await Fe([t]))[0])();
+    const a = (async () => (await De([t]))[0])();
     return this.cache.set(t, a), a;
   }
   keyFromURL(t) {
@@ -3574,7 +3574,7 @@ class Mr {
   async getMaterialLocalOrFromServer(t) {
     if (this.materialCache.has(t))
       return this.materialCache.get(t);
-    const a = (async () => (await xr([t]))[0])();
+    const a = (async () => (await Fr([t]))[0])();
     return this.materialCache.set(t, a), a;
   }
   /**
@@ -3613,7 +3613,7 @@ class Mr {
     }
     const i = (async () => {
       const r = await y.getShadowGraphqlClient().mutate({
-        mutation: Fr,
+        mutation: Dr,
         fetchPolicy: "no-cache",
         errorPolicy: "all",
         variables: {
@@ -3647,7 +3647,7 @@ class Mr {
   async postProcessFileUpload(t, e) {
     if (e === "image/svg+xml") {
       const a = await t.blob.text(), o = new window.DOMParser().parseFromString(a, "image/svg+xml").documentElement;
-      if (!o) throw new Ft("Failed to read SVG.");
+      if (!o) throw new Dt("Failed to read SVG.");
       vr(o);
       const l = Pt().serializeToString(o);
       return {
@@ -3842,7 +3842,7 @@ const Zt = new Tr(), On = C`
     }
 `, Nr = C`
     ${re(!1)}
-    ${xa}
+    ${Fa}
     ${On}
     query GetOptions($ids: [String]!) {
         options(ids: $ids) {
@@ -4529,7 +4529,7 @@ const J = new $r(), $n = C`
     }
 `, ao = (n) => C`
         ${re(n)}
-        ${xa}
+        ${Fa}
         ${On}
         ${Xr}
         ${Zr}
@@ -5094,14 +5094,14 @@ const J = new $r(), $n = C`
             timestamp
         }
     }
-`, Ut = [v.SilentIllustration, v.ProductOverlay], uo = async (n) => {
+`, Ut = [E.SilentIllustration, E.ProductOverlay], uo = async (n) => {
   const t = [];
   n.introduction && t.push({
     name: "Introduction",
     title: n.name,
     renderableSteps: [
       {
-        type: v.Introduction,
+        type: E.Introduction,
         stepName: "Introduction",
         stepTitle: n.name,
         helpText: n.introduction,
@@ -5136,7 +5136,7 @@ const J = new $r(), $n = C`
     title: e,
     renderableSteps: [
       {
-        type: v.Finish,
+        type: E.Finish,
         stepName: "Finish",
         stepTitle: e,
         helpText: "",
@@ -5158,7 +5158,7 @@ const J = new $r(), $n = C`
     );
   }
   return !1;
-}), mo = (n, t) => {
+}), go = (n, t) => {
   const e = {
     name: n.name,
     title: n.title,
@@ -5166,12 +5166,12 @@ const J = new $r(), $n = C`
     silentSteps: n.silentSteps.filter((a) => bt(a, t))
   };
   return e.silentSteps.length === 0 && e.renderableSteps.length === 0 ? null : e;
-}, vt = (n, t) => n.map((e) => mo(e, t)).filter((e) => e !== null), go = async (n, t, e = !1) => {
+}, vt = (n, t) => n.map((e) => go(e, t)).filter((e) => e !== null), mo = async (n, t, e = !1) => {
   const a = vt(n, t), i = [];
   for (const o of a)
     for (const s of o.renderableSteps) {
       const l = (s.option?.variants || []).length;
-      s.silent || (s.type === v.Model || s.type === v.Material || s.type === v.Picture || s.type === v.Shape ? (l > 1 || e) && i.push(s.stepName) : i.push(s.stepName));
+      s.silent || (s.type === E.Model || s.type === E.Material || s.type === E.Picture || s.type === E.Shape ? (l > 1 || e) && i.push(s.stepName) : i.push(s.stepName));
     }
   const r = a.filter((o) => o.renderableSteps.filter(
     (l) => i.includes(l.stepName)
@@ -5257,7 +5257,7 @@ class qn {
     }
   }
 }
-const M = () => {
+const T = () => {
   const n = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
   return n() + n() + "-" + n() + "-" + n() + "-" + n() + "-" + n() + n() + n();
 }, po = ({
@@ -5275,14 +5275,14 @@ const M = () => {
   viewBox: A,
   width: u
 }) => {
-  const h = e || 0, m = 2 * (l?.scale || 1), p = A || { x: 0, y: 0, width: u, height: r }, g = `${p.x} ${p.y} ${p.width} ${p.height}`, f = M(), S = a.purpose === Kt.FreeDesign && /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ P("clipPath", { id: "viewboxClip", children: /* @__PURE__ */ P("rect", { width: p.width, height: p.height, rx: h }) }) }), w = a.colorProfiles?.map((E, D) => (
+  const h = e || 0, g = 2 * (l?.scale || 1), m = A || { x: 0, y: 0, width: u, height: r }, p = `${m.x} ${m.y} ${m.width} ${m.height}`, f = T(), S = a.purpose === Kt.FreeDesign && /* @__PURE__ */ B("defs", { children: /* @__PURE__ */ B("clipPath", { id: "viewboxClip", children: /* @__PURE__ */ B("rect", { width: m.width, height: m.height, rx: h }) }) }), w = a.colorProfiles?.map((b, P) => (
     /* @ts-ignore */
-    /* @__PURE__ */ P("color-profile", { name: E.name, xlinkHref: E.key, children: " " }, D)
-  )), I = i.map((E) => ({
-    ...E,
+    /* @__PURE__ */ B("color-profile", { name: b.name, xlinkHref: b.key, children: " " }, P)
+  )), x = i.map((b) => ({
+    ...b,
     _renderingConfiguration: a,
     mask: l ? `url(#viewmask-${f})` : void 0
-  })), b = Ma(I);
+  })), v = Ma(x);
   return /* @__PURE__ */ dt(
     "svg",
     {
@@ -5300,29 +5300,29 @@ const M = () => {
         maxHeight: o,
         position: c
       },
-      viewBox: g,
+      viewBox: p,
       children: [
         w,
         S,
-        !!n && /* @__PURE__ */ P(
+        !!n && /* @__PURE__ */ B(
           "rect",
           {
             id: "layout-background",
-            width: p.width,
-            height: p.height,
+            width: m.width,
+            height: m.height,
             fill: n,
             rx: h
           }
         ),
-        /* @__PURE__ */ P(
+        /* @__PURE__ */ B(
           "g",
           {
             id: "element-group",
             clipPath: a.purpose === Kt.FreeDesign ? "url(#viewboxClip)" : void 0,
-            children: b.map((E) => Zn(E)).filter((E) => !!E)
+            children: v.map((b) => Zn(b)).filter((b) => !!b)
           }
         ),
-        l && /* @__PURE__ */ P(
+        l && /* @__PURE__ */ B(
           "rect",
           {
             x: l.x,
@@ -5331,22 +5331,22 @@ const M = () => {
             height: l.height,
             fill: "none",
             stroke: l.hidden ? "none" : t || "#aaaaaa",
-            strokeWidth: m / 2,
-            strokeDasharray: `${m * 2} ${m}`
+            strokeWidth: g / 2,
+            strokeDasharray: `${g * 2} ${g}`
           }
         ),
         l && /* @__PURE__ */ dt("mask", { id: `viewmask-${f}`, children: [
-          /* @__PURE__ */ P(
+          /* @__PURE__ */ B(
             "rect",
             {
-              x: p.x,
-              y: p.y,
-              width: p.width,
-              height: p.height,
+              x: m.x,
+              y: m.y,
+              width: m.width,
+              height: m.height,
               fill: "black"
             }
           ),
-          /* @__PURE__ */ P(
+          /* @__PURE__ */ B(
             "rect",
             {
               x: l.x,
@@ -5361,12 +5361,12 @@ const M = () => {
     }
   );
 }, dd = (n, t, e, a, i) => {
-  const r = wt(i), o = e / 2, s = a / 2, l = n + o, c = t + s, d = Math.sin(r), A = Math.cos(r), u = o, h = o, m = -s, p = s, g = u * A - m * d, f = h * A - p * d, S = u * d + m * A, w = h * d + p * A, I = Math.max(Math.abs(g), Math.abs(f)), b = Math.max(Math.abs(S), Math.abs(w));
+  const r = wt(i), o = e / 2, s = a / 2, l = n + o, c = t + s, d = Math.sin(r), A = Math.cos(r), u = o, h = o, g = -s, m = s, p = u * A - g * d, f = h * A - m * d, S = u * d + g * A, w = h * d + m * A, x = Math.max(Math.abs(p), Math.abs(f)), v = Math.max(Math.abs(S), Math.abs(w));
   return {
-    minX: l - I,
-    maxX: l + I,
-    minY: c - b,
-    maxY: c + b
+    minX: l - x,
+    maxX: l + x,
+    minY: c - v,
+    maxY: c + v
   };
 }, Ad = (n, t, e) => {
   const a = Math.sqrt(Math.pow(t.x - n.x, 2) + Math.pow(t.y - n.y, 2)), i = Math.sqrt(Math.pow(t.x - e.x, 2) + Math.pow(t.y - e.y, 2)), r = Math.sqrt(Math.pow(e.x - n.x, 2) + Math.pow(e.y - n.y, 2));
@@ -5377,10 +5377,10 @@ const M = () => {
     x: (n.x - t.x) * i - (n.y - t.y) * a + t.x,
     y: (n.x - t.x) * a + (n.y - t.y) * i + t.y
   };
-}, md = (n, t) => ({
+}, gd = (n, t) => ({
   x: (n.x + t.x) / 2,
   y: (n.y + t.y) / 2
-}), gd = (n, t, e, a) => ({
+}), md = (n, t, e, a) => ({
   x: n.x + t?.x * e,
   y: n.y + t?.y * a
 }), pd = (n, t, e, a) => ({
@@ -5389,7 +5389,7 @@ const M = () => {
 }), fd = (n, t, e, a) => ({
   x: n.x + (t?.x + t?.width) * e,
   y: n.y + (t?.y + t?.height) * a
-}), Dt = (n) => {
+}), xt = (n) => {
   switch (n) {
     case Y.North:
       return Y.East;
@@ -5408,7 +5408,7 @@ const M = () => {
     case Y.Southwest:
       return Y.Northwest;
   }
-}, Cd = (n, t) => t > 45 && t <= 135 ? Dt(n) : t > 135 && t <= 225 ? Dt(Dt(n)) : t > 225 && t <= 315 ? Dt(Dt(Dt(n))) : n, wd = (n, t = { x: 0, y: 0 }, e = { x: 1, y: 1 }) => {
+}, Cd = (n, t) => t > 45 && t <= 135 ? xt(n) : t > 135 && t <= 225 ? xt(xt(n)) : t > 225 && t <= 315 ? xt(xt(xt(n))) : n, wd = (n, t = { x: 0, y: 0 }, e = { x: 1, y: 1 }) => {
   const a = wt(n.rotation), i = {
     x: t.x + n.x * e.x,
     y: t.x + n.y * e.y
@@ -5440,7 +5440,7 @@ const M = () => {
   };
 }, yd = 0.352778, Sd = 0.035277, Hn = (n) => {
   const t = n.rotation || 0, e = wt(t), a = Math.cos(e), i = -Math.sin(e);
-  return /* @__PURE__ */ P("g", { mask: n.stepName || n.productOverlay ? void 0 : n.mask, children: /* @__PURE__ */ P(
+  return /* @__PURE__ */ B("g", { mask: n.stepName || n.productOverlay ? void 0 : n.mask, children: /* @__PURE__ */ B(
     "g",
     {
       transform: `
@@ -5449,7 +5449,7 @@ const M = () => {
                 matrix(${a}, ${-i}, ${i}, ${a}, 0, 0)
                 matrix(1, 0, 0, 1, ${-n.width / 2}, ${-n.height / 2})
                 `,
-      children: /* @__PURE__ */ P(
+      children: /* @__PURE__ */ B(
         "image",
         {
           xlinkHref: n.src,
@@ -5463,7 +5463,7 @@ const M = () => {
 }, jn = (n) => {
   const t = `spiff-group-clip-${n.id}`, e = n.rotation || 0, a = wt(e), i = Math.cos(a), r = -Math.sin(a), o = Ma(n.children);
   return /* @__PURE__ */ dt(qt, { children: [
-    /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ P("clipPath", { id: t, preserveAspectRatio: "none", children: n.clipPath ? /* @__PURE__ */ P("path", { d: n.clipPath }) : /* @__PURE__ */ P("rect", { x: 0, y: 0, width: n.width, height: n.height }) }) }),
+    /* @__PURE__ */ B("defs", { children: /* @__PURE__ */ B("clipPath", { id: t, preserveAspectRatio: "none", children: n.clipPath ? /* @__PURE__ */ B("path", { d: n.clipPath }) : /* @__PURE__ */ B("rect", { x: 0, y: 0, width: n.width, height: n.height }) }) }),
     /* @__PURE__ */ dt(
       "g",
       {
@@ -5474,7 +5474,7 @@ const M = () => {
                 matrix(1, 0, 0, 1, ${-n.width / 2}, ${-n.height / 2})
                 `,
         children: [
-          n._renderingConfiguration?.debug ? /* @__PURE__ */ P(
+          n._renderingConfiguration?.debug ? /* @__PURE__ */ B(
             "rect",
             {
               stroke: "red",
@@ -5486,7 +5486,7 @@ const M = () => {
               height: n.height
             }
           ) : void 0,
-          o.map((l) => Zn(l)).filter((l) => !!l).map((l) => /* @__PURE__ */ P("g", { clipPath: `url(#${t})`, children: l }))
+          o.map((l) => Zn(l)).filter((l) => !!l).map((l) => /* @__PURE__ */ B("g", { clipPath: `url(#${t})`, children: l }))
         ]
       }
     )
@@ -5496,15 +5496,15 @@ const M = () => {
     if (!n.pattern)
       return "";
     if (n.pattern.svg) {
-      const A = Fa(n.pattern.svg, n.pattern.colors || {}, !1);
+      const A = Da(n.pattern.svg, n.pattern.colors || {}, !1);
       return ba(A);
     }
     return n.pattern.src;
   };
   if (!a())
-    return /* @__PURE__ */ P(qt, {});
-  const i = () => n.threshold ? n.invertThreshold ? "1 ".repeat(n.threshold) + "0 ".repeat(256 - n.threshold) : "0 ".repeat(n.threshold) + "1 ".repeat(256 - n.threshold) : "", r = () => /* @__PURE__ */ P(qt, { children: n.useThreshold && /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ dt("filter", { id: e, "color-interpolation-filters": "sRGB", children: [
-    /* @__PURE__ */ P(
+    return /* @__PURE__ */ B(qt, {});
+  const i = () => n.threshold ? n.invertThreshold ? "1 ".repeat(n.threshold) + "0 ".repeat(256 - n.threshold) : "0 ".repeat(n.threshold) + "1 ".repeat(256 - n.threshold) : "", r = () => /* @__PURE__ */ B(qt, { children: n.useThreshold && /* @__PURE__ */ B("defs", { children: /* @__PURE__ */ dt("filter", { id: e, "color-interpolation-filters": "sRGB", children: [
+    /* @__PURE__ */ B(
       "feColorMatrix",
       {
         type: "matrix",
@@ -5518,43 +5518,43 @@ const M = () => {
       }
     ),
     /* @__PURE__ */ dt("feComponentTransfer", { in: "greyscale", children: [
-      /* @__PURE__ */ P("feFuncR", { type: "discrete", tableValues: i() }),
-      /* @__PURE__ */ P("feFuncG", { type: "discrete", tableValues: i() }),
-      /* @__PURE__ */ P("feFuncB", { type: "discrete", tableValues: i() })
+      /* @__PURE__ */ B("feFuncR", { type: "discrete", tableValues: i() }),
+      /* @__PURE__ */ B("feFuncG", { type: "discrete", tableValues: i() }),
+      /* @__PURE__ */ B("feFuncB", { type: "discrete", tableValues: i() })
     ] })
   ] }) }) }), o = n.rotation || 0, s = wt(o), l = Math.cos(s), c = -Math.sin(s), d = () => {
-    const A = n.pattern?.x || 0, u = n.pattern?.y || 0, h = n.pattern?.width || 0, m = n.pattern?.height || 0, p = n.pattern?.scaleX || 1, g = n.pattern?.scaleY || 1, f = n.pattern?.rotation || 0;
+    const A = n.pattern?.x || 0, u = n.pattern?.y || 0, h = n.pattern?.width || 0, g = n.pattern?.height || 0, m = n.pattern?.scaleX || 1, p = n.pattern?.scaleY || 1, f = n.pattern?.rotation || 0;
     return [n.pattern?.svg ? {
       id: `${t}-contents`,
-      type: F.Illustration,
+      type: D.Illustration,
       x: A,
       y: u,
       rotation: f,
-      width: h * p,
-      height: m * g,
+      width: h * m,
+      height: g * p,
       src: a(),
       svg: n.pattern?.svg,
       colors: n.pattern?.colors
     } : {
       id: `${t}-contents`,
-      type: F.Image,
+      type: D.Image,
       x: A,
       y: u,
       rotation: f,
-      width: h * p,
-      height: m * g,
+      width: h * m,
+      height: g * p,
       src: a()
     }];
   };
   return /* @__PURE__ */ dt(qt, { children: [
     r(),
-    /* @__PURE__ */ P(
+    /* @__PURE__ */ B(
       "g",
       {
         opacity: n.opacity,
         mask: n.stepName ? void 0 : n.mask,
         filter: n.useThreshold ? `url(#${e})` : void 0,
-        children: /* @__PURE__ */ P(
+        children: /* @__PURE__ */ B(
           "g",
           {
             transform: `
@@ -5564,7 +5564,7 @@ const M = () => {
                 matrix(1, 0, 0, 1, ${-n.width / 2}, ${-n.height / 2})
                 matrix(${n.scaleX}, 0, 0, ${n.scaleY}, 0, 0)
                 `,
-            children: /* @__PURE__ */ P(
+            children: /* @__PURE__ */ B(
               jn,
               {
                 id: t,
@@ -5640,24 +5640,24 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
       return yt(n).getFont();
     } catch {
       if (wo(n)) {
-        const a = Fn(n), i = la(a);
-        return ma(n, i), i;
+        const a = Dn(n), i = la(a);
+        return ga(n, i), i;
       } else {
         const a = await Oe(n, !0), i = la(a);
-        return ma(n, i), await tr(i, n), i;
+        return ga(n, i), await tr(i, n), i;
       }
     }
   })();
   return Ke.set(n, e), e;
 }, yo = (n) => {
-  const t = Fn(n), e = la(t);
-  return ma(n, e), e;
+  const t = Dn(n), e = la(t);
+  return ga(n, e), e;
 }, yt = (n) => {
   const t = Yn.get(n);
   if (t)
     return t;
   throw new Error("Font metrics unavailable for font");
-}, ma = (n, t) => {
+}, ga = (n, t) => {
   const e = new Co(t);
   return Yn.set(n, e), e;
 }, vd = async (n) => {
@@ -5666,35 +5666,35 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
     yn(d.innerHTML).stylesheet?.rules.forEach((u) => {
       if (u.type === "font-face" && u.declarations) {
         const h = u.declarations.find(
-          (g) => g.property === "font-family"
-        )?.value, p = u.declarations.find((g) => g.property === "src")?.value?.match(/'(https.*?)'/)?.[1];
-        h && p && i.set(h, p);
+          (p) => p.property === "font-family"
+        )?.value, m = u.declarations.find((p) => p.property === "src")?.value?.match(/'(https.*?)'/)?.[1];
+        h && m && i.set(h, m);
       }
     });
   });
   const o = e.querySelectorAll("tspan");
   for (let d = 0; d < o.length; d++) {
-    const A = o.item(d), u = A.closest("text"), h = A.closest("g"), m = u.getAttribute("font-family"), p = await Qt(i.get(m)), g = u.getAttribute("fill"), f = u.getAttribute("stroke"), S = u.getAttribute("stroke-width"), w = p.getPath(
+    const A = o.item(d), u = A.closest("text"), h = A.closest("g"), g = u.getAttribute("font-family"), m = await Qt(i.get(g)), p = u.getAttribute("fill"), f = u.getAttribute("stroke"), S = u.getAttribute("stroke-width"), w = m.getPath(
       A.innerHTML,
       0,
       0,
       parseInt(u.getAttribute("font-size") ?? "72")
-    ), I = w.getBoundingBox().x2 - w.getBoundingBox().x1;
-    let b = 0;
-    const E = A.getAttribute("text-anchor");
-    E === "middle" ? b = I / 2 : E === "end" && (b = I);
-    const D = p.getPath(
+    ), x = w.getBoundingBox().x2 - w.getBoundingBox().x1;
+    let v = 0;
+    const b = A.getAttribute("text-anchor");
+    b === "middle" ? v = x / 2 : b === "end" && (v = x);
+    const P = m.getPath(
       A.innerHTML,
-      parseFloat(A.getAttribute("x") ?? "0") - b,
+      parseFloat(A.getAttribute("x") ?? "0") - v,
       parseFloat(A.getAttribute("y") ?? "0"),
       parseInt(u.getAttribute("font-size") ?? "72")
     );
-    D.fill = g, D.stroke = f, D.strokeWidth = parseFloat(S ?? "0");
-    const x = D.toSVG(2), $ = t.parseFromString(x, "image/svg+xml").firstElementChild;
-    h.appendChild($);
+    P.fill = p, P.stroke = f, P.strokeWidth = parseFloat(S ?? "0");
+    const F = P.toSVG(2), O = t.parseFromString(F, "image/svg+xml").firstElementChild;
+    h.appendChild(O);
   }
   return e.querySelectorAll("text").forEach((d) => d.remove()), Pt().serializeToString(a);
-}, xe = (n, t, e, a) => Math.max(bo(n.join(`
+}, Fe = (n, t, e, a) => Math.max(bo(n.join(`
 `), e, a), t), Ka = (n, t, e, a, i, r) => {
   const o = (r || _n) * i.getApproximateHeight(), s = t.split(`
 `);
@@ -5704,7 +5704,7 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
       lines: c,
       requiredHeight: l.flatMap((d) => d.lines).length * (a * o),
       fontSize: e,
-      requiredWidth: xe(c, n.width, a, i)
+      requiredWidth: Fe(c, n.width, a, i)
     };
   } catch {
     const c = t.split("");
@@ -5712,7 +5712,7 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
       lines: c,
       requiredHeight: c.length * (a * o),
       fontSize: e,
-      requiredWidth: xe(c, n.width, a, i)
+      requiredWidth: Fe(c, n.width, a, i)
     };
   }
 }, ye = (n, t, e, a) => {
@@ -5737,8 +5737,8 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
       l = Math.max(l, pt(d, e, a));
       let u = c + 1, h = !0;
       for (; u < o.length && h; ) {
-        const m = o[u], p = pt(`${A.join(" ")} ${m}`, e, a);
-        p <= t ? (A.push(m), l = Math.max(l, p), u++) : h = !1;
+        const g = o[u], m = pt(`${A.join(" ")} ${g}`, e, a);
+        m <= t ? (A.push(g), l = Math.max(l, m), u++) : h = !1;
       }
       s.push(A.join(" ")), c = u;
     }
@@ -5760,14 +5760,14 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
     return {
       lines: s,
       requiredHeight: t.height,
-      requiredWidth: xe(s, t.width, o, i),
+      requiredWidth: Fe(s, t.width, o, i),
       fontSize: t.fontSize
     };
   const l = t.width !== e.width != (t.height !== e.height);
   return t.lineHeight === e.lineHeight && !l && e.input === n ? {
     lines: s,
     requiredHeight: t.height,
-    requiredWidth: xe(s, t.width, o, i),
+    requiredWidth: Fe(s, t.width, o, i),
     fontSize: So(s, i, r, t.width, t.height, a)
   } : Ka(t, n, t.fontSize, o, i, a);
 }, Eo = (n, t, e, a, i) => {
@@ -5826,7 +5826,7 @@ const wo = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
       };
   })()
 } : n, _n = 1.1;
-function xt(n, t) {
+function Ft(n, t) {
   return Xn(n, t.getTemplatingContext());
 }
 function Xn(n, t) {
@@ -5845,7 +5845,7 @@ const Po = (n) => {
   const h = () => n.textFillImage ? `url("#${o}")` : n._renderingConfiguration?.spotColors && n.fillSpotColorDefinition ? `${n.fill} ${Tn(n.fillSpotColorDefinition)}` : n.fill;
   return /* @__PURE__ */ dt(qt, { children: [
     /* @__PURE__ */ dt("defs", { children: [
-      n.textFillImage && /* @__PURE__ */ P(
+      n.textFillImage && /* @__PURE__ */ B(
         "pattern",
         {
           id: o,
@@ -5854,7 +5854,7 @@ const Po = (n) => {
           height: n.textFillImage.scale * n.textFillImage.height,
           x: 0,
           y: 0,
-          children: /* @__PURE__ */ P(
+          children: /* @__PURE__ */ B(
             "image",
             {
               href: n.textFillImage.src,
@@ -5865,7 +5865,7 @@ const Po = (n) => {
           )
         }
       ),
-      /* @__PURE__ */ P(
+      /* @__PURE__ */ B(
         "style",
         {
           type: "text/css",
@@ -5879,10 +5879,10 @@ const Po = (n) => {
           }
         }
       ),
-      n.curved && n.paths ? /* @__PURE__ */ P("path", { id: r, d: n.paths[0] }) : void 0
+      n.curved && n.paths ? /* @__PURE__ */ B("path", { id: r, d: n.paths[0] }) : void 0
     ] }),
-    n._renderingConfiguration?.debug ? /* @__PURE__ */ P("rect", { stroke: "blue", fill: "none", x: n.x, y: n.y, width: n.width, height: n.height }) : void 0,
-    /* @__PURE__ */ P("g", { mask: n.stepName ? void 0 : n.mask, children: /* @__PURE__ */ P("g", { transform: `matrix(${a}, ${-i}, ${i}, ${a}, ${s}, ${l})`, children: /* @__PURE__ */ P(
+    n._renderingConfiguration?.debug ? /* @__PURE__ */ B("rect", { stroke: "blue", fill: "none", x: n.x, y: n.y, width: n.width, height: n.height }) : void 0,
+    /* @__PURE__ */ B("g", { mask: n.stepName ? void 0 : n.mask, children: /* @__PURE__ */ B("g", { transform: `matrix(${a}, ${-i}, ${i}, ${a}, ${s}, ${l})`, children: /* @__PURE__ */ B(
       "text",
       {
         xmlSpace: "preserve",
@@ -5897,14 +5897,14 @@ const Po = (n) => {
         },
         stroke: A,
         strokeWidth: u,
-        children: n.curved ? /* @__PURE__ */ P(Fo, { text: c, curvedPathId: r, align: n.align }) : d.map((m, p) => /* @__PURE__ */ P(
-          Do,
+        children: n.curved ? /* @__PURE__ */ B(Do, { text: c, curvedPathId: r, align: n.align }) : d.map((g, m) => /* @__PURE__ */ B(
+          xo,
           {
             align: n.vertical ? "center" : n.align,
             fontSize: n.fontSize,
-            thisLineIdx: p,
+            thisLineIdx: m,
             amountLines: d.length,
-            text: m,
+            text: g,
             textboxHeight: n.height,
             textboxWidth: n.width,
             lineHeight: n.lineHeight,
@@ -5912,12 +5912,12 @@ const Po = (n) => {
             verticalAlign: n.verticalAlign,
             fontData: n.fontData
           },
-          p
+          m
         ))
       }
     ) }) })
   ] });
-}, Do = (n) => {
+}, xo = (n) => {
   const t = () => {
     if (n.lineHeight !== void 0)
       return n.lineHeight * n.fontSize;
@@ -5934,10 +5934,10 @@ const Po = (n) => {
     const o = (n.amountLines - 1) / 2;
     return (n.thisLineIdx - o) * i + n.fontSize / 4;
   };
-  return /* @__PURE__ */ P("tspan", { textAnchor: Kn(n.align), x: e(), y: `${a()}px`, children: n.text });
-}, Fo = (n) => {
+  return /* @__PURE__ */ B("tspan", { textAnchor: Kn(n.align), x: e(), y: `${a()}px`, children: n.text });
+}, Do = (n) => {
   const t = `#${n.curvedPathId}`;
-  return /* @__PURE__ */ P(
+  return /* @__PURE__ */ B(
     "textPath",
     {
       startOffset: n.align === "left" ? "0%" : n.align === "right" ? "100%" : "50%",
@@ -5947,9 +5947,9 @@ const Po = (n) => {
       children: n.text
     }
   );
-}, xo = (n) => {
+}, Fo = (n) => {
   if (n.cachedObjectURL && !n._renderingConfiguration?.omitCachedFields)
-    return /* @__PURE__ */ P(
+    return /* @__PURE__ */ B(
       Hn,
       {
         id: n.id,
@@ -5974,12 +5974,12 @@ const Po = (n) => {
     throw new Error(
       `Illustration element ${n.id} (stepName ${n.stepName}) lacked svg from src ${n.src} at render time.`
     );
-  return /* @__PURE__ */ P("g", { mask: n.stepName ? void 0 : n.mask, children: /* @__PURE__ */ P(
+  return /* @__PURE__ */ B("g", { mask: n.stepName ? void 0 : n.mask, children: /* @__PURE__ */ B(
     "g",
     {
       transform: r,
       dangerouslySetInnerHTML: {
-        __html: Da(
+        __html: xa(
           n.svg,
           n.width,
           n.height,
@@ -5992,7 +5992,7 @@ const Po = (n) => {
 };
 class ko {
   constructor() {
-    this.id = M(), this.stateCallbacks = [], this.prevCommands = [], this.nextCommands = [];
+    this.id = T(), this.stateCallbacks = [], this.prevCommands = [], this.nextCommands = [];
   }
   registerStateCallback(t) {
     this.stateCallbacks.push(t);
@@ -6080,9 +6080,9 @@ class ko {
     return { ...t, transaction: e.apply(a) };
   }
 }
-const Zn = (n) => n.type === F.Image ? /* @__PURE__ */ P(Hn, { ...n }, n.id) : n.type === F.Frame ? /* @__PURE__ */ P(fo, { ...n }, n.id) : n.type === F.Illustration ? /* @__PURE__ */ P(xo, { ...n }, n.id) : n.type === F.Textbox ? /* @__PURE__ */ P(Po, { ...n }, n.id) : n.type === F.Group ? /* @__PURE__ */ P(jn, { ...n }, n.id) : null, ka = (n, t, e) => {
+const Zn = (n) => n.type === D.Image ? /* @__PURE__ */ B(Hn, { ...n }, n.id) : n.type === D.Frame ? /* @__PURE__ */ B(fo, { ...n }, n.id) : n.type === D.Illustration ? /* @__PURE__ */ B(Fo, { ...n }, n.id) : n.type === D.Textbox ? /* @__PURE__ */ B(Po, { ...n }, n.id) : n.type === D.Group ? /* @__PURE__ */ B(jn, { ...n }, n.id) : null, ka = (n, t, e) => {
   const a = e.renderingConfiguration, i = a?.removeExcludedElements ? t.filter((r) => !r.excludeFromExport) : t;
-  return /* @__PURE__ */ P(
+  return /* @__PURE__ */ B(
     po,
     {
       preserveAspectRatio: void 0,
@@ -6128,13 +6128,13 @@ const le = (n) => {
     if (n.defaultVariant !== void 0)
       return t.find((e) => e.id === n.defaultVariant);
   }
-}, mt = /* @__PURE__ */ new Map(), Gt = /* @__PURE__ */ new Map(), Xe = /* @__PURE__ */ new Map(), ti = async (n, t) => {
+}, gt = /* @__PURE__ */ new Map(), Gt = /* @__PURE__ */ new Map(), Xe = /* @__PURE__ */ new Map(), ti = async (n, t) => {
   if (!t) {
     if (!n) throw new Error("No region or src supplied. Cannot construct frame!");
-    return ga(n);
+    return ma(n);
   }
   return nt(t);
-}, ga = (n) => {
+}, ma = (n) => {
   const t = n.width, e = n.height;
   return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${t} ${e}'>
         <path id="target-path" d='M0 0 h ${t} v ${e} h ${-t} Z' />
@@ -6199,8 +6199,8 @@ const le = (n) => {
     zoom: o
   };
 }, pa = async (n) => {
-  if (mt.has(n))
-    return mt.get(n);
+  if (gt.has(n))
+    return gt.get(n);
   if (n.startsWith("data:image/svg+xml")) {
     const e = Ri(n), a = new TextDecoder().decode(e.buffer), i = ei(a), r = {
       src: n,
@@ -6208,7 +6208,7 @@ const le = (n) => {
       height: i.height,
       aspect: i.width / i.height
     };
-    return mt.set(n, r), r;
+    return gt.set(n, r), r;
   }
   if ((n.split(".").pop()?.toLowerCase() ?? "") === "svg") {
     const e = await Na(n), a = e.width, i = e.height, r = {
@@ -6217,7 +6217,7 @@ const le = (n) => {
       height: i,
       aspect: a / i
     };
-    return mt.set(n, r), r;
+    return gt.set(n, r), r;
   } else {
     const e = await Oe(n, !0), a = await Ue(e), i = {
       src: n,
@@ -6225,7 +6225,7 @@ const le = (n) => {
       height: a.height,
       aspect: a.width / a.height
     };
-    return mt.set(n, i), i;
+    return gt.set(n, i), i;
   }
 }, Na = async (n) => {
   const t = await nt(n);
@@ -6273,12 +6273,12 @@ const le = (n) => {
       createImage: ie,
       DOMParser: Ba(),
       fetch: it
-    }), u = o.getAttribute("width"), h = o.getAttribute("height"), m = 2048;
+    }), u = o.getAttribute("width"), h = o.getAttribute("height"), g = 2048;
     if (h && u) {
-      const p = parseFloat(h), f = parseFloat(u) / p;
-      f > 1 ? A.resize(m, m / f) : A.resize(m * f, m);
+      const m = parseFloat(h), f = parseFloat(u) / m;
+      f > 1 ? A.resize(g, g / f) : A.resize(g * f, g);
     } else
-      A.resize(m, m);
+      A.resize(g, g);
     return await A.render(), await t(c);
   })();
   return Ze.set(n, a), a;
@@ -6296,17 +6296,17 @@ const le = (n) => {
     rotation: 0,
     panelId: n.layoutState.layout.panelId
   };
-  if (e && t === F.Illustration) {
+  if (e && t === D.Illustration) {
     const l = await lt(await ai(e)), u = At().parseFromString(l.svg, "image/svg+xml").firstElementChild.getAttribute("viewBox");
     if (!u) throw new Error("SVG missing viewBox.");
-    const h = s.height, m = u.split(" "), p = parseFloat(m[2]) || 1, g = parseFloat(m[3]) || 1, f = p / g;
+    const h = s.height, g = u.split(" "), m = parseFloat(g[2]) || 1, p = parseFloat(g[3]) || 1, f = m / p;
     s.height = s.width / f, s.top += (h - s.height) / 2;
   }
-  if (e && t === F.Image) {
+  if (e && t === D.Image) {
     const l = s.height, c = await Oe(e), d = await Ue(c), A = d.width / d.height;
     s.height = s.width / A, s.top += (l - s.height) / 2;
   }
-  if (e && t === F.Textbox && a?.text && a?.fontScale) {
+  if (e && t === D.Textbox && a?.text && a?.fontScale) {
     await Qt(e);
     const l = yt(e), c = pt(a.text, a?.fontScale, l);
     s.width = Math.min(c, i.width * 0.85), s.left = i.x + i.width / 2 - s.width / 2;
@@ -6315,9 +6315,9 @@ const le = (n) => {
 };
 class Ed {
   static async getFrame(t, e) {
-    const a = await ti(e.region, e.src), i = await ze(a), r = e.region || await Vt(t, F.Frame);
+    const a = await ti(e.region, e.src), i = await ze(a), r = e.region || await Vt(t, D.Frame);
     return {
-      id: M(),
+      id: T(),
       x: r.left,
       y: r.top,
       width: r.width,
@@ -6330,7 +6330,7 @@ class Ed {
       path: i.path,
       dataWidth: i.width,
       dataHeight: i.height,
-      type: F.Frame,
+      type: D.Frame,
       disablePlaceholder: e.configuration.disablePlaceholder,
       focalBlur: e.configuration.focalBlur,
       focalBlurStrength: e.configuration.focalBlurStrength,
@@ -6341,11 +6341,11 @@ class Ed {
     };
   }
   static async getImage(t, e) {
-    const a = e.region || await Vt(t, F.Image, e.src);
+    const a = e.region || await Vt(t, D.Image, e.src);
     return {
-      id: M(),
+      id: T(),
       src: e.src,
-      type: F.Image,
+      type: D.Image,
       y: a.top,
       x: a.left,
       rotation: a.rotation,
@@ -6364,13 +6364,13 @@ class Ed {
     }, l = r?.text || a.defaultText || "", c = a.replaceableText ? a.replaceableText.replace("{{}}", l) : l, d = ke(c, {
       vertical: a.vertical,
       uppercase: a.uppercase
-    }), A = e.region || await Vt(t, F.Textbox, i, {
+    }), A = e.region || await Vt(t, D.Textbox, i, {
       text: d,
       fontScale: a.size ? a.size / o.unitsPerEm : void 0
     }), u = se(
       {
-        id: M(),
-        type: F.Textbox,
+        id: T(),
+        type: D.Textbox,
         x: A.left,
         y: A.top,
         width: A.width,
@@ -6430,13 +6430,14 @@ class Ed {
                     </svg>
                 `, i = {};
     i["spiff-fill-shape"] = { browserValue: e.color };
-    const r = e.region || await Vt(t, F.Illustration), o = M();
+    const r = e.region?.item || await Vt(t, D.Illustration), o = T();
     return {
-      stepRegion: e.region,
+      stepRegion: e.region?.item,
+      stepRegionIndex: e.region?.index,
       colors: i,
       id: o,
       svg: a,
-      type: F.Illustration,
+      type: D.Illustration,
       y: r.top,
       x: r.left,
       rotation: r.rotation,
@@ -6448,15 +6449,16 @@ class Ed {
     };
   }
   static async getIllustration(t, e) {
-    const a = e.region || await Vt(t, F.Illustration, e.src), i = await lt(await ai(e.src)), r = await te(i.svg), o = M();
+    const a = e.region?.item || await Vt(t, D.Illustration, e.src), i = await lt(await ai(e.src)), r = await te(i.svg), o = T();
     return {
       cachedObjectURL: r,
-      stepRegion: e.region,
+      stepRegion: e.region?.item,
+      stepRegionIndex: e.region?.index,
       colors: i.colors,
       id: o,
       src: e.src,
       svg: i.svg,
-      type: F.Illustration,
+      type: D.Illustration,
       y: a.top,
       x: a.left,
       rotation: a.rotation,
@@ -6483,7 +6485,7 @@ const z = (n, t) => Z(n, t).elements.find((i) => i.id === n), Z = (n, t) => {
   return {
     layout: t.layout,
     elements: a,
-    modificationID: M()
+    modificationID: T()
   };
 }, Za = async (n) => {
   const t = [...Object.keys(n.layouts)], e = [...new Set(t)];
@@ -6495,7 +6497,7 @@ const z = (n, t) => Z(n, t).elements.find((i) => i.id === n), Z = (n, t) => {
           const s = o;
           if (s.src && !s.svg) {
             const l = await nt(s.src), c = await lt(l);
-            s.svg = Da(
+            s.svg = xa(
               c.svg,
               s.width,
               s.height,
@@ -6515,7 +6517,7 @@ const z = (n, t) => Z(n, t).elements.find((i) => i.id === n), Z = (n, t) => {
   }
   for (const a in n.layouts) {
     const i = n.layouts[a].elements.filter(
-      (o) => o.type === F.Illustration
+      (o) => o.type === D.Illustration
     );
     for (let o = 0; o < i.length; ++o) {
       const s = i[o];
@@ -6527,7 +6529,7 @@ const z = (n, t) => Z(n, t).elements.find((i) => i.id === n), Z = (n, t) => {
         }
     }
     const r = n.layouts[a].elements.filter(
-      (o) => o.type === F.Textbox
+      (o) => o.type === D.Textbox
     );
     for (let o = 0; o < r.length; ++o) {
       const s = r[o];
@@ -6535,7 +6537,7 @@ const z = (n, t) => Z(n, t).elements.find((i) => i.id === n), Z = (n, t) => {
     }
   }
 };
-class O {
+class $ {
   undo() {
     if (!this.oldState)
       throw new Error("Cannot undo.");
@@ -6545,7 +6547,7 @@ class O {
     this.oldState = t;
   }
 }
-class tn extends O {
+class tn extends $ {
   constructor(t) {
     super(), this.serializableWorkflow = t;
   }
@@ -6556,7 +6558,7 @@ class tn extends O {
     };
   }
 }
-class bd extends O {
+class bd extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.x = e, this.y = a;
   }
@@ -6579,7 +6581,7 @@ class bd extends O {
     };
   }
 }
-class Id extends O {
+class Id extends $ {
   constructor(t, e) {
     super(), this.id = t, this.angle = e;
   }
@@ -6601,7 +6603,7 @@ class Id extends O {
     };
   }
 }
-class Bd extends O {
+class Bd extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.width = Math.abs(e), this.height = Math.abs(a);
   }
@@ -6632,7 +6634,7 @@ class Bd extends O {
     };
   }
 }
-class L extends O {
+class L extends $ {
   constructor(t) {
     super(), this.commands = t;
   }
@@ -6640,7 +6642,7 @@ class L extends O {
     return this.oldState = t, this.commands.reduce((e, a) => a.apply(e), t);
   }
 }
-class ni extends O {
+class ni extends $ {
   constructor(t) {
     super(), this.layout = t;
   }
@@ -6652,13 +6654,13 @@ class ni extends O {
         [this.layout.id]: {
           elements: [],
           layout: { ...this.layout },
-          modificationID: M()
+          modificationID: T()
         }
       }
     };
   }
 }
-class H extends O {
+class H extends $ {
   /**
    * @param initialParams The initial parameters to be set on this new object
    * @param callback An optional callback function to be notified when the object has been instantiated
@@ -6683,7 +6685,7 @@ class H extends O {
           [this.layout.id]: {
             ...t.layouts[this.layout.id],
             elements: s,
-            modificationID: M()
+            modificationID: T()
           }
         }
       };
@@ -6704,7 +6706,7 @@ class H extends O {
         [this.layout.id]: {
           ...t.layouts[this.layout.id],
           elements: o,
-          modificationID: M()
+          modificationID: T()
         }
       }
     };
@@ -6717,7 +6719,7 @@ class H extends O {
     return a !== void 0 ? a + 1 : 0;
   }
 }
-class Rt extends O {
+class Rt extends $ {
   constructor(t) {
     super(), this.id = t;
   }
@@ -6727,7 +6729,7 @@ class Rt extends O {
     const a = Object.values(t.layouts).map((r) => (r.elements.filter((s) => s.id !== this.id).length !== r.elements.length && (e = !0), {
       ...r,
       elements: r.elements.filter((s) => s.id !== this.id),
-      modificationID: M()
+      modificationID: T()
     }));
     e || console.log(`Failed to delete element ${this.id}`);
     const i = {};
@@ -6739,7 +6741,7 @@ class Rt extends O {
     };
   }
 }
-class To extends O {
+class To extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.color = e, this.textFillSpotColor = a;
   }
@@ -6763,7 +6765,7 @@ class To extends O {
     };
   }
 }
-class ta extends O {
+class ta extends $ {
   constructor(t, e) {
     super(), this.id = t, this.imageFill = e;
   }
@@ -6785,7 +6787,7 @@ class ta extends O {
     };
   }
 }
-class No extends O {
+class No extends $ {
   constructor(t, e) {
     super(), this.id = t, this.size = e;
   }
@@ -6807,7 +6809,7 @@ class No extends O {
     };
   }
 }
-class en extends O {
+class en extends $ {
   constructor(t, e) {
     super(), this.id = t, this.fontData = e;
   }
@@ -6829,7 +6831,7 @@ class en extends O {
     };
   }
 }
-class Qo extends O {
+class Qo extends $ {
   constructor(t, e) {
     super(), this.id = t, this.align = e;
   }
@@ -6851,7 +6853,7 @@ class Qo extends O {
     };
   }
 }
-class Ro extends O {
+class Ro extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.imageData = e, this.offsets = a;
   }
@@ -6876,7 +6878,7 @@ class Ro extends O {
     const o = {
       ...e,
       elements: r,
-      modificationID: M()
+      modificationID: T()
     };
     return {
       ...t,
@@ -6887,7 +6889,7 @@ class Ro extends O {
     };
   }
 }
-class Oo extends O {
+class Oo extends $ {
   constructor(t, e, a, i, r) {
     super(), this.id = t, this.useThreshold = e, this.invertThreshold = a, this.threshold = i, this.thresholdSaturation = r;
   }
@@ -6912,7 +6914,7 @@ class Oo extends O {
     };
   }
 }
-class Pd extends O {
+class Pd extends $ {
   constructor(t, e) {
     super(), this.id = t, this.src = e;
   }
@@ -6934,7 +6936,7 @@ class Pd extends O {
     };
   }
 }
-class $o extends O {
+class $o extends $ {
   constructor(t, e) {
     super(), this.id = t, this.text = e;
   }
@@ -6953,7 +6955,7 @@ class $o extends O {
     };
   }
 }
-class ea extends O {
+class ea extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.strokeColor = e, this.strokeThickness = a;
   }
@@ -6976,7 +6978,7 @@ class ea extends O {
     };
   }
 }
-class fa extends O {
+class fa extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.className = e, this.fill = a;
   }
@@ -7008,7 +7010,7 @@ class fa extends O {
     };
   }
 }
-class Uo extends O {
+class Uo extends $ {
   constructor(t, e, a) {
     super(), this.id = t, this.svgBody = e, this.objectURL = a;
   }
@@ -7031,7 +7033,7 @@ class Uo extends O {
     };
   }
 }
-class Dd extends O {
+class xd extends $ {
   /**
    * @param id The targeted element to bring to the front.
    */
@@ -7054,13 +7056,13 @@ class Dd extends O {
         [a.layout.id]: {
           ...t.layouts[a.layout.id],
           elements: r,
-          modificationID: M()
+          modificationID: T()
         }
       }
     };
   }
 }
-class Fd extends O {
+class Dd extends $ {
   /**
    * @param id The targeted element to bring to the back.
    */
@@ -7085,13 +7087,13 @@ class Fd extends O {
         [a.layout.id]: {
           ...t.layouts[a.layout.id],
           elements: r,
-          modificationID: M()
+          modificationID: T()
         }
       }
     };
   }
 }
-class xd extends O {
+class Fd extends $ {
   /**
    * @param id The targeted element to bring to the front.
    */
@@ -7112,13 +7114,13 @@ class xd extends O {
         [a.layout.id]: {
           ...t.layouts[a.layout.id],
           elements: o,
-          modificationID: M()
+          modificationID: T()
         }
       }
     };
   }
 }
-class kd extends O {
+class kd extends $ {
   /**
    * @param id The targeted element to bring to the front.
    */
@@ -7139,7 +7141,7 @@ class kd extends O {
         [a.layout.id]: {
           ...t.layouts[a.layout.id],
           elements: o,
-          modificationID: M()
+          modificationID: T()
         }
       }
     };
@@ -7152,19 +7154,19 @@ class an {
       if (!r)
         throw new K(i);
       let o = "";
-      if (this.configuration.type === v.ProductOverlay) {
+      if (this.configuration.type === E.ProductOverlay) {
         let l = "";
         if (this.product?.overlayImageUrl && (l = this.product.overlayImageUrl), o = l, !l)
-          throw new De(this.configuration, "Couldn't find an asset for product overlay step");
+          throw new xe(this.configuration, "Couldn't find an asset for product overlay step");
       }
       const s = this.evaluateAssetType();
-      if (s === F.Image) {
-        const l = this.configuration.type === v.SilentIllustration ? this.configuration.data.asset?.fileLink : this.product?.overlayImageUrl;
+      if (s === D.Image) {
+        const l = this.configuration.type === E.SilentIllustration ? this.configuration.data.asset?.fileLink : this.product?.overlayImageUrl;
         if (!l)
           throw new Error("Undefined raster silent step source");
         const c = {
           stepName: this.configuration.stepName,
-          id: M(),
+          id: T(),
           src: l,
           type: s,
           y: i.top,
@@ -7174,7 +7176,7 @@ class an {
           layer: i.layer,
           layerIndex: i.layerIndex,
           immutable: i.immutable,
-          productOverlay: this.configuration.type === v.ProductOverlay ? !0 : void 0,
+          productOverlay: this.configuration.type === E.ProductOverlay ? !0 : void 0,
           rotation: i.rotation,
           excludeFromExport: this.configuration.data.excludeFromPrint,
           preserveAspectRatio: "none"
@@ -7187,17 +7189,17 @@ class an {
           command: new H(c, r)
         };
       } else {
-        const l = this.configuration.type === v.SilentIllustration ? this.configuration.data.asset?.fileLink : o, d = await lt(await (async () => new Promise((u, h) => {
+        const l = this.configuration.type === E.SilentIllustration ? this.configuration.data.asset?.fileLink : o, d = await lt(await (async () => new Promise((u, h) => {
           if (!l) {
             h("Undefined vector silent step source");
             return;
           }
-          nt(l, !0).then((m) => {
-            u(m);
-          }).catch((m) => console.error(m));
+          nt(l, !0).then((g) => {
+            u(g);
+          }).catch((g) => console.error(g));
         }))()), A = {
           stepName: this.configuration.stepName,
-          id: M(),
+          id: T(),
           cachedObjectURL: await te(d.svg),
           src: l,
           svg: d.svg,
@@ -7211,7 +7213,7 @@ class an {
           layerIndex: i.layerIndex,
           rotation: i.rotation,
           immutable: i.immutable,
-          productOverlay: this.configuration.type === v.ProductOverlay ? !0 : void 0,
+          productOverlay: this.configuration.type === E.ProductOverlay ? !0 : void 0,
           excludeFromExport: this.configuration.data.excludeFromPrint
         };
         return {
@@ -7226,11 +7228,11 @@ class an {
   }
   async trigger() {
     if (!this.configuration.data.regions)
-      throw new De(this.configuration, "Missing regions.");
-    if (this.configuration.type === v.SilentIllustration) {
+      throw new xe(this.configuration, "Missing regions.");
+    if (this.configuration.type === E.SilentIllustration) {
       const t = this.configuration.data.regions.map(this.processRegion);
       return Promise.all(t);
-    } else return this.configuration.type === v.ProductOverlay ? Promise.all(
+    } else return this.configuration.type === E.ProductOverlay ? Promise.all(
       this.configuration.data.regions.map((t) => {
         if (!this.layouts.find((a) => t.panelId === a.panelId))
           throw new K(t);
@@ -7239,8 +7241,8 @@ class an {
     ) : Promise.reject("Unknown silent step. This is a bug");
   }
   evaluateAssetType() {
-    const t = this.configuration.type === v.ProductOverlay && this.product?.overlayImageUrl ? this.product.overlayImageUrl.toLowerCase() : this.configuration.data.asset?.fileLink?.toLowerCase().split("?")[0];
-    return t?.startsWith("data:image/png") || t?.endsWith(".jpeg") || t?.endsWith(".jpg") || t?.endsWith(".png") ? F.Image : (t?.endsWith(".svg") || t?.startsWith("image/svg+xml"), F.Illustration);
+    const t = this.configuration.type === E.ProductOverlay && this.product?.overlayImageUrl ? this.product.overlayImageUrl.toLowerCase() : this.configuration.data.asset?.fileLink?.toLowerCase().split("?")[0];
+    return t?.startsWith("data:image/png") || t?.endsWith(".jpeg") || t?.endsWith(".jpg") || t?.endsWith(".png") ? D.Image : (t?.endsWith(".svg") || t?.startsWith("image/svg+xml"), D.Illustration);
   }
 }
 const Lo = async (n) => {
@@ -7288,7 +7290,11 @@ class Vo {
     const i = e.getSerializedStep(
       t.stepName,
       a.serializableWorkflow.steps
-    ), l = Object.values(a.layouts).map((c) => c.elements).flat().filter((c) => c.stepName === t.stepName).map((c) => ({ id: c.id, region: c.stepRegion }));
+    ), l = Object.values(a.layouts).map((c) => c.elements).flat().filter((c) => c.stepName === t.stepName).map((c) => ({
+      id: c.id,
+      region: c.stepRegion,
+      regionIndex: c.stepRegionIndex
+    }));
     await e.setSelectionsAndElements(t.stepName, [], l, async () => {
       const c = i?.storage?.videoShortUrl, d = i?.storage?.videoUrl;
       e.updateStorage(t.stepName, {
@@ -7299,22 +7305,22 @@ class Vo {
   }
   async regenerateQRCode(t, e, a, i) {
     const r = async () => {
-      const h = (await Fe([e]))[0], m = h?.versions?.find((p) => p.name === "mpeg4")?.link;
-      return { asset: h, link: m };
-    }, o = await new Promise((h, m) => {
+      const h = (await De([e]))[0], g = h?.versions?.find((m) => m.name === "mpeg4")?.link;
+      return { asset: h, link: g };
+    }, o = await new Promise((h, g) => {
       new ii(
         async () => !!(await r()).link,
         async () => {
-          const p = await r();
-          if (!p.link || !p.link)
-            throw new _t(p.asset);
+          const m = await r();
+          if (!m.link || !m.link)
+            throw new _t(m.asset);
           h({
             rel: "mpeg4",
-            href: p.link
+            href: m.link
           });
         },
         () => {
-          m("Poller timed out with 40 attempts @ 3 second interval");
+          g("Poller timed out with 40 attempts @ 3 second interval");
         },
         3e3,
         40
@@ -7328,7 +7334,7 @@ class Vo {
       throw new Re("Cannot create QR code, URL too long.");
     const d = await Lo(c);
     if (!i.data || !i.data.regions)
-      throw new De(i, "Missing regions.");
+      throw new xe(i, "Missing regions.");
     const A = await this.regionElements(i), u = await this.command(d, A, a, i.stepName);
     return u && (u.command && a.getCommandDispatcher()(u.command), u.followup && await u.followup()), await a.setSelectionsAndElements(i.stepName, [], A, async () => {
       a.updateStorage(i.stepName, {
@@ -7338,7 +7344,7 @@ class Vo {
     }), d;
   }
   async regionElements(t) {
-    const e = (a) => ({ id: M(), region: a });
+    const e = (a, i) => ({ id: T(), region: a, regionIndex: i });
     return t.data.regions.map(e);
   }
   async command(t, e, a, i) {
@@ -7353,10 +7359,11 @@ class Vo {
       return new H(
         {
           stepRegion: d,
+          stepRegionIndex: c.regionIndex,
           stepName: i,
           id: c.id,
           src: s,
-          type: F.Image,
+          type: D.Image,
           y: d.top,
           x: d.left,
           width: d.width,
@@ -7375,7 +7382,7 @@ class Me {
   constructor() {
     this.frameSourceSvg = async (t, e) => {
       if (!t)
-        return ga(e);
+        return ma(e);
       const a = t.asset;
       if (!a)
         throw new Bt(t);
@@ -7422,9 +7429,13 @@ class Me {
     const i = e.getSerializedStep(
       t.stepName,
       a.serializableWorkflow.steps
-    ), l = Object.values(a.layouts).map((c) => c.elements).flat().filter((c) => c.stepName === t.stepName).map((c) => ({ id: c.id, region: c.stepRegion }));
+    ), l = Object.values(a.layouts).map((c) => c.elements).flat().filter((c) => c.stepName === t.stepName).map((c) => ({
+      id: c.id,
+      region: c.stepRegion,
+      regionIndex: c.stepRegionIndex
+    }));
     if (!t.option || (t.option.variants || []).length === 0) {
-      const c = t.data.regions.map((d) => ga(d));
+      const c = t.data.regions.map((d) => ma(d));
       e.updateStorage(t.stepName, {
         currentFrameSources: c
       });
@@ -7514,11 +7525,11 @@ class Me {
     );
     o && (o.command && i.getCommandDispatcher()(o.command), o.followup && await o.followup());
   }
-  getCreateElementCommand(t, e, a, i) {
+  getCreateElementCommand(t, e, a, i, r) {
     return new H(
       {
         id: t,
-        type: F.Frame,
+        type: D.Frame,
         x: e.left,
         y: e.top,
         width: e.width,
@@ -7526,18 +7537,19 @@ class Me {
         layer: e.layer,
         layerIndex: e.layerIndex,
         rotation: e.rotation,
-        scaleX: e.width / i.frameData.width,
-        scaleY: e.height / i.frameData.height,
-        path: i.frameData.path,
-        dataWidth: i.frameData.width,
-        dataHeight: i.frameData.height,
+        scaleX: e.width / r.frameData.width,
+        scaleY: e.height / r.frameData.height,
+        path: r.frameData.path,
+        dataWidth: r.frameData.width,
+        dataHeight: r.frameData.height,
         stepRegion: e,
-        stepName: i.stepName,
-        disablePlaceholder: i.disablePlaceholder,
-        pattern: i.pattern,
+        stepRegionIndex: a,
+        stepName: r.stepName,
+        disablePlaceholder: r.disablePlaceholder,
+        pattern: r.pattern,
         immutable: e.immutable
       },
-      a
+      i
     );
   }
   async loadPatternFromString(t, e, a = !0, i = void 0, r) {
@@ -7558,7 +7570,7 @@ class Me {
         svg: d.svg,
         colors: i ?? d.colors
       };
-      mt.set(t, A), e.setPatternData(A, a);
+      gt.set(t, A), e.setPatternData(A, a);
     } else {
       const o = await Oe(t, !0), s = await Ue(o), l = {
         src: t,
@@ -7568,7 +7580,7 @@ class Me {
         svg: void 0,
         colors: void 0
       };
-      mt.set(t, l), e.setPatternData(l, a);
+      gt.set(t, l), e.setPatternData(l, a);
     }
   }
   changeColors(t, e, a) {
@@ -7644,35 +7656,36 @@ class Me {
     );
     r && r(!0);
     const c = t.data.initialZoomLevel, d = await Promise.all(
-      t.data.regions.map(async (h, m) => {
-        const p = await ze(l[m]), g = s.getImageData(), f = a.map((D) => new Rt(D.id)), S = g ? Ta(
-          g,
+      t.data.regions.map(async (h, g) => {
+        const m = await ze(l[g]), p = s.getImageData(), f = a.map((P) => new Rt(P.id)), S = p ? Ta(
           p,
+          m,
           c && !t.data.forceImageCover ? { scale: c } : void 0,
           t.data.forceImageCover
-        ) : void 0, w = g ? {
-          id: M(),
-          src: g.src,
+        ) : void 0, w = p ? {
+          id: T(),
+          src: p.src,
           x: S?.x || 0,
           y: S?.y || 0,
-          width: g.width,
-          height: g.height,
+          width: p.width,
+          height: p.height,
           scaleX: S?.zoom || 1,
           scaleY: S?.zoom || 1,
           rotation: 0
-        } : void 0, I = M(), E = i.getLayouts().find((D) => D.panelId === h.panelId);
-        if (!E)
+        } : void 0, x = T(), b = i.getLayouts().find((P) => P.panelId === h.panelId);
+        if (!b)
           throw new K(h);
         return {
-          command: this.getCreateElementCommand(I, h, E, {
-            frameData: p,
+          command: this.getCreateElementCommand(x, h, g, b, {
+            frameData: m,
             pattern: w,
             disablePlaceholder: t.data.disablePlaceholder,
             stepName: t.stepName
           }),
           regionEl: {
-            id: I,
-            region: h
+            id: x,
+            region: h,
+            regionIndex: g
           },
           removeExistingCommands: f
         };
@@ -7745,17 +7758,18 @@ class zo {
       }).catch((a) => console.error(a));
     });
   }
-  getCreateElementCommand(t, e, a, i) {
+  getCreateElementCommand(t, e, a, i, r) {
     return new H(
       {
         stepRegion: e,
-        stepName: i.stepName,
-        colors: i.svg.colors,
+        stepRegionIndex: a,
+        stepName: r.stepName,
+        colors: r.svg.colors,
         id: t,
-        src: i.src,
-        svg: i.svg.svg,
-        cachedObjectURL: i.objectURL,
-        type: F.Illustration,
+        src: r.src,
+        svg: r.svg.svg,
+        cachedObjectURL: r.objectURL,
+        type: D.Illustration,
         y: e.top,
         x: e.left,
         rotation: e.rotation,
@@ -7765,7 +7779,7 @@ class zo {
         layerIndex: e.layerIndex,
         immutable: e.immutable
       },
-      a
+      i
     );
   }
   getColors(t, e) {
@@ -7804,7 +7818,11 @@ class zo {
       if (l && c) {
         const d = l.variants?.find((A) => A.id === c);
         if (d) {
-          const A = s.map((u) => ({ id: u.id, region: u.stepRegion }));
+          const A = s.map((u) => ({
+            id: u.id,
+            region: u.stepRegion,
+            regionIndex: u.stepRegionIndex
+          }));
           await e.setSelectionsAndElements(
             t.stepName,
             [d],
@@ -7841,7 +7859,7 @@ class zo {
         spotColor: A.spotColor,
         pmsValue: A.pmsValue
       };
-    const s = Da(t, e, a, o), l = await te(s), c = [];
+    const s = xa(t, e, a, o), l = await te(s), c = [];
     for (const d of i) {
       for (const [A, u] of r.entries())
         c.push(new fa(d, A, u));
@@ -7856,22 +7874,22 @@ class zo {
       e[0].id,
       i().map((h) => h.layoutState)
     ), s = { ...o.colors }, l = {};
-    Object.entries(s).forEach(([h, m]) => {
-      const p = { browserValue: m.browserValue, pmsValue: m.pmsValue }, g = m.spotColor;
-      g && (p.spotColor = { profileName: g.profileName, namedColor: g.namedColor }), l[h] = p;
+    Object.entries(s).forEach(([h, g]) => {
+      const m = { browserValue: g.browserValue, pmsValue: g.pmsValue }, p = g.spotColor;
+      p && (m.spotColor = { profileName: p.profileName, namedColor: p.namedColor }), l[h] = m;
     });
-    for (const [h, m] of r.entries()) {
-      const p = typeof m == "string" ? m : m.browserValue, g = typeof m == "string" ? void 0 : m.pmsValue;
-      s[h] = { browserValue: p, spotColor: s[h]?.spotColor, pmsValue: g }, l[h] = { browserValue: p };
+    for (const [h, g] of r.entries()) {
+      const m = typeof g == "string" ? g : g.browserValue, p = typeof g == "string" ? void 0 : g.pmsValue;
+      s[h] = { browserValue: m, spotColor: s[h]?.spotColor, pmsValue: p }, l[h] = { browserValue: m };
     }
     let c = Array.from(Object.values(s)).map((h) => h.browserValue);
     const d = t.data.colorOption;
     d && d.variants?.forEach((h) => {
-      c = c.map((m) => m.toLowerCase() === h.color?.toLowerCase() ? h.name : m);
+      c = c.map((g) => g.toLowerCase() === h.color?.toLowerCase() ? h.name : g);
     }), a.updateMetadata(t.stepName, { colors: c });
     const A = /* @__PURE__ */ new Map();
-    if (Object.entries(s).forEach(([h, m]) => {
-      A.set(h, m);
+    if (Object.entries(s).forEach(([h, g]) => {
+      A.set(h, g);
     }), !o.svg)
       throw new Error("Colors changed before SVG loaded. This should never happen!");
     const u = await this.changeColorsCommand(
@@ -7891,7 +7909,7 @@ class zo {
   }
   async selectVariantCommand(t, e, a, i, r) {
     if (!t.data || !t.data.regions)
-      throw new De(t, "Missing regions.");
+      throw new xe(t, "Missing regions.");
     i(!0);
     const o = a.map((f) => new Rt(f.id));
     t.mandatory && r.setMandatoryFulfilled(t.stepName, !1);
@@ -7901,27 +7919,27 @@ class zo {
     const l = s.fileLink;
     if (!l)
       throw new _t(s);
-    const c = await lt(await this.getIllustrationBody(l)), d = await te(c.svg), A = (f) => {
-      const S = r.getLayouts().find((I) => I.panelId === f.panelId);
-      if (!S)
+    const c = await lt(await this.getIllustrationBody(l)), d = await te(c.svg), A = (f, S) => {
+      const w = r.getLayouts().find((v) => v.panelId === f.panelId);
+      if (!w)
         throw new K(f);
-      const w = M();
+      const x = T();
       return {
-        regionElement: { id: w, region: f },
-        command: this.getCreateElementCommand(w, f, S, {
+        regionElement: { id: x, region: f, regionIndex: S },
+        command: this.getCreateElementCommand(x, f, S, w, {
           stepName: t.stepName,
           src: l,
           objectURL: d,
           svg: c
         })
       };
-    }, u = t.data.regions.map(A), m = [...u.map((f) => f.command), ...o];
-    let p = Array.from(Object.values(c.colors)).map((f) => f.browserValue);
-    const g = t.data.colorOption;
-    return g && g.variants?.forEach((f) => {
-      p = p.map((S) => S.toLowerCase() === f.color?.toLowerCase() ? f.name : S);
-    }), r.updateMetadata(t.stepName, { colors: p }), {
-      command: new L(m),
+    }, u = t.data.regions.map(A), g = [...u.map((f) => f.command), ...o];
+    let m = Array.from(Object.values(c.colors)).map((f) => f.browserValue);
+    const p = t.data.colorOption;
+    return p && p.variants?.forEach((f) => {
+      m = m.map((S) => S.toLowerCase() === f.color?.toLowerCase() ? f.name : S);
+    }), r.updateMetadata(t.stepName, { colors: m }), {
+      command: new L(g),
       followup: async () => {
         await r.setSelectionsAndElements(
           t.stepName,
@@ -7934,32 +7952,32 @@ class zo {
         const f = s.assetConfiguration?.defaultColorVariants || [];
         if (f.length !== 0) {
           const S = {};
-          (s.assetConfiguration?.channelNumbers || []).forEach((I) => {
-            const b = f.find((E) => E.channelNumber === I.number);
-            b && (S[`${I.id.replace(/\W/g, "")}`] = { browserValue: b?.variant?.color || "" });
+          (s.assetConfiguration?.channelNumbers || []).forEach((x) => {
+            const v = f.find((b) => b.channelNumber === x.number);
+            v && (S[`${x.id.replace(/\W/g, "")}`] = { browserValue: v?.variant?.color || "" });
           }), await this.changeColors(
             t,
-            u.map((I) => I.regionElement),
+            u.map((x) => x.regionElement),
             r,
             () => r.getCommandContext().getAllLayouts(),
             new Map(Object.entries(S))
           );
         }
         if (t.data.colorPickerEnabled) {
-          const S = await this.availableColors(t, r) || [], w = Object.keys(c.colors), I = S.length === 1 && w.length === 1;
-          if (I) {
-            const b = S[0], E = w[0];
+          const S = await this.availableColors(t, r) || [], w = Object.keys(c.colors), x = S.length === 1 && w.length === 1;
+          if (x) {
+            const v = S[0], b = w[0];
             await this.changeColors(
               t,
-              u.map((D) => D.regionElement),
+              u.map((P) => P.regionElement),
               r,
               () => r.getCommandContext().getAllLayouts(),
-              /* @__PURE__ */ new Map([[E, b.variant.color]])
+              /* @__PURE__ */ new Map([[b, v.variant.color]])
             );
           }
-          !I && f.length === 0 && await this.changeColors(
+          !x && f.length === 0 && await this.changeColors(
             t,
-            u.map((b) => b.regionElement),
+            u.map((v) => v.regionElement),
             r,
             () => r.getCommandContext().getAllLayouts(),
             /* @__PURE__ */ new Map()
@@ -7996,7 +8014,11 @@ class Go {
       if (c) {
         const d = l.variants?.find((A) => A.id === c);
         if (d) {
-          const A = d.material, u = s.map((h) => ({ id: h.id, region: h.stepRegion }));
+          const A = d.material, u = s.map((h) => ({
+            id: h.id,
+            region: h.stepRegion,
+            regionIndex: h.stepRegionIndex
+          }));
           await e.setSelectionsAndElements(
             t.stepName,
             [d],
@@ -8004,12 +8026,12 @@ class Go {
             async () => {
               const h = e.getModelContainer();
               if (h) {
-                const m = t.data.targetMaterials.map((p) => h.applyMaterialVariant(
-                  p,
+                const g = t.data.targetMaterials.map((m) => h.applyMaterialVariant(
+                  m,
                   l.id || "",
                   A || {}
                 ));
-                Promise.all(m).then(
+                Promise.all(g).then(
                   () => e.setMandatoryFulfilled(t.stepName, !0)
                 );
               }
@@ -8070,7 +8092,11 @@ class Wo {
       if (l && c) {
         const d = l.variants?.find((A) => A.id === c);
         if (d) {
-          const A = s.map((u) => ({ id: u.id, region: u.stepRegion }));
+          const A = s.map((u) => ({
+            id: u.id,
+            region: u.stepRegion,
+            regionIndex: u.stepRegionIndex
+          }));
           await e.setSelectionsAndElements(
             t.stepName,
             [d],
@@ -8140,7 +8166,11 @@ class qo {
     const i = e.getSerializedStep(
       t.stepName,
       a.serializableWorkflow.steps
-    ), l = Object.values(a.layouts).map((c) => c.elements).flat().filter((c) => c.stepName === t.stepName).map((c) => ({ id: c.id, region: c.stepRegion }));
+    ), l = Object.values(a.layouts).map((c) => c.elements).flat().filter((c) => c.stepName === t.stepName).map((c) => ({
+      id: c.id,
+      region: c.stepRegion,
+      regionIndex: c.stepRegionIndex
+    }));
     await e.setSelectionsAndElements(t.stepName, [], l, async () => {
       e.updateStorage(t.stepName, { text: i?.storage?.text }), e.setMandatoryFulfilled(t.stepName, i?.storage?.text !== "");
     });
@@ -8159,20 +8189,21 @@ class qo {
     if (a.setMandatoryFulfilled(t.stepName, e !== ""), !t.data || !t.data.regions || t.data.regions.length <= 0)
       return console.error("Missing configuration."), null;
     a.updateStorage(t.stepName, { text: e }), a.updateMetadata(t.stepName, { text: e });
-    const c = (d, A, u) => {
-      const h = u || M(), p = a.getLayouts().find((f) => f.panelId === A.panelId);
+    const c = (d, A, u, h) => {
+      const g = h || T(), p = a.getLayouts().find((S) => S.panelId === A.panelId);
       if (!p)
         return console.error(`Can not find layout for region: ${A.panelId}`), null;
-      const g = [];
-      return u && g.push(new Rt(h)), g.push(
+      const f = [];
+      return h && f.push(new Rt(g)), f.push(
         new H(
           {
             stepRegion: A,
+            stepRegionIndex: u,
             stepName: t.stepName,
             colors: {},
-            id: h,
+            id: g,
             svg: d,
-            type: F.Illustration,
+            type: D.Illustration,
             y: A.top,
             x: A.left,
             rotation: A.rotation,
@@ -8185,9 +8216,9 @@ class qo {
           p
         )
       ), {
-        id: h,
+        id: g,
         region: A,
-        command: new L(g)
+        command: new L(f)
       };
     };
     if (r.length > 0) {
@@ -8195,7 +8226,12 @@ class qo {
         if (!u.region)
           return null;
         const h = o.svgPrint(e, u.region);
-        return c(h, u.region, u.id);
+        return c(
+          h,
+          u.region,
+          u.regionIndex,
+          u.id
+        );
       }).filter((u) => !!u).filter((u) => !!u).map((u) => u && u.command);
       return {
         command: new L(A),
@@ -8204,7 +8240,7 @@ class qo {
       };
     } else {
       const d = t.data.regions.map(
-        (u) => c(o.svgPrint(e, u), u)
+        (u, h) => c(o.svgPrint(e, u), u, h)
       ), A = d.filter((u) => !!u).map((u) => u && u.command);
       return {
         command: new L(A),
@@ -8260,7 +8296,11 @@ class Ho {
       if (l && c) {
         const d = l.variants?.find((A) => A.id === c);
         if (d) {
-          const A = s.map((u) => ({ id: u.id, region: u.stepRegion }));
+          const A = s.map((u) => ({
+            id: u.id,
+            region: u.stepRegion,
+            regionIndex: u.stepRegionIndex
+          }));
           await e.setSelectionsAndElements(
             t.stepName,
             [d],
@@ -8285,20 +8325,21 @@ class Ho {
     if (!o)
       return console.error("No URL for picture!"), null;
     i(!0), t.mandatory && a.setMandatoryFulfilled(t.stepName, !1);
-    const l = a.getRegionElements(t.stepName).map((A) => new Rt(A.id)), c = (A) => {
-      const h = a.getLayouts().find((p) => p.panelId === A.panelId);
-      if (!h)
+    const l = a.getRegionElements(t.stepName).map((A) => new Rt(A.id)), c = (A, u) => {
+      const g = a.getLayouts().find((p) => p.panelId === A.panelId);
+      if (!g)
         throw new K(A);
-      const m = M();
+      const m = T();
       return {
-        regionElement: { id: m, region: A },
+        regionElement: { id: m, region: A, regionIndex: u },
         command: new H(
           {
             stepName: t.stepName,
             stepRegion: A,
+            stepRegionIndex: u,
             id: m,
             src: o,
-            type: F.Image,
+            type: D.Image,
             y: A.top,
             x: A.left,
             rotation: A.rotation,
@@ -8309,7 +8350,7 @@ class Ho {
             immutable: A.immutable,
             preserveAspectRatio: "none"
           },
-          h
+          g
         )
       };
     }, d = t.data.regions.map(c);
@@ -8440,7 +8481,11 @@ class Yo {
       if (l && c) {
         const d = l.variants?.find((A) => A.id === c);
         if (d) {
-          const A = s.map((u) => ({ id: u.id, region: u.stepRegion }));
+          const A = s.map((u) => ({
+            id: u.id,
+            region: u.stepRegion,
+            regionIndex: u.stepRegionIndex
+          }));
           await e.setSelectionsAndElements(
             t.stepName,
             [d],
@@ -8464,7 +8509,7 @@ class Yo {
     if (a.length > 0) {
       const l = (d) => {
         const A = d.region;
-        if (!r.find((m) => m.panelId === A?.panelId))
+        if (!r.find((g) => g.panelId === A?.panelId))
           throw new K(A);
         const h = s();
         return new fa(d.id, this.shapeFillId, h);
@@ -8480,9 +8525,9 @@ class Yo {
         }
       };
     } else {
-      const l = (u) => {
-        const h = r.find((S) => S.panelId === u.panelId);
-        if (!h)
+      const l = (u, h) => {
+        const g = r.find((w) => w.panelId === u.panelId);
+        if (!g)
           throw new K(u);
         const m = s(), p = `
                     <svg
@@ -8504,20 +8549,21 @@ class Yo {
                             fill="${m}"
                         />
                     </svg>
-                `, g = {};
-        g[this.shapeFillId] = { browserValue: m };
-        const f = M();
+                `, f = {};
+        f[this.shapeFillId] = { browserValue: m };
+        const S = T();
         return {
-          id: f,
+          id: S,
           region: u,
           command: new H(
             {
               stepRegion: u,
+              stepRegionIndex: h,
               stepName: t.stepName,
-              colors: g,
-              id: f,
+              colors: f,
+              id: S,
               svg: p,
-              type: F.Illustration,
+              type: D.Illustration,
               y: u.top,
               x: u.left,
               rotation: u.rotation,
@@ -8528,10 +8574,10 @@ class Yo {
               immutable: u.immutable,
               excludeFromExport: t.data.excludeFromPrint
             },
-            h
+            g
           )
         };
-      }, c = t.data.regions.map(l), d = c.filter((u) => !!u).map((u) => u?.command), A = c.filter((u) => !!u).map((u) => ({ id: u.id, region: u.region }));
+      }, c = t.data.regions.map(l), d = c.filter((u) => !!u).map((u) => u?.command), A = c.filter((u) => !!u).map((u, h) => ({ id: u.id, region: u.region, regionIndex: h }));
       return {
         command: new L(d),
         followup: async () => {
@@ -8587,18 +8633,18 @@ const Ko = new Jo(), aa = (n, t, e, a, i) => {
     const A = Math.max(...s);
     if (A <= n.width)
       return [r, A];
-    const u = s.reduce((g, f, S, w) => f > w[g] ? S : g, 0), h = r[u];
-    let m = !1, p = h.length;
-    for (; !m && p > -1; ) {
-      p = h.lastIndexOf(" ", p - 1);
-      const g = [h.slice(0, p), h.slice(p + 1)], f = g.map((w) => pt(w, a, i));
-      f[0] <= n.width && (r = [...r.slice(0, u), ...g, ...r.slice(u + 1)], s = [
+    const u = s.reduce((p, f, S, w) => f > w[p] ? S : p, 0), h = r[u];
+    let g = !1, m = h.length;
+    for (; !g && m > -1; ) {
+      m = h.lastIndexOf(" ", m - 1);
+      const p = [h.slice(0, m), h.slice(m + 1)], f = p.map((w) => pt(w, a, i));
+      f[0] <= n.width && (r = [...r.slice(0, u), ...p, ...r.slice(u + 1)], s = [
         ...s.slice(0, u),
         ...f,
         ...s.slice(u + 1)
-      ], o += 1, m = !0);
+      ], o += 1, g = !0);
     }
-    m || (c = !1);
+    g || (c = !1);
   }
   return [null, null];
 }, ve = (n, t, e, a, i) => {
@@ -8682,11 +8728,11 @@ class Xo {
       let A = t.data.defaultText || "";
       const u = e.getWorkflowExperience().getBundle();
       if (u && t.globalPropertyAspectConfigurations) {
-        const p = u.getGlobalPropertyConfiguration()?.aspects?.find(
-          (g) => g.type === G.Text && t.globalPropertyAspectConfigurations?.map((f) => f.aspectName).includes(g.name)
+        const m = u.getGlobalPropertyConfiguration()?.aspects?.find(
+          (p) => p.type === G.Text && t.globalPropertyAspectConfigurations?.map((f) => f.aspectName).includes(p.name)
         );
-        if (p) {
-          const f = u.getGlobalPropertyStateManager().getAspect(p.name);
+        if (m) {
+          const f = u.getGlobalPropertyStateManager().getAspect(m.name);
           f && (A = f);
         }
       }
@@ -8846,7 +8892,7 @@ class Xo {
     });
   }
   updateInputText(t, e, a, i) {
-    const r = i.getStepStorage(a.stepName), o = xt(t, i), s = this.getProcessedInput(o, a.data, r?.customiseAllText ?? !1), l = {
+    const r = i.getStepStorage(a.stepName), o = Ft(t, i), s = this.getProcessedInput(o, a.data, r?.customiseAllText ?? !1), l = {
       command: void 0,
       helperData: {},
       errorData: this.getErrorsForText(t, s, a, i)
@@ -8857,17 +8903,17 @@ class Xo {
     const c = [], d = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map();
     for (const u of e) {
       if (!u.fontData) throw new R("Failed to resolve font data for text.");
-      const [h, m] = ve(
+      const [h, g] = ve(
         u.fontSize,
         u.fontData,
         { left: u.x, top: u.y, width: u.width, height: u.height, rotation: u.rotation },
         [s],
         { size: a.data.size, minSize: a.data.minSize, maxSize: a.data.maxSize }
       );
-      d.set(u.id, h), A.set(u.id, m);
-      const p = a.data.curved ? s : (m || []).join(`
+      d.set(u.id, h), A.set(u.id, g);
+      const m = a.data.curved ? s : (g || []).join(`
 `);
-      c.push(this.generateTextChangeCommandsForRegion(h, a.data, u.id, p));
+      c.push(this.generateTextChangeCommandsForRegion(h, a.data, u.id, m));
     }
     return !a.data.curved && e.length > 0 && !Array.from(A.values()).every((h) => h) ? (l.errorData || (l.errorData = {}), l.errorData.doesNotFit = !0, l) : (i.updateStorage(a.stepName, { text: t }), i.updateMetadata(a.stepName, {
       text: s
@@ -8906,16 +8952,20 @@ class Xo {
       if (l && c) {
         const d = l.variants?.find((A) => A.id === c);
         if (d) {
-          const A = await this.fontDataFromVariant(d), u = s.map((g) => ({ id: g.id, region: g.stepRegion })), h = i.storage?.color;
-          let m = i.storage?.text;
-          const p = e.getWorkflowExperience().getBundle();
-          if (p && t.globalPropertyAspectConfigurations) {
-            const f = p.getGlobalPropertyConfiguration()?.aspects?.find(
+          const A = await this.fontDataFromVariant(d), u = s.map((p) => ({
+            id: p.id,
+            region: p.stepRegion,
+            regionIndex: p.stepRegionIndex
+          })), h = i.storage?.color;
+          let g = i.storage?.text;
+          const m = e.getWorkflowExperience().getBundle();
+          if (m && t.globalPropertyAspectConfigurations) {
+            const f = m.getGlobalPropertyConfiguration()?.aspects?.find(
               (S) => S.type === G.Text && t.globalPropertyAspectConfigurations?.map((w) => w.aspectName).includes(S.name)
             );
             if (f) {
-              const w = p.getGlobalPropertyStateManager().getAspect(f.name);
-              w && (m = w);
+              const w = m.getGlobalPropertyStateManager().getAspect(f.name);
+              w && (g = w);
             }
           }
           if (await e.setSelectionsAndElements(
@@ -8923,17 +8973,17 @@ class Xo {
             [d],
             u,
             async () => {
-              e.updateMetadata(t.stepName, { color: h, text: m }), e.updateStorage(t.stepName, { text: m, inputText: m });
-              const g = s.map((S) => new en(S.id, A)), f = new L(g);
+              e.updateMetadata(t.stepName, { color: h, text: g }), e.updateStorage(t.stepName, { text: g, inputText: g });
+              const p = s.map((S) => new en(S.id, A)), f = new L(p);
               e.getCommandDispatcher()(f);
             }
           ), s.length === 0 && l) {
-            const g = J.getDefaultVariant(l);
-            if (g) {
+            const p = J.getDefaultVariant(l);
+            if (p) {
               const f = await this.selectVariantCommand(
                 t,
-                g,
-                { text: m },
+                p,
+                { text: g },
                 [],
                 e,
                 () => {
@@ -8944,13 +8994,13 @@ class Xo {
               e.getCommandDispatcher()(f.command);
             }
           } else {
-            const { command: g } = j.updateInputText(
-              m || "",
+            const { command: p } = j.updateInputText(
+              g || "",
               s,
               t,
               e
             );
-            g && e.getCommandDispatcher()(g);
+            p && e.getCommandDispatcher()(p);
           }
         }
       }
@@ -8964,11 +9014,11 @@ class Xo {
           const h = c.getGlobalPropertyStateManager().getAspect(A.name);
           if (h)
             if (s.length === 0 && l) {
-              const m = J.getDefaultVariant(l);
-              if (m) {
-                const p = await this.selectVariantCommand(
+              const g = J.getDefaultVariant(l);
+              if (g) {
+                const m = await this.selectVariantCommand(
                   t,
-                  m,
+                  g,
                   { text: h },
                   [],
                   e,
@@ -8977,16 +9027,16 @@ class Xo {
                   () => {
                   }
                 );
-                e.getCommandDispatcher()(p.command);
+                e.getCommandDispatcher()(m.command);
               }
             } else {
-              const { command: m } = j.updateInputText(
+              const { command: g } = j.updateInputText(
                 h,
                 s,
                 t,
                 e
               );
-              m && e.getCommandDispatcher()(m);
+              g && e.getCommandDispatcher()(g);
             }
         }
       }
@@ -9027,16 +9077,16 @@ class Xo {
   async selectVariantCommand(t, e, a, i, r, o, s, l, c) {
     const d = r.markUpdatePending(), A = await this.fontDataFromVariant(e);
     if (i.length > 0) {
-      const u = i.map((p) => new en(p.id, A));
+      const u = i.map((m) => new en(m.id, A));
       if (l) {
-        const p = i.map((g) => new ta(g.id, l));
-        u.push(...p);
+        const m = i.map((p) => new ta(p.id, l));
+        u.push(...m);
       }
       if (c) {
-        const p = i.map(
-          (g) => new ea(g.id, c, t.data.strokeThickness)
+        const m = i.map(
+          (p) => new ea(p.id, c, t.data.strokeThickness)
         );
-        u.push(...p);
+        u.push(...m);
       }
       const h = await this.changeInputTextWithRegion(
         t,
@@ -9073,21 +9123,21 @@ class Xo {
         a?.customiseAllText ?? !1,
         o,
         s
-      ), m = u.flatMap((g) => g.commands);
+      ), g = u.flatMap((p) => p.commands);
       if (l) {
-        const g = u.map(
+        const p = u.map(
           (f) => new ta(f.regionElement.id, l)
         );
-        m.push(...g);
+        g.push(...p);
       }
       if (c) {
-        const g = i.map(
+        const p = i.map(
           (f) => new ea(f.id, c, t.data.strokeThickness)
         );
-        m.push(...g);
+        g.push(...p);
       }
-      return h && m.push(h), {
-        command: new L(m),
+      return h && g.push(h), {
+        command: new L(g),
         followup: async () => {
           r.markUpdateCompleted(d);
         }
@@ -9105,24 +9155,25 @@ class Xo {
   async createTextboxRegions(t, e, a, i, r, o) {
     if (!a || !a.regions)
       throw new Error("Step data not supplied");
-    const s = r.text || a.defaultText || "", l = xt(s, o), c = this.getProcessedInput(l, a, !1), d = async (u) => {
-      const m = o.getLayouts().find((g) => g.panelId === u.panelId), p = M();
+    const s = r.text || a.defaultText || "", l = Ft(s, o), c = this.getProcessedInput(l, a, !1), d = async (u, h) => {
+      const m = o.getLayouts().find((f) => f.panelId === u.panelId), p = T();
       try {
         if (!m)
           throw new Ne("Failed to find layout for region: " + u.panelId);
-        const g = a.colorOption;
-        let f;
-        if (g && g.variants) {
-          const Q = g.variants.find((U) => U.id === g.defaultVariant?.id) || g.variants[0];
-          f = this.createTextFillSpotColor(g, Q), o.updateStorage(t, {
-            colorProfileAssetKey: g.colorProfile?.key
+        const f = a.colorOption;
+        let S;
+        if (f && f.variants) {
+          const U = f.variants.find((M) => M.id === f.defaultVariant?.id) || f.variants[0];
+          S = this.createTextFillSpotColor(f, U), o.updateStorage(t, {
+            colorProfileAssetKey: f.colorProfile?.key
           });
         }
-        const S = await this.getDefaultColor(a), w = S || "#000000", I = {
+        const w = await this.getDefaultColor(a), x = w || "#000000", v = {
           stepRegion: u,
+          stepRegionIndex: h,
           stepName: t,
           align: this.textAlign(a),
-          fill: r.color ? r.color : w,
+          fill: r.color ? r.color : x,
           fontSize: a.size || na,
           fontData: i,
           id: p,
@@ -9131,7 +9182,7 @@ class Xo {
           rotation: u.rotation,
           text: c,
           input: s,
-          type: F.Textbox,
+          type: D.Textbox,
           vertical: a.vertical,
           x: u.left,
           y: u.top,
@@ -9141,38 +9192,38 @@ class Xo {
           verticalAlign: a.verticalAlign || "middle",
           curved: a.curved,
           paths: a.paths,
-          fillSpotColorDefinition: f
-        }, b = [], E = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map();
-        if (!I.fontData) throw new R("Failed to resolve font data for text.");
-        const [x, T] = ve(
-          I.fontSize,
-          I.fontData,
+          fillSpotColorDefinition: S
+        }, b = [], P = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Map();
+        if (!v.fontData) throw new R("Failed to resolve font data for text.");
+        const [N, O] = ve(
+          v.fontSize,
+          v.fontData,
           {
-            left: I.x,
-            top: I.y,
-            width: I.width,
-            height: I.height,
-            rotation: I.rotation,
+            left: v.x,
+            top: v.y,
+            width: v.width,
+            height: v.height,
+            rotation: v.rotation,
             panelId: ""
           },
           [c],
           { size: a.size, minSize: a.minSize, maxSize: a.maxSize }
         );
-        E.set(I.id, x), D.set(I.id, T);
-        const $ = a.curved || a.vertical ? c : (T || []).join(`
+        P.set(v.id, N), F.set(v.id, O);
+        const I = a.curved || a.vertical ? c : (O || []).join(`
 `);
         b.push(
-          this.generateTextChangeCommandsForRegion(x, a, I.id, $)
+          this.generateTextChangeCommandsForRegion(N, a, v.id, I)
         );
-        const B = new H(I, m);
+        const Q = new H(v, m);
         return {
-          regionElement: { id: p, region: u },
-          commands: [B, ...b],
-          newElement: I,
+          regionElement: { id: p, region: u, regionIndex: h },
+          commands: [Q, ...b],
+          newElement: v,
           fontData: i
         };
-      } catch (g) {
-        throw console.log(g), new Te("Error adding font to region");
+      } catch (f) {
+        throw console.log(f), new Te("Error adding font to region");
       }
     }, A = await Promise.all(a.regions.map(d)).catch((u) => {
       throw u instanceof Te ? (Ko.setLatestToast("Failed to load font.", qe.Error), u) : u instanceof Ne ? u : new Error(u);
@@ -9202,30 +9253,30 @@ class Xo {
    * @deprecated
    */
   async changeInputTextWithRegion(t, e, a, i, r, o, s, l, c, d) {
-    const A = (i || "").replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g, ""), u = xt(A, o), h = this.getProcessedInput(u, t.data, s), m = o.getRegionElements(t.stepName), p = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
-    for (const b of m)
-      if (b.region) {
-        const [E, D] = ve(
+    const A = (i || "").replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g, ""), u = Ft(A, o), h = this.getProcessedInput(u, t.data, s), g = o.getRegionElements(t.stepName), m = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map();
+    for (const v of g)
+      if (v.region) {
+        const [b, P] = ve(
           e,
           a,
-          b.region,
+          v.region,
           [h],
           { size: t.data.size, minSize: t.data.minSize, maxSize: t.data.maxSize }
         );
-        p.set(b.id, E), g.set(b.id, D);
+        m.set(v.id, b), p.set(v.id, P);
       }
     const S = (() => {
       if (t.data && t.data.maxLength && h.length > t.data.maxLength)
         return d && d(!0), { info: "0" };
-      const b = o.getWorkflowExperience().getProfanityList(), E = ca(h.toLowerCase());
-      for (const D of E)
-        for (const x in b) {
-          const T = b[x].toLowerCase().replace(/\s/g, "");
-          if (D === T)
+      const v = o.getWorkflowExperience().getProfanityList(), b = ca(h.toLowerCase());
+      for (const P of b)
+        for (const F in v) {
+          const N = v[F].toLowerCase().replace(/\s/g, "");
+          if (P === N)
             return l(!0), { error: "Blocked profanity." };
         }
       return !t.data.vertical && !t.data.allowNewlines && (h.includes(`
-`) || h.includes("\r")) ? (l(!0), { error: "Cannot span multiple lines." }) : !t.data.curved && !Array.from(g.values()).every((x) => x) ? (l(!0), { error: "Does not fit." }) : (l(!1), { info: (t.data.maxLength - h.length).toString() });
+`) || h.includes("\r")) ? (l(!0), { error: "Cannot span multiple lines." }) : !t.data.curved && !Array.from(p.values()).every((F) => F) ? (l(!0), { error: "Does not fit." }) : (l(!1), { info: (t.data.maxLength - h.length).toString() });
     })();
     if (S.error) {
       c(S.error);
@@ -9237,15 +9288,15 @@ class Xo {
       text: this.injectReplaceableText(A, t.data)
     }), (r.defaultCleared || !t.data.deleteDefaultOnFocus) && A.trim() !== "" && o.setMandatoryFulfilled(t.stepName, !0);
     const w = [];
-    for (const b of m) {
-      const E = t.data.curved ? h : (g.get(b.id) || []).join(`
+    for (const v of g) {
+      const b = t.data.curved ? h : (p.get(v.id) || []).join(`
 `);
       w.push(
         this.generateTextChangeCommandsForRegion(
-          p.get(b.id) || 1,
+          m.get(v.id) || 1,
           t.data,
-          b.id,
-          E
+          v.id,
+          b
         )
       );
     }
@@ -9330,7 +9381,7 @@ class os {
             u = (A * 100 | 0) / 100;
             break;
           default:
-            throw new Ft("Failed to encode path.");
+            throw new Dt("Failed to encode path.");
         }
         l || o.push(" "), o.push(u), l = !1;
       }
@@ -9344,12 +9395,12 @@ class os {
     for (e.lastIndex = 0; r = e.exec(t); ) {
       const o = r[1].toLowerCase(), s = (r[2].match(a) || []).map(parseFloat), l = o === r[1], c = nn[o];
       if (s.length < c.length)
-        throw new Ft(
+        throw new Dt(
           `Path type "${o}" given ${s.length} arguments, expected ${c.length}.`
         );
       if (c.length > 0) {
         if (s.length % c.length !== 0)
-          throw new Ft(
+          throw new Dt(
             `Path type "${o}" given ${s.length} arguments, not divisible by ${c.length}`
           );
         for (let d = 0; d < s.length / c.length; d++) {
@@ -9374,7 +9425,7 @@ class os {
         if (s in r && l in r) {
           const c = [r[s], r[l]], d = e(c);
           if (d.length < 2)
-            throw new Ft("Transformer must return at least 2 points.");
+            throw new Dt("Transformer must return at least 2 points.");
           r[s] = d[0], r[l] = d[1];
         }
       }
@@ -9411,32 +9462,32 @@ class ss extends Zo {
     const a = yo(ts), r = t !== "" ? ((w) => w.charAt(0).toUpperCase() + w.substr(1).toLowerCase())(t) : "", o = a.getPath(r, 0, 72, 72), s = o.toSVG(2), l = o.getBoundingBox(), c = l.x2 - l.x1, d = o.toPathData(3), A = () => {
       const w = at("g");
       w.classList.add("module-text-group");
-      const I = at("defs");
-      w.appendChild(I), I.appendChild(as(0, 2, 2, "shadow"));
-      const b = at("path");
-      b.setAttribute("d", d), b.setAttribute("stroke", "black"), b.setAttribute("stroke-width", "3"), I.appendChild(b);
-      const E = at("g");
-      E.classList.add("module-layer0"), w.appendChild(E), E.setAttribute("filter", "url(#shadow)"), E.innerHTML = b.outerHTML;
-      const D = at("g");
-      D.classList.add("module-layer1"), w.appendChild(D), D.setAttribute("stroke-width", "3"), D.setAttribute("stroke", "rgb(45,41,38)"), D.setAttribute("fill", "rgb(45,41,38)"), D.setAttribute("transform", "translate(0.5,0)"), D.innerHTML = s;
-      const x = at("g");
-      x.classList.add("module-layer2"), w.appendChild(x), x.setAttribute("fill", "rgb(255,209,0)"), x.setAttribute("transform", "translate(1,-0.1)"), x.innerHTML = s;
-      const T = at("g");
-      return T.classList.add("module-layer3"), w.appendChild(T), T.setAttribute("fill", "white"), T.innerHTML = s, new os(w).transform(([B, Q]) => [B, Q + (c / 2 - B) ** 2 / (c * 6)]), w;
+      const x = at("defs");
+      w.appendChild(x), x.appendChild(as(0, 2, 2, "shadow"));
+      const v = at("path");
+      v.setAttribute("d", d), v.setAttribute("stroke", "black"), v.setAttribute("stroke-width", "3"), x.appendChild(v);
+      const b = at("g");
+      b.classList.add("module-layer0"), w.appendChild(b), b.setAttribute("filter", "url(#shadow)"), b.innerHTML = v.outerHTML;
+      const P = at("g");
+      P.classList.add("module-layer1"), w.appendChild(P), P.setAttribute("stroke-width", "3"), P.setAttribute("stroke", "rgb(45,41,38)"), P.setAttribute("fill", "rgb(45,41,38)"), P.setAttribute("transform", "translate(0.5,0)"), P.innerHTML = s;
+      const F = at("g");
+      F.classList.add("module-layer2"), w.appendChild(F), F.setAttribute("fill", "rgb(255,209,0)"), F.setAttribute("transform", "translate(1,-0.1)"), F.innerHTML = s;
+      const N = at("g");
+      return N.classList.add("module-layer3"), w.appendChild(N), N.setAttribute("fill", "white"), N.innerHTML = s, new os(w).transform(([I, Q]) => [I, Q + (c / 2 - I) ** 2 / (c * 6)]), w;
     }, u = at("g");
     u.classList.add("module-root");
     const h = at("defs");
     u.appendChild(h);
-    const m = at("g");
-    m.classList.add("module-bounds"), u.appendChild(m);
-    const p = es(e.height, e.width);
-    p.setAttribute("opacity", "0"), m.appendChild(p);
     const g = at("g");
-    g.classList.add("module-text-enclosure"), u.appendChild(g);
+    g.classList.add("module-bounds"), u.appendChild(g);
+    const m = es(e.height, e.width);
+    m.setAttribute("opacity", "0"), g.appendChild(m);
+    const p = at("g");
+    p.classList.add("module-text-enclosure"), u.appendChild(p);
     const f = A();
-    g.appendChild(f);
+    p.appendChild(f);
     const S = Oi(d);
-    return is(g, S, e.height, e.width, 0.35, 0.65), ns(u.outerHTML);
+    return is(p, S, e.height, e.width, 0.35, 0.65), ns(u.outerHTML);
   }
 }
 async function Ai(n) {
@@ -9460,22 +9511,22 @@ const ls = [
   const a = t.data, i = e.data.baseUrl, r = a.assetUrl.replace("localhost", "localstack"), o = i.slice(0, 4) === "http" ? "" : "https://", s = new URL(o + i);
   s.searchParams.append("video", Ha(JSON.stringify([{ href: r }]))), s.pathname = s.pathname + (s.pathname.slice(-1) === "/" ? "" : "/");
   const l = s.toString(), d = `data:image/svg+xml;base64,${Ha(await Sn(l, { type: "svg" }))}`, A = (h) => {
-    const m = n.find((g) => g.panelId === h.panelId);
-    if (!m)
+    const g = n.find((p) => p.panelId === h.panelId);
+    if (!g)
       throw new K(h);
-    const p = M();
+    const m = T();
     return new H(
       {
-        id: p,
+        id: m,
         src: d,
-        type: F.Image,
+        type: D.Image,
         y: h.top,
         x: h.left,
         width: h.width,
         height: h.height,
         rotation: 0
       },
-      m
+      g
     );
   }, u = e.data.regions;
   try {
@@ -9489,10 +9540,10 @@ const ls = [
     const s = Mo(i, a.option);
     s && (t[a.stepName] = { selectedVariants: [s] });
     const l = async (c) => {
-      const d = await ti(c, s?.asset?.fileLink), A = await ze(d), u = M(), h = n.find((p) => p.panelId === c.panelId);
+      const d = await ti(c, s?.asset?.fileLink), A = await ze(d), u = T(), h = n.find((m) => m.panelId === c.panelId);
       if (!h)
         throw new K(c);
-      const m = Ta(
+      const g = Ta(
         o,
         A,
         {
@@ -9507,7 +9558,7 @@ const ls = [
           {
             id: u,
             path: A.path,
-            type: F.Frame,
+            type: D.Frame,
             forceImageCover: a.data.forceImageCover,
             x: c.left,
             y: c.top,
@@ -9521,13 +9572,13 @@ const ls = [
             pattern: {
               id: `${u}-pattern`,
               src: o.src,
-              x: m.x,
-              y: m.y,
+              x: g.x,
+              y: g.y,
               width: o.width,
               height: o.height,
               rotation: 0,
-              scaleX: m.zoom,
-              scaleY: m.zoom,
+              scaleX: g.zoom,
+              scaleY: g.zoom,
               svg: o.svg,
               colors: o.colors
             }
@@ -9544,7 +9595,7 @@ const ls = [
   const i = e.data, r = a.option;
   if (!r)
     return console.error(`No option for step ${a.stepName}.`), [];
-  const o = r.variants?.find((b) => b.id === i.illustrationVariantId) || le(r);
+  const o = r.variants?.find((v) => v.id === i.illustrationVariantId) || le(r);
   if (!o)
     return console.error(`No variant with ID: ${i.illustrationVariantId}`), [];
   if (!o.asset)
@@ -9553,73 +9604,73 @@ const ls = [
   const s = o.asset?.fileLink;
   if (!s)
     return console.error(`No asset link for variant with ID: ${i.illustrationVariantId}`), [];
-  const l = await nt(s, !0), c = /<svg.*?<\/svg>/s, d = l.match(c) || [], A = d?.length > 0 ? d[0] : "", m = At().parseFromString(A, "image/svg+xml").firstElementChild;
-  if (!m)
+  const l = await nt(s, !0), c = /<svg.*?<\/svg>/s, d = l.match(c) || [], A = d?.length > 0 ? d[0] : "", g = At().parseFromString(A, "image/svg+xml").firstElementChild;
+  if (!g)
     return console.error("Failed to read SVG."), [];
-  Pa(m);
-  const p = {};
-  Mt(m, (b) => {
-    ls.includes(b.tagName) && !b.attributes.getNamedItem("fill") && b.setAttribute("fill", "#000000");
-    const E = b.attributes.getNamedItem("fill");
-    if (E && E.value !== "none") {
-      const x = E.value, $ = `spiff-fill-${x.replace(/\W/g, "")}`;
-      b.classList.add($), p[$] = { browserValue: x };
-    }
-    const D = b.attributes.getNamedItem("stroke");
-    if (D && D.value !== "none") {
-      const x = D.value, $ = `spiff-stroke-${x.replace(/\W/g, "")}`;
-      b.classList.add($), p[$] = { browserValue: x };
+  Pa(g);
+  const m = {};
+  Mt(g, (v) => {
+    ls.includes(v.tagName) && !v.attributes.getNamedItem("fill") && v.setAttribute("fill", "#000000");
+    const b = v.attributes.getNamedItem("fill");
+    if (b && b.value !== "none") {
+      const F = b.value, O = `spiff-fill-${F.replace(/\W/g, "")}`;
+      v.classList.add(O), m[O] = { browserValue: F };
+    }
+    const P = v.attributes.getNamedItem("stroke");
+    if (P && P.value !== "none") {
+      const F = P.value, O = `spiff-stroke-${F.replace(/\W/g, "")}`;
+      v.classList.add(O), m[O] = { browserValue: F };
     }
   });
-  const f = Pt().serializeToString(m), S = i.colors;
+  const f = Pt().serializeToString(g), S = i.colors;
   if (S) {
-    for (const [b, E] of Object.entries(p))
-      for (const D of Object.keys(S))
-        if (E.browserValue === D) {
-          p[b] = { browserValue: S[D] };
+    for (const [v, b] of Object.entries(m))
+      for (const P of Object.keys(S))
+        if (b.browserValue === P) {
+          m[v] = { browserValue: S[P] };
           break;
         }
   }
-  const w = (b) => {
-    const E = n.find((x) => x.panelId === b.panelId);
-    if (!E)
-      throw new K(b);
-    const D = M();
+  const w = (v) => {
+    const b = n.find((F) => F.panelId === v.panelId);
+    if (!b)
+      throw new K(v);
+    const P = T();
     return new H(
       {
-        colors: p,
-        id: D,
+        colors: m,
+        id: P,
         svg: f,
-        type: F.Illustration,
-        y: b.top,
-        x: b.left,
-        rotation: b.rotation,
-        width: b.width,
-        height: b.height,
-        layer: b.layer,
-        layerIndex: b.layerIndex,
-        immutable: b.immutable
+        type: D.Illustration,
+        y: v.top,
+        x: v.left,
+        rotation: v.rotation,
+        width: v.width,
+        height: v.height,
+        layer: v.layer,
+        layerIndex: v.layerIndex,
+        immutable: v.immutable
       },
-      E
+      b
     );
-  }, I = a.data.regions;
+  }, x = a.data.regions;
   try {
-    return I.map(w);
-  } catch (b) {
-    return console.error(b), [];
+    return x.map(w);
+  } catch (v) {
+    return console.error(v), [];
   }
 }, us = async (n, t, e) => {
   const a = await Ai(e.data.module), i = t.data, r = (s, l) => {
     const c = n.find((A) => A.panelId === l.panelId);
     if (!c)
       throw new K(l);
-    const d = M();
+    const d = T();
     return new H(
       {
         colors: {},
         id: d,
         svg: s,
-        type: F.Illustration,
+        type: D.Illustration,
         y: l.top,
         x: l.left,
         rotation: l.rotation,
@@ -9655,12 +9706,12 @@ const ls = [
     const A = n.find((h) => h.panelId === d.panelId);
     if (!A)
       throw new K(d);
-    const u = M();
+    const u = T();
     return new H(
       {
         id: u,
         src: s,
-        type: F.Image,
+        type: D.Image,
         y: d.top,
         x: d.left,
         rotation: d.rotation,
@@ -9679,7 +9730,7 @@ const ls = [
   } catch (d) {
     return console.error(d), [];
   }
-}, ms = async (n, t, e, a) => {
+}, gs = async (n, t, e, a) => {
   const i = e.data, r = a.option;
   if (!r)
     return console.error(`No option for step ${a.stepName}.`), [];
@@ -9688,7 +9739,7 @@ const ls = [
     return console.error(`No variant with ID: ${i.colorVariantId}`), [];
   t[a.stepName] = { selectedVariants: [o] };
   const s = (c) => {
-    const d = n.find((p) => p.panelId === c.panelId);
+    const d = n.find((m) => m.panelId === c.panelId);
     if (!d)
       throw new K(c);
     const A = `
@@ -9711,13 +9762,13 @@ const ls = [
                 fill="${o?.color}"
             />
         </svg>
-        `, h = { "spiff-fill-shape": { browserValue: o.color || "#000000" } }, m = M();
+        `, h = { "spiff-fill-shape": { browserValue: o.color || "#000000" } }, g = T();
     return new H(
       {
         colors: h,
-        id: m,
+        id: g,
         svg: A,
-        type: F.Illustration,
+        type: D.Illustration,
         y: c.top,
         x: c.left,
         rotation: c.rotation,
@@ -9735,8 +9786,8 @@ const ls = [
   } catch (c) {
     return console.error(c), [];
   }
-}, gs = async (n, t, e) => {
-  const a = [], r = t.type === v.ProductOverlay ? e || t.data.asset?.fileLink || "" : t.data.asset?.fileLink || "", s = r.endsWith(".jpeg") || r.endsWith(".jpg") || r.endsWith(".png") ? F.Image : (r.endsWith(".svg"), F.Illustration), l = t.data.regions;
+}, ms = async (n, t, e) => {
+  const a = [], r = t.type === E.ProductOverlay ? e || t.data.asset?.fileLink || "" : t.data.asset?.fileLink || "", s = r.endsWith(".jpeg") || r.endsWith(".jpg") || r.endsWith(".png") ? D.Image : (r.endsWith(".svg"), D.Illustration), l = t.data.regions;
   if (s === "image")
     try {
       l.forEach((c) => {
@@ -9744,7 +9795,7 @@ const ls = [
         if (!d)
           throw new K(c);
         const A = {
-          id: M(),
+          id: T(),
           src: r,
           type: s,
           y: c.top,
@@ -9753,7 +9804,7 @@ const ls = [
           height: c.height,
           layer: c.layer,
           layerIndex: c.layerIndex,
-          productOverlay: t.type === v.ProductOverlay ? !0 : void 0,
+          productOverlay: t.type === E.ProductOverlay ? !0 : void 0,
           scaleX: 1,
           scaleY: 1,
           rotation: c.rotation,
@@ -9767,17 +9818,17 @@ const ls = [
     }
   else {
     const c = await nt(r, !0), d = (A) => {
-      const u = /<svg.*?<\/svg>/s, h = A.match(u) || [], m = h?.length > 0 ? h[0] : "", f = At().parseFromString(m, "image/svg+xml").firstElementChild;
+      const u = /<svg.*?<\/svg>/s, h = A.match(u) || [], g = h?.length > 0 ? h[0] : "", f = At().parseFromString(g, "image/svg+xml").firstElementChild;
       if (!f)
-        throw new Ft("Failed to read SVG.");
+        throw new Dt("Failed to read SVG.");
       return Pa(f), Pt().serializeToString(f);
     };
     l.forEach((A) => {
-      const u = n.find((m) => m.panelId === A.panelId);
+      const u = n.find((g) => g.panelId === A.panelId);
       if (!u)
         throw new K(A);
       const h = {
-        id: M(),
+        id: T(),
         src: r,
         asset_key: r,
         svg: d(c),
@@ -9792,7 +9843,7 @@ const ls = [
         scaleX: 1,
         scaleY: 1,
         rotation: A.rotation,
-        productOverlay: t.type === v.ProductOverlay ? !0 : void 0,
+        productOverlay: t.type === E.ProductOverlay ? !0 : void 0,
         excludeFromExport: t.data.excludeFromPrint
       };
       a.push(new H(h, u));
@@ -9800,11 +9851,11 @@ const ls = [
   }
   return a;
 }, ps = async (n, t, e, a) => {
-  const i = [], r = e.data, o = 30, s = (g) => g.vertical ? "center" : g.textAlign || "center", l = () => {
-    const g = a.option;
-    if (!g)
+  const i = [], r = e.data, o = 30, s = (p) => p.vertical ? "center" : p.textAlign || "center", l = () => {
+    const p = a.option;
+    if (!p)
       return;
-    const f = g.variants?.find((w) => w.id === r.fontVariantId) || le(g);
+    const f = p.variants?.find((w) => w.id === r.fontVariantId) || le(p);
     if (!f || !f.asset)
       return;
     t[a.stepName] = { selectedVariants: [f] };
@@ -9812,51 +9863,51 @@ const ls = [
     if (S)
       return S;
   }, d = await (async () => {
-    const g = l();
-    if (!g)
+    const p = l();
+    if (!p)
       return;
-    const f = await Qt(g);
+    const f = await Qt(p);
     return {
-      assetUrl: g,
+      assetUrl: p,
       name: f.names.fullName.en
     };
   })(), A = (a.data.replaceableText ? a.data.replaceableText.replace("{{}}", r.text) : r.text) || "", u = ke(A, {
     vertical: a.data.vertical,
     uppercase: a.data.uppercase
-  }), h = async (g) => {
-    const f = g.colorOption;
+  }), h = async (p) => {
+    const f = p.colorOption;
     return f ? J.getDefaultVariant(f)?.color : void 0;
-  }, m = r.color || await h(a.data), p = a.data.regions;
-  for (const g of p) {
-    const f = n.find((w) => w.panelId === g.panelId);
+  }, g = r.color || await h(a.data), m = a.data.regions;
+  for (const p of m) {
+    const f = n.find((w) => w.panelId === p.panelId);
     if (!f)
       continue;
     const S = {
       stepName: e.name,
-      id: M(),
+      id: T(),
       align: s(a.data),
       curved: a.data.curved,
-      fill: r.color || m || "#000000",
+      fill: r.color || g || "#000000",
       fontData: d,
       fontSize: a.data.size || o,
-      height: g.height,
-      layer: g.layer,
-      layerIndex: g.layerIndex,
+      height: p.height,
+      layer: p.layer,
+      layerIndex: p.layerIndex,
       paths: a.data.paths,
-      rotation: g.rotation,
+      rotation: p.rotation,
       text: u,
-      type: F.Textbox,
+      type: D.Textbox,
       vertical: a.data.vertical,
       verticalAlign: a.data.verticalAlign || "middle",
-      width: g.width,
-      x: g.left,
-      y: g.top
+      width: p.width,
+      x: p.left,
+      y: p.top
     };
     if (d) {
-      const [w, I] = ve(
+      const [w, x] = ve(
         a.data.size || o,
         d,
-        g,
+        p,
         [
           ke(u, {
             vertical: a.data.vertical,
@@ -9874,7 +9925,7 @@ const ls = [
           {
             ...S,
             fontSize: w,
-            text: S.curved ? S.text : (I || []).join(`
+            text: S.curved ? S.text : (x || []).join(`
 `)
           },
           f
@@ -9899,18 +9950,18 @@ const ls = [
     const s = t.steps.find((l) => l.stepName === o.name);
     if (s)
       switch (s.type) {
-        case v.DigitalContent:
+        case E.DigitalContent:
           i.push(
             ...await cs(e, o, s)
           );
           break;
-        case v.Frame:
-        case v.Photo:
+        case E.Frame:
+        case E.Photo:
           i.push(
             ...await ds(e, r, o, s)
           );
           break;
-        case v.Illustration:
+        case E.Illustration:
           i.push(
             ...await As(
               e,
@@ -9920,20 +9971,20 @@ const ls = [
             )
           );
           break;
-        case v.Module:
+        case E.Module:
           i.push(...await us(e, o, s));
           break;
-        case v.Picture:
+        case E.Picture:
           i.push(
             ...await hs(e, r, o, s)
           );
           break;
-        case v.Shape:
+        case E.Shape:
           i.push(
-            ...await ms(e, r, o, s)
+            ...await gs(e, r, o, s)
           );
           break;
-        case v.Text:
+        case E.Text:
           i.push(
             ...await ps(e, r, o, s)
           );
@@ -9941,8 +9992,8 @@ const ls = [
       }
   }
   for (const o of t.steps)
-    o.type !== v.SilentIllustration && o.type !== v.ProductOverlay || fs(o, r) && i.push(
-      ...await gs(e, o, a)
+    o.type !== E.SilentIllustration && o.type !== E.ProductOverlay || fs(o, r) && i.push(
+      ...await ms(e, o, a)
     );
   return i;
 };
@@ -10094,16 +10145,16 @@ class Es extends Wn {
    * a loose target but should be kept in mind when making changes.
    */
   async execute() {
-    const t = this.layouts.find((m) => m.layoutState.layout.id === this.layoutId);
+    const t = this.layouts.find((g) => g.layoutState.layout.id === this.layoutId);
     if (!t)
       return;
     const e = t.layoutState.elements || [], a = t.layoutState.layout.width, i = t.layoutState.layout.height, r = a === 1 || i === 1 ? { width: 1, height: 1 } : this.getDynamicTextureResolution(), o = r.width, s = r.height;
     let l, c;
     if (this.nonPOTSupport) {
-      const m = o / s;
-      a / i < m ? (l = o, c = i * (o / a)) : (l = a * (s / i), c = s);
-      const g = this.resizeFit({ width: l, height: c });
-      l = g.width, c = g.height;
+      const g = o / s;
+      a / i < g ? (l = o, c = i * (o / a)) : (l = a * (s / i), c = s);
+      const p = this.resizeFit({ width: l, height: c });
+      l = p.width, c = p.height;
     } else
       l = r.width, c = r.height;
     const d = this.getWorkflowManager?.()?.getTemplatingContext(), A = ka(t.layoutState.layout, e, {
@@ -10111,7 +10162,7 @@ class Es extends Wn {
         purpose: Kt.ThreeD,
         templatingContext: d
       }
-    }), u = Dn(A), h = await va.from(this.ctx, u, {
+    }), u = xn(A), h = await va.from(this.ctx, u, {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !this.nonPOTSupport,
       ignoreAnimation: !0,
@@ -10130,7 +10181,7 @@ const Md = (n, t) => {
   const e = [];
   return n.forEach((a) => {
     const i = t.steps.find((r) => r.stepName === a.stepName);
-    i?.type === v.Text && a.stepAspectType === "Text" && e.push({
+    i?.type === E.Text && a.stepAspectType === "Text" && e.push({
       name: i.stepName,
       data: {
         text: a.value
@@ -10351,7 +10402,7 @@ const Md = (n, t) => {
         workflowViewerLink
         workflowViewerAmendLink
     }
-`, Ds = (n) => C`
+`, xs = (n) => C`
     ${Ge}
     ${We(n)}
     ${ui}
@@ -10431,7 +10482,7 @@ const Md = (n, t) => {
             }
         }
     }
-`, Fs = C`
+`, Ds = C`
     query GetBundlesForCustomer($id: String!) {
         customers(ids: [$id]) {
             bundleStakeholders {
@@ -10460,7 +10511,7 @@ const Md = (n, t) => {
             }
         }
     }
-`, xs = C`
+`, Fs = C`
     ${Qa(!1)}
     query GetProductCollectionProducts($id: String!, $productIds: [String!]) {
         productCollections(ids: [$id], productIds: $productIds) {
@@ -10866,7 +10917,7 @@ class on extends Wn {
   }
 }
 const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
-  id: M(),
+  id: T(),
   panelId: t.name,
   name: t.name,
   title: t.title,
@@ -10885,14 +10936,14 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
 }, jt = class jt {
   constructor(t, e, a, i, r, o = !1, s, l = !1, c = !1, d = !1) {
     this.workflowStatePromiseQueue = new qn(1), this.initialized = !1, this.readOnly = !1, this.isReloadedTransaction = !1, this.singleVariantsRenderable = !1, this.stepTags = {}, this.setWorkflow = async (u) => {
-      this.confirmedDesign = !1, this.editedSteps = {}, this.informationResults = [], this.mandatorySteps = {}, this.pendingUpdates = [], this.selectionCost = 0, this.stepSpecificServices = {}, this.pollers = [], this.allScenes = [], this.stepElements = {}, this.stepInitialised = {}, this.stepMetadata = {}, this.stepSelections = {}, this.storage = {}, this.validationErrors = { steps: /* @__PURE__ */ new Map() }, this.currentAdjustingStepId = "", this.reloadedState ? this.layouts = Object.values(this.reloadedState.layouts || {}).map((m) => m.layout) : u ? this.layouts = nl(this.experience.getTransaction(), u) : this.layouts = [], this.commandContext.initialize(this.layouts, this.reloadedState), this.renderableContextService = new ws(this.layouts), this.renderableContextService.setWorkflowManager(this), u.steps.forEach((m) => {
-        this.stepTags[m.stepName] = m.tags ?? [];
+      this.confirmedDesign = !1, this.editedSteps = {}, this.informationResults = [], this.mandatorySteps = {}, this.pendingUpdates = [], this.selectionCost = 0, this.stepSpecificServices = {}, this.pollers = [], this.allScenes = [], this.stepElements = {}, this.stepInitialised = {}, this.stepMetadata = {}, this.stepSelections = {}, this.storage = {}, this.validationErrors = { steps: /* @__PURE__ */ new Map() }, this.currentAdjustingStepId = "", this.reloadedState ? this.layouts = Object.values(this.reloadedState.layouts || {}).map((g) => g.layout) : u ? this.layouts = nl(this.experience.getTransaction(), u) : this.layouts = [], this.commandContext.initialize(this.layouts, this.reloadedState), this.renderableContextService = new ws(this.layouts), this.renderableContextService.setWorkflowManager(this), u.steps.forEach((g) => {
+        this.stepTags[g.stepName] = g.tags ?? [];
       });
       const h = this.previewService;
       this.ejectFromPreviewService(), this.initializationPromise = this.initializeDefaultWorkflowState(u), this.initializationPromise.then(() => {
         this.initialized = !0;
-      }), this.initializationPromise.catch((m) => {
-        throw console.error(m), this.initialized = !1, new Error("Workflow initialization failed due to an error. See console.");
+      }), this.initializationPromise.catch((g) => {
+        throw console.error(g), this.initialized = !1, new Error("Workflow initialization failed due to an error. See console.");
       }), this.initializationPromise.finally(
         () => this.commandContext.registerStateCallback(() => {
           this.updateStateWithServer(), this.renderLayouts();
@@ -10902,8 +10953,8 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
       if (!this.previewService) return;
       const u = this.getCommandContext().getAllLayouts(), h = this.getLayoutPreviewService()?.getAll();
       if (h)
-        for (const [, m] of h)
-          m.render(u);
+        for (const [, g] of h)
+          g.render(u);
     }, this.experience = t, this.client = e, this.updateTransaction = a, this.graphQlClient = i, this.reloadedState = r, this.readOnly = o, this.singleVariantsRenderable = c, this.commandContext = new ko(), this.confirmCallbacks = [], this.editedCallbacks = [], this.elementsCallbacks = [], this.informationResultCallbacks = [], this.initCallbacks = [], this.mandatoryCallbacks = [], this.makingAdjustmentsCallback = [], this.metadataCallbacks = [], this.selectionCallbacks = [], this.stepSpecificStorageCallbacks = {}, this.storageCallbacks = [], this.validationCallbacks = [], this.recipientCallbacks = [], this.modelContainer = s, this.confirmedDesign = !1, this.editedSteps = {}, this.informationResults = [], this.mandatorySteps = {}, this.pendingUpdates = [], this.selectionCost = 0, this.stepSpecificServices = {}, this.pollers = [], this.allScenes = [], this.stepElements = {}, this.stepInitialised = {}, this.stepMetadata = {}, this.stepSelections = {}, this.storage = {}, this.validationErrors = { steps: /* @__PURE__ */ new Map() }, this.currentAdjustingStepId = "", this.isReloadedTransaction = l, d && (this.workflowStatePromiseQueue.enabled = !1);
     const A = this.experience.getWorkflow();
     A && this.setWorkflow(A);
@@ -10915,7 +10966,7 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
       a.type === Ee.FirstName ? e[i] = t?.firstName : a.type === Ee.LastName ? e[i] = t?.lastName : a.type === Ee.Custom && (a.customFieldIndex === 1 ? e[i] = t?.customField1 : a.customFieldIndex === 2 ? e[i] = t?.customField2 : a.customFieldIndex === 3 ? e[i] = t?.customField3 : a.customFieldIndex === 4 ? e[i] = t?.customField4 : a.customFieldIndex === 5 && (e[i] = t?.customField5), a.option && (e[i] = a.option.variants?.find((r) => r.id === e[i])?.name));
     }), e;
   }
-  async updateRecipient(t, e, a, i, r, o, s, l, c, d, A, u, h, m, p, g, f, S) {
+  async updateRecipient(t, e, a, i, r, o, s, l, c, d, A, u, h, g, m, p, f, S) {
     const w = this.experience.getTransaction();
     if (w.recipient?.id)
       this.experience.getTransaction().recipient = {
@@ -10933,9 +10984,9 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
         apartment: A ?? w.recipient.apartment,
         customField1: u ?? w.recipient.customField1,
         customField2: h ?? w.recipient.customField2,
-        customField3: m ?? w.recipient.customField3,
-        customField4: p ?? w.recipient.customField4,
-        customField5: g ?? w.recipient.customField5,
+        customField3: g ?? w.recipient.customField3,
+        customField4: m ?? w.recipient.customField4,
+        customField5: p ?? w.recipient.customField5,
         conversionConfigurationId: f || w.recipient.conversionConfigurationId
       }, this.experience.callEvent(wa.RecipientChanged), await this.graphQlClient().mutate({
         mutation: Xs,
@@ -10956,15 +11007,15 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
           apartment: A || w.recipient.apartment,
           customField1: u || w.recipient.customField1,
           customField2: h || w.recipient.customField2,
-          customField3: m || w.recipient.customField3,
-          customField4: p || w.recipient.customField4,
-          customField5: g || w.recipient.customField5,
+          customField3: g || w.recipient.customField3,
+          customField4: m || w.recipient.customField4,
+          customField5: p || w.recipient.customField5,
           conversionConfigurationId: f || w.recipient.conversionConfigurationId,
           prevalidated: S
         }
       });
     else {
-      const I = await this.graphQlClient().mutate({
+      const x = await this.graphQlClient().mutate({
         mutation: _s,
         errorPolicy: "all",
         fetchPolicy: "no-cache",
@@ -10982,14 +11033,14 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
           apartment: A,
           customField1: u,
           customField2: h,
-          customField3: m,
-          customField4: p,
-          customField5: g,
+          customField3: g,
+          customField4: m,
+          customField5: p,
           conversionConfigurationId: f
         }
       });
       w.recipient = {
-        id: I?.data?.recipientCreate?.id,
+        id: x?.data?.recipientCreate?.id,
         firstName: t,
         lastName: e,
         address: a,
@@ -11003,9 +11054,9 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
         apartment: A,
         customField1: u,
         customField2: h,
-        customField3: m,
-        customField4: p,
-        customField5: g,
+        customField3: g,
+        customField4: m,
+        customField5: p,
         conversionConfigurationId: f
       }, this.experience.callEvent(wa.RecipientChanged), await this.graphQlClient().mutate({
         mutation: Zs,
@@ -11013,14 +11064,14 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
         fetchPolicy: "no-cache",
         variables: {
           id: this.experience.getTransaction().id,
-          recipientId: I.data?.recipientCreate?.id
+          recipientId: x.data?.recipientCreate?.id
         },
         context: {
           transactionOwnerId: this.experience.getTransaction().transactionOwnerId
         }
       });
     }
-    await this.fetchConversionConfiguration(), this.recipientCallbacks.forEach((I) => I(this.experience.getTransaction().recipient));
+    await this.fetchConversionConfiguration(), this.recipientCallbacks.forEach((x) => x(this.experience.getTransaction().recipient));
   }
   async fetchConversionConfiguration() {
     const t = this.experience.getTransaction().recipient;
@@ -11190,7 +11241,7 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     this.pendingUpdates = this.pendingUpdates.filter((e) => e !== t);
   }
   markUpdatePending() {
-    const t = M();
+    const t = T();
     return this.pendingUpdates = [...this.pendingUpdates, t], t;
   }
   setEditedStatus(t, e) {
@@ -11243,7 +11294,7 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
       },
       { refocusCamera: e }
     );
-    this.setModelContainer(i), vt(this.allScenes, this.stepSelections).filter((s) => s).map((s) => s.renderableSteps).flat().filter((s) => s.type === v.Model || s.type === v.Material).forEach((s) => {
+    this.setModelContainer(i), vt(this.allScenes, this.stepSelections).filter((s) => s).map((s) => s.renderableSteps).flat().filter((s) => s.type === E.Model || s.type === E.Material).forEach((s) => {
       if (!s.option?.id) {
         console.error(`Failed to read option id from step: ${s.stepName}`);
         return;
@@ -11251,7 +11302,7 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
       const l = this.stepSelections[s.stepName]?.selectedVariants || [];
       if (l.length === 0) return;
       const c = l[0];
-      if (s.type === v.Model) {
+      if (s.type === E.Model) {
         if (!this.modelContainer)
           throw new R(
             "We should always have a model container when injecting a preview!"
@@ -11391,17 +11442,17 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     ), t), []) || [];
   }
   getInvalidModelVariants() {
-    return this.experience.getWorkflow()?.steps.reduce((t, e) => (e.type === v.Model && !bt(e, this.stepSelections) && t.push(e.stepName), t), []) || [];
+    return this.experience.getWorkflow()?.steps.reduce((t, e) => (e.type === E.Model && !bt(e, this.stepSelections) && t.push(e.stepName), t), []) || [];
   }
   async stepElementsForIntroducedSilentSteps(t, e) {
     const a = this.experience.getProduct();
     if (!a)
       return Promise.resolve({ stepElements: {}, commands: [] });
     const i = async (c, d, A) => {
-      if (c.type === v.SilentIllustration) {
+      if (c.type === E.SilentIllustration) {
         const u = await new an(c, d).trigger();
         return { step: c, results: u };
-      } else if (c.type === v.ProductOverlay) {
+      } else if (c.type === E.ProductOverlay) {
         const u = await new an(
           c,
           d,
@@ -11488,37 +11539,37 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     this.stepSelections = {
       ...this.stepSelections,
       [t]: { selectedVariants: e }
-    }, this.selectionCost = Object.values(this.stepSelections).reduce((E, D) => E + D.selectedVariants.map((x) => x.priceModifier || 0).reduce((x, T) => x + T, 0), 0), r.steps.forEach((E) => {
-      bt(E, this.stepSelections) || (this.stepInitialised[E.stepName] = !1, delete this.stepMetadata[E.stepName], delete this.stepSelections[E.stepName], delete this.storage[E.stepName]);
+    }, this.selectionCost = Object.values(this.stepSelections).reduce((b, P) => b + P.selectedVariants.map((F) => F.priceModifier || 0).reduce((F, N) => F + N, 0), 0), r.steps.forEach((b) => {
+      bt(b, this.stepSelections) || (this.stepInitialised[b.stepName] = !1, delete this.stepMetadata[b.stepName], delete this.stepSelections[b.stepName], delete this.storage[b.stepName]);
     });
-    const s = this.allScenes, l = vt(s, o), c = vt(s, this.stepSelections), d = l.map((E) => E.silentSteps).flat(), u = c.map((E) => E.silentSteps).flat().filter(
-      (E) => !d.some((D) => D.stepName === E.stepName)
+    const s = this.allScenes, l = vt(s, o), c = vt(s, this.stepSelections), d = l.map((b) => b.silentSteps).flat(), u = c.map((b) => b.silentSteps).flat().filter(
+      (b) => !d.some((P) => P.stepName === b.stepName)
     );
-    d.forEach((E) => {
-      bt(E, this.stepSelections) || (this.stepInitialised[E.stepName] = !1);
+    d.forEach((b) => {
+      bt(b, this.stepSelections) || (this.stepInitialised[b.stepName] = !1);
     });
-    const h = this.getInvalidCanvasRegions(), { stepElements: m, commands: p } = await this.stepElementsForIntroducedSilentSteps(u, !1);
+    const h = this.getInvalidCanvasRegions(), { stepElements: g, commands: m } = await this.stepElementsForIntroducedSilentSteps(u, !1);
     this.stepElements = {
       ...this.stepElements,
-      ...m,
+      ...g,
       [t]: a
     }, this.removeElements(h);
-    const g = r.steps.find((E) => E.stepName === t);
-    g?.type === v.Frame && this.getWorkflowExperience().getStepById(g.stepName)?.frameService?.setTargetElements(a.map((D) => D.id));
-    const f = h.map((E) => new Rt(E.id)), S = new tn(this.constructSerializableWorkflow()), w = [...p, ...f, S];
+    const p = r.steps.find((b) => b.stepName === t);
+    p?.type === E.Frame && this.getWorkflowExperience().getStepById(p.stepName)?.frameService?.setTargetElements(a.map((P) => P.id));
+    const f = h.map((b) => new Rt(b.id)), S = new tn(this.constructSerializableWorkflow()), w = [...m, ...f, S];
     w.length > 0 && this.commandContext.apply(new L(w), !0), await this.ensureStepsAreLoaded(), this.onElementsChange();
-    const I = this.getInvalidModelVariants(), b = this.modelContainer;
-    if (b) {
-      const E = I.map(
-        (D) => b.applyModelVariant(
-          D,
+    const x = this.getInvalidModelVariants(), v = this.modelContainer;
+    if (v) {
+      const b = x.map(
+        (P) => v.applyModelVariant(
+          P,
           {
             contextService: this.getLayoutPreviewService()
           },
           !1
         )
       );
-      await Promise.all(E);
+      await Promise.all(b);
     }
     await this.onSelectionChange(), i && await i();
   }
@@ -11527,7 +11578,7 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     for (const l of i)
       if (!this.stepInitialised[l.stepName])
         switch (this.stepInitialised[l.stepName] = !0, l.type) {
-          case v.DigitalContent:
+          case E.DigitalContent:
             a.push(
               ri.init(
                 l,
@@ -11536,43 +11587,43 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
               )
             );
             break;
-          case v.Frame:
+          case E.Frame:
             a.push(Et.init(l, this, this.reloadedState));
             break;
-          case v.Illustration:
+          case E.Illustration:
             a.push(
               Se.init(l, this, this.reloadedState)
             );
             break;
-          case v.Material:
+          case E.Material:
             a.push(
               oi.init(l, this, this.reloadedState)
             );
             break;
-          case v.Model:
+          case E.Model:
             a.push(si.init(l, this, this.reloadedState));
             break;
-          case v.Module:
+          case E.Module:
             this.stepSpecificServices[l.stepName] = {
               module: await Ai(l.data.module)
             }, a.push(
               li.init(l, this, this.reloadedState)
             );
             break;
-          case v.Picture:
+          case E.Picture:
             a.push(
               ci.init(l, this, this.reloadedState)
             );
             break;
-          case v.Question:
+          case E.Question:
             a.push(
               di.init(l, this, this.reloadedState)
             );
             break;
-          case v.Shape:
+          case E.Shape:
             a.push(Wt.init(l, this, this.reloadedState));
             break;
-          case v.Text:
+          case E.Text:
             a.push(j.init(l, this, this.reloadedState));
             break;
         }
@@ -11632,7 +11683,7 @@ const al = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     this.validationCallbacks.forEach((t) => t(this.validationErrors));
   }
   traversableScenes() {
-    return go(this.allScenes, this.stepSelections, this.singleVariantsRenderable);
+    return mo(this.allScenes, this.stepSelections, this.singleVariantsRenderable);
   }
 };
 jt.configurationPromiseMap = /* @__PURE__ */ new Map();
@@ -12133,7 +12184,7 @@ class dl extends et {
     const e = {
       input: t,
       helperData: {}
-    }, a = j.findLayoutElements(this.manager, this.step), i = j.filterUnsupportedCharacters(t, a[0]?.fontData), r = xt(i, this.manager).length, o = !!this.step.data && !!this.step.data.maxLength && r > this.step.data.maxLength;
+    }, a = j.findLayoutElements(this.manager, this.step), i = j.filterUnsupportedCharacters(t, a[0]?.fontData), r = Ft(i, this.manager).length, o = !!this.step.data && !!this.step.data.maxLength && r > this.step.data.maxLength;
     o || (e.input = i);
     const s = a.length <= 0, l = s ? { inputText: i, text: i } : { inputText: i };
     this.manager.updateStorage(this.step.stepName, l);
@@ -12209,7 +12260,7 @@ class dl extends et {
     const t = this.step.data.maxLength;
     if (t === void 0)
       return;
-    const e = xt(this.getText(), this.manager);
+    const e = Ft(this.getText(), this.manager);
     return t - e.length;
   }
   setCustomColor(t) {
@@ -12290,7 +12341,7 @@ class hl extends et {
     const t = this.step.data.maxLength;
     if (t === void 0)
       return;
-    const e = xt(this.getText(), this.manager);
+    const e = Ft(this.getText(), this.manager);
     return t - e.length;
   }
   /**
@@ -12322,30 +12373,30 @@ class hl extends et {
     });
   }
 }
-class me {
+class ge {
   static get(t, e) {
     switch (e.type) {
-      case v.DigitalContent:
+      case E.DigitalContent:
         return new ul(t, e, t.getStepTags(e.stepName));
-      case v.Information:
+      case E.Information:
         return new Al(t, e, t.getStepTags(e.stepName));
-      case v.Question:
+      case E.Question:
         return new ll(t, e, t.getStepTags(e.stepName));
-      case v.Text:
+      case E.Text:
         return new dl(t, e, t.getStepTags(e.stepName));
-      case v.Illustration:
+      case E.Illustration:
         return new il(t, e, t.getStepTags(e.stepName));
-      case v.Picture:
+      case E.Picture:
         return new sl(t, e, t.getStepTags(e.stepName));
-      case v.Shape:
+      case E.Shape:
         return new cl(t, e, t.getStepTags(e.stepName));
-      case v.Material:
+      case E.Material:
         return new rl(t, e, t.getStepTags(e.stepName));
-      case v.Model:
+      case E.Model:
         return new ol(t, e, t.getStepTags(e.stepName));
-      case v.Frame:
+      case E.Frame:
         return new hc(t, e, t.getStepTags(e.stepName));
-      case v.Module:
+      case E.Module:
         return new hl(t, e, t.getStepTags(e.stepName));
       default:
         throw new R(`Step type ${e.type} not yet supported in Core SDK`);
@@ -12377,7 +12428,7 @@ const hi = C`
             externalProductVariantId
         }
     }
-`, ml = C`
+`, gl = C`
     ${hi}
     mutation CreateDesign(
         $name: String!
@@ -12409,7 +12460,7 @@ const hi = C`
             }
         }
     }
-`, gl = C`
+`, ml = C`
     ${hi}
     mutation CreateDesigns($inputs: [DesignCreateInput]!) {
         designCreateMany(inputs: $inputs) {
@@ -12437,7 +12488,7 @@ const pl = async (n, t) => {
     s && !ee(s) && (e.Authorization = `Bearer ${s}`);
   }
   return (await y.getShadowGraphqlClient().mutate({
-    mutation: ml,
+    mutation: gl,
     errorPolicy: "all",
     fetchPolicy: "no-cache",
     variables: {
@@ -12463,7 +12514,7 @@ const pl = async (n, t) => {
     s && !ee(s) && (e.Authorization = `Bearer ${s}`);
   }
   return (await y.getShadowGraphqlClient().mutate({
-    mutation: gl,
+    mutation: ml,
     errorPolicy: "all",
     fetchPolicy: "no-cache",
     variables: {
@@ -12538,7 +12589,7 @@ const pl = async (n, t) => {
       });
   }
   return i;
-}, mi = (n, t, e, a, i, r, o, s) => {
+}, gi = (n, t, e, a, i, r, o, s) => {
   const l = t.basePrice || 0, c = n.priceModifierTotal || 0, d = Cl(a, e, void 0, r), u = (k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(n.id), h = {
     additionalExternalProductId: n.integrationProduct?.additionalExternalProductId,
     additionalExternalVariantId: n.integrationProduct?.additionalExternalVariantId,
@@ -12561,38 +12612,38 @@ const pl = async (n, t) => {
     workflowViewerReadOnlyLink: n.workflowViewerReadOnlyLink || ""
   };
   return r && (h.metadata = r), a && (h.selectedVariants = a), i && (h.sku = i), h;
-}, gi = async (n, t, e, a, i, r, o, s, l, c) => {
+}, mi = async (n, t, e, a, i, r, o, s, l, c) => {
   await (async () => {
     if (c !== void 0) return c;
     await n.outstandingRequestsPromise();
-    const T = (k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(i.id), B = await y.getShadowGraphqlClient().query({
+    const N = (k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(i.id), I = await y.getShadowGraphqlClient().query({
       query: zn,
       variables: { ids: [i.id] },
       fetchPolicy: "no-cache",
       errorPolicy: "all",
       context: {
-        transactionOwnerId: T
+        transactionOwnerId: N
       }
-    }), Q = B.data?.transactions[0].workflowState;
-    return B.errors ? (B.errors.forEach((U) => {
-      B.errors && console.log("Server Error:", U.message);
+    }), Q = I.data?.transactions[0].workflowState;
+    return I.errors ? (I.errors.forEach((U) => {
+      I.errors && console.log("Server Error:", U.message);
     }), null) : Q ?? null;
   })() || (console.warn("State mismatch detected. Uploading known state explicitly"), console.warn("State Object:", JSON.stringify(a())), await n.updateStateWithServerImmediate(a), console.log("Server state is undefined @ Workflow completion"));
-  const u = n.getPreviewService(), h = t?.finalizeStepConfig?.lookAtAnimation, m = u && t.showModelOnFinishStep && !!h, p = l && sn(l, t, !0), g = l && sn(l, t, !1), f = async (x) => {
-    const T = {};
-    let $ = 0;
+  const u = n.getPreviewService(), h = t?.finalizeStepConfig?.lookAtAnimation, g = u && t.showModelOnFinishStep && !!h, m = l && sn(l, t, !0), p = l && sn(l, t, !1), f = async (F) => {
+    const N = {};
+    let O = 0;
     if (Object.keys(r).length > 0)
-      for (const B of Object.keys(r)) {
-        const Q = r[B], U = t.steps.find((N) => N.stepName === B);
-        for (let N = 0; N < Q.selections.length; ++N) {
-          const q = Q.selections[N];
-          if (U && (!x || U.option && (U.option.variants || []).length > 1 && !U.data.hideSelectionInCart && !U.data.hideSelectionsInCart)) {
+      for (const I of Object.keys(r)) {
+        const Q = r[I], U = t.steps.find((M) => M.stepName === I);
+        for (let M = 0; M < Q.selections.length; ++M) {
+          const q = Q.selections[M];
+          if (U && (!F || U.option && (U.option.variants || []).length > 1 && !U.data.hideSelectionInCart && !U.data.hideSelectionsInCart)) {
             const St = U.stepTitle;
-            T[St] ? T[St].push({
+            N[St] ? N[St].push({
               id: q.id || "",
               name: q.name,
               priceModifier: q.priceModifier
-            }) : T[St] = [
+            }) : N[St] = [
               {
                 id: q.id || "",
                 name: q.name,
@@ -12600,23 +12651,23 @@ const pl = async (n, t) => {
               }
             ];
           }
-          $ += q.priceModifier;
+          O += q.priceModifier;
         }
       }
-    return [T, $];
+    return [N, O];
   }, [S] = await f(!0), w = Object.fromEntries(
-    Object.keys(S).map((x) => [x, S[x].map((T) => T.id)])
-  ), [I] = await f(!1), b = Object.fromEntries(
-    Object.keys(I).map((x) => [
-      x,
-      I[x].map((T) => T.id)
+    Object.keys(S).map((F) => [F, S[F].map((N) => N.id)])
+  ), [x] = await f(!1), v = Object.fromEntries(
+    Object.keys(x).map((F) => [
+      F,
+      x[F].map((N) => N.id)
     ])
   );
-  let E = await s(m, i.id);
-  if (E) {
-    const x = await (await it(E)).blob();
-    E = (await V.uploadAsset(
-      { name: `${i.id}-preview-image.png`, blob: x },
+  let b = await s(g, i.id);
+  if (b) {
+    const F = await (await it(b)).blob();
+    b = (await V.uploadAsset(
+      { name: `${i.id}-preview-image.png`, blob: F },
       Ie.Image,
       !0,
       !1
@@ -12624,37 +12675,37 @@ const pl = async (n, t) => {
   }
   return {
     designDetails: (() => {
-      const x = {
+      const F = {
         name: o,
-        layouts: e.map((T) => ({
-          index: T.index,
-          panelId: T.panelId
+        layouts: e.map((N) => ({
+          index: N.index,
+          panelId: N.panelId
         })),
         workflowId: t.id,
         transactionId: i.id,
-        useThreeDimPreview: !!m,
-        previewImage: E
+        useThreeDimPreview: !!g,
+        previewImage: b
       };
-      if (g) {
-        const T = [];
-        for (const [$, B] of Object.entries(g))
-          T.push({ key: $, value: B });
-        x.metadata = T;
+      if (p) {
+        const N = [];
+        for (const [O, I] of Object.entries(p))
+          N.push({ key: O, value: I });
+        F.metadata = N;
       }
       if (w) {
-        const T = [];
-        for (const [$, B] of Object.entries(b))
-          T.push({ key: $, ids: B });
-        x.selectedVariants = T;
+        const N = [];
+        for (const [O, I] of Object.entries(v))
+          N.push({ key: O, ids: I });
+        F.selectedVariants = N;
       }
-      return x;
+      return F;
     })(),
     cartSelectionsWithPrices: S,
-    cartMetadata: p
+    cartMetadata: m
   };
 }, wl = async (n, t, e, a, i, r, o, s, l, c, d) => {
   l("workflow.steps.finish.finalize.buildingLayouts");
-  const { designDetails: A, cartSelectionsWithPrices: u, cartMetadata: h } = await gi(
+  const { designDetails: A, cartSelectionsWithPrices: u, cartMetadata: h } = await mi(
     n,
     t,
     e,
@@ -12666,20 +12717,20 @@ const pl = async (n, t) => {
     d
   );
   l("workflow.steps.finish.finalize.creatingDesign");
-  const m = await pl(A), p = m?.transaction?.previewImageLink;
-  if (!m?.transaction)
+  const g = await pl(A), m = g?.transaction?.previewImageLink;
+  if (!g?.transaction)
     throw new Error("Failed to create design");
   l("workflow.steps.finish.finalize.updatingTransaction");
-  const g = m.transaction;
-  return mi(
-    g,
+  const p = g.transaction;
+  return gi(
+    p,
     i,
     t,
     u,
-    m?.sku,
+    g?.sku,
     h,
-    p,
-    m?.processExecution?.id
+    m,
+    g?.processExecution?.id
   );
 }, yl = async (n, t, e) => {
   t("workflow.steps.finish.finalize.buildingLayouts"), await Promise.all(
@@ -12698,7 +12749,7 @@ const pl = async (n, t) => {
       l.errors && console.log("Server Error:", c.message);
     }), null) : l.data?.transactions ? l.data.transactions.map((c) => c.workflowState ?? null) : null;
   })(), r = await Promise.all(
-    n.map(async (s, l) => await gi(
+    n.map(async (s, l) => await mi(
       s.workflowManager,
       s.workflow,
       s.layouts,
@@ -12717,7 +12768,7 @@ const pl = async (n, t) => {
     throw new Error("Failed to create designs");
   return t("workflow.steps.finish.finalize.updatingTransaction"), o.map((s, l) => {
     const c = n[l], d = r[l], A = s.transaction;
-    return mi(
+    return gi(
       A,
       c.product,
       c.workflow,
@@ -13112,14 +13163,14 @@ class Il {
     }, u = this.workflowManager.getCommandContext().getLayoutById(d.layoutState.layout.id), h = o.getContext("2d");
     if (!h)
       throw new Re("Failed to obtain 2D context for preview image creation");
-    const m = this.workflowManager.getTemplatingContext(), p = ka(u.layoutState.layout, u.layoutState.elements, {
+    const g = this.workflowManager.getTemplatingContext(), m = ka(u.layoutState.layout, u.layoutState.elements, {
       renderingConfiguration: {
         purpose: Kt.Print,
         region: { left: A.x, top: A.y, width: A.width, height: A.height },
-        templatingContext: m
+        templatingContext: g
       }
-    }), g = Dn(p);
-    await (await va.from(h, g, {
+    }), p = xn(m);
+    await (await va.from(h, p, {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !1,
       createCanvas: Ct,
@@ -13136,7 +13187,7 @@ class Il {
     const a = this.cachedStepHandles.get(e.stepName);
     if (a)
       return a;
-    const i = me.get(this.getWorkflowManager(), e);
+    const i = ge.get(this.getWorkflowManager(), e);
     return this.cachedStepHandles.set(e.stepName, i), i;
   }
   getSteps() {
@@ -13216,15 +13267,15 @@ class Il {
       const d = /* @__PURE__ */ new Set(), A = c.getRaw().globalPropertyAspectConfigurations;
       A !== void 0 && (A.forEach((u) => d.add(JSON.stringify(u))), s.forEach((u) => {
         const h = u.getRaw().globalPropertyAspectConfigurations;
-        h !== void 0 && h.forEach((m) => {
-          const p = l(m), g = d.has(JSON.stringify(m));
-          if (g && p?.getType() === "Option") {
+        h !== void 0 && h.forEach((g) => {
+          const m = l(g), p = d.has(JSON.stringify(g));
+          if (p && m?.getType() === "Option") {
             const f = u.getCurrentVariant();
             if (!f) return;
-            c.selectVariant(f), d.delete(JSON.stringify(m));
-          } else if (g && p?.getType() === "Text") {
+            c.selectVariant(f), d.delete(JSON.stringify(g));
+          } else if (p && m?.getType() === "Text") {
             const f = u.getText();
-            c.setText(f), d.delete(JSON.stringify(m));
+            c.setText(f), d.delete(JSON.stringify(g));
           }
         });
       }));
@@ -13233,17 +13284,17 @@ class Il {
   getStepByName(t) {
     const e = this.getWorkflow()?.steps.find((a) => a.stepTitle === t);
     if (!(!e || !this.stepHasHandle(e)))
-      return me.get(this.getWorkflowManager(), e);
+      return ge.get(this.getWorkflowManager(), e);
   }
   getStepsByType(t) {
-    return this.getWorkflow()?.steps.filter((e) => e.type === t).map((e) => me.get(this.getWorkflowManager(), e)) || [];
+    return this.getWorkflow()?.steps.filter((e) => e.type === t).map((e) => ge.get(this.getWorkflowManager(), e)) || [];
   }
   getStepsByScene(t) {
     if (!this.getWorkflow()?.stepGroups.find((a) => a.name === t.name))
       throw new Error(
         "Given scene is not present on workflow! Be careful when persisting scenes that you only use them with the relevant workflow."
       );
-    return t.stepIds.map((a) => this.getWorkflow()?.steps.find((i) => i.stepName === a)).filter((a) => this.stepHasHandle(a)).map((a) => me.get(this.getWorkflowManager(), a));
+    return t.stepIds.map((a) => this.getWorkflow()?.steps.find((i) => i.stepName === a)).filter((a) => this.stepHasHandle(a)).map((a) => ge.get(this.getWorkflowManager(), a));
   }
   async attachCustomerDetails(t) {
     return this.assignCustomerDetails({ emailAddress: t.email });
@@ -13346,7 +13397,7 @@ class Il {
    * @returns Returns true when a valid handle is implemented for a given step type. Certain steps don't support handles, such as silent illustrations.
    */
   stepHasHandle(t) {
-    return t.type !== v.SilentIllustration && t.type !== v.ProductOverlay;
+    return t.type !== E.SilentIllustration && t.type !== E.ProductOverlay;
   }
   getExportedStepData() {
     const t = this.getWorkflow(), e = this.getWorkflowManager().getWorkflowMetadata(), a = this.getWorkflowManager().getWorkflowSelections(), i = [];
@@ -13365,7 +13416,7 @@ class Il {
         return;
       }
       switch (r.type) {
-        case v.Frame:
+        case E.Frame:
           {
             const d = r.data, A = s;
             A.image && d.displayImageOnFinishStep && c.properties.push({
@@ -13375,7 +13426,7 @@ class Il {
             });
           }
           break;
-        case v.Illustration:
+        case E.Illustration:
           {
             const d = r.data, A = s;
             if (A && A.colors && A.colors.length > 0 && d.displayColorsOnFinishStep) {
@@ -13388,7 +13439,7 @@ class Il {
             }
           }
           break;
-        case v.Module:
+        case E.Module:
           {
             const d = r.data, A = s;
             A && A.text && d.displayTextOnFinishStep && c.properties.push({
@@ -13398,7 +13449,7 @@ class Il {
             });
           }
           break;
-        case v.Text: {
+        case E.Text: {
           const d = r.data, A = s;
           A && A.text && d.displayTextOnFinishStep && c.properties.push({
             type: "text",
@@ -13452,14 +13503,14 @@ class Il {
 }
 const Bl = (n) => {
   if ([
-    v.Question,
-    v.Frame,
-    v.Illustration,
-    v.Material,
-    v.Model,
-    v.Picture,
-    v.Shape,
-    v.Text
+    E.Question,
+    E.Frame,
+    E.Illustration,
+    E.Material,
+    E.Model,
+    E.Picture,
+    E.Shape,
+    E.Text
   ].includes(n.type)) {
     const e = n.data;
     return !!e.displaySelectionOnFinishStep || !!e.displaySelectionsOnFinishStep;
@@ -13473,7 +13524,7 @@ const Bl = (n) => {
   }
   return !1;
 };
-class Dl {
+class xl {
   constructor(t) {
     this.handleCache = {}, this.bundle = t;
   }
@@ -13515,7 +13566,7 @@ class Dl {
   async createHandle(t) {
     switch (t.type) {
       case G.FileUpload:
-        return new Fl(this.bundle, t).initialize();
+        return new Dl(this.bundle, t).initialize();
       case G.ColorOption:
         return new cn(
           this.bundle,
@@ -13527,7 +13578,7 @@ class Dl {
         return e?.type === "Color" ? new cn(this.bundle, t, e) : new pi(this.bundle, t, e);
       }
       case G.Text:
-        return new xl(this.bundle, t);
+        return new Fl(this.bundle, t);
       default:
         throw new Error("Unhandled Global Property Aspect Type");
     }
@@ -13594,7 +13645,7 @@ class Ra {
     return this.bundle.getGlobalPropertyStateManager().getAspect(this.property.name);
   }
 }
-class Fl extends Ra {
+class Dl extends Ra {
   constructor(t, e) {
     super(t, e);
   }
@@ -13620,7 +13671,7 @@ class Fl extends Ra {
           svg: o.svg,
           colors: o.colors
         };
-        mt.set(t?.fileLink, l), this.imageData = l;
+        gt.set(t?.fileLink, l), this.imageData = l;
       } else
         this.imageData = void 0;
   }
@@ -13686,7 +13737,7 @@ class Fl extends Ra {
       return V.getLocalOrFromServer(t);
   }
   async getImageWithColors() {
-    return await this.loadImageData(), this.imageData?.svg ? ba(Fa(this.imageData.svg, this.imageData.colors ?? {}, !1)) : this.imageData?.src;
+    return await this.loadImageData(), this.imageData?.svg ? ba(Da(this.imageData.svg, this.imageData.colors ?? {}, !1)) : this.imageData?.src;
   }
   /**
    * Retrieves the original, unmodified image selection, if one exists.
@@ -13820,7 +13871,7 @@ class Fl extends Ra {
     );
   }
 }
-class xl extends Ra {
+class Fl extends Ra {
   constructor(t, e) {
     super(t, e);
   }
@@ -13944,15 +13995,15 @@ class cn extends pi {
   async applyColorVariant(t, e, a) {
     const r = this.getSharedSteps(e).map((o) => {
       switch (o.getType()) {
-        case v.Shape:
+        case E.Shape:
           return o.selectVariant(t);
-        case v.Text:
+        case E.Text:
           return o.setFillColor({
             fill: t.getColor(),
             stroke: t.getColor(),
             variant: t.getResource()
           });
-        case v.Illustration:
+        case E.Illustration:
           return o.setColor(a?.toString() || "", t.getColor() || "");
       }
     });
@@ -13976,7 +14027,7 @@ const kl = (n, t, e, a) => n.flatMap((i) => i.getSteps()).filter((i) => i.getGlo
     n,
     t,
     e,
-    v.Illustration
+    E.Illustration
   ).map((r) => {
     const o = r.getCurrentVariant()?.getAssetResource(), s = r.getColors();
     return !o?.assetConfiguration || !s ? 0 : Object.getOwnPropertyNames(s).length;
@@ -14008,7 +14059,7 @@ function fi(n) {
     e.value !== "" && t.set(e.name, !0);
   }), t;
 }
-function ge(n) {
+function me(n) {
   return ya(n, ["__typename"]);
 }
 class Ql {
@@ -14016,9 +14067,9 @@ class Ql {
     this.mandatoryFulfilledAspects = /* @__PURE__ */ new Map(), this.bundleId = t, this.bundleOwnerId = e, this.configuration = a, this.bundleOptions = r;
     const o = r?.existingGlobalPropertyState;
     this.initPromise = o ? Promise.resolve(o).then(() => {
-      console.log("Setting global property state to existing state."), this.globalPropertyState = ge(o), this.recalculateMandatoryStates();
+      console.log("Setting global property state to existing state."), this.globalPropertyState = me(o), this.recalculateMandatoryStates();
     }) : this.createGlobalPropertyState().then((s) => {
-      console.log("Setting global property state to new state."), this.globalPropertyState = ge(s), this.recalculateMandatoryStates();
+      console.log("Setting global property state to new state."), this.globalPropertyState = me(s), this.recalculateMandatoryStates();
     }), this.onGlobalPropertyStateChange = i;
   }
   async clearAspects(t) {
@@ -14048,7 +14099,7 @@ class Ql {
   async setGlobalPropertyState(t) {
     this.globalPropertyState || await this.initPromise;
     const e = It(this.globalPropertyState);
-    this.globalPropertyState = { ...ge(t), id: e.id }, this.recalculateMandatoryStates(), await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(e, this.globalPropertyState);
+    this.globalPropertyState = { ...me(t), id: e.id }, this.recalculateMandatoryStates(), await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(e, this.globalPropertyState);
   }
   getAspectMandatoryFulfilled(t) {
     return this.mandatoryFulfilledAspects.get(t);
@@ -14177,7 +14228,7 @@ class Ql {
       }
     });
     if (t.data?.globalPropertyStateUpdate)
-      this.globalPropertyState = ge(t.data.globalPropertyStateUpdate);
+      this.globalPropertyState = me(t.data.globalPropertyStateUpdate);
     else
       throw new Error("Unable to update global property state");
   }
@@ -14425,7 +14476,7 @@ class Ci {
     if (this.fullFetched)
       return this.collection.productCollectionProducts.filter((a) => !!a.product).map((a) => new pe(a));
     const e = await y.getShadowGraphqlClient().query({
-      query: xs,
+      query: Fs,
       variables: {
         id: this.getId(),
         productIds: t
@@ -14517,20 +14568,20 @@ class Ci {
     });
     return new Promise((u) => {
       let h = !1;
-      const m = A.subscribe({
-        next(p) {
-          if (h || p.partial && (!p.data.productCollections || p.data.productCollections.length === 0 || !p.data.productCollections[0].productCollectionProductsFeed?.items || p.data.productCollections[0].productCollectionProductsFeed?.items.length === 0))
+      const g = A.subscribe({
+        next(m) {
+          if (h || m.partial && (!m.data.productCollections || m.data.productCollections.length === 0 || !m.data.productCollections[0].productCollectionProductsFeed?.items || m.data.productCollections[0].productCollectionProductsFeed?.items.length === 0))
             return;
-          c.abort(), h = !0, m.unsubscribe();
-          const g = p.data.productCollections?.[0].productCollectionProductsFeed?.items.filter((f) => !!f.product).map((f) => new pe(It(f))) || [];
+          c.abort(), h = !0, g.unsubscribe();
+          const p = m.data.productCollections?.[0].productCollectionProductsFeed?.items.filter((f) => !!f.product).map((f) => new pe(It(f))) || [];
           u({
-            items: g,
+            items: p,
             // Clone items because it could be cached data (immutable)
-            total: p.data.productCollections?.[0].productCollectionProductsFeed?.total ?? 0
+            total: m.data.productCollections?.[0].productCollectionProductsFeed?.total ?? 0
           });
         },
         error() {
-          h || (h = !0, m.unsubscribe(), u({ items: [], total: 0 }));
+          h || (h = !0, g.unsubscribe(), u({ items: [], total: 0 }));
         }
       });
     });
@@ -14594,11 +14645,11 @@ class pe {
   getDefaultWorkflow() {
     const t = this.product.workflows;
     if (t === void 0)
-      throw new gt(
+      throw new mt(
         "Called getDefaultWorkflow() before fetching collection products. Use collection.fetchProducts() first to ensure the data is available."
       );
     if (t.length === 0)
-      throw new gt(
+      throw new mt(
         "Called getDefaultWorkflow() but no workflows on requested product. Ensure at least 1 workflow is assigned to this product."
       );
     const e = this.productResource.workflowId;
@@ -14608,7 +14659,7 @@ class pe {
     }
     if (t.length === 1)
       return new Ht(t[0]);
-    throw new gt(
+    throw new mt(
       "Called getDefaultWorkflow() but no default workflow is configured for the requested product. Multiple workflows exist so we can't assume!"
     );
   }
@@ -14617,7 +14668,7 @@ class pe {
    */
   getAllWorkflows() {
     if ((this.product.workflows || []).length === 0)
-      throw new gt(
+      throw new mt(
         "No workflows on configured product. Ensure at least 1 workflow is assigned to this product."
       );
     return this.product.workflows.sort((e, a) => (e.index ?? 0) - (a.index ?? 0)).map((e) => new Ht(e));
@@ -14825,7 +14876,7 @@ class dn {
       l,
       this.onGlobalPropertiesChanged.bind(this),
       o
-    ), this.globalPropertyHandleService = new Dl(this), this.setPreviewService(a);
+    ), this.globalPropertyHandleService = new xl(this), this.setPreviewService(a);
     const c = new Promise((d, A) => {
       if (o?.readonly) {
         d([]);
@@ -14834,14 +14885,14 @@ class dn {
       console.log("Setting default global variants.");
       const u = this.globalPropertyStateManager.getGlobalPropertyState();
       u ? this.globalPropertyHandleService.getHandles().then((h) => {
-        const m = h.map((p) => {
-          if (p.getType() === G.ColorOption || p.getType() === G.Option) {
-            const g = p;
-            if (!u.aspects.find((S) => S.name === g.getName()))
-              return g.initDefaultVariant();
+        const g = h.map((m) => {
+          if (m.getType() === G.ColorOption || m.getType() === G.Option) {
+            const p = m;
+            if (!u.aspects.find((S) => S.name === p.getName()))
+              return p.initDefaultVariant();
           }
         });
-        Promise.all(m).then(d).catch(A);
+        Promise.all(g).then(d).catch(A);
       }) : (console.log("Attempted to set global default variant before state was initialized."), d([]));
     });
     this.initializationPromise = Promise.all([
@@ -15029,7 +15080,7 @@ class dn {
         if (r)
           switch (a.type) {
             case G.FileUpload: {
-              const o = r, s = await Fe([a.value]);
+              const o = r, s = await De([a.value]);
               s.length > 0 && await o.selectImage(s[0]);
               const l = a.storage?.colors;
               if (l) {
@@ -15076,7 +15127,7 @@ class dn {
     return this.productCollection ? new Ci(this.productCollection) : void 0;
   }
   async initializeAdditionalRequiredColorChannels(t) {
-    for (const e of t.getStepsByType(v.Illustration)) {
+    for (const e of t.getStepsByType(E.Illustration)) {
       const a = e.getGlobalPropertyAspects(this.globalConfigurationPropertyId || "");
       for (const i of a) {
         const r = this.getGlobalPropertyConfiguration()?.aspects.find(
@@ -15090,8 +15141,8 @@ class dn {
           ), d = [...new Set(s.map((u) => u.number))];
           if (d.length > c)
             for (const u of d) {
-              const h = this.getGlobalPropertyStateManager(), m = l.find((p) => p.channelNumber === u);
-              m && await h.setAspect(i, m.variant.id || "", void 0, m.channelNumber);
+              const h = this.getGlobalPropertyStateManager(), g = l.find((m) => m.channelNumber === u);
+              g && await h.setAspect(i, g.variant.id || "", void 0, g.channelNumber);
             }
         }
       }
@@ -15531,7 +15582,7 @@ class dn {
     const l = r.map((A) => {
       if (A.getType() === G.ColorOption || A.getType() === G.Option) {
         const u = A;
-        if (!e.aspects.find((m) => m.name === u.getName()))
+        if (!e.aspects.find((g) => g.name === u.getName()))
           return u.initDefaultVariant();
       }
     });
@@ -16146,9 +16197,9 @@ class $d {
           mutation: zr
         });
       } catch (a) {
-        throw console.error(a), new gt("Critical - Unable to synchronize workflow state with server.");
+        throw console.error(a), new mt("Critical - Unable to synchronize workflow state with server.");
       }
-    }, this.options = t, this.options.applicationKey && rr(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 33.13.2"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
+    }, this.options = t, this.options.applicationKey && rr(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 33.13.3"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
   }
   configure(t) {
     ft.setHubUrl(t.hubUrl), ft.setServerUrl(t.serverUrl), ft.setServicesApiUrl(t.servicesApiUrl), this.marketplaceThemeInstallId = t.marketplaceThemeInstallId, this.marketplaceThemeInstallConfigurationId = t.marketplaceThemeInstallConfigurationId, this.userPoolClientId = t.userPoolClientId, this.userPoolRegion = t.userPoolRegion, this.spiffRegion = t.spiffRegion, t.bearerAuthenticationToken && sr(t.bearerAuthenticationToken), this.options.applicationKey && this.getIntegration(), this.spiffRegion && this.userPoolRegion && this.userPoolClientId && zt.init(this.spiffRegion, this.userPoolRegion, this.userPoolClientId);
@@ -16246,7 +16297,7 @@ class $d {
     const s = k.getMap("transactionCustomerIds");
     if (s?.has(t) && s.get(t) && await this.reloadLoggedInCustomer()) {
       const u = this.customer?.bundleStakeholders?.find(
-        (h) => h.bundle?.transactions?.some((m) => m.id === t)
+        (h) => h.bundle?.transactions?.some((g) => g.id === t)
       ) || this.customer?.stakeholders?.find(
         (h) => h.transaction?.id === t
       );
@@ -16464,10 +16515,10 @@ class $d {
   async getExistingBundle(t, e, a, i, r) {
     const s = k.getMap("bundleOwnerIds")?.get(t), l = {};
     try {
-      const m = await this.loggedInBearerToken();
-      l.Authorization = `Bearer ${m}`;
+      const g = await this.loggedInBearerToken();
+      l.Authorization = `Bearer ${g}`;
     } catch {
-      const g = Object.entries(localStorage).find(([S, w]) => S.startsWith("CognitoIdentityServiceProvider") && S.endsWith("idToken"))?.[0] || "", f = localStorage.getItem(g);
+      const p = Object.entries(localStorage).find(([S, w]) => S.startsWith("CognitoIdentityServiceProvider") && S.endsWith("idToken"))?.[0] || "", f = localStorage.getItem(p);
       f && !ee(f) && (l.Authorization = `Bearer ${f}`);
     }
     const c = {
@@ -16475,7 +16526,7 @@ class $d {
       ...l,
       ...i?.graphql?.additionalHeaders
     }, d = await y.getShadowGraphqlClient().query({
-      query: Ds(i?.graphql?.productCollection?.eagerFetchProducts || !1),
+      query: xs(i?.graphql?.productCollection?.eagerFetchProducts || !1),
       variables: {
         id: t
       },
@@ -16571,7 +16622,7 @@ class $d {
     if (!this.customer)
       throw new Error("Customer not authenticated.");
     const t = await y.getShadowGraphqlClient().query({
-      query: Fs,
+      query: Ds,
       variables: {
         id: this.customer.id
       },
@@ -16605,47 +16656,47 @@ class $d {
    */
   async getWorkflowExperiences(t, e, a, i) {
     if (t.length === 0)
-      throw new gt("No options provided!");
-    const r = t.map((B, Q) => ({ option: B, index: Q })), o = r.filter((B) => B.option.type === "transaction"), s = r.filter(
-      (B) => B.option.type === "integration" || B.option.type === "external" || B.option.type === "blank"
+      throw new mt("No options provided!");
+    const r = t.map((I, Q) => ({ option: I, index: Q })), o = r.filter((I) => I.option.type === "transaction"), s = r.filter(
+      (I) => I.option.type === "integration" || I.option.type === "external" || I.option.type === "blank"
     ), l = 50, c = La(o, l), d = La(s, l);
     let A = 0;
-    const u = y.getShadowGraphqlClient(), h = async (B) => {
-      if (B.length === 0)
+    const u = y.getShadowGraphqlClient(), h = async (I) => {
+      if (I.length === 0)
         return [];
-      const Q = B.map((q) => q.option.transactionId), U = await u.query({
+      const Q = I.map((q) => q.option.transactionId), U = await u.query({
         query: Vr,
         variables: {
           ids: Q
         },
         errorPolicy: "all",
         fetchPolicy: "no-cache"
-      }), N = U.data.transactions;
-      if (A = A + N.length, i && i(A, o.length), N.length !== B.length) {
+      }), M = U.data.transactions;
+      if (A = A + M.length, i && i(A, o.length), M.length !== I.length) {
         const q = U.errors?.[0]?.message || "Unknown error";
-        throw new gt(`Not all transactions were found: ${q}`);
+        throw new mt(`Not all transactions were found: ${q}`);
       }
-      return !this.activeIntegration && N[0].integrationProduct?.integration && (this.activeIntegration = Promise.resolve(N[0].integrationProduct.integration)), N.map((q, St) => ({
+      return !this.activeIntegration && M[0].integrationProduct?.integration && (this.activeIntegration = Promise.resolve(M[0].integrationProduct.integration)), M.map((q, St) => ({
         transaction: q,
         workflowId: q.workflowId,
-        readOnly: B.find((ut) => ut.option.transactionId === q.id)?.option.readOnly ?? !1,
-        index: B[St].index
+        readOnly: I.find((ut) => ut.option.transactionId === q.id)?.option.readOnly ?? !1,
+        index: I[St].index
       }));
-    }, m = async (B) => {
-      if (B.length === 0)
+    }, g = async (I) => {
+      if (I.length === 0)
         return [];
       const Q = await u.mutate({
         mutation: Ur,
         variables: {
-          inputs: B.map((N) => ({
-            integrationProductId: N.option.type === "integration" ? N.option.integrationProductId : void 0,
-            externalIntegrationId: N.option.type === "external" ? N.option.externalIntegrationId : void 0,
-            externalProductId: N.option.type === "external" ? N.option.externalProductId : void 0,
-            workflowId: N.option.workflowId,
-            designName: N.option.designName,
+          inputs: I.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,
+            designName: M.option.designName,
             claim: !0,
-            quantity: N.option.quantity,
-            recipient: N.option.recipient
+            quantity: M.option.quantity,
+            recipient: M.option.recipient
           })),
           marketplaceThemeInstallId: this.marketplaceThemeInstallId,
           marketplaceThemeInstallConfigurationId: this.marketplaceThemeInstallConfigurationId
@@ -16654,66 +16705,66 @@ class $d {
         fetchPolicy: "no-cache"
       }), U = Q.data?.transactionCreateMany;
       if (!U || U.length === 0) {
-        const N = Q.errors?.[0]?.message || "Unknown error";
-        throw new gt(`Failed to create transactions: ${N}`);
+        const M = Q.errors?.[0]?.message || "Unknown error";
+        throw new mt(`Failed to create transactions: ${M}`);
       }
-      return A = A + U.length, i && i(A, o.length), U.map((N, q) => ({
-        transaction: N,
-        workflowId: N.workflowId,
+      return A = A + U.length, i && i(A, o.length), U.map((M, q) => ({
+        transaction: M,
+        workflowId: M.workflowId,
         readOnly: !1,
-        index: B[q].index
+        index: I[q].index
       }));
-    }, p = (await Promise.all([
+    }, m = (await Promise.all([
       ...c.map(h),
-      ...d.map(m)
-    ])).flat(), g = [
-      ...new Set(p.map((B) => B.transaction.integrationProductId))
-    ].filter((B) => B !== void 0), f = [...new Set(p.map((B) => B.workflowId))].filter(
-      (B) => B !== void 0
+      ...d.map(g)
+    ])).flat(), p = [
+      ...new Set(m.map((I) => I.transaction.integrationProductId))
+    ].filter((I) => I !== void 0), f = [...new Set(m.map((I) => I.workflowId))].filter(
+      (I) => I !== void 0
     ), [S, w] = await Promise.all([
-      (async () => g.length > 0 ? await lc(g) : [])(),
+      (async () => p.length > 0 ? await lc(p) : [])(),
       (async () => f.length > 0 ? await yi(f, e) : [])()
-    ]), I = new Map(S.map((B) => [B.id, B])), b = new Map(w.map((B) => [B.id, B])), E = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), D = p.map(async (B) => {
-      const { transaction: Q, workflowId: U, readOnly: N, index: q } = B, St = U ? b.get(U) : void 0, ut = t[q];
+    ]), x = new Map(S.map((I) => [I.id, I])), v = new Map(w.map((I) => [I.id, I])), b = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), P = m.map(async (I) => {
+      const { transaction: Q, workflowId: U, readOnly: M, index: q } = I, St = U ? v.get(U) : void 0, ut = t[q];
       if (Q.integrationProductId) {
-        const rt = I.get(Q.integrationProductId);
+        const rt = x.get(Q.integrationProductId);
         Q.integrationProduct = rt, Q.product = rt?.product, Q.integrationProduct || console.error("failed to find transaction's product");
       }
-      !E.get(Q.id) && Q.transactionOwnerId && E.set(Q.id, Q.transactionOwnerId);
-      const He = E.get(Q.id) || void 0, bi = new ec({
+      !b.get(Q.id) && Q.transactionOwnerId && b.set(Q.id, Q.transactionOwnerId);
+      const He = b.get(Q.id) || void 0, bi = new ec({
         onMutate: () => ({ context: { transactionOwnerId: He, bundleOwnerId: e?.bundleOwnerId } }),
         onQuery: () => ({ context: { transactionOwnerId: He, bundleOwnerId: e?.bundleOwnerId } })
       }), ce = {
         workflow: St,
         transaction: Q,
         singleVariantsRenderable: ut?.workflowConfiguration?.singleVariantsRenderable,
-        stateMutationFunc: N ? async () => {
+        stateMutationFunc: M ? async () => {
           throw new R("State mutation is forbidden in read only mode!");
         } : async (rt) => this.updateTransactionState({
           ...rt,
           context: { transactionOwnerId: He, bundleOwnerId: e?.bundleOwnerId }
         }),
         graphQlClient: () => bi,
-        readOnly: N,
+        readOnly: M,
         isReloadedTransaction: ut.type === "transaction"
       };
       if (ut.type === "transaction" && Q.workflowState) {
         const rt = JSON.parse(Q.workflowState);
         await Za(rt), ce.reloadedState = rt;
-      } else if (!N && ut.workflowState) {
+      } else if (!M && ut.workflowState) {
         const rt = JSON.parse(ut.workflowState);
         await Za(rt), ce.reloadedState = rt;
       }
       return ce.delayWorkflowStateSync = !0, { experienceOptions: ce, index: q, options: ut };
-    }), x = await Promise.all(D);
-    k.setMap("transactionOwnerIds", E);
-    const T = x.sort((B, Q) => B.index - Q.index);
-    let $ = [];
-    for (const B of T) {
-      const { experienceOptions: Q, options: U } = B, N = new Il(this, Q);
-      await N.getWorkflowManager().getInitializationPromise(), a && a(), U.type !== "transaction" && this.customer && await N.attachCustomerDetails({ email: this.customer.emailAddress }), $ = [...$, N], N.getWorkflowManager().setWorkflowStateSyncEnabled(!0);
+    }), F = await Promise.all(P);
+    k.setMap("transactionOwnerIds", b);
+    const N = F.sort((I, Q) => I.index - Q.index);
+    let O = [];
+    for (const I of N) {
+      const { experienceOptions: Q, options: U } = I, M = new Il(this, Q);
+      await M.getWorkflowManager().getInitializationPromise(), a && a(), U.type !== "transaction" && this.customer && await M.attachCustomerDetails({ email: this.customer.emailAddress }), O = [...O, M], M.getWorkflowManager().setWorkflowStateSyncEnabled(!0);
     }
-    return $;
+    return O;
   }
   storeCustomer(t) {
     const e = k.getMap("partnerCustomerIds") || /* @__PURE__ */ new Map();
@@ -16943,7 +16994,7 @@ class Ac {
   getImageSrc() {
     if (this.imageData) {
       if (this.imageData.svg) {
-        const t = Fa(this.imageData.svg, this.imageData.colors || {}, !1);
+        const t = Da(this.imageData.svg, this.imageData.colors || {}, !1);
         return ba(t);
       }
       return this.imageData.src;
@@ -17046,16 +17097,17 @@ class Ac {
    * @param onComplete A callback when the operation is completed.
    */
   updateFrameOffsets(t, e, a, i, r) {
-    if (!a || a.length === 0 || a.some((s) => !s))
+    if (!a || a.length === 0 || a.some((l) => !l))
       throw new R("Frame data not set. This is a bug");
     if (!this.workflowManager) throw new R("No workflow manager set, cannot update offsets.");
-    const o = this.workflowManager.getCommandDispatcher();
-    this.targetElements.forEach((s, l) => {
-      o(
+    const o = this.workflowManager.getRegionElements(this.stepName || ""), s = this.workflowManager.getCommandDispatcher();
+    this.targetElements.forEach((l, c) => {
+      let d = o.find((A) => A.id === l)?.regionIndex ?? c;
+      d >= t.length && (d = c), s(
         new L([
-          new Ro(s, e, t[l]),
+          new Ro(l, e, t[d]),
           new Oo(
-            s,
+            l,
             i.useThreshold,
             i.invertThreshold,
             i.threshold,
@@ -17093,7 +17145,7 @@ class Wd {
   traversableScenes() {
     throw new Error("Method not implemented.");
   }
-  updateRecipient(t, e, a, i, r, o, s, l, c, d, A, u, h, m, p, g, f) {
+  updateRecipient(t, e, a, i, r, o, s, l, c, d, A, u, h, g, m, p, f) {
     throw new Error("Method not implemented.");
   }
   approveTransaction(t) {
@@ -17416,7 +17468,7 @@ class hc extends et {
     return this.manager.getStepStorage(this.step.stepName);
   }
 }
-const mc = C`
+const gc = C`
     query GetLoggedInCustomer($email: String!) {
         customer(emailAddress: $email) {
             id
@@ -17459,7 +17511,7 @@ const mc = C`
             total
         }
     }
-`, gc = C`
+`, mc = C`
     mutation SetTransactionDesignName($id: String!, $name: String!) {
         transactionUpdate(id: $id, designName: $name) {
             id
@@ -17545,7 +17597,7 @@ const mc = C`
   },
   context: e
 }), Hd = async (n, t) => await y.getShadowGraphqlClient().mutate({
-  mutation: gc,
+  mutation: mc,
   errorPolicy: "all",
   variables: {
     id: n,
@@ -17566,7 +17618,7 @@ const mc = C`
     template: t
   }
 }), Jd = async (n) => (await y.getShadowGraphqlClient().query({
-  query: mc,
+  query: gc,
   errorPolicy: "all",
   variables: {
     email: n
@@ -17676,7 +17728,7 @@ X = { __e: function(n, t, e, a) {
       }
   throw n;
 } }, typeof Promise == "function" && Promise.prototype.then.bind(Promise.resolve());
-var st, oa, hn, vi = [], sa = [], mn = X.__b, gn = X.__r, pn = X.diffed, fn = X.__c, Cn = X.unmount;
+var st, oa, hn, vi = [], sa = [], gn = X.__b, mn = X.__r, pn = X.diffed, fn = X.__c, Cn = X.unmount;
 function Ec() {
   for (var n; n = vi.shift(); )
     if (n.__P && n.__H)
@@ -17687,9 +17739,9 @@ function Ec() {
       }
 }
 X.__b = function(n) {
-  st = null, mn && mn(n);
+  st = null, gn && gn(n);
 }, X.__r = function(n) {
-  gn && gn(n);
+  mn && mn(n);
   var t = (st = n.__c).__H;
   t && (oa === st ? (t.__h = [], st.__h = [], t.__.forEach(function(e) {
     e.__N && (e.__ = e.__N), e.__V = sa, e.__N = e.i = void 0;
@@ -17796,21 +17848,21 @@ const Ei = C`
             ...AddressValidationResultFields
         }
     }
-`, Dc = C`
+`, xc = C`
     ${Ua}
     mutation BatchValidateRecipientAddress($ids: [String!]!) {
         recipientValidateBatch(ids: $ids) {
             ...AddressValidationJobFields
         }
     }
-`, Fc = C`
+`, Dc = C`
     mutation OverrideRecipientAddress($id: String!) {
         recipientOverrideAddress(id: $id) {
             id
         }
     }
 `;
-var xc = /* @__PURE__ */ ((n) => (n.Confirmed = "Confirmed", n.Plausible = "Plausible", n.Unlikely = "Unlikely", n))(xc || {}), kc = /* @__PURE__ */ ((n) => (n.Created = "Created", n.Processing = "Processing", n.Completed = "Completed", n.Failed = "Failed", n.Cancelled = "Cancelled", n))(kc || {});
+var Fc = /* @__PURE__ */ ((n) => (n.Confirmed = "Confirmed", n.Plausible = "Plausible", n.Unlikely = "Unlikely", n))(Fc || {}), kc = /* @__PURE__ */ ((n) => (n.Created = "Created", n.Processing = "Processing", n.Completed = "Completed", n.Failed = "Failed", n.Cancelled = "Cancelled", n))(kc || {});
 const aA = async (n) => {
   const t = n.map((a) => a.getTransaction().recipient?.id).filter((a) => !!a), e = await y.getShadowGraphqlClient().query({
     query: Bc,
@@ -17841,7 +17893,7 @@ const aA = async (n) => {
   }
 })).data?.recipientValidate : void 0, rA = async (n) => {
   const t = n.map((a) => a.getTransaction().recipient?.id).filter((a) => !!a), e = await y.getShadowGraphqlClient().mutate({
-    mutation: Dc,
+    mutation: xc,
     errorPolicy: "all",
     fetchPolicy: "network-only",
     variables: {
@@ -17858,7 +17910,7 @@ const aA = async (n) => {
   if (!t)
     return;
   (await y.getShadowGraphqlClient().mutate({
-    mutation: Fc,
+    mutation: Dc,
     errorPolicy: "all",
     fetchPolicy: "network-only",
     variables: {
@@ -17884,17 +17936,17 @@ const aA = async (n) => {
 export {
   Ea as AddonHandle,
   kc as AddressValidationJobStatus,
-  xc as AddressValidationResultConfirmationLevel,
+  Fc as AddressValidationResultConfirmationLevel,
   bn as AddressValidationStatus,
   Od as ArrayInput,
   G as AspectType,
   Bt as AssetNotFoundError,
   Ie as AssetType,
-  xd as BringForwardCommand,
-  Fd as BringToBackCommand,
-  Dd as BringToFrontCommand,
+  Fd as BringForwardCommand,
+  Dd as BringToBackCommand,
+  xd as BringToFrontCommand,
   Gi as BundleDesignCreationCartAddMode,
-  O as CanvasCommand,
+  $ as CanvasCommand,
   pe as CollectionProduct,
   cn as ColorOptionGlobalPropertyHandle,
   ko as CommandContext,
@@ -17906,7 +17958,7 @@ export {
   nc as CurrencyService,
   Rt as DeleteElementCommand,
   ul as DigitalContentStepHandle,
-  Fl as FileUploadGlobalPropertyHandle,
+  Dl as FileUploadGlobalPropertyHandle,
   fe as FlowExecutionNodeResult,
   Kl as FlowExecutionResult,
   Jl as FlowService,
@@ -17925,11 +17977,11 @@ export {
   An as IntegrationProduct,
   qi as IntegrationType,
   Ed as LayoutElementFactory,
-  F as LayoutElementType,
+  D as LayoutElementType,
   K as LayoutNotFoundError,
   Kt as LayoutRenderingPurpose,
   rl as MaterialStepHandle,
-  De as MisconfigurationError,
+  xe as MisconfigurationError,
   Wd as MockWorkflowManager,
   ol as ModelStepHandle,
   hl as ModuleStepHandle,
@@ -17938,7 +17990,7 @@ export {
   _l as ObjectInputType,
   pi as OptionGlobalPropertyHandle,
   Pe as OptionNotFoundError,
-  Ft as ParseError,
+  Dt as ParseError,
   sl as PictureStepHandle,
   Hi as ProductCameraRig,
   Ci as ProductCollection,
@@ -17959,10 +18011,10 @@ export {
   Be as StakeholderType,
   zi as StepAspectType,
   et as StepHandle,
-  v as StepType,
+  E as StepType,
   Tt as TextAlgorithm,
   $o as TextChangeCommand,
-  xl as TextGlobalPropertyHandle,
+  Fl as TextGlobalPropertyHandle,
   Rd as TextInput,
   dl as TextStepHandle,
   zl as Transform,
@@ -17992,7 +18044,7 @@ export {
   cd as findPmsColors,
   Gt as frameDataCache,
   Et as frameStepService,
-  M as generate,
+  T as generate,
   Cs as generateCommands,
   lt as generateSVGWithUnknownColors,
   Td as generateStateFromDesignInputSteps,
@@ -18009,10 +18061,10 @@ export {
   cc as getIntegration,
   sA as getIntegrationProducts,
   pd as getNEPoint,
-  gd as getNWPoint,
+  md as getNWPoint,
   Zd as getOrderedTransactions,
   Ld as getOverrideThemeConfiguration,
-  md as getPointOfRotation,
+  gd as getPointOfRotation,
   Qd as getProductCollections,
   fd as getSEPoint,
   ka as getSvgElement,
@@ -18035,14 +18087,14 @@ export {
   Ul as metafieldManager,
   yd as mmPerPixel,
   si as modelStepService,
-  Fa as modifySVGColors,
+  Da as modifySVGColors,
   li as moduleStepService,
   qd as nameBundle,
   Hd as nameTransaction,
   J as optionService,
   vd as outlineFontsInSvg,
   oA as overrideWorkflowExperienceRecipientAddress,
-  mt as patternImageDataCache,
+  gt as patternImageDataCache,
   k as persistenceService,
   ci as pictureStepService,
   sd as pmsToRgb,