diff --git a/docs/components/markdown/markdown.mdx b/docs/components/markdown/markdown.mdx
index e8e9884..0464b92 100644
--- a/docs/components/markdown/markdown.mdx
+++ b/docs/components/markdown/markdown.mdx
@@ -110,6 +110,8 @@ body {
 
 You can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `<Toc />` component in your Markdown content to render the table of contents.
 
+You can also use the `id` attribute in your headers to link to them directly.
+
 <Frame background="subtle"><img src="../../images/previews/markdown-344947c9/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>
diff --git a/docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.1.jpg b/docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.1.jpg
rename to docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.1.jpg
diff --git a/docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.pdf b/docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.pdf
rename to docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.pdf
index 21e7645..4ede634 100644
Binary files a/docs/images/previews/ui-templates-invoice-advanced-089aa4f4/document.pdf and b/docs/images/previews/ui-templates-invoice-advanced-657df4ea/document.pdf differ
diff --git a/docs/images/previews/ui-templates-invoice-808342e7/document.1.jpg b/docs/images/previews/ui-templates-invoice-c1137a92/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-invoice-808342e7/document.1.jpg
rename to docs/images/previews/ui-templates-invoice-c1137a92/document.1.jpg
diff --git a/docs/images/previews/ui-templates-invoice-808342e7/document.pdf b/docs/images/previews/ui-templates-invoice-c1137a92/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-invoice-808342e7/document.pdf
rename to docs/images/previews/ui-templates-invoice-c1137a92/document.pdf
index 84a7188..bccb289 100644
Binary files a/docs/images/previews/ui-templates-invoice-808342e7/document.pdf and b/docs/images/previews/ui-templates-invoice-c1137a92/document.pdf differ
diff --git a/docs/images/previews/ui-templates-receipt-4906d507/document.1.jpg b/docs/images/previews/ui-templates-receipt-644d535a/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-receipt-4906d507/document.1.jpg
rename to docs/images/previews/ui-templates-receipt-644d535a/document.1.jpg
diff --git a/docs/images/previews/ui-templates-receipt-4906d507/document.pdf b/docs/images/previews/ui-templates-receipt-644d535a/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-receipt-4906d507/document.pdf
rename to docs/images/previews/ui-templates-receipt-644d535a/document.pdf
index fbd3756..bf73aa4 100644
Binary files a/docs/images/previews/ui-templates-receipt-4906d507/document.pdf and b/docs/images/previews/ui-templates-receipt-644d535a/document.pdf differ
diff --git a/docs/images/previews/ui-templates-scientific-report-31829950/document.1.jpg b/docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.1.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-scientific-report-31829950/document.1.jpg
rename to docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.1.jpg
diff --git a/docs/images/previews/ui-templates-scientific-report-31829950/document.2.jpg b/docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.2.jpg
similarity index 100%
rename from docs/images/previews/ui-templates-scientific-report-31829950/document.2.jpg
rename to docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.2.jpg
diff --git a/docs/images/previews/ui-templates-scientific-report-31829950/document.pdf b/docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.pdf
similarity index 99%
rename from docs/images/previews/ui-templates-scientific-report-31829950/document.pdf
rename to docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.pdf
index 2cccda8..5fcebf1 100644
Binary files a/docs/images/previews/ui-templates-scientific-report-31829950/document.pdf and b/docs/images/previews/ui-templates-scientific-report-7f68dcf5/document.pdf differ
diff --git a/docs/sortedDocs.json b/docs/sortedDocs.json
index c6ab217..737f614 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/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-f31067dd/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-8dbcfb7e/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-fa74d9a5/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-0d283416/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-35fa1266/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-e49ec577/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-2663e15e/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-c1cd8f84/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-f4432de3/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-cdc02780/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 }: { children: React.ReactNode }) => (\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#### Table of Contents\n\nYou can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `<Toc />` component in your Markdown content to render the table of contents.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/markdown-344947c9/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<Tailwind\n  config={{\n    corePlugins: {\n      preflight: false,\n    },\n  }}\n>\n  <CSS>{`a.-toc-link:after {\n                content: target-counter(attr(href), page);\n                float: right;\n              }`}</CSS>\n  <Markdown\n    options={{\n      overrides: {\n        PageBreak: {\n          component: PageBreak, // import { PageBreak } from \"@fileforge/react-print\";\n        },\n      },\n    }}\n    tocRenderer={({ level, children, id }) => (\n      <a\n        className=\"block py-2 border-b -toc-link\"\n        style={{\n          paddingLeft: `${(level - 1) * 1}rem`,\n        }}\n        href={`#${id}`}\n      >\n        {children}\n      </a>\n    )}\n  >{`# Table of Contents\n\n<Toc />\n\n<PageBreak />\n\n# This is a level 1 header\n\n## This is a level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n## This is another level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n# This is a level 1 header, bis\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.`}</Markdown>\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":"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: ({\n                      children,\n                    }: {\n                      children: React.ReactNode;\n                    }) => (\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          )"},"tableOfContents":{"name":"Table of Contents","description":"You can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `<Toc />` component in your Markdown content to render the table of contents.","template":{"key":null,"ref":null,"props":{"config":{"corePlugins":{"preflight":false}},"children":[{"key":null,"ref":null,"props":{"children":"a.-toc-link:after {\n                content: target-counter(attr(href), page);\n                float: right;\n              }"},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"options":{"overrides":{"PageBreak":{}},"namedCodesToUnicode":{"amp":"&","apos":"'","gt":">","lt":"<","nbsp":" ","quot":"“"}},"children":"# Table of Contents\n\n<Toc />\n\n<PageBreak />\n\n# This is a level 1 header\n\n## This is a level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n## This is another level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n# This is a level 1 header, bis\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind\n              config={{\n                corePlugins: {\n                  preflight: false,\n                },\n              }}\n            >\n              <CSS>{`a.-toc-link:after {\n                content: target-counter(attr(href), page);\n                float: right;\n              }`}</CSS>\n              <Markdown\n                options={{\n                  overrides: {\n                    PageBreak: {\n                      component: PageBreak, // import { PageBreak } from \"@fileforge/react-print\";\n                    },\n                  },\n                }}\n                tocRenderer={({ level, children, id }) => (\n                  <a\n                    className=\"block py-2 border-b -toc-link\"\n                    style={{\n                      paddingLeft: `${(level - 1) * 1}rem`,\n                    }}\n                    href={`#${id}`}\n                  >\n                    {children}\n                  </a>\n                )}\n              >{`# Table of Contents\n\n<Toc />\n\n<PageBreak />\n\n# This is a level 1 header\n\n## This is a level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n## This is another level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n# This is a level 1 header, bis\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.`}</Markdown>\n            </Tailwind>\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-2643a477/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-53bf6bd2/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-fd5eaff9/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-1c4af231/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-bb162ea2/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-ba337df4/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-8e7a7bcb/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-e99fe796/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-b7e447a6/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#### Disable Preflight\n\nYou can disable the Tailwind Preflight CSS.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/tailwind-1aadcc0c/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    corePlugins: {\n      preflight: false,\n    },\n  }}\n>\n  <div className=\"bg-primary p-12 rounded-2xl\"></div>\n  <h1>Level 1 Header</h1>\n  <p className=\"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          )"},"preflight":{"name":"Disable Preflight","description":"You can disable the Tailwind Preflight CSS.","template":{"key":null,"ref":null,"props":{"config":{"corePlugins":{"preflight":false}},"children":[{"type":"div","key":null,"ref":null,"props":{"className":"bg-primary p-12 rounded-2xl"},"_owner":null,"_store":{}},{"type":"h1","key":null,"ref":null,"props":{"children":"Level 1 Header"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"className":"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                corePlugins: {\n                  preflight: false,\n                },\n              }}\n            >\n              <div className=\"bg-primary p-12 rounded-2xl\"></div>\n              <h1>Level 1 Header</h1>\n              <p className=\"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-fe8490ef/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-4d636b47/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-ba7ca0ce/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-230ef375/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
+[{"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-f31067dd/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-8dbcfb7e/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-fa74d9a5/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-0d283416/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-35fa1266/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-e49ec577/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-2663e15e/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-c1cd8f84/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-f4432de3/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-cdc02780/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 }: { children: React.ReactNode }) => (\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#### Table of Contents\n\nYou can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `<Toc />` component in your Markdown content to render the table of contents.\n\nYou can also use the `id` attribute in your headers to link to them directly.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/markdown-344947c9/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<Tailwind\n  config={{\n    corePlugins: {\n      preflight: false,\n    },\n  }}\n>\n  <CSS>{`a.-toc-link:after {\n                content: target-counter(attr(href), page);\n                float: right;\n              }`}</CSS>\n  <Markdown\n    options={{\n      overrides: {\n        PageBreak: {\n          component: PageBreak, // import { PageBreak } from \"@fileforge/react-print\";\n        },\n      },\n    }}\n    tocRenderer={({ level, children, id }) => (\n      <a\n        className=\"block py-2 border-b -toc-link\"\n        style={{\n          paddingLeft: `${(level - 1) * 1}rem`,\n        }}\n        href={`#${id}`}\n      >\n        {children}\n      </a>\n    )}\n  >{`# Table of Contents\n\n<Toc />\n\n<PageBreak />\n\n# This is a level 1 header\n\n## This is a level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n## This is another level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n# This is a level 1 header, bis\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.`}</Markdown>\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":"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: ({\n                      children,\n                    }: {\n                      children: React.ReactNode;\n                    }) => (\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          )"},"tableOfContents":{"name":"Table of Contents","description":"You can use the `tocRenderer` prop to render a table of contents from your Markdown content. The headers will be automatically detected and rendered in the order they appear. You need to place the `<Toc />` component in your Markdown content to render the table of contents.\n\nYou can also use the `id` attribute in your headers to link to them directly.","template":{"key":null,"ref":null,"props":{"config":{"corePlugins":{"preflight":false}},"children":[{"key":null,"ref":null,"props":{"children":"a.-toc-link:after {\n                content: target-counter(attr(href), page);\n                float: right;\n              }"},"_owner":null,"_store":{}},{"key":null,"ref":null,"props":{"options":{"overrides":{"PageBreak":{}},"namedCodesToUnicode":{"amp":"&","apos":"'","gt":">","lt":"<","nbsp":" ","quot":"“"}},"children":"# Table of Contents\n\n<Toc />\n\n<PageBreak />\n\n# This is a level 1 header\n\n## This is a level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n## This is another level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n# This is a level 1 header, bis\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},"templateString":"(\n            <Tailwind\n              config={{\n                corePlugins: {\n                  preflight: false,\n                },\n              }}\n            >\n              <CSS>{`a.-toc-link:after {\n                content: target-counter(attr(href), page);\n                float: right;\n              }`}</CSS>\n              <Markdown\n                options={{\n                  overrides: {\n                    PageBreak: {\n                      component: PageBreak, // import { PageBreak } from \"@fileforge/react-print\";\n                    },\n                  },\n                }}\n                tocRenderer={({ level, children, id }) => (\n                  <a\n                    className=\"block py-2 border-b -toc-link\"\n                    style={{\n                      paddingLeft: `${(level - 1) * 1}rem`,\n                    }}\n                    href={`#${id}`}\n                  >\n                    {children}\n                  </a>\n                )}\n              >{`# Table of Contents\n\n<Toc />\n\n<PageBreak />\n\n# This is a level 1 header\n\n## This is a level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n## This is another level 2 header\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.\n\n# This is a level 1 header, bis\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.`}</Markdown>\n            </Tailwind>\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-2643a477/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-53bf6bd2/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-fd5eaff9/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-1c4af231/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-bb162ea2/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-ba337df4/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-8e7a7bcb/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-e99fe796/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-b7e447a6/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#### Disable Preflight\n\nYou can disable the Tailwind Preflight CSS.\n\n<Frame background=\"subtle\"><img src=\"../../images/previews/tailwind-1aadcc0c/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    corePlugins: {\n      preflight: false,\n    },\n  }}\n>\n  <div className=\"bg-primary p-12 rounded-2xl\"></div>\n  <h1>Level 1 Header</h1>\n  <p className=\"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          )"},"preflight":{"name":"Disable Preflight","description":"You can disable the Tailwind Preflight CSS.","template":{"key":null,"ref":null,"props":{"config":{"corePlugins":{"preflight":false}},"children":[{"type":"div","key":null,"ref":null,"props":{"className":"bg-primary p-12 rounded-2xl"},"_owner":null,"_store":{}},{"type":"h1","key":null,"ref":null,"props":{"children":"Level 1 Header"},"_owner":null,"_store":{}},{"type":"p","key":null,"ref":null,"props":{"className":"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                corePlugins: {\n                  preflight: false,\n                },\n              }}\n            >\n              <div className=\"bg-primary p-12 rounded-2xl\"></div>\n              <h1>Level 1 Header</h1>\n              <p className=\"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-fe8490ef/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-4d636b47/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-ba7ca0ce/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-230ef375/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 c638155..d3e2eca 100644
--- a/docs/ui/templates.mdx
+++ b/docs/ui/templates.mdx
@@ -8,7 +8,7 @@ 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-31829950/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-scientific-report-7f68dcf5/document.1.jpg"/>
       </div>
     </Card>
  <Card title="With charts" href="../../../ui/templates/report-charts">
@@ -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-4906d507/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-receipt-644d535a/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-808342e7/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-c1137a92/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-089aa4f4/document.1.jpg"/>
+        <img src="../images/previews/ui-templates-invoice-advanced-657df4ea/document.1.jpg"/>
       </div>
     </Card>
 </CardGroup>
diff --git a/docs/ui/templates/invoice-advanced.mdx b/docs/ui/templates/invoice-advanced.mdx
index 55a852b..fe1e8ab 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-089aa4f4/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-657df4ea/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 2df7972..4998806 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-808342e7/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-c1137a92/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/receipt.mdx b/docs/ui/templates/receipt.mdx
index f5c91da..8e69434 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-4906d507/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-644d535a/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/scientific-report.mdx b/docs/ui/templates/scientific-report.mdx
index 6264919..cd1d7c0 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-31829950/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-7f68dcf5/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/tailwind/tailwind.tsx b/src/tailwind/tailwind.tsx
index 495b274..0d44d61 100644
--- a/src/tailwind/tailwind.tsx
+++ b/src/tailwind/tailwind.tsx
@@ -5,12 +5,11 @@
 
 import { DocConfig } from "docgen/types";
 import React from "react";
-import postcss, { Processor } from "postcss";
+import postcss from "postcss";
 // import type { Config as TailwindConfig } from "tailwindcss";
 // @ts-ignore
 import postcssColorFunctionalNotation from "postcss-color-functional-notation";
 
-import { quickSafeRenderToString } from "./utils.resend";
 import type { CorePluginsConfig } from "tailwindcss/types/config";
 
 import { CSS } from "../css/css";
@@ -21,6 +20,7 @@ import { createTailwindcssPlugin } from "@mhsdesign/jit-browser-tailwindcss";
 
 // @ts-ignore
 import isPseudoClass from "@csstools/postcss-is-pseudo-class";
+import { renderToString } from "react-dom/server";
 
 export const Tailwind = ({
   children,
@@ -38,7 +38,15 @@ export const Tailwind = ({
    */
   config?: any; // Omit<TailwindConfig, "content">;
 }) => {
-  const markup = quickSafeRenderToString(children);
+  const markup = renderToString(<>{children}</>);
+
+  const classNamesList = (markup.match(/class="([^"]*)"/g) || [])
+    .map((match) => {
+      return match.substring(7, match.length - 1).split(" ");
+    })
+    .flat();
+
+  const classNamesSet = new Set(classNamesList);
 
   const corePlugins = config?.corePlugins as CorePluginsConfig;
 
@@ -61,7 +69,13 @@ export const Tailwind = ({
   const { css } = postcss([
     createTailwindcssPlugin({
       tailwindConfig,
-      content: [{ content: markup, extension: "html" }],
+      content: [
+        {
+          content: `<div class="${Array.from(classNamesSet).join(" ")}"
+        }"></div>`,
+          extension: "html",
+        },
+      ],
     }),
     // postcssCssVariables,
     isPseudoClass(),
diff --git a/tests/compile.test.tsx b/tests/compile.test.tsx
index 59f4a14..c3a9d54 100644
--- a/tests/compile.test.tsx
+++ b/tests/compile.test.tsx
@@ -26,6 +26,24 @@ test("works with tailwind", async () => {
   expect(html).toContain("rgba(239, 68, 68");
 });
 
+test("smoke test tailwind", async () => {
+  const TestComponent = () => {
+    return (
+      <Tailwind>
+        {Array.from({ length: 1000000 }).map((_, i) => (
+          <div key={i} className="bg-red-500">
+            Test
+          </div>
+        ))}
+      </Tailwind>
+    );
+  };
+
+  const html = await compile(<TestComponent />);
+
+  expect(html).toContain("rgba(239, 68, 68");
+});
+
 test("works with tailwind dark", async () => {
   const TestComponent = () => (
     <Tailwind