sccoreui 2.3.2 → 2.3.3

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

@@ -7,37 +7,15 @@ 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 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." }))] }))] }))] }))] }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Checkbox & Radio Button Group" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-wide`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-narrow", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-wide" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-narrow" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-wide`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: isChecked, onChange: () => setIsChecked(!isChecked) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: isChecked, onChange: () => setIsChecked(!isChecked) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-narrow", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { checked: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-wide" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { disabled: true, checked: false }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-narrow" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { disabled: true, checked: false }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-wide`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, className: "p-checkcircle ml-auto", onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""} group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, className: "p-checkcircle", onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-highlight group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-wide" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-3 p-4 border-round-xl p-checkbox-group p-group-disabled group-narrow" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Basic plan $10/month" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-wide", onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `flex align-items-center ${isChecked ? "p-header-highlight" : ""} gap-3 p-3` }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `${isChecked ? "text-primary-800" : "text-gray-700"} text-lg font-semibold` }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, onChange: () => setIsChecked(!isChecked), className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full m-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex justify-content-between line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "align-self-start bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: `flex flex-column border-round-xl p-checkbox-group group-narrow`, onClick: (e) => handleGroupClick(e, "default") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `flex align-items-center ${isChecked ? "p-header-highlight" : ""} gap-3 p-3` }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `${isChecked ? "text-primary-800" : "text-gray-700"} text-lg font-semibold` }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: isChecked, className: "p-checkcircle ml-auto", onChange: () => setIsChecked(!isChecked), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full mt-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal flex-order-1 mt-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label flex-order-0 align-self-start" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-wide", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3 p-header-highlight" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-primary-800 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full m-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex justify-content-between line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "align-self-start bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-narrow", onClick: (e) => handleGroupClick(e, "checked") }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3 p-header-highlight" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-primary-800 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full mt-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal flex-order-1 mt-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "bg-green-50 text-green-700 font-medium border-round-xl text-sm offer-label flex-order-0 align-self-start" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 align-items-start px-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-wide p-group-disabled" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full m-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex justify-content-between line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "align-self-start bg-gray-100 text-gray-700 font-medium border-round-xl text-sm offer-label" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ id: "header-group", className: "flex flex-column border-round-xl p-checkbox-group group-narrow p-group-disabled" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "featured-icon-stack-disabled" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-lg font-semibold" }, { children: "Basic plan" })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "p-checkcircle ml-auto", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsx)("span", { className: "w-full mt-0", id: "separator" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex flex-column group-text p-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column line-height-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-gray-600 text-base font-normal flex-order-1 mt-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-3xl text-gray-700 font-semibold" }, { children: "$10" })), " ", "per month"] })), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "bg-gray-100 text-gray-700 font-medium border-round-xl text-sm offer-label flex-order-0 align-self-start" }, { children: "Limited time only" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base font-normal" }, { children: "Includes up to 10 users, 20GB individual data and access to all features." }))] }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  group-narrow`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Expiry 06/2024" })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] }))] }))] }));
 };
 exports.default = CheckboxGroupComponent;

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const calendar_1 = require("primereact/calendar");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const DatePickerComponent = () => {
+    const [date, setDate] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Date-Picker" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8 mx-8 px-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { numberOfMonths: 2, value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { numberOfMonths: 2, selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", numberOfMonths: 2, value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", touchUI: true, todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card clo-12 md:col-6 my-8" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { selectionMode: "range", value: date, dateFormat: "M d, yy", clearButtonClassName: "text-gray-700 border-1 border-gray-300", touchUI: true, todayButtonClassName: "bg-primary-600 text-white", showButtonBar: true, onChange: (e) => setDate(e.value), placeholder: "Select dates", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "calendar-gray-700" }), showIcon: true, iconPos: "left" }) }))] }))] }));
+};
+exports.default = DatePickerComponent;

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

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

package/dist/pages/home.js

@@ -19,6 +19,7 @@ const checkbox_group_component_1 = tslib_1.__importDefault(require("./checkbox-g
 const toggle_1 = tslib_1.__importDefault(require("./toggle/toggle"));
 const chart_1 = tslib_1.__importDefault(require("./chart/chart"));
 const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
+const loader_indicator_1 = tslib_1.__importDefault(require("./loader-indicator/loader-indicator"));
 const pagination_1 = tslib_1.__importDefault(require("../pages/paginator/pagination"));
 const shadows_1 = tslib_1.__importDefault(require("../pages/shadows/shadows"));
 const progress_steps_1 = tslib_1.__importDefault(require("./progress-steps/progress-steps"));
@@ -26,7 +27,12 @@ const tabs_1 = tslib_1.__importDefault(require("./tabs/tabs"));
 const breadcrumb_1 = tslib_1.__importDefault(require("./breadcrumb/breadcrumb"));
 const button_1 = tslib_1.__importDefault(require("./button/button"));
 const button_group_1 = tslib_1.__importDefault(require("./button-group/button-group"));
+const date_picker_1 = tslib_1.__importDefault(require("./date-picker/date-picker"));
+const file_upload_1 = tslib_1.__importDefault(require("./file-upload/file-upload"));
+const table_1 = tslib_1.__importDefault(require("./tabels/table"));
+const slideout_menus_1 = tslib_1.__importDefault(require("./slideout-menus/slideout-menus"));
+const content_dividers_1 = tslib_1.__importDefault(require("./content-dividers/content-dividers"));
 const Home = () => {
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button", element: (0, jsx_runtime_1.jsx)(button_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button-group", element: (0, jsx_runtime_1.jsx)(button_group_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slider", element: (0, jsx_runtime_1.jsx)(slider_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/charts", element: (0, jsx_runtime_1.jsx)(chart_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/shadow", element: (0, jsx_runtime_1.jsx)(shadows_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/pagination", element: (0, jsx_runtime_1.jsx)(pagination_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-steps", element: (0, jsx_runtime_1.jsx)(progress_steps_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tabs", element: (0, jsx_runtime_1.jsx)(tabs_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "breadcrumbs", element: (0, jsx_runtime_1.jsx)(breadcrumb_1.default, {}) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button", element: (0, jsx_runtime_1.jsx)(button_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button-group", element: (0, jsx_runtime_1.jsx)(button_group_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slider", element: (0, jsx_runtime_1.jsx)(slider_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/charts", element: (0, jsx_runtime_1.jsx)(chart_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/shadow", element: (0, jsx_runtime_1.jsx)(shadows_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/pagination", element: (0, jsx_runtime_1.jsx)(pagination_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-steps", element: (0, jsx_runtime_1.jsx)(progress_steps_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tabs", element: (0, jsx_runtime_1.jsx)(tabs_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tables", element: (0, jsx_runtime_1.jsx)(table_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "breadcrumbs", element: (0, jsx_runtime_1.jsx)(breadcrumb_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/date-picker", element: (0, jsx_runtime_1.jsx)(date_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/file-upload", element: (0, jsx_runtime_1.jsx)(file_upload_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/loader-indicator", element: (0, jsx_runtime_1.jsx)(loader_indicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slideout-menus", element: (0, jsx_runtime_1.jsx)(slideout_menus_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/content-dividers", element: (0, jsx_runtime_1.jsx)(content_dividers_1.default, {}) })] }) }));
 };
 exports.default = Home;

package/dist/pages/input/input-text.js

@@ -62,19 +62,19 @@ const InputComponent = () => {
     const countryOptionTemplate = (item) => {
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: item.name, src: item.img }) })));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column h-full w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "email", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900 ", onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column h-full w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "email", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900 ", onChange: (e) => {
                                                         setEmailValue(e.target.value);
                                                     } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email1", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "text-lg w-full font-normal text-gray-500 hover:text-gray-900", onChange: (e) => {
                                                         setEmailValue(e.target.value);
                                                     } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-error w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "email2", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal p-invalid text-gray-500 hover:text-gray-900 ", onChange: (e) => {
                                                         setEmailValue(e.target.value);
-                                                    } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter valid email adress" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email", onChange: (e) => {
+                                                    } })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter valid email adress" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email", onChange: (e) => {
                                                         setEmailValue(e.target.value);
-                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-disabled  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "Email1", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "text-lg w-full font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-invalid  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email2", onChange: (e) => {
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left p-disabled p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "Email1", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "text-lg w-full font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-left p-invalid p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email2", onChange: (e) => {
                                                         setEmailValue(e.target.value);
-                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full p-invalid text-lg font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter a valid email address." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-inputgroup-addon border-round-left w-5rem" }, { children: "http://" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: websiteLink, onChange: (e) => {
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full p-invalid text-lg font-normal text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter a valid email address." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-inputgroup-addon border-round-left w-5rem" }, { children: "http://" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: websiteLink, onChange: (e) => {
                                                                 setWebsiteLink(e.target.value);
-                                                            }, id: "Website", "aria-describedby": "username-help", placeholder: "Enter url here", className: "w-full font-normal  text-lg border-noround-left text-gray-500 hover:text-gray-900 " })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-inputgroup-addon border-round-left text-gray-600 w-5rem" }, { children: "http://" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "Website1", "aria-describedby": "username-help", placeholder: "Enter url here", className: "w-full font-normal  text-lg border-noround-left text-gray-500 hover:text-gray-900 " })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: websiteLink, onChange: (e) => {
+                                                            }, id: "Website", "aria-describedby": "username-help", placeholder: "Enter url here", className: "w-full font-normal  text-lg border-noround-left text-gray-500 hover:text-gray-900 " })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website1", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-inputgroup-addon border-round-left text-gray-600 w-5rem" }, { children: "http://" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "Website1", "aria-describedby": "username-help", placeholder: "Enter url here", className: "w-full font-normal  text-lg border-noround-left text-gray-500 hover:text-gray-900 " })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-600 mt-1" }, { children: "This is a hint text to help user." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Website2", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Website" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " p-input-icon-right border-noround-left w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: websiteLink, onChange: (e) => {
                                                                 setWebsiteLink(e.target.value);
                                                             }, id: "Website2", placeholder: "Enter text here", className: "w-full border-noround-right text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button p-component text-base text-gray-700 border-left-none font-semibold gap-1 p-button-outlined flex justify-content-center", outlined: true, onClick: () => {
                                                         navigator.clipboard.writeText(websiteLink);

package/dist/pages/loader-indicator/loader-indicator.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./loader-indicator.scss");
+const LoaderIndicatorComponent = () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Loader-Indicator" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex " }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation absolute z-3", style: { width: "28px", height: "28px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "block", style: { width: "28px", height: "28px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animatio", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", style: { stroke: "var(--gray-100)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation absolute z-3", style: { width: "42px", height: "42px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "block", style: { width: "42px", height: "42px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animatio", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", style: { stroke: "var(--gray-100)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation absolute z-3", style: { width: "50px", height: "50px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "block", style: { width: "50px", height: "50px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animatio", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", style: { stroke: "var(--gray-100)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation", style: { width: "28px", height: "28px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation", style: { width: "42px", height: "42px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Loading..." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "pl-8 flex align-items-center flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "svgAnimation", style: { width: "50px", height: "50px" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "", viewBox: "22 22 44 44" }, { children: (0, jsx_runtime_1.jsx)("circle", { className: "animation", cx: "44", cy: "44", r: "17.2", fill: "none", "stroke-width": "6", stroke: "#000000", style: { strokeLinecap: "round", stroke: "var(--primary-600)" } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 text-lg font-medium" }, { children: "Loading..." }))] }))] })) }))] }));
+};
+exports.default = LoaderIndicatorComponent;

package/dist/pages/paginator/pagination.js

@@ -28,7 +28,6 @@ function TemplateDemo() {
             return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white  border-none  mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
         },
         PageLinks: (options) => {
-            console.log(options);
             if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
                 const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
                 return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));

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

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const progressbar_1 = require("primereact/progressbar");
 const react_1 = require("react");
 const slider_1 = require("primereact/slider");
+const circle_progress_bar_1 = tslib_1.__importDefault(require("../progress_bar_round/circle-progress-bar"));
+const half_circle_progres_bar_1 = tslib_1.__importDefault(require("../progress_bar_round/half-circle-progres-bar"));
 require("./progress-bar.scss");
 const ProgressBarComponent = () => {
     const [value, setValue] = (0, react_1.useState)("");
@@ -19,6 +22,6 @@ const ProgressBarComponent = () => {
                                             left: `${value}%`,
                                             transition: "left 1s ease-in-out",
                                             transform: "translate(-50%, -50%)",
-                                        }, className: "p-progress-value h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) }))] })) }))] }));
+                                        }, className: "p-progress-value h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
 };
 exports.default = ProgressBarComponent;