@spiffcommerce/core 34.0.0-beta.eb70dc77-1c26-5362-97cc-339b6daa5bc7 → 34.0.0-beta.ee7533e8-2025-5ab5-9b84-699a87a6cc70

package/dist/index.mjs

@@ -8,8 +8,8 @@ import { parse as yn } from "css";
 import ki from "fuse.js";
 import { Pith as va } from "pith";
 import Et from "lodash.clonedeep";
-import jt from "lodash.isequal";
-import { jsx as P, jsxs as ct, Fragment as Gt } from "preact/jsx-runtime";
+import Yt from "lodash.isequal";
+import { jsx as P, jsxs as ct, Fragment as Wt } from "preact/jsx-runtime";
 import { parse as la } from "opentype.js";
 import Mi from "handlebars";
 import { dataUriToBuffer as Ti } from "data-uri-to-buffer";
@@ -24,38 +24,38 @@ import vn from "lodash.debounce";
 import "fs";
 import "path";
 import $i from "lodash.omit";
-var Ee = /* @__PURE__ */ ((n) => (n.Data = "Data", n.Font = "Font", n.Frame = "Frame", n.Illustration = "Illustration", n.Image = "Image", n.Model = "Model", n.Material = "Material", n.Color = "Color", n.QuestionnaireCollateral = "QuestionnaireCollateral", n.RequestCollateral = "RequestCollateral", n.SignupCollateral = "SignupCollateral", n.Video = "Video", n.ColorProfile = "ColorProfile", n.Environment = "Environment", n))(Ee || {}), En = /* @__PURE__ */ ((n) => (n.AND = "AND", n.OR = "OR", n))(En || {}), z = /* @__PURE__ */ ((n) => (n.FileUpload = "FileUpload", n.Option = "Option", n.ColorOption = "ColorOption", n.Text = "Text", n))(z || {}), b = /* @__PURE__ */ ((n) => (n.Information = "Information", n.Bulk = "Bulk", n.DigitalContent = "DigitalContent", n.Finish = "Finish", n.Frame = "Frame", n.Illustration = "Illustration", n.Introduction = "Introduction", n.Material = "Material", n.Model = "Model", n.Module = "Module", n.Picture = "Picture", n.Photo = "Photo", n.ProductOverlay = "ProductOverlay", n.Question = "Question", n.Shape = "Shape", n.SilentIllustration = "SilentIllustration", n.Text = "Text", n))(b || {}), Ui = /* @__PURE__ */ ((n) => (n.Color = "Color", n.Colors = "Colors", n.Selection = "Selection", n.Selections = "Selections", n.Text = "Text", n.Upload = "Upload", n))(Ui || {}), Yt = /* @__PURE__ */ ((n) => (n.ThreeD = "ThreeD", n.FreeDesign = "FreeDesign", n.Print = "Print", n))(Yt || {}), F = /* @__PURE__ */ ((n) => (n.Frame = "frame", n.Group = "group", n.Image = "image", n.Pattern = "pattern", n.Illustration = "illustration", n.Textbox = "textbox", n))(F || {}), Li = /* @__PURE__ */ ((n) => (n.Default = "Default", n.FirstTransaction = "FirstTransaction", n.OneToOne = "OneToOne", n))(Li || {}), bn = /* @__PURE__ */ ((n) => (n.Pending = "Pending", n.Failed = "Failed", n.Validated = "Validated", n.Overridden = "Overridden", n))(bn || {}), Vi = /* @__PURE__ */ ((n) => (n.Hyperlink = "Hyperlink", n.Edit = "Edit", n.Approve = "Approve", n))(Vi || {}), zi = /* @__PURE__ */ ((n) => (n.Hub = "Hub", n.Shopify = "Shopify", n))(zi || {}), Ea = /* @__PURE__ */ ((n) => (n.BackgroundRemover = "BackgroundRemover", n.ConversionAccelerator = "Conversion Accelerator", n.ProcessBuilder = "ProcessBuilder", n))(Ea || {}), Gi = /* @__PURE__ */ ((n) => (n[n.Orbit = 0] = "Orbit", n[n.Pan = 1] = "Pan", n))(Gi || {}), be = /* @__PURE__ */ ((n) => (n.Owner = "Owner", n.Approver = "Approver", n.Editor = "Editor", n.Viewer = "Viewer", n))(be || {}), kt = /* @__PURE__ */ ((n) => (n.Autosize = "Autosize", n.Traditional = "Traditional", n))(kt || {}), j = /* @__PURE__ */ ((n) => (n[n.North = 0] = "North", n[n.Northeast = 1] = "Northeast", n[n.East = 2] = "East", n[n.Southeast = 3] = "Southeast", n[n.South = 4] = "South", n[n.Southwest = 5] = "Southwest", n[n.West = 6] = "West", n[n.Northwest = 7] = "Northwest", n))(j || {}), Wi = /* @__PURE__ */ ((n) => (n.Pixel = "px", n.Millimeter = "mm", n.Centimeter = "cm", n))(Wi || {});
+var Ee = /* @__PURE__ */ ((n) => (n.Data = "Data", n.Font = "Font", n.Frame = "Frame", n.Illustration = "Illustration", n.Image = "Image", n.Model = "Model", n.Material = "Material", n.Color = "Color", n.QuestionnaireCollateral = "QuestionnaireCollateral", n.RequestCollateral = "RequestCollateral", n.SignupCollateral = "SignupCollateral", n.Video = "Video", n.ColorProfile = "ColorProfile", n.Environment = "Environment", n))(Ee || {}), En = /* @__PURE__ */ ((n) => (n.AND = "AND", n.OR = "OR", n))(En || {}), z = /* @__PURE__ */ ((n) => (n.FileUpload = "FileUpload", n.Option = "Option", n.ColorOption = "ColorOption", n.Text = "Text", n))(z || {}), b = /* @__PURE__ */ ((n) => (n.Information = "Information", n.Bulk = "Bulk", n.DigitalContent = "DigitalContent", n.Finish = "Finish", n.Frame = "Frame", n.Illustration = "Illustration", n.Introduction = "Introduction", n.Material = "Material", n.Model = "Model", n.Module = "Module", n.Picture = "Picture", n.Photo = "Photo", n.ProductOverlay = "ProductOverlay", n.Question = "Question", n.Shape = "Shape", n.SilentIllustration = "SilentIllustration", n.Text = "Text", n))(b || {}), Ui = /* @__PURE__ */ ((n) => (n.Color = "Color", n.Colors = "Colors", n.Selection = "Selection", n.Selections = "Selections", n.Text = "Text", n.Upload = "Upload", n))(Ui || {}), Jt = /* @__PURE__ */ ((n) => (n.ThreeD = "ThreeD", n.FreeDesign = "FreeDesign", n.Print = "Print", n))(Jt || {}), F = /* @__PURE__ */ ((n) => (n.Frame = "frame", n.Group = "group", n.Image = "image", n.Pattern = "pattern", n.Illustration = "illustration", n.Textbox = "textbox", n))(F || {}), Li = /* @__PURE__ */ ((n) => (n.Default = "Default", n.FirstTransaction = "FirstTransaction", n.OneToOne = "OneToOne", n))(Li || {}), bn = /* @__PURE__ */ ((n) => (n.Pending = "Pending", n.Failed = "Failed", n.Validated = "Validated", n.Overridden = "Overridden", n))(bn || {}), Vi = /* @__PURE__ */ ((n) => (n.Hyperlink = "Hyperlink", n.Edit = "Edit", n.Approve = "Approve", n))(Vi || {}), zi = /* @__PURE__ */ ((n) => (n.Hub = "Hub", n.Shopify = "Shopify", n))(zi || {}), Ea = /* @__PURE__ */ ((n) => (n.BackgroundRemover = "BackgroundRemover", n.ConversionAccelerator = "Conversion Accelerator", n.ProcessBuilder = "ProcessBuilder", n))(Ea || {}), Gi = /* @__PURE__ */ ((n) => (n[n.Orbit = 0] = "Orbit", n[n.Pan = 1] = "Pan", n))(Gi || {}), be = /* @__PURE__ */ ((n) => (n.Owner = "Owner", n.Approver = "Approver", n.Editor = "Editor", n.Viewer = "Viewer", n))(be || {}), Mt = /* @__PURE__ */ ((n) => (n.Autosize = "Autosize", n.Traditional = "Traditional", n))(Mt || {}), j = /* @__PURE__ */ ((n) => (n[n.North = 0] = "North", n[n.Northeast = 1] = "Northeast", n[n.East = 2] = "East", n[n.Southeast = 3] = "Southeast", n[n.South = 4] = "South", n[n.Southwest = 5] = "Southwest", n[n.West = 6] = "West", n[n.Northwest = 7] = "Northwest", n))(j || {}), Wi = /* @__PURE__ */ ((n) => (n.Pixel = "px", n.Millimeter = "mm", n.Centimeter = "cm", n))(Wi || {});
 class In extends Error {
   constructor(t) {
     super(t), this.name = this.constructor.name;
   }
 }
-class Zt extends In {
+class te extends In {
   constructor(t) {
     super(`ConfigurationError - ${t}`);
   }
 }
-class Ie extends Zt {
+class Ie extends te {
   constructor(t) {
     super(`Option not Configured: ${t.stepTitle}`), this.optionId = t?.optionId || "N/A";
   }
 }
-class J extends Zt {
+class J extends te {
   constructor(t) {
     super(`Panel not Found: ${t.panelId}`), this.panelId = t?.panelId || "N/A";
   }
 }
-class bt extends Zt {
+class bt extends te {
   constructor(t) {
     super(`Asset not found for variant: ${t.name}`), this.variant = t;
   }
 }
-class Jt extends Zt {
+class Kt extends te {
   constructor(t) {
     super(`Resource not found for asset: ${t.name}`), this.asset = t;
   }
 }
-class Be extends Zt {
+class Be extends te {
   constructor(t, e) {
     super(`Workflow Misconfiguration: ${t.stepName} - ${e}`), this.step = t;
   }
@@ -70,7 +70,7 @@ class Q extends Ne {
     super(`Unhandled Behavior Encountered: ${t}`);
   }
 }
-class Pt extends Ne {
+class xt extends Ne {
   constructor(t) {
     super(`Parsing Error: ${t}`);
   }
@@ -169,7 +169,7 @@ function ad(n) {
 function nd(n) {
   Aa = n;
 }
-function te() {
+function ee() {
   return da ? new da().window : (console.log(
     "DOM constructor is not registered. Assuming browser environment. If not, please register DOM constructor before calling this function."
   ), window);
@@ -197,17 +197,17 @@ const Bn = /* @__PURE__ */ new Map(), Wa = /* @__PURE__ */ new Map(), qa = /* @_
   if (t) return t;
   const a = (async () => await (await nt(n)).text())();
   return qa.set(n, a), a;
-}, Mt = (n) => n.every((t) => t !== "undefined"), le = (n) => Mt([typeof document]) ? document.createElement(n) : te().document.createElement(n), Ji = (n, t) => {
-  if (Mt([typeof document]))
+}, Tt = (n) => n.every((t) => t !== "undefined"), ce = (n) => Tt([typeof document]) ? document.createElement(n) : ee().document.createElement(n), Ji = (n, t) => {
+  if (Tt([typeof document]))
     return document.createElementNS(n, t);
-  const a = te().document.createElement(t);
+  const a = ee().document.createElement(t);
   return a.setAttribute("xmlns", n), a;
 }, dt = () => {
-  if (Mt([typeof DOMParser]))
+  if (Tt([typeof DOMParser]))
     return new DOMParser();
-  const n = te();
+  const n = ee();
   return new n.DOMParser();
-}, Ki = () => Mt([typeof DOMParser]) ? DOMParser : te().DOMParser, Re = (n, t) => new Promise((e, a) => {
+}, Ki = () => Tt([typeof DOMParser]) ? DOMParser : ee().DOMParser, Re = (n, t) => new Promise((e, a) => {
   t ? Pn(n).then(e).catch(a) : nt(n).then((i) => {
     i.arrayBuffer().then(e).catch(a);
   }).catch((i) => {
@@ -218,7 +218,7 @@ const Bn = /* @__PURE__ */ new Map(), Wa = /* @__PURE__ */ new Map(), qa = /* @_
     i.text().then(e).catch(a);
   }).catch(a);
 }), xn = (n) => xi(n), je = /* @__PURE__ */ new Map(), _i = async (n, t) => {
-  if (Mt([typeof FontFace])) {
+  if (Tt([typeof FontFace])) {
     if (je.has(t))
       return je.get(t);
     const e = n.names.fullName.en, a = new FontFace(e, `url(${t})`);
@@ -227,9 +227,9 @@ const Bn = /* @__PURE__ */ new Map(), Wa = /* @__PURE__ */ new Map(), qa = /* @_
     return je.set(t, i), i;
   }
 }, It = () => {
-  if (Mt([typeof XMLSerializer]))
+  if (Tt([typeof XMLSerializer]))
     return new XMLSerializer();
-  const n = te();
+  const n = ee();
   return new n.XMLSerializer();
 }, Ha = (n) => btoa(n), Oe = (n) => {
   function t() {
@@ -375,7 +375,7 @@ const ft = (n, t, e) => {
   } catch {
     throw new Error("Canvas module not set");
   }
-}, ee = (n, t) => {
+}, ae = (n, t) => {
   if (ha !== void 0)
     return ha(n, t);
   try {
@@ -411,21 +411,21 @@ let Ye;
 function Ba() {
   return Ye === void 0 && (Ye = Ki()), Ye;
 }
-let ce = null;
+let de = null;
 const cr = (n) => new Promise((t) => {
   if (Oe(n) !== "image/jpeg")
     return t(1);
   Di(n).then((a) => t(a || 1)).catch(() => t(1));
 }), dr = async () => {
-  if (ce !== null)
-    return !ce;
-  const t = await ee("data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/xABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAAAAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQvoP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXwH/9k=");
-  return ce = t.width === 2 && t.height === 3, !ce;
+  if (de !== null)
+    return !de;
+  const t = await ae("data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/xABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAAAAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQvoP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXwH/9k=");
+  return de = t.width === 2 && t.height === 3, !de;
 }, Ar = (n) => {
   const e = n.naturalWidth / n.naturalHeight;
   return n.naturalHeight <= 8192 && n.naturalWidth <= 8192 ? [n.naturalWidth, n.naturalHeight] : n.naturalHeight > n.naturalWidth ? [e * 8192, 8192] : [8192, 8192 / e];
 }, ur = async (n) => {
-  const t = await Zi(n), e = await ee(t), [a, i] = Ar(e);
+  const t = await Zi(n), e = await ae(t), [a, i] = Ar(e);
   if (!await dr()) {
     const A = ft(a, i);
     return A.getContext("2d")?.drawImage(e, 0, 0, a, i), A;
@@ -466,7 +466,7 @@ const cr = (n) => new Promise((t) => {
     height: t.height,
     width: t.width
   };
-}, Kt = [
+}, _t = [
   "Yellow C",
   "Yellow 012 C",
   "Orange 021 C",
@@ -1808,7 +1808,7 @@ const cr = (n) => new Promise((t) => {
   "Black 5 C",
   "Black 6 C",
   "Black 7 C"
-], Ft = [
+], Dt = [
   "FEDD00",
   "FFD700",
   "FE5000",
@@ -3150,18 +3150,18 @@ const cr = (n) => new Promise((t) => {
   "3E2B2E",
   "101820",
   "3D3935"
-], Je = Ft.map((n) => [
+], Je = Dt.map((n) => [
   parseInt(n.substring(0, 2), 16),
   parseInt(n.substring(2, 4), 16),
   parseInt(n.substring(4, 6), 16)
 ]);
 function rd(n) {
-  const t = Kt.indexOf(n);
-  return t >= 0 ? Ft[t] : "";
+  const t = _t.indexOf(n);
+  return t >= 0 ? Dt[t] : "";
 }
 function hr(n) {
-  const t = Ft.indexOf(n);
-  return t >= 0 ? Kt[t] : "";
+  const t = Dt.indexOf(n);
+  return t >= 0 ? _t[t] : "";
 }
 function od(n, t = 64) {
   const e = [], a = [], i = hr(n);
@@ -3172,36 +3172,36 @@ function od(n, t = 64) {
   });
   const r = parseInt(n.substring(0, 2), 16), o = parseInt(n.substring(2, 4), 16), s = parseInt(n.substring(4, 6), 16);
   let l, c, d;
-  for (let A = 0; A < Ft.length; A++) {
+  for (let A = 0; A < Dt.length; A++) {
     l = Je[A][0], c = Je[A][1], d = Je[A][2];
     const u = Math.sqrt(Math.pow(r - l, 2) + Math.pow(o - c, 2) + Math.pow(s - d, 2));
     a.push(u);
   }
   for (let A = 0; A < a.length; A++)
-    a[A] <= t && !e.some((u) => u.pms === Kt[A]) && e.push({ pms: Kt[A], hex: Ft[A], distance: a[A] });
+    a[A] <= t && !e.some((u) => u.pms === _t[A]) && e.push({ pms: _t[A], hex: Dt[A], distance: a[A] });
   return e.sort((A, u) => A.distance - u.distance);
 }
-const gr = Kt.map((n, t) => ({ pms: n, hex: Ft[t] })), mr = new ki(gr, { keys: ["pms"] });
+const gr = _t.map((n, t) => ({ pms: n, hex: Dt[t] })), mr = new ki(gr, { keys: ["pms"] });
 function sd(n, t) {
   return mr.search(n, t ? { limit: t } : void 0);
 }
-let Qt = null;
+let Rt = null;
 function pr(n) {
   if (n.startsWith("#"))
     return ja(n);
   if (!document)
     throw new Error("browserColorToHex is only supported on browsers");
-  if (Qt || (Qt = document.createElement("canvas").getContext("2d")), !Qt)
+  if (Rt || (Rt = document.createElement("canvas").getContext("2d")), !Rt)
     throw new Error("Failed to create canvas context required to convert colors");
-  Qt.fillStyle = n;
-  const t = ja(Qt.fillStyle);
+  Rt.fillStyle = n;
+  const t = ja(Rt.fillStyle);
   return t || console.error(`Unknown browser color ${n}`), t;
 }
 function ja(n) {
   const t = n.substring(1).toUpperCase();
   return t.length === 6 ? t : t.length === 3 ? `${t[0]}${t[0]}${t[1]}${t[1]}${t[2]}${t[2]}` : "";
 }
-const de = (n) => {
+const Bt = (n) => {
   const t = Tn(n.spotColor);
   return t ? `${n.browserValue} ${t}` : n.browserValue;
 }, Tn = (n) => {
@@ -3238,8 +3238,8 @@ const de = (n) => {
   "textPath",
   "tref",
   "tspan"
-], Cr = ["fill", "stroke"], Dt = (n, t) => {
-  t(n), n.children.length > 0 && Array.from(n.children).forEach((e) => Dt(e, t));
+], Cr = ["fill", "stroke"], kt = (n, t) => {
+  t(n), n.children.length > 0 && Array.from(n.children).forEach((e) => kt(e, t));
 }, wr = (n, t) => {
   try {
     return n.matches(t);
@@ -3249,7 +3249,7 @@ const de = (n) => {
 }, Pa = (n, t = !1) => {
   !t && n.setAttribute("preserveAspectRatio", "none");
   const e = [];
-  Dt(n, (a) => {
+  kt(n, (a) => {
     if (a.tagName === "script") {
       a.remove();
       return;
@@ -3275,7 +3275,7 @@ const de = (n) => {
         }
       }), r.length > 0 ? a.setAttribute("style", r.join(";")) : a.removeAttribute("style");
     }
-  }), Dt(n, (a) => {
+  }), kt(n, (a) => {
     e.forEach((i) => {
       i.selectors?.forEach((r) => {
         wr(a, r) && i.declarations?.forEach((o) => {
@@ -3291,39 +3291,57 @@ const de = (n) => {
 }, Nn = (n) => dt().parseFromString(n, "image/svg+xml").firstElementChild, Sr = (n, t, e) => {
   n.setAttribute("height", `${e}px`), n.setAttribute("width", `${t}px`);
 }, Qn = (n, t, e) => {
-  Dt(n, (a) => {
+  kt(n, (a) => {
     const i = a.attributes.getNamedItem("fill");
-    i && i.value !== "none" && a.classList.forEach((o) => {
-      if (o.startsWith("spiff-fill")) {
-        const s = t[o.replace("spiff-fill-", "")];
-        if (s)
+    i && i.value !== "none" && a.classList.forEach((s) => {
+      if (s.startsWith("spiff-fill")) {
+        const l = t[s.replace("spiff-fill-", "")];
+        if (l)
           a.setAttribute(
             "fill",
-            e ? de(s) : s.browserValue
+            e ? Bt(l) : l.browserValue
           );
         else {
-          const l = t[o];
-          l && a.setAttribute(
+          const c = t[s];
+          c && a.setAttribute(
             "fill",
-            e ? de(l) : l.browserValue
+            e ? Bt(c) : c.browserValue
           );
         }
       }
     });
-    const r = a.attributes.getNamedItem("stroke");
-    r && r.value !== "none" && a.classList.forEach((o) => {
-      if (o.startsWith("spiff-stroke")) {
-        const s = t[o.replace("spiff-stroke-", "")];
-        if (s)
+    const r = a.attributes.getNamedItem("spiff-fill");
+    r && r.value === "undefined" && a.classList.forEach((s) => {
+      if (s.startsWith("spiff-fill")) {
+        const l = t[s.replace("spiff-fill-", "")];
+        if (l)
+          a.setAttribute(
+            "fill",
+            e ? Bt(l) : l.browserValue
+          );
+        else {
+          const c = t[s];
+          c && a.setAttribute(
+            "fill",
+            e ? Bt(c) : c.browserValue
+          );
+        }
+      }
+    });
+    const o = a.attributes.getNamedItem("stroke");
+    o && o.value !== "none" && a.classList.forEach((s) => {
+      if (s.startsWith("spiff-stroke")) {
+        const l = t[s.replace("spiff-stroke-", "")];
+        if (l)
           a.setAttribute(
             "stroke",
-            e ? de(s) : s.browserValue
+            e ? Bt(l) : l.browserValue
           );
         else {
-          const l = t[o];
-          l && a.setAttribute(
+          const c = t[s];
+          c && a.setAttribute(
             "fill",
-            e ? de(l) : l.browserValue
+            e ? Bt(c) : c.browserValue
           );
         }
       }
@@ -3348,8 +3366,11 @@ const de = (n) => {
     throw new Error("Failed to read SVG.");
   Pa(e);
   const a = {};
-  Dt(e, (o) => {
-    fr.includes(o.tagName) && !o.attributes.getNamedItem("fill") && o.setAttribute("spiff-fill", "none");
+  kt(e, (o) => {
+    if (fr.includes(o.tagName) && !o.attributes.getNamedItem("fill")) {
+      const c = "spiff-fill-undefined";
+      o.setAttribute("spiff-fill", "undefined"), o.classList.add(c), a.undefined = { browserValue: "undefined" };
+    }
     const s = o.attributes.getNamedItem("fill");
     if (s && s.value !== "none" && !s.value.startsWith("url(")) {
       const c = Ya(s.value), d = c.browserValue.replace(/\W/g, ""), A = `spiff-fill-${d}`;
@@ -3373,7 +3394,7 @@ const de = (n) => {
             value
         }
     }
-`, ae = (n) => C`
+`, ne = (n) => C`
         ${n && Er || ""}
         fragment AssetFields on Asset {
             name
@@ -3417,7 +3438,7 @@ const de = (n) => {
             ${n && "...AssetMetadataFields" || ""}
         }
     `, br = C`
-    ${ae(!1)}
+    ${ne(!1)}
     query GetAssets($keys: [String]!) {
         assets(keys: $keys) {
             ...AssetFields
@@ -3492,7 +3513,7 @@ const de = (n) => {
         }
     }
 `, Pr = C`
-    ${ae(!1)}
+    ${ne(!1)}
     mutation RemoveBackgroundFromAsset($key: String!) {
         assetRemoveBackground(key: $key) {
             ...AssetFields
@@ -3660,7 +3681,7 @@ class Dr {
   async postProcessFileUpload(t, e) {
     if (e === "image/svg+xml") {
       const a = await t.blob.text(), o = new window.DOMParser().parseFromString(a, "image/svg+xml").documentElement;
-      if (!o) throw new Pt("Failed to read SVG.");
+      if (!o) throw new xt("Failed to read SVG.");
       yr(o);
       const l = It().serializeToString(o);
       return {
@@ -3697,7 +3718,7 @@ class Dr {
     }
   }
 }
-const Rt = "persistentAssets", lt = class lt {
+const Ot = "persistentAssets", lt = class lt {
   /**
    * Add a new asset to persistence
    * @param asset The asset to add.
@@ -3709,26 +3730,26 @@ const Rt = "persistentAssets", lt = class lt {
     }
     const e = /* @__PURE__ */ new Map();
     e.set(t.key || "", t.fileLink);
-    const a = k.getMap(Rt);
+    const a = k.getMap(Ot);
     a && a.forEach((i, r) => {
       e.set(r, i);
-    }), k.setMap(Rt, e), lt.executeCallbacks();
+    }), k.setMap(Ot, e), lt.executeCallbacks();
   }
   /**
    * Remove an existing asset from persistence. Noop if the asset doesn't exist.
    * @param assetKey The key to remove.
    */
   static remove(t) {
-    const e = k.getMap(Rt);
+    const e = k.getMap(Ot);
     if (!e) return;
     const a = Array.from(e.entries()).find((i) => i[0] === t);
-    a && (e.delete(a[0]), k.setMap(Rt, e), lt.executeCallbacks());
+    a && (e.delete(a[0]), k.setMap(Ot, e), lt.executeCallbacks());
   }
   /**
    * Get a list of all persisted assets.
    */
   static list() {
-    const t = k.getMap(Rt);
+    const t = k.getMap(Ot);
     return t ? Array.from(t.entries()).map((e) => ({ assetKey: e[0], src: e[1] })) : [];
   }
   /**
@@ -3812,7 +3833,7 @@ class kr {
     this.disabled = t;
   }
 }
-const _t = new kr(), On = C`
+const Xt = new kr(), On = C`
     fragment OptionFields on Option {
         id
         name
@@ -3854,7 +3875,7 @@ const _t = new kr(), On = C`
         }
     }
 `, Mr = C`
-    ${ae(!1)}
+    ${ne(!1)}
     ${Da}
     ${On}
     query GetOptions($ids: [String]!) {
@@ -3876,11 +3897,11 @@ const _t = new kr(), On = C`
     });
   }), t.data.options;
 }, Nr = async (n, t) => (await t).find((a) => a.id === n), Qr = async (n) => {
-  const t = n.map((o) => _t.get({ id: o })), e = n.filter((o, s) => t[s] === void 0);
+  const t = n.map((o) => Xt.get({ id: o })), e = n.filter((o, s) => t[s] === void 0);
   if (e.length === 0)
     return Promise.all(t);
   const a = Tr(e), i = e.map(
-    (o) => _t.set({ id: o }, Nr(o, a))
+    (o) => Xt.set({ id: o }, Nr(o, a))
   ), r = t.filter((o) => o !== void 0);
   return await Promise.all(r.concat(i));
 };
@@ -3983,7 +4004,7 @@ const Y = new Rr(), $n = C`
         customField5
         conversionConfigurationId
     }
-`, ne = C`
+`, ie = C`
     fragment ConversionConfigurationFields on ConversionConfiguration {
         id
         partnerId
@@ -4060,7 +4081,7 @@ const Y = new Rr(), $n = C`
     }
 `, $r = C`
     ${Ue}
-    ${ne}
+    ${ie}
     ${$n}
     query ReadIntegrationProducts($ids: [String!]!) {
         integrationProducts(ids: $ids) {
@@ -4221,14 +4242,14 @@ const Y = new Rr(), $n = C`
         }
     }
 `, Gr = C`
-    ${ne}
+    ${ie}
     query ReadConversionConfigurationQuery($id: String!) {
         conversionConfiguration(id: $id) {
             ...ConversionConfigurationFields
         }
     }
 `, Wr = C`
-    ${ne}
+    ${ie}
     query ReadTransactionForDesignCreation($id: String!) {
         transactions(ids: [$id]) {
             id
@@ -4538,7 +4559,7 @@ const Y = new Rr(), $n = C`
         name
     }
 `, eo = (n) => C`
-        ${ae(n)}
+        ${ne(n)}
         ${Da}
         ${On}
         ${_r}
@@ -4962,7 +4983,7 @@ const Y = new Rr(), $n = C`
         }
     }
 `, no = C`
-    ${ae(!1)}
+    ${ne(!1)}
     query GetWorkflowForTheme($id: String!) {
         workflow(id: $id) {
             id
@@ -4984,7 +5005,7 @@ const Y = new Rr(), $n = C`
         }
     }
 `, Le = C`
-    ${ne}
+    ${ie}
     fragment MarketplaceThemeInstallConfigurationFields on MarketplaceThemeInstallConfiguration {
         id
         themeInstallId
@@ -5104,7 +5125,7 @@ const Y = new Rr(), $n = C`
             timestamp
         }
     }
-`, Ot = [b.SilentIllustration, b.ProductOverlay], Ao = async (n) => {
+`, $t = [b.SilentIllustration, b.ProductOverlay], Ao = async (n) => {
   const t = [];
   n.introduction && t.push({
     name: "Introduction",
@@ -5127,16 +5148,16 @@ const Y = new Rr(), $n = C`
       t.push({
         name: a.stepName,
         title: a.stepTitle,
-        renderableSteps: Ot.includes(a.type) ? [] : [a],
-        silentSteps: Ot.includes(a.type) ? [a] : []
+        renderableSteps: $t.includes(a.type) ? [] : [a],
+        silentSteps: $t.includes(a.type) ? [a] : []
       });
     else {
       const r = t.find((o) => o.name === i.name);
-      r ? Ot.includes(a.type) ? r.silentSteps.push(a) : r.renderableSteps.push(a) : t.push({
+      r ? $t.includes(a.type) ? r.silentSteps.push(a) : r.renderableSteps.push(a) : t.push({
         name: i.name,
         title: i.name,
-        renderableSteps: Ot.includes(a.type) ? [] : [a],
-        silentSteps: Ot.includes(a.type) ? [a] : []
+        renderableSteps: $t.includes(a.type) ? [] : [a],
+        silentSteps: $t.includes(a.type) ? [a] : []
       });
     }
   }
@@ -5285,7 +5306,7 @@ const M = () => {
   viewBox: A,
   width: u
 }) => {
-  const h = e || 0, g = 2 * (l?.scale || 1), m = A || { x: 0, y: 0, width: u, height: r }, p = `${m.x} ${m.y} ${m.width} ${m.height}`, f = M(), S = a.purpose === Yt.FreeDesign && /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ P("clipPath", { id: "viewboxClip", children: /* @__PURE__ */ P("rect", { width: m.width, height: m.height, rx: h }) }) }), w = a.colorProfiles?.map((E, I) => (
+  const h = e || 0, g = 2 * (l?.scale || 1), m = A || { x: 0, y: 0, width: u, height: r }, p = `${m.x} ${m.y} ${m.width} ${m.height}`, f = M(), S = a.purpose === Jt.FreeDesign && /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ P("clipPath", { id: "viewboxClip", children: /* @__PURE__ */ P("rect", { width: m.width, height: m.height, rx: h }) }) }), w = a.colorProfiles?.map((E, I) => (
     /* @ts-ignore */
     /* @__PURE__ */ P("color-profile", { name: E.name, xlinkHref: E.key, children: " " }, I)
   )), x = i.map((E) => ({
@@ -5328,7 +5349,7 @@ const M = () => {
           "g",
           {
             id: "element-group",
-            clipPath: a.purpose === Yt.FreeDesign ? "url(#viewboxClip)" : void 0,
+            clipPath: a.purpose === Jt.FreeDesign ? "url(#viewboxClip)" : void 0,
             children: v.map((E) => Xn(E)).filter((E) => !!E)
           }
         ),
@@ -5399,7 +5420,7 @@ const M = () => {
 }), md = (n, t, e, a) => ({
   x: n.x + (t?.x + t?.width) * e,
   y: n.y + (t?.y + t?.height) * a
-}), Bt = (n) => {
+}), Pt = (n) => {
   switch (n) {
     case j.North:
       return j.East;
@@ -5418,7 +5439,7 @@ const M = () => {
     case j.Southwest:
       return j.Northwest;
   }
-}, pd = (n, t) => t > 45 && t <= 135 ? Bt(n) : t > 135 && t <= 225 ? Bt(Bt(n)) : t > 225 && t <= 315 ? Bt(Bt(Bt(n))) : n, fd = (n, t = { x: 0, y: 0 }, e = { x: 1, y: 1 }) => {
+}, pd = (n, t) => t > 45 && t <= 135 ? Pt(n) : t > 135 && t <= 225 ? Pt(Pt(n)) : t > 225 && t <= 315 ? Pt(Pt(Pt(n))) : n, fd = (n, t = { x: 0, y: 0 }, e = { x: 1, y: 1 }) => {
   const a = Ct(n.rotation), i = {
     x: t.x + n.x * e.x,
     y: t.x + n.y * e.y
@@ -5472,7 +5493,7 @@ const M = () => {
   ) });
 }, Hn = (n) => {
   const t = `spiff-group-clip-${n.id}`, e = n.rotation || 0, a = Ct(e), i = Math.cos(a), r = -Math.sin(a), o = Ma(n.children);
-  return /* @__PURE__ */ ct(Gt, { children: [
+  return /* @__PURE__ */ ct(Wt, { children: [
     /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ P("clipPath", { id: t, preserveAspectRatio: "none", children: n.clipPath ? /* @__PURE__ */ P("path", { d: n.clipPath }) : /* @__PURE__ */ P("rect", { x: 0, y: 0, width: n.width, height: n.height }) }) }),
     /* @__PURE__ */ ct(
       "g",
@@ -5512,8 +5533,8 @@ const M = () => {
     return n.pattern.src;
   };
   if (!a())
-    return /* @__PURE__ */ P(Gt, {});
-  const i = () => n.threshold ? n.invertThreshold ? "1 ".repeat(n.threshold) + "0 ".repeat(256 - n.threshold) : "0 ".repeat(n.threshold) + "1 ".repeat(256 - n.threshold) : "", r = () => /* @__PURE__ */ P(Gt, { children: n.useThreshold && /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ ct("filter", { id: e, "color-interpolation-filters": "sRGB", children: [
+    return /* @__PURE__ */ P(Wt, {});
+  const i = () => n.threshold ? n.invertThreshold ? "1 ".repeat(n.threshold) + "0 ".repeat(256 - n.threshold) : "0 ".repeat(n.threshold) + "1 ".repeat(256 - n.threshold) : "", r = () => /* @__PURE__ */ P(Wt, { children: n.useThreshold && /* @__PURE__ */ P("defs", { children: /* @__PURE__ */ ct("filter", { id: e, "color-interpolation-filters": "sRGB", children: [
     /* @__PURE__ */ P(
       "feColorMatrix",
       {
@@ -5556,7 +5577,7 @@ const M = () => {
       src: a()
     }];
   };
-  return /* @__PURE__ */ ct(Gt, { children: [
+  return /* @__PURE__ */ ct(Wt, { children: [
     r(),
     /* @__PURE__ */ P(
       "g",
@@ -5642,7 +5663,7 @@ class fo {
     }), a - i;
   }
 }
-const Co = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @__PURE__ */ new Map(), Tt = async (n) => {
+const Co = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @__PURE__ */ new Map(), Nt = async (n) => {
   if (Ke.has(n))
     return Ke.get(n);
   const e = (async () => {
@@ -5684,7 +5705,7 @@ const Co = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
   });
   const o = e.querySelectorAll("tspan");
   for (let d = 0; d < o.length; d++) {
-    const A = o.item(d), u = A.closest("text"), h = A.closest("g"), g = u.getAttribute("font-family"), m = await Tt(i.get(g)), p = u.getAttribute("fill"), f = u.getAttribute("stroke"), S = u.getAttribute("stroke-width"), w = m.getPath(
+    const A = o.item(d), u = A.closest("text"), h = A.closest("g"), g = u.getAttribute("font-family"), m = await Nt(i.get(g)), p = u.getAttribute("fill"), f = u.getAttribute("stroke"), S = u.getAttribute("stroke-width"), w = m.getPath(
       A.innerHTML,
       0,
       0,
@@ -5817,10 +5838,10 @@ const Co = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
   let a = n || "";
   return e.stripControlCharacters && (a = a.replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g, "")), e.uppercase && (a = a.toUpperCase()), e.vertical && (a = a.split("").join(`
 `)), a;
-}, bo = (n, t) => n.map((e, a) => [e, t[a]]), Io = (n = "center", t = !1) => t ? "center" : n, Jn = (n) => n === "left" ? "start" : n === "right" ? "end" : "middle", ie = (n, t, e) => n.fontData ? {
+}, bo = (n, t) => n.map((e, a) => [e, t[a]]), Io = (n = "center", t = !1) => t ? "center" : n, Jn = (n) => n === "left" ? "start" : n === "right" ? "end" : "middle", re = (n, t, e) => n.fontData ? {
   ...n,
   ...(() => {
-    if (n.algorithm === kt.Traditional) {
+    if (n.algorithm === Mt.Traditional) {
       const i = So(t, n, e, n.lineHeight);
       return {
         text: i.lines.join(`
@@ -5836,7 +5857,7 @@ const Co = (n) => n.substring(0, 5).toLowerCase().trim() === "data:", Ke = /* @_
       };
   })()
 } : n, Kn = 1.1;
-function xt(n, t) {
+function Ft(n, t) {
   return _n(n, t.getTemplatingContext());
 }
 function _n(n, t) {
@@ -5853,7 +5874,7 @@ const Bo = (n) => {
   if (n.curved && !n.paths || !n.fontData)
     return null;
   const h = () => n.textFillImage ? `url("#${o}")` : n._renderingConfiguration?.spotColors && n.fillSpotColorDefinition ? `${n.fill} ${Tn(n.fillSpotColorDefinition)}` : n.fill;
-  return /* @__PURE__ */ ct(Gt, { children: [
+  return /* @__PURE__ */ ct(Wt, { children: [
     /* @__PURE__ */ ct("defs", { children: [
       n.textFillImage && /* @__PURE__ */ P(
         "pattern",
@@ -6130,7 +6151,7 @@ function Ma(n) {
     return r < o ? -1 : r > o ? 1 : 0;
   });
 }
-const re = (n) => {
+const oe = (n) => {
   const t = n.variants;
   if (t) {
     if (t.length === 1)
@@ -6138,7 +6159,7 @@ const re = (n) => {
     if (n.defaultVariant !== void 0)
       return t.find((e) => e.id === n.defaultVariant);
   }
-}, ht = /* @__PURE__ */ new Map(), Vt = /* @__PURE__ */ new Map(), Xe = /* @__PURE__ */ new Map(), Zn = async (n, t) => {
+}, ht = /* @__PURE__ */ new Map(), zt = /* @__PURE__ */ new Map(), Xe = /* @__PURE__ */ new Map(), Zn = async (n, t) => {
   if (!t) {
     if (!n) throw new Error("No region or src supplied. Cannot construct frame!");
     return ma(n);
@@ -6153,7 +6174,7 @@ const re = (n) => {
 }, ko = (n, t) => {
   if (!t)
     return;
-  const e = t.variants?.find((a) => a.id === n.frameVariantId) || re(t);
+  const e = t.variants?.find((a) => a.id === n.frameVariantId) || oe(t);
   if (!e)
     throw new Error(`No variant with ID: ${n.frameVariantId}`);
   if (!e.asset)
@@ -6163,8 +6184,8 @@ const re = (n) => {
   if (Xe.has(n))
     return Xe.get(n);
   const e = (async () => {
-    if (Vt.has(n))
-      return Vt.get(n);
+    if (zt.has(n))
+      return zt.get(n);
     await new Promise((u) => setTimeout(u, 0));
     const i = dt().parseFromString(n, "image/svg+xml"), r = i.querySelector("svg");
     if (!r)
@@ -6182,7 +6203,7 @@ const re = (n) => {
         width: c,
         height: l
       };
-      return Vt.set(u, h), h;
+      return zt.set(u, h), h;
     }
     if (A) {
       const u = A.getAttribute("d");
@@ -6193,7 +6214,7 @@ const re = (n) => {
         width: c,
         height: l
       };
-      return Vt.set(u, h), h;
+      return zt.set(u, h), h;
     }
     throw new Error("Malformed frame SVG");
   })();
@@ -6251,14 +6272,14 @@ const re = (n) => {
     width: s[2],
     height: s[3]
   };
-}, $t = (n, t) => {
+}, Ut = (n, t) => {
   const e = n.layoutState.elements.filter((i) => i.layer === t), a = Math.max(...e.map((i) => i.layerIndex).filter((i) => i !== void 0));
   return Math.max(a, 0) + 1;
 }, ei = async (n) => new Promise((t) => {
   at(n).then((e) => {
     t(e);
   }).catch((e) => console.error(e));
-}), Ze = /* @__PURE__ */ new Map(), Xt = async (n) => {
+}), Ze = /* @__PURE__ */ new Map(), Zt = async (n) => {
   if (Ze.has(n))
     return Ze.get(n);
   const t = async (i) => new Promise((r, o) => {
@@ -6280,7 +6301,7 @@ const re = (n) => {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !1,
       createCanvas: ft,
-      createImage: ee,
+      createImage: ae,
       DOMParser: Ba(),
       fetch: nt
     }), u = o.getAttribute("width"), h = o.getAttribute("height"), g = 2048;
@@ -6292,7 +6313,7 @@ const re = (n) => {
     return await A.render(), await t(c);
   })();
   return Ze.set(n, a), a;
-}, Ut = async (n, t, e, a) => {
+}, Lt = async (n, t, e, a) => {
   const i = n.layoutState.layout.useEditableArea && n.layoutState.layout.editableArea || {
     width: n.layoutState.layout.width,
     height: n.layoutState.layout.height,
@@ -6317,7 +6338,7 @@ const re = (n) => {
     s.height = s.width / A, s.top += (l - s.height) / 2;
   }
   if (e && t === F.Textbox && a?.text && a?.fontScale) {
-    await Tt(e);
+    await Nt(e);
     const l = wt(e), c = mt(a.text, a?.fontScale, l);
     s.width = Math.min(c, i.width * 0.85), s.left = i.x + i.width / 2 - s.width / 2;
   }
@@ -6325,7 +6346,7 @@ const re = (n) => {
 };
 class Sd {
   static async getFrame(t, e) {
-    const a = await Zn(e.region, e.src), i = await Ve(a), r = e.region || await Ut(t, F.Frame);
+    const a = await Zn(e.region, e.src), i = await Ve(a), r = e.region || await Lt(t, F.Frame);
     return {
       id: M(),
       x: r.left,
@@ -6333,7 +6354,7 @@ class Sd {
       width: r.width,
       height: r.height,
       layer: r.layer || 0,
-      layerIndex: r.layerIndex || $t(t, r.layer || 0),
+      layerIndex: r.layerIndex || Ut(t, r.layer || 0),
       rotation: r.rotation,
       scaleX: r.width / i.width,
       scaleY: r.height / i.height,
@@ -6351,7 +6372,7 @@ class Sd {
     };
   }
   static async getImage(t, e) {
-    const a = e.region || await Ut(t, F.Image, e.src);
+    const a = e.region || await Lt(t, F.Image, e.src);
     return {
       id: M(),
       src: e.src,
@@ -6362,22 +6383,22 @@ class Sd {
       width: a.width,
       height: a.height,
       layer: a.layer || 0,
-      layerIndex: a.layerIndex || $t(t, a.layer || 0),
+      layerIndex: a.layerIndex || Ut(t, a.layer || 0),
       immutable: a.immutable,
       preserveAspectRatio: "none"
     };
   }
   static async getTextbox(t, e) {
-    const { configuration: a, fontSrc: i, designInputStep: r } = e, o = await Tt(i), s = {
+    const { configuration: a, fontSrc: i, designInputStep: r } = e, o = await Nt(i), s = {
       assetUrl: i,
       name: o.names.fullName.en
     }, l = r?.text || a.defaultText || "", c = a.replaceableText ? a.replaceableText.replace("{{}}", l) : l, d = Fe(c, {
       vertical: a.vertical,
       uppercase: a.uppercase
-    }), A = e.region || await Ut(t, F.Textbox, i, {
+    }), A = e.region || await Lt(t, F.Textbox, i, {
       text: d,
       fontScale: a.size ? a.size / o.unitsPerEm : void 0
-    }), u = ie(
+    }), u = re(
       {
         id: M(),
         type: F.Textbox,
@@ -6390,12 +6411,12 @@ class Sd {
         fill: r?.color || a.colour || "#000000",
         fontData: s,
         layer: A.layer || 0,
-        layerIndex: A.layerIndex || $t(t, A.layer || 0),
+        layerIndex: A.layerIndex || Ut(t, A.layer || 0),
         paths: a.paths,
         rotation: A.rotation,
         vertical: a.vertical,
         verticalAlign: a.verticalAlign || "middle",
-        algorithm: kt.Traditional,
+        algorithm: Mt.Traditional,
         fontSize: a.size || Math.max(Math.round(A.height * 0.025), 1),
         text: d,
         input: l
@@ -6440,7 +6461,7 @@ class Sd {
                     </svg>
                 `, i = {};
     i["spiff-fill-shape"] = { browserValue: e.color };
-    const r = e.region?.item || await Ut(t, F.Illustration), o = M();
+    const r = e.region?.item || await Lt(t, F.Illustration), o = M();
     return {
       stepRegion: e.region?.item,
       stepRegionIndex: e.region?.index,
@@ -6454,12 +6475,12 @@ class Sd {
       width: r.width,
       height: r.height,
       layer: r.layer || 0,
-      layerIndex: r.layerIndex || $t(t, r.layer || 0),
+      layerIndex: r.layerIndex || Ut(t, r.layer || 0),
       immutable: r.immutable
     };
   }
   static async getIllustration(t, e) {
-    const a = e.region?.item || await Ut(t, F.Illustration, e.src), i = await st(await ei(e.src)), r = await Xt(i.svg), o = M();
+    const a = e.region?.item || await Lt(t, F.Illustration, e.src), i = await st(await ei(e.src)), r = await Zt(i.svg), o = M();
     return {
       cachedObjectURL: r,
       stepRegion: e.region?.item,
@@ -6475,7 +6496,7 @@ class Sd {
       width: a.width,
       height: a.height,
       layer: a.layer || 0,
-      layerIndex: a.layerIndex || $t(t, a.layer || 0),
+      layerIndex: a.layerIndex || Ut(t, a.layer || 0),
       immutable: a.immutable
     };
   }
@@ -6533,7 +6554,7 @@ const V = (n, t) => X(n, t).elements.find((i) => i.id === n), X = (n, t) => {
       const s = i[o];
       if (s.src && s.svg)
         try {
-          s.cachedObjectURL = await Xt(s.svg);
+          s.cachedObjectURL = await Zt(s.svg);
         } catch (l) {
           console.log(l);
         }
@@ -6543,7 +6564,7 @@ const V = (n, t) => X(n, t).elements.find((i) => i.id === n), X = (n, t) => {
     );
     for (let o = 0; o < r.length; ++o) {
       const s = r[o];
-      s.fontData?.assetUrl && await Tt(s.fontData.assetUrl);
+      s.fontData?.assetUrl && await Nt(s.fontData.assetUrl);
     }
   }
 };
@@ -6631,8 +6652,8 @@ class bd extends O {
       const o = a;
       o.scaleX = o.scaleX * this.width / e.width, o.scaleY = o.scaleY * this.height / e.height;
     } else if (e.type === "textbox") {
-      const o = a, s = (!o.algorithm || o.algorithm === kt.Autosize ? o.text : o.input) ?? "";
-      a = ie(o, s, e);
+      const o = a, s = (!o.algorithm || o.algorithm === Mt.Autosize ? o.text : o.input) ?? "";
+      a = re(o, s, e);
     }
     const i = X(e.id, Object.values(t.layouts)), r = Z(a, i);
     return {
@@ -6729,7 +6750,7 @@ class W extends O {
     return a !== void 0 ? a + 1 : 0;
   }
 }
-class Nt extends O {
+class Qt extends O {
   constructor(t) {
     super(), this.id = t;
   }
@@ -6809,7 +6830,7 @@ class To extends O {
     const a = {
       ...e,
       fontSize: this.size
-    }, i = X(e.id, Object.values(t.layouts)), r = (!e.algorithm || e.algorithm === kt.Autosize ? e.text : e.input) ?? "", o = Z(ie(a, r), i);
+    }, i = X(e.id, Object.values(t.layouts)), r = (!e.algorithm || e.algorithm === Mt.Autosize ? e.text : e.input) ?? "", o = Z(re(a, r), i);
     return {
       ...t,
       layouts: {
@@ -6831,7 +6852,7 @@ class en extends O {
     const a = {
       ...e,
       fontData: this.fontData
-    }, i = X(e.id, Object.values(t.layouts)), r = (!e.algorithm || e.algorithm === kt.Autosize ? e.text : e.input) ?? "", o = Z(ie(a, r), i);
+    }, i = X(e.id, Object.values(t.layouts)), r = (!e.algorithm || e.algorithm === Mt.Autosize ? e.text : e.input) ?? "", o = Z(re(a, r), i);
     return {
       ...t,
       layouts: {
@@ -6955,7 +6976,7 @@ class Oo extends O {
     const e = V(this.id, Object.values(t.layouts));
     if (!e.id)
       throw new G();
-    const a = X(e.id, Object.values(t.layouts)), i = Z(ie(e, this.text, e), a);
+    const a = X(e.id, Object.values(t.layouts)), i = Z(re(e, this.text, e), a);
     return {
       ...t,
       layouts: {
@@ -7210,7 +7231,7 @@ class an {
         }))()), A = {
           stepName: this.configuration.stepName,
           id: M(),
-          cachedObjectURL: await Xt(d.svg),
+          cachedObjectURL: await Zt(d.svg),
           src: l,
           svg: d.svg,
           colors: d.colors,
@@ -7323,7 +7344,7 @@ class Lo {
         async () => {
           const m = await r();
           if (!m.link || !m.link)
-            throw new Jt(m.asset);
+            throw new Kt(m.asset);
           h({
             rel: "mpeg4",
             href: m.link
@@ -7336,7 +7357,7 @@ class Lo {
         40
       );
     });
-    t.forEach((h) => a.getCommandDispatcher()(new Nt(h.id)));
+    t.forEach((h) => a.getCommandDispatcher()(new Qt(h.id)));
     const s = i.data.baseUrl.slice(0, 4) === "http" ? "" : "https://", l = new URL(s + i.data.baseUrl);
     l.searchParams.append("video", btoa(JSON.stringify([o]))), l.pathname = l.pathname + (l.pathname.slice(-1) === "/" ? "" : "/");
     const c = l.toString();
@@ -7399,7 +7420,7 @@ class De {
       const i = a.fileLink;
       if (i)
         return at(i, !0);
-      throw new Jt(a);
+      throw new Kt(a);
     };
   }
   async init(t, e, a) {
@@ -7667,7 +7688,7 @@ class De {
     r && r(!0);
     const c = t.data.initialZoomLevel, d = await Promise.all(
       t.data.regions.map(async (h, g) => {
-        const m = await Ve(l[g]), p = s.getImageData(), f = a.map((I) => new Nt(I.id)), S = p ? Ta(
+        const m = await Ve(l[g]), p = s.getImageData(), f = a.map((I) => new Qt(I.id)), S = p ? Ta(
           p,
           m,
           c && !t.data.forceImageCover ? { scale: c } : void 0,
@@ -7729,7 +7750,7 @@ class De {
     const a = t.fileLink;
     if (a)
       return a;
-    throw new Jt(t);
+    throw new Kt(t);
   }
   async loadPatternFromAsset(t, e, a, i) {
     const r = De.patternSource(t), o = a.markUpdatePending(), s = a.getWorkflowExperience().getStepById(e.stepName)?.frameService;
@@ -7869,7 +7890,8 @@ class Vo {
         spotColor: A.spotColor,
         pmsValue: A.pmsValue
       };
-    const s = xa(t, e, a, o), l = await Xt(s), c = [];
+    console.log(`LOG: newColors ${JSON.stringify(o, null, 2)}`);
+    const s = xa(t, e, a, o), l = await Zt(s), c = [];
     for (const d of i) {
       for (const [A, u] of r.entries())
         c.push(new fa(d, A, u));
@@ -7921,15 +7943,15 @@ class Vo {
     if (!t.data || !t.data.regions)
       throw new Be(t, "Missing regions.");
     i(!0);
-    const o = a.map((f) => new Nt(f.id));
+    const o = a.map((f) => new Qt(f.id));
     t.mandatory && r.setMandatoryFulfilled(t.stepName, !1);
     const s = e.asset;
     if (!s)
       throw new bt(e);
     const l = s.fileLink;
     if (!l)
-      throw new Jt(s);
-    const c = await st(await this.getIllustrationBody(l)), d = await Xt(c.svg), A = (f, S) => {
+      throw new Kt(s);
+    const c = await st(await this.getIllustrationBody(l)), d = await Zt(c.svg), A = (f, S) => {
       const w = r.getLayouts().find((v) => v.panelId === f.panelId);
       if (!w)
         throw new J(f);
@@ -8204,7 +8226,7 @@ class Wo {
       if (!p)
         return console.error(`Can not find layout for region: ${A.panelId}`), null;
       const f = [];
-      return h && f.push(new Nt(g)), f.push(
+      return h && f.push(new Qt(g)), f.push(
         new W(
           {
             stepRegion: A,
@@ -8335,7 +8357,7 @@ class qo {
     if (!o)
       return console.error("No URL for picture!"), null;
     i(!0), t.mandatory && a.setMandatoryFulfilled(t.stepName, !1);
-    const l = a.getRegionElements(t.stepName).map((A) => new Nt(A.id)), c = (A, u) => {
+    const l = a.getRegionElements(t.stepName).map((A) => new Qt(A.id)), c = (A, u) => {
       const g = a.getLayouts().find((p) => p.panelId === A.panelId);
       if (!g)
         throw new J(A);
@@ -8604,7 +8626,7 @@ class jo {
     }
   }
 }
-const zt = new jo();
+const Gt = new jo();
 class Yo {
   constructor() {
     this.latestToast = null, this.toastType = null, this.toastCallbacks = [];
@@ -8902,7 +8924,7 @@ class _o {
     });
   }
   updateInputText(t, e, a, i) {
-    const r = i.getStepStorage(a.stepName), o = xt(t, i), s = this.getProcessedInput(o, a.data, r?.customiseAllText ?? !1), l = {
+    const r = i.getStepStorage(a.stepName), o = Ft(t, i), s = this.getProcessedInput(o, a.data, r?.customiseAllText ?? !1), l = {
       command: void 0,
       helperData: {},
       errorData: this.getErrorsForText(t, s, a, i)
@@ -9077,8 +9099,8 @@ class _o {
       throw new bt(t);
     const a = e.fileLink;
     if (!a)
-      throw new Jt(e);
-    const i = await Tt(a);
+      throw new Kt(e);
+    const i = await Nt(a);
     return {
       assetUrl: a,
       name: i.names.fullName.en
@@ -9165,7 +9187,7 @@ class _o {
   async createTextboxRegions(t, e, a, i, r, o) {
     if (!a || !a.regions)
       throw new Error("Step data not supplied");
-    const s = r.text || a.defaultText || "", l = xt(s, o), c = this.getProcessedInput(l, a, !1), d = async (u, h) => {
+    const s = r.text || a.defaultText || "", l = Ft(s, o), c = this.getProcessedInput(l, a, !1), d = async (u, h) => {
       const m = o.getLayouts().find((f) => f.panelId === u.panelId), p = M();
       try {
         if (!m)
@@ -9263,7 +9285,7 @@ class _o {
    * @deprecated
    */
   async changeInputTextWithRegion(t, e, a, i, r, o, s, l, c, d) {
-    const A = (i || "").replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g, ""), u = xt(A, o), h = this.getProcessedInput(u, t.data, s), g = o.getRegionElements(t.stepName), m = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map();
+    const A = (i || "").replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g, ""), u = Ft(A, o), h = this.getProcessedInput(u, t.data, s), g = o.getRegionElements(t.stepName), m = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map();
     for (const v of g)
       if (v.region) {
         const [E, I] = ye(
@@ -9320,13 +9342,13 @@ const Zo = "data:application/octet-stream;base64,AAEAAAAPAIAAAwBwRkZUTYdHeHoAAEl
   const e = et("rect");
   return e.setAttribute("height", `${n}`), e.setAttribute("width", `${t}`), e;
 }, es = (n, t, e, a) => {
-  const i = le("filter");
+  const i = ce("filter");
   i.setAttribute("id", a), i.setAttribute("height", "200%"), i.setAttribute("width", "200%"), i.setAttribute("x", "-50%"), i.setAttribute("y", "-50%");
-  const r = le("feOffset");
+  const r = ce("feOffset");
   i.appendChild(r), r.setAttribute("result", "offOut"), r.setAttribute("in", "SourceAlpha"), r.setAttribute("dx", `${n}`), r.setAttribute("dy", `${t}`);
-  const o = le("feGaussianBlur");
+  const o = ce("feGaussianBlur");
   i.appendChild(o), o.setAttribute("result", "blurOut"), o.setAttribute("in", "offOut"), o.setAttribute("stdDeviation", `${e}`);
-  const s = le("feBlend");
+  const s = ce("feBlend");
   return i.appendChild(s), s.setAttribute("in", "SourceGraphic"), s.setAttribute("in2", "blurOut"), s.setAttribute("mode", "normal"), i;
 }, as = (n) => {
   let t = n;
@@ -9391,7 +9413,7 @@ class rs {
             u = (A * 100 | 0) / 100;
             break;
           default:
-            throw new Pt("Failed to encode path.");
+            throw new xt("Failed to encode path.");
         }
         l || o.push(" "), o.push(u), l = !1;
       }
@@ -9405,12 +9427,12 @@ class rs {
     for (e.lastIndex = 0; r = e.exec(t); ) {
       const o = r[1].toLowerCase(), s = (r[2].match(a) || []).map(parseFloat), l = o === r[1], c = nn[o];
       if (s.length < c.length)
-        throw new Pt(
+        throw new xt(
           `Path type "${o}" given ${s.length} arguments, expected ${c.length}.`
         );
       if (c.length > 0) {
         if (s.length % c.length !== 0)
-          throw new Pt(
+          throw new xt(
             `Path type "${o}" given ${s.length} arguments, not divisible by ${c.length}`
           );
         for (let d = 0; d < s.length / c.length; d++) {
@@ -9435,7 +9457,7 @@ class rs {
         if (s in r && l in r) {
           const c = [r[s], r[l]], d = e(c);
           if (d.length < 2)
-            throw new Pt("Transformer must return at least 2 points.");
+            throw new xt("Transformer must return at least 2 points.");
           r[s] = d[0], r[l] = d[1];
         }
       }
@@ -9605,7 +9627,7 @@ const ss = [
   const i = e.data, r = a.option;
   if (!r)
     return console.error(`No option for step ${a.stepName}.`), [];
-  const o = r.variants?.find((v) => v.id === i.illustrationVariantId) || re(r);
+  const o = r.variants?.find((v) => v.id === i.illustrationVariantId) || oe(r);
   if (!o)
     return console.error(`No variant with ID: ${i.illustrationVariantId}`), [];
   if (!o.asset)
@@ -9619,7 +9641,7 @@ const ss = [
     return console.error("Failed to read SVG."), [];
   Pa(g);
   const m = {};
-  Dt(g, (v) => {
+  kt(g, (v) => {
     ss.includes(v.tagName) && !v.attributes.getNamedItem("fill") && v.setAttribute("fill", "#000000");
     const E = v.attributes.getNamedItem("fill");
     if (E && E.value !== "none") {
@@ -9703,7 +9725,7 @@ const ss = [
   const i = e.data, r = a.option;
   if (!r)
     return console.error(`No option for step ${a.stepName}.`), [];
-  const o = r.variants?.find((d) => d.id === i.pictureVariantId) || re(r);
+  const o = r.variants?.find((d) => d.id === i.pictureVariantId) || oe(r);
   if (!o)
     return console.error(`No variant with ID: ${i.pictureVariantId}`), [];
   if (!o.asset)
@@ -9744,7 +9766,7 @@ const ss = [
   const i = e.data, r = a.option;
   if (!r)
     return console.error(`No option for step ${a.stepName}.`), [];
-  const o = r.variants?.find((c) => c.id === i.colorVariantId) || re(r);
+  const o = r.variants?.find((c) => c.id === i.colorVariantId) || oe(r);
   if (!o)
     return console.error(`No variant with ID: ${i.colorVariantId}`), [];
   t[a.stepName] = { selectedVariants: [o] };
@@ -9830,7 +9852,7 @@ const ss = [
     const c = await at(r, !0), d = (A) => {
       const u = /<svg.*?<\/svg>/s, h = A.match(u) || [], g = h?.length > 0 ? h[0] : "", f = dt().parseFromString(g, "image/svg+xml").firstElementChild;
       if (!f)
-        throw new Pt("Failed to read SVG.");
+        throw new xt("Failed to read SVG.");
       return Pa(f), It().serializeToString(f);
     };
     l.forEach((A) => {
@@ -9865,7 +9887,7 @@ const ss = [
     const p = a.option;
     if (!p)
       return;
-    const f = p.variants?.find((w) => w.id === r.fontVariantId) || re(p);
+    const f = p.variants?.find((w) => w.id === r.fontVariantId) || oe(p);
     if (!f || !f.asset)
       return;
     t[a.stepName] = { selectedVariants: [f] };
@@ -9876,7 +9898,7 @@ const ss = [
     const p = l();
     if (!p)
       return;
-    const f = await Tt(p);
+    const f = await Nt(p);
     return {
       assetUrl: p,
       name: f.names.fullName.en
@@ -10169,7 +10191,7 @@ class vs extends Gn {
       l = r.width, c = r.height;
     const d = this.getWorkflowManager?.()?.getTemplatingContext(), A = ka(t.layoutState.layout, e, {
       renderingConfiguration: {
-        purpose: Yt.ThreeD,
+        purpose: Jt.ThreeD,
         templatingContext: d
       }
     }), u = xn(A), h = await va.from(this.ctx, u, {
@@ -10180,7 +10202,7 @@ class vs extends Gn {
       ignoreMouse: !0,
       enableRedraw: !1,
       createCanvas: ft,
-      createImage: ee,
+      createImage: ae,
       DOMParser: Ba(),
       fetch
     });
@@ -10943,7 +10965,7 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
 })), al = (n, t) => {
   const e = n.workflowState, a = e ? JSON.parse(e) : void 0;
   return a ? Object.values(a.layouts).map((i) => i.layout) : el(t.panels);
-}, qt = class qt {
+}, Ht = class Ht {
   constructor(t, e, a, i, r, o = !1, s, l = !1, c = !1, d = !1) {
     this.workflowStatePromiseQueue = new Wn(1), this.initialized = !1, this.readOnly = !1, this.isReloadedTransaction = !1, this.singleVariantsRenderable = !1, this.stepTags = {}, this.setWorkflow = async (u) => {
       this.confirmedDesign = !1, this.editedSteps = {}, this.informationResults = [], this.mandatorySteps = {}, this.pendingUpdates = [], this.selectionCost = 0, this.stepSpecificServices = {}, this.pollers = [], this.allScenes = [], this.stepElements = {}, this.stepInitialised = {}, this.stepMetadata = {}, this.stepSelections = {}, this.storage = {}, this.validationErrors = { steps: /* @__PURE__ */ new Map() }, this.currentAdjustingStepId = "", this.reloadedState ? this.layouts = Object.values(this.reloadedState.layouts || {}).map((g) => g.layout) : u ? this.layouts = al(this.experience.getTransaction(), u) : this.layouts = [], this.commandContext.initialize(this.layouts, this.reloadedState), this.renderableContextService = new Cs(this.layouts), this.renderableContextService.setWorkflowManager(this), u.steps.forEach((g) => {
@@ -11086,7 +11108,7 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
   async fetchConversionConfiguration() {
     const t = this.experience.getTransaction().recipient;
     if (t?.conversionConfigurationId && !this.recipientConversionConfiguration) {
-      const e = qt.configurationPromiseMap.get(
+      const e = Ht.configurationPromiseMap.get(
         t.conversionConfigurationId
       );
       if (e)
@@ -11100,7 +11122,7 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
             id: t.conversionConfigurationId
           }
         })).data.conversionConfiguration)();
-        qt.configurationPromiseMap.set(t.conversionConfigurationId, i), this.recipientConversionConfiguration = await i;
+        Ht.configurationPromiseMap.set(t.conversionConfigurationId, i), this.recipientConversionConfiguration = await i;
       }
     }
   }
@@ -11360,7 +11382,7 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
       ...this.storage,
       [t]: { ...this.storage[t], ...e }
     };
-    if (!jt(a, this.storage)) {
+    if (!Yt(a, this.storage)) {
       this.storage = a;
       const i = new tn(this.constructSerializableWorkflow());
       this.commandContext.apply(i, !0), this.onStepSpecificStorageChange(t), this.onStorageChange();
@@ -11578,7 +11600,7 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     }, this.removeElements(h);
     const p = r.steps.find((E) => E.stepName === t);
     p?.type === b.Frame && this.getWorkflowExperience().getStepById(p.stepName)?.frameService?.setTargetElements(a.map((I) => I.id));
-    const f = h.map((E) => new Nt(E.id)), S = new tn(this.constructSerializableWorkflow()), w = [...m, ...f, S];
+    const f = h.map((E) => new Qt(E.id)), S = new tn(this.constructSerializableWorkflow()), w = [...m, ...f, S];
     w.length > 0 && this.commandContext.apply(new $(w), !0), await this.ensureStepsAreLoaded(), this.onElementsChange();
     const x = this.getInvalidModelVariants(), v = this.modelContainer;
     if (v) {
@@ -11643,7 +11665,7 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
             );
             break;
           case b.Shape:
-            a.push(zt.init(l, this, this.reloadedState));
+            a.push(Gt.init(l, this, this.reloadedState));
             break;
           case b.Text:
             a.push(H.init(l, this, this.reloadedState));
@@ -11708,8 +11730,8 @@ const el = (n) => n.sort((t, e) => t.index - e.index).map((t) => ({
     return go(this.allScenes, this.stepSelections, this.singleVariantsRenderable);
   }
 };
-qt.configurationPromiseMap = /* @__PURE__ */ new Map();
-let Ca = qt;
+Ht.configurationPromiseMap = /* @__PURE__ */ new Map();
+let Ca = Ht;
 class rt {
   constructor(t) {
     this.variantData = t;
@@ -11790,7 +11812,7 @@ class rt {
     return this.variantData.enabled;
   }
 }
-const Ht = class Ht {
+const jt = class jt {
   constructor(t, e, a) {
     this.manager = t, this.step = e, this.tags = a;
   }
@@ -11800,7 +11822,7 @@ const Ht = class Ht {
    * @param value The new value
    */
   setUpdateState(t) {
-    Ht.updateState.set(
+    jt.updateState.set(
       `${this.step.stepName}-${this.manager.getWorkflowExperience().getTransaction().id}`,
       t
     );
@@ -11809,7 +11831,7 @@ const Ht = class Ht {
    * @returns Gets the current update state of this step. All step handles for this step will see this value.
    */
   getUpdateState() {
-    return !!Ht.updateState.get(
+    return !!jt.updateState.get(
       `${this.step.stepName}-${this.manager.getWorkflowExperience().getTransaction().id}`
     );
   }
@@ -11921,8 +11943,8 @@ const Ht = class Ht {
     e ? r && e.executeCameraAnimation(r) : console.warn("No preview service available, cannot execute camera animations."), a ? i && a.executeAnimation(i, t) : console.warn("No model container available, cannot execute model animations.");
   }
 };
-Ht.updateState = /* @__PURE__ */ new Map();
-let tt = Ht;
+jt.updateState = /* @__PURE__ */ new Map();
+let tt = jt;
 class nl extends tt {
   constructor(t, e, a) {
     super(t, e, a);
@@ -11970,13 +11992,14 @@ class nl extends tt {
    * Set color for the illustration.
    */
   setColor(t, e, a) {
+    console.log("LOG: setColor");
     const i = /* @__PURE__ */ new Map(), o = this.getCurrentVariant()?.getAssetResource()?.assetConfiguration;
     return (o?.defaultColorVariants || []).length !== 0 ? o.channelNumbers.forEach((l) => {
       if (l.number.toString() === t) {
         const c = l.id.replace(/\W/g, "");
         a ? i.set(c, { browserValue: e, pmsValue: a }) : i.set(c, e);
       }
-    }) : a ? i.set(t, { browserValue: e, pmsValue: a }) : i.set(t, e), we.changeColors(
+    }) : a ? i.set(t, { browserValue: e, pmsValue: a }) : (console.log(`LOG: setting color ${t} | ${e}`), i.set(t, e)), we.changeColors(
       this.step,
       this.manager.getRegionElements(this.step.stepName),
       this.manager,
@@ -12063,7 +12086,7 @@ class ll extends tt {
   }
   selectVariant(t) {
     const e = t.getResource();
-    return zt.selectVariant(
+    return Gt.selectVariant(
       this.step,
       {
         fill: e.color,
@@ -12081,7 +12104,7 @@ class ll extends tt {
    * @deprecated The shape step can now pass through colors returned by getColors via selectVariant. Please swap setColor for selectVariant.
    */
   setColor(t) {
-    return zt.selectVariant(
+    return Gt.selectVariant(
       this.step,
       t,
       this.manager.getRegionElements(this.step.stepName) || [],
@@ -12093,7 +12116,7 @@ class ll extends tt {
    * @returns A list of color definitions that are currently applied to the illustration.
    */
   getColors() {
-    return zt.availableColours(this.step);
+    return Gt.availableColours(this.step);
   }
   /**
    * Allows for setting a custom color when the custom variant is selected. Will
@@ -12102,7 +12125,7 @@ class ll extends tt {
   setCustomColor(t) {
     return this.getCurrentVariant()?.getColor() !== "#custom" && console.warn(
       `setting custom color for step ${this.step.stepName} but color is ${this.getCurrentVariant()?.getColor()}`
-    ), zt.setCustomColor(t, this.step, this.manager);
+    ), Gt.setCustomColor(t, this.step, this.manager);
   }
   getCustomColor() {
     this.getCurrentVariant()?.getColor() !== "#custom" && console.warn(
@@ -12206,7 +12229,7 @@ class cl extends tt {
     const e = {
       input: t,
       helperData: {}
-    }, a = H.findLayoutElements(this.manager, this.step), i = H.filterUnsupportedCharacters(t, a[0]?.fontData), r = xt(i, this.manager).length, o = !!this.step.data && !!this.step.data.maxLength && r > this.step.data.maxLength;
+    }, a = H.findLayoutElements(this.manager, this.step), i = H.filterUnsupportedCharacters(t, a[0]?.fontData), r = Ft(i, this.manager).length, o = !!this.step.data && !!this.step.data.maxLength && r > this.step.data.maxLength;
     o || (e.input = i);
     const s = a.length <= 0, l = s ? { inputText: i, text: i } : { inputText: i };
     this.manager.updateStorage(this.step.stepName, l);
@@ -12282,7 +12305,7 @@ class cl extends tt {
     const t = this.step.data.maxLength;
     if (t === void 0)
       return;
-    const e = xt(this.getText(), this.manager);
+    const e = Ft(this.getText(), this.manager);
     return t - e.length;
   }
   setCustomColor(t) {
@@ -12363,7 +12386,7 @@ class ul extends tt {
     const t = this.step.data.maxLength;
     if (t === void 0)
       return;
-    const e = xt(this.getText(), this.manager);
+    const e = Ft(this.getText(), this.manager);
     return t - e.length;
   }
   /**
@@ -12814,7 +12837,7 @@ const ra = new wl(), yl = C`
     }
 `, ln = C`
     ${Ue}
-    ${ne}
+    ${ie}
     mutation TransactionUpdateIntegrationProduct($id: String!, $integrationProductId: String) {
         transactionUpdateIntegrationProduct(id: $id, integrationProductId: $integrationProductId) {
             id
@@ -13088,7 +13111,7 @@ class El {
       throw new Qe("Failed to obtain 2D context for preview image creation");
     const g = this.workflowManager.getTemplatingContext(), m = ka(u.layoutState.layout, u.layoutState.elements, {
       renderingConfiguration: {
-        purpose: Yt.Print,
+        purpose: Jt.Print,
         region: { left: A.x, top: A.y, width: A.width, height: A.height },
         templatingContext: g
       }
@@ -13097,7 +13120,7 @@ class El {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !1,
       createCanvas: ft,
-      createImage: ee,
+      createImage: ae,
       DOMParser: Ba(),
       fetch
     })).render();
@@ -14083,7 +14106,7 @@ class Tl {
         storage: a !== null ? a : void 0,
         channel: i
       });
-    jt(o, this.globalPropertyState) || (await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(o, this.globalPropertyState));
+    Yt(o, this.globalPropertyState) || (await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(o, this.globalPropertyState));
   }
   async setAspectStorage(t, e, a) {
     if (!this.globalPropertyState)
@@ -14110,7 +14133,7 @@ class Tl {
         storage: e !== null ? e : void 0,
         channel: a
       });
-    jt(r, this.globalPropertyState) || (await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(r, this.globalPropertyState));
+    Yt(r, this.globalPropertyState) || (await this.updateGlobalPropertyState(), await this.onGlobalPropertyStateChange(r, this.globalPropertyState));
   }
   async updateGlobalPropertyState() {
     if (!this.globalPropertyState)
@@ -14580,10 +14603,10 @@ class ge {
     const e = this.productResource.workflowId;
     if (e) {
       const a = t.find((i) => i.workflowName === e);
-      if (a) return new Wt(a);
+      if (a) return new qt(a);
     }
     if (t.length === 1)
-      return new Wt(t[0]);
+      return new qt(t[0]);
     throw new gt(
       "Called getDefaultWorkflow() but no default workflow is configured for the requested product. Multiple workflows exist so we can't assume!"
     );
@@ -14596,7 +14619,7 @@ class ge {
       throw new gt(
         "No workflows on configured product. Ensure at least 1 workflow is assigned to this product."
       );
-    return this.product.workflows.sort((e, a) => (e.index ?? 0) - (a.index ?? 0)).map((e) => new Wt(e));
+    return this.product.workflows.sort((e, a) => (e.index ?? 0) - (a.index ?? 0)).map((e) => new qt(e));
   }
   /**
    * A list of all integrations this product is connected to.
@@ -14640,7 +14663,7 @@ class ge {
     return Ol.requestKeysForEntity(this.product.id, t);
   }
 }
-class Wt {
+class qt {
   constructor(t) {
     this.workflow = t;
   }
@@ -15511,7 +15534,7 @@ class dn {
     });
     await Promise.all(l), await Promise.all(r.map((A) => A.applyGlobalState()));
     const c = this.globalPropertyStateManager.getGlobalPropertyState(), d = this.globalPropertyHandleService.applyConditionsFromState(a, c);
-    jt(r.sort(), d.sort()) || (this.checkConditionalHandlesChanged(r, d), this.checkMandatoryHandlesChanged(c, d), await this.onGlobalPropertiesChanged(e, c));
+    Yt(r.sort(), d.sort()) || (this.checkConditionalHandlesChanged(r, d), this.checkMandatoryHandlesChanged(c, d), await this.onGlobalPropertiesChanged(e, c));
   }
   checkConditionalHandlesChanged(t, e) {
     (() => {
@@ -15784,7 +15807,7 @@ class An {
       throw new Error(
         "No workflows found on product. This is generally due to a configuration error. Please confirm at least one workflow is configured for this product."
       );
-    return new Wt(t[0]);
+    return new qt(t[0]);
   }
   getAllWorkflows() {
     if (!this.integrationProduct.product)
@@ -15794,7 +15817,7 @@ class An {
       throw new Error(
         "No workflows found on product. This is generally due to a configuration error. Please confirm at least one workflow is configured for this product."
       );
-    return t.sort((e, a) => (e.index ?? 0) - (a.index ?? 0)).map((e) => new Wt(e));
+    return t.sort((e, a) => (e.index ?? 0) - (a.index ?? 0)).map((e) => new qt(e));
   }
 }
 const pe = C`
@@ -15989,7 +16012,7 @@ class tc {
     );
   }
 }
-const Lt = new tc();
+const Vt = new tc();
 class ec {
   /**
    * Returns a formatted string representing a given amount with desired currency.
@@ -16084,7 +16107,7 @@ const nc = async (n, t) => {
     i.steps.forEach((r) => {
       delete r.data.__typename, r.option?.id && (r.option.defaultVariant?.asset && U.cacheAsset(r.option.defaultVariant.asset), r.option.colorProfile && U.cacheAsset(r.option.colorProfile), r.option.variants?.forEach((o) => {
         o.asset && U.cacheAsset(o.asset), o.thumbnail && U.cacheAsset(o.thumbnail), o.material && U.cacheMaterial(o.material);
-      }), _t.set({ id: r.option.id }, Promise.resolve(r.option)));
+      }), Xt.set({ id: r.option.id }, Promise.resolve(r.option)));
     }), i.finalizeStepConfig || (i.finalizeStepConfig = {}), i.finalizeStepConfig.termsMarkdown = i.finalizeStepConfig.termsMarkdown || i.partner.termsMarkdown;
   }), a;
 }, ic = async (n, t) => {
@@ -16093,11 +16116,11 @@ const nc = async (n, t) => {
     throw new Error(`Workflow not found: ${n}`);
   return a;
 }, fi = async (n, t) => {
-  const e = n.map((s) => _t.get({ id: s, options: t })), a = n.filter((s, l) => e[l] === void 0);
+  const e = n.map((s) => Xt.get({ id: s, options: t })), a = n.filter((s, l) => e[l] === void 0);
   if (a.length === 0)
     return Promise.all(e);
   const i = nc(a, t), r = a.map(
-    (s) => _t.set({ id: s, options: t }, ic(s, i))
+    (s) => Xt.set({ id: s, options: t }, ic(s, i))
   ), o = e.filter((s) => s !== void 0);
   return await Promise.all(o.concat(r));
 }, rc = async (n, t) => (await fi([n], t))[0], oc = async (n) => {
@@ -16122,10 +16145,10 @@ class Rd {
       } catch (a) {
         throw console.error(a), new gt("Critical - Unable to synchronize workflow state with server.");
       }
-    }, this.options = t, this.options.applicationKey && ar(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 34.0.0"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
+    }, this.options = t, this.options.applicationKey && ar(this.options.applicationKey), console.debug("------------------------"), console.debug("Spiff Commerce Core SDK"), console.debug("Version: 34.0.0-beta.3f2fe6a9-805d-5c25-a99f-4d12215f8c94"), console.debug(`Application Key Provided: ${!!this.options.applicationKey}`), console.debug("------------------------");
   }
   configure(t) {
-    pt.setHubUrl(t.hubUrl), pt.setServerUrl(t.serverUrl), pt.setServicesApiUrl(t.servicesApiUrl), this.marketplaceThemeInstallId = t.marketplaceThemeInstallId, this.marketplaceThemeInstallConfigurationId = t.marketplaceThemeInstallConfigurationId, this.userPoolClientId = t.userPoolClientId, this.userPoolRegion = t.userPoolRegion, this.spiffRegion = t.spiffRegion, t.bearerAuthenticationToken && ir(t.bearerAuthenticationToken), this.options.applicationKey && this.getIntegration(), this.spiffRegion && this.userPoolRegion && this.userPoolClientId && Lt.init(this.spiffRegion, this.userPoolRegion, this.userPoolClientId);
+    pt.setHubUrl(t.hubUrl), pt.setServerUrl(t.serverUrl), pt.setServicesApiUrl(t.servicesApiUrl), this.marketplaceThemeInstallId = t.marketplaceThemeInstallId, this.marketplaceThemeInstallConfigurationId = t.marketplaceThemeInstallConfigurationId, this.userPoolClientId = t.userPoolClientId, this.userPoolRegion = t.userPoolRegion, this.spiffRegion = t.spiffRegion, t.bearerAuthenticationToken && ir(t.bearerAuthenticationToken), this.options.applicationKey && this.getIntegration(), this.spiffRegion && this.userPoolRegion && this.userPoolClientId && Vt.init(this.spiffRegion, this.userPoolRegion, this.userPoolClientId);
   }
   /**
    * @returns The asset manager allows for common operations related to assets
@@ -16319,7 +16342,7 @@ class Rd {
       return !1;
     const i = JSON.parse(e), r = (/* @__PURE__ */ new Date()).getTime() / 1e3;
     if (!i.ExpiresIn || i.ExpiresIn < r - parseInt(t)) {
-      const l = await Lt.refreshTokens();
+      const l = await Vt.refreshTokens();
       if (l?.AuthenticationResult)
         localStorage.setItem("last-refreshed-cognito-tokens", `${(/* @__PURE__ */ new Date()).getTime() / 1e3}`), i.AccessToken = l.AuthenticationResult.AccessToken, localStorage.setItem("cognito-tokens", JSON.stringify(i));
       else
@@ -16344,14 +16367,14 @@ class Rd {
       variables: {
         emailAddress: t
       }
-    }), await Lt.generateCode(t);
+    }), await Vt.generateCode(t);
   }
   /**
    * Verify an email code to log in as a Spiff user.
    * Always returns true if it doesn't throw.
    */
   async verifyCode(t, e) {
-    const a = (await this.getIntegration()).partner.id || "", i = await Lt.verifyCode(t, e, a);
+    const a = (await this.getIntegration()).partner.id || "", i = await Vt.verifyCode(t, e, a);
     if (i?.AuthenticationResult) {
       localStorage.setItem("last-refreshed-cognito-tokens", `${(/* @__PURE__ */ new Date()).getTime() / 1e3}`), localStorage.setItem("cognito-tokens", JSON.stringify(i.AuthenticationResult)), localStorage.setItem("cognito-email", t);
       const o = (await y.getShadowGraphqlClient().query({
@@ -16381,7 +16404,7 @@ class Rd {
       throw new Error("No token data in storage.");
     const a = JSON.parse(e), i = (/* @__PURE__ */ new Date()).getTime() / 1e3, r = !a?.AccessToken || Te(a.AccessToken);
     if (!a.ExpiresIn || a.ExpiresIn < i - parseInt(t) || r) {
-      const o = await Lt.refreshTokens();
+      const o = await Vt.refreshTokens();
       if (o?.AuthenticationResult)
         localStorage.setItem("last-refreshed-cognito-tokens", `${(/* @__PURE__ */ new Date()).getTime() / 1e3}`), a.AccessToken = o.AuthenticationResult.AccessToken, localStorage.setItem("cognito-tokens", JSON.stringify(a));
       else
@@ -16653,12 +16676,12 @@ class Rd {
         const it = x.get(T.integrationProductId);
         T.integrationProduct = it, T.product = it?.product, T.integrationProduct || console.error("failed to find transaction's product");
       }
-      const oe = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map();
-      !oe.get(T.id) && T.transactionOwnerId && (oe.set(T.id, T.transactionOwnerId), k.setMap("transactionOwnerIds", oe));
-      const He = oe.get(T.id) || void 0, Si = new Zl({
+      const se = k.getMap("transactionOwnerIds") || /* @__PURE__ */ new Map();
+      !se.get(T.id) && T.transactionOwnerId && (se.set(T.id, T.transactionOwnerId), k.setMap("transactionOwnerIds", se));
+      const He = se.get(T.id) || void 0, Si = new Zl({
         onMutate: () => ({ context: { transactionOwnerId: He, bundleOwnerId: e?.bundleOwnerId } }),
         onQuery: () => ({ context: { transactionOwnerId: He, bundleOwnerId: e?.bundleOwnerId } })
-      }), se = {
+      }), le = {
         workflow: qe,
         transaction: T,
         singleVariantsRenderable: At?.workflowConfiguration?.singleVariantsRenderable,
@@ -16674,12 +16697,12 @@ class Rd {
       };
       if (At.type === "transaction" && T.workflowState) {
         const it = JSON.parse(T.workflowState);
-        await Za(it), se.reloadedState = it;
+        await Za(it), le.reloadedState = it;
       } else if (!D && At.workflowState) {
         const it = JSON.parse(At.workflowState);
-        await Za(it), se.reloadedState = it;
+        await Za(it), le.reloadedState = it;
       }
-      return se.delayWorkflowStateSync = !0, { experienceOptions: se, index: q, options: At };
+      return le.delayWorkflowStateSync = !0, { experienceOptions: le, index: q, options: At };
     }), N = (await Promise.all(E)).sort((B, T) => B.index - T.index);
     let R = [];
     for (const B of N) {
@@ -16864,7 +16887,7 @@ class cc {
           let r = !1;
           for (let o = 0; o < i.currentFrameSources.length; o++) {
             const s = i.currentFrameSources[o], l = await Ve(s), c = this.frameData ? this.frameData[o] : void 0;
-            jt(l, c) || (this.frameData || (this.frameData = new Array(i.currentFrameSources.length)), this.frameData[o] = l, r = !0);
+            Yt(l, c) || (this.frameData || (this.frameData = new Array(i.currentFrameSources.length)), this.frameData[o] = l, r = !0);
           }
           r && (this.onFrameDataChangeListeners.forEach(
             (o) => o(this.frameData)
@@ -16898,7 +16921,7 @@ class cc {
       return;
     }
     t.forEach((e, a) => {
-      const i = Vt.get(e);
+      const i = zt.get(e);
       i && (this.frameData || (this.frameData = new Array(t.length)), this.frameData[a] = i);
     });
   }
@@ -17878,7 +17901,7 @@ export {
   ai as CreateLayoutCommand,
   ac as CurrencyContext,
   ec as CurrencyService,
-  Nt as DeleteElementCommand,
+  Qt as DeleteElementCommand,
   Al as DigitalContentStepHandle,
   Pl as FileUploadGlobalPropertyHandle,
   me as FlowExecutionNodeResult,
@@ -17901,7 +17924,7 @@ export {
   Sd as LayoutElementFactory,
   F as LayoutElementType,
   J as LayoutNotFoundError,
-  Yt as LayoutRenderingPurpose,
+  Jt as LayoutRenderingPurpose,
   il as MaterialStepHandle,
   Be as MisconfigurationError,
   zd as MockWorkflowManager,
@@ -17912,18 +17935,18 @@ export {
   Jl as ObjectInputType,
   hi as OptionGlobalPropertyHandle,
   Ie as OptionNotFoundError,
-  Pt as ParseError,
+  xt as ParseError,
   ol as PictureStepHandle,
   Gi as ProductCameraRig,
   mi as ProductCollection,
   $l as ProductCollectionProductSortKey,
-  Wt as ProductWorkflow,
-  _t as PromiseCache,
+  qt as ProductWorkflow,
+  Xt as PromiseCache,
   Wn as PromiseQueue,
   sl as QuestionStepHandle,
   Gn as QueueablePromise,
   bd as ResizeCommand,
-  Jt as ResourceNotFoundError,
+  Kt as ResourceNotFoundError,
   Ed as RotateCommand,
   j as ScaleAxis,
   Fd as SendBackwardsCommand,
@@ -17934,7 +17957,7 @@ export {
   Ui as StepAspectType,
   tt as StepHandle,
   b as StepType,
-  kt as TextAlgorithm,
+  Mt as TextAlgorithm,
   Oo as TextChangeCommand,
   xl as TextGlobalPropertyHandle,
   Nd as TextInput,
@@ -17963,7 +17986,7 @@ export {
   cd as findAngle,
   V as findElement,
   sd as findPmsColors,
-  Vt as frameDataCache,
+  zt as frameDataCache,
   St as frameStepService,
   M as generate,
   fs as generateCommands,
@@ -18002,7 +18025,7 @@ export {
   y as graphQlManager,
   we as illustrationStepService,
   dd as isCloseToValue,
-  Tt as loadFont,
+  Nt as loadFont,
   od as matchHexToPms,
   ri as materialStepService,
   Ol as metafieldManager,
@@ -18028,7 +18051,7 @@ export {
   Pa as sanitizeSvgTree,
   ir as setBearerAuthenticationToken,
   kn as setCanvasModule,
-  zt as shapeStepService,
+  Gt as shapeStepService,
   Uo as shortenUrl,
   pt as spiffCoreConfiguration,
   Dd as stepAspectValuesToDesignInputSteps,