@yorab/react-paint 0.11.4 → 0.11.5

package/dist/react-paint.js

@@ -50,8 +50,8 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
       if (c.length === 1) d.rect(...Qe(c[0], l, h, n.scaleX, n.scaleY), 1, 1);
       else if (d.moveTo(...Qe(c[0], l, h, n.scaleX, n.scaleY)), s === "quadratic") {
         for (let u = 0; u < c.slice(1).length - 2; u++) {
-          const g = Qe(c[u], l, h, n.scaleX, n.scaleY), f = Qe(c[u + 1], l, h, n.scaleX, n.scaleY), w = (g[0] + f[0]) / 2, x = (g[1] + f[1]) / 2;
-          d.quadraticCurveTo(...g, w, x);
+          const g = Qe(c[u], l, h, n.scaleX, n.scaleY), f = Qe(c[u + 1], l, h, n.scaleX, n.scaleY), x = (g[0] + f[0]) / 2, w = (g[1] + f[1]) / 2;
+          d.quadraticCurveTo(...g, x, w);
         }
         d.quadraticCurveTo(...Qe(c[c.length - 2], l, h, n.scaleX, n.scaleY), ...Qe(c[c.length - 1], l, h, n.scaleX, n.scaleY));
       } else for (const u of c.slice(1)) d.lineTo(...Qe(u, l, h, n.scaleX, n.scaleY));
@@ -120,16 +120,16 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
   const r = [e + i / 2 - s[0], t + n / 2 - s[1]], [o, l] = ve({ point: r, rotation: -a.rotation });
   return { borderX: De(e + o - r[0]), borderWidth: De(i), borderY: De(t + l - r[1]), borderHeight: De(n) };
 }, Be = (e, i, t, n, s = !1) => {
-  const { center: a, borders: r } = _(i, n), o = ve({ origin: a, point: e, rotation: i.rotation }), l = t.anchor[0] === 0 && o[0] >= r.x + r.width || t.anchor[0] === 1 && o[0] <= r.x, h = t.anchor[1] === 0 && o[1] >= r.y + r.height || t.anchor[1] === 1 && o[1] <= r.y, d = [O(o[0], n, t.anchor[0] === 0 && !l || t.anchor[0] === 1 && l ? n.selectionPadding : -n.selectionPadding), O(o[1], n, t.anchor[1] === 0 && !h || t.anchor[1] === 1 && h ? n.selectionPadding : -n.selectionPadding)], c = n.gridGap ? [t.anchor[0] === 0 ? r.x : t.anchor[0] === 0.5 ? r.x + r.width / 2 : r.x + r.width, t.anchor[1] === 0 ? r.y : t.anchor[1] === 0.5 ? r.y + r.height / 2 : r.y + r.height] : ve({ origin: a, point: t.cursorStartPosition, rotation: i.rotation }), u = [d[0] - c[0], d[1] - c[1]], [g, f] = di({ borderStart: r.x, borderSize: r.width, vector: u[0], settings: n, invertedAxe: l, anchor: t.anchor[0] }), [w, x] = di({ borderStart: r.y, borderSize: r.height, vector: u[1], settings: n, invertedAxe: h, anchor: t.anchor[1] });
+  const { center: a, borders: r } = _(i, n), o = ve({ origin: a, point: e, rotation: i.rotation }), l = t.anchor[0] === 0 && o[0] >= r.x + r.width || t.anchor[0] === 1 && o[0] <= r.x, h = t.anchor[1] === 0 && o[1] >= r.y + r.height || t.anchor[1] === 1 && o[1] <= r.y, d = [O(o[0], n, t.anchor[0] === 0 && !l || t.anchor[0] === 1 && l ? n.selectionPadding : -n.selectionPadding), O(o[1], n, t.anchor[1] === 0 && !h || t.anchor[1] === 1 && h ? n.selectionPadding : -n.selectionPadding)], c = n.gridGap ? [t.anchor[0] === 0 ? r.x : t.anchor[0] === 0.5 ? r.x + r.width / 2 : r.x + r.width, t.anchor[1] === 0 ? r.y : t.anchor[1] === 0.5 ? r.y + r.height / 2 : r.y + r.height] : ve({ origin: a, point: t.cursorStartPosition, rotation: i.rotation }), u = [d[0] - c[0], d[1] - c[1]], [g, f] = di({ borderStart: r.x, borderSize: r.width, vector: u[0], settings: n, invertedAxe: l, anchor: t.anchor[0] }), [x, w] = di({ borderStart: r.y, borderSize: r.height, vector: u[1], settings: n, invertedAxe: h, anchor: t.anchor[1] });
   if (s) {
     const S = ((L, b, k, P, E, H, T, C, V, W) => {
       const { selectionPadding: y } = W, N = (b.width - 2 * y || 1) / (b.height - 2 * y || 1), M = (E - 2 * y) / (T - 2 * y);
       let A, Z, v, m;
       return V.anchor[0] !== 0.5 && V.anchor[1] !== 0.5 ? M < N ? (Z = H, m = T, v = (T - 2 * y) * N + 2 * y, A = V.anchor[0] === 0 ? b.width - L[0] > y ? b.x + (b.width - v) : b.x + b.width - 2 * y : b.width + L[0] > y ? b.x : b.x - v + 2 * y) : (A = P, v = E, m = (E - 2 * y) / N + 2 * y, Z = V.anchor[1] === 0 ? b.height - L[1] > y ? b.y + (b.height - m) : b.y + b.height - 2 * y : b.height + L[1] > y ? b.y : b.y - m + 2 * y) : V.anchor[0] !== 0.5 ? (A = P, v = E, m = (E - 2 * y) / N + 2 * y, Z = b.y + (b.height - m) / 2) : (Z = H, m = T, v = (T - 2 * y) * N + 2 * y, A = b.x + (b.width - v) / 2), { borderX: A, borderWidth: v, borderY: Z, borderHeight: m, center: k, originalShape: C };
-    })(u, r, a, g, f, w, x, i, t, n);
+    })(u, r, a, g, f, x, w, i, t, n);
     return ci(S);
   }
-  return ci({ borderX: g, borderWidth: f, borderY: w, borderHeight: x, center: a, originalShape: i });
+  return ci({ borderX: g, borderWidth: f, borderY: x, borderHeight: w, center: a, originalShape: i });
 }, ft = (e, i) => {
   const t = vt(e);
   return { ...e, path: t, selection: Je(t, e, i) };
@@ -243,8 +243,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       const f = u1(g);
       o.onload = async () => {
         URL.revokeObjectURL(o.src);
-        const w = Ht(o, g, d, c, u);
-        l(w);
+        const x = Ht(o, g, d, c, u);
+        l(x);
       }, o.src = f;
     }) : (o.onload = async () => {
       URL.revokeObjectURL(o.src);
@@ -267,9 +267,9 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   const r = i.map((o) => t / e.measureText(o).width);
   return Math.min(...r) || 36;
 }, I1 = (e, i, t, n) => {
-  const s = { ...i, value: t }, a = ((f, w, x, S, L, b = rt) => {
-    f.font = `${L ? "italic" : ""} ${S ? "bold" : ""} ${x}px ${b}`;
-    const k = w.map((P) => f.measureText(P).width);
+  const s = { ...i, value: t }, a = ((f, x, w, S, L, b = rt) => {
+    f.font = `${L ? "italic" : ""} ${S ? "bold" : ""} ${w}px ${b}`;
+    const k = x.map((P) => f.measureText(P).width);
     return Math.max(...k) || 20;
   })(e, s.value, s.fontSize, s.style?.fontBold ?? !1, s.style?.fontItalic ?? !1, s.style?.fontFamily), r = s.fontSize * s.value.length, o = { ...s, width: a, height: r }, { center: l } = _(i, n), { center: h } = _(o, n), [d, c] = mi([1, 1], l, i, n), [u, g] = mi([1, 1], h, o, n, [!1, !1]);
   return { ...o, x: o.x - (u - d), y: o.y - (g - c) };
@@ -410,9 +410,9 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       })(t, n, s, a);
     case "brush":
       return ((o, l, h, d, c) => {
-        const { borders: u } = _({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = _(l, d), { borderX: f, borderHeight: w, borderY: x, borderWidth: S } = Be(o, l, h, d, c), L = Math.max(0, u.width - 2 * d.selectionPadding), b = Math.max(0, u.height - 2 * d.selectionPadding), k = Math.max(0, S - 2 * d.selectionPadding), P = Math.max(0, w - 2 * d.selectionPadding), E = L ? k / L : 1, H = b ? P / b : 1;
+        const { borders: u } = _({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = _(l, d), { borderX: f, borderHeight: x, borderY: w, borderWidth: S } = Be(o, l, h, d, c), L = Math.max(0, u.width - 2 * d.selectionPadding), b = Math.max(0, u.height - 2 * d.selectionPadding), k = Math.max(0, S - 2 * d.selectionPadding), P = Math.max(0, x - 2 * d.selectionPadding), E = L ? k / L : 1, H = b ? P / b : 1;
         if (!L || !b) return l;
-        const T = De(f - g.x), C = De(x - g.y);
+        const T = De(f - g.x), C = De(w - g.y);
         return qe({ ...l, points: l.points.map((V) => V.map(([W, y]) => [W + T, y + C])), scaleX: E, scaleY: H }, d);
       })(t, n, s, a, r);
     case "circle":
@@ -422,24 +422,24 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       })(t, n, s, a);
     case "ellipse":
       return ((o, l, h, d, c = !1) => {
-        const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Be(o, l, h, d, c);
-        return mt({ ...l, radiusX: Math.max(0, w / 2 - d.selectionPadding), radiusY: Math.max(0, g / 2 - d.selectionPadding), x: u + w / 2, y: f + g / 2 }, d);
+        const { borderX: u, borderHeight: g, borderY: f, borderWidth: x } = Be(o, l, h, d, c);
+        return mt({ ...l, radiusX: Math.max(0, x / 2 - d.selectionPadding), radiusY: Math.max(0, g / 2 - d.selectionPadding), x: u + x / 2, y: f + g / 2 }, d);
       })(t, n, s, a, r);
     case "rect":
     case "square":
       return ((o, l, h, d, c = !1) => {
-        const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Be(o, l, h, d, c);
-        return Qt({ ...l, width: Math.max(0, w - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: f + d.selectionPadding }, d);
+        const { borderX: u, borderHeight: g, borderY: f, borderWidth: x } = Be(o, l, h, d, c);
+        return Qt({ ...l, width: Math.max(0, x - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: f + d.selectionPadding }, d);
       })(t, n, s, a, i.type === "square" || r);
     case "text":
       return ((o, l, h, d, c) => {
-        const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Be(l, h, d, c, !0), x = bt({ ...h, width: Math.max(0, w - 2 * c.selectionPadding), height: Math.max(0, g - 2 * c.selectionPadding), x: u + c.selectionPadding, y: f + c.selectionPadding }, c);
-        return { ...x, fontSize: Gt(o, x.value, x.width, x.style?.fontBold ?? !1, x.style?.fontItalic ?? !1, x.style?.fontFamily) };
+        const { borderX: u, borderHeight: g, borderY: f, borderWidth: x } = Be(l, h, d, c, !0), w = bt({ ...h, width: Math.max(0, x - 2 * c.selectionPadding), height: Math.max(0, g - 2 * c.selectionPadding), x: u + c.selectionPadding, y: f + c.selectionPadding }, c);
+        return { ...w, fontSize: Gt(o, w.value, w.width, w.style?.fontBold ?? !1, w.style?.fontItalic ?? !1, w.style?.fontFamily) };
       })(e, t, n, s, a);
     case "picture":
-      return ((o, l, h, d, c) => {
-        const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Be(o, l, h, d, !0);
-        return St({ ...l, width: Math.max(0, w - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: f + d.selectionPadding }, d);
+      return ((o, l, h, d) => {
+        const { borderX: c, borderHeight: u, borderY: g, borderWidth: f } = Be(o, l, h, d, !0);
+        return St({ ...l, width: Math.max(0, f - 2 * d.selectionPadding), height: Math.max(0, u - 2 * d.selectionPadding), x: c + d.selectionPadding, y: g + d.selectionPadding }, d);
       })(t, n, s, a);
     default:
       return n;
@@ -566,7 +566,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   const i = ["img", "id", "selection", "path", "arrows"];
   return e.map((t) => t.type !== "picture" || t.src.startsWith("http") ? Zt(i, t) : Zt(i, { ...t, src: U1(t) }));
 }, Xt = (e, i, t) => ({ shapes: G1(e), config: { width: i, height: t } }), Ci = (e, i) => ot({ ...e, id: oe(`${e.type}_`) }, i), X1 = (e, i, t) => {
-  const n = q([]), s = q({ dataChanged: [] }), [a, r] = z(void 0), [o, l] = z(void 0), [h, d] = z(void 0), [c, u] = z({ states: [{ shapes: [], selectedShape: void 0, source: "remote" }], cursor: 0 }), g = c.cursor > 0, f = c.cursor < c.states.length - 1, w = n.current.length > 0, x = F(() => {
+  const n = q([]), s = q({ dataChanged: [] }), [a, r] = z(void 0), [o, l] = z(void 0), [h, d] = z(void 0), [c, u] = z({ states: [{ shapes: [], selectedShape: void 0, source: "remote" }], cursor: 0 }), g = c.cursor > 0, f = c.cursor < c.states.length - 1, x = n.current.length > 0, w = F(() => {
     u((v) => r1(v.states[v.cursor].shapes, n.current) ? v : { states: [...v.states.slice(0, v.cursor + 1), { shapes: n.current, selectedShape: o, source: "user" }], cursor: v.cursor + 1 });
   }, [o]), S = F((v) => {
     n.current = [v, ...n.current];
@@ -576,15 +576,15 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     d(D);
   }, [e, o]), b = F(async (v, m = 300, Q = 300) => {
     const D = await N1(v, m, Q, e);
-    return S(D), x(), D;
-  }, [S, x, e]), k = F((v, m = !1) => {
-    n.current = n.current.map((Q) => Q.id === o?.id ? v : Q), l((Q) => Q?.id === v.id ? v : Q), m && x();
-  }, [o, x]), P = F((v) => {
+    return S(D), w(), D;
+  }, [S, w, e]), k = F((v, m = !1) => {
+    n.current = n.current.map((Q) => Q.id === o?.id ? v : Q), l((Q) => Q?.id === v.id ? v : Q), m && w();
+  }, [o, w]), P = F((v) => {
     const m = v.map((Q) => Zt(["chosen"], Q));
-    n.current = m, x();
-  }, [x]), E = F((v) => {
-    l((m) => m?.id === v.id ? void 0 : m), n.current = n.current.filter((m) => m.id !== v.id), x();
-  }, [x]), H = F((v) => {
+    n.current = m, w();
+  }, [w]), E = F((v) => {
+    l((m) => m?.id === v.id ? void 0 : m), n.current = n.current.filter((m) => m.id !== v.id), w();
+  }, [w]), H = F((v) => {
     u((m) => {
       const Q = v(m);
       return n.current = m.states[Q].shapes, l(m.states[Q].selectedShape), le("cursor", Q, m);
@@ -652,7 +652,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       return l(R?.[0]), D;
     });
   }, [e]);
-  return { registerEvent: M, unregisterEvent: A, shapesRef: n, selectedShape: o, hoveredShape: h, selectionFrame: a, setSelectionFrame: r, refreshSelectedShapes: Z, addShape: S, addPictureShape: b, moveShapes: W, saveShapes: x, setSelectedShape: l, refreshHoveredShape: L, toggleShapeVisibility: y, toggleShapeLock: N, removeShape: E, updateShape: k, backwardShape: T, forwardShape: C, clearShapes: V, canGoBackward: g, canGoForward: f, canClear: w };
+  return { registerEvent: M, unregisterEvent: A, shapesRef: n, selectedShape: o, hoveredShape: h, selectionFrame: a, setSelectionFrame: r, refreshSelectedShapes: Z, addShape: S, addPictureShape: b, moveShapes: W, saveShapes: w, setSelectedShape: l, refreshHoveredShape: L, toggleShapeVisibility: y, toggleShapeLock: N, removeShape: E, updateShape: k, backwardShape: T, forwardShape: C, clearShapes: V, canGoBackward: g, canGoForward: f, canClear: x };
 }, wi = (e, i = !1) => {
   const t = (s, a) => {
     if (Array.isArray(s)) return a;
@@ -682,9 +682,9 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   });
   return $t(i ? [...n, Ot] : n);
 }, Tn = ({ width: e = 1e3, height: i = 600, shapes: t, mode: n = "editor", disabled: s = !1, options: a = oi }) => {
-  const { layersManipulation: r, brushAlgo: o, isBrushShapeDoneOnMouseUp: l, grid: h, canGrow: d, canShrink: c, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: w, withSkeleton: x, withFrameSelection: S, clearCallback: L, availableTools: b, canvasSelectionPadding: k } = { ...oi, ...a }, P = n !== "viewer", E = s || !P, H = q(null), T = q(null), C = q(!1), V = F((Y) => {
+  const { layersManipulation: r, brushAlgo: o, isBrushShapeDoneOnMouseUp: l, grid: h, canGrow: d, canShrink: c, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: x, withSkeleton: w, withFrameSelection: S, clearCallback: L, availableTools: b, canvasSelectionPadding: k } = { ...oi, ...a }, P = n !== "viewer", E = s || !P, H = q(null), T = q(null), C = q(!1), V = F((Y) => {
     H.current = Y;
-  }, []), [W, y] = z(Ae), [N, M] = z(h), [A, Z] = z({ width: e, height: i, scaleRatio: 1 }), [v, m] = z([0, 0]), Q = Ni(() => ({ brushAlgo: o, isBrushShapeDoneOnMouseUp: l, canvasSize: A, canvasOffset: v, gridGap: N, selectionPadding: k }), [k, N, o, l, v, A]), [D, R] = z(wi(b, f || w)), { isInsideComponent: X } = (({ disabled: Y, componentRef: Ce }) => {
+  }, []), [W, y] = z(Ae), [N, M] = z(h), [A, Z] = z({ width: e, height: i, scaleRatio: 1 }), [v, m] = z([0, 0]), Q = Ni(() => ({ brushAlgo: o, isBrushShapeDoneOnMouseUp: l, canvasSize: A, canvasOffset: v, gridGap: N, selectionPadding: k }), [k, N, o, l, v, A]), [D, R] = z(wi(b, f || x)), { isInsideComponent: X } = (({ disabled: Y, componentRef: Ce }) => {
     const [it, Ie] = z(!1);
     return B(() => {
       if (!Y) {
@@ -749,7 +749,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   const Re = F((Y = [], Ce = !0) => {
     et.current?.(Y, { clearHistory: Ce, source: "remote" });
   }, []);
-  C.current || (C.current = !0, t && K(t, { clearHistory: !0, source: "remote" }));
+  C.current || typeof Image > "u" || (C.current = !0, t && K(t, { clearHistory: !0, source: "remote" }));
   const tt = F(async (Y) => {
     const Ce = await (async (it) => new Promise((Ie, He) => {
       const We = new FileReader();
@@ -765,10 +765,10 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     typeof L != "string" ? K(L(), { clearHistory: !1, source: "user" }) : L === "defaultShapes" && t !== void 0 ? K(t, { clearHistory: !1, source: "user" }) : Ue([], { clearHistory: !1, source: "user" });
   }, [Ue, K, t, L]);
   B(() => {
-    R(wi(b, f || w));
-  }, [b, f, w]);
+    R(wi(b, f || x));
+  }, [b, f, x]);
   const _t = { canvas: T, editor: H, setEditor: V };
-  return { editorProps: { shapesRef: U, addPictureShape: Me, moveShapes: ne, toggleShapeVisibility: he, toggleShapeLock: ye, canGoBackward: ae, canGoForward: Ve, canClear: $e, selectedShape: re, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, refs: _t, width: e, height: i, canvasSize: A, selectTool: Pe, selectShape: lt, activeTool: W, setActiveTool: y, setAvailableTools: R, isEditMode: P, isDisabled: E, availableTools: D, gridGap: N, setGridGap: M, loadFile: tt, exportPicture: wt, exportData: Ct, clearCanvas: f1, settings: Q, canvas: { canGrow: d, canShrink: c, layersManipulation: r, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: w } }, canvasProps: { shapesRef: U, selectedShape: re, selectionFrame: te, hoveredShape: ie, addShape: fe, setSelectedShape: j, setSelectionFrame: Se, refreshSelectedShapes: Ze, refreshHoveredShape: ke, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, saveShapes: Ne, refs: _t, width: e, height: i, settings: Q, canvasSize: A, setCanvasSize: Z, setCanvasOffset: m, selectShape: lt, activeTool: W, setActiveTool: y, isInsideComponent: X, isEditMode: P, isDisabled: E, canvas: { withSkeleton: x, withFrameSelection: S, canGrow: d, canShrink: c } }, registerEvent: ce, unregisterEvent: $, resetCanvas: Re, getCurrentImage: xt, getCurrentData: J };
+  return { editorProps: { shapesRef: U, addPictureShape: Me, moveShapes: ne, toggleShapeVisibility: he, toggleShapeLock: ye, canGoBackward: ae, canGoForward: Ve, canClear: $e, selectedShape: re, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, refs: _t, width: e, height: i, canvasSize: A, selectTool: Pe, selectShape: lt, activeTool: W, setActiveTool: y, setAvailableTools: R, isEditMode: P, isDisabled: E, availableTools: D, gridGap: N, setGridGap: M, loadFile: tt, exportPicture: wt, exportData: Ct, clearCanvas: f1, settings: Q, canvas: { canGrow: d, canShrink: c, layersManipulation: r, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: x } }, canvasProps: { shapesRef: U, selectedShape: re, selectionFrame: te, hoveredShape: ie, addShape: fe, setSelectedShape: j, setSelectionFrame: Se, refreshSelectedShapes: Ze, refreshHoveredShape: ke, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, saveShapes: Ne, refs: _t, width: e, height: i, settings: Q, canvasSize: A, setCanvasSize: Z, setCanvasOffset: m, selectShape: lt, activeTool: W, setActiveTool: y, isInsideComponent: X, isEditMode: P, isDisabled: E, canvas: { withSkeleton: w, withFrameSelection: S, canGrow: d, canShrink: c } }, registerEvent: ce, unregisterEvent: $, resetCanvas: Re, getCurrentImage: xt, getCurrentData: J };
 }, Y1 = (e, i, t, n, s, a, r) => {
   let o = !1;
   if (s) {
@@ -785,7 +785,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   }
   const l = i.find((h) => h.id === s?.id ? !!o : !!c1(e, h, t, n));
   return l ? { shape: l, mode: { mode: "translate", cursorStartPosition: t, originalShape: l } } : { shape: void 0, mode: { mode: r ? "selectionFrame" : "default" } };
-}, j1 = ({ disabled: e = !1, addShape: i, drawCanvasRef: t, setActiveTool: n, refreshHoveredShape: s, shapes: a, selectionMode: r, activeTool: o, isInsideComponent: l, setCanvasOffset: h, selectedShape: d, selectionCanvasRef: c, canvasOffsetStartPosition: u, refreshSelectedShapes: g, setSelectedShape: f, setSelectionFrame: w, setCanvasOffsetStartPosition: x, updateSingleShape: S, saveShapes: L, setSelectionMode: b, settings: k, isShiftPressed: P, withFrameSelection: E }) => {
+}, j1 = ({ disabled: e = !1, addShape: i, drawCanvasRef: t, setActiveTool: n, refreshHoveredShape: s, shapes: a, selectionMode: r, activeTool: o, isInsideComponent: l, setCanvasOffset: h, selectedShape: d, selectionCanvasRef: c, canvasOffsetStartPosition: u, refreshSelectedShapes: g, setSelectedShape: f, setSelectionFrame: x, setCanvasOffsetStartPosition: w, updateSingleShape: S, saveShapes: L, setSelectionMode: b, settings: k, isShiftPressed: P, withFrameSelection: E }) => {
   const [H, T] = z({ mode: "default" }), { registerDoubleClickEvent: C, unRegisterDoubleClickEvent: V } = (() => {
     const y = q(void 0), N = q(void 0), M = (A) => {
       const Z = (/* @__PURE__ */ new Date()).getTime();
@@ -819,12 +819,12 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   const { isBrushShapeDoneOnMouseUp: W } = k;
   return B(() => {
     const y = () => {
-      r.mode !== "textedition" && r.mode !== "default" && (r.mode === "brush" && W && f(void 0), b({ mode: "default" }), w(void 0), L());
+      r.mode !== "textedition" && r.mode !== "default" && (r.mode === "brush" && W && f(void 0), b({ mode: "default" }), x(void 0), L());
     };
     return l && (document.addEventListener("mouseup", y), document.addEventListener("touchend", y)), () => {
       l && (document.removeEventListener("mouseup", y), document.removeEventListener("touchend", y));
     };
-  }, [l, r, W, L, w, b, f]), B(() => {
+  }, [l, r, W, L, x, b, f]), B(() => {
     const y = c.current;
     if (!y) return;
     const N = y.getContext("2d");
@@ -834,8 +834,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       const Z = Pt(A, c.current, k);
       if (o.type === "selection") {
         const { shape: v, mode: m } = Y1(N, a, Z, k, d, hi(A), E);
-        f(v), b(m), m.mode === "selectionFrame" && w([[Z[0], Z[1]], [Z[0], Z[1]]]);
-      } else if (o.type === "move") x(Z);
+        f(v), b(m), m.mode === "selectionFrame" && x([[Z[0], Z[1]], [Z[0], Z[1]]]);
+      } else if (o.type === "move") w(Z);
       else if (n1.some((v) => v === o.type)) {
         const v = t.current?.getContext("2d");
         if (!v) return;
@@ -861,7 +861,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     return y.addEventListener("mousedown", M, { passive: !1 }), y.addEventListener("touchstart", M, { passive: !1 }), () => {
       y.removeEventListener("mousedown", M), y.removeEventListener("touchstart", M);
     };
-  }, [e, c, t, d, o, x, a, S, i, n, f, b, w, k, E]), B(() => {
+  }, [e, c, t, d, o, w, a, S, i, n, f, b, x, k, E]), B(() => {
     const y = c.current;
     if (y)
       return l ? (C(y, (N) => {
@@ -909,16 +909,16 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   e.clearRect(0, 0, a, r), l1(e), t.gridGap && ((o, l, h, d) => {
     const { gridGap: c, canvasOffset: u, canvasSize: { scaleRatio: g } } = d;
     o.strokeStyle = "rgb(220,220,220)", o.lineWidth = 1, o.save(), o.scale(g, g), o.beginPath();
-    const f = -u[0] % c, w = -u[1] % c, x = Math.ceil(l / g / c), S = Math.ceil(h / g / c);
-    for (let L = 0; L < x; L++) o.moveTo(f + (L + 1) * c, w), o.lineTo(f + (L + 1) * c, w + h / g);
-    for (let L = 0; L < S; L++) o.moveTo(f, w + (L + 1) * c), o.lineTo(f + l / g, w + (L + 1) * c);
+    const f = -u[0] % c, x = -u[1] % c, w = Math.ceil(l / g / c), S = Math.ceil(h / g / c);
+    for (let L = 0; L < w; L++) o.moveTo(f + (L + 1) * c, x), o.lineTo(f + (L + 1) * c, x + h / g);
+    for (let L = 0; L < S; L++) o.moveTo(f, x + (L + 1) * c), o.lineTo(f + l / g, x + (L + 1) * c);
     o.stroke(), o.restore();
   })(e, a, r, t);
   for (let o = n.length - 1; o >= 0; o--) i.mode === "textedition" && n[o] === s || p1(e, n[o], t);
-}, J1 = Fi.forwardRef(({ canGrow: e, disabled: i = !1, canvasSize: t, shapes: n, addShape: s, updateSingleShape: a, selectedShape: r, setSelectedShape: o, setSelectionFrame: l, hoveredShape: h, selectionFrame: d, refreshHoveredShape: c, refreshSelectedShapes: u, saveShapes: g, activeTool: f, setActiveTool: w, canvasOffsetStartPosition: x, setCanvasOffsetStartPosition: S, setCanvasOffset: L, isInsideComponent: b, selectionMode: k, setSelectionMode: P, selectionWidth: E, selectionColor: H, settings: T, isEditMode: C, isShiftPressed: V, withFrameSelection: W, withSkeleton: y }, N) => {
+}, J1 = Fi.forwardRef(({ canGrow: e, disabled: i = !1, canvasSize: t, shapes: n, addShape: s, updateSingleShape: a, selectedShape: r, setSelectedShape: o, setSelectionFrame: l, hoveredShape: h, selectionFrame: d, refreshHoveredShape: c, refreshSelectedShapes: u, saveShapes: g, activeTool: f, setActiveTool: x, canvasOffsetStartPosition: w, setCanvasOffsetStartPosition: S, setCanvasOffset: L, isInsideComponent: b, selectionMode: k, setSelectionMode: P, selectionWidth: E, selectionColor: H, settings: T, isEditMode: C, isShiftPressed: V, withFrameSelection: W, withSkeleton: y }, N) => {
   const M = q(null), A = q(null);
   Q1(N, () => M.current);
-  const { hoverMode: Z } = j1({ disabled: i, addShape: s, drawCanvasRef: M, setActiveTool: w, shapes: n, selectionMode: k, activeTool: f, isInsideComponent: b, setCanvasOffset: L, selectedShape: r, selectionCanvasRef: A, canvasOffsetStartPosition: x, setSelectedShape: o, setSelectionFrame: l, refreshHoveredShape: c, refreshSelectedShapes: u, setCanvasOffsetStartPosition: S, updateSingleShape: a, saveShapes: g, setSelectionMode: P, isShiftPressed: V, withFrameSelection: W, settings: T }), v = F((m) => {
+  const { hoverMode: Z } = j1({ disabled: i, addShape: s, drawCanvasRef: M, setActiveTool: x, shapes: n, selectionMode: k, activeTool: f, isInsideComponent: b, setCanvasOffset: L, selectedShape: r, selectionCanvasRef: A, canvasOffsetStartPosition: w, setSelectedShape: o, setSelectionFrame: l, refreshHoveredShape: c, refreshSelectedShapes: u, setCanvasOffsetStartPosition: S, updateSingleShape: a, saveShapes: g, setSelectionMode: P, isShiftPressed: V, withFrameSelection: W, settings: T }), v = F((m) => {
     if (r?.type !== "text") return;
     const Q = M.current?.getContext("2d");
     if (!Q) return;
@@ -941,9 +941,9 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       i && (t || (S.preventDefault(), u({ ...i })));
     }, f = (S) => {
       c && (t || (S.preventDefault(), r(((L, b) => ({ ...Nt([20, 20], L, [0, 0], b), id: oe(`${L.type}_`) }))(c, n))));
-    }, w = (S) => {
-      S.key === Vi && d(!1);
     }, x = (S) => {
+      S.key === Vi && d(!1);
+    }, w = (S) => {
       if (S.metaKey || S.ctrlKey) {
         if (S.key === an || S.key === nn) return S.preventDefault(), S.stopPropagation(), void l();
         if (S.key === on || S.key === sn) return S.preventDefault(), S.stopPropagation(), void h();
@@ -965,18 +965,18 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
           S.preventDefault(), S.stopPropagation(), a(i);
       }
     };
-    if (e) return document.addEventListener("keydown", x), document.addEventListener("keyup", w), document.addEventListener(Pi, g), document.addEventListener(Hi, f), () => {
-      document.removeEventListener("keydown", x), document.removeEventListener("keyup", w), document.removeEventListener(Pi, g), document.removeEventListener(Hi, f);
+    if (e) return document.addEventListener("keydown", w), document.addEventListener("keyup", x), document.addEventListener(Pi, g), document.addEventListener(Hi, f), () => {
+      document.removeEventListener("keydown", w), document.removeEventListener("keyup", x), document.removeEventListener(Pi, g), document.removeEventListener(Hi, f);
     };
   }, [e, c, t, i, n, o, a, s, r, l, h, d]), {};
 }, An = ({ options: e, className: i, style: t, canvasProps: n }) => {
-  const { shapesRef: s, selectedShape: a, selectionFrame: r, hoveredShape: o, addShape: l, setSelectedShape: h, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: f, backwardShape: w, forwardShape: x, saveShapes: S, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: H, setCanvasOffset: T, selectShape: C, activeTool: V, setActiveTool: W, isInsideComponent: y, isEditMode: N, isDisabled: M, canvas: { withSkeleton: A, withFrameSelection: Z, canGrow: v, canShrink: m } } = n, { canvasBackgroundColor: Q, canvasSelectionColor: D, canvasSelectionWidth: R } = { ...C1, ...e }, X = q(null), [ce, $] = z(void 0), [U, re] = z({ mode: "default" }), [te, ie] = z(!1), fe = F((ne) => {
+  const { shapesRef: s, selectedShape: a, selectionFrame: r, hoveredShape: o, addShape: l, setSelectedShape: h, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: f, backwardShape: x, forwardShape: w, saveShapes: S, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: H, setCanvasOffset: T, selectShape: C, activeTool: V, setActiveTool: W, isInsideComponent: y, isEditMode: N, isDisabled: M, canvas: { withSkeleton: A, withFrameSelection: Z, canGrow: v, canShrink: m } } = n, { canvasBackgroundColor: Q, canvasSelectionColor: D, canvasSelectionWidth: R } = { ...C1, ...e }, X = q(null), [ce, $] = z(void 0), [U, re] = z({ mode: "default" }), [te, ie] = z(!1), fe = F((ne) => {
     l(ne), C(ne);
   }, [l, C]), Me = F((ne) => {
     const j = ne / b;
     H({ width: ne, height: k * j, scaleRatio: j });
   }, [b, k, H]);
-  return rn({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: f, backwardShape: w, forwardShape: x, setShiftPressed: ie }), (({ onResized: ne, element: j }) => {
+  return rn({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: f, backwardShape: x, forwardShape: w, setShiftPressed: ie }), (({ onResized: ne, element: j }) => {
     B(() => {
       const Se = j.current;
       if (!Se) return;
@@ -1015,8 +1015,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   }, [t]), p("div", { className: "react-paint-editor-snackbar", "data-is-shown": +n, "data-type": e, style: { "--react-paint-editor-panel-transition-duration": "500ms" }, children: i });
 }, pn = ({ snackbarList: e }) => p("div", { className: "react-paint-editor-snackbar-container", style: { "--react-paint-editor-snackbar-zindex": b1 }, children: e.map((i) => p(hn, { ...i }, i.id)) }), G = Fi.forwardRef((e, i) => {
   if (e.type === "file" || e.type === "color") {
-    const { hidden: d = !1, disabled: c = !1, selected: u = !1, icon: g, children: f, className: w = "", title: x, onClick: S, ...L } = e;
-    return I("label", { className: `react-paint-editor-button ${w}`, title: x, onClick: S, "data-disabled": +c, "data-selected": +u, "data-hidden": +d, children: [p("input", { ref: i, disabled: c, ...L }), I("span", { className: "react-paint-editor-button-content", children: [f && p("span", { className: "react-paint-editor-button-children", children: f }), g && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: g } })] })] });
+    const { hidden: d = !1, disabled: c = !1, selected: u = !1, icon: g, children: f, className: x = "", title: w, onClick: S, ...L } = e;
+    return I("label", { className: `react-paint-editor-button ${x}`, title: w, onClick: S, "data-disabled": +c, "data-selected": +u, "data-hidden": +d, children: [p("input", { ref: i, disabled: c, ...L }), I("span", { className: "react-paint-editor-button-content", children: [f && p("span", { className: "react-paint-editor-button-children", children: f }), g && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: g } })] })] });
   }
   const { hidden: t = !1, disabled: n = !1, selected: s = !1, icon: a, children: r, type: o = "button", className: l = "", ...h } = e;
   return p("button", { className: `react-paint-editor-button ${l}`, ref: i, disabled: n, "data-disabled": +n, "data-selected": +s, "data-hidden": +t, type: o, ...h, children: I("span", { className: "react-paint-editor-button-content", children: [r && p("span", { className: "react-paint-editor-button-children", children: r }), a && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: a } })] }) });
@@ -1044,26 +1044,26 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       return "";
   }
 }, gn = ({ disabled: e = !1, shape: i, selected: t, layoutDragging: n, toggleShapeVisibility: s, toggleShapeLock: a, setLayoutDragging: r, handleRemove: o, handleSelect: l, onMoveShapes: h }) => {
-  const d = q(null), { isOver: c } = (({ disabled: u = !1, ref: g, shape: f, layoutDragging: w, setLayoutDragging: x, handleSelect: S, onMoveShapes: L }) => {
+  const d = q(null), { isOver: c } = (({ disabled: u = !1, ref: g, shape: f, layoutDragging: x, setLayoutDragging: w, handleSelect: S, onMoveShapes: L }) => {
     const [b, k] = z(!1);
     return B(() => {
-      w || k(!1);
-    }, [w]), B(() => {
+      x || k(!1);
+    }, [x]), B(() => {
       const P = g.current;
       if (!P) return;
       const E = () => {
-        x(void 0);
+        w(void 0);
       }, H = (y) => (y.preventDefault && y.preventDefault(), !1), T = (y) => {
-        S(f), y.dataTransfer && (y.dataTransfer.effectAllowed = "move", y.dataTransfer.setData("draggableShapeId", f.id), x(f.id));
+        S(f), y.dataTransfer && (y.dataTransfer.effectAllowed = "move", y.dataTransfer.setData("draggableShapeId", f.id), w(f.id));
       }, C = () => {
-        w !== f.id && k(!0);
+        x !== f.id && k(!0);
       }, V = () => {
         k(!1);
       }, W = (y) => (y.stopPropagation(), y.dataTransfer && L(y.dataTransfer.getData("draggableShapeId"), f.id), !1);
       return u || (P.addEventListener("dragstart", T), P.addEventListener("dragend", E), P.addEventListener("dragover", H), P.addEventListener("dragenter", C), P.addEventListener("dragleave", V), P.addEventListener("drop", W)), () => {
         u || (P.removeEventListener("dragstart", T), P.removeEventListener("dragend", E), P.removeEventListener("dragover", H), P.removeEventListener("dragenter", C), P.removeEventListener("dragleave", V), P.removeEventListener("drop", W));
       };
-    }, [u, g, f, x, S, L, w]), { isOver: b };
+    }, [u, g, f, w, S, L, x]), { isOver: b };
   })({ disabled: e, ref: d, shape: i, layoutDragging: n, setLayoutDragging: r, handleSelect: l, onMoveShapes: h });
   return I("div", { className: "react-paint-editor-layout", "data-disabled": +e, draggable: !e, "data-is-dragging": +(n === i.id), "data-is-over": +c, onClick: (u) => {
     e || (u.preventDefault(), u.stopPropagation(), l(i));
@@ -1101,13 +1101,13 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   B(() => () => {
     f.current && clearTimeout(f.current);
   }, []);
-  const w = e === g;
-  return o === l ? null : I(pe, { children: [p(G, { selected: w, title: t, disabled: s, icon: n, onClick: () => {
-    i((x) => x === g ? void 0 : g);
-  } }), w && p(Ke, { title: t, alignment: "left", fitContainer: !0, children: p("div", { children: I("label", { className: "react-paint-editor-rangefield", children: [p("input", { type: "range", min: o, max: l, step: h, value: r, onChange: (x) => {
-    const S = +x.target.value;
-    c(a, Number.isNaN(S) ? x.target.value : S, !1), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
-      c(a, Number.isNaN(S) ? x.target.value : S, !0);
+  const x = e === g;
+  return o === l ? null : I(pe, { children: [p(G, { selected: x, title: t, disabled: s, icon: n, onClick: () => {
+    i((w) => w === g ? void 0 : g);
+  } }), x && p(Ke, { title: t, alignment: "left", fitContainer: !0, children: p("div", { children: I("label", { className: "react-paint-editor-rangefield", children: [p("input", { type: "range", min: o, max: l, step: h, value: r, onChange: (w) => {
+    const S = +w.target.value;
+    c(a, Number.isNaN(S) ? w.target.value : S, !1), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+      c(a, Number.isNaN(S) ? w.target.value : S, !0);
     }, 1e3);
   } }), I("span", { children: [u, d] })] }) }) })] });
 }, Ei = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, min: n, max: s, step: a, value: r, valueChanged: o }) => n === s ? null : p(at, { selectedSettings: e, setSelectedSettings: i, icon: Wt, title: "Nombre de points", disabled: t, field: "pointsCount", min: n, max: s, step: a, unity: "", value: r, valueChanged: o }), ht = ({ setSelectedSettings: e, disabled: i = !1, field: t, icon: n, values: s, value: a = !1, valueChanged: r }) => {
@@ -1116,8 +1116,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     e((l) => l === o ? void 0 : o), r(t, !a);
   }, selected: a, disabled: i, icon: n });
 }, At = ({ activeTool: e, selectedShape: i, selectedShapeTool: t, disabled: n, selectedSettings: s, setSelectedSettings: a, handleShapeStyleChange: r, handlePolygonLinesCount: o, handleShapeFontFamilyChange: l }) => i ? p(pe, { children: t && I(pe, { children: ["strokeColor" in t.settings && !t.settings.strokeColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur du trait", mode: "stroke", disabled: n, field: "strokeColor", value: i.style?.strokeColor, valueChanged: r, values: t.settings.strokeColor.values }), "fillColor" in t.settings && !t.settings.fillColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur de fond", disabled: n, field: "fillColor", value: i.style?.fillColor, valueChanged: r, values: t.settings.fillColor.values }), "lineWidth" in t.settings && !t.settings.lineWidth.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Epaisseur du trait", icon: ei, disabled: n, field: "lineWidth", value: i.style?.lineWidth, valueChanged: r, unity: "px", min: t.settings.lineWidth.min, max: t.settings.lineWidth.max, step: t.settings.lineWidth.step }), "lineDash" in t.settings && !t.settings.lineDash.hidden && p(Zi, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: i.style?.lineDash, valueChanged: r, values: t.settings.lineDash.values }), "lineArrow" in t.settings && !t.settings.lineArrow.hidden && p(Ai, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: i.style?.lineArrow, valueChanged: r, values: t.settings.lineArrow.values }), "pointsCount" in t.settings && !t.settings.pointsCount.hidden && p(Ei, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: o, min: t.settings.pointsCount.min, max: t.settings.pointsCount.max, step: t.settings.pointsCount.step, value: i.style?.pointsCount }), "fontFamily" in t.settings && !t.settings.fontFamily.hidden && p(Ti, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: l, values: t.settings.fontFamily.values, defaultValue: i.style?.fontFamily }), "fontBold" in t.settings && !t.settings.fontBold.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontBold", icon: Jt, valueChanged: l, values: t.settings.fontBold.values, value: i.style?.fontBold }), "fontItalic" in t.settings && !t.settings.fontItalic.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontItalic", icon: Kt, valueChanged: l, values: t.settings.fontItalic.values, value: i.style?.fontItalic }), "opacity" in t.settings && !t.settings.opacity.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Opacité", icon: qt, min: t.settings.opacity.min, max: t.settings.opacity.max, step: t.settings.opacity.step, unity: "%", disabled: n, field: "opacity", value: i.style?.opacity ?? 100, valueChanged: r })] }) }) : "settings" in e ? I(pe, { children: ["strokeColor" in e.settings && !e.settings.strokeColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur du trait", mode: "stroke", disabled: n, field: "strokeColor", value: e.settings.strokeColor.default, valueChanged: r, values: e.settings.strokeColor.values }), "fillColor" in e.settings && !e.settings.fillColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur de fond", disabled: n, field: "fillColor", value: e.settings.fillColor.default, valueChanged: r, values: e.settings.fillColor.values }), "lineWidth" in e.settings && !e.settings.lineWidth.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Epaisseur du trait", disabled: n, field: "lineWidth", icon: ei, value: e.settings.lineWidth.default, valueChanged: r, unity: "px", min: e.settings.lineWidth.min, max: e.settings.lineWidth.max, step: e.settings.lineWidth.step }), "lineDash" in e.settings && !e.settings.lineDash.hidden && p(Zi, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: e.settings.lineDash.default, valueChanged: r, values: e.settings.lineDash.values }), "lineArrow" in e.settings && !e.settings.lineArrow.hidden && p(Ai, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: e.settings.lineArrow.default, valueChanged: r, values: e.settings.lineArrow.values }), "pointsCount" in e.settings && !e.settings.pointsCount.hidden && p(Ei, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: o, min: e.settings.pointsCount.min, max: e.settings.pointsCount.max, step: e.settings.pointsCount.step, value: e.settings.pointsCount.default }), "fontFamily" in e.settings && !e.settings.fontFamily.hidden && p(Ti, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: l, values: e.settings.fontFamily.values, defaultValue: e.settings.fontFamily.default }), "fontBold" in e.settings && !e.settings.fontBold.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontBold", icon: Jt, valueChanged: l, values: e.settings.fontBold.values, value: e.settings.fontBold.default }), "fontItalic" in e.settings && !e.settings.fontItalic.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontItalic", icon: Kt, valueChanged: l, values: e.settings.fontItalic.values, value: e.settings.fontItalic.default }), "opacity" in e.settings && !e.settings.opacity.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Opacité", icon: qt, min: e.settings.opacity.min, max: e.settings.opacity.max, step: e.settings.opacity.step, unity: "%", disabled: n, field: "opacity", value: e.settings.opacity.default, valueChanged: r })] }) : null, bn = ({ width: e, disabled: i = !1, availableTools: t, updateToolSettings: n, layersManipulation: s, toggleLayoutPanel: a, activeTool: r, selectedShape: o, canvas: l, settings: h, updateShape: d, removeShape: c }) => {
-  const [u, g] = z(void 0), [f, w] = z(!1), x = () => {
-    w((H) => !H);
+  const [u, g] = z(void 0), [f, x] = z(!1), w = () => {
+    x((H) => !H);
   }, S = o ? t.find((H) => H.id === o.toolId) || t.find((H) => H.type === o.type) : void 0, L = (S ? Object.keys(S.settings).length + 1 : "settings" in r ? Object.keys(r.settings).length : 0) + (s ? 1 : 0), b = e < 40 * L, k = (H, T, C = !0) => {
     o ? (d(ot(le(["style", H], T, o), h), C), S && n(S.id, H, T)) : n(r.id, H, T);
   }, P = (H, T) => {
@@ -1152,7 +1152,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       })(o, T, h), !0), S && n(S.id, H, T);
     } else n(r.id, H, T);
   };
-  return I(pe, { children: [I("div", { className: "react-paint-editor-settings-bar", children: [I("div", { className: "react-paint-editor-settings-shrinkable", children: [b && L > 2 && p(G, { disabled: i, onClick: x, title: "Toggle settings", icon: '<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>' }), o ? p(pe, { children: S && I(pe, { children: [!b && p(At, { activeTool: r, selectedShape: o, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }), r.type === "selection" && p(fn, { disabled: i, selectedShape: o, removeShape: c })] }) }) : !b && p(At, { activeTool: r, selectedShape: o, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P })] }), p("div", { className: "react-paint-editor-settings-separator" }), s && p(yn, { disabled: i, toggleLayoutPanel: a })] }), f && p(Yt, { className: "react-paint-editor-settings-modal", onClose: x, position: "bottom", children: p(At, { activeTool: r, selectedShape: o, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }) })] });
+  return I(pe, { children: [I("div", { className: "react-paint-editor-settings-bar", children: [I("div", { className: "react-paint-editor-settings-shrinkable", children: [b && L > 2 && p(G, { disabled: i, onClick: w, title: "Toggle settings", icon: '<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>' }), o ? p(pe, { children: S && I(pe, { children: [!b && p(At, { activeTool: r, selectedShape: o, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }), r.type === "selection" && p(fn, { disabled: i, selectedShape: o, removeShape: c })] }) }) : !b && p(At, { activeTool: r, selectedShape: o, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P })] }), p("div", { className: "react-paint-editor-settings-separator" }), s && p(yn, { disabled: i, toggleLayoutPanel: a })] }), f && p(Yt, { className: "react-paint-editor-settings-modal", onClose: w, position: "bottom", children: p(At, { activeTool: r, selectedShape: o, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }) })] });
 }, Di = ({ disabled: e = !1, withText: i = !1, loadFile: t, type: n, img: s, accept: a }) => {
   const r = q(null);
   return p(G, { ref: r, type: "file", onClick: (o) => {
@@ -1163,7 +1163,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   }, accept: a, title: n.label ?? n.type, icon: s, disabled: e, children: i ? n.label : void 0 });
 }, ge = ({ type: e, img: i, isActive: t, withText: n = !1, disabled: s = !1, setActive: a }) => p(G, { disabled: s, selected: t, onClick: () => {
   a(e);
-}, title: e.label ?? e.type, icon: i, children: n ? e.label : void 0 }), Cn = ({ activeTool: e, withActionsInMenu: i, hasActionToUndo: t = !1, hasActionToRedo: n = !1, hasActionToClear: s = !1, undoAction: a, redoAction: r, clearCanvas: o, alignment: l, group: h, vertical: d = !1, disabled: c = !1, withLoadAndSave: u, withExport: g, addPicture: f, loadFile: w, togglePictureUrlModal: x, saveFile: S, exportCanvasInFile: L, withUploadPicture: b, withUrlPicture: k }) => {
+}, title: e.label ?? e.type, icon: i, children: n ? e.label : void 0 }), Cn = ({ activeTool: e, withActionsInMenu: i, hasActionToUndo: t = !1, hasActionToRedo: n = !1, hasActionToClear: s = !1, undoAction: a, redoAction: r, clearCanvas: o, alignment: l, group: h, vertical: d = !1, disabled: c = !1, withLoadAndSave: u, withExport: g, addPicture: f, loadFile: x, togglePictureUrlModal: w, saveFile: S, exportCanvasInFile: L, withUploadPicture: b, withUrlPicture: k }) => {
   const [P, E] = z(!1), [, H] = Ri(), T = h?.tools?.some((V) => V === e.type), C = (T ? e.icon : h.img) ?? h.title;
   return B(() => {
     if (!P) return;
@@ -1179,8 +1179,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     });
   }, icon: C }), P && p(Ke, { alignment: l, position: "top", children: I("div", { className: "react-paint-editor-toolbox-panel-content", "data-vertical": +d, children: [i && I(pe, { children: [p(ge, { withText: !0, type: Ge, disabled: c || !t, img: Ge.icon, isActive: e.id === Ge.id, setActive: a }), p(ge, { withText: !0, type: Xe, disabled: c || !n, img: Xe.icon, isActive: e.id === Xe.id, setActive: r }), p(ge, { withText: !0, type: Ye, disabled: c || !s, img: Ye.icon, isActive: e.id === Ye.id, setActive: o }), (b || k || u) && p("hr", {})] }), b && p(Di, { withText: !0, type: si, disabled: c, loadFile: async (V) => {
     E(!1), await f(V);
-  }, img: si.icon, accept: "image/png, image/gif, image/jpeg, image/svg+xml" }), k && p(G, { disabled: c, selected: !1, onClick: x, title: "Add picture from URL", icon: '<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>', children: "Add picture from URL" }), (b || k) && u && p("hr", {}), u && I(pe, { children: [p(Di, { withText: !0, type: ai, disabled: c, loadFile: (V) => {
-    E(!1), w(V);
+  }, img: si.icon, accept: "image/png, image/gif, image/jpeg, image/svg+xml" }), k && p(G, { disabled: c, selected: !1, onClick: w, title: "Add picture from URL", icon: '<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>', children: "Add picture from URL" }), (b || k) && u && p("hr", {}), u && I(pe, { children: [p(Di, { withText: !0, type: ai, disabled: c, loadFile: (V) => {
+    E(!1), x(V);
   }, img: ai.icon, accept: "application/JSON" }), p(ge, { withText: !0, disabled: c, type: Lt, img: Lt.icon, isActive: e.id === Lt.id, setActive: S })] }), g && p(ge, { withText: !0, disabled: c, type: kt, img: kt.icon, isActive: e.id === kt.id, setActive: L })] }) })] }) : null;
 }, wn = ({ togglePictureUrlModal: e, addPicture: i }) => {
   const t = q(null);
@@ -1197,8 +1197,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   };
   if (B(() => {
     if (!r) return;
-    const f = (w) => {
-      !o1(w, a.current) && o(!1);
+    const f = (x) => {
+      !o1(x, a.current) && o(!1);
     };
     return document.addEventListener("mousedown", f, { passive: !1 }), document.addEventListener("touchstart", f, { passive: !1 }), () => {
       document.removeEventListener("mousedown", f), document.removeEventListener("touchstart", f);
@@ -1211,8 +1211,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     h ? s(h.id) : t.toolsType?.[0] && c(t.toolsType[0]), l(() => {
       o(!0);
     });
-  }, icon: g }), r && p(Ke, { alignment: i, position: "top", children: p("div", { className: "react-paint-editor-toolbargroup-panel-content", "data-vertical": +t.vertical, ref: a, children: t.toolsType.map((f, w) => p(ge, { disabled: n, type: f, img: f.icon, isActive: e.id === f.id, setActive: c }, f.id)) }) })] });
-}, Mn = [{ title: "brush", toolsType: ["brush"], vertical: !1 }, { title: "lines", toolsType: ["line", "curve", "polygon"], vertical: !1 }, { title: "shapes", toolsType: ["rect", "square", "circle", "ellipse"], vertical: !1 }, "text"], kn = ({ width: e, disabled: i = !1, activeTool: t, hasActionToUndo: n = !1, hasActionToRedo: s = !1, hasActionToClear: a = !1, withLoadAndSave: r, withExport: o, clearCanvas: l, setActiveTool: h, undoAction: d, redoAction: c, addPicture: u, loadFile: g, saveFile: f, exportCanvasInFile: w, availableTools: x, withUrlPicture: S, withUploadPicture: L }) => {
+  }, icon: g }), r && p(Ke, { alignment: i, position: "top", children: p("div", { className: "react-paint-editor-toolbargroup-panel-content", "data-vertical": +t.vertical, ref: a, children: t.toolsType.map((f, x) => p(ge, { disabled: n, type: f, img: f.icon, isActive: e.id === f.id, setActive: c }, f.id)) }) })] });
+}, Mn = [{ title: "brush", toolsType: ["brush"], vertical: !1 }, { title: "lines", toolsType: ["line", "curve", "polygon"], vertical: !1 }, { title: "shapes", toolsType: ["rect", "square", "circle", "ellipse"], vertical: !1 }, "text"], kn = ({ width: e, disabled: i = !1, activeTool: t, hasActionToUndo: n = !1, hasActionToRedo: s = !1, hasActionToClear: a = !1, withLoadAndSave: r, withExport: o, clearCanvas: l, setActiveTool: h, undoAction: d, redoAction: c, addPicture: u, loadFile: g, saveFile: f, exportCanvasInFile: x, availableTools: w, withUrlPicture: S, withUploadPicture: L }) => {
   const b = ((M, A) => {
     const Z = A.flatMap((v) => {
       if (typeof v != "object") return M.filter((Q) => Q.type === v);
@@ -1220,16 +1220,16 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
       return m ? { ...v, toolsType: m } : null;
     });
     return $t(Z);
-  })(x, Mn), k = e < 40 * (5 + b.length), P = e < 40 * (2 + b.length), [E, H] = z(!1), [T, C] = z(!1), V = () => {
+  })(w, Mn), k = e < 40 * (5 + b.length), P = e < 40 * (2 + b.length), [E, H] = z(!1), [T, C] = z(!1), V = () => {
     H((M) => !M);
   }, W = (M) => {
     h(M), H(!1);
   }, y = (M) => {
-    W(x.find((A) => A.id === M) ?? t);
-  }, N = x.find((M) => M.type === t.type) !== void 0;
+    W(w.find((A) => A.id === M) ?? t);
+  }, N = w.find((M) => M.type === t.type) !== void 0;
   return I(pe, { children: [I("div", { className: "react-paint-editor-toolbar-toolbox", children: [I("div", { className: "react-paint-editor-toolbar-shrinkable", children: [p(ge, { type: Ae, disabled: i, img: Ae.icon, isActive: t.id === Ae.id, setActive: W }), P ? p(G, { disabled: i, onClick: V, title: "Toggle tools", icon: '<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>', selected: N }) : b.map((M, A) => p(xn, { disabled: i, activeTool: t, group: M, setActiveToolFromId: y }, "id" in M ? M.id : M.title))] }), !k && I(pe, { children: [p(ge, { type: Ge, disabled: i || !n, img: Ge.icon, isActive: t.id === Ge.id, setActive: d }), p(ge, { type: Xe, disabled: i || !s, img: Xe.icon, isActive: t.id === Xe.id, setActive: c }), p(ge, { type: Ye, disabled: i || !a, img: Ye.icon, isActive: t.id === Ye.id, setActive: l })] }), p(Cn, { withActionsInMenu: k, disabled: i, vertical: !0, alignment: "right", group: { title: "Menu", img: '<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>' }, activeTool: t, addPicture: u, loadFile: g, saveFile: f, togglePictureUrlModal: () => {
     C(!0);
-  }, exportCanvasInFile: w, withUploadPicture: L, withUrlPicture: S, withLoadAndSave: r, withExport: o, hasActionToUndo: n, hasActionToRedo: s, hasActionToClear: a, undoAction: d, redoAction: c, clearCanvas: l })] }), E && p(Yt, { className: "react-paint-editor-toolbar-modal", onClose: V, children: x.map((M, A) => M.type === "picture" ? null : p(ge, { disabled: i, type: M, img: M.icon, withText: !1, isActive: t.id === M.id, setActive: W }, M.id)) }), T && p(wn, { togglePictureUrlModal: () => {
+  }, exportCanvasInFile: x, withUploadPicture: L, withUrlPicture: S, withLoadAndSave: r, withExport: o, hasActionToUndo: n, hasActionToRedo: s, hasActionToClear: a, undoAction: d, redoAction: c, clearCanvas: l })] }), E && p(Yt, { className: "react-paint-editor-toolbar-modal", onClose: V, children: w.map((M, A) => M.type === "picture" ? null : p(ge, { disabled: i, type: M, img: M.icon, withText: !1, isActive: t.id === M.id, setActive: W }, M.id)) }), T && p(wn, { togglePictureUrlModal: () => {
     C((M) => !M);
   }, addPicture: u })] });
 }, pt = { none: 0, small: 10, medium: 20, large: 40 }, Ln = { toolbarBackgroundColor: "white", dividerColor: "#36418129", fontRadius: 8, fontDisabledColor: "#3641812b", fontDisabledBackgroundColor: "transparent", fontColor: "#364181", fontBackgroundColor: "transparent", fontSelectedColor: "white", fontSelectedBackgroundColor: "#364181", fontHoverColor: "#364181", fontHoverBackgroundColor: "#afd8d8" }, Vn = () => {
@@ -1244,11 +1244,11 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
     }, s)];
   } };
 }, Zn = ({ editorProps: e, className: i, style: t, options: n, children: s }) => {
-  const { shapesRef: a, addPictureShape: r, moveShapes: o, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: f, updateShape: w, backwardShape: x, forwardShape: S, refs: L, width: b, height: k, canvasSize: P, selectTool: E, selectShape: H, activeTool: T, setActiveTool: C, setAvailableTools: V, isEditMode: W, isDisabled: y, availableTools: N, gridGap: M, setGridGap: A, loadFile: Z, exportPicture: v, exportData: m, clearCanvas: Q, settings: D, canvas: { canGrow: R, layersManipulation: X, withExport: ce, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: re } } = e, { toolbarBackgroundColor: te, dividerColor: ie, fontRadius: fe, fontDisabledColor: Me, fontDisabledBackgroundColor: ne, fontColor: j, fontBackgroundColor: Se, fontSelectedColor: Ze, fontSelectedBackgroundColor: ke, fontHoverColor: me, fontHoverBackgroundColor: be } = { ...Ln, ...n }, [Ee, se] = z(!1), [Le, Ne] = z(!1), he = M >= pt.large ? "large" : M >= pt.medium ? "medium" : M >= pt.small ? "small" : "none", { snackbarList: ye, addSnackbar: ae } = Vn(), Ve = F((J, K, et) => {
+  const { shapesRef: a, addPictureShape: r, moveShapes: o, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: f, updateShape: x, backwardShape: w, forwardShape: S, refs: L, width: b, height: k, canvasSize: P, selectTool: E, selectShape: H, activeTool: T, setActiveTool: C, setAvailableTools: V, isEditMode: W, isDisabled: y, availableTools: N, gridGap: M, setGridGap: A, loadFile: Z, exportPicture: v, exportData: m, clearCanvas: Q, settings: D, canvas: { canGrow: R, layersManipulation: X, withExport: ce, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: re } } = e, { toolbarBackgroundColor: te, dividerColor: ie, fontRadius: fe, fontDisabledColor: Me, fontDisabledBackgroundColor: ne, fontColor: j, fontBackgroundColor: Se, fontSelectedColor: Ze, fontSelectedBackgroundColor: ke, fontHoverColor: me, fontHoverBackgroundColor: be } = { ...Ln, ...n }, [Ee, se] = z(!1), [Le, Ne] = z(!1), he = M >= pt.large ? "large" : M >= pt.medium ? "medium" : M >= pt.small ? "small" : "none", { snackbarList: ye, addSnackbar: ae } = Vn(), Ve = F((J, K, et) => {
     V((Re) => Re.map((tt) => tt.id === J ? le(["settings", K, "default"], et, tt) : tt)), C((Re) => Re.id === J ? le(["settings", K, "default"], et, Re) : Re);
   }, [C, V]), $e = F(() => {
-    E(Ae), x();
-  }, [E, x]), Pe = F(() => {
+    E(Ae), w();
+  }, [E, w]), Pe = F(() => {
     E(Ae), S();
   }, [E, S]), Ue = F(() => {
     se(!0);
@@ -1290,7 +1290,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
   }, [r, H, ae, b, k]), xt = `${i ? `${i} ` : ""}${Le ? "react-paint-editor-layout-opened " : ""}react-paint-editor-app`;
   return I("div", { ref: L.setEditor, className: xt, style: { "--react-paint-editor-app-maxWidth": R ? "100%" : `${b}px`, "--react-paint-editor-app-toolbar-bg": te, "--react-paint-editor-app-divider-color": ie, "--react-paint-editor-app-font-radius": fe, "--react-paint-editor-app-font-disabled-color": Me, "--react-paint-editor-app-font-disabled-bg": ne, "--react-paint-editor-app-font-color": j, "--react-paint-editor-app-font-bg": Se, "--react-paint-editor-app-font-selected-color": Ze, "--react-paint-editor-app-font-selected-bg": ke, "--react-paint-editor-app-font-hover-color": me, "--react-paint-editor-app-font-hover-bg": be, ...t }, children: [W && p(kn, { width: P.width, disabled: y, activeTool: T, clearCanvas: Q, setActiveTool: E, exportCanvasInFile: Ue, saveFile: lt, loadFile: Ct, addPicture: wt, hasActionToUndo: d, hasActionToRedo: c, hasActionToClear: u, undoAction: $e, redoAction: Pe, availableTools: N, withExport: ce, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: re }), s, W && X && p(vn, { gridFormat: he, setGridFormat: (J) => {
     A(pt[J]);
-  }, disabled: y, shapes: a.current, moveShapes: o, selectedShape: g, removeShape: f, selectShape: H, toggleShapeVisibility: l, toggleShapeLock: h, isLayoutPanelShown: Le }), W && I(pe, { children: [p(bn, { width: P.width, disabled: y, activeTool: T, availableTools: N, selectedShape: g, settings: D, removeShape: f, updateShape: w, canvas: L.canvas.current, layersManipulation: X, toggleLayoutPanel: () => {
+  }, disabled: y, shapes: a.current, moveShapes: o, selectedShape: g, removeShape: f, selectShape: H, toggleShapeVisibility: l, toggleShapeLock: h, isLayoutPanelShown: Le }), W && I(pe, { children: [p(bn, { width: P.width, disabled: y, activeTool: T, availableTools: N, selectedShape: g, settings: D, removeShape: f, updateShape: x, canvas: L.canvas.current, layersManipulation: X, toggleLayoutPanel: () => {
     Ne((J) => !J);
   }, updateToolSettings: Ve }), p(ln, { isLoading: Ee }), p(pn, { snackbarList: ye })] })] });
 };