@spiffcommerce/core 21.9.0-alpha.5 → 21.9.0-alpha.7

package/dist/index.js

@@ -1,27 +1,27 @@
 import { createHttpLink as EA, InMemoryCache as uA, ApolloClient as CA, from as QA, gql as D } from "@apollo/client/core";
-import { fetch as Ue, AssetType as dt, fetchAsArrayBuffer as Yt, StepType as y, getFrameData as _e, frameDataCache as mA, GroupCommand as G, UpdateFramePattern as St, UpdateFrameThresholdSettingsCommand as pA, calculateOffsets as et, LayoutElementType as k, generate as J, CreateElementCommand as T, generateSVGWithUnknownColors as Pt, svgObjectURL as ye, fetchAsString as Z, DeleteElementCommand as $, generateDefaultRectangleFrameSvg as wt, GetSVGDimensions as IA, patternImageDataCache as ht, getAttributesFromArrayBuffer as fA, findElement as Me, modifySVGWithElementProperties as DA, IllustrationColorCommand as Ve, IllustrationCacheCommand as FA, getFontMetrics as yA, getPatternImageData as We, FontAlignmentCommand as MA, FontColorCommand as YA, FontImageFillCommand as Le, applyTextTransformations as Xe, determineCorrectFontSizeAndLines as fe, FontSourceCommand as Et, loadFont as tt, TextChangeCommand as SA, FontSizeCommand as PA, createElementNS as xA, createElement as he, _loadFontExternalDataURL as At, UpdateWorkflowStateCommand as ut, CommandContext as NA, createCanvas as Ye, getSvgElement as xt, LayoutRenderingPurpose as Nt, renderPapyrusComponentAsString as Ht, loadImage as Rt, getDomParser as Ut, toBase64 as Ct, getVariant as HA, generateFrameSVG as RA, getDefaultVariant as Ge, domParser as Gt, sanitizeSvgTree as vt, traverse as UA, xmlSerializer as kt, CreateLayoutCommand as GA, AspectType as ce, rehydrateSerializedLayout as ee } from "@spiffcommerce/papyrus";
-import { AspectType as Wi, AssetType as Xi, BringForwardCommand as qi, BringToBackCommand as Zi, BringToFrontCommand as $i, CanvasCommand as _i, CommandContext as es, CreateElementCommand as ts, CreateLayoutCommand as As, DeleteElementCommand as as, FontAlignmentCommand as ns, FontColorCommand as is, FontSizeCommand as ss, FontSourceCommand as os, GroupCommand as rs, LayoutElementFactory as cs, LayoutElementType as gs, MoveCommand as ls, ResizeCommand as Bs, RotateCommand as ds, SendBackwardsCommand as ws, StepAspectType as hs, StepType as Es, TextChangeCommand as us, UnitOfMeasurement as Cs, dataUrlFromExternalUrl as Qs, determineCorrectFontSizeAndLines as ms, findElement as ps, frameDataCache as Is, generate as fs, generateSVGWithUnknownColors as Ds, getAttributesFromArrayBuffer as Fs, getAxisAlignedBoundingBox as ys, getFrameData as Ms, getSvgElement as Ys, loadFont as Ss, patternImageDataCache as Ps, registerFetchImplementation as xs, registerWindowImplementation as Ns, rehydrateSerializedLayout as Hs, setCanvasModule as Rs } from "@spiffcommerce/papyrus";
+import { fetch as Ue, AssetType as dt, fetchAsArrayBuffer as St, StepType as y, getFrameData as _e, frameDataCache as mA, GroupCommand as G, UpdateFramePattern as Yt, UpdateFrameThresholdSettingsCommand as pA, calculateOffsets as et, LayoutElementType as k, generate as J, CreateElementCommand as O, generateSVGWithUnknownColors as Pt, svgObjectURL as ye, fetchAsString as Z, DeleteElementCommand as $, generateDefaultRectangleFrameSvg as wt, GetSVGDimensions as IA, patternImageDataCache as ht, getAttributesFromArrayBuffer as fA, findElement as Me, modifySVGWithElementProperties as DA, IllustrationColorCommand as Ve, IllustrationCacheCommand as FA, getFontMetrics as yA, getPatternImageData as We, FontAlignmentCommand as MA, FontColorCommand as SA, FontImageFillCommand as Le, applyTextTransformations as Xe, determineCorrectFontSizeAndLines as fe, FontSourceCommand as Et, loadFont as tt, TextChangeCommand as YA, FontSizeCommand as PA, createElementNS as xA, createElement as he, _loadFontExternalDataURL as At, UpdateWorkflowStateCommand as ut, CommandContext as NA, createCanvas as Se, getSvgElement as xt, LayoutRenderingPurpose as Nt, renderPapyrusComponentAsString as Ht, loadImage as Rt, getDomParser as Ut, toBase64 as Ct, getVariant as HA, generateFrameSVG as RA, getDefaultVariant as Ge, domParser as Gt, sanitizeSvgTree as vt, traverse as UA, xmlSerializer as kt, CreateLayoutCommand as GA, AspectType as ce, rehydrateSerializedLayout as ee } from "@spiffcommerce/papyrus";
+import { AspectType as Wi, AssetType as Xi, BringForwardCommand as qi, BringToBackCommand as Zi, BringToFrontCommand as $i, CanvasCommand as _i, CommandContext as es, CreateElementCommand as ts, CreateLayoutCommand as As, DeleteElementCommand as as, FontAlignmentCommand as ns, FontColorCommand as is, FontSizeCommand as ss, FontSourceCommand as os, GroupCommand as rs, LayoutElementFactory as cs, LayoutElementType as gs, MoveCommand as ls, ResizeCommand as Bs, RotateCommand as ds, SendBackwardsCommand as ws, StepAspectType as hs, StepType as Es, TextChangeCommand as us, UnitOfMeasurement as Cs, dataUrlFromExternalUrl as Qs, determineCorrectFontSizeAndLines as ms, findElement as ps, frameDataCache as Is, generate as fs, generateSVGWithUnknownColors as Ds, getAttributesFromArrayBuffer as Fs, getAxisAlignedBoundingBox as ys, getFrameData as Ms, getSvgElement as Ss, loadFont as Ys, patternImageDataCache as Ps, registerFetchImplementation as xs, registerWindowImplementation as Ns, rehydrateSerializedLayout as Hs, setCanvasModule as Rs } from "@spiffcommerce/papyrus";
 import { setContext as vA } from "@apollo/client/link/context";
 import { onError as kA } from "@apollo/client/link/error";
 import { Pith as bt } from "pith";
 import Jt from "lodash.debounce";
 import Lt from "lodash.isequal";
 import le from "lodash.clonedeep";
-import { toString as Tt } from "qrcode";
+import { toString as Ot } from "qrcode";
 import { split as qe } from "unicode-default-word-boundary";
 import at from "svg-path-bbox";
 import Qt from "lodash.chunk";
-class Ot extends Error {
+class Tt extends Error {
   constructor(e) {
     super(e), this.name = this.constructor.name;
   }
 }
-class we extends Ot {
+class we extends Tt {
   constructor(e) {
     super(`ConfigurationError - ${e}`);
   }
 }
-class Se extends we {
+class Ye extends we {
   constructor(e) {
     super(`Option not Configured: ${e.stepTitle}`), this.optionId = (e == null ? void 0 : e.optionId) || "N/A";
   }
@@ -46,7 +46,7 @@ class Pe extends we {
     super(`Workflow Misconfiguration: ${e.stepName} - ${t}`), this.step = e;
   }
 }
-class ve extends Ot {
+class ve extends Tt {
   constructor(e) {
     super(`ImplementationError - ${e}`);
   }
@@ -153,9 +153,9 @@ const pt = (c) => {
   zt = c;
 };
 let nt;
-const TA = (c) => {
+const OA = (c) => {
   nt = c;
-}, OA = () => nt, zA = () => new Promise((c) => {
+}, TA = () => nt, zA = () => new Promise((c) => {
   const e = q.getHubUrl(), t = (A) => {
     A.origin === e && (window.removeEventListener("message", t), c(A.data));
   };
@@ -446,7 +446,7 @@ class ea {
         g.lengthComputable && A(g.loaded * 100 / g.total);
       }, r.onload = () => {
         const g = i.assetResponse.asset;
-        Te.add(i.assetResponse.asset), s(g);
+        Oe.add(i.assetResponse.asset), s(g);
       }, r.onerror = o, r.send(e.blob);
     }), this.cacheAsset(i.assetResponse.asset), i.assetResponse.asset;
   }
@@ -471,7 +471,7 @@ class ea {
     if (this.bgrmCache.has(e.key))
       return this.bgrmCache.get(e.key);
     const A = (async () => {
-      const a = await Yt(e.fileLink), n = await this.removeBackground(new Blob([a], { type: e.mimeType })), i = {
+      const a = await St(e.fileLink), n = await this.removeBackground(new Blob([a], { type: e.mimeType })), i = {
         name: e.key + "_removed_bg",
         blob: n
       };
@@ -480,10 +480,10 @@ class ea {
     return this.bgrmCache.set(e.key, A), A;
   }
   removePersistedAsset(e) {
-    Te.remove(e);
+    Oe.remove(e);
   }
   getPersistedAssets() {
-    return Te.list();
+    return Oe.list();
   }
   /**
    * Handles mimeType resolution & asset creation request
@@ -535,7 +535,7 @@ class ea {
   }
 }
 const ie = "persistentAssets";
-class Te {
+class Oe {
   /**
    * Add a new asset to persistence
    * @param asset The asset to add.
@@ -1569,7 +1569,7 @@ class fa {
     n.forEach((o, r) => {
       s(
         new G([
-          new St(o, t, e[r]),
+          new Yt(o, t, e[r]),
           new pA(o, a.useThreshold, a.invertThreshold, a.threshold, a.thresholdSaturation)
         ])
       );
@@ -1634,7 +1634,7 @@ class ft {
             id: d.id,
             region: a
           },
-          command: new T(d, n)
+          command: new O(d, n)
         };
       } else {
         const l = this.configuration.type === y.SilentIllustration ? (B = this.configuration.data.asset) == null ? void 0 : B.fileLink : i, w = await Pt(await (async () => new Promise((h, C) => {
@@ -1669,7 +1669,7 @@ class ft {
             id: E.id,
             region: a
           },
-          command: new T(E, n)
+          command: new O(E, n)
         };
       }
     }, this.configuration = e, this.layouts = t, this.product = A || void 0;
@@ -1799,7 +1799,7 @@ class Fa {
     return e.data.regions.map(t);
   }
   async command(e, t, A, a) {
-    const n = A.getLayouts(), s = `data:image/svg+xml;base64,${btoa(await Tt(e, { type: "svg" }))}`, o = t.map((r) => {
+    const n = A.getLayouts(), s = `data:image/svg+xml;base64,${btoa(await Ot(e, { type: "svg" }))}`, o = t.map((r) => {
       const g = r.region, B = n.find((l) => l.panelId === (g == null ? void 0 : g.panelId));
       if (!B && g)
         throw new z(g);
@@ -1807,7 +1807,7 @@ class Fa {
         throw new Error("Region not found");
       if (!B || !g)
         throw new Error("Neither a region or layout found!");
-      return new T(
+      return new O(
         {
           stepRegion: g,
           stepName: a,
@@ -1921,23 +1921,25 @@ class Ma {
     }
   }
   selectImage(e, t, A) {
-    A.setEditedStatus(e.stepName, !0), (t.fileLink || "").endsWith("pdf") ? A.addPoller(
-      new Zt(
-        async () => {
-          var o;
-          const i = (o = (await v.getLocalOrFromServer(t.key || "")).versions) == null ? void 0 : o.find((r) => r.name === "svg");
-          return i ? (await fetch(i.link)).status === 200 : !1;
-        },
-        () => {
-          v.getLocalOrFromServer(t.key || "").then((n) => {
-            this.loadPatternFromAsset(n, e, A);
-          });
-        },
-        () => {
-          throw new ke("Failed to resolve transcoded PDF");
-        }
-      )
-    ) : this.loadPatternFromAsset(t, e, A);
+    return A.setEditedStatus(e.stepName, !0), (t.fileLink || "").endsWith("pdf") ? new Promise((n) => {
+      A.addPoller(
+        new Zt(
+          async () => {
+            var r;
+            const s = (r = (await v.getLocalOrFromServer(t.key || "")).versions) == null ? void 0 : r.find((g) => g.name === "svg");
+            return s ? (await fetch(s.link)).status === 200 : !1;
+          },
+          () => {
+            v.getLocalOrFromServer(t.key || "").then((i) => {
+              this.loadPatternFromAsset(i, e, A).then(n);
+            });
+          },
+          () => {
+            throw new ke("Failed to resolve transcoded PDF");
+          }
+        )
+      );
+    }) : this.loadPatternFromAsset(t, e, A);
   }
   async selectVariant(e, t, A, a, n) {
     const i = await this.selectVariantCommand(
@@ -1950,7 +1952,7 @@ class Ma {
     i && (i.command && a.getCommandDispatcher()(i.command), i.followup && await i.followup());
   }
   getCreateElementCommand(e, t, A, a) {
-    return new T(
+    return new O(
       {
         id: e,
         type: k.Frame,
@@ -1988,7 +1990,7 @@ class Ma {
       };
       ht.set(e, i), t.setPatternData(i);
     } else {
-      const A = await Yt(e, !0), a = await fA(A), n = {
+      const A = await St(e, !0), a = await fA(A), n = {
         src: e,
         width: a.width,
         height: a.height,
@@ -2085,7 +2087,7 @@ class Ma {
   }
 }
 const De = new Ma();
-class Ya {
+class Sa {
   async getIllustrationBody(e) {
     return new Promise((t) => {
       Z(e, !0).then((A) => {
@@ -2094,7 +2096,7 @@ class Ya {
     });
   }
   getCreateElementCommand(e, t, A, a) {
-    return new T(
+    return new O(
       {
         stepRegion: t,
         stepName: a.stepName,
@@ -2297,12 +2299,12 @@ class Ya {
     };
   }
 }
-const Fe = new Ya();
-class Sa {
+const Fe = new Sa();
+class Ya {
   async init(e, t, A) {
     const a = e.option;
     if (!a)
-      throw new Se(e);
+      throw new Ye(e);
     if (A)
       await this.reload(e, t, A);
     else {
@@ -2320,7 +2322,7 @@ class Sa {
       A.serializableWorkflow.steps
     ), s = Object.values(A.layouts).map((g) => g.elements).flat().filter((g) => g.stepName === e.stepName), o = e.option;
     if (!o)
-      throw new Se(e);
+      throw new Ye(e);
     if (a != null && a.selectedVariants) {
       const g = a.selectedVariants[0].id;
       if (g) {
@@ -2371,12 +2373,12 @@ class Sa {
     };
   }
 }
-const $t = new Sa();
+const $t = new Ya();
 class Pa {
   async init(e, t, A) {
     const a = e.option;
     if (!a)
-      throw new Se(e);
+      throw new Ye(e);
     if (A)
       await this.reload(e, t, A);
     else {
@@ -2498,7 +2500,7 @@ class xa {
         return console.error(`Can not find layout for region: ${l.panelId}`), null;
       const C = [];
       return d && C.push(new $(w)), C.push(
-        new T(
+        new O(
           {
             stepRegion: l,
             stepName: e.stepName,
@@ -2626,7 +2628,7 @@ class Ha {
       const w = J();
       return {
         regionElement: { id: w, region: B },
-        command: new T(
+        command: new O(
           {
             stepName: e.stepName,
             stepRegion: B,
@@ -2748,7 +2750,7 @@ class Ua {
   async init(e, t, A) {
     const a = e.option;
     if (!a)
-      throw new Se(e);
+      throw new Ye(e);
     if (A)
       await this.reload(e, t, A);
     else {
@@ -2856,7 +2858,7 @@ class Ua {
         return {
           id: u,
           region: d,
-          command: new T(
+          command: new O(
             {
               stepRegion: d,
               stepName: e.stepName,
@@ -2917,7 +2919,7 @@ class Ga {
     );
   }
 }
-const va = new Ga(), Oe = 30;
+const va = new Ga(), Te = 30;
 class Ne extends Error {
   constructor(e) {
     super(e), Object.setPrototypeOf(this, new.target.prototype), this.name = Ne.name;
@@ -3051,7 +3053,7 @@ class ba {
     for (const r of A) {
       if (!t.fill)
         throw new Error("Fill not set on new color selection!");
-      const g = new YA(r.id, t.fill, s);
+      const g = new SA(r.id, t.fill, s);
       n(g);
     }
   }
@@ -3228,7 +3230,7 @@ class ba {
       }
       const d = await this.changeInputTextWithRegion(
         e,
-        e.data.size || Oe,
+        e.data.size || Te,
         g,
         A.text || "",
         A,
@@ -3253,7 +3255,7 @@ class ba {
         n
       ), d = await this.changeInputTextWithRegion(
         e,
-        e.data.size || Oe,
+        e.data.size || Te,
         g,
         ((B = l[0]) == null ? void 0 : B.newElement.input) || A.text || e.data.defaultText || "",
         A,
@@ -3297,8 +3299,8 @@ class ba {
         let C;
         if (h && h.variants) {
           const N = h.variants.find((H) => {
-            var O;
-            return H.id === ((O = h.defaultVariant) == null ? void 0 : O.id);
+            var T;
+            return H.id === ((T = h.defaultVariant) == null ? void 0 : T.id);
           }) || h.variants[0];
           C = this.createTextFillSpotColor(h, N), i.updateStorage(e, {
             colorProfileAssetKey: (E = h.colorProfile) == null ? void 0 : E.key
@@ -3309,7 +3311,7 @@ class ba {
           stepName: e,
           align: this.textAlign(A),
           fill: n.color ? n.color : f,
-          fontSize: A.size || Oe,
+          fontSize: A.size || Te,
           fontData: a,
           id: w,
           layer: B.layer,
@@ -3346,15 +3348,15 @@ class ba {
           { size: A.size, minSize: A.minSize, maxSize: A.maxSize }
         );
         p.set(Q.id, F), I.set(Q.id, M);
-        const S = A.curved || A.vertical ? o : (M || []).join(`
+        const Y = A.curved || A.vertical ? o : (M || []).join(`
 `);
         m.push(
-          this.generateTextChangeCommandsForRegion(F, A, Q.id, S)
+          this.generateTextChangeCommandsForRegion(F, A, Q.id, Y)
         );
-        const Y = new T(Q, d);
+        const S = new O(Q, d);
         return {
           regionElement: { id: w, region: B },
-          commands: [Y, ...m],
+          commands: [S, ...m],
           newElement: Q,
           fontData: a
         };
@@ -3378,7 +3380,7 @@ class ba {
     ), g;
   }
   generateTextChangeCommandsForRegion(e, t, A, a) {
-    const n = [], i = new SA(A, a);
+    const n = [], i = new YA(A, a);
     if (n.push(i), !t.size) {
       const o = new PA(A, e);
       n.push(o);
@@ -4706,15 +4708,15 @@ IfnI8vaNAAAAAElFTkSuQmCC" transform="matrix(0.13 0.0141 -0.0141 0.1301 104.926 1
 `, R = (c) => xA("http://www.w3.org/2000/svg", c), ot = (c, e) => {
   const t = R("rect");
   return t.setAttribute("height", `${c}`), t.setAttribute("width", `${e}`), t;
-}, Ta = () => {
+}, Oa = () => {
   const c = R("svg");
   return c.setAttribute("xmlns", "http://www.w3.org/2000/svg"), c.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), c.setAttribute("version", "1.1"), c;
-}, Oa = (c) => {
+}, Ta = (c) => {
   const e = R("use");
   return e.setAttribute("xlink:href", c), e.setAttribute("href", c), e;
 };
 function AA(c) {
-  const e = Ta(), t = /viewBox="0 0 (.+?) (.+?)"/.exec(c) || ["0", "0"], A = parseFloat(t[1]), a = parseFloat(t[2]);
+  const e = Oa(), t = /viewBox="0 0 (.+?) (.+?)"/.exec(c) || ["0", "0"], A = parseFloat(t[1]), a = parseFloat(t[2]);
   return e.setAttribute("height", `${a}`), e.setAttribute("width", `${A}`), [e, a, A];
 }
 const za = (c, e, t) => {
@@ -4723,7 +4725,7 @@ const za = (c, e, t) => {
 };
 function aA(c, e, t) {
   const A = J();
-  za(e, t, `bgdef-${A}`), c.appendChild(Oa(`#bgdef-${A}`));
+  za(e, t, `bgdef-${A}`), c.appendChild(Ta(`#bgdef-${A}`));
 }
 const nA = (c, e, t, A) => {
   const a = he("filter");
@@ -4888,8 +4890,8 @@ class ja extends st {
       m.appendChild(F), F.setAttribute("fill", "red"), F.setAttribute("stroke", "red"), F.setAttribute("stroke-width", "9"), F.innerHTML = A;
       const M = R("g");
       m.appendChild(M), M.setAttribute("fill", "#9d2621"), M.setAttribute("transform", "translate(1,1)"), M.innerHTML = A;
-      const S = R("g");
-      return m.appendChild(S), S.setAttribute("fill", "yellow"), S.innerHTML = A, new ct(m).transform(([N, H]) => [N, H + (n / 2 - N) ** 2 / (n * 2.9)]), m;
+      const Y = R("g");
+      return m.appendChild(Y), Y.setAttribute("fill", "yellow"), Y.innerHTML = A, new ct(m).transform(([N, H]) => [N, H + (n / 2 - N) ** 2 / (n * 2.9)]), m;
     }, [o, r, g] = AA(t);
     if (!o)
       return "";
@@ -4928,13 +4930,13 @@ class Wa extends st {
       I.appendChild(F), F.setAttribute("stroke", "#5C1A0D"), F.setAttribute("stroke-width", "4"), F.setAttribute("transform", "translate(1,1)"), F.innerHTML = a;
       const M = R("g");
       I.appendChild(M), M.setAttribute("fill", "#FFE386"), M.setAttribute("transform", "translate(1,1)"), M.innerHTML = a;
-      const S = R("g");
-      I.appendChild(S), S.setAttribute("fill", "white"), S.innerHTML = a;
-      const Y = new ct(I);
-      return Y.transform(([N, H]) => [N, H + ((s - N) * H) ** 2 / (s * 5e4)]), Y.transform(([N, H]) => [
+      const Y = R("g");
+      I.appendChild(Y), Y.setAttribute("fill", "white"), Y.innerHTML = a;
+      const S = new ct(I);
+      return S.transform(([N, H]) => [N, H + ((s - N) * H) ** 2 / (s * 5e4)]), S.transform(([N, H]) => [
         N,
         H + (s / 3 - N) ** 2 / s * this.indicator(N < s / 3)
-      ]), Y.transform(([N, H]) => [N - (i - H) * (s - N) / 800, H]), I;
+      ]), S.transform(([N, H]) => [N - (i - H) * (s - N) / 800, H]), I;
     }, [g, B, l] = AA(t);
     if (!g)
       return "";
@@ -4981,7 +4983,7 @@ class qa extends st {
       const F = R("g");
       F.classList.add("module-layer2"), f.appendChild(F), F.setAttribute("fill", "rgb(255,209,0)"), F.setAttribute("transform", "translate(1,-0.1)"), F.innerHTML = s;
       const M = R("g");
-      return M.classList.add("module-layer3"), f.appendChild(M), M.setAttribute("fill", "white"), M.innerHTML = s, new ct(f).transform(([Y, N]) => [Y, N + (r / 2 - Y) ** 2 / (r * 6)]), f;
+      return M.classList.add("module-layer3"), f.appendChild(M), M.setAttribute("fill", "white"), M.innerHTML = s, new ct(f).transform(([S, N]) => [S, N + (r / 2 - S) ** 2 / (r * 6)]), f;
     }, l = R("g");
     l.classList.add("module-root");
     const d = R("defs");
@@ -6180,7 +6182,7 @@ class Ce {
       case y.Model:
         return new tn(e, t);
       case y.Frame:
-        return new Yi(e, t);
+        return new Si(e, t);
       default:
         throw new b(`Step type ${t.type} not yet supported in Core SDK`);
     }
@@ -6383,38 +6385,38 @@ const rA = D`
 }, gA = async (c, e, t, A, a, n, i, s, o, r) => {
   var F;
   await (async () => {
-    var O;
+    var T;
     if (r !== void 0)
       return r;
     await c.outstandingRequestsPromise();
-    const S = (P.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(a.id), N = await x.getShadowGraphqlClient().query({
+    const Y = (P.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map()).get(a.id), N = await x.getShadowGraphqlClient().query({
       query: Vt,
       variables: { ids: [a.id] },
       fetchPolicy: "no-cache",
       errorPolicy: "all",
       context: {
-        transactionOwnerId: S
+        transactionOwnerId: Y
       }
-    }), H = (O = N.data) == null ? void 0 : O.transactions[0].workflowState;
+    }), H = (T = N.data) == null ? void 0 : T.transactions[0].workflowState;
     return N.errors ? (N.errors.forEach((L) => {
       N.errors && console.log("Server Error:", L.message);
     }), null) : H ?? null;
   })() || (console.warn("State mismatch detected. Uploading known state explicitly"), console.warn("State Object:", JSON.stringify(A())), await c.updateStateWithServerImmediate(A), console.log("Server state is undefined @ Workflow completion"));
   const l = c.getPreviewService(), d = (F = e == null ? void 0 : e.finalizeStepConfig) == null ? void 0 : F.lookAtAnimation, w = l && e.showModelOnFinishStep && !!d, E = o && $e(o, e, !0), h = o && $e(o, e, !1), C = async (M) => {
-    const S = {};
-    let Y = 0;
+    const Y = {};
+    let S = 0;
     if (Object.keys(n).length > 0)
       for (const N of Object.keys(n)) {
-        const H = n[N], O = e.steps.find((L) => L.stepName === N);
+        const H = n[N], T = e.steps.find((L) => L.stepName === N);
         for (let L = 0; L < H.selections.length; ++L) {
           const V = H.selections[L];
-          if (O && (!M || O.option && (O.option.variants || []).length > 1 && !O.data.hideSelectionInCart && !O.data.hideSelectionsInCart)) {
-            const Je = O.stepTitle;
-            S[Je] ? S[Je].push({
+          if (T && (!M || T.option && (T.option.variants || []).length > 1 && !T.data.hideSelectionInCart && !T.data.hideSelectionsInCart)) {
+            const Je = T.stepTitle;
+            Y[Je] ? Y[Je].push({
               id: V.id || "",
               name: V.name,
               priceModifier: V.priceModifier
-            }) : S[Je] = [
+            }) : Y[Je] = [
               {
                 id: V.id || "",
                 name: V.name,
@@ -6422,25 +6424,25 @@ const rA = D`
               }
             ];
           }
-          Y += V.priceModifier;
+          S += V.priceModifier;
         }
       }
-    return [S, Y];
+    return [Y, S];
   }, [u] = await C(!0), f = Object.fromEntries(
-    Object.keys(u).map((M) => [M, u[M].map((S) => S.id)])
+    Object.keys(u).map((M) => [M, u[M].map((Y) => Y.id)])
   ), [Q] = await C(!1), m = Object.fromEntries(
     Object.keys(Q).map((M) => [
       M,
-      Q[M].map((S) => S.id)
+      Q[M].map((Y) => Y.id)
     ])
   ), p = await s(w, a.id);
   return {
     designDetails: (() => {
       const M = {
         name: i,
-        layouts: t.map((S) => ({
-          index: S.index,
-          panelId: S.panelId
+        layouts: t.map((Y) => ({
+          index: Y.index,
+          panelId: Y.panelId
         })),
         workflowId: e.id,
         transactionId: a.id,
@@ -6448,16 +6450,16 @@ const rA = D`
         previewImage: p
       };
       if (h) {
-        const S = [];
-        for (const [Y, N] of Object.entries(h))
-          S.push({ key: Y, value: N });
-        M.metadata = S;
+        const Y = [];
+        for (const [S, N] of Object.entries(h))
+          Y.push({ key: S, value: N });
+        M.metadata = Y;
       }
       if (f) {
-        const S = [];
-        for (const [Y, N] of Object.entries(m))
-          S.push({ key: Y, ids: N });
-        M.selectedVariants = S;
+        const Y = [];
+        for (const [S, N] of Object.entries(m))
+          Y.push({ key: S, ids: N });
+        M.selectedVariants = Y;
       }
       return M;
     })(),
@@ -6714,7 +6716,7 @@ class Qe {
     }
     let n = 2048;
     t && t <= 2048 && (n = t);
-    const i = Ye(n, n), s = this.commandContext.getAllLayouts(), o = A.defaultPreviewPanelIndex || 0, r = A.panels[o], g = s.find((Q) => {
+    const i = Se(n, n), s = this.commandContext.getAllLayouts(), o = A.defaultPreviewPanelIndex || 0, r = A.panels[o], g = s.find((Q) => {
       var m;
       return ((m = Q.layoutState) == null ? void 0 : m.layout.panelId) === (r == null ? void 0 : r.name);
     }) || s[0], B = g.layoutState.layout.previewRegion ? {
@@ -6739,7 +6741,7 @@ class Qe {
     await (await bt.from(d, E, {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !1,
-      createCanvas: Ye,
+      createCanvas: Se,
       createImage: Rt,
       DOMParser: Ut(),
       fetch: Ue
@@ -7024,12 +7026,12 @@ const Cn = [
 ], Qn = async (c, e, t) => {
   const A = e.data, a = t.data.baseUrl, n = A.assetUrl.replace("localhost", "localstack"), i = a.slice(0, 4) === "http" ? "" : "https://", s = new URL(i + a);
   s.searchParams.append("video", Ct(JSON.stringify([{ href: n }]))), s.pathname = s.pathname + (s.pathname.slice(-1) === "/" ? "" : "/");
-  const o = s.toString(), g = `data:image/svg+xml;base64,${Ct(await Tt(o, { type: "svg" }))}`, B = (d) => {
+  const o = s.toString(), g = `data:image/svg+xml;base64,${Ct(await Ot(o, { type: "svg" }))}`, B = (d) => {
     const w = c.find((h) => h.panelId === d.panelId);
     if (!w)
       throw new z(d);
     const E = J();
-    return new T(
+    return new O(
       {
         id: E,
         src: g,
@@ -7070,7 +7072,7 @@ const Cn = [
         top: a.y
       });
       return [
-        new T(
+        new O(
           {
             id: l,
             path: B.path,
@@ -7094,7 +7096,7 @@ const Cn = [
           },
           d
         ),
-        new St(l, i, w)
+        new Yt(l, i, w)
       ];
     };
     return (await Promise.all(A.data.regions.map((r) => o(r)))).flat();
@@ -7124,13 +7126,13 @@ const Cn = [
     Cn.includes(I.tagName) && !I.attributes.getNamedItem("fill") && I.setAttribute("fill", "#000000");
     const F = I.attributes.getNamedItem("fill");
     if (F && F.value !== "none") {
-      const S = F.value, N = `spiff-fill-${S.replace(/\W/g, "")}`;
-      I.classList.add(N), E[N] = { browserValue: S };
+      const Y = F.value, N = `spiff-fill-${Y.replace(/\W/g, "")}`;
+      I.classList.add(N), E[N] = { browserValue: Y };
     }
     const M = I.attributes.getNamedItem("stroke");
     if (M && M.value !== "none") {
-      const S = M.value, N = `spiff-stroke-${S.replace(/\W/g, "")}`;
-      I.classList.add(N), E[N] = { browserValue: S };
+      const Y = M.value, N = `spiff-stroke-${Y.replace(/\W/g, "")}`;
+      I.classList.add(N), E[N] = { browserValue: Y };
     }
   });
   const C = kt().serializeToString(w), u = a.colors;
@@ -7143,11 +7145,11 @@ const Cn = [
         }
   }
   const f = (I) => {
-    const F = c.find((S) => S.panelId === I.panelId);
+    const F = c.find((Y) => Y.panelId === I.panelId);
     if (!F)
       throw new z(I);
     const M = J();
-    return new T(
+    return new O(
       {
         colors: E,
         id: M,
@@ -7176,7 +7178,7 @@ const Cn = [
     if (!r)
       throw new z(o);
     const g = J();
-    return new T(
+    return new O(
       {
         colors: {},
         id: g,
@@ -7219,7 +7221,7 @@ const Cn = [
     if (!d)
       throw new z(l);
     const w = J();
-    return new T(
+    return new O(
       {
         id: w,
         src: s,
@@ -7276,7 +7278,7 @@ const Cn = [
             />
         </svg>
         `, w = { "spiff-fill-shape": { browserValue: i.color || "#000000" } }, E = J();
-    return new T(
+    return new O(
       {
         colors: w,
         id: E,
@@ -7327,7 +7329,7 @@ const Cn = [
           excludeFromExport: e.data.excludeFromPrint,
           preserveAspectRatio: "none"
         };
-        A.push(new T(B, g));
+        A.push(new O(B, g));
       });
     } catch (r) {
       console.error(r);
@@ -7362,7 +7364,7 @@ const Cn = [
         productOverlay: e.type === y.ProductOverlay ? !0 : void 0,
         excludeFromExport: e.data.excludeFromPrint
       };
-      A.push(new T(d, l));
+      A.push(new O(d, l));
     });
   }
   return A;
@@ -7441,7 +7443,7 @@ const Cn = [
         }
       );
       a.push(
-        new T(
+        new O(
           {
             ...u,
             fontSize: f,
@@ -7452,7 +7454,7 @@ const Cn = [
         )
       );
     } else
-      a.push(new T(u, C));
+      a.push(new O(u, C));
   }
   return a;
 }, Mn = (c, e) => c.conditions ? c.conditions.every((t) => {
@@ -7464,7 +7466,7 @@ const Cn = [
     );
   }
   return !1;
-}) : !0, Yn = async (c, e, t, A) => {
+}) : !0, Sn = async (c, e, t, A) => {
   const a = [], n = {};
   for (const i of c) {
     const s = e.steps.find((o) => o.stepName === i.name);
@@ -7533,10 +7535,10 @@ class me {
     return this.layouts;
   }
 }
-const Sn = () => new Promise((c, e) => {
-  const A = Ye().getContext("webgl2");
+const Yn = () => new Promise((c, e) => {
+  const A = Se().getContext("webgl2");
   c(!!A);
-}), Pn = Sn();
+}), Pn = Yn();
 class xn {
   constructor(e, t, A) {
     this.hasSetStaticContext = !1, this.interactiveDirty = !1, this.staticCtxDirty = !1, this.lastRequestedRenderArguments = void 0, this.lastCompletedStaticRender = void 0, this.lastModificationID = void 0, this.renderQueue = new qt(2), this.id = e, this.name = t, this.service = A;
@@ -7672,7 +7674,7 @@ class Nn extends Xt {
       ignoreClear: !0,
       ignoreMouse: !0,
       enableRedraw: !1,
-      createCanvas: Ye,
+      createCanvas: Se,
       createImage: Rt,
       DOMParser: Ut(),
       fetch: Ue
@@ -7691,13 +7693,13 @@ const Li = (c, e) => {
       }
     });
   }), t;
-}, Ti = async (c, e, t, A) => {
+}, Oi = async (c, e, t, A) => {
   let a = {
     serializableWorkflow: { steps: [] },
     layouts: {}
   };
   a = new G(t.map((o) => new GA(o))).apply(a);
-  const i = await Yn(c, e, t, A);
+  const i = await Sn(c, e, t, A);
   return new G(i).apply(a);
 }, Hn = D`
     ${ne}
@@ -7907,7 +7909,7 @@ const Li = (c, e) => {
             id
         }
     }
-`, Tn = D`
+`, On = D`
     mutation BundleRemoveTransaction(
         $id: String!
         $transactionId: String!
@@ -7922,7 +7924,7 @@ const Li = (c, e) => {
             id
         }
     }
-`, On = D`
+`, Tn = D`
     mutation BundleRemoveTransactions(
         $id: String!
         $transactionIds: [String!]!
@@ -8113,7 +8115,9 @@ class Xn extends gt {
     await Promise.all([
       t.setAspect(this.property.name, e.key, {
         ...t.getAspectStorage(this.property.name) || {},
-        originalAssetKey: e.key
+        originalAssetKey: e.key,
+        backgroundRemovedAssetKey: void 0,
+        useOriginalAsset: void 0
       }),
       this.applyImageSelection(e)
     ]);
@@ -8130,9 +8134,9 @@ class Xn extends gt {
     const A = this.bundle.getGlobalPropertyStateManager(), a = await v.removeBackgroundFromAsset(t), i = {
       ...A.getAspectStorage(this.property.name),
       backgroundRemovedAssetKey: a.key,
-      useOriginalAsset: e
+      useOriginalAsset: !e
     }, o = [e ? A.setAspect(this.property.name, a.key, i) : A.setAspectStorage(this.property.name, i)];
-    return e && o.push(this.applyImageSelection(a)), await Promise.all(o), a;
+    return e && o.push(this.applyImageSelection(a, void 0, !1)), await Promise.all(o), this.updateSharedStepStorage(i), a;
   }
   /**
    * Returns `true` if the state has an image assigned, otherwise `false`.
@@ -8172,22 +8176,58 @@ class Xn extends gt {
     return ((e = this.bundle.getGlobalPropertyStateManager().getAspectStorage(this.property.name)) == null ? void 0 : e.useOriginalAsset) ?? !1;
   }
   async setUseOriginalImage(e) {
-    const t = this.bundle.getGlobalPropertyStateManager(), A = t.getAspectStorage(this.property.name);
-    await t.setAspectStorage(this.property.name, {
-      ...A,
+    const t = await this.getOriginalImage();
+    if (!t)
+      throw new Error("You must select an image before calling setUseOriginalImage");
+    const A = this.bundle.getGlobalPropertyStateManager(), a = A.getAspectStorage(this.property.name);
+    if ((a == null ? void 0 : a.useOriginalAsset) === e)
+      return;
+    const n = {
+      ...a,
       useOriginalAsset: e
-    });
+    }, i = [A.setAspectStorage(this.property.name, n)];
+    if (e)
+      i.push(this.applyImageSelection(t, void 0, !1));
+    else {
+      const s = async () => {
+        const o = await this.getBackgroundRemovedImage();
+        if (!o)
+          throw new Error(
+            "You must call removeBackgroundFromImage before attempting to use that version of the image."
+          );
+        this.applyImageSelection(o, void 0, !1);
+      };
+      i.push(s());
+    }
+    this.updateSharedStepStorage(n);
   }
   async applyGlobalState(e) {
     const t = this.getStateValue();
     if (!t)
       return Promise.resolve();
     const A = await v.getLocalOrFromServer(t);
-    return A ? this.applyImageSelection(A, e) : Promise.resolve();
+    if (!A)
+      return Promise.resolve();
+    await this.applyImageSelection(A, e);
   }
-  async applyImageSelection(e, t) {
-    const a = this.getSharedSteps(t).map((n) => n.selectImage(e));
-    await Promise.all(a);
+  async applyImageSelection(e, t, A = !0) {
+    const n = this.getSharedSteps(t).map((i) => i.selectImage(e, A));
+    await Promise.all(n);
+  }
+  updateSharedStepStorage(e) {
+    this.bundle.getWorkflowExperiences().forEach(
+      (A) => A.getSteps().forEach((a) => {
+        var i;
+        if (a.getOverrideGlobalPropertyConfiguration(this.property.type))
+          return;
+        ((i = a.getRaw().globalPropertyAspectConfigurations) == null ? void 0 : i.some(
+          (s) => {
+            var o, r;
+            return s.globalPropertyConfigurationId === ((r = (o = this.bundle.getProductCollection()) == null ? void 0 : o.getResource().globalPropertyConfiguration) == null ? void 0 : r.id) && s.aspectName === this.property.name;
+          }
+        )) && A.getWorkflowManager().updateStorage(a.getId(), { framePatternData: e });
+      })
+    );
   }
 }
 class qn extends gt {
@@ -8958,7 +8998,7 @@ class yt {
         (n) => n.getWorkflowManager().getTransaction().id === t.id
       );
       a.setBundle(void 0), this.previewService && a.getWorkflowManager().ejectFromPreviewService(), this.bundleStateManager.removeStateForTransaction(t.id), await x.getShadowGraphqlClient().mutate({
-        mutation: Tn,
+        mutation: On,
         variables: {
           id: this.id,
           transactionId: t.id,
@@ -8990,7 +9030,7 @@ class yt {
     A.forEach((a) => a.setBundle(void 0)), [...this.workflowExperiences, ...A].forEach(
       (a) => a.checkForPriceBreakChanges()
     ), this.previewService && A.forEach((a) => a.getWorkflowManager().ejectFromPreviewService()), e.forEach((a) => this.bundleStateManager.removeStateForTransaction(a.id)), await x.getShadowGraphqlClient().mutate({
-      mutation: On,
+      mutation: Tn,
       variables: {
         id: this.id,
         transactionIds: e.map((a) => a.id),
@@ -9412,7 +9452,7 @@ class Bt {
   }
 }
 var ci = /* @__PURE__ */ ((c) => (c.Transaction = "Transaction", c.Bundle = "Bundle", c.Product = "Product", c.Variant = "Variant", c.Option = "Option", c.LineItem = "LineItem", c.Asset = "Asset", c))(ci || {});
-class Oi extends Bt {
+class Ti extends Bt {
   constructor(e) {
     super(`"${e}"`);
   }
@@ -10192,7 +10232,7 @@ class yi {
       } catch (A) {
         throw console.error(A), new U("Critical - Unable to synchronize workflow state with server.");
       }
-    }, this.initialized = !1, this.options = e, this.options.applicationKey && TA(this.options.applicationKey);
+    }, this.initialized = !1, this.options = e, this.options.applicationKey && OA(this.options.applicationKey);
   }
   /**
    * @returns The asset manager allows for common operations related to assets
@@ -10207,7 +10247,7 @@ class yi {
     return this.currencyCode;
   }
   getFlowService() {
-    if (!OA())
+    if (!TA())
       throw new Error("Application key required to use Flow Service.");
     return new oi();
   }
@@ -10456,7 +10496,7 @@ class yi {
    */
   async getExistingBundle(e, t, A, a) {
     var h, C, u, f, Q, m, p, I, F;
-    const n = P.getMap("bundleOwnerIds"), i = n == null ? void 0 : n.get(e), o = ((h = Object.entries(localStorage).find(([M, S]) => M.startsWith("CognitoIdentityServiceProvider") && M.endsWith("idToken"))) == null ? void 0 : h[0]) || "", r = localStorage.getItem(o), g = {};
+    const n = P.getMap("bundleOwnerIds"), i = n == null ? void 0 : n.get(e), o = ((h = Object.entries(localStorage).find(([M, Y]) => M.startsWith("CognitoIdentityServiceProvider") && M.endsWith("idToken"))) == null ? void 0 : h[0]) || "", r = localStorage.getItem(o), g = {};
     r && (g.Authorization = `Bearer ${r}`);
     const B = {
       bundleOwnerId: i,
@@ -10618,10 +10658,10 @@ class yi {
     if (e.length === 0)
       throw new U("No options provided!");
     const A = x.getShadowGraphqlClient(), a = async (m) => {
-      var M, S;
+      var M, Y;
       if (m.length === 0)
         return [];
-      const p = m.map((Y) => Y.option.transactionId), I = await A.query({
+      const p = m.map((S) => S.option.transactionId), I = await A.query({
         query: Ee,
         variables: {
           ids: p
@@ -10630,30 +10670,30 @@ class yi {
         fetchPolicy: "no-cache"
       }), F = I.data.transactions;
       if (F.length !== m.length) {
-        const Y = ((S = (M = I.errors) == null ? void 0 : M[0]) == null ? void 0 : S.message) || "Unknown error";
-        throw new U(`Not all transactions were found: ${Y}`);
+        const S = ((Y = (M = I.errors) == null ? void 0 : M[0]) == null ? void 0 : Y.message) || "Unknown error";
+        throw new U(`Not all transactions were found: ${S}`);
       }
-      return F.map((Y, N) => {
+      return F.map((S, N) => {
         var H;
         return {
-          transaction: Y,
-          workflowId: Y.workflowId,
-          readOnly: ((H = m.find((O) => O.option.transactionId === Y.id)) == null ? void 0 : H.option.readOnly) ?? !1,
+          transaction: S,
+          workflowId: S.workflowId,
+          readOnly: ((H = m.find((T) => T.option.transactionId === S.id)) == null ? void 0 : H.option.readOnly) ?? !1,
           index: m[N].index
         };
       });
     }, n = async (m) => {
-      var F, M, S;
+      var F, M, Y;
       if (m.length === 0)
         return [];
       const p = await A.mutate({
         mutation: la,
         variables: {
-          inputs: m.map((Y) => ({
-            integrationProductId: Y.option.type === "integration" ? Y.option.integrationProductId : void 0,
-            externalIntegrationId: Y.option.type === "external" ? Y.option.externalIntegrationId : void 0,
-            externalProductId: Y.option.type === "external" ? Y.option.externalProductId : void 0,
-            workflowId: Y.option.workflowId,
+          inputs: m.map((S) => ({
+            integrationProductId: S.option.type === "integration" ? S.option.integrationProductId : void 0,
+            externalIntegrationId: S.option.type === "external" ? S.option.externalIntegrationId : void 0,
+            externalProductId: S.option.type === "external" ? S.option.externalProductId : void 0,
+            workflowId: S.option.workflowId,
             claim: !0
           }))
         },
@@ -10661,12 +10701,12 @@ class yi {
         fetchPolicy: "no-cache"
       }), I = (F = p.data) == null ? void 0 : F.transactionCreateMany;
       if (!I || I.length === 0) {
-        const Y = ((S = (M = p.errors) == null ? void 0 : M[0]) == null ? void 0 : S.message) || "Unknown error";
-        throw new U(`Failed to create transactions: ${Y}`);
+        const S = ((Y = (M = p.errors) == null ? void 0 : M[0]) == null ? void 0 : Y.message) || "Unknown error";
+        throw new U(`Failed to create transactions: ${S}`);
       }
-      return I.map((Y, N) => ({
-        transaction: Y,
-        workflowId: Y.workflowId,
+      return I.map((S, N) => ({
+        transaction: S,
+        workflowId: S.workflowId,
         readOnly: !1,
         index: m[N].index
       }));
@@ -10676,26 +10716,26 @@ class yi {
       ...r.map(a),
       ...g.map(n)
     ])).flat(), l = [...new Set(B.map((m) => m.workflowId))], d = await hA(l, t), w = new Map(d.map((m) => [m.id, m])), E = P.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), h = B.map(async (m) => {
-      var O;
-      const { transaction: p, workflowId: I, readOnly: F, index: M } = m, S = w.get(I), Y = e[M];
+      var T;
+      const { transaction: p, workflowId: I, readOnly: F, index: M } = m, Y = w.get(I), S = e[M];
       !E.get(p.id) && p.transactionOwnerId && E.set(p.id, p.transactionOwnerId);
       const N = E.get(p.id) || void 0, H = {
         product: p.product,
         transaction: p,
         layouts: [],
-        singleVariantsRenderable: (O = Y == null ? void 0 : Y.workflowConfiguration) == null ? void 0 : O.singleVariantsRenderable,
+        singleVariantsRenderable: (T = S == null ? void 0 : S.workflowConfiguration) == null ? void 0 : T.singleVariantsRenderable,
         stateMutationFunc: F ? async () => {
           throw new b("State mutation is forbidden in read only mode!");
         } : async (L) => this.updateTransactionState({ ...L, context: { transactionOwnerId: N } }),
         readOnly: F,
-        workflow: S,
-        isReloadedTransaction: Y.type === "transaction"
+        workflow: Y,
+        isReloadedTransaction: S.type === "transaction"
       };
-      if (Y.type === "transaction" && p.workflowState) {
+      if (S.type === "transaction" && p.workflowState) {
         const L = JSON.parse(p.workflowState);
         H.layouts = Object.values(L.layouts || {}).map((V) => V.layout), await ee(L), await te(L), H.reloadedState = L;
-      } else if (!F && Y.workflowState) {
-        const L = JSON.parse(Y.workflowState);
+      } else if (!F && S.workflowState) {
+        const L = JSON.parse(S.workflowState);
         H.layouts = Object.values(L.layouts || {}).map((V) => V.layout), await ee(L), await te(L), H.reloadedState = L;
       } else
         H.layouts = je(
@@ -10704,7 +10744,7 @@ class yi {
         );
       return H.renderableContextService = new me(
         H.layouts
-      ), H.delayWorkflowStateSync = !0, this.initialized = !0, this.experienceOptions = H, { experienceOptions: H, index: M, options: Y };
+      ), H.delayWorkflowStateSync = !0, this.initialized = !0, this.experienceOptions = H, { experienceOptions: H, index: M, options: S };
     });
     P.setMap("transactionOwnerIds", E);
     const f = (await Promise.all(h)).sort((m, p) => m.index - p.index).map(async (m) => {
@@ -11070,7 +11110,7 @@ class Ki {
   }
 }
 var Mi = /* @__PURE__ */ ((c) => (c.SelectFrame = "SelectFrame", c.SelectImage = "SelectImage", c.Position = "Position", c))(Mi || {});
-class Yi extends W {
+class Si extends W {
   constructor(e, t) {
     var A;
     super(e, t), this.frameService = (A = this.manager.getStepSpecificServices(this.getId())) == null ? void 0 : A.frameService;
@@ -11095,15 +11135,16 @@ class Yi extends W {
    * @param asset The asset to use.
    * @param storeAsOriginal Optional: Store this asset as the original, unmodified version of the image. Default: `true`.
    */
-  selectImage(e, t = !0) {
+  async selectImage(e, t = !0) {
     var A;
-    if (De.selectImage(this.step, e, this.manager), t) {
+    if (await De.selectImage(this.step, e, this.manager), t) {
       const a = ((A = this.manager.getStepStorage(this.step.stepName)) == null ? void 0 : A.framePatternData) || {};
       this.manager.updateStorage(this.step.stepName, {
         framePatternData: {
           ...a,
           originalAssetKey: e.key,
-          backgroundRemovedAssetKey: void 0
+          backgroundRemovedAssetKey: void 0,
+          useOriginalAsset: void 0
         }
       });
     }
@@ -11119,13 +11160,13 @@ class Yi extends W {
     if (!t)
       throw new Error("You must supply an image selection before attempting to remove the background.");
     const A = await v.removeBackgroundFromAsset(t);
-    e && De.selectImage(this.step, A, this.manager);
+    e && await De.selectImage(this.step, A, this.manager);
     const a = ((n = this.manager.getStepStorage(this.step.stepName)) == null ? void 0 : n.framePatternData) || {};
     return this.manager.updateStorage(this.step.stepName, {
       framePatternData: {
         ...a,
         backgroundRemovedAssetKey: A.key,
-        useOriginalAsset: e
+        useOriginalAsset: !e
       }
     }), A;
   }
@@ -11161,9 +11202,24 @@ class Yi extends W {
     var e, t;
     return ((t = (e = this.manager.getStepStorage(this.step.stepName)) == null ? void 0 : e.framePatternData) == null ? void 0 : t.useOriginalAsset) ?? !1;
   }
-  setUseOriginalImageSelection(e) {
-    var A;
-    const t = ((A = this.manager.getStepStorage(this.step.stepName)) == null ? void 0 : A.framePatternData) || {};
+  async setUseOriginalImageSelection(e) {
+    var a;
+    const t = ((a = this.manager.getStepStorage(this.step.stepName)) == null ? void 0 : a.framePatternData) || {};
+    if (t.useOriginalAsset === e)
+      return;
+    const A = await this.getOriginalImageSelection();
+    if (!A)
+      throw new Error("You must provide an image selection before calling setUseOriginalImageSelection");
+    if (e)
+      this.selectImage(A, !1);
+    else {
+      const n = await this.getBackgroundRemovedImageSelection();
+      if (!n)
+        throw new Error(
+          "You must call removeBackgroundFromImageSelection before attempting to apply the image."
+        );
+      this.selectImage(n, !1);
+    }
     this.manager.updateStorage(this.step.stepName, {
       framePatternData: { ...t, useOriginalAsset: e }
     });
@@ -11196,7 +11252,7 @@ export {
   os as FontSourceCommand,
   fa as FrameService,
   Mi as FrameStep,
-  Yi as FrameStepHandle,
+  Si as FrameStepHandle,
   gt as GlobalPropertyHandle,
   rs as GroupCommand,
   _a as IllustrationStepHandle,
@@ -11215,7 +11271,7 @@ export {
   wA as ObjectInput,
   ci as ObjectInputType,
   dA as OptionGlobalPropertyHandle,
-  Se as OptionNotFoundError,
+  Ye as OptionNotFoundError,
   oe as ParseError,
   An as PictureStepHandle,
   ra as ProductCameraRig,
@@ -11237,7 +11293,7 @@ export {
   Es as StepType,
   us as TextChangeCommand,
   qn as TextGlobalPropertyHandle,
-  Oi as TextInput,
+  Ti as TextInput,
   sn as TextStepHandle,
   ii as Transform,
   ni as TransformCollection,
@@ -11256,19 +11312,19 @@ export {
   Is as frameDataCache,
   De as frameStepService,
   fs as generate,
-  Yn as generateCommands,
+  Sn as generateCommands,
   Ds as generateSVGWithUnknownColors,
-  Ti as generateStateFromDesignInputSteps,
+  Oi as generateStateFromDesignInputSteps,
   Fs as getAttributesFromArrayBuffer,
   ys as getAxisAlignedBoundingBox,
   Ia as getBoundedOffsets,
   Ms as getFrameData,
-  Ys as getSvgElement,
+  Ss as getSvgElement,
   Ie as getWorkflow,
   hA as getWorkflows,
   x as graphQlManager,
   Fe as illustrationStepService,
-  Ss as loadFont,
+  Ys as loadFont,
   $t as materialStepService,
   _t as modelStepService,
   Na as moduleStepService,