{"_id":"@activatestudio/spritz-ui-components","_rev":"8-d6442ffb52460ab23f77d8c9765e65e8","name":"@activatestudio/spritz-ui-components","dist-tags":{"latest":"0.1.3"},"versions":{"0.0.1":{"name":"@activatestudio/spritz-ui-components","version":"0.0.1","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.0.1","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"6010b1004899a30ab838c0afc140c65aaa27bbc4","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.0.1.tgz","fileCount":8,"integrity":"sha512-4CeD+oRm19Tj0rfIMKJwd/XiJ23wuRwcmbFMYaqh516LY/CfZzDLjLVPVw2MgAMXe3a3LP1xJ/WgQM4/czyRSg==","signatures":[{"sig":"MEYCIQD+1/+jpQoZIXAibOCOVfkSuBHzzzdTSBtU80OzGwT1EgIhAKS7NnuK+5VRr3i26nnoM6l+prQlnOjPFEVYyDAnSuOw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3482183},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"f7317795a31378390daadb372bcc50bb06bd5fab","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for Next.js projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","react-inlinesvg":"^3.0.2"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.4","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-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.0.1_1718197013602_0.5297700832631127","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@activatestudio/spritz-ui-components","version":"0.0.2","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.0.2","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"be90888bc24f836353f08cd8691e90ddd03930b3","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.0.2.tgz","fileCount":8,"integrity":"sha512-q4oQ9ZzJgigs5eH58wAw3o+bFFts+DlnZp7lO+t6GOz6sWYDvHx4X9AwqUxKgwyjykDHyTidiDeLR2VKoxxWPg==","signatures":[{"sig":"MEUCIGpbB/Bidme96snf9kxp+qD20ZNMfH7D/Xhr96yIKGR4AiEAzkFolW3EsvahGMKzMUvJwnq7L4tjCgeJ5tEzQ7GF/es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3482183},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"a6acc5425d92d1974efc9df9725d63c5d848038b","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","react-inlinesvg":"^3.0.2"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.4","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-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.0.2_1718201024262_0.6816009250105377","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@activatestudio/spritz-ui-components","version":"0.0.3","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.0.3","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"000f666d3831781f047e565730ddb06a70902f06","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.0.3.tgz","fileCount":43,"integrity":"sha512-EaT2Yt8InV8PqxTWMDWkWMkuv8kund/TpD/03+p76t18OrRiRYiZftf8+KFyV6OK6T6/dbIDkE8TSnisPVxEgQ==","signatures":[{"sig":"MEUCICixo8IVi68Jvpx6NQMk/FdRiZQ11y8U5PiSmuHyRPHzAiEApF9ZGhl9yO2P3q7qJoOhc5HRslAXLGdno4GlFEYAyzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2003941},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"aa5ff1ef73c0ee1ba9b8f14297b01433c184e3bc","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","react-inlinesvg":"^3.0.2"},"_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.0.3_1718279625738_0.5630467375219814","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@activatestudio/spritz-ui-components","version":"0.0.4","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.0.4","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"c9533dff01e5305bb2e33e213cc0e44be2e6fc71","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.0.4.tgz","fileCount":43,"integrity":"sha512-C/uN9KWkz3Dn2L8Ry2HN2gLuFGJOG2ZYNHrL8XMxC/Fk1vMhvFgxGzFbqGnheWwFCouAcQJXO0BjNc6F2169dA==","signatures":[{"sig":"MEYCIQD0rVMA9F/R1KmzKSsXrXa9qUKO629VN38ySOkOlrhIKwIhANp0Ri5uxGxIP48GGVN7Bal4KtGZE5igqzDQy53CBDpd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2003990},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"755f8fbbfbc8ca2bf6bc53916bb2d68cdb558d46","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","react-inlinesvg":"^3.0.2"},"_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.0.4_1718281861144_0.5147246275581201","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"@activatestudio/spritz-ui-components","version":"0.0.5","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.0.5","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"f369590ac723e71232c642742099966236d02349","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.0.5.tgz","fileCount":43,"integrity":"sha512-nBK/qrxL0ry4Atydmquhx/c/h+Fu5qWRzP/ARq7VKVyfso7bELCxr/R0XHVke5aBazt1SHA40D4TYP40eZrlUQ==","signatures":[{"sig":"MEUCIDtI6TS8Q0IM5U6E4rD5VoaAguZ9+oXZruHErIAzzOzwAiEAk8f7U48spj39f3iZHlLWztSNNBm6DVDlvR79zohNrJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2006354},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"1fd69959369c3d06dff88e7109fd7512ddca9b43","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","classnames":"^2.5.1","react-inlinesvg":"^3.0.2"},"_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.0.5_1718778291321_0.7843842697733188","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@activatestudio/spritz-ui-components","version":"0.1.0","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.1.0","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"7cb2bc73db4e64170954096d65db092ba9f0d2b9","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.1.0.tgz","fileCount":54,"integrity":"sha512-TWNyURM88uuHSVFsEZnOrJQNGnGRPuhPowUmHPjoDcq1hQcwGeGGWBp0i9y6y4pUHnTk6m6uOQeCK9ajf4a/+w==","signatures":[{"sig":"MEUCIQDeB9UyN+3HALSDRJluTxP6bvqMQfuqjpbFfLlx05SgLwIgQGuAWKTSB792THNfBmtyAzFLK09MxziwRYYWxec+PGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4060384},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"d483dace5b6a52d320ab70b642cac3fcf66b2095","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","@uppy/core":"^3.13.1","classnames":"^2.5.1","@restart/ui":"^1.6.9","@uppy/react":"^3.4.0","@uppy/aws-s3":"^3.6.2","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.0_1720165500576_0.17037894008592902","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@activatestudio/spritz-ui-components","version":"0.1.1","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.1.1","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"217b6e3b1bc1394b2676bdb9cd3808b16b674d81","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.1.1.tgz","fileCount":54,"integrity":"sha512-SruMCXv4olGi1+l067O9P9PFgtldxhyo0bYpVkuvtS3PI40Lzr6AYmtDdvjejF0DVYddFl4xloNCTXhieG+Z0Q==","signatures":[{"sig":"MEQCIE2bZhtv2/18mDeWWf4enbc6rDRJ8EAWuX+hRztp4fVTAiBE4dZBRlNX19wJU8mePMwgs1v1oqkcSD+jRttAYCfZ4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4060417},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"0e41b79d570b6728feeb95145192487e22387184","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"lodash":"^4.17.21","@uppy/core":"^3.13.1","classnames":"^2.5.1","@restart/ui":"^1.6.9","@uppy/react":"^3.4.0","@uppy/aws-s3":"^3.6.2","@uppy/dashboard":"^3.9.1","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.1_1720171994318_0.687706191050597","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@activatestudio/spritz-ui-components","version":"0.1.2","keywords":["next.js","react","components","typescript","Amjesh","Activate Studio"],"author":{"name":"Activate Studio / @amjesh"},"license":"ISC","_id":"@activatestudio/spritz-ui-components@0.1.2","maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"homepage":"https://github.com/ActivateMedia/ui-components#readme","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"dist":{"shasum":"3522788d447ec47f93e4ddc54a6a05e758652f92","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.1.2.tgz","fileCount":54,"integrity":"sha512-JTILYAoh89nBsmNNrKOLJImmy0Ld3oJZV1q8q4Fbl426PyWyEFG3MuxAEy+IX9bId8idUbQC5PXRMqcuFVSxfw==","signatures":[{"sig":"MEYCIQCss1V5JRD4hgOLAZQPWvhGVsVpOKImWjacz5AKzSFM5gIhAJRKI3lpAgv1bai6QiTmrQuPECVtDVUrylMOrMZaoaHP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3400656},"main":"dist/index.js","types":"dist/types/index.d.ts","module":"dist/index.esm.js","gitHead":"ca77890bb38452d4c84f28b7cb88f3d5af85d50c","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":"spritz","email":"signups@activate.co.uk"},"repository":{"url":"git+https://github.com/ActivateMedia/ui-components.git","type":"git"},"_npmVersion":"10.2.3","description":"This is shared components library for spritz projects.","directories":{},"_nodeVersion":"20.10.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.2_1720186164007_0.8063808000362216","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"@activatestudio/spritz-ui-components","version":"0.1.3","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","classnames":"^2.5.1","lodash":"^4.17.21","react-inlinesvg":"^3.0.2"},"_id":"@activatestudio/spritz-ui-components@0.1.3","gitHead":"d690679bf0a45995d9e445ad564e44ebd8b266fd","bugs":{"url":"https://github.com/ActivateMedia/ui-components/issues"},"homepage":"https://github.com/ActivateMedia/ui-components#readme","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-1Ef55sJZa1Plslrcy+R3cdcKQK+w1ZA5l6tUipxh84ySLjRXk7AFmFrIkKmm0M0FFBgcWU7x0HyOtOMHYJ/Ctw==","shasum":"8173f0a6310cdcfd96a3a85d822f873e1ab02112","tarball":"https://registry.npmjs.org/@activatestudio/spritz-ui-components/-/spritz-ui-components-0.1.3.tgz","fileCount":54,"unpackedSize":3439797,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+Z4HitO2/NiNg2VDYt37fcjhVUgMM6/cbj7fIXYvx3wIgYvUp4t6kHwx9lfcKqJS3zHfba8bd4e8YsQo5jcb4slE="}]},"_npmUser":{"name":"spritz","email":"signups@activate.co.uk"},"directories":{},"maintainers":[{"name":"spritz","email":"signups@activate.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/spritz-ui-components_0.1.3_1720767632413_0.9541921544138687"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-12T12:56:53.488Z","modified":"2024-07-12T07:00:32.917Z","0.0.1":"2024-06-12T12:56:53.731Z","0.0.2":"2024-06-12T14:03:44.549Z","0.0.3":"2024-06-13T11:53:45.970Z","0.0.4":"2024-06-13T12:31:01.369Z","0.0.5":"2024-06-19T06:24:51.505Z","0.1.0":"2024-07-05T07:45:00.772Z","0.1.1":"2024-07-05T09:33:14.539Z","0.1.2":"2024-07-05T13:29:24.247Z","0.1.3":"2024-07-12T07:00:32.710Z"},"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":"spritz","email":"signups@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 \"@activatestudio/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## 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\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| 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## Document Shimmer\n\nReact Document Shimmer Component\n\n```Javascript\nimport {DocumentShimmer} from \"@activatestudio/spritz-ui-components\"\n\n<DocumentShimmer/>\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## Queue Shimmer\n\nReact Queue Shimmer Component\n\n```Javascript\nimport {QueueShimmer} from \"@activatestudio/spritz-ui-components\"\n\n<QueueShimmer/>\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| 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| 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## 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| 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#### Props\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```Javascript\nimport {PreParagraph} from \"@activatestudio/spritz-ui-components\"\n\n<PreParagraph>{content}</PreParagraph>\n```\n#### Props\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\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\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---","readmeFilename":"README.md"}