sccoreui 5.8.21 → 5.8.22

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

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

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

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

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

@@ -1,11 +0,0 @@
-"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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "plus-icon-2xl-gray-500" }), outlined: true }) }))] }))] }))] }));
-};
-exports.default = ContentDividersComponent;

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

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const color_picker_1 = tslib_1.__importDefault(require("../../components/custom-color-picker/color-picker"));
-const CustomColorPickerPage = () => {
-    const onchange = (clr) => {
-        console.log(clr);
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(color_picker_1.default, { defaultValue: "#2842AD", onChange: onchange }) }));
-};
-exports.default = CustomColorPickerPage;

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

@@ -1,20 +0,0 @@
-"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 date_picker_1 = tslib_1.__importDefault(require("../../components/date-picker/date-picker"));
-const DatePickerComponent = () => {
-    const [date, setDate] = (0, react_1.useState)(null);
-    const [dateValue, setDateValue] = (0, react_1.useState)(null);
-    const dateUpdated = (e) => {
-        setDateValue(e.value);
-    };
-    const onClearDate = () => {
-        setDateValue(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, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (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, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (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, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (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, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (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, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (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, { icon: "calendar-gray-700" }), showIcon: true, iconPos: "left", className: "w-9rem" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex" }, { children: (0, jsx_runtime_1.jsx)(date_picker_1.default, { showIcon: true, maxDate: new Date, value: dateValue, clear: "x-close", iconPos: "left", icon: 'calendar-gray-700', numberOfMonths: 2, dateFormat: 'M d, yy', selectionMode: 'range', placeholder: 'Select a date', onClear: onClearDate, onChange: (e) => dateUpdated(e), className: "w-9rem" }) }))] }))] }));
-};
-exports.default = DatePickerComponent;

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

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const dropdown_1 = require("primereact/dropdown");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const react_1 = require("react");
-const svg_component_2 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const svg_icons_1 = require("../../directives/svg-icons");
-const DropdownComponent = () => {
-    const [selectedValue, setSelectedValue] = (0, react_1.useState)(null);
-    // Dropdown options
-    const members = [
-        { name: "Phoenix Baker", at: "@phoenix" },
-        { name: "Olivia Rhye", at: "@olivia" },
-        { name: "Lana Steiner", at: "@lana" },
-        { name: "Demi Wilkinson", at: "@demi" },
-        { name: "Candice Wu", at: "@candice" },
-        { name: "Natali Craig", at: "@natali" },
-        { name: "Drew Cano", at: "@drew" },
-    ];
-    const handleDropdownChange = (e) => {
-        setSelectedValue(e.value);
-    };
-    console.log(selectedValue);
-    // Item Template to display the options in the dropdown pannel
-    const itemTemplate = (option, isIcon) => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.name === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name) && ((0, jsx_runtime_1.jsx)(svg_component_2.default, { icon: "dropdown-panel-check" })) })] })));
-    };
-    // Value Template to display value in the dropdown after selecting an option from the dropdown.
-    const selectedOptionTemplate = (option, isIcon, props) => {
-        if (option) {
-            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex justify-content-between align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })) })));
-        }
-        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "user" }), (0, jsx_runtime_1.jsx)("span", { children: props.placeholder })] })));
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Dropdown" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-dropdown-xl flex align-items-center pp-check", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, true, props), placeholder: "Select team member", className: "w-20rem p-dropdown-md flex align-items-center", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-invalid flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem p-error mt-2" }, { children: "This is an error message." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { disabled: true, onChange: handleDropdownChange, options: members, optionLabel: "name", placeholder: "Select team member", className: "w-20rem flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full h-full flex flex-wrap gap-4" }, { children: svg_icons_1.iconList.map((each) => ((0, jsx_runtime_1.jsx)(svg_component_2.default, { icon: each.name }))) }))] }));
-};
-exports.default = DropdownComponent;

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

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const fileupload_1 = require("primereact/fileupload");
-const react_1 = require("react");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const progressbar_1 = require("primereact/progressbar");
-const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
-const checkbox_1 = require("primereact/checkbox");
-require("./file-upload.scss");
-const button_1 = require("primereact/button");
-// 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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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)("div", Object.assign({ className: "flex align-items-start justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex flex-column 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)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "200 KB" }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "shadow-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-gray-500" }) })] })), (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, { icon: "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, { icon: "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, { icon: "file-icon-red-100" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "w-full flex flex-column 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)("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.jsx)(button_1.Button, { text: true, className: "p-button-danger shadow-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "trash-01-red-700" }) })] })) }))] }))] })), (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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "trash-01-red-700" })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "200 KB \u2013 100% uploaded" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-red-700 line-height-2 font-normal my-1" }, { children: "Try again" }))] }))] }))] }))] }))] }));
-};
-exports.default = FileUploadComponent;

package/dist/pages/flex.js

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

package/dist/pages/formulaTemplate/formulaTemplate.js

@@ -1,154 +0,0 @@
-"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 FormulaCoponent_1 = tslib_1.__importDefault(require("../../components/formula-template/FormulaCoponent"));
-const FormulaTemplatePage = () => {
-    const [formulaValue, setFormulaValue] = (0, react_1.useState)('');
-    const [conditionValue, setConditionValue] = (0, react_1.useState)(1);
-    const options = [
-        {
-            label: "Increase by value",
-            value: 1,
-            optionType: "INCREASE_BY_VALUE"
-        },
-        {
-            label: "Decrease by value",
-            value: 2,
-            optionType: "DECREASE_BY_VALUE"
-        },
-        {
-            label: "Increase by percentage",
-            value: 3,
-            optionType: "INCREASE_BY_PERCENTAGE"
-        },
-        {
-            label: "Decrease by percentage",
-            value: 4,
-            optionType: "DECREASE_BY_PERCENTAGE"
-        },
-        {
-            label: "Manual",
-            value: 5,
-            optionType: "MANUAL"
-        },
-        {
-            label: "Calculation",
-            value: 6,
-            optionType: "CALCULATION"
-        },
-    ];
-    const attributes = [
-        {
-            id: '660ab8748140c009b0af99a2',
-            name: 'Test1',
-            code: '34sdf',
-            price: 46
-        },
-        {
-            id: '660abaee8140c009b0afa3ef',
-            name: 'Test2',
-            code: 't34sdf',
-            price: 4
-        },
-        {
-            id: '660ab8b68140c009b0af99e5',
-            name: 'Test3',
-            code: 'dshbf',
-            price: 6
-        },
-        {
-            id: '660abace8140c009b0afa38a',
-            name: 'Test4',
-            code: '323sdf',
-            price: 56
-        },
-        {
-            id: '660abb0e8140c009b0afa445',
-            name: 'Test5',
-            code: '30edf',
-            price: 44
-        },
-        {
-            id: '660ac2ad8140c009b0afb62a',
-            name: 'Test6',
-            code: '343sdf',
-            price: 36
-        },
-        {
-            id: '660b9bf61419c4260d0dece0',
-            name: 'Test11',
-            code: '34sdf',
-            price: 465
-        },
-        {
-            id: '660b9c2c1419c4260d0def73',
-            name: 'Test22',
-            code: 't34sdf',
-            price: 646
-        },
-        {
-            id: '660b9eaf1419c4260d0e0333',
-            name: 'Test33',
-            code: 'dshbf',
-            price: 456
-        },
-        {
-            id: '660b9f751419c4260d0e0678',
-            name: 'Test44',
-            code: '323sdf',
-            price: 467
-        },
-        {
-            id: '660ba268026002d87aa44ce4',
-            name: 'Test55',
-            code: '30edf',
-            price: 4699
-        },
-        {
-            id: '660ba2c2026002d87aa44d42',
-            name: 'Test66',
-            code: '343sdf',
-            price: 1426
-        },
-        {
-            id: '660bb99f330a4e29b2aaba9f',
-            name: 'Test111',
-            code: '34sdf',
-            price: 4436
-        },
-        {
-            id: '660bb9cd330a4e29b2aababd',
-            name: 'Test222',
-            code: 't34sdf',
-            price: 426
-        },
-        {
-            id: '660bb9ed330a4e29b2aabb18',
-            name: 'Test333',
-            code: 'dshbf',
-            price: 146
-        },
-        {
-            id: '660bbe3c330a4e29b2aacf2f',
-            name: 'Test444',
-            code: '323sdf',
-            price: 246
-        },
-        {
-            id: '660bbfcf330a4e29b2aad278',
-            name: 'Test555',
-            code: '30edf',
-            price: 346
-        },
-        {
-            id: '660bbfdf330a4e29b2aad29a',
-            name: 'Test666',
-            code: '343sdf',
-            price: 746
-        }
-    ];
-    return ((0, jsx_runtime_1.jsx)(FormulaCoponent_1.default, { onConditionChange: (payload) => { setConditionValue(payload.value); }, conditionValue: conditionValue, inputValue: null, onChange: (e) => { console.log(e); }, formulaValue: formulaValue, formulaElemectPlaceholder: "Configure Value", onSaveFormula: (value) => setFormulaValue(value), formulaOperators: ["addition", "subtraction", "multiplication", "division", "percentile", "openBracket", "closeBracket"], fieldFilterEmptyMessage: 'No Results Found!', fieldFilterOption: 'name', fieldOptions: attributes, fieldOptionTemplateTitle: 'Price Fields', fieldOptionFilterPlaceholder: "Search by name or code", fieldFilter: true, options: options }));
-};
-exports.default = FormulaTemplatePage;

package/dist/pages/frolaTextEditor/froala-text-editor.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const FroalaEditor_1 = tslib_1.__importDefault(require("../../components/froala-editor/FroalaEditor"));
-const FroalaTextEditorPage = () => {
-    const onchange = (content) => {
-        console.log(content);
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(FroalaEditor_1.default, { maxLength: 255, id: "Froala_text_editor", placeholderText: "Type here", value: "Test Froala text editor", onChange: onchange }) }));
-};
-exports.default = FroalaTextEditorPage;

package/dist/pages/home.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_router_dom_1 = require("react-router-dom");
-const dropdown_component_1 = tslib_1.__importDefault(require("./dropdown/dropdown-component"));
-const input_text_1 = tslib_1.__importDefault(require("./input/input-text"));
-const color_picker_1 = tslib_1.__importDefault(require("./color-picker/color-picker"));
-const toast_1 = tslib_1.__importDefault(require("./toast/toast"));
-const badge_1 = tslib_1.__importDefault(require("./badges/badge"));
-const checkbox_1 = tslib_1.__importDefault(require("./checkbox/checkbox"));
-const radio_button_component_1 = tslib_1.__importDefault(require("./radio-button/radio-button-component"));
-const tags_1 = tslib_1.__importDefault(require("./tags/tags"));
-const progress_bar_1 = tslib_1.__importDefault(require("./progress-bar/progress-bar"));
-const avatar_1 = tslib_1.__importDefault(require("./avatar/avatar"));
-const slider_1 = tslib_1.__importDefault(require("./sliders/slider"));
-const flex_1 = tslib_1.__importDefault(require("./flex"));
-const checkbox_group_component_1 = tslib_1.__importDefault(require("./checkbox-group/checkbox-group-component"));
-const toggle_1 = tslib_1.__importDefault(require("./toggle/toggle"));
-const chart_1 = tslib_1.__importDefault(require("./chart/chart"));
-const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
-const 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("../pages/progress-steps/progress-steps"));
-const tabs_1 = tslib_1.__importDefault(require("./tabs/tabs"));
-const breadcrumb_1 = tslib_1.__importDefault(require("./breadcrumb/breadcrumb"));
-const button_1 = tslib_1.__importDefault(require("./button/button"));
-const button_group_1 = tslib_1.__importDefault(require("./button-group/button-group"));
-const 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 mega_menu_1 = tslib_1.__importDefault(require("./mega-mennu/mega-menu"));
-const not_found_1 = tslib_1.__importDefault(require("./not-found/not-found"));
-const multi_select_dropdown_1 = tslib_1.__importDefault(require("./multi-select-dropdown/multi-select-dropdown"));
-const froala_text_editor_1 = tslib_1.__importDefault(require("./frolaTextEditor/froala-text-editor"));
-const treedropdowselect_1 = tslib_1.__importDefault(require("./treeDropdownSelect/treedropdowselect"));
-const custom_color_picker_1 = tslib_1.__importDefault(require("./custom-color-picker/custom-color-picker"));
-const listboxdropdown_1 = tslib_1.__importDefault(require("./list-box-dropdown/listboxdropdown"));
-const formulaTemplate_1 = tslib_1.__importDefault(require("./formulaTemplate/formulaTemplate"));
-const AgGrid_1 = tslib_1.__importDefault(require("./aggrid/AgGrid"));
-const Home = () => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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: '/text-editor', element: (0, jsx_runtime_1.jsx)(froala_text_editor_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, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/mega-menu", element: (0, jsx_runtime_1.jsx)(mega_menu_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/not-found", element: (0, jsx_runtime_1.jsx)(not_found_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/multi-select-dropdown", element: (0, jsx_runtime_1.jsx)(multi_select_dropdown_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tree-dropdown-select", element: (0, jsx_runtime_1.jsx)(treedropdowselect_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/custom-color-picker", element: (0, jsx_runtime_1.jsx)(custom_color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/list-box-dropdown", element: (0, jsx_runtime_1.jsx)(listboxdropdown_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/formula-template", element: (0, jsx_runtime_1.jsx)(formulaTemplate_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/ag-grid", element: (0, jsx_runtime_1.jsx)(AgGrid_1.default, {}) })] }) }) }));
-};
-exports.default = Home;