sccoreui 2.2.2 → 2.2.4

package/dist/pages/checkbox/checkbox.js

@@ -1,26 +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 CheckboxCompoent = () => {
-    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", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Checkbox & Checkcircle" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column justify-content-center align-items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex align-items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { 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", { 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", { 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", { className: "flex justify-content-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { 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", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] })] })] })] }));
-};
-exports.default = CheckboxCompoent;
+"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 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,43 @@
+"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 CheckboxGroupComponent = () => {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
+    const handleFocus = (el) => {
+        document.addEventListener("click", () => {
+            el.classList.remove("p-group-focus");
+        });
+    };
+    const handleGroupClick = (e, state) => {
+        e.stopPropagation();
+        const groupElement = e.currentTarget;
+        groupElement.classList.add("p-group-focus");
+        if (state === "default") {
+            if (groupElement.id === "header-group") {
+                const headerElement = groupElement.firstElementChild;
+                headerElement.classList.toggle("p-header-highlight");
+                headerElement.children[1].classList.toggle("text-gray-700");
+                headerElement.children[1].classList.toggle("text-primary-800");
+            }
+            else {
+                groupElement.classList.toggle("p-group-highlight", !isChecked);
+            }
+            setIsChecked(!isChecked);
+        }
+        const groupElements = document.querySelectorAll(".p-checkbox-group");
+        groupElements.forEach((element) => {
+            if (element !== groupElement) {
+                element.classList.remove("p-group-focus");
+            }
+        });
+        handleFocus(groupElement);
+    };
+    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 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 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 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 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 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 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.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)(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 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)(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", 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 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: "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 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: "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." }))] }))] }))] }))] }))] }))] }));
+};
+exports.default = CheckboxGroupComponent;

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

@@ -1,13 +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", { 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;
+"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/dropdown/dropdown-component.js

@@ -1,36 +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", { className: "flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("span", { 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", { className: "font-medium text-gray-900 text-lg", children: option.name }), (0, jsx_runtime_1.jsx)("span", { 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", { className: "flex justify-content-between align-items-center", children: (0, jsx_runtime_1.jsxs)("span", { 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", { className: "font-medium text-gray-900 text-lg", children: option.name }), (0, jsx_runtime_1.jsx)("span", { className: "font-normal text-gray-600 text-lg", children: option.at })] }) }));
-        }
-        return ((0, jsx_runtime_1.jsxs)("span", { 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", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Dropdown" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid px-7 py-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", { 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", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", { 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", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", { className: "font-normal text-base h-1rem p-error mt-2", children: "This is an error message." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { 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", { className: "font-normal text-base h-1rem text-gray-600 mt-2", children: "This is a hint text to help user." })] })] })] }));
-};
-exports.default = DropdownComponent;
+"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/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;

package/dist/pages/home.js

@@ -1,19 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_router_dom_1 = require("react-router-dom");
-const dropdown_component_1 = tslib_1.__importDefault(require("./dropdown/dropdown-component"));
-const input_text_1 = tslib_1.__importDefault(require("./input/input-text"));
-const color_picker_1 = tslib_1.__importDefault(require("./color-picker/color-picker"));
-const toast_1 = tslib_1.__importDefault(require("./toast/toast"));
-const badge_1 = tslib_1.__importDefault(require("./badges/badge"));
-const radio_button_component_1 = tslib_1.__importDefault(require("./radio-button/radio-button-component"));
-const checkbox_1 = tslib_1.__importDefault(require("./checkbox/checkbox"));
-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 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: "/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: "/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: "/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, {}) })] }) }));
-};
-exports.default = Home;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const dropdown_component_1 = tslib_1.__importDefault(require("./dropdown/dropdown-component"));
+const input_text_1 = tslib_1.__importDefault(require("./input/input-text"));
+const color_picker_1 = tslib_1.__importDefault(require("./color-picker/color-picker"));
+const toast_1 = tslib_1.__importDefault(require("./toast/toast"));
+const badge_1 = tslib_1.__importDefault(require("./badges/badge"));
+const checkbox_1 = tslib_1.__importDefault(require("./checkbox/checkbox"));
+const radio_button_component_1 = tslib_1.__importDefault(require("./radio-button/radio-button-component"));
+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 flex_1 = tslib_1.__importDefault(require("./flex"));
+const checkbox_group_component_1 = tslib_1.__importDefault(require("./checkbox-group/checkbox-group-component"));
+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: "/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: "/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, {}) })] }) }));
+};
+exports.default = Home;