sccoreui 2.2.8 → 2.3.0

package/dist/pages/chart/chart.js

@@ -0,0 +1,257 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chart_1 = require("primereact/chart");
+const ChartsComponent = () => {
+    /// chart 1 states ++++++++++++++++++++++++++++++++++++
+    const [chartData, setChartData] = (0, react_1.useState)({});
+    const [chartOptions, setChartOptions] = (0, react_1.useState)({});
+    /// chart 2 states ++++++++++++++++++++++++++++++++++++
+    const [chartData2, setChartData2] = (0, react_1.useState)({});
+    const [chartOptions2, setChartOptions2] = (0, react_1.useState)({});
+    /// chart 3 states ++++++++++++++++++++++++++++++++++++
+    const [chartData3, setChartData3] = (0, react_1.useState)({});
+    const [chartOptions3, setChartOptions3] = (0, react_1.useState)({});
+    // chart 4 states +++++++++++++++++++++++++++++++++
+    const [chartData4, setChartData4] = (0, react_1.useState)({});
+    const [chartOptions4, setChartOptions4] = (0, react_1.useState)({});
+    // chart1 data+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+    (0, react_1.useEffect)(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue("--text-color");
+        const textColorSecondary = documentStyle.getPropertyValue("--gray-700");
+        const surfaceBorder = documentStyle.getPropertyValue("--surface-border");
+        const data = {
+            labels: [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec",
+            ],
+            datasets: [
+                {
+                    type: "bar",
+                    label: "Dataset 2",
+                    backgroundColor: documentStyle.getPropertyValue("--primary-700"),
+                    data: [21, 84, 24, 75, 37, 65, 34, 100, 34, 100, 22, 400],
+                },
+                {
+                    type: "bar",
+                    label: "Dataset 1",
+                    backgroundColor: documentStyle.getPropertyValue("--primary-500"),
+                    data: [50, 25, 12, 48, 90, 76, 42, 32, 36, 36, 36, 36, 36],
+                },
+                {
+                    type: "bar",
+                    label: "Dataset 3",
+                    backgroundColor: documentStyle.getPropertyValue("--primary-300"),
+                    data: [41, 52, 24, 74, 23, 21, 32, 12, 24, 14, 24, 34, 29],
+                },
+            ],
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                tooltips: {
+                    mode: "index",
+                    intersect: true,
+                },
+                legend: {
+                    labels: {
+                        color: textColor,
+                    },
+                },
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary,
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                    },
+                },
+                y: {
+                    max: 400,
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary,
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                    },
+                },
+            },
+        };
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+    //chart2 data++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+    (0, react_1.useEffect)(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue("--text-color");
+        const textColorSecondary = documentStyle.getPropertyValue("--text-color-secondary");
+        const surfaceBorder = documentStyle.getPropertyValue("--surface-border");
+        const data = {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [
+                {
+                    label: "First Dataset",
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue("--primary-600"),
+                },
+                {
+                    label: "Second Dataset",
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue("--primary-400"),
+                },
+                {
+                    label: "Third Dataset",
+                    data: [12, 51, 62, 33, 21, 62, 45],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue("--primary-800"),
+                    tension: 0.4,
+                },
+            ],
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor,
+                    },
+                },
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                    },
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary,
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                    },
+                },
+            },
+        };
+        setChartData2(data);
+        setChartOptions2(options);
+    }, []);
+    //chart3 data ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+    (0, react_1.useEffect)(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ["A", "B", "C"],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue("--primary-500"),
+                        documentStyle.getPropertyValue("--primary-600"),
+                        documentStyle.getPropertyValue("--primary-100"),
+                    ],
+                    hoverBackgroundColor: [
+                        documentStyle.getPropertyValue("--primary-500"),
+                        documentStyle.getPropertyValue("--primary-600"),
+                        documentStyle.getPropertyValue("--primary-100"),
+                    ],
+                },
+            ],
+        };
+        const options = {
+            cutout: "60%",
+        };
+        setChartData3(data);
+        setChartOptions3(options);
+    }, []);
+    //Chart4 data ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+    (0, react_1.useEffect)(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue("--text-color");
+        const textColorSecondary = documentStyle.getPropertyValue("--gray-100");
+        const data = {
+            labels: [
+                "Eating",
+                "Drinking",
+                "Sleeping",
+                "Designing",
+                "Coding",
+                "Cycling",
+                "Running",
+            ],
+            datasets: [
+                {
+                    label: "My First dataset",
+                    borderColor: documentStyle.getPropertyValue("--pink-500"),
+                    pointBackgroundColor: documentStyle.getPropertyValue("--pink-500"),
+                    pointBorderColor: documentStyle.getPropertyValue("--pink-500"),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue("--pink-500"),
+                    data: [65, 59, 90, 81, 56, 55, 40],
+                },
+                {
+                    label: "My Second dataset",
+                    borderColor: documentStyle.getPropertyValue("--primary-600"),
+                    pointBackgroundColor: documentStyle.getPropertyValue("--primary-600"),
+                    pointBorderColor: documentStyle.getPropertyValue("--primary-600"),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue("--primary-600"),
+                    data: [28, 48, 40, 19, 96, 27, 100],
+                },
+                {
+                    label: "My Third dataset",
+                    borderColor: documentStyle.getPropertyValue("--teal-300"),
+                    pointBackgroundColor: documentStyle.getPropertyValue("--teal-300"),
+                    pointBorderColor: documentStyle.getPropertyValue("--teal-300"),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue("--teal-300"),
+                    data: [70, 89, 30, 39, 100, 72, 40],
+                },
+            ],
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor,
+                    },
+                },
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: textColorSecondary,
+                    },
+                },
+            },
+        };
+        setChartData4(data);
+        setChartOptions4(options);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8 mx-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "-rotate-90 text-gray-600 w-6rem my-1 font-medium text-sm" }, { children: "Active users" })), (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "bar", className: "w-full", data: chartData, options: chartOptions })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card w-full" }, { children: (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "line", className: "w-full", data: chartData2, options: chartOptions2 }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card w-full" }, { children: (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "doughnut", data: chartData3, options: chartOptions3, className: "w-full md:w-30rem" }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-6 flex align-items-center p-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card w-full" }, { children: (0, jsx_runtime_1.jsx)(chart_1.Chart, { type: "radar", data: chartData4, options: chartOptions4, className: "w-full md:w-30rem" }) })) }))] })) })));
+};
+exports.default = ChartsComponent;

package/dist/pages/home.js

@@ -13,11 +13,20 @@ const radio_button_component_1 = tslib_1.__importDefault(require("./radio-button
 const tags_1 = tslib_1.__importDefault(require("./tags/tags"));
 const progress_bar_1 = tslib_1.__importDefault(require("./progress-bar/progress-bar"));
 const avatar_1 = tslib_1.__importDefault(require("./avatar/avatar"));
+const slider_1 = tslib_1.__importDefault(require("./sliders/slider"));
 const flex_1 = tslib_1.__importDefault(require("./flex"));
 const checkbox_group_component_1 = tslib_1.__importDefault(require("./checkbox-group/checkbox-group-component"));
 const toggle_1 = tslib_1.__importDefault(require("./toggle/toggle"));
+const chart_1 = tslib_1.__importDefault(require("./chart/chart"));
 const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
+const pagination_1 = tslib_1.__importDefault(require("../pages/paginator/pagination"));
+const shadows_1 = tslib_1.__importDefault(require("../pages/shadows/shadows"));
+const progress_steps_1 = tslib_1.__importDefault(require("./progress-steps/progress-steps"));
+const tabs_1 = tslib_1.__importDefault(require("./tabs/tabs"));
+const breadcrumb_1 = tslib_1.__importDefault(require("./breadcrumb/breadcrumb"));
+const button_1 = tslib_1.__importDefault(require("./button/button"));
+const button_group_1 = tslib_1.__importDefault(require("./button-group/button-group"));
 const Home = () => {
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button", element: (0, jsx_runtime_1.jsx)(button_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button-group", element: (0, jsx_runtime_1.jsx)(button_group_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slider", element: (0, jsx_runtime_1.jsx)(slider_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/charts", element: (0, jsx_runtime_1.jsx)(chart_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/shadow", element: (0, jsx_runtime_1.jsx)(shadows_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/pagination", element: (0, jsx_runtime_1.jsx)(pagination_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-steps", element: (0, jsx_runtime_1.jsx)(progress_steps_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tabs", element: (0, jsx_runtime_1.jsx)(tabs_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "breadcrumbs", element: (0, jsx_runtime_1.jsx)(breadcrumb_1.default, {}) })] }) }));
 };
 exports.default = Home;

package/dist/pages/paginator/pagination.js

@@ -0,0 +1,123 @@
+"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-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, 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-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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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-steps/progress-steps.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const steps_1 = require("primereact/steps");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const generateTemplate = (icon, label, optionalText) => ((0, jsx_runtime_1.jsxs)("a", Object.assign({ href: "#", className: "flex flex-column justify-content-end gap-3 align-items-center z-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: icon }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column justify-content-center align-items-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: optionalText }))] }))] })));
+const itemsDefault = [
+    {
+        label: "Personal Details",
+    },
+    {
+        label: "Company Details",
+    },
+    {
+        label: "Confirmation",
+    },
+];
+const stepItemsBasic = [
+    {
+        template: generateTemplate("step-checked", "Your Details", "Please provide your name and email"),
+    },
+    {
+        template: generateTemplate("step-current", "Company Details", "A few details about your company"),
+    },
+    {
+        template: generateTemplate("step-unvisited", "Invite Your Team", "Start collaborating with your team"),
+    },
+];
+const stepItemsOutline = [
+    {
+        template: generateTemplate("step-checked-outline", "Your Details", "Please provide your name and email"),
+    },
+    {
+        template: generateTemplate("step-current-outline", "Company Details", "A few details about your company"),
+    },
+    {
+        template: generateTemplate("step-unvisited-outline", "Invite Your Team", "Start collaborating with your team"),
+    },
+];
+const ProgressStepsComponent = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsx)(steps_1.Steps, { model: itemsDefault, readOnly: false }), (0, jsx_runtime_1.jsx)(steps_1.Steps, { model: stepItemsBasic, readOnly: false }), (0, jsx_runtime_1.jsx)(steps_1.Steps, { model: stepItemsOutline, readOnly: false })] })));
+};
+exports.default = ProgressStepsComponent;

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/sliders/slider.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const slider_1 = require("primereact/slider");
+function SliderComponent() {
+    const [value, setValue] = (0, react_1.useState)([10, 10]);
+    console.log(value);
+    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: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex mt-8 flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }) })), (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: "relative w-full " }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[0]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-lg" }, { children: [value[0], "%"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[1]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-lg" }, { children: [value[1], "%"] }))] })) })), (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: "relative w-full" }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[0]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white border-gray-200 py-2 flex align-items-center text-center text-lg" }, { children: [value[0], "%"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        position: "absolute",
+                                        height: "34px",
+                                        top: -35,
+                                        alignSelf: "stretch",
+                                        left: `${value[1]}%`,
+                                        transform: "translate(-50%, -50%)",
+                                    }, className: "px-3 bg-white  border-gray-200 py-2 flex align-items-center  text-center text-lg" }, { children: [value[1], "%"] }))] })) }))] }))] }));
+}
+exports.default = SliderComponent;

package/dist/pages/tabs/tabs.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tabview_1 = require("primereact/tabview");
+require("./tabs.scss");
+const TabsComponent = () => {
+    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: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
+};
+exports.default = TabsComponent;

package/dist/pages/toggle/toggle.js

@@ -5,6 +5,6 @@ const inputswitch_1 = require("primereact/inputswitch");
 const react_1 = require("react");
 const ToggleSwitch = () => {
     const [isChecked, setIsChecked] = (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 mt-0 mb-4" }, { children: "Toggle Switch" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-5 mb-5 p-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-inputswitch-dark" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "p-inputswitch-dark" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "p-inputswitch-dark" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid p-inputswitch-dark" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid p-inputswitch-light" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1 p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1 p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1 p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid p-inputswitch-dark" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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." }))] }))] }))] }))] }))] }));
+    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: "Toggle Switch" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-5 mb-5 p-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked) }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 mb-5" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "p-inputswitch-light" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "p-invalid p-inputswitch-light" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, disabled: true, className: "mt-1 p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: false, className: "mt-1 p-invalid p-inputswitch-light" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ 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 = ToggleSwitch;