@arbisoft/react-design-tool 1.0.22 → 1.0.23

package/dist/esm/index.js

@@ -184,306 +184,115 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return e;
-  };
-  var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    }), t[e];
-  }
-  try {
-    define({}, "");
-  } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
-    };
-  }
-  function wrap(t, e, r, n) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
-  }
-  function tryCatch(t, e, r) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(e, r)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
-  }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
-    return this;
-  });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
-      });
-    });
-  }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
-      if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
-        }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
-        }, function (t) {
-          return invoke("throw", t, i, a);
-        });
-      }
-      a(c.arg);
-    }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
         }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+        if (o || r > 1) return a;
+        throw y = true, n;
       }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
         return {
           value: t,
-          done: true
+          done: y
         };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
-      }
-    };
-  }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
-    var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
-  }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
-  }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
-  }
-  function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(true);
+      };
+    }(r, o, i), true), u;
   }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      if (!isNaN(e.length)) {
-        var o = -1,
-          i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
-            return next.value = t, next.done = true, next;
-          };
-        return i.next = i;
-      }
-    }
-    throw new TypeError(typeof e + " is not iterable");
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
   }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: true
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    configurable: true
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
-    var e = "function" == typeof t && t.constructor;
-    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
     return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
-    return this;
-  }), define(g, "toString", function () {
+  }), _regeneratorDefine(u, "toString", function () {
     return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = false, next;
-      }
-      return next.done = true, next;
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
     };
-  }, e.values = values, Context.prototype = {
-    constructor: Context,
-    reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
-    },
-    stop: function () {
-      this.done = true;
-      var t = this.tryEntries[0].completion;
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
-      }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
-          } else {
-            if (!u) throw Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
-        }
-      }
-    },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
-          break;
-        }
-      }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
-    },
-    complete: function (t, e) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
-    },
-    finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
-      }
-    },
-    catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
-          if ("throw" === n.type) {
-            var o = n.arg;
-            resetTryEntry(r);
-          }
-          return o;
-        }
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    if (r) i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n;else {
+      function o(r, n) {
+        _regeneratorDefine(e, r, function (e) {
+          return this._invoke(r, n, e);
+        });
       }
-      throw Error("illegal catch attempt");
-    },
-    delegateYield: function (e, r, n) {
-      return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
+      o("next", 0), o("throw", 1), o("return", 2);
     }
-  }, e;
+  }, _regeneratorDefine(e, r, n, t);
 }
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
@@ -2123,15 +1932,15 @@ var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _ta
 }, function (_ref9) {
   var disabled = _ref9.disabled;
   return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref10) {
-  var _ref10$gap = _ref10.gap,
-    gap = _ref10$gap === void 0 ? 0 : _ref10$gap;
+}, function (_ref0) {
+  var _ref0$gap = _ref0.gap,
+    gap = _ref0$gap === void 0 ? 0 : _ref0$gap;
   return "".concat(gap, "px");
-}, function (_ref11) {
-  var disabled = _ref11.disabled;
+}, function (_ref1) {
+  var disabled = _ref1.disabled;
   return disabled ? 0.5 : 1;
-}, function (_ref12) {
-  var disabled = _ref12.disabled;
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'none' : 'all';
 });
 
@@ -2379,78 +2188,78 @@ var StyledImage = styled.img(_templateObject$k || (_templateObject$k = _taggedTe
   var _ref9$marginLeft = _ref9.marginLeft,
     marginLeft = _ref9$marginLeft === void 0 ? 0 : _ref9$marginLeft;
   return "".concat(marginLeft, "px");
-}, function (_ref10) {
-  var _ref10$paddingTop = _ref10.paddingTop,
-    paddingTop = _ref10$paddingTop === void 0 ? 0 : _ref10$paddingTop;
+}, function (_ref0) {
+  var _ref0$paddingTop = _ref0.paddingTop,
+    paddingTop = _ref0$paddingTop === void 0 ? 0 : _ref0$paddingTop;
   return "".concat(paddingTop, "px");
-}, function (_ref11) {
-  var _ref11$paddingRight = _ref11.paddingRight,
-    paddingRight = _ref11$paddingRight === void 0 ? 0 : _ref11$paddingRight;
+}, function (_ref1) {
+  var _ref1$paddingRight = _ref1.paddingRight,
+    paddingRight = _ref1$paddingRight === void 0 ? 0 : _ref1$paddingRight;
   return "".concat(paddingRight, "px");
-}, function (_ref12) {
-  var _ref12$paddingBottom = _ref12.paddingBottom,
-    paddingBottom = _ref12$paddingBottom === void 0 ? 0 : _ref12$paddingBottom;
+}, function (_ref10) {
+  var _ref10$paddingBottom = _ref10.paddingBottom,
+    paddingBottom = _ref10$paddingBottom === void 0 ? 0 : _ref10$paddingBottom;
   return "".concat(paddingBottom, "px");
-}, function (_ref13) {
-  var _ref13$paddingLeft = _ref13.paddingLeft,
-    paddingLeft = _ref13$paddingLeft === void 0 ? 0 : _ref13$paddingLeft;
+}, function (_ref11) {
+  var _ref11$paddingLeft = _ref11.paddingLeft,
+    paddingLeft = _ref11$paddingLeft === void 0 ? 0 : _ref11$paddingLeft;
   return "".concat(paddingLeft, "px");
-}, function (_ref14) {
-  var _ref14$borderRadius = _ref14.borderRadius,
-    borderRadius = _ref14$borderRadius === void 0 ? 0 : _ref14$borderRadius;
+}, function (_ref12) {
+  var _ref12$borderRadius = _ref12.borderRadius,
+    borderRadius = _ref12$borderRadius === void 0 ? 0 : _ref12$borderRadius;
   return "".concat(borderRadius, "px");
 });
-var StyledText = styled.p(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: ", ";\n    margin-top: ", ";\n    margin-right: ", ";\n    margin-bottom: ", ";\n    margin-left: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n"])), function (_ref15) {
-  var fontFamily = _ref15.fontFamily;
+var StyledText = styled.p(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: ", ";\n    margin-top: ", ";\n    margin-right: ", ";\n    margin-bottom: ", ";\n    margin-left: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n"])), function (_ref13) {
+  var fontFamily = _ref13.fontFamily;
   return fontFamily || theme.fonts.primary;
-}, function (_ref16) {
-  var _ref16$fontSize = _ref16.fontSize,
-    fontSize = _ref16$fontSize === void 0 ? 14 : _ref16$fontSize;
+}, function (_ref14) {
+  var _ref14$fontSize = _ref14.fontSize,
+    fontSize = _ref14$fontSize === void 0 ? 14 : _ref14$fontSize;
   return "".concat(fontSize, "px");
-}, function (_ref17) {
-  var color = _ref17.color;
+}, function (_ref15) {
+  var color = _ref15.color;
   return color || theme.color.gray_700;
-}, function (_ref18) {
-  var _ref18$fontWeight = _ref18.fontWeight,
-    fontWeight = _ref18$fontWeight === void 0 ? 400 : _ref18$fontWeight;
+}, function (_ref16) {
+  var _ref16$fontWeight = _ref16.fontWeight,
+    fontWeight = _ref16$fontWeight === void 0 ? 400 : _ref16$fontWeight;
   return fontWeight;
-}, function (_ref19) {
-  var lineHeight = _ref19.lineHeight;
+}, function (_ref17) {
+  var lineHeight = _ref17.lineHeight;
   return lineHeight || 'normal';
-}, function (_ref20) {
-  var textAlign = _ref20.textAlign;
+}, function (_ref18) {
+  var textAlign = _ref18.textAlign;
   return textAlign || 'left';
-}, function (_ref21) {
-  var _ref21$marginTop = _ref21.marginTop,
-    marginTop = _ref21$marginTop === void 0 ? 0 : _ref21$marginTop;
+}, function (_ref19) {
+  var _ref19$marginTop = _ref19.marginTop,
+    marginTop = _ref19$marginTop === void 0 ? 0 : _ref19$marginTop;
   return "".concat(marginTop, "px");
-}, function (_ref22) {
-  var _ref22$marginRight = _ref22.marginRight,
-    marginRight = _ref22$marginRight === void 0 ? 0 : _ref22$marginRight;
+}, function (_ref20) {
+  var _ref20$marginRight = _ref20.marginRight,
+    marginRight = _ref20$marginRight === void 0 ? 0 : _ref20$marginRight;
   return "".concat(marginRight, "px");
-}, function (_ref23) {
-  var _ref23$marginBottom = _ref23.marginBottom,
-    marginBottom = _ref23$marginBottom === void 0 ? 0 : _ref23$marginBottom;
+}, function (_ref21) {
+  var _ref21$marginBottom = _ref21.marginBottom,
+    marginBottom = _ref21$marginBottom === void 0 ? 0 : _ref21$marginBottom;
   return "".concat(marginBottom, "px");
-}, function (_ref24) {
-  var _ref24$marginLeft = _ref24.marginLeft,
-    marginLeft = _ref24$marginLeft === void 0 ? 0 : _ref24$marginLeft;
+}, function (_ref22) {
+  var _ref22$marginLeft = _ref22.marginLeft,
+    marginLeft = _ref22$marginLeft === void 0 ? 0 : _ref22$marginLeft;
   return "".concat(marginLeft, "px");
-}, function (_ref25) {
-  var _ref25$paddingTop = _ref25.paddingTop,
-    paddingTop = _ref25$paddingTop === void 0 ? 0 : _ref25$paddingTop;
+}, function (_ref23) {
+  var _ref23$paddingTop = _ref23.paddingTop,
+    paddingTop = _ref23$paddingTop === void 0 ? 0 : _ref23$paddingTop;
   return "".concat(paddingTop, "px");
-}, function (_ref26) {
-  var _ref26$paddingRight = _ref26.paddingRight,
-    paddingRight = _ref26$paddingRight === void 0 ? 0 : _ref26$paddingRight;
+}, function (_ref24) {
+  var _ref24$paddingRight = _ref24.paddingRight,
+    paddingRight = _ref24$paddingRight === void 0 ? 0 : _ref24$paddingRight;
   return "".concat(paddingRight, "px");
-}, function (_ref27) {
-  var _ref27$paddingBottom = _ref27.paddingBottom,
-    paddingBottom = _ref27$paddingBottom === void 0 ? 0 : _ref27$paddingBottom;
+}, function (_ref25) {
+  var _ref25$paddingBottom = _ref25.paddingBottom,
+    paddingBottom = _ref25$paddingBottom === void 0 ? 0 : _ref25$paddingBottom;
   return "".concat(paddingBottom, "px");
-}, function (_ref28) {
-  var _ref28$paddingLeft = _ref28.paddingLeft,
-    paddingLeft = _ref28$paddingLeft === void 0 ? 0 : _ref28$paddingLeft;
+}, function (_ref26) {
+  var _ref26$paddingLeft = _ref26.paddingLeft,
+    paddingLeft = _ref26$paddingLeft === void 0 ? 0 : _ref26$paddingLeft;
   return "".concat(paddingLeft, "px");
 });
 
@@ -2548,12 +2357,12 @@ var loadAllGoogleFonts = function loadAllGoogleFonts() {
   });
 };
 var preloadRelevantImages = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
     var elements,
       imagePromises,
       _args = arguments;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
         case 0:
           elements = _args.length > 0 && _args[0] !== undefined ? _args[0] : [];
           imagePromises = elements === null || elements === void 0 ? void 0 : elements.map(function (elem) {
@@ -2581,7 +2390,7 @@ var preloadRelevantImages = /*#__PURE__*/function () {
               img.src = src;
             });
           }).filter(Boolean);
-          return _context.abrupt("return", Promise === null || Promise === void 0 ? void 0 : Promise.allSettled(imagePromises).then(function (results) {
+          return _context.a(2, Promise === null || Promise === void 0 ? void 0 : Promise.allSettled(imagePromises).then(function (results) {
             var successes = results === null || results === void 0 ? void 0 : results.filter(function (r) {
               return (r === null || r === void 0 ? void 0 : r.status) === 'fulfilled';
             }).map(function (r) {
@@ -2597,9 +2406,6 @@ var preloadRelevantImages = /*#__PURE__*/function () {
               errors: errors
             };
           }));
-        case 3:
-        case "end":
-          return _context.stop();
       }
     }, _callee);
   }));
@@ -2620,58 +2426,54 @@ var removeImageProperty = function removeImageProperty() {
   });
 };
 var exportStageAsImage = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(stageRef, pageSizeKey) {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(stageRef, pageSizeKey) {
     var scale,
       _args3 = arguments;
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
         case 0:
           scale = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : 2;
-          return _context3.abrupt("return", new Promise(/*#__PURE__*/function () {
-            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(resolve, reject) {
-              var stage, canvas, dataURL;
-              return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
+          return _context3.a(2, new Promise(/*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(resolve, reject) {
+              var stage, canvas, dataURL, _t;
+              return _regenerator().w(function (_context2) {
+                while (1) switch (_context2.n) {
                   case 0:
-                    _context2.prev = 0;
+                    _context2.p = 0;
                     stage = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current;
                     if (stage) {
-                      _context2.next = 4;
+                      _context2.n = 1;
                       break;
                     }
-                    return _context2.abrupt("return", reject('Stage is not available'));
-                  case 4:
-                    _context2.next = 6;
+                    return _context2.a(2, reject('Stage is not available'));
+                  case 1:
+                    _context2.n = 2;
                     return stage.toCanvas({
                       pixelRatio: scale
                     });
-                  case 6:
-                    canvas = _context2.sent;
-                    _context2.next = 9;
+                  case 2:
+                    canvas = _context2.v;
+                    _context2.n = 3;
                     return canvas.toDataURL('image/png');
-                  case 9:
-                    dataURL = _context2.sent;
+                  case 3:
+                    dataURL = _context2.v;
                     // Return the data URL as the resolved value
                     resolve(dataURL);
-                    _context2.next = 16;
+                    _context2.n = 5;
                     break;
-                  case 13:
-                    _context2.prev = 13;
-                    _context2.t0 = _context2["catch"](0);
-                    reject(_context2.t0);
-                  case 16:
-                  case "end":
-                    return _context2.stop();
+                  case 4:
+                    _context2.p = 4;
+                    _t = _context2.v;
+                    reject(_t);
+                  case 5:
+                    return _context2.a(2);
                 }
-              }, _callee2, null, [[0, 13]]);
+              }, _callee2, null, [[0, 4]]);
             }));
             return function (_x3, _x4) {
               return _ref3.apply(this, arguments);
             };
           }()));
-        case 2:
-        case "end":
-          return _context3.stop();
       }
     }, _callee3);
   }));
@@ -2956,43 +2758,42 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     onSetBackgroundColor(e);
   };
   var handleBackgroundUpload = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var file, imageUrl, reader;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
-            _context.next = 2;
+            _context.n = 1;
             return pickImage();
-          case 2:
-            file = _context.sent;
+          case 1:
+            file = _context.v;
             if (file) {
-              _context.next = 5;
+              _context.n = 2;
               break;
             }
-            return _context.abrupt("return");
-          case 5:
+            return _context.a(2);
+          case 2:
             if (!uploadImageCallBack) {
-              _context.next = 14;
+              _context.n = 4;
               break;
             }
             setLoadingUploadImage(true);
-            _context.next = 9;
+            _context.n = 3;
             return uploadImageCallBack(file);
-          case 9:
-            imageUrl = _context.sent;
+          case 3:
+            imageUrl = _context.v;
             onSetBackgroundImage(imageUrl);
             setLoadingUploadImage(false);
-            _context.next = 17;
+            _context.n = 5;
             break;
-          case 14:
+          case 4:
             reader = new FileReader();
             reader.onload = function () {
               onSetBackgroundImage(reader.result);
             };
             reader.readAsDataURL(file);
-          case 17:
-          case "end":
-            return _context.stop();
+          case 5:
+            return _context.a(2);
         }
       }, _callee);
     }));
@@ -3126,20 +2927,20 @@ var TabItem = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemp
   var _ref9$selected = _ref9.selected,
     selected = _ref9$selected === void 0 ? false : _ref9$selected;
   return selected ? theme.color.gray_200 : theme.color.white;
-}, function (_ref10) {
-  var isFirst = _ref10.isFirst;
+}, function (_ref0) {
+  var isFirst = _ref0.isFirst;
   return isFirst ? '5' : '0';
-}, function (_ref11) {
-  var isFirst = _ref11.isFirst;
+}, function (_ref1) {
+  var isFirst = _ref1.isFirst;
   return isFirst ? '5' : '0';
-}, function (_ref12) {
-  var isLast = _ref12.isLast;
+}, function (_ref10) {
+  var isLast = _ref10.isLast;
   return isLast ? '5' : '0';
-}, function (_ref13) {
-  var isLast = _ref13.isLast;
+}, function (_ref11) {
+  var isLast = _ref11.isLast;
   return isLast ? '5' : '0';
-}, function (_ref14) {
-  var disabled = _ref14.disabled;
+}, function (_ref12) {
+  var disabled = _ref12.disabled;
   return disabled ? 'none' : 'all';
 });
 
@@ -3180,7 +2981,7 @@ var ToolsTabBar = function ToolsTabBar(_ref) {
 ToolsTabBar.propTypes = propTypes$n;
 
 var TextToolBar = function TextToolBar(_ref) {
-  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8, _TEXT_DICTIONARY$lang9, _TEXT_DICTIONARY$lang10, _TEXT_DICTIONARY$lang11, _TEXT_DICTIONARY$lang12;
+  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8, _TEXT_DICTIONARY$lang9, _TEXT_DICTIONARY$lang0, _TEXT_DICTIONARY$lang1, _TEXT_DICTIONARY$lang10;
   var fontFamily = _ref.fontFamily,
     fontSize = _ref.fontSize,
     lineHeight = _ref.lineHeight,
@@ -3327,11 +3128,11 @@ var TextToolBar = function TextToolBar(_ref) {
       src: IconDropDown,
       marginLeft: 10
     }),
-    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang10 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang10 === void 0 ? void 0 : _TEXT_DICTIONARY$lang10.TEXT_LINE_HEIGHT,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang0 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang0 === void 0 ? void 0 : _TEXT_DICTIONARY$lang0.TEXT_LINE_HEIGHT,
     tooltipPosition: 'bottom'
   }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     gap: 12,
-    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang11 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang11 === void 0 ? void 0 : _TEXT_DICTIONARY$lang11.TEXT_COLOR,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang1 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang1 === void 0 ? void 0 : _TEXT_DICTIONARY$lang1.TEXT_COLOR,
     tooltipPosition: 'bottom'
   }, /*#__PURE__*/React.createElement(StyledImage, {
     src: IconTextSmall
@@ -3357,7 +3158,7 @@ var TextToolBar = function TextToolBar(_ref) {
     onChangeOpacity: function onChangeOpacity(e) {
       return onChangeTextProperty('opacity', e);
     },
-    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang12 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang12 === void 0 ? void 0 : _TEXT_DICTIONARY$lang12.TEXT_OPACITY,
+    tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang10 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang10 === void 0 ? void 0 : _TEXT_DICTIONARY$lang10.TEXT_OPACITY,
     tooltipPosition: 'bottom'
   }));
 };
@@ -4023,9 +3824,9 @@ var QrElement = function QrElement(_ref) {
     };
   }, [element]);
   var addQR = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
             try {
               QRCode.toDataURL(element === null || element === void 0 ? void 0 : element.qrText, {
@@ -4051,8 +3852,7 @@ var QrElement = function QrElement(_ref) {
               console.error('Failed to generate QR code', err);
             }
           case 1:
-          case "end":
-            return _context.stop();
+            return _context.a(2);
         }
       }, _callee);
     }));
@@ -4228,9 +4028,9 @@ var EditableText = function EditableText(_ref) {
     text = _useState8[0],
     setText = _useState8[1];
   var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isFontLoaded = _useState10[0],
-    setIsFontLoaded = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isFontLoaded = _useState0[0],
+    setIsFontLoaded = _useState0[1];
   useEffect(function () {
     setIsFontLoaded(false);
     setTimeout(function () {
@@ -5490,43 +5290,42 @@ var ImageSideBar = function ImageSideBar(_ref) {
     }));
   }));
   var addImageToList = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var file, imageUrl, reader;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
-            _context.next = 2;
+            _context.n = 1;
             return pickImage();
-          case 2:
-            file = _context.sent;
+          case 1:
+            file = _context.v;
             if (file) {
-              _context.next = 5;
+              _context.n = 2;
               break;
             }
-            return _context.abrupt("return");
-          case 5:
+            return _context.a(2);
+          case 2:
             if (!uploadImageCallBack) {
-              _context.next = 14;
+              _context.n = 4;
               break;
             }
             setLoadingUploadImage(true);
-            _context.next = 9;
+            _context.n = 3;
             return uploadImageCallBack(file);
-          case 9:
-            imageUrl = _context.sent;
+          case 3:
+            imageUrl = _context.v;
             onAddCustomImageToList(imageUrl);
             setLoadingUploadImage(false);
-            _context.next = 17;
+            _context.n = 5;
             break;
-          case 14:
+          case 4:
             reader = new FileReader();
             reader.onload = function () {
               onAddCustomImageToList(reader.result);
             };
             reader.readAsDataURL(file);
-          case 17:
-          case "end":
-            return _context.stop();
+          case 5:
+            return _context.a(2);
         }
       }, _callee);
     }));
@@ -5888,6 +5687,7 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
 /**
  * @typedef {Object} StudioProps
  * @property {string} [title]
+ * @property {string} [defaultQrLogo]
  * @property {string} [languageLocale]
  * @property {Array} [elementsList]
  * @property {Array} [customImages]
@@ -5910,6 +5710,8 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _elements$elements$fi, _elements$find4, _elements$find5, _elements$find6;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$defaultQrLogo = _ref.defaultQrLogo,
+    defaultQrLogo = _ref$defaultQrLogo === void 0 ? null : _ref$defaultQrLogo,
     _ref$elementsList = _ref.elementsList,
     elementsList = _ref$elementsList === void 0 ? defaultElements : _ref$elementsList,
     uploadImageCallBack = _ref.uploadImageCallBack,
@@ -5950,97 +5752,98 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     loadingFonts = _useState8[0],
     setLoadingFonts = _useState8[1];
   var _useState9 = useState(true),
-    _useState10 = _slicedToArray(_useState9, 2),
-    loadingImages = _useState10[0],
-    setLoadingImages = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    loadingImages = _useState0[0],
+    setLoadingImages = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    loading = _useState12[0],
-    setLoading = _useState12[1];
-  var _useState13 = useState(false),
+    loadingUploadImage = _useState12[0],
+    setLoadingUploadImage = _useState12[1];
+  var _useState13 = useState(true),
     _useState14 = _slicedToArray(_useState13, 2),
-    loadingUploadImage = _useState14[0],
-    setLoadingUploadImage = _useState14[1];
-  var _useState15 = useState(true),
+    helperSideBarVisible = _useState14[0],
+    setHelperSideBarVisible = _useState14[1];
+  var _useState15 = useState(100),
     _useState16 = _slicedToArray(_useState15, 2),
-    helperSideBarVisible = _useState16[0],
-    setHelperSideBarVisible = _useState16[1];
-  var _useState17 = useState(100),
+    zoomPercentage = _useState16[0],
+    setZoomPercentage = _useState16[1];
+  var _useState17 = useState(elementsList),
     _useState18 = _slicedToArray(_useState17, 2),
-    zoomPercentage = _useState18[0],
-    setZoomPercentage = _useState18[1];
-  var _useState19 = useState(elementsList),
+    elements = _useState18[0],
+    setElements = _useState18[1];
+  var _useState19 = useState(1),
     _useState20 = _slicedToArray(_useState19, 2),
-    elements = _useState20[0],
-    setElements = _useState20[1];
-  var _useState21 = useState(1),
+    backgroundImageOpacity = _useState20[0],
+    setBackgroundImageOpacity = _useState20[1];
+  var _useState21 = useState([]),
     _useState22 = _slicedToArray(_useState21, 2),
-    backgroundImageOpacity = _useState22[0],
-    setBackgroundImageOpacity = _useState22[1];
+    history = _useState22[0],
+    setHistory = _useState22[1];
   var _useState23 = useState([]),
     _useState24 = _slicedToArray(_useState23, 2),
-    history = _useState24[0],
-    setHistory = _useState24[1];
-  var _useState25 = useState([]),
+    redoStack = _useState24[0],
+    setRedoStack = _useState24[1];
+  var _useState25 = useState(theme.color.white),
     _useState26 = _slicedToArray(_useState25, 2),
-    redoStack = _useState26[0],
-    setRedoStack = _useState26[1];
-  var _useState27 = useState(theme.color.white),
+    shapeFillColor = _useState26[0],
+    setShapeFillColor = _useState26[1];
+  var _useState27 = useState(1),
     _useState28 = _slicedToArray(_useState27, 2),
-    shapeFillColor = _useState28[0],
-    setShapeFillColor = _useState28[1];
-  var _useState29 = useState(1),
+    shapeStrokeWidth = _useState28[0],
+    setShapeStrokeWidth = _useState28[1];
+  var _useState29 = useState(theme.color.black),
     _useState30 = _slicedToArray(_useState29, 2),
-    shapeStrokeWidth = _useState30[0],
-    setShapeStrokeWidth = _useState30[1];
-  var _useState31 = useState(theme.color.black),
+    shapeStrokeColor = _useState30[0],
+    setShapeStrokeColor = _useState30[1];
+  var _useState31 = useState(1),
     _useState32 = _slicedToArray(_useState31, 2),
-    shapeStrokeColor = _useState32[0],
-    setShapeStrokeColor = _useState32[1];
-  var _useState33 = useState(1),
+    shapeOpacity = _useState32[0],
+    setShapeOpacity = _useState32[1];
+  var _useState33 = useState(0),
     _useState34 = _slicedToArray(_useState33, 2),
-    shapeOpacity = _useState34[0],
-    setShapeOpacity = _useState34[1];
-  var _useState35 = useState(0),
+    imageStrokeWidth = _useState34[0],
+    setImageStrokeWidth = _useState34[1];
+  var _useState35 = useState(theme.color.black),
     _useState36 = _slicedToArray(_useState35, 2),
-    imageStrokeWidth = _useState36[0],
-    setImageStrokeWidth = _useState36[1];
-  var _useState37 = useState(theme.color.black),
+    imageStrokeColor = _useState36[0],
+    setImageStrokeColor = _useState36[1];
+  var _useState37 = useState(1),
     _useState38 = _slicedToArray(_useState37, 2),
-    imageStrokeColor = _useState38[0],
-    setImageStrokeColor = _useState38[1];
-  var _useState39 = useState(1),
+    imageOpacity = _useState38[0],
+    setImageOpacity = _useState38[1];
+  var _useState39 = useState(2),
     _useState40 = _slicedToArray(_useState39, 2),
-    imageOpacity = _useState40[0],
-    setImageOpacity = _useState40[1];
-  var _useState41 = useState(2),
+    qrStrokeWidth = _useState40[0],
+    setQrStrokeWidth = _useState40[1];
+  var _useState41 = useState(theme.color.black),
     _useState42 = _slicedToArray(_useState41, 2),
-    qrStrokeWidth = _useState42[0],
-    setQrStrokeWidth = _useState42[1];
-  var _useState43 = useState(theme.color.black),
+    qrStrokeColor = _useState42[0],
+    setQrStrokeColor = _useState42[1];
+  var _useState43 = useState(1),
     _useState44 = _slicedToArray(_useState43, 2),
-    qrStrokeColor = _useState44[0],
-    setQrStrokeColor = _useState44[1];
-  var _useState45 = useState(1),
+    qrOpacity = _useState44[0],
+    setQrOpacity = _useState44[1];
+  var _useState45 = useState(null),
     _useState46 = _slicedToArray(_useState45, 2),
-    qrOpacity = _useState46[0],
-    setQrOpacity = _useState46[1];
-  var _useState47 = useState(null),
+    selectedElement = _useState46[0],
+    setSelectedElement = _useState46[1];
+  var _useState47 = useState(customImages || []),
     _useState48 = _slicedToArray(_useState47, 2),
-    selectedElement = _useState48[0],
-    setSelectedElement = _useState48[1];
-  var _useState49 = useState(customImages || []),
+    customImagesList = _useState48[0],
+    setCustomImagesList = _useState48[1];
+  var _useState49 = useState(defaultQrLogo),
     _useState50 = _slicedToArray(_useState49, 2),
-    customImagesList = _useState50[0],
-    setCustomImagesList = _useState50[1];
-  var _useState51 = useState(null),
+    qrLogo = _useState50[0],
+    setQrLogo = _useState50[1];
+  var _useState51 = useState(basicTextProps),
     _useState52 = _slicedToArray(_useState51, 2),
-    qrLogo = _useState52[0],
-    setQrLogo = _useState52[1];
-  var _useState53 = useState(basicTextProps),
-    _useState54 = _slicedToArray(_useState53, 2),
-    defaultTextProps = _useState54[0],
-    setDefaultTextProps = _useState54[1];
+    defaultTextProps = _useState52[0],
+    setDefaultTextProps = _useState52[1];
+  var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
   var undo = useCallback(function () {
     if (history.length > 0) {
       setSelectedElement(null);
@@ -6062,32 +5865,29 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useImperativeHandle(ref, function () {
     return {
       onSave: function () {
-        var _onSave = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _onSave = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
           var processedElements, dataURL;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
               case 0:
                 setLoading(true);
                 setSelectedElement(null);
                 setZoomPercentage(100);
-                _context.next = 5;
+                _context.n = 1;
                 return new Promise(function (resolve) {
                   return setTimeout(resolve, 100);
                 });
-              case 5:
+              case 1:
                 processedElements = removeImageProperty(elements);
-                _context.next = 8;
+                _context.n = 2;
                 return exportStageAsImage(stageRef);
-              case 8:
-                dataURL = _context.sent;
+              case 2:
+                dataURL = _context.v;
                 setLoading(false);
-                return _context.abrupt("return", {
+                return _context.a(2, {
                   elements: processedElements,
                   image: dataURL
                 });
-              case 11:
-              case "end":
-                return _context.stop();
             }
           }, _callee);
         }));
@@ -6095,7 +5895,9 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
           return _onSave.apply(this, arguments);
         }
         return onSave;
-      }()
+      }(),
+      loading: overallLoading,
+      setLoading: setLoading
     };
   });
   useEffect(function () {
@@ -6158,7 +5960,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setLanguageLocale(validateLocale(locale));
   }, [locale]);
   useEffect(function () {
-    setCustomImagesList(customImages);
+    setCustomImagesList(customImages || []);
   }, [customImages]);
   useEffect(function () {
     setLoadingFonts(true);
@@ -6686,43 +6488,42 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var addQrLogo = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var file, imageUrl, reader;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.n) {
           case 0:
-            _context2.next = 2;
+            _context2.n = 1;
             return pickImage();
-          case 2:
-            file = _context2.sent;
+          case 1:
+            file = _context2.v;
             if (file) {
-              _context2.next = 5;
+              _context2.n = 2;
               break;
             }
-            return _context2.abrupt("return");
-          case 5:
+            return _context2.a(2);
+          case 2:
             if (!uploadImageCallBack) {
-              _context2.next = 14;
+              _context2.n = 4;
               break;
             }
             setLoadingUploadImage(true);
-            _context2.next = 9;
+            _context2.n = 3;
             return uploadImageCallBack(file);
-          case 9:
-            imageUrl = _context2.sent;
+          case 3:
+            imageUrl = _context2.v;
             addLogo(imageUrl);
             setLoadingUploadImage(false);
-            _context2.next = 17;
+            _context2.n = 5;
             break;
-          case 14:
+          case 4:
             reader = new FileReader();
             reader.onload = function () {
               addLogo(reader.result);
             };
             reader.readAsDataURL(file);
-          case 17:
-          case "end":
-            return _context2.stop();
+          case 5:
+            return _context2.a(2);
         }
       }, _callee2);
     }));
@@ -6756,38 +6557,37 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var onSaveProgress = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
       var processedElements, dataURL;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
             if (onSave) {
-              _context3.next = 2;
+              _context3.n = 1;
               break;
             }
-            return _context3.abrupt("return");
-          case 2:
+            return _context3.a(2);
+          case 1:
             setLoading(true);
             setSelectedElement(null);
             setZoomPercentage(100);
-            _context3.next = 7;
+            _context3.n = 2;
             return new Promise(function (resolve) {
               return setTimeout(resolve, 100);
             });
-          case 7:
+          case 2:
             processedElements = removeImageProperty(elements);
-            _context3.next = 10;
+            _context3.n = 3;
             return exportStageAsImage(stageRef);
-          case 10:
-            dataURL = _context3.sent;
+          case 3:
+            dataURL = _context3.v;
             setLoading(false);
             onSave({
               elements: processedElements,
               image: dataURL
             });
-          case 13:
-          case "end":
-            return _context3.stop();
+          case 4:
+            return _context3.a(2);
         }
       }, _callee3);
     }));
@@ -6832,7 +6632,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     styleProps: styleProps,
     defaultText: defaultText,
     languageLocale: languageLocale
-  }), /*#__PURE__*/React.createElement(Editor
+  }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor
   // canvasSize={canvasSize}
   , {
     cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
@@ -6904,7 +6704,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     saveButtonText: saveButtonText,
     languageLocale: languageLocale,
     onRemoveBackgroundImage: onRemoveBackgroundImage
-  }), (loadingFonts || loadingImages || loadingUploadImage || loading) && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
+  }), overallLoading && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
     size: "60px",
     color: theme.color.secondary
   }))));