react-pdf-levelup 1.0.15 → 2.0.9

package/dist/index.d.ts

@@ -6,23 +6,12 @@ interface LayoutPDFProps {
     orientation?: "portrait" | "landscape";
     backgroundColor?: string;
     showPageNumbers?: boolean;
-    padding?: number | string;
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
     style?: any;
-    width?: number;
-    height?: number;
-    fontFamily?: string;
-    fontSize?: number;
-    lineHeight?: number;
 }
 declare const LayoutPDF: React.FC<LayoutPDFProps>;
 
 interface ImgProps {
     src?: string;
-    alt?: string;
     style?: any;
 }
 declare const Img: React.FC<ImgProps>;
@@ -113,15 +102,38 @@ interface PageElementProps {
 declare const Header: React.FC<PageElementProps>;
 declare const Footer: React.FC<PageElementProps>;
 
-interface QRCodeProps {
-    dataURL: string;
+interface QRProps {
+    value: string;
     size?: number;
     style?: any;
+    colorDark?: string;
+    colorLight?: string;
+    margin?: number;
     logo?: string;
-    logoSize?: number;
-    logoBackgroundColor?: string;
-    logoMargin?: number;
+    logoWidth?: number;
+    logoHeight?: number;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
 }
-declare const QRCode: React.FC<QRCodeProps>;
+declare const QR: React.FC<QRProps>;
 
-export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
+interface ListProps {
+    children: React.ReactNode;
+    style?: any;
+    start?: number;
+    type?: "disc" | "circle" | "square" | "decimal" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
+}
+interface ListItemProps {
+    children: React.ReactNode;
+    style?: any;
+    value?: number | string;
+}
+declare const UL: React.FC<ListProps>;
+declare const OL: React.FC<ListProps>;
+declare const LI: React.FC<ListItemProps & {
+    bulletType?: string;
+    isOrdered?: boolean;
+    index?: number;
+    start?: number;
+}>;
+
+export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LI, LayoutPDF, Left, Mark, OL, P, QR, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U, UL };

package/dist/index.js

@@ -1,74 +1,18 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/components/PDF/core/LayoutPDF.tsx
+// src/components/core/LayoutPDF.tsx
 import React from "react";
-import { Page, Document, StyleSheet, Font, Text } from "@react-pdf/renderer";
-Font.register({
-  family: "Times New Roman",
-  fonts: [
-    { src: "/fonts/TimesNewerRoman-Regular.otf", fontWeight: 400, fontStyle: "normal" },
-    { src: "/fonts/TimesNewerRoman-Bold.otf", fontWeight: 700, fontStyle: "normal" },
-    { src: "/fonts/TimesNewerRoman-Italic.otf", fontWeight: 400, fontStyle: "italic" },
-    { src: "/fonts/TimesNewerRoman-BoldItalic.otf", fontWeight: 700, fontStyle: "italic" }
-    // Bold Italic
-  ]
-});
-var PAPER_SIZES = {
-  A0: [2384, 3370],
-  // 841 × 1189 mm
-  A1: [1684, 2384],
-  // 594 × 841 mm
-  A2: [1191, 1684],
-  // 420 × 594 mm
-  A3: [842, 1191],
-  // 297 × 420 mm
-  A4: [595, 842],
-  // 210 × 297 mm
-  A5: [420, 595],
-  // 148 × 210 mm
-  A6: [298, 420],
-  // 105 × 148 mm
-  A7: [210, 298],
-  // 74 × 105 mm
-  A8: [147, 210],
-  // 52 × 74 mm
-  A9: [105, 147],
-  // 37 × 52 mm
-  A10: [74, 105]
-  // 26 × 37 mm
-};
+import { Page, Document, StyleSheet, Text } from "@react-pdf/renderer";
 var styles = StyleSheet.create({
   page: {
     backgroundColor: "white",
-    padding: 72,
-    paddingBottom: 72 + 14,
-    fontFamily: "Times New Roman",
+    padding: 30,
+    fontFamily: "Helvetica",
     fontSize: 12,
-    lineHeight: 1.5,
-    position: "relative"
+    lineHeight: 1.5
   },
   pageNumber: {
     position: "absolute",
     fontSize: 10,
-    top: 792 - 14,
+    bottom: 30,
     left: 0,
     right: 0,
     textAlign: "center",
@@ -81,75 +25,17 @@ var LayoutPDF = ({
   orientation = "portrait",
   backgroundColor = "white",
   showPageNumbers = true,
-  padding = 72,
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft,
-  style = {},
-  width,
-  height,
-  fontFamily = "Helvetica",
-  fontSize = 12,
-  lineHeight = 1.5
+  style = {}
 }) => {
-  const pageStyle = __spreadValues(__spreadProps(__spreadValues({}, styles.page), {
+  const pageStyle = {
+    ...styles.page,
     backgroundColor,
-    fontFamily,
-    fontSize,
-    lineHeight
-  }), style);
-  if (paddingTop !== void 0 || paddingRight !== void 0 || paddingBottom !== void 0 || paddingLeft !== void 0) {
-    if (paddingTop !== void 0) pageStyle.paddingTop = paddingTop;
-    if (paddingRight !== void 0) pageStyle.paddingRight = paddingRight;
-    if (paddingBottom !== void 0) pageStyle.paddingBottom = paddingBottom;
-    if (paddingLeft !== void 0) pageStyle.paddingLeft = paddingLeft;
-  } else {
-    pageStyle.padding = padding;
-    if (showPageNumbers) {
-      pageStyle.paddingBottom = Number(padding) + 14;
-    }
-  }
-  let pageProps = {};
-  const customSize = PAPER_SIZES[size.toUpperCase()];
-  if (customSize) {
-    const [pageWidth, pageHeight] = customSize;
-    if (orientation === "landscape") {
-      pageProps = {
-        style: pageStyle,
-        size: [pageHeight, pageWidth]
-      };
-    } else {
-      pageProps = {
-        style: pageStyle,
-        size: [pageWidth, pageHeight]
-      };
-    }
-    console.log(`Using custom size for ${size}: ${JSON.stringify(pageProps.size)}`);
-  } else if (width && height) {
-    pageProps = {
-      style: pageStyle,
-      size: [width, height]
-    };
-  } else {
-    pageProps = {
-      size,
-      orientation,
-      style: pageStyle
-    };
-  }
-  let pageNumberStyle = __spreadValues({}, styles.pageNumber);
-  if (customSize) {
-    const [pageWidth, pageHeight] = customSize;
-    const actualHeight = orientation === "landscape" ? pageWidth : pageHeight;
-    pageNumberStyle = __spreadProps(__spreadValues({}, pageNumberStyle), {
-      top: actualHeight - 80
-    });
-  }
-  return /* @__PURE__ */ React.createElement(Document, null, /* @__PURE__ */ React.createElement(Page, __spreadValues({}, pageProps), children, /* @__PURE__ */ React.createElement(
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(Document, null, /* @__PURE__ */ React.createElement(Page, { size, orientation, style: pageStyle }, children, showPageNumbers && /* @__PURE__ */ React.createElement(
     Text,
     {
-      style: pageNumberStyle,
+      style: styles.pageNumber,
       render: ({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`,
       fixed: true
     }
@@ -157,9 +43,9 @@ var LayoutPDF = ({
 };
 var LayoutPDF_default = LayoutPDF;
 
-// src/components/PDF/core/Img.tsx
+// 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%",
@@ -167,12 +53,12 @@ var styles2 = StyleSheet2.create({
     marginBottom: 14
   }
 });
-var Img = ({ src, alt, style }) => {
-  return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
+var Img = ({ src, style }) => {
+  return /* @__PURE__ */ React2.createElement(Image2, { src, style: [styles2.image, style] });
 };
 var Img_default = Img;
 
-// src/components/PDF/core/Position.tsx
+// src/components/core/Position.tsx
 import React3 from "react";
 import { View, StyleSheet as StyleSheet3 } from "@react-pdf/renderer";
 var styles3 = StyleSheet3.create({
@@ -196,7 +82,7 @@ var Center = ({ children, style }) => {
   return /* @__PURE__ */ React3.createElement(View, { style: [styles3.center, style] }, children);
 };
 
-// src/components/PDF/core/Etiquetas.tsx
+// src/components/core/Etiquetas.tsx
 import React4 from "react";
 import { Text as Text2, StyleSheet as StyleSheet4, Link } from "@react-pdf/renderer";
 var styles4 = StyleSheet4.create({
@@ -317,7 +203,7 @@ var Span = ({ children, style }) => {
   return /* @__PURE__ */ React4.createElement(Text2, { style: [style] }, children);
 };
 
-// src/components/PDF/core/Tablet.tsx
+// src/components/core/Tablet.tsx
 import React5 from "react";
 import { View as View2, Text as Text3, StyleSheet as StyleSheet5 } from "@react-pdf/renderer";
 var styles5 = StyleSheet5.create({
@@ -385,21 +271,23 @@ var Tr = ({ children, style }) => {
 var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
   const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
   const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = __spreadValues({
-    width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
-  }, height !== void 0 && { height });
+  const customStyle = {
+    width: width || spanWidth || sizeStyle?.width,
+    ...height !== void 0 && { height }
+  };
   return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
 };
 var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
   const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
   const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = __spreadValues({
-    width: width || spanWidth || (sizeStyle == null ? void 0 : sizeStyle.width)
-  }, height !== void 0 && { height });
+  const customStyle = {
+    width: width || spanWidth || sizeStyle?.width,
+    ...height !== void 0 && { height }
+  };
   return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
 };
 
-// src/components/PDF/core/Grid.tsx
+// src/components/core/Grid.tsx
 import React6 from "react";
 import { View as View3, StyleSheet as StyleSheet6 } from "@react-pdf/renderer";
 var styles6 = StyleSheet6.create({
@@ -411,7 +299,6 @@ var styles6 = StyleSheet6.create({
     flexDirection: "row",
     flexWrap: "wrap",
     marginHorizontal: -5
-    // Negative margin to offset column padding
   },
   col: {
     paddingHorizontal: 5
@@ -472,7 +359,7 @@ var Col12 = ({ children, style }) => {
   return /* @__PURE__ */ React6.createElement(View3, { style: [styles6.col, styles6.col12, style] }, children);
 };
 
-// src/components/PDF/core/PageElements.tsx
+// src/components/core/PageElements.tsx
 import React7 from "react";
 import { Text as Text4, View as View4, StyleSheet as StyleSheet7 } from "@react-pdf/renderer";
 var styles7 = StyleSheet7.create({
@@ -504,51 +391,251 @@ var Footer = ({ children, style, fixed = false }) => {
   return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
 };
 
-// src/components/PDF/core/QRCode.tsx
+// src/components/core/QR.tsx
 import React8 from "react";
-import { Image as Image2, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
+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: {
-    position: "relative",
+    display: "flex",
     alignItems: "center",
-    justifyContent: "center"
-  },
-  logo: {
-    position: "absolute",
-    zIndex: 2
-  },
-  logoBackground: {
-    position: "absolute",
-    zIndex: 1
+    justifyContent: "center",
+    margin: 10
   }
 });
-var QRCode = ({
-  dataURL,
+var errorLevelMap = {
+  0: "L",
+  1: "M",
+  2: "Q",
+  3: "H"
+};
+var QR = ({
+  value,
   size = 150,
   style,
-  logo,
-  logoSize = 30,
-  logoBackgroundColor = "#ffffff",
-  logoMargin = 5
+  colorDark = "#000000",
+  colorLight = "#ffffff",
+  margin = 0,
+  logo = "",
+  logoWidth = 30,
+  logoHeight = 30,
+  errorCorrectionLevel = "M"
 }) => {
-  const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
-    width: size,
-    height: size
-  }), style);
-  const logoContainerSize = logoSize + logoMargin * 2;
-  const logoBackgroundStyle = __spreadProps(__spreadValues({}, styles8.logoBackground), {
-    width: logoContainerSize,
-    height: logoContainerSize,
-    backgroundColor: logoBackgroundColor,
-    borderRadius: logoContainerSize / 2
+  const [qrDataUrl, setQrDataUrl] = useState("");
+  useEffect(() => {
+    const generateQR = async () => {
+      try {
+        const baseQrDataUrl = await generateQRAsBase64({
+          value,
+          size,
+          colorDark,
+          colorLight,
+          margin,
+          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
+        });
+        if (logo && logoWidth && logoHeight) {
+          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
+          setQrDataUrl(qrWithLogo);
+        } else {
+          setQrDataUrl(baseQrDataUrl);
+        }
+      } 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);
+      }
+    };
+    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 Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
+var styles9 = StyleSheet9.create({
+  ul: {
+    marginBottom: 10,
+    paddingLeft: 15
+  },
+  ol: {
+    marginBottom: 10,
+    paddingLeft: 15
+  },
+  li: {
+    marginBottom: 5,
+    flexDirection: "row"
+  },
+  bulletPoint: {
+    width: 15,
+    marginRight: 5,
+    fontSize: 12
+  },
+  itemContent: {
+    flex: 1
+  }
+});
+var getBulletPoint = (type = "disc") => {
+  switch (type) {
+    case "circle":
+      return "\u25CB";
+    case "square":
+      return "\u25A0";
+    case "disc":
+    default:
+      return "\u2022";
+  }
+};
+var getOrderedMarker = (index, type = "decimal", start = 1) => {
+  const actualIndex = start + index - 1;
+  switch (type) {
+    case "lower-alpha":
+      return String.fromCharCode(97 + actualIndex % 26) + ".";
+    case "upper-alpha":
+      return String.fromCharCode(65 + actualIndex % 26) + ".";
+    case "lower-roman":
+      return toRoman(actualIndex).toLowerCase() + ".";
+    case "upper-roman":
+      return toRoman(actualIndex) + ".";
+    case "decimal":
+    default:
+      return actualIndex + ".";
+  }
+};
+var toRoman = (num) => {
+  if (num <= 0 || num > 3999) return String(num);
+  const romanNumerals = [
+    ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
+    ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"],
+    ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"],
+    ["", "M", "MM", "MMM"]
+  ];
+  return romanNumerals[3][Math.floor(num / 1e3)] + romanNumerals[2][Math.floor(num % 1e3 / 100)] + romanNumerals[1][Math.floor(num % 100 / 10)] + romanNumerals[0][num % 10];
+};
+var UL = ({ children, style, type = "disc" }) => {
+  const childrenWithBullets = React9.Children.map(children, (child, index) => {
+    if (React9.isValidElement(child)) {
+      return React9.cloneElement(child, {
+        bulletType: type,
+        isOrdered: false,
+        index: index + 1
+      });
+    }
+    return child;
   });
-  const logoStyle = __spreadProps(__spreadValues({}, styles8.logo), {
-    width: logoSize,
-    height: logoSize
+  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) => {
+    if (React9.isValidElement(child)) {
+      return React9.cloneElement(child, {
+        bulletType: type,
+        isOrdered: true,
+        index: index + 1,
+        start
+      });
+    }
+    return child;
   });
-  return /* @__PURE__ */ React8.createElement(View5, { style: containerStyle }, dataURL ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Image2, { src: dataURL || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(View5, { style: logoBackgroundStyle }), /* @__PURE__ */ React8.createElement(Image2, { src: logo || "/placeholder.svg", style: logoStyle }))) : null);
+  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;
+  if (isOrdered) {
+    const actualIndex = value !== void 0 ? Number(value) : index;
+    marker = getOrderedMarker(actualIndex, bulletType, start);
+  } 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));
 };
-var QRCode_default = QRCode;
 export {
   A,
   BR,
@@ -577,11 +664,13 @@ export {
   H6,
   Header,
   Img_default as Img,
+  LI,
   LayoutPDF_default as LayoutPDF,
   Left,
   Mark,
+  OL,
   P,
-  QRCode_default as QRCode,
+  QR_default as QR,
   Right,
   Row,
   Small,
@@ -593,5 +682,6 @@ export {
   Th,
   Thead,
   Tr,
-  U
+  U,
+  UL
 };