{"_id":"@activate-spritz-components/spritz-ui-components","_rev":"12-b75b41c3152568c7f21e0ae29cdd37cf","name":"@activate-spritz-components/spritz-ui-components","dist-tags":{"latest":"0.1.14"},"versions":{"0.1.3":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.3","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.3","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"29b958f2e1b1feb28c4d01130466d10a4ba87d82","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.3.tgz","fileCount":54,"integrity":"sha512-v2lgO3/FfvsA3mX0iLGQ+8xsjyWi0KZ8CU3GeQtbKcJH1DLtGkfbhM0qqYVBzIr2aHn9nhjW5nFMCoDeAvgA6g==","signatures":[{"sig":"MEQCIHya/HPa9BrxS/2vYrvpIKRITodb8w/T6mbXZikQwG75AiBqIEnCPxX6vpnzHYEKmxhF17a4Yyry1NxNLGATktA1Sw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3439809},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"d690679bf0a45995d9e445ad564e44ebd8b266fd","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.3_1742472993307_0.6287251957012157","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.4","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.4","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"59f77910128f67e63e65d4ef88e73f03b598a38f","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.4.tgz","fileCount":54,"integrity":"sha512-wLKAN8jHV9UUhtEOGWyFmsV0r0B2rnMfz6lKrDr/CPoYvs9nhuhbycLokPMTNKVriHsPfCKoPhWTVVlxn7lWJg==","signatures":[{"sig":"MEUCIQDFVEVmlFxUEM1LpNRz6rr9BXkNi+s0H2JarIxc+0hlCAIgAraGb67DqbuSTvPmQqcUnHZf4mD58b98jQuDHC0urK8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3438672},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"40fca1e94b15075aba189847232aecc441f5a125","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.4_1742474509778_0.8931176645624768","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.5","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.5","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"0e9a1ab7dc6e53ccf1fd58479641bb7ba1882e72","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.5.tgz","fileCount":59,"integrity":"sha512-BzaN3W1wJ763j+yEn4MFJSua3uzPRdadbu0BNCw3KelQqf3ylonPDLYiKKQ062paaLqHIB8MbTmbNb/chpyQ3A==","signatures":[{"sig":"MEUCIQCeb677t9KFem8mVr1QnFtYbbiUEySshj6NQrMcTV34aAIgUiv+NRBZkh2GCo3flrEkunCLLfAKqxGuYXrKpuYWz1k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3440037},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"40fca1e94b15075aba189847232aecc441f5a125","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.5_1742540468415_0.058193286544238054","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.6","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.6","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"bebd7a238a45593617280dc1bab902adb12e7133","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.6.tgz","fileCount":60,"integrity":"sha512-vuvOziWQYO/TpUGOu+I+a7RzxWu+EsBX5ZAG42EY79k3BHZZXYEaHnMZsv/V1KuZ2WaI7rD/XsbXiJYXsWpctg==","signatures":[{"sig":"MEUCIQDA+BlGcXxFBakwLXQrjFtYGWHtbV4vhmHOrlaVjt/WxAIgCl/gRGBtOawlKKR99PkYG+FISD6fodb8IrJtM+aDwUU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3328285},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"81457951359a9289b688292198083d4f432efa95","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.6_1743067859671_0.05281024072445084","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.7","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.7","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"90e5558e4ccef83b687fefe689903cdc2dce8f99","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.7.tgz","fileCount":60,"integrity":"sha512-rG8oCm1kD82oSX6n13d2ZejUr3zj60/lzwDa5WhD6hVm116BzDgBjCSNvXTVKrWA1cJv9/Csx+tqOvkfwPTSeQ==","signatures":[{"sig":"MEYCIQDcmpQ+sCWUZGCdi3M7h4xI/pu0s5F/Cy1PPEy4b9J/JQIhAMX85EA0WB/C0F8tjOOhR0lzCchTN+h68VqRmondPYZ4","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3399629},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"81457951359a9289b688292198083d4f432efa95","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.7_1743074761163_0.18297581190860224","host":"s3://npm-registry-packages-npm-production"}},"0.1.8":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.8","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.8","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"ac0999a4a7ce1024989e6bff2a1842a7467ef346","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.8.tgz","fileCount":60,"integrity":"sha512-GDdur6Ux6jwx6DCxDiuEFT/oWgcNPEts3jTxDi15AgrxsdQwWjO1zYmryfoIMB235M3KY8zjXtS3X3aGGnX0HA==","signatures":[{"sig":"MEUCICOk9GRH+ZB+VfdLe0WMc/ZP9Ev5Llt6hjI4iBfbygTwAiEA6yYp1AoxWMEfO63kxfjEWG0a0847ypaK2uLiZ/lPr7E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3328285},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"81457951359a9289b688292198083d4f432efa95","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.18.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.8_1743075552576_0.6427443821810452","host":"s3://npm-registry-packages-npm-production"}},"0.1.9":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.9","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.9","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"c71881ddac6de2added72b22d380c6e3c1f53f5a","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.9.tgz","fileCount":59,"integrity":"sha512-VZLT9hRpS0qb8Dr0XsVHfCERLDH0o8pTnxylSPkS25lThWN2Oxomby0+T1+EqFd3mSpLR00ayVIVlPjw4RloXg==","signatures":[{"sig":"MEQCIHXkS97XDgFJWTNiE/LvhYslYsu4B4QAixSdaA2LZ0qnAiBgHFZPJtYirRcLqd48N1HTlbYxOCV3HO00uLFUoLVN2A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3393645},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"21b534a25d96239d7024b8c8bf2a4b00e22a7fc0","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"9.8.1","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"18.17.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.9_1747643194815_0.30094545412198337","host":"s3://npm-registry-packages-npm-production"}},"0.1.10":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.10","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.10","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"1ad56477073671202339a4132cb738b2c1228a89","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.10.tgz","fileCount":60,"integrity":"sha512-8ddjbst5qrl5mCprJq6ddRUgRBUiX29jZUaGfh2Y96NKAyM0ki/2uhI+Kc77omSC0ZgVbVnl3secGi9OGV6skw==","signatures":[{"sig":"MEYCIQC1x2T84u6C4NOHdH2ABf+IRyRaLpfxmm1vQQ8ihP31TwIhALYqlN76j1CrUHMEiJRtOjA/bErQVq3JerKpM1rhFSHR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3395088},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"cb329fce3d1107a7bb4c266ad8c10134b37ebb9c","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-calendar":"^6.0.0","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.10_1753264004652_0.1428725951376817","host":"s3://npm-registry-packages-npm-production"}},"0.1.11":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.11","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.11","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"dc08442935903c99fe8c82b32a0c703c8dac9cfb","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.11.tgz","fileCount":60,"integrity":"sha512-6Sirdbo/HGYo7/UCpykuRV9Cd/PJJYwxqWIwytA23zo+mR2hYLSX7BTTnrflKvY0/sU9eImCtUfSrUxZE0vM8g==","signatures":[{"sig":"MEUCIQCXSajPN/2rZiD2LQAolOXjOEAzyy87thl6dOlk8NESAQIgBEmJMEbf/y9XS97s7C7EcrpAUwlQBlybljypZ2qF/CM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3398480},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"bd6da7ae6ccffe2981e0cdb4f16cffa5d603ffa3","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-calendar":"^6.0.0","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.11_1753264847945_0.2396712900328708","host":"s3://npm-registry-packages-npm-production"}},"0.1.12":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.12","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.12","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"d57ef88fdb8797ab077f54f3b34105420e862525","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.12.tgz","fileCount":60,"integrity":"sha512-KwfXKW1ZuDYSlCZwkN9rJ0IzWQIEWhLHgUDtyOlfbNpK0LfARc04GvFyuGVl/f8xdCjAnlUgUmYxlSjjJhldEQ==","signatures":[{"sig":"MEUCIFl35DA65UK5pXoSbO65HvKgFBUv7iBYNe7EZMvmtf70AiEAiLAZy7i4TNewvmDjPnI2w3kL1XftH021KFtQa2/QD2I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3813430},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"251ed0039291ed1e9f8685626d065e417b5aa0af","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-calendar":"^6.0.0","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.12_1754391171129_0.5353556622323954","host":"s3://npm-registry-packages-npm-production"}},"0.1.13":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.13","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activate-spritz-components/spritz-ui-components@0.1.13","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"3fb0c06c80442aadd88df93a2e9caa7412e744c9","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.13.tgz","fileCount":63,"integrity":"sha512-YoiZ2bFO2FiPLH4N2CTpJ2bjWtS1ne0Nzhu0yAVrGMN6fXhO/B2oGWzkNmNF3+GxUcOklaJBe+Gkl5GRxx2P1A==","signatures":[{"sig":"MEQCIG2QSlgDp2HMPZ5smlArZqA7ZNjY9TjxcUmX+FxUPJwTAiBdXMcXu2Um9qQ/+WgfjQn8uDDAwGdojN8qFFWTOZ5iTQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3853832},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"d46c993c49dbd9d497cd51e88d43cb1d88a428d0","scripts":{"lint":"eslint 'src/**/*.{ts,tsx}'","build":"rollup -c","watch":"rollup -c -w","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'","prepare":"npm run build"},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.9.2","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","@restart/ui":"^1.6.9","react-calendar":"^6.0.0","react-inlinesvg":"^3.0.2","@headlessui/react":"^2.1.1","@rollup/plugin-image":"^3.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.5","react":"^18.3.1","eslint":"^8.57.0","rollup":"^4.18.0","globals":"^15.4.0","postcss":"^8.4.38","flowbite":"^2.3.0","prettier":"^3.3.1","react-dom":"^18.3.1","@eslint/js":"^9.4.0","typescript":"^5.4.5","@types/node":"^20.14.2","tailwindcss":"^3.4.4","@types/react":"^18.3.3","autoprefixer":"^10.4.19","@types/lodash":"^4.17.5","typescript-eslint":"^7.12.0","eslint-plugin-react":"^7.34.2","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","@rollup/plugin-commonjs":"^26.0.1","@tailwindcss/typography":"^0.5.13","@tailwindcss/aspect-ratio":"^0.4.2","@typescript-eslint/parser":"^7.12.0","eslint-plugin-react-hooks":"^4.6.2","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^15.2.3","@tailwindcss/container-queries":"^0.1.1","@typescript-eslint/eslint-plugin":"^7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/spritz-ui-components_0.1.13_1754457851097_0.7794776693224537","host":"s3://npm-registry-packages-npm-production"}},"0.1.14":{"name":"@activate-spritz-components/spritz-ui-components","version":"0.1.14","description":"This is shared components library for spritz projects.","scripts":{"build":"rollup -c","watch":"rollup -c -w","prepare":"npm run build","lint":"eslint 'src/**/*.{ts,tsx}'","format":"prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,scss,md}'"},"main":"dist/index.js","module":"dist/index.esm.js","types":"dist/types/index.d.ts","author":{"name":"Activate Studio / @amjesh"},"license":"ISC","devDependencies":{"@eslint/js":"^9.4.0","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/typography":"^0.5.13","@types/lodash":"^4.17.5","@types/node":"^20.14.2","@types/react":"^18.3.3","@typescript-eslint/eslint-plugin":"^7.12.0","@typescript-eslint/parser":"^7.12.0","autoprefixer":"^10.4.19","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.3","eslint-plugin-react":"^7.34.2","eslint-plugin-react-hooks":"^4.6.2","flowbite":"^2.3.0","globals":"^15.4.0","postcss":"^8.4.38","prettier":"^3.3.1","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^4.18.0","rollup-plugin-postcss":"^4.0.2","rollup-plugin-typescript2":"^0.36.0","sass":"^1.77.5","tailwindcss":"^3.4.4","typescript":"^5.4.5","typescript-eslint":"^7.12.0"},"repository":{"type":"git","url":"git+https://github.com/ActivateMedia/ui-components.git"},"keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"dependencies":{"@headlessui/react":"^2.1.1","@restart/ui":"^1.6.9","@rollup/plugin-image":"^3.0.3","classnames":"^2.5.1","lodash":"^4.17.21","react-calendar":"^6.0.0","react-inlinesvg":"^3.0.2"},"_id":"@activate-spritz-components/spritz-ui-components@0.1.14","gitHead":"5b12270ac0d385c1e4f855e6de24c9bc391d96ee","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"homepage":"https://github.com/ActivateMedia/ui-components#readme","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-pZ389sDs4XVm9jCVEeXUvvowh1ZebJDBFB4cswwkzl088N7Lc9dQYoXG7dk6eb3KfuTTlNBiBx2TYEeHj0xKzw==","shasum":"9a875d524e5b03699c1d170face059d95c879144","tarball":"https://registry.npmjs.org/@activate-spritz-components/spritz-ui-components/-/spritz-ui-components-0.1.14.tgz","fileCount":63,"unpackedSize":3859492,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCzFnnkzu/R9MkixVGrDgAIVTN1NWQJAZbDy3ZX6SgIYgIhAPx8Qan8YQ4qvXvYG6OjN6E7jA3MTrcFpHdWB+rPcVj9"}]},"_npmUser":{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"},"directories":{},"maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/spritz-ui-components_0.1.14_1754567039442_0.2860761546376731"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-20T12:16:33.213Z","modified":"2025-08-07T11:43:59.834Z","0.1.3":"2025-03-20T12:16:33.626Z","0.1.4":"2025-03-20T12:41:50.023Z","0.1.5":"2025-03-21T07:01:08.809Z","0.1.6":"2025-03-27T09:30:59.907Z","0.1.7":"2025-03-27T11:26:01.430Z","0.1.8":"2025-03-27T11:39:12.865Z","0.1.9":"2025-05-19T08:26:35.066Z","0.1.10":"2025-07-23T09:46:44.953Z","0.1.11":"2025-07-23T10:00:48.176Z","0.1.12":"2025-08-05T10:52:51.334Z","0.1.13":"2025-08-06T05:24:11.305Z","0.1.14":"2025-08-07T11:43:59.651Z"},"bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","homepage":"https://github.com/ActivateMedia/ui-components#readme","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"repository":{"type":"git","url":"git+https://github.com/ActivateMedia/ui-components.git"},"description":"This is shared components library for spritz projects.","maintainers":[{"name":"activate-spritz","email":"signups+spritz@activate.co.uk"}],"readme":"# Spritz UI Components\n\nThis package provides shareable, small UI components designed for Spritz partners. These components aim to enhance user experience by offering easy-to-integrate, visually appealing elements for your applications. Use this package to streamline your development process, ensuring a consistent and polished interface across your projects.\n\n### The Primary Benefits of This Package\n\n1. **Enhanced User Experience:** The package offers visually appealing and user-friendly UI components, ensuring a better user interface for your applications.\n\n2. **Easy Integration:** Designed for simplicity, these components can be seamlessly integrated into your projects, saving you time and effort.\n\n3. **Consistency:** Achieve a uniform look and feel across your applications with standardized components, enhancing brand consistency.\n\n4. **Efficiency:** Streamline your development process by utilizing pre-built components, allowing you to focus on core functionality.\n\n5. **Customization:** Easily customizable components to fit the specific needs of your project, providing flexibility without compromising on quality.\n\n## Compatibility\n\nreact.js: >= 18.x.x,  \nnode: >= 18.x.x,  \nnext.js: >= 13.x.x\n\n## Installation\n\nTo install this package use:\n\n```bash\n npm install @activatestudio/spritz-ui-components\n```\n\n## Quick start\n\nYou can read the section below to learn how to use these components in your project.\n\n## Documentation\n\n## Alert\n\nCustom alert component to display alert message\n\n```Javascript\nimport {Alert} from \"@activate-spritz-components/spritz-ui-components\"\n\n<Alert type=\"success\"> I am success alter message </Alert>\n```\n\n#### Props\n\n| Name               | Type   | Value                            | Description                              |\n| ------------------ | ------ | -------------------------------- | ---------------------------------------- |\n| type (required)    | String | \"success\", \"warning\" and \"error\" | Pass message type for color and bg color |\n| message (required) | String | \"Message\"                        | Content for display in alert             |\n\n---\n\n## Badge\n\nCustom badge component to display badge\n\n```Javascript\nimport {Badge} from \"@activatestudio/spritz-ui-components\"\n\n<Badge type=\"success\"> I am success alter message </Alert>\n```\n\n#### Props\n\n| Name                 | Type   | Value                              | Description                                   |\n| -------------------- | ------ | ---------------------------------- | --------------------------------------------- |\n| badgeText (required) | String | \"Message\"                          | Pass text to display in badge                 |\n| className (optional) | String | \"overwrite design with your class\" | To modify badge design according to your need |\n\n---\n\n## Box Shadow\n\nCustom shadow component to display box with shadow\n\n```Javascript\nimport {BoxShadow} from \"@activatestudio/spritz-ui-components\"\n\n<BoxShadow> I am success alter message </BoxShadow>\n```\n\n#### Props\n\n| Name                 | Type      | Value                              | Description                                        |\n| -------------------- | --------- | ---------------------------------- | -------------------------------------------------- |\n| children (required)  | ReactNode | \"React components\"                 | Pass react node to display in box                  |\n| className (optional) | String    | \"overwrite design with your class\" | Pass class to modify design according to your need |\n\n---\n\n## Brand\n\nLogo with brand name\n\n```Javascript\nimport {Brand} from \"@activatestudio/spritz-ui-components\"\n\n<Brand svg=\"https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/acid.svg\" />\n```\n\n#### Props\n\n| Name                    | Type     | Value                                | Description                 |\n| ----------------------- | -------- | ------------------------------------ | --------------------------- |\n| svg (required)          | String   | \"Svg url\"                            | Pass svg url for brand logo |\n| clickHandler (optional) | Function | clickHandler={(e)=>{console.log(e)}} | On element click handler    |\n\n---\n\n## Button\n\nReact button\n\n```Javascript\nimport {Button} from \"@activatestudio/spritz-ui-components\"\n\n<Button type=\"button\"> Click me </Button>\n```\n\n#### Props\n\n| Name                 | Type      | Value                                    | Description                                       |\n| -------------------- | --------- | ---------------------------------------- | ------------------------------------------------- |\n| type (require)       | String    | \"button, submit, and reset\"              | Button type                                       |\n| id (optional)        | String    | \"Element id\"                             | Pass svg url for brand logo                       |\n| children (optional)  | ReactNode | \"Html and string\"                        | Display content                                   |\n| className (optional) | String    | \"Css class\"                              | Pass class to modify design                       |\n| disabled (optional)  | Boolean   | \"true/false\"                             | Is disabled button                                |\n| leftIcon (optional)  | String    | \"svg icon path\"                          | Pass icon to display icon on left side of button  |\n| rightIcon (optional) | String    | \"svg icon path\"                          | Pass icon to display icon on right side of button |\n| iconColor (optional) | Hex code  | \"Icon color code\"                        | Pass color for icon                               |\n| onClick (optional)   | Function  | \"onClick={()=>{console.log('clicked')}}\" | Handle button on click                            |\n\n---\n\n## DaySelector\n\nReact Day selector button\n\n```Javascript\nimport {DaySelector} from \"@activatestudio/spritz-ui-components\"\n\n<DaySelector letter=\"M\" selected={true} onClick={()=>{console.log(\"clicked\")}} />\n```\n\n#### Props\n\n| Name                 | Type     | Value                                    | Description                 |\n| -------------------- | -------- | ---------------------------------------- | --------------------------- |\n| letter (require)     | String   | \"Week first latter\"                      | Week first name with badge  |\n| selected (required)  | Boolean  | \"true/false\"                             | Is selected                 |\n| className (optional) | String   | \"Css class\"                              | Pass class to modify design |\n| onClick (required)   | Function | \"onClick={()=>{console.log('clicked')}}\" | Handle button on click      |\n\n---\n\n# React-redux Form Elements\n\n## Checkbox\n\nReact redux form checkbox element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {Checkbox} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={Checkbox}\n        label=\"Checkbox 01\"\n        name=\"checkbox\"\n        type=\"checkbox\"\n        className=\"\"\n        onChange={(ele: any)=>{console.log(ele.target)}}\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'checkboxForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                 | Type     | Value                                              | Description                 |\n| -------------------- | -------- | -------------------------------------------------- | --------------------------- |\n| label (require)      | String   | \"Checkbox display label\"                           | Label of check box          |\n| type (require)       | String   | \"checkbox\"                                         | Type of checkbox            |\n| name (require)       | String   | \"checkbox\"                                         | Name of checkbox            |\n| id (optional)        | String   | \"id\"                                               | Id of checkbox              |\n| className (optional) | String   | \"Css class\"                                        | Pass class to modify design |\n| onChange (required)  | Function | \"onChange={(ele: any)=>{console.log(ele.target)}}\" | Handle checkbox on change   |\n\n---\n\n## DropDown\n\nReact redux form Dropdown element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {DropDown} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={DropDown}\n        label=\"Dropdown 01\"\n        className=\"\"\n        input = {}\n        options = ['one', 'two', 'three']\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'dropdownForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                  | Type   | Value                     | Description                 |\n| --------------------- | ------ | ------------------------- | --------------------------- |\n| label (require)       | String | \"Dropdown display label\"  | Label of dropdown           |\n| classname (require)   | String | \"Css class\"               | Pass class to modify design |\n| input (require)       | String | \"input\"                   | input for dropdown          |\n| id (optional)         | String | \"id\"                      | Id of dropdown              |\n| className (optionsal) | String | \"Css class\"               | Pass class to modify design |\n| options (required)    | Array  | \"['one', 'two', 'three']\" | Options for dropdown        |\n\n---\n\n## FloatingInput\n\nReact redux form FloatingInput element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {FloatingInput} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={FloatingInput}\n        placeholder=\"FloatingInput\"\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'FloatingInputForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                     | Type   | Value                                 | Description                         |\n| ------------------------ | ------ | ------------------------------------- | ----------------------------------- |\n| placeholder (required)   | String | \"FloatingInput\"                       | Placeholder of FloatingInput        |\n| input (optional)         | String | \"input\"                               | input for FloatingInput             |\n| step (optional)          | String | \"input\"                               | input for FloatingInput             |\n| label (optional)         | String | \"Checkbox display label\"              | Label of FloatingInput              |\n| type (optional)          | String | \"FloatingInput\"                       | Type of FloatingInput               |\n| initianlValue (optional) | String | \"FloatingInput\"                       | initianlValue of FloatingInput      |\n| id (optional)            | String | \"id\"                                  | Id of FloatingInput                 |\n| className (optional)     | String | \"Css class\"                           | Pass class to modify design         |\n| meta (optional)          | Object | \"{touched?: boolean; error?: string;} | Handle meta tags for floating input |\n| metaError (optional)     | String | \"{touched:false}\"                     | Meta Error for floating input       |\n| min (optional)           | Number | \"input\"                               | Minimun number for FloatingInput    |\n\n---\n\n## MultiSelect\n\nReact redux form MultiSelect element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {MultiSelect} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={MultiSelect}\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'MultiSelectForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                 | Type   | Value                                 | Description                         |\n| -------------------- | ------ | ------------------------------------- | ----------------------------------- |\n| input (optional)     | String | \"input\"                               | input for MultiSelect               |\n| dataType (optional)  | String | \"MultiSelect\"                         | Data Type of MultiSelect            |\n| id (optional)        | String | \"id\"                                  | Id of MultiSelect                   |\n| className (optional) | String | \"Css class\"                           | Pass class to modify design         |\n| meta (optional)      | Object | \"{touched?: boolean; error?: string;} | Handle meta tags for floating input |\n| metaError (optional) | String | \"{touched:false}\"                     | Meta Error for floating input       |\n| options (optional)   | Array  | \"['one', 'two', 'three']\"             | Options for MultiSelect             |\n\n---\n\n## RadioButton\n\nReact redux form RadioButton element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {RadioButton} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={RadioButton}\n        label='Radio Button'\n        labelClass=''\n        className=''\n        input={'Input of radio'}\n        dataType=\"radio\"\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'MultiSelectForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                  | Type   | Value                                 | Description                         |\n| --------------------- | ------ | ------------------------------------- | ----------------------------------- |\n| input (required)      | String | \"input\"                               | input for RadioButton               |\n| dataType (required)   | String | \"RadioButton\"                         | Data Type of RadioButton            |\n| id (optional)         | String | \"id\"                                  | Id of RadioButton                   |\n| className (required)  | String | \"Css class\"                           | Pass class to modify design         |\n| labelClass (required) | String | \"Css class\"                           | Pass class to modify design         |\n| label (optional)      | String | \"RadioButton display label\"           | RadioButton of FloatingInput        |\n| meta (optional)       | Object | \"{touched?: boolean; error?: string;} | Handle meta tags for floating input |\n| metaError (optional)  | String | \"{touched:false}\"                     | Meta Error for floating input       |\n\n---\n\n## SearchInput\n\nReact redux form SearchInput element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {SearchInput} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={SearchInput}\n        options={[ value: '',\n                    label: 'Select an agent',\n                    color: '#0C0F13']}\n        onChange={(ele: any)=>{console.log(ele.target)}}\n\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'SearchInputForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                        | Type     | Value                                                      | Description                       |\n| --------------------------- | -------- | ---------------------------------------------------------- | --------------------------------- |\n| options (required)          | Array    | \"[value:'one', label:'two', color:'#0000']\"                | Options for search-input          |\n| className (optional)        | String   | \"Css class\"                                                | Pass class to modify design       |\n| optionClass (optional)      | String   | \"Css class\"                                                | Pass class to modify design       |\n| panelClass (optional)       | String   | \"Css class\"                                                | Pass class to modify design       |\n| selectedOption (optional)   | Array    | \"[value:'one', label:'two', color:'#0000']\"                | Selected options for search-input |\n| color (optional)            | String   | \"#0000\"                                                    | Pass color to modify design       |\n| setAgentForInput (optional) | Function | \"setAgentForInput={(ele: any)=>{console.log(ele.target)}}\" | Handle agent for input on change  |\n| onChange (optional)         | Function | \"onChange={(ele: any)=>{console.log(ele.target)}}\"         | Handle search-input on change     |\n\n---\n\n## SelectFilter\n\nReact redux form SelectFilter element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {SelectFilter} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={SelectFilter}\n        options={[\n          {\n            value: 'completed',\n            label: 'Complete'\n          },\n          { value: 'failed', label: 'Failed' }\n        ]}\n        applyFilter={{(ele: any)=>{console.log(ele.target)}}}\n        selectedFilter={'selectedFilter'}\n        buttonClass={'w-36 font-semibold '}\n        setSelectedFilter={(ele: any)=>{console.log(ele.target)}}\n        setClassName={(ele: any)=>{console.log(ele.target)}}\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'SelectFilterForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                         | Type     | Value                                                       | Description                            |\n| ---------------------------- | -------- | ----------------------------------------------------------- | -------------------------------------- |\n| options (required)           | Array    | \"[value:'one', label:'two', color:'#0000']\"                 | Options for select-filter              |\n| className (optional)         | String   | \"Css class\"                                                 | Pass class to modify design            |\n| optionClass (optional)       | String   | \"Css class\"                                                 | Pass class to modify design            |\n| panelClass (optional)        | String   | \"Css class\"                                                 | Pass class to modify design            |\n| defaultOption (optional)     | String   | \"[value:'one']\"                                             | Pass default option for select-filter  |\n| buttonClass (required)       | String   | \"Css class\"                                                 | Pass class to modify design            |\n| selectedFilter (required)    | String   | \"Select-filter\"                                             | Pass selected filter for select-filter |\n| setSelectedFilter (required) | Function | \"setSelectedFilter={(ele: any)=>{console.log(ele.target)}}\" | Handle selected filter                 |\n| applyFilter (required)       | Function | \"applyFilter={(ele: any)=>{console.log(ele.target)}}\"       | Handle filter on applied Filter        |\n| setClassName (required)      | Function | \"setClassName={(ele: any)=>{console.log(ele.target)}}\"      | Handle class for select-filter         |\n\n---\n\n## SelectInput\n\nReact redux form SelectInput element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {SelectInput} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={SelectInput}\n        options={[\n          {\n            value: 'completed',\n            label: 'Complete'\n          },\n          { value: 'failed', label: 'Failed' }\n        ]}\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'SelectInputForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                        | Type     | Value                                                      | Description                           |\n| --------------------------- | -------- | ---------------------------------------------------------- | ------------------------------------- |\n| options (required)          | Array    | \"[value:'one', label:'two', color:'#0000']\"                | Options for select-input              |\n| className (optional)        | String   | \"Css class\"                                                | Pass class to modify design           |\n| optionClass (optional)      | String   | \"Css class\"                                                | Pass class to modify design           |\n| panelClass (optional)       | String   | \"Css class\"                                                | Pass class to modify design           |\n| selectedOption (optional)   | String   | \"Select-input\"                                             | Pass selected option for select-input |\n| setAgentForInput (optional) | Function | \"setAgentForInput={(ele: any)=>{console.log(ele.target)}}\" | Handle agent for input                |\n| onChange (optional)         | Function | \"onChange={(ele: any)=>{console.log(ele.target)}}\"         | Handle select-input on change         |\n| color (optional)            | String   | \"#0000\"                                                    | Pass color to modify design           |\n\n---\n\n## SelectOption\n\nReact redux form SelectOption element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {SelectOption} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field\n        component={SelectOption}\n        options={[\n          {\n            value: 'completed',\n            label: 'Complete'\n            color: '#0000';\n            name: 'Option1';\n            logo: 'brandLogo';\n            type: 'string';\n            icon: './brand.svg';\n          },\n          { value: 'failed', label: 'Failed' }\n        ]}\n      />\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'SelectOptionForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                   | Type     | Value                                              | Description                    |\n| ---------------------- | -------- | -------------------------------------------------- | ------------------------------ |\n| options (required)     | Array    | \"[value:'one', label:'two', color:'#0000']\"        | Options for select-input       |\n| optionClass (optional) | String   | \"Css class\"                                        | Pass class to modify design    |\n| panelClass (optional)  | String   | \"Css class\"                                        | Pass class to modify design    |\n| onSelect (optional)    | Function | \"onSelect={(ele: any)=>{console.log(ele.target)}}\" | Handle select-option on select |\n\n---\n\n## Select\n\nReact redux form Select element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {Select} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field component={Select}/>\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'SelectForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                 | Type   | Value                                       | Description                 |\n| -------------------- | ------ | ------------------------------------------- | --------------------------- |\n| input (optional)     | String | \"input\"                                     | input for Select            |\n| options (optional)   | Array  | \"[value:'one', label:'two', color:'#0000']\" | Options for select          |\n| label (optional)     | String | \"Select display label\"                      | Label of Select             |\n| dataType (optional)  | String | \"Select\"                                    | Data Type of Select         |\n| id (optional)        | String | \"id\"                                        | Id of Select                |\n| className (optional) | String | \"Css class\"                                 | Pass class to modify design |\n| meta (optional)      | Object | \"{touched?: boolean; error?: string;}       | Handle meta tags for select |\n| metaError (optional) | String | \"{touched:false}\"                           | Meta Error for select       |\n\n---\n\n## TextArea\n\nReact redux form TextArea element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {TextArea} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field component={TextArea}/>\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'TextAreaForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                   | Type   | Value                                 | Description                 |\n| ---------------------- | ------ | ------------------------------------- | --------------------------- |\n| input (optional)       | String | \"input\"                               | input for Select            |\n| label (optional)       | String | \"Select display label\"                | Label of Select             |\n| dataType (optional)    | String | \"Select\"                              | Data Type of Select         |\n| id (optional)          | String | \"id\"                                  | Id of Select                |\n| className (optional)   | String | \"Css class\"                           | Pass class to modify design |\n| meta (optional)        | Object | \"{touched?: boolean; error?: string;} | Handle meta tags for select |\n| metaError (optional)   | String | \"{touched:false}\"                     | Meta Error for select       |\n| placeholder (optional) | String | \"TextArea\"                            | Placeholder of TextArea     |\n| row (optional)         | Number | \"1\"                                   | Number of rows for TextArea |\n| cols (optional)        | Number | \"1\"                                   | Number of cols forTextArea  |\n\n---\n\n## TextInput\n\nReact redux form TextInput element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {TextInput} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field component={TextInput}/>\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'TextInputForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                      | Type    | Value                                 | Description                                        |\n| ------------------------- | ------- | ------------------------------------- | -------------------------------------------------- |\n| input (optional)          | String  | \"input\"                               | input for Text-Input                               |\n| label (optional)          | String  | \"Text-Input display label\"            | Label of Text-Input                                |\n| dataType (optional)       | String  | \"Text-Input\"                          | Data Type of Text-Input                            |\n| id (optional)             | String  | \"id\"                                  | Id of Text-Input                                   |\n| className (optional)      | String  | \"Css class\"                           | Pass class to modify design                        |\n| labelClass (optional)     | String  | \"Css class\"                           | Pass class to modify design                        |\n| disabled (optional)       | Boolean | False                                 | Pass boolean to show if text-input disabled or not |\n| leftIconClass (optional)  | String  | \"Css class\"                           | Pass class to modify design                        |\n| rightIconClass (optional) | String  | \"Css class\"                           | Pass class to modify design                        |\n| rightIcon (optional)      | String  | \"/rightIcon.svg\"                      | Pass class to modify design                        |\n| leftIcon (optional)       | String  | \"/leftIcon.svg\"                       | Pass class to modify design                        |\n| meta (optional)           | Object  | \"{touched?: boolean; error?: string;} | Handle meta tags for select                        |\n| placeholder (optional)    | String  | \"TextInput\"                           | Placeholder of TextInput                           |\n\n---\n\n## Toggle\n\nReact redux form Toggle element\n\n```Javascript\nimport { Field, reduxForm } from 'redux-form';\nimport {Toggle} from \"@activatestudio/spritz-ui-components\"\n\nconst ReduxForm: FunctionComponent<any> = (props)=>{\nreturn (\n   <form>\n      <Field component={Toggle}/>\n   </form>\n   )\n}\n\nexport default reduxForm<any, any, string>({\n  form: 'TextInputForm',\n  destroyOnUnmount: true,\n  forceUnregisterOnUnmount: true\n})(ReduxForm);\n\n```\n\n#### Props\n\n| Name                 | Type   | Value                                 | Description                 |\n| -------------------- | ------ | ------------------------------------- | --------------------------- |\n| input (optional)     | String | \"input\"                               | input for Text-Input        |\n| label (optional)     | String | \"Text-Input display label\"            | Label of Text-Input         |\n| dataType (optional)  | String | \"Text-Input\"                          | Data Type of Text-Input     |\n| className (optional) | String | \"Css class\"                           | Pass class to modify design |\n| meta (optional)      | Object | \"{touched?: boolean; error?: string;} | Handle meta tags for toggle |\n| metaError (optional) | String | \"{touched:false}\"                     | Meta Error for toggle       |\n\n---\n\n# Components\n\n## InfiniteScroll\n\nReact Infinite Scroll Component\n\n```Javascript\nimport {InfiniteScroll} from \"@activatestudio/spritz-ui-components\"\n\n<InfiniteScroll loader={<p className=\"text-center\">Loading...</p>} fetchData={()=>{console.log(\"clicked\")}} >{children} </InfiniteScroll>\n```\n\n#### Props\n\n| Name                  | Type      | Value                                               | Description                                        |\n| --------------------- | --------- | --------------------------------------------------- | -------------------------------------------------- |\n| loader (require)      | ReactNode | \"<p className=\"text-center\">Loading...</p>\"         | Pass loading context                               |\n| children (required)   | ReactNode | \"React components\"                                  | Pass react node to display in box                  |\n| fetchData (require)   | Function  | \"fetchData={(ele: any)=>{console.log(ele.target)}}\" | Handle fetching data for infinite scroll on change |\n| hasmore (optional)    | Boolean   | \"True\"                                              | Boolean value for data                             |\n| endMessage (optional) | ReactNode | \"<p className=\"text-center\">End Message</p>\"        | Pass end message context                           |\n| className (optional)  | String    | \"Css class\"                                         | Pass class to modify design                        |\n\n---\n\n## InlineSvg\n\nReact Inline Svg Component\n\n```Javascript\nimport {InlineSvg} from \"@activatestudio/spritz-ui-components\"\n\n<InlineSvg src={`/assets/svg/brand`} />\n```\n\n#### Props\n\n| Name                 | Type     | Value                                    | Description                 |\n| -------------------- | -------- | ---------------------------------------- | --------------------------- |\n| src (require)        | String   | \"/assets/svg/brand\"                      | Pass source file of svg     |\n| height (optional)    | Number   | 200                                      | Pass height of the svg      |\n| width (optional)     | Number   | 300                                      | Pass width of the svg       |\n| className (optional) | String   | \"Css class\"                              | Pass class to modify design |\n| onClick (optional)   | Function | \"onClick={()=>{console.log('clicked')}}\" | Handle svg on click         |\n\n---\n\n## Shimmer\n\nReact Shimmer Component\n\n```Javascript\nimport {Shimmer} from \"@activatestudio/spritz-ui-components\"\n\n<Shimmer/>\n```\n\n---\n\n## Document Shimmer\n\nReact Document Shimmer Component\n\n```Javascript\nimport {DocumentShimmer} from \"@activatestudio/spritz-ui-components\"\n\n<DocumentShimmer/>\n```\n\n---\n\n## Modal Shimmer\n\nReact Modal Shimmer Component\n\n```Javascript\nimport {ModalShimmer} from \"@activatestudio/spritz-ui-components\"\n\n<ModalShimmer/>\n```\n\n---\n\n## Queue Shimmer\n\nReact Queue Shimmer Component\n\n```Javascript\nimport {QueueShimmer} from \"@activatestudio/spritz-ui-components\"\n\n<QueueShimmer/>\n```\n\n---\n\n## SideBar Shimmer\n\nReact SideBar Shimmer Component\n\n```Javascript\nimport {SideBarShimmer} from \"@activatestudio/spritz-ui-components\"\n\n<SideBarShimmer/>\n```\n\n---\n\n## ShowMore\n\nReact ShowMore Component\n\n```Javascript\nimport {ShowMore} from \"@activatestudio/spritz-ui-components\"\n\n<ShowMore />\n```\n\n#### Props\n\n| Name                      | Type    | Value       | Description                     |\n| ------------------------- | ------- | ----------- | ------------------------------- |\n| color (optional)          | String  | \"#0000\"     | Pass color for SVG              |\n| toggleShowMore (optional) | Boolean | True        | Pass boolean value for toggling |\n| itemsLeft (optional)      | Number  | 1           | Pass number of items are left   |\n| className (optional)      | String  | \"Css class\" | Pass class to modify design     |\n\n---\n\n## Tabs\n\nReact Tabs Component\n\n```Javascript\nimport {Tabs} from \"@activatestudio/spritz-ui-components\"\n\n<Tabs label={'Tabs Label'}>{children}</Tabs>\n```\n\n#### Props\n\n| Name                | Type      | Value                | Description                       |\n| ------------------- | --------- | -------------------- | --------------------------------- |\n| label (require)     | String    | \"Tabs display label\" | Label of Tabs                     |\n| children (required) | ReactNode | \"React components\"   | Pass react node to display in box |\n\n---\n\n## Tooltip\n\nReact Tooltip Component\n\n```Javascript\nimport {Tooltip} from \"@activatestudio/spritz-ui-components\"\n\n<Tooltip>{children}</Tabs>\n```\n\n#### Props\n\n| Name                 | Type      | Value              | Description                       |\n| -------------------- | --------- | ------------------ | --------------------------------- |\n| title (optional)     | String    | \"Tootltip\"         | Title of Tooltip                  |\n| children (required)  | ReactNode | \"React components\" | Pass react node to display in box |\n| className (optional) | String    | \"Css class\"        | Pass class to modify design       |\n\n---\n\n## Typography\n\nReact Typography components\n\n```Javascript\nimport {HeadingOne,HeadingTwo,HeadingThree,HeadingFour,\n        HeadingFive,HeadingSix,Paragraph} from \"@activatestudio/spritz-ui-components\"\n\n<HeadingOne>{children}</HeadingOne>\n<HeadingTwo>{children}</HeadingTwo>\n<HeadingThree>{children}</HeadingThree>\n<HeadingFour>{children}</HeadingFour>\n<HeadingFive>{children}</HeadingFive>\n<HeadingSix>{children}</HeadingSix>\n<Paragraph>{children}</Paragraph>\n```\n\n#### Props\n\n| Name                 | Type      | Value              | Description                       |\n| -------------------- | --------- | ------------------ | --------------------------------- |\n| children (required)  | ReactNode | \"React components\" | Pass react node to display in box |\n| className (optional) | String    | \"Css class\"        | Pass class to modify design       |\n\n---\n\n## PreParagraph\n\nReact PreParagraph component\n\n```Javascript\nimport {PreParagraph} from \"@activatestudio/spritz-ui-components\"\n\n<PreParagraph>{content}</PreParagraph>\n```\n\n#### Props\n\n| Name               | Type      | Value              | Description                       |\n| ------------------ | --------- | ------------------ | --------------------------------- |\n| content (required) | ReactNode | \"React components\" | Pass react node to display in box |\n\n---\n\n# Modules\n\n## AppTourConfirmModal\n\nReact AppTourConfirmModal Module\n\n```Javascript\nimport {AppTourConfirmModal} from \"@activatestudio/spritz-ui-components\"\n\n<AppTourConfirmModal\n  modalTilte=\"AppTourConfirmModal\"\n  modalDescription=\"Add To AppTourConfirmModal\"\n  successBtnText=\"Success\"\n  cancelBtnText=\"Cancecl\"\n  onClickSuccess={() => console.log('clicked success')}\n  onClickCancel={() => console.log('clicked cancel')}\n  closeSvg=\"/assets/svg/closeSmall.svg\"\n/>\n```\n\n#### Props\n\n| Name                            | Type     | Value                                                   | Description                                          |\n| ------------------------------- | -------- | ------------------------------------------------------- | ---------------------------------------------------- |\n| modalTitle (required)           | String   | \"AppTourConfirmModal\"                                   | Pass modal title for app tour confirm modal          |\n| modalDescription (required)     | String   | \"Add To AppTourConfirmModal\"                            | Pass modal description for app tour confirm modal    |\n| successBtnText (required)       | String   | \"Success\"                                               | Pass text for success button                         |\n| cancelBtnText (required)        | String   | \"Cancel\"                                                | Pass text for cancel button                          |\n| onClickSuccess (required)       | Function | \"onClickSuccess={() => console.log('clicked success')}\" | Pass function to handle success button               |\n| onClickCancel (required)        | Function | \"onClickCancel={() => console.log('clicked cancel')}\"   | Pass function to handle cancel button                |\n| closeSvg (required)             | String   | \"/assets/svg/closeSmall.svg\"                            | Pass close icon svg url                              |\n| modalInstructionText (optional) | String   | \"Instruction message\"                                   | modal instruction message for app tour confirm modal |\n| className (optional)            | String   | \"Css class\"                                             | Pass class to modify design                          |\n\n---\n\n## BaseModal\n\nReact BaseModal Module\n\n```Javascript\nimport {BaseModal} from \"@activatestudio/spritz-ui-components\"\n\n<BaseModal\n  heading=\"Base Modal\"\n  body={<div><p>'Base modal body'</p></div>}\n  onCancel={() => console.log('clicked cancel')}\n  closeSvg=\"/assets/svg/closeSmall.svg\"\n  show={true}\n/>\n```\n\n#### Props\n\n| Name                      | Type      | Value                                            | Description                                      |\n| ------------------------- | --------- | ------------------------------------------------ | ------------------------------------------------ |\n| heading (required)        | String    | \"Base Modal\"                                     | Pass heading for base-modal                      |\n| body (required)           | ReactNode | \"React components\"                               | Pass react node to display in box                |\n| show (required)           | Boolean   | \"True\"                                           | Pass boolean value to show/hide base modal       |\n| onCancel (required)       | Function  | \"onCancel={() => console.log('clicked cancel')}\" | Pass function to handle cancel button            |\n| closeSvg (required)       | String    | \"/assets/svg/closeSmall.svg\"                     | Pass close icon svg url                          |\n| isModalLoading (required) | Boolean   | \"True\"                                           | Pass boolean value to determine if modal loading |\n| className (optional)      | String    | \"Css class\"                                      | Pass class to modify design                      |\n| bodyClass (optional)      | String    | \"Css class\"                                      | Pass class to modify design                      |\n\n---\n\n## ConfirmationModal\n\nReact ConfirmationModal Module\n\n```Javascript\nimport {ConfirmationModal} from \"@activatestudio/spritz-ui-components\"\n\n<ConfirmationModal\n  title=\"Confirmation Modal\"\n  subTitle=\"Add to confimation modal\"\n  successBtnText=\"Success\"\n  cancelBtnText=\"Cancecl\"\n  onClickSuccess={() => console.log('clicked success')}\n  onClickCancel={() => console.log('clicked cancel')}\n  closeSvg=\"/assets/svg/closeSmall.svg\"\n/>\n```\n\n#### Props\n\n| Name                      | Type     | Value                                                   | Description                            |\n| ------------------------- | -------- | ------------------------------------------------------- | -------------------------------------- |\n| title (required)          | String   | \"Confirmation Modal\"                                    | Pass title for confirmation-modal      |\n| subTitle (required)       | String   | \"Add to confimation modal\"                              | Pass subtitle of confirmation-modal    |\n| successBtnText (required) | String   | \"Success\"                                               | Pass text for success button           |\n| cancelBtnText (required)  | String   | \"Cancel\"                                                | Pass text for cancel button            |\n| onClickSuccess (required) | Function | \"onClickSuccess={() => console.log('clicked success')}\" | Pass function to handle success button |\n| onClickCancel (required)  | Function | \"onClickCancel={() => console.log('clicked cancel')}\"   | Pass function to handle cancel button  |\n| closeSvg (required)       | String   | \"/assets/svg/closeSmall.svg\"                            | Pass close icon svg url                |\n| height (optional)         | Number   | \"400\"                                                   | Pass height for the confirmation modal |\n| className (optional)      | String   | \"Css class\"                                             | Pass class to modify design            |\n\n---\n\n## Header\n\nReact Header Module\n\n```Javascript\nimport {Header} from \"@activatestudio/spritz-ui-components\"\n\n<Header\n  token=\"1234\"\n  router=\"any\"\n  selectedOrgId=\"Home\"\n  activeItem=\"Home\"\n  menuClickHandler={() => console.log('clicked success')}\n  logoClickHandler={() => console.log('clicked success')}\n  afterLoginMenu={['Home', 'Login']}\n  beforeLoginMenu={[ 'Login']}\n  individualLoginMenu={['Home', 'Login']}\n  brandSvg=\"/assets/svg/main-logo.svg\"\n  barsSvg=\"/assets/svg/bars3.svg\"\n  xMarkSvg=\"/assets/svg/closeSmall.svg\"\n  arrowSvg=\"/assets/svg/closeSmall.svg\"\n  withRouter=\"any\"\n/>\n```\n\n#### Props\n\n| Name                           | Type     | Value                                      | Description                                          |\n| ------------------------------ | -------- | ------------------------------------------ | ---------------------------------------------------- |\n| token (required)               | String   | \"user token\"                               | Pass user token                                      |\n| router (required)              | String   | \"Router path\"                              | Pass router path                                     |\n| selectedOrgId (required)       | String   | \"Home\"                                     | Pass selected Org for Header                         |\n| activeItem (required)          | String   | \"Home\"                                     | Pass active header item                              |\n| menuClickHandler (required)    | Function | \"menuClickHandler={() => console.log('')}\" | Pass function to handle menu click                   |\n| logoClickHandler (required)    | Function | \"logoClickHandler={() => console.log('')}\" | Pass function to handle logo click                   |\n| afterLoginMenu (required)      | Array    | \"['Home', 'Login']\"                        | Pass array of item after user login for header menu  |\n| beforeLoginMenu (required)     | Array    | \"[ 'Login']\"                               | Pass array of item before user login for header menu |\n| individualLoginMenu (required) | String   | \"['Home' , 'Settings']\"                    | Pass array of item for individual login menu         |\n| brandSvg (required)            | String   | \"/assets/svg/brandSvg.svg\"                 | Pass brand icon svg url                              |\n| barsSvg (required)             | String   | \"/assets/svg/barsSvg.svg\"                  | Pass close bars svg url                              |\n| xMarkSvg (required)            | String   | \"/assets/svg/xMarkSvg.svg\"                 | Pass close xMark svg url                             |\n| arrowSvg (required)            | String   | \"/assets/svg/arrowSvg.svg\"                 | Pass close arrow svg url                             |\n| withRouter (required)          | String   | \"withRouter from redux\"                    | Associated with redux router                         |\n| SETTING_HEADING (optional)     | String   | \"Setting Heading\"                          | Pass setting heading                                 |\n\n---\n\n## ResponsiveNavbar\n\nA comprehensive, responsive navbar component with built-in hamburger menu functionality. Supports both navigation and action items, with customizable styling and behavior for mobile and desktop views.\n\n```Javascript\nimport { ResponsiveNavbar } from \"@activate-spritz-components/spritz-ui-components\"\n\nconst navigationItems = [\n  { \n    id: 'spritz', \n    label: 'Spritz', \n    href: '/spritz',\n    type: 'navigation'\n  },\n  { \n    id: 'logout', \n    label: 'Log out', \n    type: 'action',\n    onClick: () => {\n      console.log('Logout clicked!');\n      // Handle logout logic\n    }\n  }\n];\n\n<ResponsiveNavbar\n  logo={<YourLogo />}\n  rightContent={<UserMenu />}\n  navigationItems={navigationItems}\n  onNavigationItemClick={(item) => console.log('Clicked:', item)}\n  onLogoClick={() => window.location.href = '/'}\n  height={64}\n  mobileHeight={56}\n  backgroundColor=\"bg-white\"\n  borderColor=\"border-gray-200\"\n  shadow={false}\n  showHeader={false}\n  mobileOpenInNewTab={true}\n  desktopOpenInNewTab={false}\n  menuItemTextColor=\"text-gray-900\"\n  menuItemHoverColor=\"hover:bg-gray-50\"\n  menuItemActiveColor=\"bg-blue-100 text-blue-900\"\n/>\n```\n\n#### Props\n\n| Name                    | Type                              | Default                    | Description                                                |\n| ----------------------- | --------------------------------- | -------------------------- | ---------------------------------------------------------- |\n| `id`                    | `string`                          | -                          | Unique identifier for the navbar                           |\n| `className`             | `string`                          | -                          | Additional CSS classes for the navbar                      |\n| `height`                | `number`                          | `64`                       | Height of the navbar in pixels                            |\n| `mobileHeight`          | `number`                          | -                          | Height of the navbar on mobile devices                    |\n| `logo`                  | `ReactNode`                       | -                          | Logo component to display on the left                     |\n| `leftContent`           | `ReactNode`                       | -                          | Additional content to display on the left                 |\n| `rightContent`          | `ReactNode`                       | -                          | Additional content to display on the right                |\n| `children`              | `ReactNode`                       | -                          | Content to display in the center                          |\n| `navigationItems`       | `NavItem[]`                       | `[]`                       | Array of navigation items for the hamburger menu          |\n| `backgroundColor`       | `string`                          | `'bg-white'`               | Background color class for the navbar                     |\n| `borderColor`           | `string`                          | `'border-gray-200'`        | Border color class for the navbar                         |\n| `shadow`                | `boolean`                         | `false`                    | Whether to show shadow on the navbar                      |\n| `hamburgerIcon`         | `ReactNode`                       | -                          | Custom hamburger icon component                           |\n| `showHeader`            | `boolean`                         | `false`                    | Whether to show header in the dropdown/sidebar            |\n| `menuTitle`             | `string`                          | `'Menu'`                   | Title for the menu header                                 |\n| `menuPosition`          | `'left' \\| 'right'`              | `'right'`                  | Position of the hamburger menu                            |\n| `menuVariant`           | `'dropdown' \\| 'sidebar'`        | `'dropdown'`               | Type of menu (dropdown for desktop, sidebar for mobile)   |\n| `defaultOpenInNewTab`   | `boolean`                         | `false`                    | Default behavior for opening links in new tab             |\n| `mobileOpenInNewTab`    | `boolean`                         | -                          | Whether to open links in new tab on mobile               |\n| `desktopOpenInNewTab`   | `boolean`                         | -                          | Whether to open links in new tab on desktop              |\n| `menuBackgroundColor`   | `string`                          | `'bg-white'`               | Background color for the menu                             |\n| `menuBorderColor`       | `string`                          | `'border-gray-200'`        | Border color for the menu                                 |\n| `menuShadow`            | `boolean`                         | `true`                     | Whether to show shadow on the menu                        |\n| `menuItemTextColor`     | `string`                          | `'text-gray-900'`          | Text color for menu items                                 |\n| `menuItemHoverColor`    | `string`                          | `'hover:bg-gray-50'`       | Hover color for menu items                                |\n| `menuItemActiveColor`   | `string`                          | `'bg-gray-100 text-gray-900'` | Active state color for menu items                     |\n| `onNavigationItemClick` | `(item: NavItem) => void`        | -                          | Callback when a navigation item is clicked                |\n| `onMenuOpenChange`      | `(isOpen: boolean) => void`       | -                          | Callback when menu open state changes                     |\n| `onLogoClick`           | `() => void`                      | -                          | Callback when logo is clicked                             |\n\n#### NavItem Interface\n\n```typescript\ninterface NavItem {\n  id: string;\n  label: string;\n  href?: string;\n  icon?: ReactNode;\n  onClick?: () => void;\n  isActive?: boolean;\n  isDisabled?: boolean;\n  openInNewTab?: boolean;\n  type?: 'navigation' | 'action' | 'separator';\n}\n```\n\n| Property        | Type                              | Description                                                |\n| --------------- | --------------------------------- | ---------------------------------------------------------- |\n| `id`            | `string`                          | Unique identifier for the item                             |\n| `label`         | `string`                          | Display text for the item                                  |\n| `href`          | `string`                          | URL for navigation items                                   |\n| `icon`          | `ReactNode`                       | Optional icon for the item                                 |\n| `onClick`       | `() => void`                      | Function to call for action items                          |\n| `isActive`      | `boolean`                         | Whether the item is currently active                       |\n| `isDisabled`    | `boolean`                         | Whether the item is disabled                               |\n| `openInNewTab`  | `boolean`                         | Whether to open link in new tab                           |\n| `type`          | `'navigation' \\| 'action' \\| 'separator'` | Type of item (navigation for links, action for functions, separator for visual dividers) |\n| `separatorElement` | `ReactNode`                    | Custom separator element (alternative to type: 'separator') |\n| `separatorStyle` | `{ height?: string, borderColor?: string, backgroundColor?: string, margin?: string }` | Custom styling for default separators |\n\n#### Features\n\n- **Responsive Design:** Automatically adapts to mobile and desktop views\n- **Flexible Navigation:** Supports both URL navigation and function calls\n- **Customizable Styling:** Extensive styling options for all elements\n- **Logo Integration:** Custom logo with click handler support\n- **Hamburger Menu:** Built-in responsive hamburger menu with dropdown/sidebar variants\n- **Environment Variables:** Support for environment-based navigation URLs\n- **Height Management:** Responsive height with mobile-specific sizing\n- **Border Consistency:** Consistent border styling across mobile and desktop\n- **Action Items:** Support for function-based items like logout\n- **Separator Support:** Visual dividers to organize menu items\n- **Accessibility:** Proper ARIA labels and keyboard navigation\n\n#### Examples\n\n**Basic Navigation:**\n```javascript\nconst navigationItems = [\n  { id: 'home', label: 'Home', href: '/', type: 'navigation' },\n  { id: 'about', label: 'About', href: '/about', type: 'navigation' },\n  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }\n];\n\n<ResponsiveNavbar\n  logo={<Logo />}\n  navigationItems={navigationItems}\n  onNavigationItemClick={handleItemClick}\n/>\n```\n\n**With Environment Variables:**\n```javascript\nconst navigationItems = [\n  { \n    id: 'spritz', \n    label: 'Spritz', \n    href: CONFIG.SpritzNavigationUrl || '/spritz',\n    type: 'navigation'\n  },\n  { \n    id: 'logout', \n    label: 'Log out', \n    type: 'action',\n    onClick: () => {\n      // Handle logout logic\n      clearTokens();\n      redirectToLogin();\n    }\n  }\n];\n```\n\n**With Separators (Type-based):**\n```javascript\nconst navigationItems = [\n  { id: 'home', label: 'Home', href: '/', type: 'navigation' },\n  { id: 'about', label: 'About', href: '/about', type: 'navigation' },\n  { id: 'separator1', label: '', type: 'separator' },\n  { id: 'settings', label: 'Settings', href: '/settings', type: 'navigation' },\n  { id: 'profile', label: 'Profile', href: '/profile', type: 'navigation' },\n  { id: 'separator2', label: '', type: 'separator' },\n  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }\n];\n```\n\n**With Custom Separator Elements:**\n```javascript\nconst navigationItems = [\n  { id: 'home', label: 'Home', href: '/', type: 'navigation' },\n  { id: 'about', label: 'About', href: '/about', type: 'navigation' },\n  { \n    id: 'separator1', \n    label: '', \n    separatorElement: <div className=\"w-full h-px bg-blue-300 my-3\" />\n  },\n  { id: 'settings', label: 'Settings', href: '/settings', type: 'navigation' },\n  { id: 'profile', label: 'Profile', href: '/profile', type: 'navigation' },\n  { \n    id: 'separator2', \n    label: '',\n    separatorElement: (\n        <div \n          style={{\n            width: '100%',\n            height: '1px',\n            backgroundColor: 'red',\n            margin: '10px 0',\n            borderBottom: '1px solid grey'\n          }}\n        />\n      )\n  },\n  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }\n];\n```\n\n**With Custom Separator Styling:**\n```javascript\nconst navigationItems = [\n  { id: 'home', label: 'Home', href: '/', type: 'navigation' },\n  { id: 'about', label: 'About', href: '/about', type: 'navigation' },\n  { \n    id: 'separator1', \n    label: '', \n    type: 'separator',\n    separatorStyle: {\n      height: '2px',\n      backgroundColor: '#3b82f6',\n      margin: '12px 0'\n    }\n  },\n  { id: 'settings', label: 'Settings', href: '/settings', type: 'navigation' },\n  { id: 'profile', label: 'Profile', href: '/profile', type: 'navigation' },\n  { \n    id: 'separator2', \n    label: '', \n    type: 'separator',\n    separatorStyle: {\n      height: '1px',\n      backgroundColor: '#ef4444',\n      margin: '8px 0'\n    }\n  },\n  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }\n];\n```\n\n**Troubleshooting Separators:**\n\nIf separators are not showing up, ensure:\n1. The `type` is set to `'separator'` or `separatorElement` is provided\n2. For type-based separators, the component will render a default gray line\n3. For custom styling, use `separatorStyle` properties\n4. For complex separators, use `separatorElement` with custom JSX\n\n**Advanced Separator Examples:**\n```javascript\n// Gradient separator\n{ \n  id: 'gradient-separator', \n  label: '', \n  type: 'separator',\n  separatorStyle: {\n    height: '3px',\n    background: 'linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899)',\n    margin: '16px 0'\n  }\n}\n\n// Dashed border separator\n{ \n  id: 'dashed-separator', \n  label: '', \n  separatorElement: <div className=\"w-full h-px border-t-2 border-dashed border-gray-400 my-4\" />\n}\n\n// Text separator with line\n{ \n  id: 'text-separator', \n  label: '', \n  separatorElement: (\n    <div className=\"flex items-center w-full my-4\">\n      <div className=\"flex-1 h-px bg-gray-300\"></div>\n      <span className=\"px-3 text-xs text-gray-500\">OR</span>\n      <div className=\"flex-1 h-px bg-gray-300\"></div>\n    </div>\n  )\n}\n```\n\n**Custom Styling:**\n```javascript\n<ResponsiveNavbar\n  logo={<CustomLogo />}\n  rightContent={<UserMenu />}\n  navigationItems={navigationItems}\n  height={80}\n  mobileHeight={60}\n  backgroundColor=\"bg-blue-50\"\n  borderColor=\"border-blue-200\"\n  shadow={true}\n  menuItemTextColor=\"text-blue-900\"\n  menuItemHoverColor=\"hover:bg-blue-100\"\n  menuItemActiveColor=\"bg-blue-200 text-blue-900\"\n/>\n```\n\n---\n\n# CustomCalendar\nReact Custom Calendar component built on top of react-calendar with enhanced styling, formatting, and customization options.\n\n```Javascript\nimport CustomCalendar from './CustomCalendar';\n\n<CustomCalendar\n  value={new Date()}\n  containerClassName=\"rounded-md shadow-md\"\n  todayClassName=\"bg-green-500 text-white\"\n  dayStyle={(date) => ({ borderRadius: '4px' })}\n  tileContent={({ date }) => <span>{date.getDate()}</span>}\n/>\n```\n✅ Props\n\n\n| Name                 | Type                              | Example                                                                    | Description                                                |\n| -------------------- | --------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------- |\n| `value`              | `Date \\| Date[]`                  | `new Date()`                                                               | Selected date or range                                     |\n| `onChange`           | `(value: Date \\| Date[]) => void` | `(date) => console.log(date)`                                              | Callback when date is changed                              |\n| `containerClassName` | `string`                          | `\"rounded shadow bg-white\"`                                                | Custom class for the outer container                       |\n| `containerStyle`     | `React.CSSProperties`             | `{ backgroundColor: 'white' }`                                             | Inline styles for the outer container                      |\n| `tileClassName`      | `string \\| (props) => string`     | `({ date }) => 'bg-gray-100'`                                              | Class(es) applied to each date tile                        |\n| `tileContent`        | `(props) => React.ReactNode`      | `({ date }) => <span>{date.getDate()}</span>`                              | Custom content for each date tile                          |\n| `dayFormat`          | `(locale, date) => string`        | `(locale, date) => date.toLocaleDateString(locale, { weekday: 'narrow' })` | Custom formatter for weekday labels (defaults to 1-letter) |\n| `dayStyle`           | `(date, view) => CSSProperties`   | `(date, view) => ({ color: 'red' })`                                       | Custom inline styles for individual date tiles             |\n| `todayClassName`     | `string`                          | `\"bg-blue-500 text-white\"`                                                 | Extra classes added to today's date tile                   |\n| `...rest`            | `ReactCalendarProps`              | `minDate={new Date()}`                                                     | All other props supported by `react-calendar`              |\n\n\n...rest\tReactCalendarProps\tAll other props from react-calendar\tYou can pass anything supported by react-calendar\n\n🔧 Example\n```Javascript\n<CustomCalendar\n  value={new Date()}\n  onChange={(val) => console.log(val)}\n  todayClassName=\"bg-indigo-500 text-white\"\n  dayStyle={(date) => ({ padding: '5px', borderRadius: '6px' })}\n  tileContent={({ date }) => {\n    if (date.getDate() === 1) return <span className=\"text-red-600\">*</span>;\n    return null;\n  }}\n/>\n```\n📦 Dependencies\nreact-calendar\n\nCSS: import 'react-calendar/dist/Calendar.css';\n","readmeFilename":"README.md"}