@adityabheke/renderer-package 1.0.3 → 1.0.5

package/README.md

@@ -1,6 +1,6 @@
 # 📦 @adityabheke/renderer-package
 
-A production-ready React page renderer that converts JSON schema into fully responsive UI using Tailwind CSS v4 and runtime CSS variables.
+A production-ready React page renderer that converts JSON schema into fully responsive UI using Tailwind CSS v3 and runtime CSS variables.
 
 Built for dynamic website/page builder systems.
 
@@ -9,13 +9,13 @@ Built for dynamic website/page builder systems.
 ## 🚀 Features
 
 * ⚡ Schema-driven rendering
-* 🎨 Tailwind CSS v4 (precompiled – no setup required in consumer app)
+* 🎨 Tailwind CSS v3 (Integration required in consumer app)
 * 📱 Fully responsive (container query variants supported)
 * 🎞 Built-in animation support (`tailwindcss-animate`)
 * 🧩 Plug-and-play integration
 * 📦 ESM + CJS support
 * 🧠 TypeScript definitions included
-* 🔒 No Tailwind configuration required in the user project
+* ⚠️ Requires Tailwind v3 configuration in the user project
 
 ---
 
@@ -27,6 +27,52 @@ npm install @adityabheke/renderer-package
 
 ---
 
+## 🎨 Tailwind CSS Setup (Required)
+
+> [!CAUTION]
+> **STRICT REQUIREMENT:** This package is built for **Tailwind CSS v3**. **DO NOT** use Tailwind CSS v4, as it is currently not compatible with the generated class system used here.
+
+### 1️⃣ Install Tailwind v3
+If you haven't already, install Tailwind CSS v3 and its peer dependencies:
+```bash
+npm install -D tailwindcss@3 postcss autoprefixer
+```
+
+### 2️⃣ Initialize Configuration
+```bash
+npx tailwindcss init -p
+```
+
+### 3️⃣ Update `tailwind.config.js`
+You **must** add the package's distribution files to your `content` array so Tailwind can scan them for used classes:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@adityabheke/renderer-package/dist/**/*.{js,ts,jsx,tsx}", // Add this line
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("tailwindcss-animate"), // Recommended for animation support
+  ],
+}
+```
+
+### 4️⃣ Add Tailwind Directives
+Ensure your main CSS file (e.g., `src/index.css`) includes the Tailwind directives:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+---
+
 ## ⚠️ Peer Dependencies
 
 Make sure your project has the following installed:
@@ -46,15 +92,11 @@ Required versions:
 
 ## 🛠 Usage
 
-### 1️⃣ Import Styles (Required Once)
 
-```tsx
-import "@adityabheke/renderer-package/styles.css";
-```
-
-### 2️⃣ Use the Renderer
+### Import Styles and Use the Renderer (Required Once) 
 
 ```tsx
+import "@adityabheke/renderer-package/styles.css";
 import { PageRenderer } from "@adityabheke/renderer-package";
 
 function App() {
@@ -75,7 +117,7 @@ function App() {
 * Parses JSON schema
 * Resolves components using internal `ComponentRegistry`
 * Applies dynamic CSS variables
-* Uses precompiled Tailwind CSS
+* Leverages your project's Tailwind CSS v3 configuration for styling
 * Supports responsive container-based variants
 * Supports animation classes like:
 

package/dist/index.cjs

@@ -873,7 +873,7 @@ var RenderNode = ({ id, data }) => {
   const { type, props = {}, nodes = [], linkedNodes } = node;
   if (typeof type === "string") {
     const Tag = type;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tag, { id, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tag, { id, ...props, className: id === "ROOT" ? "h-full @container" : "", children: [
       nodes.map((childId) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderNode, { id: childId, data }, childId)),
       linkedNodes && Object.values(linkedNodes).map((linkedId) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RenderNode, { id: linkedId, data }, linkedId))
     ] });

package/dist/index.js

@@ -836,7 +836,7 @@ var RenderNode = ({ id, data }) => {
   const { type, props = {}, nodes = [], linkedNodes } = node;
   if (typeof type === "string") {
     const Tag = type;
-    return /* @__PURE__ */ jsxs6(Tag, { id, ...props, children: [
+    return /* @__PURE__ */ jsxs6(Tag, { id, ...props, className: id === "ROOT" ? "h-full @container" : "", children: [
       nodes.map((childId) => /* @__PURE__ */ jsx14(RenderNode, { id: childId, data }, childId)),
       linkedNodes && Object.values(linkedNodes).map((linkedId) => /* @__PURE__ */ jsx14(RenderNode, { id: linkedId, data }, linkedId))
     ] });

package/dist/styles.css

@@ -1 +1 @@
-/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.-mt-12{margin-top:-3rem}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:.5rem}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.min-h-10{min-height:2.5rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-6xl{max-width:72rem}.max-w-sm{max-width:24rem}.scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-105,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-50{--tw-border-opacity:1;border-color:rgb(249 250 251/var(--tw-border-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pt-2{padding-top:.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.fade-in{--tw-enter-opacity:0}.slide-in-from-bottom-5{--tw-enter-translate-y:1.25rem}.slide-in-from-left-5{--tw-enter-translate-x:-1.25rem}.slide-in-from-right-5{--tw-enter-translate-x:1.25rem}.slide-in-from-top-5{--tw-enter-translate-y:-1.25rem}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-700{animation-duration:.7s}.fill-mode-both{animation-fill-mode:both}.\[align-items\:var\(--ai-base\)\]{align-items:var(--ai-base)}.\[border-radius\:var\(--btnr-base\)\]{border-radius:var(--btnr-base)}.\[border-radius\:var\(--r-base\)\]{border-radius:var(--r-base)}.\[flex-direction\:var\(--fd-base\)\]{flex-direction:var(--fd-base)}.\[flex-wrap\:var\(--fw-base\)\]{flex-wrap:var(--fw-base)}.\[font-size\:var\(--btns-base\)\]{font-size:var(--btns-base)}.\[font-size\:var\(--fs-base\)\]{font-size:var(--fs-base)}.\[font-weight\:var\(--fw-base\)\]{font-weight:var(--fw-base)}.\[gap\:var\(--g-base\)\]{gap:var(--g-base)}.\[height\:var\(--h-base\)\]{height:var(--h-base)}.\[justify-content\:var\(--jc-base\)\]{justify-content:var(--jc-base)}.\[margin\:var\(--m-base\)\]{margin:var(--m-base)}.\[padding\:var\(--btnpy-base\)_var\(--btnpx-base\)\]{padding:var(--btnpy-base) var(--btnpx-base)}.\[padding\:var\(--p-base\)\]{padding:var(--p-base)}.\[text-align\:var\(--ta-base\)\]{text-align:var(--ta-base)}.\[width\:var\(--w-base\)\]{width:var(--w-base)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@container (min-width: 24rem){.\@sm\:\[align-items\:var\(--ai-sm\)\]{align-items:var(--ai-sm)}.\@sm\:\[border-radius\:var\(--btnr-sm\)\]{border-radius:var(--btnr-sm)}.\@sm\:\[border-radius\:var\(--r-sm\)\]{border-radius:var(--r-sm)}.\@sm\:\[flex-direction\:var\(--fd-sm\)\]{flex-direction:var(--fd-sm)}.\@sm\:\[flex-wrap\:var\(--fw-sm\)\]{flex-wrap:var(--fw-sm)}.\@sm\:\[font-size\:var\(--btns-sm\)\]{font-size:var(--btns-sm)}.\@sm\:\[font-size\:var\(--fs-sm\)\]{font-size:var(--fs-sm)}.\@sm\:\[font-weight\:var\(--fw-sm\)\]{font-weight:var(--fw-sm)}.\@sm\:\[gap\:var\(--g-sm\)\]{gap:var(--g-sm)}.\@sm\:\[height\:var\(--h-sm\)\]{height:var(--h-sm)}.\@sm\:\[justify-content\:var\(--jc-sm\)\]{justify-content:var(--jc-sm)}.\@sm\:\[margin\:var\(--m-sm\)\]{margin:var(--m-sm)}.\@sm\:\[padding\:var\(--btnpy-sm\)_var\(--btnpx-sm\)\]{padding:var(--btnpy-sm) var(--btnpx-sm)}.\@sm\:\[padding\:var\(--p-sm\)\]{padding:var(--p-sm)}.\@sm\:\[text-align\:var\(--ta-sm\)\]{text-align:var(--ta-sm)}.\@sm\:\[width\:var\(--w-sm\)\]{width:var(--w-sm)}}@container (min-width: 28rem){.\@md\:\[align-items\:var\(--ai-md\)\]{align-items:var(--ai-md)}.\@md\:\[border-radius\:var\(--btnr-md\)\]{border-radius:var(--btnr-md)}.\@md\:\[border-radius\:var\(--r-md\)\]{border-radius:var(--r-md)}.\@md\:\[flex-direction\:var\(--fd-md\)\]{flex-direction:var(--fd-md)}.\@md\:\[flex-wrap\:var\(--fw-md\)\]{flex-wrap:var(--fw-md)}.\@md\:\[font-size\:var\(--btns-md\)\]{font-size:var(--btns-md)}.\@md\:\[font-size\:var\(--fs-md\)\]{font-size:var(--fs-md)}.\@md\:\[font-weight\:var\(--fw-md\)\]{font-weight:var(--fw-md)}.\@md\:\[gap\:var\(--g-md\)\]{gap:var(--g-md)}.\@md\:\[height\:var\(--h-md\)\]{height:var(--h-md)}.\@md\:\[justify-content\:var\(--jc-md\)\]{justify-content:var(--jc-md)}.\@md\:\[margin\:var\(--m-md\)\]{margin:var(--m-md)}.\@md\:\[padding\:var\(--btnpy-md\)_var\(--btnpx-md\)\]{padding:var(--btnpy-md) var(--btnpx-md)}.\@md\:\[padding\:var\(--p-md\)\]{padding:var(--p-md)}.\@md\:\[text-align\:var\(--ta-md\)\]{text-align:var(--ta-md)}.\@md\:\[width\:var\(--w-md\)\]{width:var(--w-md)}}@container (min-width: 32rem){.\@lg\:\[align-items\:var\(--ai-lg\)\]{align-items:var(--ai-lg)}.\@lg\:\[border-radius\:var\(--btnr-lg\)\]{border-radius:var(--btnr-lg)}.\@lg\:\[border-radius\:var\(--r-lg\)\]{border-radius:var(--r-lg)}.\@lg\:\[flex-direction\:var\(--fd-lg\)\]{flex-direction:var(--fd-lg)}.\@lg\:\[flex-wrap\:var\(--fw-lg\)\]{flex-wrap:var(--fw-lg)}.\@lg\:\[font-size\:var\(--btns-lg\)\]{font-size:var(--btns-lg)}.\@lg\:\[font-size\:var\(--fs-lg\)\]{font-size:var(--fs-lg)}.\@lg\:\[font-weight\:var\(--fw-lg\)\]{font-weight:var(--fw-lg)}.\@lg\:\[gap\:var\(--g-lg\)\]{gap:var(--g-lg)}.\@lg\:\[height\:var\(--h-lg\)\]{height:var(--h-lg)}.\@lg\:\[justify-content\:var\(--jc-lg\)\]{justify-content:var(--jc-lg)}.\@lg\:\[margin\:var\(--m-lg\)\]{margin:var(--m-lg)}.\@lg\:\[padding\:var\(--btnpy-lg\)_var\(--btnpx-lg\)\]{padding:var(--btnpy-lg) var(--btnpx-lg)}.\@lg\:\[padding\:var\(--p-lg\)\]{padding:var(--p-lg)}.\@lg\:\[text-align\:var\(--ta-lg\)\]{text-align:var(--ta-lg)}.\@lg\:\[width\:var\(--w-lg\)\]{width:var(--w-lg)}}@container (min-width: 36rem){.\@xl\:\[align-items\:var\(--ai-xl\)\]{align-items:var(--ai-xl)}.\@xl\:\[border-radius\:var\(--btnr-xl\)\]{border-radius:var(--btnr-xl)}.\@xl\:\[border-radius\:var\(--r-xl\)\]{border-radius:var(--r-xl)}.\@xl\:\[flex-direction\:var\(--fd-xl\)\]{flex-direction:var(--fd-xl)}.\@xl\:\[flex-wrap\:var\(--fw-xl\)\]{flex-wrap:var(--fw-xl)}.\@xl\:\[font-size\:var\(--btns-xl\)\]{font-size:var(--btns-xl)}.\@xl\:\[font-size\:var\(--fs-xl\)\]{font-size:var(--fs-xl)}.\@xl\:\[font-weight\:var\(--fw-xl\)\]{font-weight:var(--fw-xl)}.\@xl\:\[gap\:var\(--g-xl\)\]{gap:var(--g-xl)}.\@xl\:\[height\:var\(--h-xl\)\]{height:var(--h-xl)}.\@xl\:\[justify-content\:var\(--jc-xl\)\]{justify-content:var(--jc-xl)}.\@xl\:\[margin\:var\(--m-xl\)\]{margin:var(--m-xl)}.\@xl\:\[padding\:var\(--btnpy-xl\)_var\(--btnpx-xl\)\]{padding:var(--btnpy-xl) var(--btnpx-xl)}.\@xl\:\[padding\:var\(--p-xl\)\]{padding:var(--p-xl)}.\@xl\:\[text-align\:var\(--ta-xl\)\]{text-align:var(--ta-xl)}.\@xl\:\[width\:var\(--w-xl\)\]{width:var(--w-xl)}}@container (min-width: 42rem){.\@2xl\:\[align-items\:var\(--ai-2xl\)\]{align-items:var(--ai-2xl)}.\@2xl\:\[border-radius\:var\(--btnr-2xl\)\]{border-radius:var(--btnr-2xl)}.\@2xl\:\[border-radius\:var\(--r-2xl\)\]{border-radius:var(--r-2xl)}.\@2xl\:\[flex-direction\:var\(--fd-2xl\)\]{flex-direction:var(--fd-2xl)}.\@2xl\:\[flex-wrap\:var\(--fw-2xl\)\]{flex-wrap:var(--fw-2xl)}.\@2xl\:\[font-size\:var\(--btns-2xl\)\]{font-size:var(--btns-2xl)}.\@2xl\:\[font-size\:var\(--fs-2xl\)\]{font-size:var(--fs-2xl)}.\@2xl\:\[font-weight\:var\(--fw-2xl\)\]{font-weight:var(--fw-2xl)}.\@2xl\:\[gap\:var\(--g-2xl\)\]{gap:var(--g-2xl)}.\@2xl\:\[height\:var\(--h-2xl\)\]{height:var(--h-2xl)}.\@2xl\:\[justify-content\:var\(--jc-2xl\)\]{justify-content:var(--jc-2xl)}.\@2xl\:\[margin\:var\(--m-2xl\)\]{margin:var(--m-2xl)}.\@2xl\:\[padding\:var\(--btnpy-2xl\)_var\(--btnpx-2xl\)\]{padding:var(--btnpy-2xl) var(--btnpx-2xl)}.\@2xl\:\[padding\:var\(--p-2xl\)\]{padding:var(--p-2xl)}.\@2xl\:\[text-align\:var\(--ta-2xl\)\]{text-align:var(--ta-2xl)}.\@2xl\:\[width\:var\(--w-2xl\)\]{width:var(--w-2xl)}}@media (min-width:768px){.md\:flex-row{flex-direction:row}}
+/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.-mt-12{margin-top:-3rem}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:.5rem}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.min-h-10{min-height:2.5rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-6xl{max-width:72rem}.max-w-sm{max-width:24rem}.scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-105,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-50{--tw-border-opacity:1;border-color:rgb(249 250 251/var(--tw-border-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pt-2{padding-top:.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.animate-in{animation-name:enter;animation-duration:.15s;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.fade-in{--tw-enter-opacity:0}.slide-in-from-bottom-5{--tw-enter-translate-y:1.25rem}.slide-in-from-left-5{--tw-enter-translate-x:-1.25rem}.slide-in-from-right-5{--tw-enter-translate-x:1.25rem}.slide-in-from-top-5{--tw-enter-translate-y:-1.25rem}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.duration-700{animation-duration:.7s}.fill-mode-both{animation-fill-mode:both}.\@container{container-type:inline-size}.\[align-items\:var\(--ai-base\)\]{align-items:var(--ai-base)}.\[border-radius\:var\(--btnr-base\)\]{border-radius:var(--btnr-base)}.\[border-radius\:var\(--r-base\)\]{border-radius:var(--r-base)}.\[flex-direction\:var\(--fd-base\)\]{flex-direction:var(--fd-base)}.\[flex-wrap\:var\(--fw-base\)\]{flex-wrap:var(--fw-base)}.\[font-size\:var\(--btns-base\)\]{font-size:var(--btns-base)}.\[font-size\:var\(--fs-base\)\]{font-size:var(--fs-base)}.\[font-weight\:var\(--fw-base\)\]{font-weight:var(--fw-base)}.\[gap\:var\(--g-base\)\]{gap:var(--g-base)}.\[height\:var\(--h-base\)\]{height:var(--h-base)}.\[justify-content\:var\(--jc-base\)\]{justify-content:var(--jc-base)}.\[margin\:var\(--m-base\)\]{margin:var(--m-base)}.\[padding\:var\(--btnpy-base\)_var\(--btnpx-base\)\]{padding:var(--btnpy-base) var(--btnpx-base)}.\[padding\:var\(--p-base\)\]{padding:var(--p-base)}.\[text-align\:var\(--ta-base\)\]{text-align:var(--ta-base)}.\[width\:var\(--w-base\)\]{width:var(--w-base)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@container (min-width: 24rem){.\@sm\:\[align-items\:var\(--ai-sm\)\]{align-items:var(--ai-sm)}.\@sm\:\[border-radius\:var\(--btnr-sm\)\]{border-radius:var(--btnr-sm)}.\@sm\:\[border-radius\:var\(--r-sm\)\]{border-radius:var(--r-sm)}.\@sm\:\[flex-direction\:var\(--fd-sm\)\]{flex-direction:var(--fd-sm)}.\@sm\:\[flex-wrap\:var\(--fw-sm\)\]{flex-wrap:var(--fw-sm)}.\@sm\:\[font-size\:var\(--btns-sm\)\]{font-size:var(--btns-sm)}.\@sm\:\[font-size\:var\(--fs-sm\)\]{font-size:var(--fs-sm)}.\@sm\:\[font-weight\:var\(--fw-sm\)\]{font-weight:var(--fw-sm)}.\@sm\:\[gap\:var\(--g-sm\)\]{gap:var(--g-sm)}.\@sm\:\[height\:var\(--h-sm\)\]{height:var(--h-sm)}.\@sm\:\[justify-content\:var\(--jc-sm\)\]{justify-content:var(--jc-sm)}.\@sm\:\[margin\:var\(--m-sm\)\]{margin:var(--m-sm)}.\@sm\:\[padding\:var\(--btnpy-sm\)_var\(--btnpx-sm\)\]{padding:var(--btnpy-sm) var(--btnpx-sm)}.\@sm\:\[padding\:var\(--p-sm\)\]{padding:var(--p-sm)}.\@sm\:\[text-align\:var\(--ta-sm\)\]{text-align:var(--ta-sm)}.\@sm\:\[width\:var\(--w-sm\)\]{width:var(--w-sm)}}@container (min-width: 28rem){.\@md\:\[align-items\:var\(--ai-md\)\]{align-items:var(--ai-md)}.\@md\:\[border-radius\:var\(--btnr-md\)\]{border-radius:var(--btnr-md)}.\@md\:\[border-radius\:var\(--r-md\)\]{border-radius:var(--r-md)}.\@md\:\[flex-direction\:var\(--fd-md\)\]{flex-direction:var(--fd-md)}.\@md\:\[flex-wrap\:var\(--fw-md\)\]{flex-wrap:var(--fw-md)}.\@md\:\[font-size\:var\(--btns-md\)\]{font-size:var(--btns-md)}.\@md\:\[font-size\:var\(--fs-md\)\]{font-size:var(--fs-md)}.\@md\:\[font-weight\:var\(--fw-md\)\]{font-weight:var(--fw-md)}.\@md\:\[gap\:var\(--g-md\)\]{gap:var(--g-md)}.\@md\:\[height\:var\(--h-md\)\]{height:var(--h-md)}.\@md\:\[justify-content\:var\(--jc-md\)\]{justify-content:var(--jc-md)}.\@md\:\[margin\:var\(--m-md\)\]{margin:var(--m-md)}.\@md\:\[padding\:var\(--btnpy-md\)_var\(--btnpx-md\)\]{padding:var(--btnpy-md) var(--btnpx-md)}.\@md\:\[padding\:var\(--p-md\)\]{padding:var(--p-md)}.\@md\:\[text-align\:var\(--ta-md\)\]{text-align:var(--ta-md)}.\@md\:\[width\:var\(--w-md\)\]{width:var(--w-md)}}@container (min-width: 32rem){.\@lg\:\[align-items\:var\(--ai-lg\)\]{align-items:var(--ai-lg)}.\@lg\:\[border-radius\:var\(--btnr-lg\)\]{border-radius:var(--btnr-lg)}.\@lg\:\[border-radius\:var\(--r-lg\)\]{border-radius:var(--r-lg)}.\@lg\:\[flex-direction\:var\(--fd-lg\)\]{flex-direction:var(--fd-lg)}.\@lg\:\[flex-wrap\:var\(--fw-lg\)\]{flex-wrap:var(--fw-lg)}.\@lg\:\[font-size\:var\(--btns-lg\)\]{font-size:var(--btns-lg)}.\@lg\:\[font-size\:var\(--fs-lg\)\]{font-size:var(--fs-lg)}.\@lg\:\[font-weight\:var\(--fw-lg\)\]{font-weight:var(--fw-lg)}.\@lg\:\[gap\:var\(--g-lg\)\]{gap:var(--g-lg)}.\@lg\:\[height\:var\(--h-lg\)\]{height:var(--h-lg)}.\@lg\:\[justify-content\:var\(--jc-lg\)\]{justify-content:var(--jc-lg)}.\@lg\:\[margin\:var\(--m-lg\)\]{margin:var(--m-lg)}.\@lg\:\[padding\:var\(--btnpy-lg\)_var\(--btnpx-lg\)\]{padding:var(--btnpy-lg) var(--btnpx-lg)}.\@lg\:\[padding\:var\(--p-lg\)\]{padding:var(--p-lg)}.\@lg\:\[text-align\:var\(--ta-lg\)\]{text-align:var(--ta-lg)}.\@lg\:\[width\:var\(--w-lg\)\]{width:var(--w-lg)}}@container (min-width: 36rem){.\@xl\:\[align-items\:var\(--ai-xl\)\]{align-items:var(--ai-xl)}.\@xl\:\[border-radius\:var\(--btnr-xl\)\]{border-radius:var(--btnr-xl)}.\@xl\:\[border-radius\:var\(--r-xl\)\]{border-radius:var(--r-xl)}.\@xl\:\[flex-direction\:var\(--fd-xl\)\]{flex-direction:var(--fd-xl)}.\@xl\:\[flex-wrap\:var\(--fw-xl\)\]{flex-wrap:var(--fw-xl)}.\@xl\:\[font-size\:var\(--btns-xl\)\]{font-size:var(--btns-xl)}.\@xl\:\[font-size\:var\(--fs-xl\)\]{font-size:var(--fs-xl)}.\@xl\:\[font-weight\:var\(--fw-xl\)\]{font-weight:var(--fw-xl)}.\@xl\:\[gap\:var\(--g-xl\)\]{gap:var(--g-xl)}.\@xl\:\[height\:var\(--h-xl\)\]{height:var(--h-xl)}.\@xl\:\[justify-content\:var\(--jc-xl\)\]{justify-content:var(--jc-xl)}.\@xl\:\[margin\:var\(--m-xl\)\]{margin:var(--m-xl)}.\@xl\:\[padding\:var\(--btnpy-xl\)_var\(--btnpx-xl\)\]{padding:var(--btnpy-xl) var(--btnpx-xl)}.\@xl\:\[padding\:var\(--p-xl\)\]{padding:var(--p-xl)}.\@xl\:\[text-align\:var\(--ta-xl\)\]{text-align:var(--ta-xl)}.\@xl\:\[width\:var\(--w-xl\)\]{width:var(--w-xl)}}@container (min-width: 42rem){.\@2xl\:\[align-items\:var\(--ai-2xl\)\]{align-items:var(--ai-2xl)}.\@2xl\:\[border-radius\:var\(--btnr-2xl\)\]{border-radius:var(--btnr-2xl)}.\@2xl\:\[border-radius\:var\(--r-2xl\)\]{border-radius:var(--r-2xl)}.\@2xl\:\[flex-direction\:var\(--fd-2xl\)\]{flex-direction:var(--fd-2xl)}.\@2xl\:\[flex-wrap\:var\(--fw-2xl\)\]{flex-wrap:var(--fw-2xl)}.\@2xl\:\[font-size\:var\(--btns-2xl\)\]{font-size:var(--btns-2xl)}.\@2xl\:\[font-size\:var\(--fs-2xl\)\]{font-size:var(--fs-2xl)}.\@2xl\:\[font-weight\:var\(--fw-2xl\)\]{font-weight:var(--fw-2xl)}.\@2xl\:\[gap\:var\(--g-2xl\)\]{gap:var(--g-2xl)}.\@2xl\:\[height\:var\(--h-2xl\)\]{height:var(--h-2xl)}.\@2xl\:\[justify-content\:var\(--jc-2xl\)\]{justify-content:var(--jc-2xl)}.\@2xl\:\[margin\:var\(--m-2xl\)\]{margin:var(--m-2xl)}.\@2xl\:\[padding\:var\(--btnpy-2xl\)_var\(--btnpx-2xl\)\]{padding:var(--btnpy-2xl) var(--btnpx-2xl)}.\@2xl\:\[padding\:var\(--p-2xl\)\]{padding:var(--p-2xl)}.\@2xl\:\[text-align\:var\(--ta-2xl\)\]{text-align:var(--ta-2xl)}.\@2xl\:\[width\:var\(--w-2xl\)\]{width:var(--w-2xl)}}@media (min-width:768px){.md\:flex-row{flex-direction:row}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adityabheke/renderer-package",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Production-ready React page renderer",
   "type": "module",
   "license": "MIT",