sccoreui 2.3.6 → 2.3.7

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/checkbox/checkbox.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const checkbox_1 = require("primereact/checkbox");
+const react_1 = require("react");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const CheckboxComponent = () => {
+    const [checkedBox, setCheckedBox] = (0, react_1.useState)(false);
+    const [checkedCircle, setCheckedCircle] = (0, react_1.useState)(false);
+    const [indeterminateBox, setIndeterminateBox] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Checkbox & Checkcircle" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
+                                            setCheckedBox(e.checked);
+                                        }, checked: checkedBox, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
+                                            setIndeterminateBox(e.checked);
+                                        }, checked: indeterminateBox, icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
+                                            setCheckedCircle(e.checked);
+                                        }, checked: checkedCircle, icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid p-checkcircle", checked: false })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { 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-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
+                                                    setCheckedBox(e.checked);
+                                                }, checked: checkedBox, className: "mt-1", icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (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-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1", icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (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-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
+                                                    setIndeterminateBox(e.checked);
+                                                }, checked: indeterminateBox, className: "mt-1", icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (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-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1", icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hyphen-selected" }) }), (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-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
+                                                    setCheckedCircle(e.checked);
+                                                }, checked: checkedCircle, className: "mt-1 p-checkcircle", icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) }), (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-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1 p-checkcircle", icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) }), (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 = CheckboxComponent;

package/dist/pages/checkbox-group/checkbox-group-component.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const checkbox_1 = require("primereact/checkbox");
+const radiobutton_1 = require("primereact/radiobutton");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const react_1 = require("react");
+require("./checkbox-group-component.scss");
+const Payment_method_card_white_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-card-white.png"));
+const CheckboxGroupComponent = () => {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
+    const handleGroupClick = (e, state) => {
+        e.stopPropagation();
+        if (state === "default") {
+            setIsChecked(!isChecked);
+        }
+    };
+    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: "Checkbox & Radio Button Group" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-wide`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-narrow", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-wide" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-narrow" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-wide`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: isChecked, onChange: () => setIsChecked(!isChecked) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: isChecked, onChange: () => setIsChecked(!isChecked) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-narrow", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-wide" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { disabled: true, checked: false }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-narrow" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { disabled: true, checked: false }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-wide`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, className: "p-checkcircle ml-auto", onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, className: "p-checkcircle", onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-wide" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-narrow" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-wide", onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `flex align-items-center ${isChecked ? "p-header-highlight" : ""} gap-3 p-3` }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `${isChecked ? "text-primary-800" : "text-gray-700"} text-lg font-semibold` }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full m-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex justify-content-between line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "align-self-start bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: `flex flex-column border-round-xl p-checkbox-group group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `flex align-items-center ${isChecked ? "p-header-highlight" : ""} gap-3 p-3` }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `${isChecked ? "text-primary-800" : "text-gray-700"} text-lg font-semibold` }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, className: "p-checkcircle ml-auto", onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full mt-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal flex-order-1 mt-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label flex-order-0 align-self-start" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3 p-header-highlight" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-primary-800 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full m-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex justify-content-between line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "align-self-start bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-narrow", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3 p-header-highlight" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-primary-800 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full mt-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal flex-order-1 mt-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label flex-order-0 align-self-start" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-wide p-group-disabled" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full m-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex justify-content-between line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "align-self-start bg-gray-100 text-gray-700 font-medium border-round-xl text-sm offer-label" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-narrow p-group-disabled" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full mt-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal flex-order-1 mt-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "bg-gray-100 text-gray-700 font-medium border-round-xl text-sm offer-label flex-order-0 align-self-start" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  group-narrow`, 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-lg font-normal line-height-2" }, { children: "Expiry 06/2024" })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (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, { iconName: "check-selected-white" }) })] }))] }))] }));
+};
+exports.default = CheckboxGroupComponent;

package/dist/pages/color-picker/color-picker.js

@@ -0,0 +1,13 @@
+"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 colorpicker_1 = require("primereact/colorpicker");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const ColorPickerComponent = () => {
+    const [color, setColor] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { value: color, onChange: (e) => setColor(e.value) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-0 gap-1", link: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), label: "Add User" })] })));
+};
+exports.default = ColorPickerComponent;

package/dist/pages/content-dividers/content-dividers.js

@@ -0,0 +1,11 @@
+"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 divider_1 = require("primereact/divider");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const ContentDividersComponent = () => {
+    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.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-center justify-content-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-8" }, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "inline-flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-xl text-gray-900 linehight-3 font-medium' }, { children: "Notifications" })) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "inline-flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-base text-gray-600 linehight-3 font-medium' }, { children: "Today" })) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Add', outlined: true }) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center" }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700-md" }), outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-2xl-gray-500" }), outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500-md" }), outlined: true })] })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center" }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: 'View all', outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Active', outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Inactive', outlined: true })] })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-2xl-gray-500" }), outlined: true }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-8" }, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'border-1 py-2 border-x-none divider-top-bottom border-gray-200' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "inline-flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-xl text-gray-900 linehight-3 font-medium' }, { children: "Notifications" })) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'border-1 py-2 border-x-none divider-top-bottom border-gray-200' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "inline-flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-base text-gray-600 linehight-3 font-medium' }, { children: "Today" })) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'border-1 py-2 border-x-none divider-top-bottom border-gray-200' }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Add', outlined: true }) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'border-1 py-2 border-x-none divider-top-bottom border-gray-200' }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700-md" }), outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-2xl-gray-500" }), outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500-md" }), outlined: true })] })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'border-1 py-2 border-x-none divider-top-bottom border-gray-200' }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: 'View all', outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Active', outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Inactive', outlined: true })] })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'border-1 py-2 border-x-none divider-top-bottom border-gray-200' }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-2xl-gray-500" }), outlined: true }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-8" }, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'bg-gray-50 devider-background py-2' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "inline-flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-xl text-gray-900 linehight-3 font-medium' }, { children: "Notifications" })) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'bg-gray-50 devider-background py-2' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "inline-flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-base text-gray-600 linehight-3 font-medium' }, { children: "Today" })) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'bg-gray-50 devider-background py-2' }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Add', outlined: true }) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'bg-gray-50 devider-background py-2' }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700-md" }), outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-2xl-gray-500" }), outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500-md" }), outlined: true })] })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'bg-gray-50 devider-background py-2' }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: 'View all', outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Active', outlined: true }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: 'Inactive', outlined: true })] })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, Object.assign({ align: "center", className: 'bg-gray-50 devider-background py-2' }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-2xl-gray-500" }), outlined: true }) }))] }))] }))] }));
+};
+exports.default = ContentDividersComponent;

package/dist/pages/date-picker/date-picker.js

@@ -0,0 +1,12 @@
+"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 calendar_1 = require("primereact/calendar");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const DatePickerComponent = () => {
+    const [date, setDate] = (0, react_1.useState)(null);
+    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: "Date-Picker" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8 mx-8 px-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { numberOfMonths: 2, value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { numberOfMonths: 2, selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", numberOfMonths: 2, value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", touchUI: true, todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", touchUI: true, todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) }))] }))] }));
+};
+exports.default = DatePickerComponent;

package/dist/pages/dropdown/dropdown-component.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const react_1 = require("react");
+const DropdownComponent = () => {
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)(null);
+    // Dropdown options
+    const members = [
+        { 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 handleDropdownChange = (e) => {
+        setSelectedValue(e.value);
+    };
+    // Item Template to display the options in the dropdown pannel
+    const itemTemplate = (option, isIcon) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })), selectedValue && selectedValue.name === option.name && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-primary-600" }))] })));
+    };
+    // Value Template to display value in the dropdown after selecting an option from the dropdown.
+    const selectedOptionTemplate = (option, isIcon, props) => {
+        if (option) {
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex justify-content-between align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })) })));
+        }
+        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { children: props.placeholder })] })));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Dropdown" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, true, props), placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-invalid", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem p-error mt-2" }, { children: "This is an error message." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { disabled: true, onChange: handleDropdownChange, options: members, optionLabel: "name", placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] }))] }))] }));
+};
+exports.default = DropdownComponent;

package/dist/pages/file-upload/file-upload.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fileupload_1 = require("primereact/fileupload");
+const react_1 = require("react");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const progressbar_1 = require("primereact/progressbar");
+const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
+const checkbox_1 = require("primereact/checkbox");
+require("./file-upload.scss");
+// import { Checkbox } from "primereact/checkbox";
+const FileUploadComponent = () => {
+    const fileupload = (0, react_1.useRef)(null);
+    const fileupload2 = (0, react_1.useRef)(null);
+    const onUpload = () => {
+    };
+    const emptyTemplate = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center flex-column ", onClick: () => {
+                fileupload.current.getInput().click();
+            } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "file-upload-icon-gray-300" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-normal text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold  text-primary-400 text-base" }, { children: "Click to upload" })), "or drag and drop"] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal lign-height-1" }, { children: "SVG, PNG, JPG or GIF (max. 800x400px)" }))] })));
+    };
+    const emptyTemplate2 = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center flex-column ", onClick: () => {
+                fileupload2.current.getInput().click();
+            } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "file-upload-icon-gray-300" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-normal text-base" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold p-disabled text-primary-400 text-base" }, { children: "Click to upload" })), "or drag and drop"] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal lign-height-1" }, { children: "SVG, PNG, JPG or GIF (max. 800x400px)" }))] })));
+    };
+    const emptyTemplatea = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white  align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 100, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [100, "%"] }))] }))] }))] })));
+    };
+    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: "File Upload" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { ref: fileupload, name: "demo[]", url: "/api/upload", accept: "image/*", emptyTemplate: emptyTemplate, itemTemplate: emptyTemplatea, className: "fileuploadd border-round-xl border-1  border-transparent hover:border-primary-600", maxFileSize: 1000000, onUpload: onUpload }), (0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { disabled: true, ref: fileupload2, name: "demo[]", url: "/api/upload", accept: "image/*", emptyTemplate: emptyTemplate2, itemTemplate: emptyTemplate2, className: "fileuploadd border-round-xl border-1  border-transparent", maxFileSize: 1000000, onUpload: onUpload })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start  p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "trash-01-gray-500" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 59, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [59, "%"] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between my-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: 100, className: "w-11" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: [100, "%"] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-red-25 border-1 border-red-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "file-icon-red-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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-medium" }, { children: "Upload failed, please try again" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "trash-01-red-700" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 px-6 flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex  border-1 border-gray-300 align-items-start  p-4 border-round-xl gap-2", style: { background: "linear-gradient(to right, var(--gray-50) 59%, white 41%)" } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { height: 30, value: 59, strokeColor: "var(--primary-500)", strokeWidth: 13, textDisabled: true })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white border-1 border-gray-300 align-items-start p-4 border-round-xl gap-2 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-medium" }, { children: "Tech design requirements.pdf" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: true && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }), className: "p-checkcircle" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-red-25 border-1 border-red-300 align-items-start p-4 border-round-xl gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "file-icon-red-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.jsxs)("section", Object.assign({ className: "w-full flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-medium" }, { children: "Upload failed, please try again" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "trash-01-red-700" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "200 KB \u2013 100% uploaded" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] }))] }))] }))] }))] }));
+};
+exports.default = FileUploadComponent;

package/dist/pages/flex.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const card_1 = require("primereact/card");
+const button_1 = require("primereact/button");
+const chip_1 = require("primereact/chip");
+const svg_component_1 = tslib_1.__importDefault(require("../directives/svg-component"));
+const avatar_png_1 = tslib_1.__importDefault(require("../assets/images/avatar.png"));
+const Flex = () => {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center" }, { children: "P" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2 font-medium" }, { children: "PRIME" }))] }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card" }, { children: (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Asiya Javayant", image: avatar_png_1.default, removable: true }) })));
+};
+exports.default = Flex;