react-pdf-levelup 2.0.28 → 2.0.32

package/dist/index.d.mts

@@ -109,33 +109,19 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
 
-interface QRCustomProps {
-    url: string;
+interface QRProps {
+    value: string;
     size?: number;
-    colorData?: string;
-    colorDataBG?: string;
+    style?: any;
+    colorDark?: string;
+    colorLight?: string;
+    margin?: number;
     logo?: string;
     logoWidth?: number;
     logoHeight?: number;
-    margin?: number;
     errorCorrectionLevel?: "L" | "M" | "Q" | "H";
-    style?: any;
-    dotType?: "rounded" | "dots" | "classy" | "classy-rounded" | "square" | "extra-rounded";
-    cornerSquareType?: "square" | "dot" | "extra-rounded";
-    cornerDotType?: "square" | "dot";
-    cornerSquareColor?: string;
-    cornerDotColor?: string;
-    logoBG?: string;
-    logoText?: string;
-    moveText?: number;
-    textColor?: string;
-    fontSize?: number;
-    fontFamily?: string;
-    textBackgroundColor?: string;
-    textPadding?: number;
-    textBold?: boolean;
 }
-declare const QR: React$1.FC<QRCustomProps>;
+declare const QR: React$1.FC<QRProps>;
 
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.d.ts

@@ -109,33 +109,19 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
 
-interface QRCustomProps {
-    url: string;
+interface QRProps {
+    value: string;
     size?: number;
-    colorData?: string;
-    colorDataBG?: string;
+    style?: any;
+    colorDark?: string;
+    colorLight?: string;
+    margin?: number;
     logo?: string;
     logoWidth?: number;
     logoHeight?: number;
-    margin?: number;
     errorCorrectionLevel?: "L" | "M" | "Q" | "H";
-    style?: any;
-    dotType?: "rounded" | "dots" | "classy" | "classy-rounded" | "square" | "extra-rounded";
-    cornerSquareType?: "square" | "dot" | "extra-rounded";
-    cornerDotType?: "square" | "dot";
-    cornerSquareColor?: string;
-    cornerDotColor?: string;
-    logoBG?: string;
-    logoText?: string;
-    moveText?: number;
-    textColor?: string;
-    fontSize?: number;
-    fontFamily?: string;
-    textBackgroundColor?: string;
-    textPadding?: number;
-    textBold?: boolean;
 }
-declare const QR: React$1.FC<QRCustomProps>;
+declare const QR: React$1.FC<QRProps>;
 
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.js

@@ -527,173 +527,154 @@ var Footer = ({ children, style, fixed = false }) => {
 
 // src/components/core/QR.tsx
 var import_react8 = __toESM(require("react"));
-var import_react9 = require("react");
 var import_renderer8 = require("@react-pdf/renderer");
-var import_qr_code_styling = __toESM(require("qr-code-styling"));
-var QR = ({
-  url,
-  size = 200,
-  colorData = "#000000",
-  colorDataBG = "#ffffff",
-  logo,
-  logoWidth = 30,
-  logoHeight,
+var import_react9 = require("react");
+
+// src/components/core/QRGenerator.tsx
+var import_qrcode = __toESM(require("qrcode"));
+var generateQRAsBase64 = async ({
+  value,
+  size = 150,
+  colorDark = "#000000",
+  colorLight = "#ffffff",
   margin = 0,
-  errorCorrectionLevel = "H",
+  errorCorrectionLevel = "M"
+}) => {
+  try {
+    const options = {
+      errorCorrectionLevel,
+      type: "image/png",
+      quality: 0.92,
+      margin,
+      color: {
+        dark: colorDark,
+        light: colorLight
+      },
+      width: size
+    };
+    const qrDataUrl = import_qrcode.default.toDataURL(value, options);
+    return qrDataUrl;
+  } catch (error) {
+    console.error("Error generando QR:", error);
+    return "";
+  }
+};
+var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
+  return new Promise((resolve) => {
+    if (!qrDataUrl || !logoUrl) {
+      resolve(qrDataUrl);
+      return;
+    }
+    try {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(qrDataUrl);
+        return;
+      }
+      const qrImage = new Image();
+      qrImage.crossOrigin = "anonymous";
+      qrImage.onload = () => {
+        canvas.width = qrImage.width;
+        canvas.height = qrImage.height;
+        ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
+        const logoImage = new Image();
+        logoImage.crossOrigin = "anonymous";
+        logoImage.onload = () => {
+          const x = (canvas.width - logoWidth) / 2;
+          const y = (canvas.height - logoHeight) / 2;
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
+          ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
+          const finalQrDataUrl = canvas.toDataURL("image/png");
+          resolve(finalQrDataUrl);
+        };
+        logoImage.onerror = () => {
+          console.error("Error cargando el logo");
+          resolve(qrDataUrl);
+        };
+        logoImage.src = logoUrl;
+      };
+      qrImage.onerror = () => {
+        console.error("Error cargando el QR");
+        resolve("");
+      };
+      qrImage.src = qrDataUrl;
+    } catch (error) {
+      console.error("Error procesando el QR con logo:", error);
+      resolve(qrDataUrl);
+    }
+  });
+};
+
+// src/components/core/QR.tsx
+var styles8 = import_renderer8.StyleSheet.create({
+  qrContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 10
+  }
+});
+var errorLevelMap = {
+  0: "L",
+  1: "M",
+  2: "Q",
+  3: "H"
+};
+var QR = ({
+  value,
+  size = 150,
   style,
-  dotType = "square",
-  cornerSquareType = "square",
-  cornerDotType = "square",
-  cornerSquareColor,
-  cornerDotColor,
-  logoBG = colorDataBG,
-  logoText,
-  moveText = 0,
-  textColor = colorData,
-  fontSize = 12,
-  fontFamily = "Helvetica",
-  textBackgroundColor = colorDataBG,
-  textPadding = 1,
-  textBold = true
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  logo = "",
+  logoWidth = 30,
+  logoHeight = 30,
+  errorCorrectionLevel = "M"
 }) => {
-  const [qrDataURL, setQrDataURL] = (0, import_react9.useState)(null);
-  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
-  const actualLogoHeight = logoHeight || actualLogoWidth;
+  const [qrDataUrl, setQrDataUrl] = (0, import_react9.useState)("");
   (0, import_react9.useEffect)(() => {
-    const generateQRCode = async () => {
+    const generateQR = async () => {
       try {
-        const qrCode = new import_qr_code_styling.default({
-          width: size,
-          height: size,
-          type: "canvas",
-          data: url,
-          dotsOptions: {
-            color: colorData,
-            type: dotType
-          },
-          cornersSquareOptions: {
-            color: cornerSquareColor || colorData,
-            type: cornerSquareType
-          },
-          cornersDotOptions: {
-            color: cornerDotColor || colorData,
-            type: cornerDotType
-          },
-          backgroundOptions: {
-            color: colorDataBG
-          },
-          qrOptions: {
-            errorCorrectionLevel
-          },
-          margin
+        const baseQrDataUrl = await generateQRAsBase64({
+          value,
+          size,
+          colorDark,
+          colorLight,
+          margin,
+          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
         });
-        const container = document.createElement("div");
-        container.style.position = "absolute";
-        container.style.top = "-9999px";
-        container.style.left = "-9999px";
-        document.body.appendChild(container);
-        qrCode.append(container);
-        setTimeout(() => {
-          try {
-            const qrCanvas = container.querySelector("canvas");
-            if (qrCanvas) {
-              const canvas = document.createElement("canvas");
-              canvas.width = size;
-              canvas.height = size;
-              const ctx = canvas.getContext("2d");
-              if (ctx) {
-                ctx.drawImage(qrCanvas, 0, 0);
-                const dataURL = canvas.toDataURL("image/png");
-                setQrDataURL(dataURL);
-              }
-            }
-            document.body.removeChild(container);
-          } catch (error) {
-            console.error("Error capturing QR code:", error);
-          }
-        }, 100);
+        if (logo && logoWidth && logoHeight) {
+          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
+          setQrDataUrl(qrWithLogo);
+        } else {
+          setQrDataUrl(baseQrDataUrl);
+        }
       } catch (error) {
-        console.error("Error generating QR code:", error);
+        console.error("Error generando QR:", error);
+        const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+          value
+        )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
+          colorLight.replace("#", "")
+        )}`;
+        setQrDataUrl(fallbackUrl2);
       }
     };
-    generateQRCode();
-  }, [
-    url,
-    size,
-    colorData,
-    colorDataBG,
-    margin,
-    errorCorrectionLevel,
-    dotType,
-    cornerSquareType,
-    cornerDotType,
-    cornerSquareColor,
-    cornerDotColor,
-    logoBG
-  ]);
-  if (!qrDataURL) return null;
-  const centerPosition = size / 2;
-  const logoContainerSize = Math.max(actualLogoWidth, actualLogoHeight) + 10;
-  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: { width: size, height: size, position: "relative", ...style } }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ import_react8.default.createElement(
-    import_renderer8.View,
-    {
-      style: {
-        position: "absolute",
-        width: logoContainerSize,
-        height: logoContainerSize,
-        backgroundColor: logoBG || colorDataBG,
-        left: centerPosition - logoContainerSize / 2,
-        top: centerPosition - logoContainerSize / 2,
-        borderRadius: 100,
-        border: `5px solid ${colorData}`,
-        padding: 0
-      }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      import_renderer8.Image,
-      {
-        src: logo || "/placeholder.svg",
-        style: {
-          objectFit: "contain",
-          width: actualLogoWidth,
-          height: actualLogoHeight || actualLogoWidth
-        }
-      }
-    )
-  ), !logo && logoText && /* @__PURE__ */ import_react8.default.createElement(
-    import_renderer8.View,
-    {
-      style: {
-        position: "absolute",
-        backgroundColor: textBackgroundColor,
-        padding: textPadding,
-        borderRadius: 4,
-        left: moveText + centerPosition - 20,
-        // Approximate center
-        top: centerPosition - 10
-        // Approximate center
-      }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      import_renderer8.Text,
-      {
-        style: {
-          color: textColor,
-          fontSize,
-          fontFamily,
-          fontWeight: textBold ? "bold" : "normal"
-        }
-      },
-      logoText
-    )
-  ));
+    generateQR();
+  }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
+  const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+    value
+  )}&size=${size}x${size}`;
+  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 var import_react10 = __toESM(require("react"));
 var import_renderer9 = require("@react-pdf/renderer");
-var styles8 = import_renderer9.StyleSheet.create({
+var styles9 = import_renderer9.StyleSheet.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -763,7 +744,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = import_react10.default.Children.map(children, (child, index) => {
@@ -777,7 +758,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -787,7 +768,7 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.li, style] }, /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, null, children) : children));
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.li, style] }, /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, null, children) : children));
 };
 
 // src/components/core/index.tsx

package/dist/index.mjs

@@ -71,7 +71,7 @@ var LayoutPDF_default = LayoutPDF;
 
 // src/components/core/Img.tsx
 import React2 from "react";
-import { Image, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
+import { Image as Image2, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
 var styles2 = StyleSheet2.create({
   image: {
     width: "100%",
@@ -80,7 +80,7 @@ var styles2 = StyleSheet2.create({
   }
 });
 var Img = ({ src, style }) => {
-  return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
+  return /* @__PURE__ */ React2.createElement(Image2, { src, style: [styles2.image, style] });
 };
 var Img_default = Img;
 
@@ -439,173 +439,154 @@ var Footer = ({ children, style, fixed = false }) => {
 
 // src/components/core/QR.tsx
 import React8 from "react";
+import { Image as Image3, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
 import { useEffect, useState } from "react";
-import { Image as Image2, View as View5, Text as Text5 } from "@react-pdf/renderer";
-import QRCodeStyling from "qr-code-styling";
-var QR = ({
-  url,
-  size = 200,
-  colorData = "#000000",
-  colorDataBG = "#ffffff",
-  logo,
-  logoWidth = 30,
-  logoHeight,
+
+// src/components/core/QRGenerator.tsx
+import QRCode from "qrcode";
+var generateQRAsBase64 = async ({
+  value,
+  size = 150,
+  colorDark = "#000000",
+  colorLight = "#ffffff",
   margin = 0,
-  errorCorrectionLevel = "H",
+  errorCorrectionLevel = "M"
+}) => {
+  try {
+    const options = {
+      errorCorrectionLevel,
+      type: "image/png",
+      quality: 0.92,
+      margin,
+      color: {
+        dark: colorDark,
+        light: colorLight
+      },
+      width: size
+    };
+    const qrDataUrl = QRCode.toDataURL(value, options);
+    return qrDataUrl;
+  } catch (error) {
+    console.error("Error generando QR:", error);
+    return "";
+  }
+};
+var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
+  return new Promise((resolve) => {
+    if (!qrDataUrl || !logoUrl) {
+      resolve(qrDataUrl);
+      return;
+    }
+    try {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(qrDataUrl);
+        return;
+      }
+      const qrImage = new Image();
+      qrImage.crossOrigin = "anonymous";
+      qrImage.onload = () => {
+        canvas.width = qrImage.width;
+        canvas.height = qrImage.height;
+        ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
+        const logoImage = new Image();
+        logoImage.crossOrigin = "anonymous";
+        logoImage.onload = () => {
+          const x = (canvas.width - logoWidth) / 2;
+          const y = (canvas.height - logoHeight) / 2;
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
+          ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
+          const finalQrDataUrl = canvas.toDataURL("image/png");
+          resolve(finalQrDataUrl);
+        };
+        logoImage.onerror = () => {
+          console.error("Error cargando el logo");
+          resolve(qrDataUrl);
+        };
+        logoImage.src = logoUrl;
+      };
+      qrImage.onerror = () => {
+        console.error("Error cargando el QR");
+        resolve("");
+      };
+      qrImage.src = qrDataUrl;
+    } catch (error) {
+      console.error("Error procesando el QR con logo:", error);
+      resolve(qrDataUrl);
+    }
+  });
+};
+
+// src/components/core/QR.tsx
+var styles8 = StyleSheet8.create({
+  qrContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 10
+  }
+});
+var errorLevelMap = {
+  0: "L",
+  1: "M",
+  2: "Q",
+  3: "H"
+};
+var QR = ({
+  value,
+  size = 150,
   style,
-  dotType = "square",
-  cornerSquareType = "square",
-  cornerDotType = "square",
-  cornerSquareColor,
-  cornerDotColor,
-  logoBG = colorDataBG,
-  logoText,
-  moveText = 0,
-  textColor = colorData,
-  fontSize = 12,
-  fontFamily = "Helvetica",
-  textBackgroundColor = colorDataBG,
-  textPadding = 1,
-  textBold = true
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  logo = "",
+  logoWidth = 30,
+  logoHeight = 30,
+  errorCorrectionLevel = "M"
 }) => {
-  const [qrDataURL, setQrDataURL] = useState(null);
-  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
-  const actualLogoHeight = logoHeight || actualLogoWidth;
+  const [qrDataUrl, setQrDataUrl] = useState("");
   useEffect(() => {
-    const generateQRCode = async () => {
+    const generateQR = async () => {
       try {
-        const qrCode = new QRCodeStyling({
-          width: size,
-          height: size,
-          type: "canvas",
-          data: url,
-          dotsOptions: {
-            color: colorData,
-            type: dotType
-          },
-          cornersSquareOptions: {
-            color: cornerSquareColor || colorData,
-            type: cornerSquareType
-          },
-          cornersDotOptions: {
-            color: cornerDotColor || colorData,
-            type: cornerDotType
-          },
-          backgroundOptions: {
-            color: colorDataBG
-          },
-          qrOptions: {
-            errorCorrectionLevel
-          },
-          margin
+        const baseQrDataUrl = await generateQRAsBase64({
+          value,
+          size,
+          colorDark,
+          colorLight,
+          margin,
+          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
         });
-        const container = document.createElement("div");
-        container.style.position = "absolute";
-        container.style.top = "-9999px";
-        container.style.left = "-9999px";
-        document.body.appendChild(container);
-        qrCode.append(container);
-        setTimeout(() => {
-          try {
-            const qrCanvas = container.querySelector("canvas");
-            if (qrCanvas) {
-              const canvas = document.createElement("canvas");
-              canvas.width = size;
-              canvas.height = size;
-              const ctx = canvas.getContext("2d");
-              if (ctx) {
-                ctx.drawImage(qrCanvas, 0, 0);
-                const dataURL = canvas.toDataURL("image/png");
-                setQrDataURL(dataURL);
-              }
-            }
-            document.body.removeChild(container);
-          } catch (error) {
-            console.error("Error capturing QR code:", error);
-          }
-        }, 100);
+        if (logo && logoWidth && logoHeight) {
+          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
+          setQrDataUrl(qrWithLogo);
+        } else {
+          setQrDataUrl(baseQrDataUrl);
+        }
       } catch (error) {
-        console.error("Error generating QR code:", error);
+        console.error("Error generando QR:", error);
+        const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+          value
+        )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
+          colorLight.replace("#", "")
+        )}`;
+        setQrDataUrl(fallbackUrl2);
       }
     };
-    generateQRCode();
-  }, [
-    url,
-    size,
-    colorData,
-    colorDataBG,
-    margin,
-    errorCorrectionLevel,
-    dotType,
-    cornerSquareType,
-    cornerDotType,
-    cornerSquareColor,
-    cornerDotColor,
-    logoBG
-  ]);
-  if (!qrDataURL) return null;
-  const centerPosition = size / 2;
-  const logoContainerSize = Math.max(actualLogoWidth, actualLogoHeight) + 10;
-  return /* @__PURE__ */ React8.createElement(View5, { style: { width: size, height: size, position: "relative", ...style } }, /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ React8.createElement(
-    View5,
-    {
-      style: {
-        position: "absolute",
-        width: logoContainerSize,
-        height: logoContainerSize,
-        backgroundColor: logoBG || colorDataBG,
-        left: centerPosition - logoContainerSize / 2,
-        top: centerPosition - logoContainerSize / 2,
-        borderRadius: 100,
-        border: `5px solid ${colorData}`,
-        padding: 0
-      }
-    },
-    /* @__PURE__ */ React8.createElement(
-      Image2,
-      {
-        src: logo || "/placeholder.svg",
-        style: {
-          objectFit: "contain",
-          width: actualLogoWidth,
-          height: actualLogoHeight || actualLogoWidth
-        }
-      }
-    )
-  ), !logo && logoText && /* @__PURE__ */ React8.createElement(
-    View5,
-    {
-      style: {
-        position: "absolute",
-        backgroundColor: textBackgroundColor,
-        padding: textPadding,
-        borderRadius: 4,
-        left: moveText + centerPosition - 20,
-        // Approximate center
-        top: centerPosition - 10
-        // Approximate center
-      }
-    },
-    /* @__PURE__ */ React8.createElement(
-      Text5,
-      {
-        style: {
-          color: textColor,
-          fontSize,
-          fontFamily,
-          fontWeight: textBold ? "bold" : "normal"
-        }
-      },
-      logoText
-    )
-  ));
+    generateQR();
+  }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
+  const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
+    value
+  )}&size=${size}x${size}`;
+  return /* @__PURE__ */ React8.createElement(View5, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ React8.createElement(Image3, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 import React9 from "react";
-import { View as View6, Text as Text6, StyleSheet as StyleSheet8 } from "@react-pdf/renderer";
-var styles8 = StyleSheet8.create({
+import { View as View6, Text as Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
+var styles9 = StyleSheet9.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -675,7 +656,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = React9.Children.map(children, (child, index) => {
@@ -689,7 +670,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -699,11 +680,11 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.li, style] }, /* @__PURE__ */ React9.createElement(Text6, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text6, null, children) : children));
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.li, style] }, /* @__PURE__ */ React9.createElement(Text5, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text5, null, children) : children));
 };
 
 // src/components/core/index.tsx
-import { View as View7, Text as Text7, StyleSheet as StyleSheet9, Font } from "@react-pdf/renderer";
+import { View as View7, Text as Text6, StyleSheet as StyleSheet10, Font } from "@react-pdf/renderer";
 
 // src/functions/decodeBase64Pdf.ts
 var decodeBase64Pdf = (base64, fileName) => {
@@ -795,11 +776,11 @@ export {
   Small,
   Span,
   Strong,
-  StyleSheet9 as StyleSheet,
+  StyleSheet10 as StyleSheet,
   Table,
   Tbody,
   Td,
-  Text7 as Text,
+  Text6 as Text,
   Th,
   Thead,
   Tr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "2.0.28",
+  "version": "2.0.32",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -20,7 +20,7 @@
   },
   "peerDependencies": {
     "@react-pdf/renderer": "^4.3.0",
-    "qr-code-styling": "^1.9.2",
+    "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@react-pdf/types": "^2.9.0",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.3.4",