sccoreui 6.3.99 → 6.4.0

package/dist/pages/mega-mennu/mega-menu.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const megamenu_1 = require("primereact/megamenu");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const button_1 = require("primereact/button");
+const HeaderComponent = () => {
+    const items = [
+        {
+            label: "Home",
+        },
+        {
+            label: "Products",
+            items: [
+                [
+                    {
+                        label: "Products",
+                        items: [
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
+                            },
+                        ],
+                    },
+                ],
+            ],
+        },
+        {
+            label: "Resources",
+            items: [
+                [
+                    {
+                        label: "Resources",
+                        items: [
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
+                            },
+                        ],
+                    },
+                ],
+            ],
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", className: "m-0 text-gray-600 w-6" }, { children: "Aboutus" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Support" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Press" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Contact" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Carrer" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Sitemap" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Legal" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Cookie settings" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "md:hidden m-0 bg-primary-500 w-full " })),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "md:hidden m-0 border-500 bg-transparent text-gray-500 w-full border-gray-300 shadow-md" })),
+        },
+    ];
+    const start = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 w-full" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "menu-logo" }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "text-gray-900 font-bold" }, { children: "Untitled UI" }))] })));
+    const end = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hidden md:flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "bg-transparent text-gray-500 border-none" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "bg-primary-500 " })] })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(megamenu_1.MegaMenu, { model: items, orientation: "horizontal", start: start, end: end, menuIcon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-closeicon absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-hamburgermenu absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hamburger-menu" }) }))] }), breakpoint: "770px", className: "w-full", pt: {} }) }));
+};
+exports.default = HeaderComponent;

package/dist/pages/multi-select-dropdown/multi-select-dropdown.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const primereact_1 = require("primereact");
+const multi_select_dropdown_1 = require("../../components/multi-select-dropdown/multi-select-dropdown");
+const react_1 = require("react");
+const CustomSelect = () => {
+    const [filterValus, setFilterValues] = (0, react_1.useState)([]);
+    const [filterValus1, setFilterValues1] = (0, react_1.useState)([]);
+    const [filterValus2, setFilterValues2] = (0, react_1.useState)([]);
+    const list = [
+        { name: "Phoenix Baker", at: "@phoenix" },
+        { name: "Olivia Rhye", at: "@olivia" },
+        { name: "Lana Steiner", at: "@lana" },
+        { name: "Demi Wilkinson", at: "@demi" },
+        { name: "Candice Wu", at: "@candice" },
+        { name: "Natali Craig", at: "@natali" },
+        { name: "Drew Cano", at: "@drew" },
+    ];
+    // const statusList = [
+    //     { name: "Active", color:'#12B76A'},
+    //     { name: "Inactive", color:'#F04438'},
+    //     { name: "Draft", color:'#162578'},
+    // ]
+    // const onSelectionChange = (e:any) => {
+    //     console.log('On Selection Change....')
+    //     setFilterValues(e.value);
+    // }
+    const onClear = () => {
+        // debugger
+    };
+    const clearFilters = () => {
+        setFilterValues([]);
+        setFilterValues1([]);
+        setFilterValues2([]);
+    };
+    let statusOptions = [
+        { name: "Requested", color: '#162578' },
+        { name: "Waiting for Approval", color: '#fedf89' },
+        { name: "Approved", color: '#d1fadf' },
+        { name: "Development", color: '#b9afff' },
+        { name: "UAT", color: '#583fff' },
+        { name: "On Hold", color: '#f79009' },
+        { name: "Completed", color: '#12b76a' },
+        { name: "Rejected", color: '#f04438' },
+    ];
+    //   console.log(statusList)
+    //   console.log(statusOptions)
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { value: filterValus, onChange: (e) => setFilterValues(e.value), maxSelectedLabels: 2, placeholder: "Multi Select", options: list, dropdownType: "" }), (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { dropdownWidth: 200, hidePanelHeader: true, value: filterValus, onChange: (e) => setFilterValues(e.value), maxSelectedLabels: 1, placeholder: "Multi Select", options: list, dropdownType: "default", clear: "x-close" }), (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { dropdownWidth: 200, hidePanelHeader: true, value: filterValus1, maxSelectedLabels: 1, onClear: onClear, dropdownType: "withIcon", onChange: (e) => setFilterValues1(e.value), leftIcon: "user-square", placeholder: "Select Cities", options: list, clear: "x-close" }), (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.MultiSelectDropDown, { dropdownWidth: 200, value: filterValus2, maxSelectedLabels: 1, onChange: (e) => setFilterValues2(e.value), dropdownType: "status", placeholder: "All Status", options: statusOptions, clear: "x-close" }), (0, jsx_runtime_1.jsx)(primereact_1.Button, { label: "clear", onClick: clearFilters })] }));
+};
+exports.default = CustomSelect;

package/dist/pages/not-found/not-found.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const NotFoundPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full page-not-found flex-column justify-content-center pl-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex h-full flex-column my-auto ml-8" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-700 lineheight-1" }, { children: "404 error" })), (0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-8xl" }, { children: "We can\u2019t find that page" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "text-xl" }, { children: "Sorry, the page you are looking for doesn't exist or has been moved." })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3 mt-8" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left" }), outlined: true, className: "p-button-lg", label: "Go back" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-button-lg", label: "Take me home" })] }))] })) })));
+};
+exports.default = NotFoundPage;

package/dist/pages/paginator/pagination.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const paginator_1 = require("primereact/paginator");
+const ripple_1 = require("primereact/ripple");
+const utils_1 = require("primereact/utils");
+const button_1 = require("primereact/button");
+require("./pagination.scss");
+function TemplateDemo() {
+    const [first, setFirst] = (0, react_1.useState)([0, 0, 0]);
+    const [rows, setRows] = (0, react_1.useState)([10, 10, 10]);
+    const [first1, setFirst1] = (0, react_1.useState)(0);
+    const [rows1, setRows1] = (0, react_1.useState)(10);
+    const onPageChange1 = (event) => {
+        setFirst1(event.first);
+        setRows1(event.rows);
+    };
+    const onPageChange = (e, index) => {
+        setFirst(first.map((f, i) => (index === i ? e.first : f)));
+        setRows(rows.map((r, i) => (index === i ? e.rows : r)));
+    };
+    const template1 = {
+        layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink ',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white  border-none  mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
+                return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-none ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template2 = {
+        layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            console.log(options);
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
+                return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." })));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template3 = {
+        layout: ' CurrentPageReport PrevPageLink  NextPageLink',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) }))] })));
+        },
+        CurrentPageReport: (options) => {
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template4 = {
+        layout: 'PrevPageLink  NextPageLink CurrentPageReport',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template5 = {
+        layout: 'PrevPageLink CurrentPageReport NextPageLink ',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) })] })));
+        },
+        CurrentPageReport: (options) => {
+            console.log(options);
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, "  of ", options.totalRecords] })));
+        }
+    };
+    const template6 = {
+        layout: 'PrevPageLink PageLinks NextPageLink ',
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-right border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { 'p-disabled': false }, "border-1 border-left-none border-gray-300");
+                return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: `${options.className} border-1 border-left-none border-gray-300`, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-left border-left-none px-4 py-2 border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-gray-700" }) })] })));
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10 ml-auto mr-auto grid" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "bg-square", template: template1, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template2, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template3, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template4, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template5, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "paginator-boxes", template: template6, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { first: first1, rows: rows1, totalRecords: 120, rowsPerPageOptions: [10, 20, 30], onPageChange: onPageChange1 }) }))] }))] }));
+}
+exports.default = TemplateDemo;

package/dist/pages/progress-bar/progress-bar.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progressbar_1 = require("primereact/progressbar");
+const react_1 = require("react");
+const slider_1 = require("primereact/slider");
+const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
+const half_circle_progres_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/half-circle-progres-bar"));
+require("./progress-bar.scss");
+const ProgressBarComponent = () => {
+    const [value, setValue] = (0, react_1.useState)("");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Progress-Bar" })), (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-14rem my-8 ml-auto mr-auto progress-slider" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid mt-7 w-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                            position: "absolute",
+                                            top: 33,
+                                            left: `${value}%`,
+                                            transition: "left 1s ease-in-out",
+                                            transform: "translate(-50%, -50%)",
+                                        }, className: "px-3 p-progress-value bg-white shadow-3 h-2rem border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2  flex align-items-start text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                            position: "absolute",
+                                            top: -24,
+                                            left: `${value}%`,
+                                            transition: "left 1s ease-in-out",
+                                            transform: "translate(-50%, -50%)",
+                                        }, className: "p-progress-value bg-white shadow-3 h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value bg-white shadow-3 py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { textClassName: "text-md text-green-500", valueTextClassName: "text-green text-5xl", text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 15, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
+};
+exports.default = ProgressBarComponent;

package/dist/pages/progress-steps/progress-steps.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progress_steps_1 = tslib_1.__importDefault(require("../../components/progress-steps/progress-steps"));
+const ProgressStepsComponent = () => {
+    const itemTemplate = (label, description) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-semibold" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal" }, { children: description }))] }));
+    const items = [
+        {
+            id: "1",
+            template: itemTemplate("Your Details", "Provide Your Details"),
+        },
+        {
+            id: "2",
+            template: itemTemplate("Company details", "A few details of your company"),
+        },
+        {
+            id: "3",
+            template: itemTemplate("Invite your team", "Start collaborating"),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center justify-content-between gap-5 h-30rem" }, { children: [(0, jsx_runtime_1.jsx)(progress_steps_1.default, { stepsItems: items }), (0, jsx_runtime_1.jsx)(progress_steps_1.default, { stepsItems: items, orientation: "vertical" })] })));
+};
+exports.default = ProgressStepsComponent;

package/dist/pages/radio-button/radio-button-component.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const radiobutton_1 = require("primereact/radiobutton");
+const RadioButtonComponent = () => {
+    const [ingredient, setIngredient] = (0, react_1.useState)("");
+    const [remember, setRemember] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Radio Button" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex justify-content-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center mr-3" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient1", name: "pizza", value: "Cheese", onChange: (e) => setIngredient(e.value), checked: ingredient === "Cheese" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient1", className: "ml-2" }, { children: "Cheese" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient2", name: "pizza", value: "Mushroom", onChange: (e) => setIngredient(e.value), checked: ingredient === "Mushroom" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Mushroom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient4", name: "pizza", value: "Onion", className: "p-invalid" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Onion" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient3", name: "pizza", value: "Pepperoni", onChange: (e) => setIngredient(e.value), checked: true, disabled: true }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Pepperoni" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: remember, className: "pt-1", onChange: () => setRemember(!remember) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", className: "pt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: true, disabled: true, className: "pt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }));
+};
+exports.default = RadioButtonComponent;

package/dist/pages/shadows/shadows.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShadowComponent = () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4 mt-0" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full h-full flex-wrap align-items-center justify-content-center gap-5 my-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-1" }, { children: "shadow-1" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-2" }, { children: "shadow-2" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-3" }, { children: "shadow-3" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-4" }, { children: "shadow-4" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-5" }, { children: "shadow-5" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-6" }, { children: "shadow-6" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-7" }, { children: "shadow-7" }))] }))] }));
+};
+exports.default = ShadowComponent;

package/dist/pages/slideout-menus/slideout-menus.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const sidebar_1 = require("primereact/sidebar");
+const react_1 = require("react");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const tabview_1 = require("primereact/tabview");
+const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
+const checkbox_1 = require("primereact/checkbox");
+const Payment_method_card_white_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-card-white.png"));
+const Payment_method_master_card_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-master-card.png"));
+const Payment_method_apple_card_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-apple-card.png"));
+const inputtext_1 = require("primereact/inputtext");
+const SlideoutMenuComponent = () => {
+    const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
+    const [visibleRight2, setVisibleRight2] = (0, react_1.useState)(false);
+    const [visibleRight3, setVisibleRight3] = (0, react_1.useState)(false);
+    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
+    const [emailValue, setEmailValue] = (0, react_1.useState)("");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Slideout Menus" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex justify-content-between px-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Label discription", onClick: () => setVisibleRight(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Messaging", onClick: () => setVisibleRight2(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Payment Cards", onClick: () => setVisibleRight3(true) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight, position: "right", onHide: () => setVisibleRight(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slide-out-menu-header-round-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Heading" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "sideout-menu-footer border-1 border-gray-300 border-x-none mt-8 border-bottom-none" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-6 py-4 flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancle" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Save" })] })) }))] })), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight2, position: "right", onHide: () => setVisibleRight2(false), className: "w-25rem" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full flex-column align-items-start mb-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Messages" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box w-full flex justify-content-between md:flex-column not-expand mt-6" }, { children: [(0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Recent" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Phoenix Baker" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "Just now" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Lana Steiner" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "2 mins ago" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@lana" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Thanks so much, happy with that." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Groups" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Phoenix Baker" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "Just now" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Lana Steiner" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "2 mins ago" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@lana" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Thanks so much, happy with that." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Archive" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Lana Steiner" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "2 mins ago" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@lana" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Thanks so much, happy with that." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
+                                                                            position: "absolute",
+                                                                            right: "0",
+                                                                            height: "12px",
+                                                                            width: "12px",
+                                                                            bottom: "0",
+                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Phoenix Baker" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "Just now" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
+                                                                                    position: "absolute",
+                                                                                    right: "1px",
+                                                                                    top: "1px"
+                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] }))] }))] }))] })) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight3, position: "right", onHide: () => setVisibleRight3(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slide-out-menu-header-round-payment-card-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex w-full flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Payment method" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal mt-1" }, { children: "Update your plan payment details." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between mt-3 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal line-height-2" }, { children: "Up to 10 users and 20GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-2" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between m-top-6 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_master_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium line-height-2" }, { children: "Mastercard ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal line-height-2" }, { children: "Up to 20 users and 40GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-2" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between m-top-6 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_apple_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-2" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between m-top-6 m-bottom-6 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Stripe (Visa ending 1234)" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-1 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Edit", link: true, className: "text-primary-400 font-semibold p-2 text-base line-height-1" })] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "payment-method-plus-icon" }), label: "Add payment method", className: "gap-2 text-primary-400 ml-auto mb-0 mt-3 pr-0 font-semibold text-base", link: true }), (0, jsx_runtime_1.jsx)("hr", { className: "w-full border-gray-200 border-1 my-6" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 line-height-2 text-base font-medium" }, { children: "Billing contact" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 line-height-2 mt-1 text-base font-normal" }, { children: "Add a second billing contact email." })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base m-bottom-6 mt-4" }, { children: "Email address" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-input-icon-right mb-6 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email", onChange: (e) => {
+                                                        setEmailValue(e.target.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "sideout-menu-footer border-1 border-gray-300 border-x-none algn-self-end mt-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-6 py-4 flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Confirm" })] })) }))] }))] })) }))] }));
+};
+exports.default = SlideoutMenuComponent;