From 1c21749441de0ea08b8f81140cc6039c00ed4736 Mon Sep 17 00:00:00 2001
From: Pierre Dorge <pierre.dorge@onedoclabs.com>
Date: Tue, 4 Jun 2024 10:26:57 +0200
Subject: [PATCH] Fixes compile component example

---
 docs/components/compile/compile.mdx           |   4 +-
 docs/components/css.mdx                       | 117 --------
 docs/components/latex/latex.mdx               |   5 -
 docs/components/markdown/markdown.mdx         |   5 -
 docs/components/shell.mdx                     | 181 ------------
 docs/components/tailwind/tailwind.mdx         |   5 -
 docs/components/variables.mdx                 | 273 ------------------
 .../previews/compile-2e394416/document.1.jpg  | Bin 0 -> 42035 bytes
 .../previews/compile-2e394416/document.pdf    | Bin 0 -> 7208 bytes
 docs/ui/templates/nda-markdown.mdx            |   2 +-
 docs/ui/templates/scientific-report.mdx       |   2 +-
 src/compile/compile.tsx                       |   2 +-
 12 files changed, 5 insertions(+), 591 deletions(-)
 delete mode 100644 docs/components/css.mdx
 delete mode 100644 docs/components/shell.mdx
 delete mode 100644 docs/components/variables.mdx
 create mode 100644 docs/images/previews/compile-2e394416/document.1.jpg
 create mode 100644 docs/images/previews/compile-2e394416/document.pdf

diff --git a/docs/components/compile/compile.mdx b/docs/components/compile/compile.mdx
index b38a231..6414cb2 100644
--- a/docs/components/compile/compile.mdx
+++ b/docs/components/compile/compile.mdx
@@ -19,7 +19,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
           const html = await compile(<Component />);
           ```
 
-<Frame background="subtle"><img src="../../images/previews/compile-56b466a8/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/compile-2e394416/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
@@ -27,7 +27,7 @@ A simple function to compile a React component to an HTML string with the Onedoc
 import { compile } from "@fileforge/react-print";
 
 <Tailwind>
-  <div className="bg-red"></div>
+  <div className="bg-red-400">Hello World!</div>
 </Tailwind>;
 
 ```
diff --git a/docs/components/css.mdx b/docs/components/css.mdx
deleted file mode 100644
index 130cab9..0000000
--- a/docs/components/css.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: CSS
-icon: css3-alt
-description: "Allows adding CSS to the document while securely parsing and escaping it.
-
-NB: 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."
----
-
-## CSS
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-### Examples
-
-#### Preview
-
-Use a simple CSS print property to set the page size.
-
-<Frame type="glass"><img src="../images/previews/css-b26814a3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { CSS } from "@fileforge/react-print";
-
-<CSS>{`@page { size: a4 landscape; }`}</CSS>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-#### Load a Google Font
-
-Load a Google Font using the `@import` rule.
-
-<Frame type="glass"><img src="../images/previews/css-393a92da/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { CSS } from "@fileforge/react-print";
-
-<React.Fragment>
-  <CSS>
-    {`@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');`}
-  </CSS>
-  <p style={{ fontFamily: "Roboto, sans-serif" }}>
-    This text uses the Roboto Light font.
-  </p>
-</React.Fragment>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-#### Layout
-
-You can use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page).
-
-<Frame type="glass"><img src="../images/previews/css-83e5c15a/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { CSS } from "@fileforge/react-print";
-
-<React.Fragment>
-  <CSS>{`@page {size: A4;margin-top:1cm;margin-right:1cm;margin-left:1cm;margin-bottom:1cm;`}</CSS>
-  <div>Hello world!</div>
-</React.Fragment>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
diff --git a/docs/components/latex/latex.mdx b/docs/components/latex/latex.mdx
index d97dedb..002fcd8 100644
--- a/docs/components/latex/latex.mdx
+++ b/docs/components/latex/latex.mdx
@@ -51,16 +51,11 @@ body {
 
 Write complex LaTeX formulas in your document.
 
-<<<<<<< HEAD:docs/components/latex/latex.mdx
 <Frame background="subtle"><img src="../../images/previews/latex-7a00ed36/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
 ```jsx
-=======
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
->>>>>>> main:docs/components/latex.mdx
 import { Latex } from "@fileforge/react-print";
 
 <Latex>{String.raw`% \f is defined as #1f(#2) using the macro
diff --git a/docs/components/markdown/markdown.mdx b/docs/components/markdown/markdown.mdx
index fbe4c6f..fba4d57 100644
--- a/docs/components/markdown/markdown.mdx
+++ b/docs/components/markdown/markdown.mdx
@@ -59,14 +59,9 @@ You can leverage the `overrides` prop to replace Markdown components with your o
 
 <Frame background="subtle"><img src="../../images/previews/markdown-882cc486/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
-<<<<<<< HEAD:docs/components/markdown/markdown.mdx
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
 ```jsx
-=======
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
->>>>>>> main:docs/components/markdown.mdx
 import { Markdown } from "@fileforge/react-print";
 
 <Markdown
diff --git a/docs/components/shell.mdx b/docs/components/shell.mdx
deleted file mode 100644
index a380428..0000000
--- a/docs/components/shell.mdx
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: Shell
-icon: border-all
-description: "Display content in other page regions."
----
-
-## PageTop
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Displays content in the top of all the pages.
-
-This component should be placed as early as possible in the document and will apply to all subsequent pages.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagetop-9dd97ef3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageTop } from "@fileforge/react-print";
-
-<PageTop style={{ backgroundColor: "#bfdbfe" }} />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-## CurrentPageTop
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Displays content in the top of the current page.
-
-This component will override the content of the `PageTop` component for the current page.
-
-```jsx
-import { CurrentPageTop } from "@fileforge/react-print";
-```
-
-## PageBottom
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Displays content in the bottom of all the pages.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagebottom-206d811e/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageBottom } from "@fileforge/react-print";
-
-<PageBottom style={{ backgroundColor: "#bfdbfe" }} />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-## PageBreak
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Forces a page break.
-
-```jsx
-import { PageBreak } from "@fileforge/react-print";
-```
-
-## NoBreak
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Prevents a page break. Wrap this component around content that should not be broken across pages.
-
-```jsx
-import { NoBreak } from "@fileforge/react-print";
-```
-
-## FloatBottom
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Floats the content to the bottom of the page.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/floatbottom-9a3986d7/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { FloatBottom } from "@fileforge/react-print";
-
-<FloatBottom>Here are some floated contents</FloatBottom>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
diff --git a/docs/components/tailwind/tailwind.mdx b/docs/components/tailwind/tailwind.mdx
index fe3ca3e..4e55f44 100644
--- a/docs/components/tailwind/tailwind.mdx
+++ b/docs/components/tailwind/tailwind.mdx
@@ -59,14 +59,9 @@ You can also pass a custom Tailwind config to the Tailwind component.
 
 <Frame background="subtle"><img src="../../images/previews/tailwind-841def4d/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
-<<<<<<< HEAD:docs/components/tailwind/tailwind.mdx
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeBlocks>
 <CodeBlock title="template.tsx">
 ```jsx
-=======
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
->>>>>>> main:docs/components/tailwind.mdx
 import { Tailwind } from "@fileforge/react-print";
 
 <Tailwind
diff --git a/docs/components/variables.mdx b/docs/components/variables.mdx
deleted file mode 100644
index 08cd3d7..0000000
--- a/docs/components/variables.mdx
+++ /dev/null
@@ -1,273 +0,0 @@
----
-title: Variables
-icon: subscript
-description: "Display dynamic values based on your document, such as page numbers and running headers."
----
-
-## PageNumber
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page number.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagenumber-cc94f6f7/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageNumber } from "@fileforge/react-print";
-
-<PageNumber counterStyle="decimal" />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-#### Custom Style
-
-You can use a custom CSS counter-style, by passing a known name or a custom counter style.
-
-<Frame type="glass"><img src="../images/previews/pagenumber-7e3be4c3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PageNumber } from "@fileforge/react-print";
-
-<PageNumber counterStyle="lower-roman" />;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-### API
-
-<ResponseField name="Props">
-<Expandable defaultOpen={true} title="Show available props">
-<ResponseField name="counterStyle" type="string" required={false}>
-
-The style of the counter.
-
-Default: `"decimal"`
-
-</ResponseField>
-</Expandable></ResponseField>
-## PagesNumber
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the total number of pages.
-
-### Examples
-
-#### Preview
-
-<Frame type="glass"><img src="../images/previews/pagesnumber-a7d845b5/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { PagesNumber, PageNumber } from "@fileforge/react-print";
-
-<>
-  <PageNumber counterStyle="decimal" />
-  {" of "}
-  <PagesNumber counterStyle="decimal" />
-</>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-### API
-
-<ResponseField name="Props">
-<Expandable defaultOpen={true} title="Show available props">
-<ResponseField name="counterStyle" type="string" required={false}>
-
-The style of the counter.
-
-Default: `"decimal"`
-
-</ResponseField>
-</Expandable></ResponseField>
-## RunningH1
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page's running header of level 1.
-
-### Examples
-
-#### Preview
-
-Show the current running header of level 1 in the page header. All running headers are reset when any of their parent headings are encountered (e.g. a level 2 heading resets the level 3, 4, 5 and 6 headings).
-
-<Frame type="glass"><img src="../images/previews/runningh1-b41bbc29/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
-
-<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
-```jsx template.tsx
-import { RunningH1 } from "@fileforge/react-print";
-
-<React.Fragment>
-  <PageTop style={{ paddingTop: "1rem" }}>
-    <RunningH1 />
-  </PageTop>
-  <h1>Heading of level 1</h1>
-</React.Fragment>;
-
-```
-```css base.css
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
-
-html,
-body {
-  font-size: 28px;
-  font-family: "Inter", sans-serif;
-}
-
-@page {
-  size: A4;
-}
-
-```
-</CodeGroup></div>
-
-## RunningH2
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page's running header of level 2.
-
-```jsx
-import { RunningH2 } from "@fileforge/react-print";
-```
-
-## RunningH3
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page's running header of level 3.
-
-```jsx
-import { RunningH3 } from "@fileforge/react-print";
-```
-
-## RunningH4
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page's running header of level 4.
-
-```jsx
-import { RunningH4 } from "@fileforge/react-print";
-```
-
-## RunningH5
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page's running header of level 5.
-
-```jsx
-import { RunningH5 } from "@fileforge/react-print";
-```
-
-## RunningH6
-
-Support
-
-<div style={{
-    display: "grid",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "0.5rem",
-  }}><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>
-
-Returns the current page's running header of level 6.
-
-```jsx
-import { RunningH6 } from "@fileforge/react-print";
-```
-
diff --git a/docs/images/previews/compile-2e394416/document.1.jpg b/docs/images/previews/compile-2e394416/document.1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4143aa96971ac2b5da7cbc9a2f91af58d8852b1b
GIT binary patch
literal 42035
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
XKmZT`1ONd*01yBK{&xuMlnwkJ&#2DQ

literal 0
HcmV?d00001

diff --git a/docs/images/previews/compile-2e394416/document.pdf b/docs/images/previews/compile-2e394416/document.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..d772d27d70323f3527714ed2aa8b01c65a81b3cd
GIT binary patch
literal 7208
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

literal 0
HcmV?d00001

diff --git a/docs/ui/templates/nda-markdown.mdx b/docs/ui/templates/nda-markdown.mdx
index 95cb630..ed0a60a 100644
--- a/docs/ui/templates/nda-markdown.mdx
+++ b/docs/ui/templates/nda-markdown.mdx
@@ -4,7 +4,7 @@ icon: file-contract
 category: NDA
 ---
 
-<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-555147ca/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
+<Frame background="subtle"><img src="../../images/previews/ui-templates-nda-markdown-0c872119/document.1.jpg" style={{  width: '100%', height: 'auto', maxHeight: '500px', borderRadius: "0.25rem", overflow: "hidden", border: '1px solid #E5E4E2' }} /></Frame>
 
 ```jsx
 import React from "react";
diff --git a/docs/ui/templates/scientific-report.mdx b/docs/ui/templates/scientific-report.mdx
index b1b4a78..fa43275 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-01382231/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-d26af32f/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/compile/compile.tsx b/src/compile/compile.tsx
index 58dd5f6..16bbd79 100644
--- a/src/compile/compile.tsx
+++ b/src/compile/compile.tsx
@@ -90,7 +90,7 @@ export const __docConfig: DocConfig = {
           \`\`\`jsx
           const html = await compile(<Component />);
           \`\`\``,
-          template: <Tailwind><div className="bg-red"></div></Tailwind>,
+          template: <Tailwind><div className="bg-red-400">Hello World!</div></Tailwind>,
 
         },
         emotion: {