UNPKG

sccoreui

Version:

ui-sccore

22 lines (21 loc) • 29.1 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "check-selected-white" }) })] }))] }))] })); }; exports.default = CheckboxGroupComponent;