@spiffcommerce/core 26.21.0-beta.01b0c211-4629-501c-9655-e0bbaa301bc7 → 26.21.0-beta.4190ddd2-9076-5922-9341-377ce46df6ac

package/dist/index.mjs

@@ -331,8 +331,8 @@ class Qr {
           const p = window.__SENTRY__.hub;
           if (p) {
             const C = p.traceHeaders();
-            Object.entries(C).forEach(([w, v]) => {
-              l[w] = v;
+            Object.entries(C).forEach(([w, E]) => {
+              l[w] = E;
             });
           }
         }
@@ -5267,14 +5267,14 @@ const Q = () => {
   width: u
 }) => {
   var B;
-  const h = e || 0, m = 2 * ((l == null ? void 0 : l.scale) || 1), g = A || { x: 0, y: 0, width: u, height: i }, f = `${g.x} ${g.y} ${g.width} ${g.height}`, p = Q(), C = a.purpose === Gt.FreeDesign && /* @__PURE__ */ F("defs", { children: /* @__PURE__ */ F("clipPath", { id: "viewboxClip", children: /* @__PURE__ */ F("rect", { width: g.width, height: g.height, rx: h }) }) }), w = (B = a.colorProfiles) == null ? void 0 : B.map((E, I) => (
+  const h = e || 0, m = 2 * ((l == null ? void 0 : l.scale) || 1), g = A || { x: 0, y: 0, width: u, height: i }, f = `${g.x} ${g.y} ${g.width} ${g.height}`, p = Q(), C = a.purpose === Gt.FreeDesign && /* @__PURE__ */ F("defs", { children: /* @__PURE__ */ F("clipPath", { id: "viewboxClip", children: /* @__PURE__ */ F("rect", { width: g.width, height: g.height, rx: h }) }) }), w = (B = a.colorProfiles) == null ? void 0 : B.map((S, I) => (
     /* @ts-ignore */
-    /* @__PURE__ */ F("color-profile", { name: E.name, xlinkHref: E.key, children: " " }, I)
-  )), v = n.map((E) => ({
-    ...E,
+    /* @__PURE__ */ F("color-profile", { name: S.name, xlinkHref: S.key, children: " " }, I)
+  )), E = n.map((S) => ({
+    ...S,
     _renderingConfiguration: a,
     mask: l ? `url(#viewmask-${p})` : void 0
-  })), S = ya(v);
+  })), v = ya(E);
   return /* @__PURE__ */ lt(
     "svg",
     {
@@ -5311,7 +5311,7 @@ const Q = () => {
           {
             id: "element-group",
             clipPath: a.purpose === Gt.FreeDesign ? "url(#viewboxClip)" : void 0,
-            children: S.map((E) => Qn(E)).filter((E) => !!E)
+            children: v.map((S) => Qn(S)).filter((S) => !!S)
           }
         ),
         l && /* @__PURE__ */ F(
@@ -5353,12 +5353,12 @@ const Q = () => {
     }
   );
 }, rc = (r, t, e, a, n) => {
-  const i = gt(n), s = e / 2, o = a / 2, l = r + s, c = t + o, d = Math.sin(i), A = Math.cos(i), u = s, h = s, m = -o, g = o, f = u * A - m * d, p = h * A - g * d, C = u * d + m * A, w = h * d + g * A, v = Math.max(Math.abs(f), Math.abs(p)), S = Math.max(Math.abs(C), Math.abs(w));
+  const i = gt(n), s = e / 2, o = a / 2, l = r + s, c = t + o, d = Math.sin(i), A = Math.cos(i), u = s, h = s, m = -o, g = o, f = u * A - m * d, p = h * A - g * d, C = u * d + m * A, w = h * d + g * A, E = Math.max(Math.abs(f), Math.abs(p)), v = Math.max(Math.abs(C), Math.abs(w));
   return {
-    minX: l - v,
-    maxX: l + v,
-    minY: c - S,
-    maxY: c + S
+    minX: l - E,
+    maxX: l + E,
+    minY: c - v,
+    maxY: c + v
   };
 }, ic = (r, t, e) => {
   const a = Math.sqrt(Math.pow(t.x - r.x, 2) + Math.pow(t.y - r.y, 2)), n = Math.sqrt(Math.pow(t.x - e.x, 2) + Math.pow(t.y - e.y, 2)), i = Math.sqrt(Math.pow(e.x - r.x, 2) + Math.pow(e.y - r.y, 2));
@@ -5516,8 +5516,8 @@ const Q = () => {
       /* @__PURE__ */ F("feFuncB", { type: "discrete", tableValues: n() })
     ] })
   ] }) }) }), s = r.rotation || 0, o = gt(s), l = Math.cos(o), c = -Math.sin(o), d = () => {
-    var w, v, S, B, E, I, P, x, M, N;
-    const A = ((w = r.pattern) == null ? void 0 : w.x) || 0, u = ((v = r.pattern) == null ? void 0 : v.y) || 0, h = ((S = r.pattern) == null ? void 0 : S.width) || 0, m = ((B = r.pattern) == null ? void 0 : B.height) || 0, g = ((E = r.pattern) == null ? void 0 : E.scaleX) || 1, f = ((I = r.pattern) == null ? void 0 : I.scaleY) || 1, p = ((P = r.pattern) == null ? void 0 : P.rotation) || 0;
+    var w, E, v, B, S, I, P, x, M, N;
+    const A = ((w = r.pattern) == null ? void 0 : w.x) || 0, u = ((E = r.pattern) == null ? void 0 : E.y) || 0, h = ((v = r.pattern) == null ? void 0 : v.width) || 0, m = ((B = r.pattern) == null ? void 0 : B.height) || 0, g = ((S = r.pattern) == null ? void 0 : S.scaleX) || 1, f = ((I = r.pattern) == null ? void 0 : I.scaleY) || 1, p = ((P = r.pattern) == null ? void 0 : P.rotation) || 0;
     return [(x = r.pattern) != null && x.svg ? {
       id: `${t}-contents`,
       type: T.Illustration,
@@ -5663,8 +5663,8 @@ const Ui = (r) => r.substring(0, 5).toLowerCase().trim() === "data:", Oe = /* @_
       var m, g, f;
       if (h.type === "font-face" && h.declarations) {
         const p = (m = h.declarations.find(
-          (v) => v.property === "font-family"
-        )) == null ? void 0 : m.value, C = (g = h.declarations.find((v) => v.property === "src")) == null ? void 0 : g.value, w = (f = C == null ? void 0 : C.match(/'(https.*?)'/)) == null ? void 0 : f[1];
+          (E) => E.property === "font-family"
+        )) == null ? void 0 : m.value, C = (g = h.declarations.find((E) => E.property === "src")) == null ? void 0 : g.value, w = (f = C == null ? void 0 : C.match(/'(https.*?)'/)) == null ? void 0 : f[1];
         p && w && n.set(p, w);
       }
     });
@@ -5676,18 +5676,18 @@ const Ui = (r) => r.substring(0, 5).toLowerCase().trim() === "data:", Oe = /* @_
       0,
       0,
       parseInt(u.getAttribute("font-size") ?? "72")
-    ), v = w.getBoundingBox().x2 - w.getBoundingBox().x1;
-    let S = 0;
+    ), E = w.getBoundingBox().x2 - w.getBoundingBox().x1;
+    let v = 0;
     const B = A.getAttribute("text-anchor");
-    B === "middle" ? S = v / 2 : B === "end" && (S = v);
-    const E = g.getPath(
+    B === "middle" ? v = E / 2 : B === "end" && (v = E);
+    const S = g.getPath(
       A.innerHTML,
-      parseFloat(A.getAttribute("x") ?? "0") - S,
+      parseFloat(A.getAttribute("x") ?? "0") - v,
       parseFloat(A.getAttribute("y") ?? "0"),
       parseInt(u.getAttribute("font-size") ?? "72")
     );
-    E.fill = f, E.stroke = p, E.strokeWidth = parseFloat(C ?? "0");
-    const I = E.toSVG(2), x = t.parseFromString(I, "image/svg+xml").firstElementChild;
+    S.fill = f, S.stroke = p, S.strokeWidth = parseFloat(C ?? "0");
+    const I = S.toSVG(2), x = t.parseFromString(I, "image/svg+xml").firstElementChild;
     h.appendChild(x);
   }
   return e.querySelectorAll("text").forEach((d) => d.remove()), Et().serializeToString(a);
@@ -7674,7 +7674,7 @@ class we {
           f,
           c && !t.data.forceImageCover ? { scale: c } : void 0,
           t.data.forceImageCover
-        ) : void 0, v = p ? {
+        ) : void 0, E = p ? {
           id: Q(),
           src: p.src,
           x: (w == null ? void 0 : w.x) || 0,
@@ -7684,18 +7684,18 @@ class we {
           scaleX: (w == null ? void 0 : w.zoom) || 1,
           scaleY: (w == null ? void 0 : w.zoom) || 1,
           rotation: 0
-        } : void 0, S = Q(), E = n.getLayouts().find((I) => I.panelId === m.panelId);
-        if (!E)
+        } : void 0, v = Q(), S = n.getLayouts().find((I) => I.panelId === m.panelId);
+        if (!S)
           throw new Y(m);
         return {
-          command: this.getCreateElementCommand(S, m, E, {
+          command: this.getCreateElementCommand(v, m, S, {
             frameData: f,
-            pattern: v,
+            pattern: E,
             disablePlaceholder: t.data.disablePlaceholder,
             stepName: t.stepName
           }),
           regionEl: {
-            id: S,
+            id: v,
             region: m
           },
           removeExistingCommands: C
@@ -7940,13 +7940,13 @@ class os {
     if (!l)
       throw new Wt(o);
     const c = await ot(await this.getIllustrationBody(l)), d = await qt(c.svg), A = (C) => {
-      const w = i.getLayouts().find((S) => S.panelId === C.panelId);
+      const w = i.getLayouts().find((v) => v.panelId === C.panelId);
       if (!w)
         throw new Y(C);
-      const v = Q();
+      const E = Q();
       return {
-        regionElement: { id: v, region: C },
-        command: this.getCreateElementCommand(v, C, w, {
+        regionElement: { id: E, region: C },
+        command: this.getCreateElementCommand(E, C, w, {
           stepName: t.stepName,
           src: l,
           objectURL: d,
@@ -7958,40 +7958,40 @@ class os {
     const f = t.data.colorOption;
     return f && ((p = f.variants) == null || p.forEach((C) => {
       g = g.map((w) => {
-        var v;
-        return w.toLowerCase() === ((v = C.color) == null ? void 0 : v.toLowerCase()) ? C.name : w;
+        var E;
+        return w.toLowerCase() === ((E = C.color) == null ? void 0 : E.toLowerCase()) ? C.name : w;
       });
     })), i.updateMetadata(t.stepName, { colors: g }), {
       command: new O(m),
       followup: async () => {
-        var w, v;
+        var w, E;
         await i.setSelectionsAndElements(
           t.stepName,
           [e],
-          u.map((S) => S.regionElement),
+          u.map((v) => v.regionElement),
           async () => {
             i.setMandatoryFulfilled(t.stepName, !0), n(!1);
           }
         );
         const C = ((w = o.assetConfiguration) == null ? void 0 : w.defaultColorVariants) || [];
         if (C.length !== 0) {
-          const S = {};
-          (((v = o.assetConfiguration) == null ? void 0 : v.channelNumbers) || []).forEach((E) => {
+          const v = {};
+          (((E = o.assetConfiguration) == null ? void 0 : E.channelNumbers) || []).forEach((S) => {
             var P;
-            const I = C.find((x) => x.channelNumber === E.number);
-            I && (S[`${E.id.replace(/\W/g, "")}`] = { browserValue: ((P = I == null ? void 0 : I.variant) == null ? void 0 : P.color) || "" });
+            const I = C.find((x) => x.channelNumber === S.number);
+            I && (console.log(`COLOR DEBUG: selecting variant for ${S.id} and number ${S.number}`), v[`${S.id.replace(/\W/g, "")}`] = { browserValue: ((P = I == null ? void 0 : I.variant) == null ? void 0 : P.color) || "" });
           }), await this.changeColors(
             t,
-            u.map((E) => E.regionElement),
+            u.map((S) => S.regionElement),
             i,
             () => i.getCommandContext().getAllLayouts(),
-            new Map(Object.entries(S))
+            new Map(Object.entries(v))
           );
         }
         if (t.data.colorPickerEnabled) {
-          const S = await this.availableColors(t, i) || [], B = Object.keys(c.colors), E = S.length === 1 && B.length === 1;
-          if (E) {
-            const I = S[0], P = B[0];
+          const v = await this.availableColors(t, i) || [], B = Object.keys(c.colors), S = v.length === 1 && B.length === 1;
+          if (S) {
+            const I = v[0], P = B[0];
             await this.changeColors(
               t,
               u.map((x) => x.regionElement),
@@ -8000,7 +8000,7 @@ class os {
               /* @__PURE__ */ new Map([[P, I.variant.color]])
             );
           }
-          !E && C.length === 0 && await this.changeColors(
+          !S && C.length === 0 && await this.changeColors(
             t,
             u.map((I) => I.regionElement),
             i,
@@ -8983,8 +8983,8 @@ class ps {
             g,
             async () => {
               e.updateMetadata(t.stepName, { color: f, text: p }), e.updateStorage(t.stepName, { text: p, inputText: p });
-              const w = o.map((S) => new Va(S.id, m)), v = new O(w);
-              e.getCommandDispatcher()(v);
+              const w = o.map((v) => new Va(v.id, m)), E = new O(w);
+              e.getCommandDispatcher()(E);
             }
           );
           const { command: C } = q.updateInputText(
@@ -9132,7 +9132,7 @@ class ps {
             colorProfileAssetKey: (g = f.colorProfile) == null ? void 0 : g.key
           });
         }
-        const C = await this.getDefaultColor(a), w = C || "#000000", v = {
+        const C = await this.getDefaultColor(a), w = C || "#000000", E = {
           stepRegion: A,
           stepName: t,
           align: this.textAlign(a),
@@ -9156,34 +9156,34 @@ class ps {
           curved: a.curved,
           paths: a.paths,
           fillSpotColorDefinition: p
-        }, S = [], B = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map();
-        if (!v.fontData)
+        }, v = [], B = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Map();
+        if (!E.fontData)
           throw new z("Failed to resolve font data for text.");
         const [I, P] = Ae(
-          v.fontSize,
-          v.fontData,
+          E.fontSize,
+          E.fontData,
           {
-            left: v.x,
-            top: v.y,
-            width: v.width,
-            height: v.height,
-            rotation: v.rotation,
+            left: E.x,
+            top: E.y,
+            width: E.width,
+            height: E.height,
+            rotation: E.rotation,
             panelId: ""
           },
           [l],
           { size: a.size, minSize: a.minSize, maxSize: a.maxSize }
         );
-        B.set(v.id, I), E.set(v.id, P);
+        B.set(E.id, I), S.set(E.id, P);
         const x = a.curved || a.vertical ? l : (P || []).join(`
 `);
-        S.push(
-          this.generateTextChangeCommandsForRegion(I, a, v.id, x)
+        v.push(
+          this.generateTextChangeCommandsForRegion(I, a, E.id, x)
         );
-        const M = new W(v, h);
+        const M = new W(E, h);
         return {
           regionElement: { id: m, region: A },
-          commands: [M, ...S],
-          newElement: v,
+          commands: [M, ...v],
+          newElement: E,
           fontData: n
         };
       } catch (f) {
@@ -9218,29 +9218,29 @@ class ps {
    */
   async changeInputTextWithRegion(t, e, a, n, i, s, o, l, c, d) {
     const A = (n || "").replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g, ""), u = this.getProcessedInput(A, t.data, o), h = s.getRegionElements(t.stepName), m = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
-    for (const v of h)
-      if (v.region) {
-        const [S, B] = Ae(
+    for (const E of h)
+      if (E.region) {
+        const [v, B] = Ae(
           e,
           a,
-          v.region,
+          E.region,
           [u],
           { size: t.data.size, minSize: t.data.minSize, maxSize: t.data.maxSize }
         );
-        m.set(v.id, S), g.set(v.id, B);
+        m.set(E.id, v), g.set(E.id, B);
       }
     const p = (() => {
       if (t.data && t.data.maxLength && u.length > t.data.maxLength)
         return d && d(!0), { info: "0" };
-      const v = s.getProfanities(), S = Ke(u.toLowerCase());
-      for (const B of S)
-        for (const E in v) {
-          const I = v[E].toLowerCase().replace(/\s/g, "");
+      const E = s.getProfanities(), v = Ke(u.toLowerCase());
+      for (const B of v)
+        for (const S in E) {
+          const I = E[S].toLowerCase().replace(/\s/g, "");
           if (B === I)
             return l(!0), { error: "Blocked profanity." };
         }
       return !t.data.vertical && !t.data.allowNewlines && (u.includes(`
-`) || u.includes("\r")) ? (l(!0), { error: "Cannot span multiple lines." }) : !t.data.curved && !Array.from(g.values()).every((E) => E) ? (l(!0), { error: "Does not fit." }) : (l(!1), { info: (t.data.maxLength - u.length).toString() });
+`) || u.includes("\r")) ? (l(!0), { error: "Cannot span multiple lines." }) : !t.data.curved && !Array.from(g.values()).every((S) => S) ? (l(!0), { error: "Does not fit." }) : (l(!1), { info: (t.data.maxLength - u.length).toString() });
     })();
     if (p.error) {
       c(p.error);
@@ -9252,15 +9252,15 @@ class ps {
       text: this.injectReplaceableText(A, t.data)
     }), (i.defaultCleared || !t.data.deleteDefaultOnFocus) && A.trim() !== "" && s.setMandatoryFulfilled(t.stepName, !0);
     const C = [];
-    for (const v of h) {
-      const S = t.data.curved ? u : (g.get(v.id) || []).join(`
+    for (const E of h) {
+      const v = t.data.curved ? u : (g.get(E.id) || []).join(`
 `);
       C.push(
         this.generateTextChangeCommandsForRegion(
-          m.get(v.id) || 1,
+          m.get(E.id) || 1,
           t.data,
-          v.id,
-          S
+          E.id,
+          v
         )
       );
     }
@@ -9426,14 +9426,14 @@ class Is extends Cs {
     const a = Li(ws), i = t !== "" ? ((w) => w.charAt(0).toUpperCase() + w.substr(1).toLowerCase())(t) : "", s = a.getPath(i, 0, 72, 72), o = s.toSVG(2), l = s.getBoundingBox(), c = l.x2 - l.x1, d = s.toPathData(3), A = () => {
       const w = tt("g");
       w.classList.add("module-text-group");
-      const v = tt("defs");
-      w.appendChild(v), v.appendChild(Ss(0, 2, 2, "shadow"));
-      const S = tt("path");
-      S.setAttribute("d", d), S.setAttribute("stroke", "black"), S.setAttribute("stroke-width", "3"), v.appendChild(S);
+      const E = tt("defs");
+      w.appendChild(E), E.appendChild(Ss(0, 2, 2, "shadow"));
+      const v = tt("path");
+      v.setAttribute("d", d), v.setAttribute("stroke", "black"), v.setAttribute("stroke-width", "3"), E.appendChild(v);
       const B = tt("g");
-      B.classList.add("module-layer0"), w.appendChild(B), B.setAttribute("filter", "url(#shadow)"), B.innerHTML = S.outerHTML;
-      const E = tt("g");
-      E.classList.add("module-layer1"), w.appendChild(E), E.setAttribute("stroke-width", "3"), E.setAttribute("stroke", "rgb(45,41,38)"), E.setAttribute("fill", "rgb(45,41,38)"), E.setAttribute("transform", "translate(0.5,0)"), E.innerHTML = o;
+      B.classList.add("module-layer0"), w.appendChild(B), B.setAttribute("filter", "url(#shadow)"), B.innerHTML = v.outerHTML;
+      const S = tt("g");
+      S.classList.add("module-layer1"), w.appendChild(S), S.setAttribute("stroke-width", "3"), S.setAttribute("stroke", "rgb(45,41,38)"), S.setAttribute("fill", "rgb(45,41,38)"), S.setAttribute("transform", "translate(0.5,0)"), S.innerHTML = o;
       const I = tt("g");
       I.classList.add("module-layer2"), w.appendChild(I), I.setAttribute("fill", "rgb(255,209,0)"), I.setAttribute("transform", "translate(1,-0.1)"), I.innerHTML = o;
       const P = tt("g");
@@ -10017,13 +10017,13 @@ class ja extends Dn {
 class eo {
   constructor(t, e, a, n, i, s, o, l, c, d, A, u, h = !1, m, g = !1, f = !1, p = !1) {
     this.workflowStatePromiseQueue = new Pn(1), this.initialized = !1, this.readOnly = !1, this.isReloadedTransaction = !1, this.singleVariantsRenderable = !1, this.stepTags = {}, this.renderLayouts = () => {
-      var v;
+      var E;
       if (!this.previewService)
         return;
-      const C = this.getCommandContext().getAllLayouts(), w = (v = this.getLayoutPreviewService()) == null ? void 0 : v.getAll();
+      const C = this.getCommandContext().getAllLayouts(), w = (E = this.getLayoutPreviewService()) == null ? void 0 : E.getAll();
       if (w)
-        for (const [, S] of w)
-          S.render(C);
+        for (const [, v] of w)
+          v.render(C);
     }, this.experience = t, this.client = e, this.updateTransaction = o, this.commandContext = s, this.reloadedState = u, this.transaction = l, this.readOnly = h, this.singleVariantsRenderable = f, this.confirmedDesign = !1, this.editedSteps = {}, this.informationResults = [], this.mandatorySteps = {}, this.pendingUpdates = [], this.selectionCost = 0, this.workflow = a, this.stepSpecificServices = {}, this.profanityFilter = n, this.pollers = [], this.allScenes = [], this.layouts = i, this.product = c, this.previewService = d, this.modelContainer = m, this.stepElements = {}, this.stepInitialised = {}, this.stepMetadata = {}, this.stepSelections = {}, this.storage = {}, this.validationErrors = { steps: /* @__PURE__ */ new Map() }, 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.currentAdjustingStepId = "", this.renderableContextService = A, this.isReloadedTransaction = g, this.workflow.steps.forEach((C) => {
       this.stepTags[C.stepName] = C.tags ?? [];
     }), p && (this.workflowStatePromiseQueue.enabled = !1), this.initializationPromise = this.initializeDefaultWorkflowState(a), this.initializationPromise.then(() => {
@@ -10498,16 +10498,16 @@ class eo {
     ), this.stepElements = {}, this.stepInitialised = {}, this.stepMetadata = {}, this.stepSelections = {}, this.storage = {}, await this.ensureStepsAreLoaded();
   }
   async setSelectionsAndElements(t, e, a, n) {
-    var S;
+    var v;
     const i = this.stepSelections;
     this.stepSelections = {
       ...this.stepSelections,
       [t]: { selectedVariants: e }
-    }, this.selectionCost = Object.values(this.stepSelections).reduce((B, E) => B + E.selectedVariants.map((I) => I.priceModifier || 0).reduce((I, P) => I + P, 0), 0), this.workflow.steps.forEach((B) => {
+    }, this.selectionCost = Object.values(this.stepSelections).reduce((B, S) => B + S.selectedVariants.map((I) => I.priceModifier || 0).reduce((I, P) => I + P, 0), 0), this.workflow.steps.forEach((B) => {
       Ct(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, o = It(s, i), l = It(s, this.stepSelections), c = o.map((B) => B.silentSteps).flat(), A = l.map((B) => B.silentSteps).flat().filter(
-      (B) => !c.some((E) => E.stepName === B.stepName)
+      (B) => !c.some((S) => S.stepName === B.stepName)
     );
     c.forEach((B) => {
       Ct(B, this.stepSelections) || (this.stepInitialised[B.stepName] = !1);
@@ -10520,16 +10520,16 @@ class eo {
     }, this.removeElements(u);
     const g = this.workflow.steps.find((B) => B.stepName === t);
     if ((g == null ? void 0 : g.type) === D.Frame) {
-      const B = (S = this.getWorkflowExperience().getStepById(g.stepName)) == null ? void 0 : S.frameService;
-      B == null || B.setTargetElements(a.map((E) => E.id));
+      const B = (v = this.getWorkflowExperience().getStepById(g.stepName)) == null ? void 0 : v.frameService;
+      B == null || B.setTargetElements(a.map((S) => S.id));
     }
     const f = u.map((B) => new vt(B.id)), p = new $a(this.constructSerializableWorkflow()), C = [...m, ...f, p];
     C.length > 0 && this.commandContext.apply(new O(C), !0), await this.ensureStepsAreLoaded(), this.onElementsChange();
-    const w = this.getInvalidModelVariants(), v = this.modelContainer;
-    if (v) {
+    const w = this.getInvalidModelVariants(), E = this.modelContainer;
+    if (E) {
       const B = w.map(
-        (E) => v.applyModelVariant(
-          E,
+        (S) => E.applyModelVariant(
+          S,
           {
             contextService: this.getLayoutPreviewService()
           },
@@ -10927,7 +10927,7 @@ class ao extends rt {
     return ((s == null ? void 0 : s.defaultColorVariants) || []).length !== 0 ? s.channelNumbers.forEach((c) => {
       if (c.number.toString() === t) {
         const d = c.id.replace(/\W/g, "");
-        a ? n.set(d, { browserValue: e, pmsValue: a }) : n.set(d, e);
+        a ? n.set(d, { browserValue: e, pmsValue: a }) : (n.set(d, e), console.log(`COLOR DEBUG: for item ${c.number} setting hex ${d}, value ${e}`));
       }
     }) : a ? n.set(t, { browserValue: e, pmsValue: a }) : n.set(t, e), de.changeColors(
       this.step,
@@ -11633,10 +11633,10 @@ const go = async (r) => {
     return [x, M];
   }, [C] = await p(!0), w = Object.fromEntries(
     Object.keys(C).map((P) => [P, C[P].map((x) => x.id)])
-  ), [v] = await p(!1), S = Object.fromEntries(
-    Object.keys(v).map((P) => [
+  ), [E] = await p(!1), v = Object.fromEntries(
+    Object.keys(E).map((P) => [
       P,
-      v[P].map((x) => x.id)
+      E[P].map((x) => x.id)
     ])
   );
   let B = await o(m, n.id);
@@ -11670,7 +11670,7 @@ const go = async (r) => {
       }
       if (w) {
         const x = [];
-        for (const [M, N] of Object.entries(S))
+        for (const [M, N] of Object.entries(v))
           x.push({ key: M, ids: N });
         P.selectedVariants = x;
       }
@@ -11995,9 +11995,9 @@ class bo {
     }
     let i = 2048;
     e && e <= 2048 && (i = e);
-    const s = mt(i, i), o = this.commandContext.getAllLayouts(), l = a.defaultPreviewPanelIndex || 0, c = a.panels[l], d = o.find((v) => {
-      var S;
-      return ((S = v.layoutState) == null ? void 0 : S.layout.panelId) === (c == null ? void 0 : c.name);
+    const s = mt(i, i), o = this.commandContext.getAllLayouts(), l = a.defaultPreviewPanelIndex || 0, c = a.panels[l], d = o.find((E) => {
+      var v;
+      return ((v = E.layoutState) == null ? void 0 : v.layout.panelId) === (c == null ? void 0 : c.name);
     }) || o[0], A = d.layoutState.layout.previewRegion ? {
       x: d.layoutState.layout.previewRegion.left,
       y: d.layoutState.layout.previewRegion.top,
@@ -12127,7 +12127,7 @@ class bo {
             const p = u.getCurrentVariant();
             if (!p)
               return;
-            c.selectVariant(p), d.delete(JSON.stringify(m));
+            console.log("COLOR DEBUG: copying starget step"), c.selectVariant(p), d.delete(JSON.stringify(m));
           } else if (f && (g == null ? void 0 : g.getType()) === "Text") {
             const p = u.getText();
             c.setText(p), d.delete(JSON.stringify(m));
@@ -12414,11 +12414,11 @@ const Io = [
     return console.error(o), [];
   }
 }, xo = async (r, t, e, a) => {
-  var S, B;
+  var v, B;
   const n = e.data, i = a.option;
   if (!i)
     return console.error(`No option for step ${a.stepName}.`), [];
-  const s = ((S = i.variants) == null ? void 0 : S.find((E) => E.id === n.illustrationVariantId)) || te(i);
+  const s = ((v = i.variants) == null ? void 0 : v.find((S) => S.id === n.illustrationVariantId)) || te(i);
   if (!s)
     return console.error(`No variant with ID: ${n.illustrationVariantId}`), [];
   if (!s.asset)
@@ -12432,32 +12432,32 @@ const Io = [
     return console.error("Failed to read SVG."), [];
   ma(m);
   const g = {};
-  Ft(m, (E) => {
-    Io.includes(E.tagName) && !E.attributes.getNamedItem("fill") && E.setAttribute("fill", "#000000");
-    const I = E.attributes.getNamedItem("fill");
+  Ft(m, (S) => {
+    Io.includes(S.tagName) && !S.attributes.getNamedItem("fill") && S.setAttribute("fill", "#000000");
+    const I = S.attributes.getNamedItem("fill");
     if (I && I.value !== "none") {
       const x = I.value, N = `spiff-fill-${x.replace(/\W/g, "")}`;
-      E.classList.add(N), g[N] = { browserValue: x };
+      S.classList.add(N), g[N] = { browserValue: x };
     }
-    const P = E.attributes.getNamedItem("stroke");
+    const P = S.attributes.getNamedItem("stroke");
     if (P && P.value !== "none") {
       const x = P.value, N = `spiff-stroke-${x.replace(/\W/g, "")}`;
-      E.classList.add(N), g[N] = { browserValue: x };
+      S.classList.add(N), g[N] = { browserValue: x };
     }
   });
   const p = Et().serializeToString(m), C = n.colors;
   if (C) {
-    for (const [E, I] of Object.entries(g))
+    for (const [S, I] of Object.entries(g))
       for (const P of Object.keys(C))
         if (I.browserValue === P) {
-          g[E] = { browserValue: C[P] };
+          g[S] = { browserValue: C[P] };
           break;
         }
   }
-  const w = (E) => {
-    const I = r.find((x) => x.panelId === E.panelId);
+  const w = (S) => {
+    const I = r.find((x) => x.panelId === S.panelId);
     if (!I)
-      throw new Y(E);
+      throw new Y(S);
     const P = Q();
     return new W(
       {
@@ -12465,22 +12465,22 @@ const Io = [
         id: P,
         svg: p,
         type: T.Illustration,
-        y: E.top,
-        x: E.left,
-        rotation: E.rotation,
-        width: E.width,
-        height: E.height,
-        layer: E.layer,
-        layerIndex: E.layerIndex,
-        immutable: E.immutable
+        y: S.top,
+        x: S.left,
+        rotation: S.rotation,
+        width: S.width,
+        height: S.height,
+        layer: S.layer,
+        layerIndex: S.layerIndex,
+        immutable: S.immutable
       },
       I
     );
-  }, v = a.data.regions;
+  }, E = a.data.regions;
   try {
-    return v.map(w);
-  } catch (E) {
-    return console.error(E), [];
+    return E.map(w);
+  } catch (S) {
+    return console.error(S), [];
   }
 }, Fo = async (r, t, e) => {
   const a = await Hn(e.data.module), n = t.data, i = (o, l) => {
@@ -12684,7 +12684,7 @@ const Io = [
     const f = a.option;
     if (!f)
       return;
-    const p = ((w = f.variants) == null ? void 0 : w.find((v) => v.id === i.fontVariantId)) || te(f);
+    const p = ((w = f.variants) == null ? void 0 : w.find((E) => E.id === i.fontVariantId)) || te(f);
     if (!p || !p.asset)
       return;
     t[a.stepName] = { selectedVariants: [p] };
@@ -12736,7 +12736,7 @@ const Io = [
       y: f.top
     };
     if (d) {
-      const [w, v] = Ae(
+      const [w, E] = Ae(
         a.data.size || s,
         d,
         f,
@@ -12757,7 +12757,7 @@ const Io = [
           {
             ...C,
             fontSize: w,
-            text: C.curved ? C.text : (v || []).join(`
+            text: C.curved ? C.text : (E || []).join(`
 `)
           },
           p
@@ -13417,7 +13417,7 @@ class _n extends Ba {
         return n.id === ((s = (i = this.optionResource) == null ? void 0 : i.defaultVariant) == null ? void 0 : s.id);
       }
     );
-    t && await this.selectVariant(new it(t));
+    t && (console.log(`COLOR DEBUG: initing global default for ${JSON.stringify(t, null, 2)}`), await this.selectVariant(new it(t)));
   }
   /**
    * Gets the currently selected variant, or undefined if no variant is selected.
@@ -13473,7 +13473,7 @@ class _n extends Ba {
     return a ? (console.log(`Applying global state using variant ${a.id} for aspect ${e}`), this.applyVariantSelection(new it(a), t)) : Promise.resolve();
   }
   async applyVariantSelection(t, e) {
-    const n = this.getSharedSteps(e).map((i) => i.selectVariant(t));
+    const n = this.getSharedSteps(e).map((i) => (console.log("COLOR DEBUG: applying variant selection"), i.selectVariant(t)));
     await Promise.all(n);
   }
 }
@@ -13509,7 +13509,7 @@ class Ha extends _n {
     const i = this.getSharedSteps(e).map((s) => {
       switch (s.getType()) {
         case D.Shape:
-          return s.selectVariant(t);
+          return console.log("COLOR DEBUG: shape?"), s.selectVariant(t);
         case D.Text:
           return s.setFillColor({
             fill: t.getColor(),
@@ -13592,13 +13592,13 @@ class jo {
       if (n) {
         const l = o.find((c) => c.channel === n);
         if (l)
-          l.value = e, l.type = i.type, l.channel = n, a !== void 0 && (l.storage = a !== null ? a : void 0);
+          l.value = e, l.type = i.type, l.channel = n, console.log(`COLOR DEBUG: setting value ${e} to channel ${n}, name ${t}`), a !== void 0 && (l.storage = a !== null ? a : void 0);
         else {
           if (n === 1) {
             const c = o.findIndex((d) => !d.channel && d.name === t);
-            this.globalPropertyState.aspects.splice(c, 1);
+            console.log(`COLOR DEBUG: channel 1 for name ${t}, about to splice index ${c} of ${JSON.stringify(this.globalPropertyState.aspects, null, 2)}`), this.globalPropertyState.aspects.splice(c, 1), console.log(`COLOR DEBUG: splice result: ${JSON.stringify(this.globalPropertyState.aspects, null, 2)}`);
           }
-          this.globalPropertyState.aspects.push({
+          console.log(`COLOR DEBUG: adding value ${e} to channel ${n}, name ${t}`), this.globalPropertyState.aspects.push({
             name: t,
             value: e,
             type: i.type,
@@ -13611,7 +13611,7 @@ class jo {
         l.value = e, l.type = i.type, a !== void 0 && (l.storage = a !== null ? a : void 0);
       }
     else
-      this.globalPropertyState.aspects.push({
+      console.log(`COLOR DEBUG: only value ${e} to channel ${n}, name ${t}`), this.globalPropertyState.aspects.push({
         name: t,
         value: e,
         type: i.type,
@@ -15213,7 +15213,7 @@ class kc {
       } catch (a) {
         throw console.error(a), new ut("Critical - Unable to synchronize workflow state with server.");
       }
-    }, this.options = t, this.options.applicationKey && xr(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 26.21.0"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
+    }, this.options = t, this.options.applicationKey && xr(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 26.21.0-beta.d330054f-b93a-51a6-8829-3100e14458bb"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
   }
   configure(t) {
     wt.setHubUrl(t.hubUrl), wt.setServerUrl(t.serverUrl), wt.setServicesApiUrl(t.servicesApiUrl), this.marketplaceThemeInstallId = t.marketplaceThemeInstallId, this.marketplaceThemeInstallConfigurationId = t.marketplaceThemeInstallConfigurationId, t.bearerAuthenticationToken && kr(t.bearerAuthenticationToken), this.options.applicationKey && this.getIntegration();
@@ -15316,13 +15316,13 @@ class kc {
       if (f && await this.authenticateCustomerId(f)) {
         const C = ((h = (u = this.customer) == null ? void 0 : u.bundleStakeholders) == null ? void 0 : h.find(
           (w) => {
-            var v, S;
-            return (S = (v = w.bundle) == null ? void 0 : v.transactions) == null ? void 0 : S.some((B) => B.id === t);
+            var E, v;
+            return (v = (E = w.bundle) == null ? void 0 : E.transactions) == null ? void 0 : v.some((B) => B.id === t);
           }
         )) || ((g = (m = this.customer) == null ? void 0 : m.stakeholders) == null ? void 0 : g.find(
           (w) => {
-            var v;
-            return ((v = w.transaction) == null ? void 0 : v.id) === t;
+            var E;
+            return ((E = w.transaction) == null ? void 0 : E.id) === t;
           }
         ));
         if (C)
@@ -15520,7 +15520,7 @@ class kc {
    * @returns A bundle to be used for grouping and operating on large amounts of workflow experiences.
    */
   async getExistingBundle(t, e, a, n) {
-    var f, p, C, w, v, S, B, E, I, P, x;
+    var f, p, C, w, E, v, B, S, I, P, x;
     const i = k.getMap("bundleOwnerIds"), s = i == null ? void 0 : i.get(t), l = ((f = Object.entries(localStorage).find(([M, N]) => M.startsWith("CognitoIdentityServiceProvider") && M.endsWith("idToken"))) == null ? void 0 : f[0]) || "", c = localStorage.getItem(l), d = {};
     c && !ve(c) && (d.Authorization = `Bearer ${c}`);
     const A = {
@@ -15537,9 +15537,9 @@ class kc {
         headers: A
       }
     });
-    if (!((v = u.data) != null && v.bundles) || ((S = u.data) == null ? void 0 : S.bundles.length) === 0 || !((B = u.data) != null && B.bundles[0]))
+    if (!((E = u.data) != null && E.bundles) || ((v = u.data) == null ? void 0 : v.bundles.length) === 0 || !((B = u.data) != null && B.bundles[0]))
       throw new Error(`Unable to find bundle: ${t}`);
-    const h = (E = u.data) == null ? void 0 : E.bundles[0], m = k.getMap("bundlePartnerIds") || /* @__PURE__ */ new Map();
+    const h = (S = u.data) == null ? void 0 : S.bundles[0], m = k.getMap("bundlePartnerIds") || /* @__PURE__ */ new Map();
     m.set(h.id, h.partner.id), k.setMap("bundlePartnerIds", m);
     const g = new He(this, h, e, a, s, {
       additionalHeaders: (I = n == null ? void 0 : n.graphql) == null ? void 0 : I.additionalHeaders,
@@ -15556,15 +15556,15 @@ class kc {
    * @returns A bundle to be used for grouping and operating on large amounts of workflow experiences.
    */
   async duplicateBundle(t, e, a, n) {
-    var f, p, C, w, v, S, B, E;
+    var f, p, C, w, E, v, B, S;
     const i = (f = k.getMap("bundleOwnerIds")) == null ? void 0 : f.get(t), o = ((p = Object.entries(localStorage).find(([I, P]) => I.startsWith("CognitoIdentityServiceProvider") && I.endsWith("idToken"))) == null ? void 0 : p[0]) || "", l = localStorage.getItem(o), c = {};
     l && !ve(l) && (c.Authorization = `Bearer ${l}`);
     const d = {
       bundleOwnerId: i,
       ...c,
       ...(C = n == null ? void 0 : n.graphql) == null ? void 0 : C.additionalHeaders
-    }, u = (S = (await b.getShadowGraphqlClient().mutate({
-      mutation: Rs(((v = (w = n == null ? void 0 : n.graphql) == null ? void 0 : w.productCollection) == null ? void 0 : v.eagerFetchProducts) || !1),
+    }, u = (v = (await b.getShadowGraphqlClient().mutate({
+      mutation: Rs(((E = (w = n == null ? void 0 : n.graphql) == null ? void 0 : w.productCollection) == null ? void 0 : E.eagerFetchProducts) || !1),
       variables: {
         id: t,
         template: e,
@@ -15576,7 +15576,7 @@ class kc {
         headers: d
       },
       fetchPolicy: "no-cache"
-    })).data) == null ? void 0 : S.bundleDuplicate;
+    })).data) == null ? void 0 : v.bundleDuplicate;
     if (!(u != null && u.id))
       throw new Error("Unable to duplicate bundle");
     const h = k.getMap("bundlePartnerIds") || /* @__PURE__ */ new Map();
@@ -15584,7 +15584,7 @@ class kc {
     const m = k.getMap("bundleOwnerIds") || /* @__PURE__ */ new Map();
     m.set(u.id, u.bundleOwnerId), k.setMap("bundleOwnerIds", m);
     const g = new He(this, u, void 0, void 0, u.bundleOwnerId, {
-      eagerFetchProducts: (E = (B = n == null ? void 0 : n.graphql) == null ? void 0 : B.productCollection) == null ? void 0 : E.eagerFetchProducts
+      eagerFetchProducts: (S = (B = n == null ? void 0 : n.graphql) == null ? void 0 : B.productCollection) == null ? void 0 : S.eagerFetchProducts
     });
     return await g.getInitializationPromise(), g;
   }
@@ -15656,20 +15656,20 @@ class kc {
   async getWorkflowExperiences(t, e) {
     if (t.length === 0)
       throw new ut("No options provided!");
-    const a = b.getShadowGraphqlClient(), n = async (S) => {
+    const a = b.getShadowGraphqlClient(), n = async (v) => {
       var P, x, M;
-      if (S.length === 0)
+      if (v.length === 0)
         return [];
-      const B = S.map((N) => N.option.transactionId), E = await a.query({
+      const B = v.map((N) => N.option.transactionId), S = await a.query({
         query: di,
         variables: {
           ids: B
         },
         errorPolicy: "all",
         fetchPolicy: "no-cache"
-      }), I = E.data.transactions;
-      if (I.length !== S.length) {
-        const N = ((x = (P = E.errors) == null ? void 0 : P[0]) == null ? void 0 : x.message) || "Unknown error";
+      }), I = S.data.transactions;
+      if (I.length !== v.length) {
+        const N = ((x = (P = S.errors) == null ? void 0 : P[0]) == null ? void 0 : x.message) || "Unknown error";
         throw new ut(`Not all transactions were found: ${N}`);
       }
       return !this.activeIntegration && ((M = I[0].integrationProduct) != null && M.integration) && (this.activeIntegration = Promise.resolve(I[0].integrationProduct.integration)), I.map((N, V) => {
@@ -15677,18 +15677,18 @@ class kc {
         return {
           transaction: N,
           workflowId: N.workflowId,
-          readOnly: ((j = S.find((G) => G.option.transactionId === N.id)) == null ? void 0 : j.option.readOnly) ?? !1,
-          index: S[V].index
+          readOnly: ((j = v.find((G) => G.option.transactionId === N.id)) == null ? void 0 : j.option.readOnly) ?? !1,
+          index: v[V].index
         };
       });
-    }, i = async (S) => {
+    }, i = async (v) => {
       var I, P, x;
-      if (S.length === 0)
+      if (v.length === 0)
         return [];
       const B = await a.mutate({
         mutation: ci,
         variables: {
-          inputs: S.map((M) => ({
+          inputs: v.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,
@@ -15701,25 +15701,25 @@ class kc {
         },
         errorPolicy: "all",
         fetchPolicy: "no-cache"
-      }), E = (I = B.data) == null ? void 0 : I.transactionCreateMany;
-      if (!E || E.length === 0) {
+      }), S = (I = B.data) == null ? void 0 : I.transactionCreateMany;
+      if (!S || S.length === 0) {
         const M = ((x = (P = B.errors) == null ? void 0 : P[0]) == null ? void 0 : x.message) || "Unknown error";
         throw new ut(`Failed to create transactions: ${M}`);
       }
-      return E.map((M, N) => ({
+      return S.map((M, N) => ({
         transaction: M,
         workflowId: M.workflowId,
         readOnly: !1,
-        index: S[N].index
+        index: v[N].index
       }));
-    }, s = t.map((S, B) => ({ option: S, index: B })), o = s.filter((S) => S.option.type === "transaction"), l = s.filter(
-      (S) => S.option.type === "integration" || S.option.type === "external"
+    }, s = t.map((v, B) => ({ option: v, index: B })), o = s.filter((v) => v.option.type === "transaction"), l = s.filter(
+      (v) => v.option.type === "integration" || v.option.type === "external"
     ), c = Da(o, 10), d = Da(l, 10), A = (await Promise.all([
       ...c.map(n),
       ...d.map(i)
-    ])).flat(), u = [...new Set(A.map((S) => S.workflowId))], h = await Zn(u, e), m = new Map(h.map((S) => [S.id, S])), g = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), f = A.map(async (S) => {
+    ])).flat(), u = [...new Set(A.map((v) => v.workflowId))], h = await Zn(u, e), m = new Map(h.map((v) => [v.id, v])), g = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map(), f = A.map(async (v) => {
       var j;
-      const { transaction: B, workflowId: E, readOnly: I, index: P } = S, x = m.get(E), M = t[P];
+      const { transaction: B, workflowId: S, readOnly: I, index: P } = v, x = m.get(S), M = t[P];
       !g.get(B.id) && B.transactionOwnerId && g.set(B.id, B.transactionOwnerId);
       const N = g.get(B.id) || void 0, V = {
         product: B.product,
@@ -15752,11 +15752,11 @@ class kc {
       ), V.delayWorkflowStateSync = !0, { experienceOptions: V, index: P, options: M };
     }), p = await Promise.all(f);
     k.setMap("transactionOwnerIds", g);
-    const w = p.sort((S, B) => S.index - B.index).map(async (S) => {
-      const { experienceOptions: B, options: E } = S, I = new bo(this, B);
-      return await I.getWorkflowManager().getInitializationPromise(), E.type !== "transaction" && this.customer && await I.attachCustomerDetails({ email: this.customer.emailAddress }), I;
-    }), v = await Promise.all(w);
-    return v.forEach((S) => S.getWorkflowManager().setWorkflowStateSyncEnabled(!0)), v;
+    const w = p.sort((v, B) => v.index - B.index).map(async (v) => {
+      const { experienceOptions: B, options: S } = v, I = new bo(this, B);
+      return await I.getWorkflowManager().getInitializationPromise(), S.type !== "transaction" && this.customer && await I.attachCustomerDetails({ email: this.customer.emailAddress }), I;
+    }), E = await Promise.all(w);
+    return E.forEach((v) => v.getWorkflowManager().setWorkflowStateSyncEnabled(!0)), E;
   }
   storeCustomer(t) {
     const e = k.getMap("partnerCustomerIds") || /* @__PURE__ */ new Map();