react-pdf-levelup 2.0.26 → 2.0.28

package/dist/index.d.mts

@@ -109,19 +109,33 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
 
-interface QRProps {
-    value: string;
+interface QRCustomProps {
+    url: string;
     size?: number;
-    style?: any;
-    colorDark?: string;
-    colorLight?: string;
-    margin?: number;
+    colorData?: string;
+    colorDataBG?: string;
     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<QRProps>;
+declare const QR: React$1.FC<QRCustomProps>;
 
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.d.ts

@@ -109,19 +109,33 @@ interface PageElementProps {
 declare const Header: React$1.FC<PageElementProps>;
 declare const Footer: React$1.FC<PageElementProps>;
 
-interface QRProps {
-    value: string;
+interface QRCustomProps {
+    url: string;
     size?: number;
-    style?: any;
-    colorDark?: string;
-    colorLight?: string;
-    margin?: number;
+    colorData?: string;
+    colorDataBG?: string;
     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<QRProps>;
+declare const QR: React$1.FC<QRCustomProps>;
 
 interface ListProps {
     children: React$1.ReactNode;

package/dist/index.js

@@ -527,154 +527,173 @@ var Footer = ({ children, style, fixed = false }) => {
 
 // src/components/core/QR.tsx
 var import_react8 = __toESM(require("react"));
-var import_renderer8 = require("@react-pdf/renderer");
 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 = "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 import_renderer8 = require("@react-pdf/renderer");
+var import_qr_code_styling = __toESM(require("qr-code-styling"));
 var QR = ({
-  value,
-  size = 150,
-  style,
-  colorDark = "#000000",
-  colorLight = "#ffffff",
-  margin = 0,
-  logo = "",
+  url,
+  size = 200,
+  colorData = "#000000",
+  colorDataBG = "#ffffff",
+  logo,
   logoWidth = 30,
-  logoHeight = 30,
-  errorCorrectionLevel = "M"
+  logoHeight,
+  margin = 0,
+  errorCorrectionLevel = "H",
+  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
 }) => {
-  const [qrDataUrl, setQrDataUrl] = (0, import_react9.useState)("");
+  const [qrDataURL, setQrDataURL] = (0, import_react9.useState)(null);
+  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
+  const actualLogoHeight = logoHeight || actualLogoWidth;
   (0, import_react9.useEffect)(() => {
-    const generateQR = async () => {
+    const generateQRCode = async () => {
       try {
-        const baseQrDataUrl = await generateQRAsBase64({
-          value,
-          size,
-          colorDark,
-          colorLight,
-          margin,
-          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
+        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
         });
-        if (logo && logoWidth && logoHeight) {
-          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
-          setQrDataUrl(qrWithLogo);
-        } else {
-          setQrDataUrl(baseQrDataUrl);
-        }
+        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);
       } catch (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);
+        console.error("Error generating QR code:", error);
       }
     };
-    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 } }));
+    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
+    )
+  ));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 var import_react10 = __toESM(require("react"));
 var import_renderer9 = require("@react-pdf/renderer");
-var styles9 = import_renderer9.StyleSheet.create({
+var styles8 = import_renderer9.StyleSheet.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -744,7 +763,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = import_react10.default.Children.map(children, (child, index) => {
@@ -758,7 +777,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles8.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -768,7 +787,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: [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));
+  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));
 };
 
 // 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 as Image2, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
+import { Image, 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(Image2, { src, style: [styles2.image, style] });
+  return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
 };
 var Img_default = Img;
 
@@ -439,154 +439,173 @@ 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";
-
-// src/components/core/QRGenerator.tsx
-import QRCode from "qrcode";
-var generateQRAsBase64 = async ({
-  value,
-  size = 150,
-  colorDark = "#000000",
-  colorLight = "#ffffff",
-  margin = 0,
-  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"
-};
+import { Image as Image2, View as View5, Text as Text5 } from "@react-pdf/renderer";
+import QRCodeStyling from "qr-code-styling";
 var QR = ({
-  value,
-  size = 150,
-  style,
-  colorDark = "#000000",
-  colorLight = "#ffffff",
-  margin = 0,
-  logo = "",
+  url,
+  size = 200,
+  colorData = "#000000",
+  colorDataBG = "#ffffff",
+  logo,
   logoWidth = 30,
-  logoHeight = 30,
-  errorCorrectionLevel = "M"
+  logoHeight,
+  margin = 0,
+  errorCorrectionLevel = "H",
+  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
 }) => {
-  const [qrDataUrl, setQrDataUrl] = useState("");
+  const [qrDataURL, setQrDataURL] = useState(null);
+  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
+  const actualLogoHeight = logoHeight || actualLogoWidth;
   useEffect(() => {
-    const generateQR = async () => {
+    const generateQRCode = async () => {
       try {
-        const baseQrDataUrl = await generateQRAsBase64({
-          value,
-          size,
-          colorDark,
-          colorLight,
-          margin,
-          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
+        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
         });
-        if (logo && logoWidth && logoHeight) {
-          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
-          setQrDataUrl(qrWithLogo);
-        } else {
-          setQrDataUrl(baseQrDataUrl);
-        }
+        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);
       } catch (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);
+        console.error("Error generating QR code:", error);
       }
     };
-    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 } }));
+    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
+    )
+  ));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 import React9 from "react";
-import { View as View6, Text as Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
-var styles9 = StyleSheet9.create({
+import { View as View6, Text as Text6, StyleSheet as StyleSheet8 } from "@react-pdf/renderer";
+var styles8 = StyleSheet8.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -656,7 +675,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = React9.Children.map(children, (child, index) => {
@@ -670,7 +689,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -680,11 +699,11 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  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));
+  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));
 };
 
 // src/components/core/index.tsx
-import { View as View7, Text as Text6, StyleSheet as StyleSheet10, Font } from "@react-pdf/renderer";
+import { View as View7, Text as Text7, StyleSheet as StyleSheet9, Font } from "@react-pdf/renderer";
 
 // src/functions/decodeBase64Pdf.ts
 var decodeBase64Pdf = (base64, fileName) => {
@@ -776,11 +795,11 @@ export {
   Small,
   Span,
   Strong,
-  StyleSheet10 as StyleSheet,
+  StyleSheet9 as StyleSheet,
   Table,
   Tbody,
   Td,
-  Text6 as Text,
+  Text7 as Text,
   Th,
   Thead,
   Tr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -20,7 +20,7 @@
   },
   "peerDependencies": {
     "@react-pdf/renderer": "^4.3.0",
-    "qrcode": "^1.5.4",
+    "qr-code-styling": "^1.9.2",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -37,7 +37,6 @@
   "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",