diff --git a/docs/components/compile/compile.mdx b/docs/components/compile/compile.mdx
index 6414cb2..e1785de 100644
--- a/docs/components/compile/compile.mdx
+++ b/docs/components/compile/compile.mdx
@@ -19,7 +19,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
           const html = await compile(<Component />);
           ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-2e394416/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-c4caf51a/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -60,7 +60,7 @@ Pass `{ emotion: true }` as the second compile option to merge and extract criti
 const html = await compile(<Component />, { emotion: true });
 ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-1badee62/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-cbbe811f/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/css/css.mdx b/docs/components/css/css.mdx
index e9a1292..3f7fb3d 100644
--- a/docs/components/css/css.mdx
+++ b/docs/components/css/css.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple CSS tag to support CSS in your document.
 
-<Frame background="subtle"><img src="../../images/previews/css-b26814a3/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/css-7dd14403/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/css/font.mdx b/docs/components/css/font.mdx
index b0bae2b..a71e884 100644
--- a/docs/components/css/font.mdx
+++ b/docs/components/css/font.mdx
@@ -16,7 +16,7 @@ Support
 
 Load a Google Font its URL. This will allow you to use the font in your document.
 
-<Frame background="subtle"><img src="../../images/previews/font-393a92da/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/font-e0a8ef44/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/css/margins.mdx b/docs/components/css/margins.mdx
index a148e31..60076a0 100644
--- a/docs/components/css/margins.mdx
+++ b/docs/components/css/margins.mdx
@@ -16,7 +16,7 @@ Support
 
 Set the page ratio and margin sizes in px. You can also use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).
 
-<Frame background="subtle"><img src="../../images/previews/margins-db4795b6/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/margins-50add8b7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/footnote/footnote.mdx b/docs/components/footnote/footnote.mdx
index e4527fd..54ac626 100644
--- a/docs/components/footnote/footnote.mdx
+++ b/docs/components/footnote/footnote.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/footnote-7de297f4/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/footnote-fa9b006a/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/latex/latex.mdx b/docs/components/latex/latex.mdx
index 002fcd8..aee5bef 100644
--- a/docs/components/latex/latex.mdx
+++ b/docs/components/latex/latex.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple Latex tag to support Latex in your document.
 
-<Frame background="subtle"><img src="../../images/previews/latex-83ad6403/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/latex-f2f93949/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -51,7 +51,7 @@ body {
 
 Write complex LaTeX formulas in your document.
 
-<Frame background="subtle"><img src="../../images/previews/latex-7a00ed36/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/latex-df0188b4/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/markdown/markdown.mdx b/docs/components/markdown/markdown.mdx
index fba4d57..929aa9d 100644
--- a/docs/components/markdown/markdown.mdx
+++ b/docs/components/markdown/markdown.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple Markdown tag to support Markdown in your document.
 
-<Frame background="subtle"><img src="../../images/previews/markdown-c8d0ecd4/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/markdown-788360ba/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -57,7 +57,7 @@ body {
 
 You can leverage the `overrides` prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.
 
-<Frame background="subtle"><img src="../../images/previews/markdown-882cc486/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/markdown-7e966af7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/shell/currentpagetop.mdx b/docs/components/shell/currentpagetop.mdx
index ad500d0..00386a1 100644
--- a/docs/components/shell/currentpagetop.mdx
+++ b/docs/components/shell/currentpagetop.mdx
@@ -18,7 +18,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/currentpagetop-9aae489e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/currentpagetop-81734720/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/shell/floatbottom.mdx b/docs/components/shell/floatbottom.mdx
index 23d46cf..6832d18 100644
--- a/docs/components/shell/floatbottom.mdx
+++ b/docs/components/shell/floatbottom.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/floatbottom-9a3986d7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/floatbottom-17237ced/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/shell/nobreak.mdx b/docs/components/shell/nobreak.mdx
index f80db0d..acb05bf 100644
--- a/docs/components/shell/nobreak.mdx
+++ b/docs/components/shell/nobreak.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/nobreak-d03f0d1f/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/nobreak-47b8dd06/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/shell/pagebottom.mdx b/docs/components/shell/pagebottom.mdx
index e9ddb53..1e3ba6d 100644
--- a/docs/components/shell/pagebottom.mdx
+++ b/docs/components/shell/pagebottom.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagebottom-206d811e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagebottom-f6fd9841/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/shell/pagebreak.mdx b/docs/components/shell/pagebreak.mdx
index f57bd30..3db45e0 100644
--- a/docs/components/shell/pagebreak.mdx
+++ b/docs/components/shell/pagebreak.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagebreak-88acdbdf/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagebreak-d3424866/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/shell/pagetop.mdx b/docs/components/shell/pagetop.mdx
index 87489c3..c957d02 100644
--- a/docs/components/shell/pagetop.mdx
+++ b/docs/components/shell/pagetop.mdx
@@ -18,7 +18,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagetop-9dd97ef3/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagetop-ef21c693/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/signature/field.mdx b/docs/components/signature/field.mdx
index 289c6d6..70213e9 100644
--- a/docs/components/signature/field.mdx
+++ b/docs/components/signature/field.mdx
@@ -46,7 +46,7 @@ Supported fields:
 | signerAttachment | Signer attachment field |
 | signerAttachmentOptional | Optional signer attachment field |
 
-<Frame background="subtle"><img src="../../images/previews/field-81a661f2/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/field-da48fb0c/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/tailwind/tailwind.mdx b/docs/components/tailwind/tailwind.mdx
index 4e55f44..6d31fd2 100644
--- a/docs/components/tailwind/tailwind.mdx
+++ b/docs/components/tailwind/tailwind.mdx
@@ -16,7 +16,7 @@ Support
 
 Use a simple Tailwind tag to support Tailwind in your document.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-d34cd362/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-45926711/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -57,7 +57,7 @@ body {
 
 You can also pass a custom Tailwind config to the Tailwind component.
 
-<Frame background="subtle"><img src="../../images/previews/tailwind-841def4d/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/tailwind-15d3ba0e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/variables/pagenumber.mdx b/docs/components/variables/pagenumber.mdx
index 695d77d..172e8a7 100644
--- a/docs/components/variables/pagenumber.mdx
+++ b/docs/components/variables/pagenumber.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagenumber-cc94f6f7/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagenumber-ea46baaf/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -51,7 +51,7 @@ body {
 
 You can use a custom CSS counter-style, by passing a known name or a custom counter style.
 
-<Frame background="subtle"><img src="../../images/previews/pagenumber-7e3be4c3/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagenumber-391d6c27/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/variables/pagesnumber.mdx b/docs/components/variables/pagesnumber.mdx
index 690f58d..63eea32 100644
--- a/docs/components/variables/pagesnumber.mdx
+++ b/docs/components/variables/pagesnumber.mdx
@@ -16,7 +16,7 @@ Support
 
 #### Preview
 
-<Frame background="subtle"><img src="../../images/previews/pagesnumber-a7d845b5/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/pagesnumber-10c1cbad/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/components/variables/runningh1.mdx b/docs/components/variables/runningh1.mdx
index 425cebd..45ebcec 100644
--- a/docs/components/variables/runningh1.mdx
+++ b/docs/components/variables/runningh1.mdx
@@ -18,7 +18,7 @@ Support
 
 Show the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).
 
-<Frame background="subtle"><img src="../../images/previews/runningh1-b41bbc29/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/runningh1-16658c8e/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
diff --git a/docs/images/previews/compile-2e394416/document.1.jpg b/docs/images/previews/compile-c4caf51a/document.1.jpg
similarity index 70%
rename from docs/images/previews/compile-2e394416/document.1.jpg
rename to docs/images/previews/compile-c4caf51a/document.1.jpg
index 4143aa9..9f5c978 100644
Binary files a/docs/images/previews/compile-2e394416/document.1.jpg and b/docs/images/previews/compile-c4caf51a/document.1.jpg differ
diff --git a/docs/images/previews/compile-2e394416/document.pdf b/docs/images/previews/compile-c4caf51a/document.pdf
similarity index 69%
rename from docs/images/previews/compile-2e394416/document.pdf
rename to docs/images/previews/compile-c4caf51a/document.pdf
index d772d27..a408866 100644
Binary files a/docs/images/previews/compile-2e394416/document.pdf and b/docs/images/previews/compile-c4caf51a/document.pdf differ
diff --git a/docs/images/previews/compile-1badee62/document.1.jpg b/docs/images/previews/compile-cbbe811f/document.1.jpg
similarity index 100%
rename from docs/images/previews/compile-1badee62/document.1.jpg
rename to docs/images/previews/compile-cbbe811f/document.1.jpg
diff --git a/docs/images/previews/compile-1badee62/document.pdf b/docs/images/previews/compile-cbbe811f/document.pdf
similarity index 98%
rename from docs/images/previews/compile-1badee62/document.pdf
rename to docs/images/previews/compile-cbbe811f/document.pdf
index c5e2112..2207f7b 100644
Binary files a/docs/images/previews/compile-1badee62/document.pdf and b/docs/images/previews/compile-cbbe811f/document.pdf differ
diff --git a/docs/images/previews/css-b26814a3/document.1.jpg b/docs/images/previews/css-7dd14403/document.1.jpg
similarity index 100%
rename from docs/images/previews/css-b26814a3/document.1.jpg
rename to docs/images/previews/css-7dd14403/document.1.jpg
diff --git a/docs/images/previews/css-b26814a3/document.pdf b/docs/images/previews/css-7dd14403/document.pdf
similarity index 92%
rename from docs/images/previews/css-b26814a3/document.pdf
rename to docs/images/previews/css-7dd14403/document.pdf
index 287c10d..42b3c2c 100644
Binary files a/docs/images/previews/css-b26814a3/document.pdf and b/docs/images/previews/css-7dd14403/document.pdf differ
diff --git a/docs/images/previews/currentpagetop-9aae489e/document.1.jpg b/docs/images/previews/currentpagetop-81734720/document.1.jpg
similarity index 100%
rename from docs/images/previews/currentpagetop-9aae489e/document.1.jpg
rename to docs/images/previews/currentpagetop-81734720/document.1.jpg
diff --git a/docs/images/previews/currentpagetop-9aae489e/document.pdf b/docs/images/previews/currentpagetop-81734720/document.pdf
similarity index 96%
rename from docs/images/previews/currentpagetop-9aae489e/document.pdf
rename to docs/images/previews/currentpagetop-81734720/document.pdf
index c851d4d..f6b5341 100644
Binary files a/docs/images/previews/currentpagetop-9aae489e/document.pdf and b/docs/images/previews/currentpagetop-81734720/document.pdf differ
diff --git a/docs/images/previews/field-81a661f2/document.1.jpg b/docs/images/previews/field-81a661f2/document.1.jpg
deleted file mode 100644
index d1d37cf..0000000
Binary files a/docs/images/previews/field-81a661f2/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/field-81a661f2/document.pdf b/docs/images/previews/field-81a661f2/document.pdf
deleted file mode 100644
index b202af7..0000000
Binary files a/docs/images/previews/field-81a661f2/document.pdf and /dev/null differ
diff --git a/docs/images/previews/field-da48fb0c/document.1.jpg b/docs/images/previews/field-da48fb0c/document.1.jpg
new file mode 100644
index 0000000..5958cab
Binary files /dev/null and b/docs/images/previews/field-da48fb0c/document.1.jpg differ
diff --git a/docs/images/previews/field-da48fb0c/document.pdf b/docs/images/previews/field-da48fb0c/document.pdf
new file mode 100644
index 0000000..64a1710
Binary files /dev/null and b/docs/images/previews/field-da48fb0c/document.pdf differ
diff --git a/docs/images/previews/floatbottom-9a3986d7/document.1.jpg b/docs/images/previews/floatbottom-17237ced/document.1.jpg
similarity index 58%
rename from docs/images/previews/floatbottom-9a3986d7/document.1.jpg
rename to docs/images/previews/floatbottom-17237ced/document.1.jpg
index 43486f8..673f490 100644
Binary files a/docs/images/previews/floatbottom-9a3986d7/document.1.jpg and b/docs/images/previews/floatbottom-17237ced/document.1.jpg differ
diff --git a/docs/images/previews/floatbottom-17237ced/document.pdf b/docs/images/previews/floatbottom-17237ced/document.pdf
new file mode 100644
index 0000000..0558eb5
Binary files /dev/null and b/docs/images/previews/floatbottom-17237ced/document.pdf differ
diff --git a/docs/images/previews/floatbottom-9a3986d7/document.pdf b/docs/images/previews/floatbottom-9a3986d7/document.pdf
deleted file mode 100644
index 42f4f64..0000000
Binary files a/docs/images/previews/floatbottom-9a3986d7/document.pdf and /dev/null differ
diff --git a/docs/images/previews/font-393a92da/document.1.jpg b/docs/images/previews/font-e0a8ef44/document.1.jpg
similarity index 100%
rename from docs/images/previews/font-393a92da/document.1.jpg
rename to docs/images/previews/font-e0a8ef44/document.1.jpg
diff --git a/docs/images/previews/font-393a92da/document.pdf b/docs/images/previews/font-e0a8ef44/document.pdf
similarity index 50%
rename from docs/images/previews/font-393a92da/document.pdf
rename to docs/images/previews/font-e0a8ef44/document.pdf
index f3fefa8..b772a74 100644
Binary files a/docs/images/previews/font-393a92da/document.pdf and b/docs/images/previews/font-e0a8ef44/document.pdf differ
diff --git a/docs/images/previews/footnote-7de297f4/document.1.jpg b/docs/images/previews/footnote-7de297f4/document.1.jpg
deleted file mode 100644
index cf33c38..0000000
Binary files a/docs/images/previews/footnote-7de297f4/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/footnote-7de297f4/document.pdf b/docs/images/previews/footnote-7de297f4/document.pdf
deleted file mode 100644
index 77f346d..0000000
Binary files a/docs/images/previews/footnote-7de297f4/document.pdf and /dev/null differ
diff --git a/docs/images/previews/footnote-fa9b006a/document.1.jpg b/docs/images/previews/footnote-fa9b006a/document.1.jpg
new file mode 100644
index 0000000..1eee977
Binary files /dev/null and b/docs/images/previews/footnote-fa9b006a/document.1.jpg differ
diff --git a/docs/images/previews/footnote-fa9b006a/document.pdf b/docs/images/previews/footnote-fa9b006a/document.pdf
new file mode 100644
index 0000000..54c8c20
Binary files /dev/null and b/docs/images/previews/footnote-fa9b006a/document.pdf differ
diff --git a/docs/images/previews/latex-7a00ed36/document.1.jpg b/docs/images/previews/latex-df0188b4/document.1.jpg
similarity index 100%
rename from docs/images/previews/latex-7a00ed36/document.1.jpg
rename to docs/images/previews/latex-df0188b4/document.1.jpg
diff --git a/docs/images/previews/latex-7a00ed36/document.pdf b/docs/images/previews/latex-df0188b4/document.pdf
similarity index 99%
rename from docs/images/previews/latex-7a00ed36/document.pdf
rename to docs/images/previews/latex-df0188b4/document.pdf
index b884ca2..d144664 100644
Binary files a/docs/images/previews/latex-7a00ed36/document.pdf and b/docs/images/previews/latex-df0188b4/document.pdf differ
diff --git a/docs/images/previews/latex-83ad6403/document.1.jpg b/docs/images/previews/latex-f2f93949/document.1.jpg
similarity index 100%
rename from docs/images/previews/latex-83ad6403/document.1.jpg
rename to docs/images/previews/latex-f2f93949/document.1.jpg
diff --git a/docs/images/previews/latex-83ad6403/document.pdf b/docs/images/previews/latex-f2f93949/document.pdf
similarity index 97%
rename from docs/images/previews/latex-83ad6403/document.pdf
rename to docs/images/previews/latex-f2f93949/document.pdf
index 5f46e32..c76a91f 100644
Binary files a/docs/images/previews/latex-83ad6403/document.pdf and b/docs/images/previews/latex-f2f93949/document.pdf differ
diff --git a/docs/images/previews/margins-50add8b7/document.1.jpg b/docs/images/previews/margins-50add8b7/document.1.jpg
new file mode 100644
index 0000000..65a7154
Binary files /dev/null and b/docs/images/previews/margins-50add8b7/document.1.jpg differ
diff --git a/docs/images/previews/margins-db4795b6/document.pdf b/docs/images/previews/margins-50add8b7/document.pdf
similarity index 68%
rename from docs/images/previews/margins-db4795b6/document.pdf
rename to docs/images/previews/margins-50add8b7/document.pdf
index 85a9a4d..3a260d9 100644
Binary files a/docs/images/previews/margins-db4795b6/document.pdf and b/docs/images/previews/margins-50add8b7/document.pdf differ
diff --git a/docs/images/previews/margins-db4795b6/document.1.jpg b/docs/images/previews/margins-db4795b6/document.1.jpg
deleted file mode 100644
index af8ab1e..0000000
Binary files a/docs/images/previews/margins-db4795b6/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/markdown-788360ba/document.1.jpg b/docs/images/previews/markdown-788360ba/document.1.jpg
new file mode 100644
index 0000000..f5367f8
Binary files /dev/null and b/docs/images/previews/markdown-788360ba/document.1.jpg differ
diff --git a/docs/images/previews/markdown-c8d0ecd4/document.pdf b/docs/images/previews/markdown-788360ba/document.pdf
similarity index 55%
rename from docs/images/previews/markdown-c8d0ecd4/document.pdf
rename to docs/images/previews/markdown-788360ba/document.pdf
index 68de45d..d915778 100644
Binary files a/docs/images/previews/markdown-c8d0ecd4/document.pdf and b/docs/images/previews/markdown-788360ba/document.pdf differ
diff --git a/docs/images/previews/markdown-7e966af7/document.1.jpg b/docs/images/previews/markdown-7e966af7/document.1.jpg
new file mode 100644
index 0000000..fbb4ba3
Binary files /dev/null and b/docs/images/previews/markdown-7e966af7/document.1.jpg differ
diff --git a/docs/images/previews/markdown-882cc486/document.pdf b/docs/images/previews/markdown-7e966af7/document.pdf
similarity index 50%
rename from docs/images/previews/markdown-882cc486/document.pdf
rename to docs/images/previews/markdown-7e966af7/document.pdf
index 30d6ec2..013705f 100644
Binary files a/docs/images/previews/markdown-882cc486/document.pdf and b/docs/images/previews/markdown-7e966af7/document.pdf differ
diff --git a/docs/images/previews/markdown-882cc486/document.1.jpg b/docs/images/previews/markdown-882cc486/document.1.jpg
deleted file mode 100644
index c9b1e65..0000000
Binary files a/docs/images/previews/markdown-882cc486/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/markdown-c8d0ecd4/document.1.jpg b/docs/images/previews/markdown-c8d0ecd4/document.1.jpg
deleted file mode 100644
index d3323fe..0000000
Binary files a/docs/images/previews/markdown-c8d0ecd4/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/nobreak-47b8dd06/document.1.jpg b/docs/images/previews/nobreak-47b8dd06/document.1.jpg
new file mode 100644
index 0000000..767f017
Binary files /dev/null and b/docs/images/previews/nobreak-47b8dd06/document.1.jpg differ
diff --git a/docs/images/previews/nobreak-47b8dd06/document.pdf b/docs/images/previews/nobreak-47b8dd06/document.pdf
new file mode 100644
index 0000000..6b9d3c3
Binary files /dev/null and b/docs/images/previews/nobreak-47b8dd06/document.pdf differ
diff --git a/docs/images/previews/nobreak-d03f0d1f/document.1.jpg b/docs/images/previews/nobreak-d03f0d1f/document.1.jpg
deleted file mode 100644
index a22ea50..0000000
Binary files a/docs/images/previews/nobreak-d03f0d1f/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/nobreak-d03f0d1f/document.pdf b/docs/images/previews/nobreak-d03f0d1f/document.pdf
deleted file mode 100644
index 7d43fb7..0000000
Binary files a/docs/images/previews/nobreak-d03f0d1f/document.pdf and /dev/null differ
diff --git a/docs/images/previews/pagebottom-206d811e/document.1.jpg b/docs/images/previews/pagebottom-f6fd9841/document.1.jpg
similarity index 100%
rename from docs/images/previews/pagebottom-206d811e/document.1.jpg
rename to docs/images/previews/pagebottom-f6fd9841/document.1.jpg
diff --git a/docs/images/previews/pagebottom-206d811e/document.pdf b/docs/images/previews/pagebottom-f6fd9841/document.pdf
similarity index 96%
rename from docs/images/previews/pagebottom-206d811e/document.pdf
rename to docs/images/previews/pagebottom-f6fd9841/document.pdf
index b1031a5..e3c9182 100644
Binary files a/docs/images/previews/pagebottom-206d811e/document.pdf and b/docs/images/previews/pagebottom-f6fd9841/document.pdf differ
diff --git a/docs/images/previews/pagebreak-88acdbdf/document.pdf b/docs/images/previews/pagebreak-88acdbdf/document.pdf
deleted file mode 100644
index 0f26986..0000000
Binary files a/docs/images/previews/pagebreak-88acdbdf/document.pdf and /dev/null differ
diff --git a/docs/images/previews/pagebreak-88acdbdf/document.1.jpg b/docs/images/previews/pagebreak-d3424866/document.1.jpg
similarity index 69%
rename from docs/images/previews/pagebreak-88acdbdf/document.1.jpg
rename to docs/images/previews/pagebreak-d3424866/document.1.jpg
index 423d21b..dc88f69 100644
Binary files a/docs/images/previews/pagebreak-88acdbdf/document.1.jpg and b/docs/images/previews/pagebreak-d3424866/document.1.jpg differ
diff --git a/docs/images/previews/pagebreak-88acdbdf/document.2.jpg b/docs/images/previews/pagebreak-d3424866/document.2.jpg
similarity index 67%
rename from docs/images/previews/pagebreak-88acdbdf/document.2.jpg
rename to docs/images/previews/pagebreak-d3424866/document.2.jpg
index 0040448..426a828 100644
Binary files a/docs/images/previews/pagebreak-88acdbdf/document.2.jpg and b/docs/images/previews/pagebreak-d3424866/document.2.jpg differ
diff --git a/docs/images/previews/pagebreak-d3424866/document.pdf b/docs/images/previews/pagebreak-d3424866/document.pdf
new file mode 100644
index 0000000..39d9298
Binary files /dev/null and b/docs/images/previews/pagebreak-d3424866/document.pdf differ
diff --git a/docs/images/previews/pagenumber-7e3be4c3/document.1.jpg b/docs/images/previews/pagenumber-391d6c27/document.1.jpg
similarity index 95%
rename from docs/images/previews/pagenumber-7e3be4c3/document.1.jpg
rename to docs/images/previews/pagenumber-391d6c27/document.1.jpg
index 30ba34b..7129a8b 100644
Binary files a/docs/images/previews/pagenumber-7e3be4c3/document.1.jpg and b/docs/images/previews/pagenumber-391d6c27/document.1.jpg differ
diff --git a/docs/images/previews/pagenumber-7e3be4c3/document.pdf b/docs/images/previews/pagenumber-391d6c27/document.pdf
similarity index 68%
rename from docs/images/previews/pagenumber-7e3be4c3/document.pdf
rename to docs/images/previews/pagenumber-391d6c27/document.pdf
index 1b16ae0..7f18b6c 100644
Binary files a/docs/images/previews/pagenumber-7e3be4c3/document.pdf and b/docs/images/previews/pagenumber-391d6c27/document.pdf differ
diff --git a/docs/images/previews/pagenumber-cc94f6f7/document.1.jpg b/docs/images/previews/pagenumber-ea46baaf/document.1.jpg
similarity index 95%
rename from docs/images/previews/pagenumber-cc94f6f7/document.1.jpg
rename to docs/images/previews/pagenumber-ea46baaf/document.1.jpg
index e66333d..3d10494 100644
Binary files a/docs/images/previews/pagenumber-cc94f6f7/document.1.jpg and b/docs/images/previews/pagenumber-ea46baaf/document.1.jpg differ
diff --git a/docs/images/previews/pagenumber-cc94f6f7/document.pdf b/docs/images/previews/pagenumber-ea46baaf/document.pdf
similarity index 69%
rename from docs/images/previews/pagenumber-cc94f6f7/document.pdf
rename to docs/images/previews/pagenumber-ea46baaf/document.pdf
index e1e2d37..0f5ac2a 100644
Binary files a/docs/images/previews/pagenumber-cc94f6f7/document.pdf and b/docs/images/previews/pagenumber-ea46baaf/document.pdf differ
diff --git a/docs/images/previews/pagesnumber-a7d845b5/document.1.jpg b/docs/images/previews/pagesnumber-10c1cbad/document.1.jpg
similarity index 89%
rename from docs/images/previews/pagesnumber-a7d845b5/document.1.jpg
rename to docs/images/previews/pagesnumber-10c1cbad/document.1.jpg
index 239f0d7..939913b 100644
Binary files a/docs/images/previews/pagesnumber-a7d845b5/document.1.jpg and b/docs/images/previews/pagesnumber-10c1cbad/document.1.jpg differ
diff --git a/docs/images/previews/pagesnumber-a7d845b5/document.pdf b/docs/images/previews/pagesnumber-10c1cbad/document.pdf
similarity index 59%
rename from docs/images/previews/pagesnumber-a7d845b5/document.pdf
rename to docs/images/previews/pagesnumber-10c1cbad/document.pdf
index 162416e..b90f863 100644
Binary files a/docs/images/previews/pagesnumber-a7d845b5/document.pdf and b/docs/images/previews/pagesnumber-10c1cbad/document.pdf differ
diff --git a/docs/images/previews/pagetop-9dd97ef3/document.1.jpg b/docs/images/previews/pagetop-ef21c693/document.1.jpg
similarity index 100%
rename from docs/images/previews/pagetop-9dd97ef3/document.1.jpg
rename to docs/images/previews/pagetop-ef21c693/document.1.jpg
diff --git a/docs/images/previews/pagetop-9dd97ef3/document.pdf b/docs/images/previews/pagetop-ef21c693/document.pdf
similarity index 96%
rename from docs/images/previews/pagetop-9dd97ef3/document.pdf
rename to docs/images/previews/pagetop-ef21c693/document.pdf
index 7413fc6..45c04cd 100644
Binary files a/docs/images/previews/pagetop-9dd97ef3/document.pdf and b/docs/images/previews/pagetop-ef21c693/document.pdf differ
diff --git a/docs/images/previews/runningh1-16658c8e/document.1.jpg b/docs/images/previews/runningh1-16658c8e/document.1.jpg
new file mode 100644
index 0000000..a2cc307
Binary files /dev/null and b/docs/images/previews/runningh1-16658c8e/document.1.jpg differ
diff --git a/docs/images/previews/runningh1-16658c8e/document.pdf b/docs/images/previews/runningh1-16658c8e/document.pdf
new file mode 100644
index 0000000..7c138b7
Binary files /dev/null and b/docs/images/previews/runningh1-16658c8e/document.pdf differ
diff --git a/docs/images/previews/runningh1-b41bbc29/document.1.jpg b/docs/images/previews/runningh1-b41bbc29/document.1.jpg
deleted file mode 100644
index 8125057..0000000
Binary files a/docs/images/previews/runningh1-b41bbc29/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/runningh1-b41bbc29/document.pdf b/docs/images/previews/runningh1-b41bbc29/document.pdf
deleted file mode 100644
index 2f2a396..0000000
Binary files a/docs/images/previews/runningh1-b41bbc29/document.pdf and /dev/null differ
diff --git a/docs/images/previews/tailwind-15d3ba0e/document.1.jpg b/docs/images/previews/tailwind-15d3ba0e/document.1.jpg
new file mode 100644
index 0000000..6dee973
Binary files /dev/null and b/docs/images/previews/tailwind-15d3ba0e/document.1.jpg differ
diff --git a/docs/images/previews/tailwind-841def4d/document.pdf b/docs/images/previews/tailwind-15d3ba0e/document.pdf
similarity index 57%
rename from docs/images/previews/tailwind-841def4d/document.pdf
rename to docs/images/previews/tailwind-15d3ba0e/document.pdf
index 8c75f48..8f9d99c 100644
Binary files a/docs/images/previews/tailwind-841def4d/document.pdf and b/docs/images/previews/tailwind-15d3ba0e/document.pdf differ
diff --git a/docs/images/previews/tailwind-45926711/document.1.jpg b/docs/images/previews/tailwind-45926711/document.1.jpg
new file mode 100644
index 0000000..e2edf7b
Binary files /dev/null and b/docs/images/previews/tailwind-45926711/document.1.jpg differ
diff --git a/docs/images/previews/tailwind-d34cd362/document.pdf b/docs/images/previews/tailwind-45926711/document.pdf
similarity index 60%
rename from docs/images/previews/tailwind-d34cd362/document.pdf
rename to docs/images/previews/tailwind-45926711/document.pdf
index 24d87ff..b50b210 100644
Binary files a/docs/images/previews/tailwind-d34cd362/document.pdf and b/docs/images/previews/tailwind-45926711/document.pdf differ
diff --git a/docs/images/previews/tailwind-841def4d/document.1.jpg b/docs/images/previews/tailwind-841def4d/document.1.jpg
deleted file mode 100644
index c669ed5..0000000
Binary files a/docs/images/previews/tailwind-841def4d/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/tailwind-d34cd362/document.1.jpg b/docs/images/previews/tailwind-d34cd362/document.1.jpg
deleted file mode 100644
index 2aa1955..0000000
Binary files a/docs/images/previews/tailwind-d34cd362/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/ui-templates-invoice-b87296fc/document.1.jpg b/docs/images/previews/ui-templates-invoice-8da74a96/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-invoice-b87296fc/document.1.jpg
rename to docs/images/previews/ui-templates-invoice-8da74a96/document.1.jpg
diff --git a/docs/images/previews/ui-templates-invoice-b87296fc/document.pdf b/docs/images/previews/ui-templates-invoice-8da74a96/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-invoice-b87296fc/document.pdf
rename to docs/images/previews/ui-templates-invoice-8da74a96/document.pdf
index 003c86e..6c6f904 100644
Binary files a/docs/images/previews/ui-templates-invoice-b87296fc/document.pdf and b/docs/images/previews/ui-templates-invoice-8da74a96/document.pdf differ
diff --git a/docs/images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg b/docs/images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg
deleted file mode 100644
index 5648893..0000000
Binary files a/docs/images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg b/docs/images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg
new file mode 100644
index 0000000..09b32c4
Binary files /dev/null and b/docs/images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg differ
diff --git a/docs/images/previews/ui-templates-invoice-advanced-4497fe25/document.pdf b/docs/images/previews/ui-templates-invoice-advanced-c81d4542/document.pdf
similarity index 65%
rename from docs/images/previews/ui-templates-invoice-advanced-4497fe25/document.pdf
rename to docs/images/previews/ui-templates-invoice-advanced-c81d4542/document.pdf
index 2a4dff3..e7a295b 100644
Binary files a/docs/images/previews/ui-templates-invoice-advanced-4497fe25/document.pdf and b/docs/images/previews/ui-templates-invoice-advanced-c81d4542/document.pdf differ
diff --git a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.1.jpg b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-nda-markdown-0c872119/document.1.jpg
rename to docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.1.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.2.jpg b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.2.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-nda-markdown-0c872119/document.2.jpg
rename to docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.2.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.3.jpg b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.3.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-nda-markdown-0c872119/document.3.jpg
rename to docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.3.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.4.jpg b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.4.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-nda-markdown-0c872119/document.4.jpg
rename to docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.4.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.5.jpg b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.5.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-nda-markdown-0c872119/document.5.jpg
rename to docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.5.jpg
diff --git a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.pdf b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-nda-markdown-0c872119/document.pdf
rename to docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.pdf
index 63f7d2d..33bc7b1 100644
Binary files a/docs/images/previews/ui-templates-nda-markdown-0c872119/document.pdf and b/docs/images/previews/ui-templates-nda-markdown-daf9ece1/document.pdf differ
diff --git a/docs/images/previews/ui-templates-receipt-3f97df85/document.1.jpg b/docs/images/previews/ui-templates-receipt-0d823fc6/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-receipt-3f97df85/document.1.jpg
rename to docs/images/previews/ui-templates-receipt-0d823fc6/document.1.jpg
diff --git a/docs/images/previews/ui-templates-receipt-3f97df85/document.pdf b/docs/images/previews/ui-templates-receipt-0d823fc6/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-receipt-3f97df85/document.pdf
rename to docs/images/previews/ui-templates-receipt-0d823fc6/document.pdf
index 83ddb83..f2b2fcb 100644
Binary files a/docs/images/previews/ui-templates-receipt-3f97df85/document.pdf and b/docs/images/previews/ui-templates-receipt-0d823fc6/document.pdf differ
diff --git a/docs/images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg b/docs/images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg
new file mode 100644
index 0000000..2caedb5
Binary files /dev/null and b/docs/images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg differ
diff --git a/docs/images/previews/ui-templates-report-charts-1339f0ec/document.pdf b/docs/images/previews/ui-templates-report-charts-1339f0ec/document.pdf
new file mode 100644
index 0000000..c5f5059
Binary files /dev/null and b/docs/images/previews/ui-templates-report-charts-1339f0ec/document.pdf differ
diff --git a/docs/images/previews/ui-templates-report-charts-7d5e23ad/document.1.jpg b/docs/images/previews/ui-templates-report-charts-7d5e23ad/document.1.jpg
deleted file mode 100644
index 41c3197..0000000
Binary files a/docs/images/previews/ui-templates-report-charts-7d5e23ad/document.1.jpg and /dev/null differ
diff --git a/docs/images/previews/ui-templates-report-charts-7d5e23ad/document.pdf b/docs/images/previews/ui-templates-report-charts-7d5e23ad/document.pdf
deleted file mode 100644
index 1989ef5..0000000
Binary files a/docs/images/previews/ui-templates-report-charts-7d5e23ad/document.pdf and /dev/null differ
diff --git a/docs/images/previews/ui-templates-scientific-report-d26af32f/document.1.jpg b/docs/images/previews/ui-templates-scientific-report-de8367bc/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-scientific-report-d26af32f/document.1.jpg
rename to docs/images/previews/ui-templates-scientific-report-de8367bc/document.1.jpg
diff --git a/docs/images/previews/ui-templates-scientific-report-d26af32f/document.2.jpg b/docs/images/previews/ui-templates-scientific-report-de8367bc/document.2.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-scientific-report-d26af32f/document.2.jpg
rename to docs/images/previews/ui-templates-scientific-report-de8367bc/document.2.jpg
diff --git a/docs/images/previews/ui-templates-scientific-report-d26af32f/document.pdf b/docs/images/previews/ui-templates-scientific-report-de8367bc/document.pdf
similarity index 83%
rename from docs/images/previews/ui-templates-scientific-report-d26af32f/document.pdf
rename to docs/images/previews/ui-templates-scientific-report-de8367bc/document.pdf
index 8e65e81..289c14c 100644
Binary files a/docs/images/previews/ui-templates-scientific-report-d26af32f/document.pdf and b/docs/images/previews/ui-templates-scientific-report-de8367bc/document.pdf differ
diff --git a/docs/introduction.mdx b/docs/introduction.mdx
index 3a6c344..901afe4 100644
--- a/docs/introduction.mdx
+++ b/docs/introduction.mdx
@@ -41,72 +41,25 @@ React Print is designed to be incrementally adopted, so you can add it to most c
 
 A set of standard components to help you build amazing documents without having to deal with the mess of creating complex layouts and maintaining archaic markup.
 
-<Cards>
-  <Card
-    title="compile"
-    icon="fa-solid fa-code"
-    href="/react-print/components/compile"
-  >
+<Cards><Card title="compile" icon="fa-solid fa-code" href="/react-print/components/compile">
     Compile a React component to a string with the Onedoc print styles.
-  </Card>
-  <Card
-    title="CSS"
-    icon="fa-brands fa-css3-alt"
-    href="/react-print/components/css"
-  >
+  </Card><Card title="CSS" icon="fa-brands fa-css3-alt" href="/react-print/components/css">
     Allows adding CSS to the document while securely parsing and escaping it.
-  </Card>
-  <Card
-    title="Footnote"
-    icon="fa-solid fa-info"
-    href="/react-print/components/footnote"
-  >
+  </Card><Card title="Footnote" icon="fa-solid fa-info" href="/react-print/components/footnote">
     Create automatically numbered footnotes.
-  </Card>
-  <Card
-    title="LaTeX"
-    icon="fa-solid fa-square-root-variable"
-    href="/react-print/components/latex"
-  >
+  </Card><Card title="LaTeX" icon="fa-solid fa-square-root-variable" href="/react-print/components/latex">
     Render LaTeX formulas right in your React components.
-  </Card>
-  <Card
-    title="Markdown"
-    icon="fa-brands fa-markdown"
-    href="/react-print/components/markdown"
-  >
+  </Card><Card title="Markdown" icon="fa-brands fa-markdown" href="/react-print/components/markdown">
     Render Markdown inside your templates.
-  </Card>
-  <Card
-    title="Shell"
-    icon="fa-solid fa-border-all"
-    href="/react-print/components/shell"
-  >
+  </Card><Card title="Shell" icon="fa-solid fa-border-all" href="/react-print/components/shell">
     Display content in other page regions.
-  </Card>
-  <Card
-    title="Signature"
-    icon="signature"
-    href="/react-print/components/signature"
-  >
+  </Card><Card title="Signature" icon="signature" href="/react-print/components/signature">
     Add signature fields to your document.
-  </Card>
-  <Card
-    title="Tailwind"
-    icon="fa-solid fa-wind"
-    href="/react-print/components/tailwind"
-  >
+  </Card><Card title="Tailwind" icon="fa-solid fa-wind" href="/react-print/components/tailwind">
     A simple, drop-in way to use Tailwind CSS in your components.
-  </Card>
-  <Card
-    title="Variables"
-    icon="fa-solid fa-subscript"
-    href="/react-print/components/variables"
-  >
-    Display dynamic values based on your document, such as page numbers and
-    running headers.
-  </Card>
-</Cards>
+  </Card><Card title="Variables" icon="fa-solid fa-subscript" href="/react-print/components/variables">
+    Display dynamic values based on your document, such as page numbers and running headers.
+  </Card></Cards>
 <Note>
   Help us increase the number of components and start being an active member of
   the react-print community by
diff --git a/docs/mint.json b/docs/mint.json
index 658d35f..443f5ed 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -75,15 +75,22 @@
   "navigation": [
     {
       "group": "Overview",
-      "pages": ["introduction", "contributing"]
+      "pages": [
+        "introduction",
+        "contributing"
+      ]
     },
     {
       "group": "Getting Started",
-      "pages": ["getting-started/setup"]
+      "pages": [
+        "getting-started/setup"
+      ]
     },
     {
       "group": "Integrations",
-      "pages": ["integrations/onedoc"]
+      "pages": [
+        "integrations/onedoc"
+      ]
     },
     {
       "group": "Components",
@@ -112,21 +119,30 @@
         },
         {
           "group": "Receipts",
-          "pages": ["ui/templates/receipt"]
+          "pages": [
+            "ui/templates/receipt"
+          ]
         },
         {
           "group": "NDA",
-          "pages": ["ui/templates/nda-markdown"]
+          "pages": [
+            "ui/templates/nda-markdown"
+          ]
         },
         {
           "group": "Invoices",
-          "pages": ["ui/templates/invoice", "ui/templates/invoice-advanced"]
+          "pages": [
+            "ui/templates/invoice",
+            "ui/templates/invoice-advanced"
+          ]
         }
       ]
     },
     {
       "group": "Troubleshooting",
-      "pages": ["troubleshooting/faq"]
+      "pages": [
+        "troubleshooting/faq"
+      ]
     }
   ],
   "footerSocials": {
@@ -134,4 +150,4 @@
     "github": "https://github.com/OnedocLabs/onedoc",
     "linkedin": "https://www.linkedin.com/company/onedoclabs"
   }
-}
+}
\ No newline at end of file
diff --git a/docs/sortedDocs.json b/docs/sortedDocs.json
index c946f28..6937c4e 100644
--- a/docs/sortedDocs.json
+++ b/docs/sortedDocs.json
@@ -1 +1 @@
-[{"icon":"fa-solid fa-code","name":"compile","description":"Compile a React component to a string with the Onedoc print styles.","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/compile","files":[{"name":"compile","baseName":"compile","path":"compile/compile.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/compile/compile.mdx","markdown":"---\ntitle: compile\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nA simple function to compile a React component to an HTML string with the Onedoc print styles.\n          ```jsx\n          const html = await compile(<Component />);\n          ```\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/compile-2e394416/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { compile } from \"@fileforge/react-print\";\n\n<Tailwind>\n  <div className=\"bg-red-400\">Hello World!</div>\n</Tailwind>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Emotion CSS\n\nPass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(<Component />, { emotion: true });\n```\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/compile-1badee62/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { compile } from \"@fileforge/react-print\";\nimport { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";\n\n<>\n  <ChakraProvider>\n    <Button colorScheme=\"blue\">Hello</Button>\n  </ChakraProvider>\n</>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"compile","description":"","components":{"compile":{"server":true,"client":true,"examples":{"default":{"description":"A simple function to compile a React component to an HTML string with the Onedoc print styles.\n          ```jsx\n          const html = await compile(<Component />);\n          ```","template":{"key":null,"ref":null,"props":{"children":{"type":"div","key":null,"ref":null,"props":{"className":"bg-red-400","children":"Hello World!"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"templateString":"<Tailwind><div className=\"bg-red-400\">Hello World!</div></Tailwind>"},"emotion":{"description":"Pass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(<Component />, { emotion: true });\n```","template":{"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":{"type":{},"key":null,"ref":null,"props":{"colorScheme":"blue","children":"Hello"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"name":"Emotion CSS","compileOptions":{"emotion":true},"externalImports":["import { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";"],"templateString":"(\n            <>\n              <ChakraProvider>\n                <Button colorScheme=\"blue\">Hello</Button>\n              </ChakraProvider>\n            </>\n          )"}}}}}}]},{"icon":"fa-brands fa-css3-alt","name":"CSS","description":"Allows adding CSS to the document while securely parsing and escaping it.\n\nNB: While you can add regular CSS with the `<style>` tag, it's recommended to use the `CSS` component to ensure that the CSS is properly escaped, most notably when using URLs or other potentially unsafe content.","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/css","files":[{"name":"CSS","baseName":"css","path":"css/css.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/css/css.mdx","markdown":"---\ntitle: CSS\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple CSS tag to support CSS in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/css-b26814a3/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { CSS } from \"@fileforge/react-print\";\n\n<CSS>{`@page { size: a4 landscape; }`}</CSS>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"CSS","description":"","components":{"CSS":{"server":true,"client":true,"examples":{"default":{"description":"Use a simple CSS tag to support CSS in your document.","template":{"key":null,"ref":null,"props":{"children":"@page { size: a4 landscape; }"},"_owner":null,"_store":{}},"templateString":"<CSS>{`@page { size: a4 landscape; }`}</CSS>"}}}}}},{"name":"Font","baseName":"css","path":"css/css.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/css/font.mdx","markdown":"---\ntitle: Font\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nLoad a Google Font its URL. This will allow you to use the font in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/font-393a92da/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Font } from \"@fileforge/react-print\";\n\n<React.Fragment>\n  <Font url=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap\" />\n  <p style={{ fontFamily: \"Roboto, sans-serif\" }}>\n    This text uses the Roboto Light font.\n  </p>\n</React.Fragment>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Font","description":"","components":{"Font":{"server":true,"client":true,"examples":{"default":{"name":"Load a Google Font","description":"Load a Google Font its URL. This will allow you to use the font in your document.","template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"url":"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"style":{"fontFamily":"Roboto, sans-serif"},"children":"This text uses the Roboto Light font."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <React.Fragment>\n              <Font url=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap\" />\n              <p style={{ fontFamily: \"Roboto, sans-serif\" }}>\n                This text uses the Roboto Light font.\n              </p>\n            </React.Fragment>\n          )"}}}}}},{"name":"Margins","baseName":"css","path":"css/css.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/css/margins.mdx","markdown":"---\ntitle: Margins\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nSet the page ratio and margin sizes in px. You can also use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/margins-db4795b6/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Margins } from \"@fileforge/react-print\";\n\n<React.Fragment>\n  <CSS>{`body{background-color:lightblue}`}</CSS>\n  <Margins pageRatio=\"A4\" top=\"100\" right=\"100\" left=\"100\" bottom=\"100\" />\n  <div>Hello world!</div>\n</React.Fragment>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Margins","description":"","components":{"Margins":{"server":true,"client":true,"examples":{"default":{"name":"Layout","description":"Set the page ratio and margin sizes in px. You can also use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).","template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"children":"body{background-color:lightblue}"},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"pageRatio":"A4","top":"100","right":"100","left":"100","bottom":"100"},"_owner":null,"_store":{}},{"type":"div","key":null,"ref":null,"props":{"children":"Hello world!"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <React.Fragment>\n              <CSS>{`body{background-color:lightblue}`}</CSS>\n              <Margins pageRatio=\"A4\" top=\"100\" right=\"100\" left=\"100\" bottom=\"100\"/>\n              <div>Hello world!</div>\n            </React.Fragment>\n          )"}}}}}}]},{"icon":"fa-solid fa-info","name":"Footnote","description":"Create automatically numbered footnotes.","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/footnote","files":[{"name":"Footnote","baseName":"footnote","path":"footnote/footnote.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/footnote/footnote.mdx","markdown":"---\ntitle: Footnote\n\n\n---\n\nCreates an automatically numbered footnote. This will remove the footnote content from the document flow and place it at the bottom of the page.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/footnote-7de297f4/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Footnote } from \"@fileforge/react-print\";\n\n<div>\n  This is a footnote to explaning what CSS{\" \"}\n  <Footnote>\n    CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language\n    for laying out and structuring web pages (HTML or XML).\n  </Footnote>{\" \"}\n  is.\n</div>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Footnote","description":"","components":{"Footnote":{"server":true,"client":true,"examples":{"default":{"template":{"type":"div","key":null,"ref":null,"props":{"children":["This is a footnote to explaning what CSS ",{"key":null,"ref":null,"props":{"children":"CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML)."},"_owner":null,"_store":{}}," is."]},"_owner":null,"_store":{}},"templateString":"<div>This is a footnote to explaning what CSS <Footnote>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML).</Footnote> is.</div>"}}}}}}]},{"icon":"fa-solid fa-square-root-variable","name":"LaTeX","description":"Render LaTeX formulas right in your React components.\n\n<Warning>\nLaTeX rendering is still in beta. Please report any issues you encounter on our [Discord](https://discord.com/invite/uRJE6e2rgr).\n</Warning>\n\n<Note>Rendering LaTeX using KaTeX requires pulling a remote stylesshet hosted by jsdelivr. This is done to prevent the styles from being purged.</Note>\n\n<Tip>You can use `String.raw` to avoid escaping LaTeX backslashes.</Tip>","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/latex","files":[{"name":"Latex","baseName":"latex","path":"latex/latex.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/latex/latex.mdx","markdown":"---\ntitle: Latex\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple Latex tag to support Latex in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/latex-83ad6403/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Latex } from \"@fileforge/react-print\";\n\n<Latex>{String.raw`\\frac{1}{2}`}</Latex>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Complex\n\nWrite complex LaTeX formulas in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/latex-7a00ed36/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Latex } from \"@fileforge/react-print\";\n\n<Latex>{String.raw`% \\f is defined as #1f(#2) using the macro\n\\f\\relax{x} = \\int_{-\\infty}^\\infty\n    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n    \\,d\\xi`}</Latex>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"Latex","description":"","components":{"Latex":{"server":true,"client":true,"examples":{"default":{"description":"Use a simple Latex tag to support Latex in your document.","template":{"key":null,"ref":null,"props":{"children":"\\frac{1}{2}"},"_owner":null,"_store":{}},"templateString":"<Latex>{String.raw`\\frac{1}{2}`}</Latex>"},"complex":{"description":"Write complex LaTeX formulas in your document.","template":{"key":null,"ref":null,"props":{"children":"% \\f is defined as #1f(#2) using the macro\n\\f\\relax{x} = \\int_{-\\infty}^\\infty\n    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n    \\,d\\xi"},"_owner":null,"_store":{}},"templateString":"(\n            <Latex>{String.raw`% \\f is defined as #1f(#2) using the macro\n\\f\\relax{x} = \\int_{-\\infty}^\\infty\n    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n    \\,d\\xi`}</Latex>\n          )"}}}}}}]},{"icon":"fa-brands fa-markdown","name":"Markdown","description":"Render Markdown inside your templates. Provides a simple wrapper around [`markdown-to-jsx`](https://github.com/quantizor/markdown-to-jsx).\n\nMarkdown allows you to easily separate content from the layout, making it easier to maintain and update your templates. You can pull in content from a CMS or other sources, and use Markdown to format it.\n\nYou can also use custom components and variables to make your Markdown more dynamic. For example, you can replace Markdown components with your own components, or use variables to insert dynamic content.","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/markdown","files":[{"name":"Markdown","baseName":"markdown","path":"markdown/markdown.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/markdown/markdown.mdx","markdown":"---\ntitle: Markdown\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple Markdown tag to support Markdown in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/markdown-c8d0ecd4/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Markdown } from \"@fileforge/react-print\";\n\n<Markdown>{`# Hello, world!\n\n> This is a blockquote\n\n---\n\nThis is a paragraph with a [link](https://google.com)`}</Markdown>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Custom Components and Variables\n\nYou can leverage the `overrides` prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/markdown-882cc486/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Markdown } from \"@fileforge/react-print\";\n\n<Markdown\n  options={{\n    overrides: {\n      Title: {\n        component: () => \"Non-Disclosure Agreement\",\n      },\n      CustomerName: {\n        component: () => \"John Doe\",\n      },\n      KPI: {\n        component: ({ children }) => (\n          <div style={{ color: \"blue\", fontSize: \"2rem\" }}>{children}</div>\n        ),\n      },\n    },\n  }}\n>{`# <Title />\n\nThis agreement is signed with <CustomerName />.\n\n<KPI>20/month</KPI>`}</Markdown>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"Markdown","description":"","components":{"Markdown":{"server":true,"client":true,"examples":{"default":{"description":"Use a simple Markdown tag to support Markdown in your document.","template":{"key":null,"ref":null,"props":{"children":"# Hello, world!\n\n> This is a blockquote\n\n---\n\nThis is a paragraph with a [link](https://google.com)"},"_owner":null,"_store":{}},"templateString":"(\n            <Markdown>{`# Hello, world!\n\n> This is a blockquote\n\n---\n\nThis is a paragraph with a [link](https://google.com)`}</Markdown>\n          )"},"customComponent":{"name":"Custom Components and Variables","description":"You can leverage the `overrides` prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.","template":{"key":null,"ref":null,"props":{"options":{"overrides":{"Title":{},"CustomerName":{},"KPI":{}},"namedCodesToUnicode":{"amp":"&","apos":"'","gt":">","lt":"<","nbsp":" ","quot":"“"}},"children":"# <Title />\n\nThis agreement is signed with <CustomerName />.\n\n<KPI>20/month</KPI>"},"_owner":null,"_store":{}},"templateString":"(\n            <Markdown\n              options={{\n                overrides: {\n                  Title: {\n                    component: () => \"Non-Disclosure Agreement\",\n                  },\n                  CustomerName: {\n                    component: () => \"John Doe\",\n                  },\n                  KPI: {\n                    component: ({ children }) => (\n                      <div style={{ color: \"blue\", fontSize: \"2rem\" }}>\n                        {children}\n                      </div>\n                    ),\n                  },\n                },\n              }}\n            >{`# <Title />\n\nThis agreement is signed with <CustomerName />.\n\n<KPI>20/month</KPI>`}</Markdown>\n          )"}}}}}}]},{"icon":"fa-solid fa-border-all","name":"Shell","description":"Display content in other page regions.","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell","files":[{"name":"CurrentPageTop","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell/currentpagetop.mdx","markdown":"---\ntitle: CurrentPageTop\n\n\n---\n\nDisplays content in the top of the current page.\n\nThis component will override the content of the `PageTop` component for the current page.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/currentpagetop-9aae489e/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { CurrentPageTop } from \"@fileforge/react-print\";\n\n<CurrentPageTop style={{ backgroundColor: \"#bfdbfe\" }} />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"CurrentPageTop","description":"","components":{"CurrentPageTop":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"style":{"backgroundColor":"#bfdbfe"}},"_owner":null,"_store":{}},"templateString":"<CurrentPageTop style={{ backgroundColor: \"#bfdbfe\" }} />"}}}}}},{"name":"PageTop","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell/pagetop.mdx","markdown":"---\ntitle: PageTop\n\n\n---\n\nDisplays content in the top of all the pages.\n\nThis component should be placed as early as possible in the document and will apply to all subsequent pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagetop-9dd97ef3/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageTop } from \"@fileforge/react-print\";\n\n<PageTop style={{ backgroundColor: \"#bfdbfe\" }} />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PageTop","description":"","components":{"PageTop":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"style":{"backgroundColor":"#bfdbfe"}},"_owner":null,"_store":{}},"templateString":"<PageTop style={{ backgroundColor: \"#bfdbfe\" }} />"}}}}}},{"name":"PageBottom","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell/pagebottom.mdx","markdown":"---\ntitle: PageBottom\n\n\n---\n\nDisplays content in the bottom of all the pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagebottom-206d811e/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageBottom } from \"@fileforge/react-print\";\n\n<PageBottom style={{ backgroundColor: \"#bfdbfe\" }} />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PageBottom","description":"","components":{"PageBottom":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"style":{"backgroundColor":"#bfdbfe"}},"_owner":null,"_store":{}},"templateString":"<PageBottom style={{ backgroundColor: \"#bfdbfe\" }} />"}}}}}},{"name":"FloatBottom","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell/floatbottom.mdx","markdown":"---\ntitle: FloatBottom\n\n\n---\n\nFloats the content to the bottom of the page.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/floatbottom-9a3986d7/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { FloatBottom } from \"@fileforge/react-print\";\n\n<FloatBottom>Here are some floated contents</FloatBottom>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"FloatBottom","description":"","components":{"FloatBottom":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"children":"Here are some floated contents"},"_owner":null,"_store":{}},"templateString":"<FloatBottom>Here are some floated contents</FloatBottom>"}}}}}},{"name":"PageBreak","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell/pagebreak.mdx","markdown":"---\ntitle: PageBreak\n\n\n---\n\nForces a page break.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagebreak-88acdbdf/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageBreak } from \"@fileforge/react-print\";\n\n<div>\n  <div>Hello on this page</div>\n  <PageBreak />\n  <div>World on that page</div>\n</div>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PageBreak","description":"","components":{"PageBreak":{"server":true,"client":true,"examples":{"default":{"template":{"type":"div","key":null,"ref":null,"props":{"children":[{"type":"div","key":null,"ref":null,"props":{"children":"Hello on this page"},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"type":"div","key":null,"ref":null,"props":{"children":"World on that page"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"<div><div>Hello on this page</div><PageBreak /><div>World on that page</div></div>"}}}}}},{"name":"NoBreak","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/shell/nobreak.mdx","markdown":"---\ntitle: NoBreak\n\n\n---\n\nPrevents a page break. Wrap this component around content that should not be broken across pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/nobreak-d03f0d1f/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { NoBreak } from \"@fileforge/react-print\";\n\n<NoBreak>This content will not be split between two pages.</NoBreak>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"NoBreak","description":"","components":{"NoBreak":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"children":"This content will not be split between two pages."},"_owner":null,"_store":{}},"templateString":"<NoBreak>This content will not be split between two pages.</NoBreak>"}}}}}}]},{"icon":"signature","name":"Signature","description":"Add signature fields to your document. You can specify various types of fields like signature, initials, date, and more.\n\n<Warning>\nSignature and form filling are currently only available to select customers. If you would like to use these features in your project, please reach out at contact@onedoclabs.com.\n</Warning>\n","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/signature","files":[{"name":"Field","baseName":"signature","path":"signature/signature.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/signature/field.mdx","markdown":"---\ntitle: Field\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nThe created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).\n\nSupported fields:\n\n| Field Type | Description |\n|------------|-------------|\n| signHere | Signature field |\n| signHereOptional | Optional signature field |\n| signInitialHere | Initials field |\n| signInitialHereOptional | Optional initials field |\n| company | Company name field |\n| dateSigned | Date signed field |\n| title | Title field |\n| fullName | Full name field |\n| lastName | Last name field |\n| firstName | First name field |\n| emailAddress | Email address field |\n| number | Number field |\n| date | Date field |\n| ssn | Social Security Number field |\n| zip5 | ZIP code field |\n| zip5dash4 | ZIP code with 4-digit extension field |\n| note | Note field |\n| list | List field |\n| checkbox | Checkbox field |\n| radio | Radio button field |\n| approve | Approve button field |\n| decline | Decline button field |\n| view | View button field |\n| signerAttachment | Signer attachment field |\n| signerAttachmentOptional | Optional signer attachment field |\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/field-81a661f2/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Field } from \"@fileforge/react-print\";\n\n<>\n  <Tailwind>\n    <h2 className=\"text-xl font-bold mb-4\">Signature</h2>\n    <div className=\"p-4 rounded-md border border-gray-200\">\n      By\n      <br />\n      <Field\n        type=\"fullName\"\n        signee=\"sender\"\n        defaultValue=\"John Doe\"\n        className=\"border-b border-b-gray-300\"\n      />\n      <br />\n      <Field\n        type=\"dateSigned\"\n        signee=\"sender\"\n        defaultValue=\"04/18/2024\"\n        className=\"border-b border-b-gray-300\"\n      />\n      <br />\n      <Field\n        type=\"signHere\"\n        signee=\"sender\"\n        className=\"border border-gray-300 h-48\"\n      />\n    </div>\n  </Tailwind>\n</>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Field","description":"","components":{"Field":{"client":true,"server":true,"examples":{"default":{"description":"The created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).\n\nSupported fields:\n\n| Field Type | Description |\n|------------|-------------|\n| signHere | Signature field |\n| signHereOptional | Optional signature field |\n| signInitialHere | Initials field |\n| signInitialHereOptional | Optional initials field |\n| company | Company name field |\n| dateSigned | Date signed field |\n| title | Title field |\n| fullName | Full name field |\n| lastName | Last name field |\n| firstName | First name field |\n| emailAddress | Email address field |\n| number | Number field |\n| date | Date field |\n| ssn | Social Security Number field |\n| zip5 | ZIP code field |\n| zip5dash4 | ZIP code with 4-digit extension field |\n| note | Note field |\n| list | List field |\n| checkbox | Checkbox field |\n| radio | Radio button field |\n| approve | Approve button field |\n| decline | Decline button field |\n| view | View button field |\n| signerAttachment | Signer attachment field |\n| signerAttachmentOptional | Optional signer attachment field |","template":{"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":[{"type":"h2","key":null,"ref":null,"props":{"className":"text-xl font-bold mb-4","children":"Signature"},"_owner":null,"_store":{}},{"type":"div","key":null,"ref":null,"props":{"className":"p-4 rounded-md border border-gray-200","children":["By",{"type":"br","key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"type":"fullName","signee":"sender","defaultValue":"John Doe","className":"border-b border-b-gray-300"},"_owner":null,"_store":{}},{"type":"br","key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"type":"dateSigned","signee":"sender","defaultValue":"04/18/2024","className":"border-b border-b-gray-300"},"_owner":null,"_store":{}},{"type":"br","key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"type":"signHere","signee":"sender","className":"border border-gray-300 h-48"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"templateString":"(\n            <>\n              <Tailwind>\n                <h2 className=\"text-xl font-bold mb-4\">Signature</h2>\n                <div className=\"p-4 rounded-md border border-gray-200\">\n                  By\n                  <br />\n                  <Field\n                    type=\"fullName\"\n                    signee=\"sender\"\n                    defaultValue=\"John Doe\"\n                    className=\"border-b border-b-gray-300\"\n                  />\n                  <br />\n                  <Field\n                    type=\"dateSigned\"\n                    signee=\"sender\"\n                    defaultValue=\"04/18/2024\"\n                    className=\"border-b border-b-gray-300\"\n                  />\n                  <br />\n                  <Field\n                    type=\"signHere\"\n                    signee=\"sender\"\n                    className=\"border border-gray-300 h-48\"\n                  />\n                </div>\n              </Tailwind>\n            </>\n          )"}}}}}}]},{"icon":"fa-solid fa-wind","name":"Tailwind","description":"A simple, drop-in way to use Tailwind CSS in your components.\n\n<Warning>\nThe supported Tailwind version is 3.3.2 due to changes in the PostCSS plugin synchronicity.\n</Warning>","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/tailwind","files":[{"name":"Tailwind","baseName":"tailwind","path":"tailwind/tailwind.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/tailwind/tailwind.mdx","markdown":"---\ntitle: Tailwind\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple Tailwind tag to support Tailwind in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/tailwind-d34cd362/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Tailwind } from \"@fileforge/react-print\";\n\n<Tailwind>\n  <div className=\"bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12\"></div>\n  <p className=\"py-12 text-slate-800\">\n    This is a Tailwind component. All children of this component will have\n    access to the Tailwind CSS classes.\n  </p>\n</Tailwind>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Custom Tailwind config\n\nYou can also pass a custom Tailwind config to the Tailwind component.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/tailwind-841def4d/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Tailwind } from \"@fileforge/react-print\";\n\n<Tailwind\n  config={{\n    theme: {\n      extend: {\n        colors: {\n          primary: \"#6484cf\",\n        },\n      },\n    },\n  }}\n>\n  <div className=\"bg-primary p-12 rounded-2xl\"></div>\n  <p className=\"py-12 text-slate-800\">\n    This is a Tailwind component. All children of this component will have\n    access to the Tailwind CSS classes.\n  </p>\n</Tailwind>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"Tailwind","description":"","components":{"Tailwind":{"client":true,"server":true,"examples":{"default":{"description":"Use a simple Tailwind tag to support Tailwind in your document.","template":{"key":null,"ref":null,"props":{"children":[{"type":"div","key":null,"ref":null,"props":{"className":"bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"className":"py-12 text-slate-800","children":"This is a Tailwind component. All children of this component will have access to the Tailwind CSS classes."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind>\n              <div className=\"bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12\"></div>\n              <p className=\"py-12 text-slate-800\">\n                This is a Tailwind component. All children of this component\n                will have access to the Tailwind CSS classes.\n              </p>\n            </Tailwind>\n          )"},"config":{"name":"Custom Tailwind config","description":"You can also pass a custom Tailwind config to the Tailwind component.","template":{"key":null,"ref":null,"props":{"config":{"theme":{"extend":{"colors":{"primary":"#6484cf"}}}},"children":[{"type":"div","key":null,"ref":null,"props":{"className":"bg-primary p-12 rounded-2xl"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"className":"py-12 text-slate-800","children":"This is a Tailwind component. All children of this component will have access to the Tailwind CSS classes."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind\n              config={{\n                theme: {\n                  extend: {\n                    colors: {\n                      primary: \"#6484cf\",\n                    },\n                  },\n                },\n              }}\n            >\n              <div className=\"bg-primary p-12 rounded-2xl\"></div>\n              <p className=\"py-12 text-slate-800\">\n                This is a Tailwind component. All children of this component\n                will have access to the Tailwind CSS classes.\n              </p>\n            </Tailwind>\n          )"}}}}}}]},{"icon":"fa-solid fa-subscript","name":"Variables","description":"Display dynamic values based on your document, such as page numbers and running headers.","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables","files":[{"name":"PageNumber","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/pagenumber.mdx","markdown":"---\ntitle: PageNumber\n\n\n---\n\nReturns the current page number.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagenumber-cc94f6f7/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageNumber } from \"@fileforge/react-print\";\n\n<PageNumber counterStyle=\"decimal\" />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Custom Style\n\nYou can use a custom CSS counter-style, by passing a known name or a custom counter style.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagenumber-7e3be4c3/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageNumber } from \"@fileforge/react-print\";\n\n<PageNumber counterStyle=\"lower-roman\" />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"PageNumber","description":"","components":{"PageNumber":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"counterStyle":"decimal"},"_owner":null,"_store":{}},"templateString":"<PageNumber counterStyle=\"decimal\" />"},"customStyle":{"description":"You can use a custom CSS counter-style, by passing a known name or a custom counter style.","template":{"key":null,"ref":null,"props":{"counterStyle":"lower-roman"},"_owner":null,"_store":{}},"templateString":"<PageNumber counterStyle=\"lower-roman\" />"}}}}}},{"name":"PagesNumber","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/pagesnumber.mdx","markdown":"---\ntitle: PagesNumber\n\n\n---\n\nReturns the total number of pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagesnumber-a7d845b5/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PagesNumber, PageNumber } from \"@fileforge/react-print\";\n\n<>\n  <PageNumber counterStyle=\"decimal\" />\n  {\" of \"}\n  <PagesNumber counterStyle=\"decimal\" />\n</>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PagesNumber","description":"","components":{"PagesNumber":{"server":true,"client":true,"examples":{"default":{"imports":["PageNumber"],"template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"counterStyle":"decimal"},"_owner":null,"_store":{}}," of ",{"key":null,"ref":null,"props":{"counterStyle":"decimal"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <>\n              <PageNumber counterStyle=\"decimal\" />\n              {\" of \"}\n              <PagesNumber counterStyle=\"decimal\" />\n            </>\n          )"}}}}}},{"name":"RunningH1","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/runningh1.mdx","markdown":"---\ntitle: RunningH1\n\n\n---\n\nReturns the current page's running header of level 1.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nShow the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/runningh1-b41bbc29/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { RunningH1 } from \"@fileforge/react-print\";\n\n<React.Fragment>\n  <PageTop style={{ paddingTop: \"1rem\" }}>\n    <RunningH1 />\n  </PageTop>\n  <h1>Heading of level 1</h1>\n</React.Fragment>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"RunningH1","description":"","components":{"RunningH1":{"server":true,"client":true,"examples":{"default":{"description":"Show the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).","template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"style":{"paddingTop":"1rem"},"children":{"key":null,"ref":null,"props":{},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},{"type":"h1","key":null,"ref":null,"props":{"children":"Heading of level 1"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <React.Fragment>\n              <PageTop style={{ paddingTop: \"1rem\" }}>\n                <RunningH1 />\n              </PageTop>\n              <h1>Heading of level 1</h1>\n            </React.Fragment>\n          )"}}}}}},{"name":"RunningH2","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/runningh2.mdx","markdown":"---\ntitle: RunningH2\n\n\n---\n\nReturns the current page's running header of level 2.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH2 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH2","description":"","components":{"RunningH2":{"server":true,"client":true}}}},{"name":"RunningH3","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/runningh3.mdx","markdown":"---\ntitle: RunningH3\n\n\n---\n\nReturns the current page's running header of level 3.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH3 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH3","description":"","components":{"RunningH3":{"server":true,"client":true}}}},{"name":"RunningH4","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/runningh4.mdx","markdown":"---\ntitle: RunningH4\n\n\n---\n\nReturns the current page's running header of level 4.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH4 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH4","description":"","components":{"RunningH4":{"server":true,"client":true}}}},{"name":"RunningH5","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/runningh5.mdx","markdown":"---\ntitle: RunningH5\n\n\n---\n\nReturns the current page's running header of level 5.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH5 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH5","description":"","components":{"RunningH5":{"server":true,"client":true}}}},{"name":"RunningH6","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/pierredorge/Documents/onedoc/react-print/docs/components/variables/runningh6.mdx","markdown":"---\ntitle: RunningH6\n\n\n---\n\nReturns the current page's running header of level 6.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH6 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH6","description":"","components":{"RunningH6":{"server":true,"client":true}}}}]}]
\ No newline at end of file
+[{"icon":"fa-solid fa-code","name":"compile","description":"Compile a React component to a string with the Onedoc print styles.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/compile","files":[{"name":"compile","baseName":"compile","path":"compile/compile.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/compile/compile.mdx","markdown":"---\ntitle: compile\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nA simple function to compile a React component to an HTML string with the Onedoc print styles.\n          ```jsx\n          const html = await compile(<Component />);\n          ```\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/compile-c4caf51a/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { compile } from \"@fileforge/react-print\";\n\n<Tailwind>\n  <div className=\"bg-red-400\">Hello World!</div>\n</Tailwind>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Emotion CSS\n\nPass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(<Component />, { emotion: true });\n```\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/compile-cbbe811f/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { compile } from \"@fileforge/react-print\";\nimport { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";\n\n<>\n  <ChakraProvider>\n    <Button colorScheme=\"blue\">Hello</Button>\n  </ChakraProvider>\n</>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"compile","description":"","components":{"compile":{"server":true,"client":true,"examples":{"default":{"description":"A simple function to compile a React component to an HTML string with the Onedoc print styles.\n          ```jsx\n          const html = await compile(<Component />);\n          ```","template":{"key":null,"ref":null,"props":{"children":{"type":"div","key":null,"ref":null,"props":{"className":"bg-red-400","children":"Hello World!"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind>\n              <div className=\"bg-red-400\">Hello World!</div>\n            </Tailwind>\n          )"},"emotion":{"description":"Pass `{ emotion: true }` as the second compile option to merge and extract critical CSS using Emotion. Some libraries such as Chakra UI require this option to work correctly.\n\n```jsx\nconst html = await compile(<Component />, { emotion: true });\n```","template":{"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":{"type":{},"key":null,"ref":null,"props":{"colorScheme":"blue","children":"Hello"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"name":"Emotion CSS","compileOptions":{"emotion":true},"externalImports":["import { Button, ChakraProvider, extendTheme } from \"@chakra-ui/react\";"],"templateString":"(\n            <>\n              <ChakraProvider>\n                <Button colorScheme=\"blue\">Hello</Button>\n              </ChakraProvider>\n            </>\n          )"}}}}}}]},{"icon":"fa-brands fa-css3-alt","name":"CSS","description":"Allows adding CSS to the document while securely parsing and escaping it.\n\nNB: While you can add regular CSS with the `<style>` tag, it's recommended to use the `CSS` component to ensure that the CSS is properly escaped, most notably when using URLs or other potentially unsafe content.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/css","files":[{"name":"CSS","baseName":"css","path":"css/css.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/css/css.mdx","markdown":"---\ntitle: CSS\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple CSS tag to support CSS in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/css-7dd14403/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { CSS } from \"@fileforge/react-print\";\n\n<CSS>{`@page { size: a4 landscape; }`}</CSS>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"CSS","description":"","components":{"CSS":{"server":true,"client":true,"examples":{"default":{"description":"Use a simple CSS tag to support CSS in your document.","template":{"key":null,"ref":null,"props":{"children":"@page { size: a4 landscape; }"},"_owner":null,"_store":{}},"templateString":"<CSS>{`@page { size: a4 landscape; }`}</CSS>"}}}}}},{"name":"Font","baseName":"css","path":"css/css.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/css/font.mdx","markdown":"---\ntitle: Font\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nLoad a Google Font its URL. This will allow you to use the font in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/font-e0a8ef44/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Font } from \"@fileforge/react-print\";\n\n<React.Fragment>\n  <Font url=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap\" />\n  <p style={{ fontFamily: \"Roboto, sans-serif\" }}>\n    This text uses the Roboto Light font.\n  </p>\n</React.Fragment>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Font","description":"","components":{"Font":{"server":true,"client":true,"examples":{"default":{"name":"Load a Google Font","description":"Load a Google Font its URL. This will allow you to use the font in your document.","template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"url":"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"style":{"fontFamily":"Roboto, sans-serif"},"children":"This text uses the Roboto Light font."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <React.Fragment>\n              <Font url=\"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap\" />\n              <p style={{ fontFamily: \"Roboto, sans-serif\" }}>\n                This text uses the Roboto Light font.\n              </p>\n            </React.Fragment>\n          )"}}}}}},{"name":"Margins","baseName":"css","path":"css/css.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/css/margins.mdx","markdown":"---\ntitle: Margins\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nSet the page ratio and margin sizes in px. You can also use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/margins-50add8b7/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Margins } from \"@fileforge/react-print\";\n\n<React.Fragment>\n  <CSS>{`body{background-color:lightblue}`}</CSS>\n  <Margins pageRatio=\"A4\" top=\"100\" right=\"100\" left=\"100\" bottom=\"100\" />\n  <div>Hello world!</div>\n</React.Fragment>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Margins","description":"","components":{"Margins":{"server":true,"client":true,"examples":{"default":{"name":"Layout","description":"Set the page ratio and margin sizes in px. You can also use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).","template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"children":"body{background-color:lightblue}"},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"pageRatio":"A4","top":"100","right":"100","left":"100","bottom":"100"},"_owner":null,"_store":{}},{"type":"div","key":null,"ref":null,"props":{"children":"Hello world!"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <React.Fragment>\n              <CSS>{`body{background-color:lightblue}`}</CSS>\n              <Margins\n                pageRatio=\"A4\"\n                top=\"100\"\n                right=\"100\"\n                left=\"100\"\n                bottom=\"100\"\n              />\n              <div>Hello world!</div>\n            </React.Fragment>\n          )"}}}}}}]},{"icon":"fa-solid fa-info","name":"Footnote","description":"Create automatically numbered footnotes.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/footnote","files":[{"name":"Footnote","baseName":"footnote","path":"footnote/footnote.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/footnote/footnote.mdx","markdown":"---\ntitle: Footnote\n\n\n---\n\nCreates an automatically numbered footnote. This will remove the footnote content from the document flow and place it at the bottom of the page.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/footnote-fa9b006a/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Footnote } from \"@fileforge/react-print\";\n\n<div>\n  This is a footnote to explaning what CSS{\" \"}\n  <Footnote>\n    CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language\n    for laying out and structuring web pages (HTML or XML).\n  </Footnote>{\" \"}\n  is.\n</div>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Footnote","description":"","components":{"Footnote":{"server":true,"client":true,"examples":{"default":{"template":{"type":"div","key":null,"ref":null,"props":{"children":["This is a footnote to explaning what CSS"," ",{"key":null,"ref":null,"props":{"children":"CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML)."},"_owner":null,"_store":{}}," ","is."]},"_owner":null,"_store":{}},"templateString":"(\n            <div>\n              This is a footnote to explaning what CSS{\" \"}\n              <Footnote>\n                CSS is the acronym of “Cascading Style Sheets”. CSS is a\n                computer language for laying out and structuring web pages (HTML\n                or XML).\n              </Footnote>{\" \"}\n              is.\n            </div>\n          )"}}}}}}]},{"icon":"fa-solid fa-square-root-variable","name":"LaTeX","description":"Render LaTeX formulas right in your React components.\n\n<Warning>\nLaTeX rendering is still in beta. Please report any issues you encounter on our [Discord](https://discord.com/invite/uRJE6e2rgr).\n</Warning>\n\n<Note>Rendering LaTeX using KaTeX requires pulling a remote stylesshet hosted by jsdelivr. This is done to prevent the styles from being purged.</Note>\n\n<Tip>You can use `String.raw` to avoid escaping LaTeX backslashes.</Tip>","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/latex","files":[{"name":"Latex","baseName":"latex","path":"latex/latex.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/latex/latex.mdx","markdown":"---\ntitle: Latex\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple Latex tag to support Latex in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/latex-f2f93949/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Latex } from \"@fileforge/react-print\";\n\n<Latex>{String.raw`\\frac{1}{2}`}</Latex>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Complex\n\nWrite complex LaTeX formulas in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/latex-df0188b4/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Latex } from \"@fileforge/react-print\";\n\n<Latex>{String.raw`% \\f is defined as #1f(#2) using the macro\n\\f\\relax{x} = \\int_{-\\infty}^\\infty\n    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n    \\,d\\xi`}</Latex>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"Latex","description":"","components":{"Latex":{"server":true,"client":true,"examples":{"default":{"description":"Use a simple Latex tag to support Latex in your document.","template":{"key":null,"ref":null,"props":{"children":"\\frac{1}{2}"},"_owner":null,"_store":{}},"templateString":"<Latex>{String.raw`\\frac{1}{2}`}</Latex>"},"complex":{"description":"Write complex LaTeX formulas in your document.","template":{"key":null,"ref":null,"props":{"children":"% \\f is defined as #1f(#2) using the macro\n\\f\\relax{x} = \\int_{-\\infty}^\\infty\n    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n    \\,d\\xi"},"_owner":null,"_store":{}},"templateString":"(\n            <Latex>{String.raw`% \\f is defined as #1f(#2) using the macro\n\\f\\relax{x} = \\int_{-\\infty}^\\infty\n    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n    \\,d\\xi`}</Latex>\n          )"}}}}}}]},{"icon":"fa-brands fa-markdown","name":"Markdown","description":"Render Markdown inside your templates. Provides a simple wrapper around [`markdown-to-jsx`](https://github.com/quantizor/markdown-to-jsx).\n\nMarkdown allows you to easily separate content from the layout, making it easier to maintain and update your templates. You can pull in content from a CMS or other sources, and use Markdown to format it.\n\nYou can also use custom components and variables to make your Markdown more dynamic. For example, you can replace Markdown components with your own components, or use variables to insert dynamic content.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/markdown","files":[{"name":"Markdown","baseName":"markdown","path":"markdown/markdown.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/markdown/markdown.mdx","markdown":"---\ntitle: Markdown\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple Markdown tag to support Markdown in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/markdown-788360ba/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Markdown } from \"@fileforge/react-print\";\n\n<Markdown>{`# Hello, world!\n\n> This is a blockquote\n\n---\n\nThis is a paragraph with a [link](https://google.com)`}</Markdown>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Custom Components and Variables\n\nYou can leverage the `overrides` prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/markdown-7e966af7/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Markdown } from \"@fileforge/react-print\";\n\n<Markdown\n  options={{\n    overrides: {\n      Title: {\n        component: () => \"Non-Disclosure Agreement\",\n      },\n      CustomerName: {\n        component: () => \"John Doe\",\n      },\n      KPI: {\n        component: ({ children }) => (\n          <div style={{ color: \"blue\", fontSize: \"2rem\" }}>{children}</div>\n        ),\n      },\n    },\n  }}\n>{`# <Title />\n\nThis agreement is signed with <CustomerName />.\n\n<KPI>20/month</KPI>`}</Markdown>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"Markdown","description":"","components":{"Markdown":{"server":true,"client":true,"examples":{"default":{"description":"Use a simple Markdown tag to support Markdown in your document.","template":{"key":null,"ref":null,"props":{"children":"# Hello, world!\n\n> This is a blockquote\n\n---\n\nThis is a paragraph with a [link](https://google.com)"},"_owner":null,"_store":{}},"templateString":"(\n            <Markdown>{`# Hello, world!\n\n> This is a blockquote\n\n---\n\nThis is a paragraph with a [link](https://google.com)`}</Markdown>\n          )"},"customComponent":{"name":"Custom Components and Variables","description":"You can leverage the `overrides` prop to replace Markdown components with your own components. This is useful for custom components or even for dynamic content.","template":{"key":null,"ref":null,"props":{"options":{"overrides":{"Title":{},"CustomerName":{},"KPI":{}},"namedCodesToUnicode":{"amp":"&","apos":"'","gt":">","lt":"<","nbsp":" ","quot":"“"}},"children":"# <Title />\n\nThis agreement is signed with <CustomerName />.\n\n<KPI>20/month</KPI>"},"_owner":null,"_store":{}},"templateString":"(\n            <Markdown\n              options={{\n                overrides: {\n                  Title: {\n                    component: () => \"Non-Disclosure Agreement\",\n                  },\n                  CustomerName: {\n                    component: () => \"John Doe\",\n                  },\n                  KPI: {\n                    component: ({ children }) => (\n                      <div style={{ color: \"blue\", fontSize: \"2rem\" }}>\n                        {children}\n                      </div>\n                    ),\n                  },\n                },\n              }}\n            >{`# <Title />\n\nThis agreement is signed with <CustomerName />.\n\n<KPI>20/month</KPI>`}</Markdown>\n          )"}}}}}}]},{"icon":"fa-solid fa-border-all","name":"Shell","description":"Display content in other page regions.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell","files":[{"name":"CurrentPageTop","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell/currentpagetop.mdx","markdown":"---\ntitle: CurrentPageTop\n\n\n---\n\nDisplays content in the top of the current page.\n\nThis component will override the content of the `PageTop` component for the current page.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/currentpagetop-81734720/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { CurrentPageTop } from \"@fileforge/react-print\";\n\n<CurrentPageTop style={{ backgroundColor: \"#bfdbfe\" }} />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"CurrentPageTop","description":"","components":{"CurrentPageTop":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"style":{"backgroundColor":"#bfdbfe"}},"_owner":null,"_store":{}},"templateString":"<CurrentPageTop style={{ backgroundColor: \"#bfdbfe\" }} />"}}}}}},{"name":"PageTop","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell/pagetop.mdx","markdown":"---\ntitle: PageTop\n\n\n---\n\nDisplays content in the top of all the pages.\n\nThis component should be placed as early as possible in the document and will apply to all subsequent pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagetop-ef21c693/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageTop } from \"@fileforge/react-print\";\n\n<PageTop style={{ backgroundColor: \"#bfdbfe\" }} />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PageTop","description":"","components":{"PageTop":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"style":{"backgroundColor":"#bfdbfe"}},"_owner":null,"_store":{}},"templateString":"<PageTop style={{ backgroundColor: \"#bfdbfe\" }} />"}}}}}},{"name":"PageBottom","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell/pagebottom.mdx","markdown":"---\ntitle: PageBottom\n\n\n---\n\nDisplays content in the bottom of all the pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagebottom-f6fd9841/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageBottom } from \"@fileforge/react-print\";\n\n<PageBottom style={{ backgroundColor: \"#bfdbfe\" }} />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PageBottom","description":"","components":{"PageBottom":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"style":{"backgroundColor":"#bfdbfe"}},"_owner":null,"_store":{}},"templateString":"<PageBottom style={{ backgroundColor: \"#bfdbfe\" }} />"}}}}}},{"name":"FloatBottom","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell/floatbottom.mdx","markdown":"---\ntitle: FloatBottom\n\n\n---\n\nFloats the content to the bottom of the page.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/floatbottom-17237ced/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { FloatBottom } from \"@fileforge/react-print\";\n\n<FloatBottom>Here are some floated contents</FloatBottom>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"FloatBottom","description":"","components":{"FloatBottom":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"children":"Here are some floated contents"},"_owner":null,"_store":{}},"templateString":"<FloatBottom>Here are some floated contents</FloatBottom>"}}}}}},{"name":"PageBreak","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell/pagebreak.mdx","markdown":"---\ntitle: PageBreak\n\n\n---\n\nForces a page break.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagebreak-d3424866/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageBreak } from \"@fileforge/react-print\";\n\n<div>\n  <div>Hello on this page</div>\n  <PageBreak />\n  <div>World on that page</div>\n</div>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PageBreak","description":"","components":{"PageBreak":{"server":true,"client":true,"examples":{"default":{"template":{"type":"div","key":null,"ref":null,"props":{"children":[{"type":"div","key":null,"ref":null,"props":{"children":"Hello on this page"},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"type":"div","key":null,"ref":null,"props":{"children":"World on that page"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <div>\n              <div>Hello on this page</div>\n              <PageBreak />\n              <div>World on that page</div>\n            </div>\n          )"}}}}}},{"name":"NoBreak","baseName":"shell","path":"shell/shell.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/shell/nobreak.mdx","markdown":"---\ntitle: NoBreak\n\n\n---\n\nPrevents a page break. Wrap this component around content that should not be broken across pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/nobreak-47b8dd06/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { NoBreak } from \"@fileforge/react-print\";\n\n<NoBreak>This content will not be split between two pages.</NoBreak>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"NoBreak","description":"","components":{"NoBreak":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"children":"This content will not be split between two pages."},"_owner":null,"_store":{}},"templateString":"(\n            <NoBreak>This content will not be split between two pages.</NoBreak>\n          )"}}}}}}]},{"icon":"signature","name":"Signature","description":"Add signature fields to your document. You can specify various types of fields like signature, initials, date, and more.\n\n<Warning>\nSignature and form filling are currently only available to select customers. If you would like to use these features in your project, please reach out at contact@onedoclabs.com.\n</Warning>\n","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/signature","files":[{"name":"Field","baseName":"signature","path":"signature/signature.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/signature/field.mdx","markdown":"---\ntitle: Field\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nThe created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).\n\nSupported fields:\n\n| Field Type | Description |\n|------------|-------------|\n| signHere | Signature field |\n| signHereOptional | Optional signature field |\n| signInitialHere | Initials field |\n| signInitialHereOptional | Optional initials field |\n| company | Company name field |\n| dateSigned | Date signed field |\n| title | Title field |\n| fullName | Full name field |\n| lastName | Last name field |\n| firstName | First name field |\n| emailAddress | Email address field |\n| number | Number field |\n| date | Date field |\n| ssn | Social Security Number field |\n| zip5 | ZIP code field |\n| zip5dash4 | ZIP code with 4-digit extension field |\n| note | Note field |\n| list | List field |\n| checkbox | Checkbox field |\n| radio | Radio button field |\n| approve | Approve button field |\n| decline | Decline button field |\n| view | View button field |\n| signerAttachment | Signer attachment field |\n| signerAttachmentOptional | Optional signer attachment field |\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/field-da48fb0c/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Field } from \"@fileforge/react-print\";\n\n<>\n  <Tailwind>\n    <h2 className=\"text-xl font-bold mb-4\">Signature</h2>\n    <div className=\"p-4 rounded-md border border-gray-200\">\n      By\n      <br />\n      <Field\n        type=\"fullName\"\n        signee=\"sender\"\n        defaultValue=\"John Doe\"\n        className=\"border-b border-b-gray-300\"\n      />\n      <br />\n      <Field\n        type=\"dateSigned\"\n        signee=\"sender\"\n        defaultValue=\"04/18/2024\"\n        className=\"border-b border-b-gray-300\"\n      />\n      <br />\n      <Field\n        type=\"signHere\"\n        signee=\"sender\"\n        className=\"border border-gray-300 h-48\"\n      />\n    </div>\n  </Tailwind>\n</>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"Field","description":"","components":{"Field":{"client":true,"server":true,"examples":{"default":{"description":"The created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).\n\nSupported fields:\n\n| Field Type | Description |\n|------------|-------------|\n| signHere | Signature field |\n| signHereOptional | Optional signature field |\n| signInitialHere | Initials field |\n| signInitialHereOptional | Optional initials field |\n| company | Company name field |\n| dateSigned | Date signed field |\n| title | Title field |\n| fullName | Full name field |\n| lastName | Last name field |\n| firstName | First name field |\n| emailAddress | Email address field |\n| number | Number field |\n| date | Date field |\n| ssn | Social Security Number field |\n| zip5 | ZIP code field |\n| zip5dash4 | ZIP code with 4-digit extension field |\n| note | Note field |\n| list | List field |\n| checkbox | Checkbox field |\n| radio | Radio button field |\n| approve | Approve button field |\n| decline | Decline button field |\n| view | View button field |\n| signerAttachment | Signer attachment field |\n| signerAttachmentOptional | Optional signer attachment field |","template":{"key":null,"ref":null,"props":{"children":{"key":null,"ref":null,"props":{"children":[{"type":"h2","key":null,"ref":null,"props":{"className":"text-xl font-bold mb-4","children":"Signature"},"_owner":null,"_store":{}},{"type":"div","key":null,"ref":null,"props":{"className":"p-4 rounded-md border border-gray-200","children":["By",{"type":"br","key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"type":"fullName","signee":"sender","defaultValue":"John Doe","className":"border-b border-b-gray-300"},"_owner":null,"_store":{}},{"type":"br","key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"type":"dateSigned","signee":"sender","defaultValue":"04/18/2024","className":"border-b border-b-gray-300"},"_owner":null,"_store":{}},{"type":"br","key":null,"ref":null,"props":{},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"type":"signHere","signee":"sender","className":"border border-gray-300 h-48"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},"templateString":"(\n            <>\n              <Tailwind>\n                <h2 className=\"text-xl font-bold mb-4\">Signature</h2>\n                <div className=\"p-4 rounded-md border border-gray-200\">\n                  By\n                  <br />\n                  <Field\n                    type=\"fullName\"\n                    signee=\"sender\"\n                    defaultValue=\"John Doe\"\n                    className=\"border-b border-b-gray-300\"\n                  />\n                  <br />\n                  <Field\n                    type=\"dateSigned\"\n                    signee=\"sender\"\n                    defaultValue=\"04/18/2024\"\n                    className=\"border-b border-b-gray-300\"\n                  />\n                  <br />\n                  <Field\n                    type=\"signHere\"\n                    signee=\"sender\"\n                    className=\"border border-gray-300 h-48\"\n                  />\n                </div>\n              </Tailwind>\n            </>\n          )"}}}}}}]},{"icon":"fa-solid fa-wind","name":"Tailwind","description":"A simple, drop-in way to use Tailwind CSS in your components.\n\n<Warning>\nThe supported Tailwind version is 3.3.2 due to changes in the PostCSS plugin synchronicity.\n</Warning>","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/tailwind","files":[{"name":"Tailwind","baseName":"tailwind","path":"tailwind/tailwind.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/tailwind/tailwind.mdx","markdown":"---\ntitle: Tailwind\n\n\n---\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nUse a simple Tailwind tag to support Tailwind in your document.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/tailwind-45926711/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Tailwind } from \"@fileforge/react-print\";\n\n<Tailwind>\n  <div className=\"bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12\"></div>\n  <p className=\"py-12 text-slate-800\">\n    This is a Tailwind component. All children of this component will have\n    access to the Tailwind CSS classes.\n  </p>\n</Tailwind>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Custom Tailwind config\n\nYou can also pass a custom Tailwind config to the Tailwind component.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/tailwind-15d3ba0e/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { Tailwind } from \"@fileforge/react-print\";\n\n<Tailwind\n  config={{\n    theme: {\n      extend: {\n        colors: {\n          primary: \"#6484cf\",\n        },\n      },\n    },\n  }}\n>\n  <div className=\"bg-primary p-12 rounded-2xl\"></div>\n  <p className=\"py-12 text-slate-800\">\n    This is a Tailwind component. All children of this component will have\n    access to the Tailwind CSS classes.\n  </p>\n</Tailwind>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"Tailwind","description":"","components":{"Tailwind":{"client":true,"server":true,"examples":{"default":{"description":"Use a simple Tailwind tag to support Tailwind in your document.","template":{"key":null,"ref":null,"props":{"children":[{"type":"div","key":null,"ref":null,"props":{"className":"bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"className":"py-12 text-slate-800","children":"This is a Tailwind component. All children of this component will have access to the Tailwind CSS classes."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind>\n              <div className=\"bg-gradient-to-tr from-blue-500 to-blue-700 rounded-2xl p-12\"></div>\n              <p className=\"py-12 text-slate-800\">\n                This is a Tailwind component. All children of this component\n                will have access to the Tailwind CSS classes.\n              </p>\n            </Tailwind>\n          )"},"config":{"name":"Custom Tailwind config","description":"You can also pass a custom Tailwind config to the Tailwind component.","template":{"key":null,"ref":null,"props":{"config":{"theme":{"extend":{"colors":{"primary":"#6484cf"}}}},"children":[{"type":"div","key":null,"ref":null,"props":{"className":"bg-primary p-12 rounded-2xl"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"className":"py-12 text-slate-800","children":"This is a Tailwind component. All children of this component will have access to the Tailwind CSS classes."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind\n              config={{\n                theme: {\n                  extend: {\n                    colors: {\n                      primary: \"#6484cf\",\n                    },\n                  },\n                },\n              }}\n            >\n              <div className=\"bg-primary p-12 rounded-2xl\"></div>\n              <p className=\"py-12 text-slate-800\">\n                This is a Tailwind component. All children of this component\n                will have access to the Tailwind CSS classes.\n              </p>\n            </Tailwind>\n          )"}}}}}}]},{"icon":"fa-solid fa-subscript","name":"Variables","description":"Display dynamic values based on your document, such as page numbers and running headers.","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables","files":[{"name":"PageNumber","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/pagenumber.mdx","markdown":"---\ntitle: PageNumber\n\n\n---\n\nReturns the current page number.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagenumber-ea46baaf/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageNumber } from \"@fileforge/react-print\";\n\n<PageNumber counterStyle=\"decimal\" />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n#### Custom Style\n\nYou can use a custom CSS counter-style, by passing a known name or a custom counter style.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagenumber-391d6c27/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PageNumber } from \"@fileforge/react-print\";\n\n<PageNumber counterStyle=\"lower-roman\" />;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n","config":{"name":"PageNumber","description":"","components":{"PageNumber":{"server":true,"client":true,"examples":{"default":{"template":{"key":null,"ref":null,"props":{"counterStyle":"decimal"},"_owner":null,"_store":{}},"templateString":"<PageNumber counterStyle=\"decimal\" />"},"customStyle":{"description":"You can use a custom CSS counter-style, by passing a known name or a custom counter style.","template":{"key":null,"ref":null,"props":{"counterStyle":"lower-roman"},"_owner":null,"_store":{}},"templateString":"<PageNumber counterStyle=\"lower-roman\" />"}}}}}},{"name":"PagesNumber","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/pagesnumber.mdx","markdown":"---\ntitle: PagesNumber\n\n\n---\n\nReturns the total number of pages.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/pagesnumber-10c1cbad/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { PagesNumber, PageNumber } from \"@fileforge/react-print\";\n\n<>\n  <PageNumber counterStyle=\"decimal\" />\n  {\" of \"}\n  <PagesNumber counterStyle=\"decimal\" />\n</>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"PagesNumber","description":"","components":{"PagesNumber":{"server":true,"client":true,"examples":{"default":{"imports":["PageNumber"],"template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"counterStyle":"decimal"},"_owner":null,"_store":{}}," of ",{"key":null,"ref":null,"props":{"counterStyle":"decimal"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <>\n              <PageNumber counterStyle=\"decimal\" />\n              {\" of \"}\n              <PagesNumber counterStyle=\"decimal\" />\n            </>\n          )"}}}}}},{"name":"RunningH1","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/runningh1.mdx","markdown":"---\ntitle: RunningH1\n\n\n---\n\nReturns the current page's running header of level 1.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n#### Preview\n\nShow the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/runningh1-16658c8e/document.1.jpg\" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: \"0.25rem\", overflow: \"hidden\", border: '1px solid #E5E4E2' }} /></Frame>\n\n<div style={{paddingTop: \"1rem\", paddingBottom: \"1rem\"}}><CodeBlocks>\n<CodeBlock title=\"template.tsx\">\n```jsx\nimport { RunningH1 } from \"@fileforge/react-print\";\n\n<React.Fragment>\n  <PageTop style={{ paddingTop: \"1rem\" }}>\n    <RunningH1 />\n  </PageTop>\n  <h1>Heading of level 1</h1>\n</React.Fragment>;\n\n```\n</CodeBlock>\n<CodeBlock title=\"styles.css\">\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\");\n\nhtml,\nbody {\n  font-size: 28px;\n  font-family: \"Inter\", sans-serif;\n}\n\n@page {\n  size: A4;\n}\n\n```\n</CodeBlock>\n</CodeBlocks></div>\n\n### Examples\n\n","config":{"name":"RunningH1","description":"","components":{"RunningH1":{"server":true,"client":true,"examples":{"default":{"description":"Show the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).","template":{"key":null,"ref":null,"props":{"children":[{"key":null,"ref":null,"props":{"style":{"paddingTop":"1rem"},"children":{"key":null,"ref":null,"props":{},"_owner":null,"_store":{}}},"_owner":null,"_store":{}},{"type":"h1","key":null,"ref":null,"props":{"children":"Heading of level 1"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <React.Fragment>\n              <PageTop style={{ paddingTop: \"1rem\" }}>\n                <RunningH1 />\n              </PageTop>\n              <h1>Heading of level 1</h1>\n            </React.Fragment>\n          )"}}}}}},{"name":"RunningH2","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/runningh2.mdx","markdown":"---\ntitle: RunningH2\n\n\n---\n\nReturns the current page's running header of level 2.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH2 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH2","description":"","components":{"RunningH2":{"server":true,"client":true}}}},{"name":"RunningH3","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/runningh3.mdx","markdown":"---\ntitle: RunningH3\n\n\n---\n\nReturns the current page's running header of level 3.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH3 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH3","description":"","components":{"RunningH3":{"server":true,"client":true}}}},{"name":"RunningH4","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/runningh4.mdx","markdown":"---\ntitle: RunningH4\n\n\n---\n\nReturns the current page's running header of level 4.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH4 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH4","description":"","components":{"RunningH4":{"server":true,"client":true}}}},{"name":"RunningH5","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/runningh5.mdx","markdown":"---\ntitle: RunningH5\n\n\n---\n\nReturns the current page's running header of level 5.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH5 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH5","description":"","components":{"RunningH5":{"server":true,"client":true}}}},{"name":"RunningH6","baseName":"variables","path":"variables/variables.tsx","outputPath":"/Users/titouanlaunay/Documents/Onedoc/react-print/docs/components/variables/runningh6.mdx","markdown":"---\ntitle: RunningH6\n\n\n---\n\nReturns the current page's running header of level 6.\n\nSupport\n\n<div style={{\n    display: \"grid\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"0.5rem\",\n  }}><div className=\"flex items-center p-3 border rounded-md border-gray-700\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Client-side</span></div><div className=\"flex items-center p-3 border rounded-md\" style={{borderColor: '#374151'}}><svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 mr-2\" viewBox=\"0 0 512 512\"><path fill=\"#22c55e\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\"/></svg><span>Server-side</span></div></div>\n\n```jsx\nimport { RunningH6 } from \"@fileforge/react-print\";\n```\n\n","config":{"name":"RunningH6","description":"","components":{"RunningH6":{"server":true,"client":true}}}}]}]
\ No newline at end of file
diff --git a/docs/ui/templates.mdx b/docs/ui/templates.mdx
index dc1c360..bfa2132 100644
--- a/docs/ui/templates.mdx
+++ b/docs/ui/templates.mdx
@@ -8,12 +8,12 @@ icon: list
 <CardGroup>
  <Card title="Scientific" href="../../../ui/templates/scientific-report">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-scientific-report-d26af32f/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-scientific-report-de8367bc/document.1.jpg"/>
       </div>
     </Card>
  <Card title="With charts" href="../../../ui/templates/report-charts">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-report-charts-7d5e23ad/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -23,7 +23,7 @@ icon: list
 <CardGroup>
  <Card title="Receipt" href="../../../ui/templates/receipt">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-receipt-3f97df85/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-receipt-0d823fc6/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -33,7 +33,7 @@ icon: list
 <CardGroup>
  <Card title="NDA Markdown" href="../../../ui/templates/nda-markdown">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-nda-markdown-0c872119/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-nda-markdown-daf9ece1/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
@@ -43,12 +43,12 @@ icon: list
 <CardGroup>
  <Card title="Basic" href="../../../ui/templates/invoice">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-invoice-b87296fc/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-8da74a96/document.1.jpg"/>
       </div>
     </Card>
  <Card title="Advanced with QR" href="../../../ui/templates/invoice-advanced">
       <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
-        <img src="../images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
diff --git a/docs/ui/templates/invoice-advanced.mdx b/docs/ui/templates/invoice-advanced.mdx
index 87d5d23..2b33def 100644
--- a/docs/ui/templates/invoice-advanced.mdx
+++ b/docs/ui/templates/invoice-advanced.mdx
@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-advanced-c81d4542/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";
diff --git a/docs/ui/templates/invoice.mdx b/docs/ui/templates/invoice.mdx
index 5ba04ca..55daf2a 100644
--- a/docs/ui/templates/invoice.mdx
+++ b/docs/ui/templates/invoice.mdx
@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-b87296fc/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-invoice-8da74a96/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind } from "@fileforge/react-print";
diff --git a/docs/ui/templates/nda-markdown.mdx b/docs/ui/templates/nda-markdown.mdx
index ed0a60a..7900ce3 100644
--- a/docs/ui/templates/nda-markdown.mdx
+++ b/docs/ui/templates/nda-markdown.mdx
@@ -4,7 +4,7 @@ icon: file-contract
 category: NDA
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-0c872119/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-daf9ece1/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React from "react";
diff --git a/docs/ui/templates/receipt.mdx b/docs/ui/templates/receipt.mdx
index d4ca488..1e312cf 100644
--- a/docs/ui/templates/receipt.mdx
+++ b/docs/ui/templates/receipt.mdx
@@ -4,7 +4,7 @@ icon: receipt
 category: Receipts
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-receipt-3f97df85/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-receipt-0d823fc6/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, Tailwind } from "@fileforge/react-print";
diff --git a/docs/ui/templates/report-charts.mdx b/docs/ui/templates/report-charts.mdx
index 439b747..2d95713 100644
--- a/docs/ui/templates/report-charts.mdx
+++ b/docs/ui/templates/report-charts.mdx
@@ -4,7 +4,7 @@ icon: chart-pie
 category: Reports
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-report-charts-7d5e23ad/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-report-charts-1339f0ec/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";
diff --git a/docs/ui/templates/scientific-report.mdx b/docs/ui/templates/scientific-report.mdx
index fa43275..5361835 100644
--- a/docs/ui/templates/scientific-report.mdx
+++ b/docs/ui/templates/scientific-report.mdx
@@ -4,7 +4,7 @@ icon: flask
 category: Reports
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-d26af32f/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-scientific-report-de8367bc/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React, { createContext, useEffect, useState } from "react";
diff --git a/src/extensions/signatureconstants.ts b/src/extensions/signatureconstants.ts
index 3de249f..b14e1b2 100644
--- a/src/extensions/signatureconstants.ts
+++ b/src/extensions/signatureconstants.ts
@@ -1,2 +1,2 @@
-export const SIGNATURE_PREFIX = "--onedoc-signature:";
+export const SIGNATURE_PREFIX = "onedoc-signature:";
 export type SigTypes = "sender" | "signer" | `signer${number}`;
diff --git a/src/footnote/footnote.css b/src/footnote/footnote.css
index b38c15d..cd5c855 100644
--- a/src/footnote/footnote.css
+++ b/src/footnote/footnote.css
@@ -1,4 +1,4 @@
-.--onedoc-footnote {
+.onedoc-footnote {
   float: footnote;
   footnote-style-position: inside;
 }
diff --git a/src/footnote/footnote.tsx b/src/footnote/footnote.tsx
index b6eb0b0..39aee3d 100644
--- a/src/footnote/footnote.tsx
+++ b/src/footnote/footnote.tsx
@@ -15,10 +15,7 @@ export const Footnote = ({
   children: React.ReactNode;
 }) => {
   return (
-    <span
-      className="--onedoc-footnote text-left text-xs font-normal"
-      {...props}
-    >
+    <span className="onedoc-footnote text-left text-xs font-normal" {...props}>
       {children}
     </span>
   );
@@ -33,7 +30,17 @@ export const __docConfig: DocConfig = {
       client: true,
       examples: {
         default: {
-          template: <div>This is a footnote to explaning what CSS <Footnote>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML).</Footnote> is.</div>,
+          template: (
+            <div>
+              This is a footnote to explaning what CSS{" "}
+              <Footnote>
+                CSS is the acronym of “Cascading Style Sheets”. CSS is a
+                computer language for laying out and structuring web pages (HTML
+                or XML).
+              </Footnote>{" "}
+              is.
+            </div>
+          ),
         },
       },
     },
diff --git a/src/shell/shell.css b/src/shell/shell.css
index ae826aa..eedd39b 100644
--- a/src/shell/shell.css
+++ b/src/shell/shell.css
@@ -1,37 +1,41 @@
 @page {
   @top-left {
-    content: flow(--onedoc-page-top);
+    content: flow(FileforgePageTop);
+    content: element(FileforgePageTop);
     position: relative;
   }
 
   @bottom-left {
-    content: flow(--onedoc-page-bottom);
+    content: flow(FileforgePageBottom);
+    content: element(FileforgePageBottom);
     position: relative;
   }
 }
 
-.--onedoc-page-top {
-  -prince-flow: static(--onedoc-page-top);
+.onedoc-page-top {
+  position: running(FileforgePageTop) !important;
+  -prince-flow: static(FileforgePageTop);
   width: 100%;
   height: 100%;
 }
 
-.--onedoc-current-page-top {
-  position: --onedoc-page-top;
+.onedoc-current-page-top {
+  position: FileforgePageTop;
   width: 100%;
   height: 100%;
 }
 
-.--onedoc-page-bottom {
-  -prince-flow: static(--onedoc-page-bottom);
+.onedoc-page-bottom {
+  position: running(FileforgePageBottom) !important;
+  -prince-flow: static(FileforgePageBottom);
   width: 100%;
   height: 100%;
 }
 
-.--onedoc-page-break {
+.onedoc-page-break {
   page-break-after: always;
 }
 
-.--onedoc-no-break {
+.onedoc-no-break {
   page-break-inside: avoid;
 }
diff --git a/src/shell/shell.tsx b/src/shell/shell.tsx
index d2d9e76..0fec6de 100644
--- a/src/shell/shell.tsx
+++ b/src/shell/shell.tsx
@@ -9,7 +9,7 @@ import { DocConfig } from "../../docgen/types";
  */
 export const PageTop = (props: React.HTMLProps<HTMLDivElement>) => {
   return (
-    <div {...props} className={`--onedoc-page-top ${props?.className || ""}`} />
+    <div {...props} className={`onedoc-page-top ${props?.className || ""}`} />
   );
 };
 
@@ -22,7 +22,7 @@ export const CurrentPageTop = (props: React.HTMLProps<HTMLDivElement>) => {
   return (
     <div
       {...props}
-      className={`--onedoc-current-page-top ${props?.className || ""}`}
+      className={`onedoc-current-page-top ${props?.className || ""}`}
     />
   );
 };
@@ -34,7 +34,7 @@ export const PageBottom = (props: React.HTMLProps<HTMLDivElement>) => {
   return (
     <div
       {...props}
-      className={`--onedoc-page-bottom ${props?.className || ""}`}
+      className={`onedoc-page-bottom ${props?.className || ""}`}
     />
   );
 };
@@ -44,10 +44,7 @@ export const PageBottom = (props: React.HTMLProps<HTMLDivElement>) => {
  */
 export const PageBreak = (props: React.HTMLProps<HTMLDivElement>) => {
   return (
-    <div
-      {...props}
-      className={`--onedoc-page-break ${props?.className || ""}`}
-    />
+    <div {...props} className={`onedoc-page-break ${props?.className || ""}`} />
   );
 };
 
@@ -56,7 +53,7 @@ export const PageBreak = (props: React.HTMLProps<HTMLDivElement>) => {
  */
 export const NoBreak = (props: React.HTMLProps<HTMLDivElement>) => {
   return (
-    <div {...props} className={`--onedoc-no-break ${props?.className || ""}`} />
+    <div {...props} className={`onedoc-no-break ${props?.className || ""}`} />
   );
 };
 
@@ -122,7 +119,13 @@ export const __docConfig: DocConfig = {
       client: true,
       examples: {
         default: {
-          template: <div><div>Hello on this page</div><PageBreak /><div>World on that page</div></div>,
+          template: (
+            <div>
+              <div>Hello on this page</div>
+              <PageBreak />
+              <div>World on that page</div>
+            </div>
+          ),
         },
       },
     },
@@ -131,7 +134,9 @@ export const __docConfig: DocConfig = {
       client: true,
       examples: {
         default: {
-          template: <NoBreak>This content will not be split between two pages.</NoBreak>,
+          template: (
+            <NoBreak>This content will not be split between two pages.</NoBreak>
+          ),
         },
       },
     },
diff --git a/src/signature/signature.tsx b/src/signature/signature.tsx
index 9ab4eaa..98e9a3a 100644
--- a/src/signature/signature.tsx
+++ b/src/signature/signature.tsx
@@ -49,7 +49,7 @@ export const Field = ({
         type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "text"
       }
       data-onedoc-sign={type}
-      className={`--onedoc-signature-field --onedoc-signature-field-${type} ${props.className || ""}`}
+      className={`onedoc-signature-field onedoc-signature-field-${type} ${props.className || ""}`}
     />
   );
 };
diff --git a/src/variables/headings.css b/src/variables/headings.css
index 13a87c1..aa7fc17 100644
--- a/src/variables/headings.css
+++ b/src/variables/headings.css
@@ -1,58 +1,58 @@
 h1 {
-  string-set: onedocH1Contents contents onedocH2Contents "" onedocH3Contents ""
-    onedocH4Contents "" onedocH5Contents "" onedocH6Contents "";
+  string-set: onedocH1Contents content(text);
 }
 
 h2 {
-  string-set: onedocH2Contents contents onedocH3Contents "" onedocH4Contents ""
-    onedocH5Contents "" onedocH6Contents "";
+  string-set: onedocH2Contents content(text) onedocH3Contents ""
+    onedocH4Contents "" onedocH5Contents "" onedocH6Contents "";
 }
 
 h3 {
-  string-set: onedocH3Contents contents onedocH4Contents "" onedocH5Contents ""
-    onedocH6Contents "";
+  string-set: onedocH3Contents content(text) onedocH4Contents ""
+    onedocH5Contents "" onedocH6Contents "";
 }
 
 h4 {
-  string-set: onedocH4Contents contents onedocH5Contents "" onedocH6Contents "";
+  string-set: onedocH4Contents content(text) onedocH5Contents ""
+    onedocH6Contents "";
 }
 
 h5 {
-  string-set: onedocH5Contents contents onedocH6Contents "";
+  string-set: onedocH5Contents content(text) onedocH6Contents "";
 }
 
 h6 {
-  string-set: onedocH6Contents contents;
+  string-set: onedocH6Contents content(text);
 }
 
-.--onedoc-heading-contents:not(:empty)::before {
+.onedoc-heading-contents:not(:empty)::before {
   content: attr(data-before);
 }
 
-.--onedoc-heading-contents:not(:empty)::after {
+.onedoc-heading-contents:not(:empty)::after {
   content: attr(data-after);
 }
 
-.--onedoc-h1-contents {
+.onedoc-h1-contents:before {
   content: string(onedocH1Contents);
 }
 
-.--onedoc-h2-contents {
+.onedoc-h2-contents:before {
   content: string(onedocH2Contents);
 }
 
-.--onedoc-h3-contents {
+.onedoc-h3-contents:before {
   content: string(onedocH3Contents);
 }
 
-.--onedoc-h4-contents {
+.onedoc-h4-contents:before {
   content: string(onedocH4Contents);
 }
 
-.--onedoc-h5-contents {
+.onedoc-h5-contents:before {
   content: string(onedocH5Contents);
 }
 
-.--onedoc-h6-contents {
+.onedoc-h6-contents:before {
   content: string(onedocH6Contents);
 }
diff --git a/src/variables/variables.tsx b/src/variables/variables.tsx
index ebfb997..3d9f967 100644
--- a/src/variables/variables.tsx
+++ b/src/variables/variables.tsx
@@ -3,6 +3,7 @@ import "./headings.css";
 import "./variables.css";
 import { DocConfig } from "../../docgen/types";
 import { PageTop } from "../shell/shell";
+import { CSS } from "../css/css";
 
 /**
  * Returns the current page number.
@@ -16,11 +17,16 @@ export const PageNumber = ({
   counterStyle?: string;
 }) => {
   return (
-    <span
-      style={{
-        content: `counter(page, ${counterStyle})`,
-      }}
-    />
+    <>
+      <CSS>
+        {`
+.onedoc-page-number-${counterStyle}:before {
+  content: counter(page, ${counterStyle});
+}
+        `}
+      </CSS>
+      <span className={`onedoc-page-number-${counterStyle}`} />
+    </>
   );
 };
 
@@ -36,11 +42,16 @@ export const PagesNumber = ({
   counterStyle?: string;
 }) => {
   return (
-    <span
-      style={{
-        content: `counter(pages, ${counterStyle})`,
-      }}
-    />
+    <>
+      <CSS>
+        {`
+.onedoc-pages-number-${counterStyle}:before {
+  content: counter(pages, ${counterStyle});
+}
+        `}
+      </CSS>
+      <span className={`onedoc-pages-number-${counterStyle}`} />
+    </>
   );
 };
 
@@ -48,7 +59,7 @@ const RunningHeader = (level: number) => {
   return ({ before = "", after = "" }: { before?: string; after?: string }) => {
     return (
       <span
-        className={`--onedoc-heading-contents --onedoc-h${level}-contents`}
+        className={`onedoc-heading-contents onedoc-h${level}-contents`}
         data-before={before}
         data-after={after}
       />