sccoreui 2.2.2 → 2.2.4

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

@@ -1,109 +1,109 @@
-"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 inputtext_1 = require("primereact/inputtext");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const react_1 = require("react");
-const button_1 = require("primereact/button");
-const demoImage_png_1 = tslib_1.__importDefault(require("../../assets/images/demoImage.png"));
-const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
-require("./input-text.scss");
-const inputnumber_1 = require("primereact/inputnumber");
-const inputtextarea_1 = require("primereact/inputtextarea");
-const chips_1 = require("primereact/chips");
-const InputComponent = () => {
-    // email value state for email input compoenent
-    const [emailValue, setEmailValue] = (0, react_1.useState)("");
-    // website state value for website input compoenent
-    const [websiteLink, setWebsiteLink] = (0, react_1.useState)("");
-    //card number state for card number input component
-    const [cardNumber, setCardNumber] = (0, react_1.useState)(null);
-    // state for text area input compoenent
-    const [textAreaValue, setTextAreaValue] = (0, react_1.useState)("");
-    //state for chips input compoenent
-    const [value, setValue] = (0, react_1.useState)([]);
-    //currency selection state for sale amout input component
-    const [selectedCurrency, setSelectedCurrency] = (0, react_1.useState)({
-        name: "USD",
-        code: "USD",
-        currency: "dollar",
-    });
-    // selected country state for phone number input compoenent
-    const [selectedCountry, setSelectedCountry] = (0, react_1.useState)({
-        name: "Australia",
-        code: "AU",
-        img: label_image_png_1.default,
-    });
-    /// curriencies select drop down for sale amount dropdow componet
-    const currencies = [
-        { name: "USD", code: "USD", currency: "dollar" },
-        { name: "INR", code: "INR", currency: "pound" },
-        { code: "AFN", name: "AFN", currency: "pound" },
-        { code: "ALL", name: "ALL", currency: "pound" },
-        { code: "DZD", name: "DZD", currency: "pound" },
-    ];
-    //countries option dropdown for phone number country selection component
-    const countries = [
-        { name: "Australia", code: "AU", img: label_image_png_1.default },
-        { name: "Brazil", code: "BR", img: demoImage_png_1.default },
-        { name: "China", code: "CN", img: demoImage_png_1.default },
-        { name: "Egypt", code: "EG", img: demoImage_png_1.default },
-    ];
-    // selected dropdown elements for phone number input component
-    const selectedCountryTemplate = (option, props) => {
-        if (option) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: "flex align-items-center", children: (0, jsx_runtime_1.jsx)("img", { alt: option.name, src: option.img }) }));
-        }
-        return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
-    };
-    // dropdown for phone number input component with image showing
-    const countryOptionTemplate = (item) => {
-        return ((0, jsx_runtime_1.jsx)("div", { 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", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Input" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-column h-full w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid px-7 py-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email1", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-disabled w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email2", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-error w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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", { id: "username-help", className: "text-base p-error font-normal  mt-1", children: "Enter valid email adress" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-left message-box p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) }), (0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Email1", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-left message-box p-disabled  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) }), (0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Email2", className: "font-medium text-gray-700 text-base mb-1", children: "Email" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-left message-box p-invalid  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) }), (0, jsx_runtime_1.jsx)("span", { 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", { id: "username-help", className: "text-base p-error font-normal  mt-1", children: "Enter a valid email address." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-inputgroup-addon border-round-left w-5rem", children: "http://" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website1", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-disabled w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-inputgroup-addon border-round-left text-gray-600 w-5rem", children: "http://" }), (0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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", { 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", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website2", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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, { 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);
-                                                    }, children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Website3", className: "font-medium text-gray-700 text-base mb-1", children: "Website" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup  w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " p-input-icon-right border-noround-left w-full", children: [(0, jsx_runtime_1.jsx)("span", { 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, { disabled: true, id: "Website3", placeholder: "Enter text here", className: "w-full border-noround-right " })] }), (0, jsx_runtime_1.jsxs)(button_1.Button, { className: "p-button p-component text-base text-gray-700 gap-1 border-left-none font-semibold p-button-outlined flex justify-content-center", outlined: true, disabled: true, onClick: () => {
-                                                        navigator.clipboard.writeText(websiteLink);
-                                                    }, children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Card", className: "font-medium text-base mb-1", children: "Card number" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-input-icon-left payment-card-input w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-card" }) }), (0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Card", useGrouping: false, onChange: (e) => {
-                                                        setCardNumber(e.value);
-                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full  text-lg font-normal  card-number text-gray-500 hover:text-gray-900" })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Card1", className: "font-medium text-base mb-1", children: "Card number" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-input-icon-left payment-card-input w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-card" }) }), (0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { disabled: true, value: cardNumber, id: "Card1", useGrouping: false, onChange: (e) => {
-                                                        setCardNumber(e.value);
-                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full text-lg font-normal  text-gray-500 hover:text-gray-900" })] }), (0, jsx_runtime_1.jsx)("small", { 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", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Card2", className: "font-medium text-base mb-1", children: "Card number" }), (0, jsx_runtime_1.jsxs)("span", { className: "p-input-icon-right p-input-icon-left  payment-card-input w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-card" }) }), (0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Card2", useGrouping: false, onChange: (e) => {
-                                                        setCardNumber(e.value);
-                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full p-invalid text-lg font-normal  card-number text-gray-500 hover:text-gray-900" })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid card number." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Sale amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) }), (0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Sale amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-disabled w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) }), (0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full   text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Sale amount" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-invalid w-full", children: [(0, jsx_runtime_1.jsxs)("span", { className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-prefix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) }), (0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Sale amount", className: "w-full p-invalid  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-left-none p-invalid flex align-items-center" })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid amount." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", { className: " z-5  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-disabled w-full", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", { className: " z-5  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-invalid w-full", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", { className: " z-5  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix ", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base p-error font-normal  mt-1", children: "Enter valid phone number." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup w-full", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", { className: " z-5  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-disabled w-full", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", { className: " z-5  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Phone number" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-inputgroup p-invalid w-full", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", { className: " z-5  p-input-icon-right w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "p-input-suffix", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
-                                                                setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] })] }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base p-error font-normal  mt-1", children: "Enter valid phone number." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 20, className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { disabled: true, value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 20, className: "text-lg  font-normal  text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 30, className: "text-lg p-invalid font-normal  text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid description." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column col-6 md:col-4 lg:col-3 px-7", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: "card p-fluid w-full", children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: " w-full " }) }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: "card p-fluid w-full", children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { disabled: true, value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: " w-full " }) }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal text-gray-500 mt-1", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-start mb-5 ", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "Amount", className: "font-medium text-base mb-1", children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: "card p-fluid w-full", children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: "p-invalid w-full " }) }), (0, jsx_runtime_1.jsx)("small", { id: "username-help", className: "text-base font-normal p-error mt-1", children: "Enter valid tags." })] })] })] }) })] }));
-};
-exports.default = InputComponent;
+"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 inputtext_1 = require("primereact/inputtext");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const demoImage_png_1 = tslib_1.__importDefault(require("../../assets/images/demoImage.png"));
+const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
+require("./input-text.scss");
+const inputnumber_1 = require("primereact/inputnumber");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const chips_1 = require("primereact/chips");
+const InputComponent = () => {
+    // email value state for email input compoenent
+    const [emailValue, setEmailValue] = (0, react_1.useState)("");
+    // website state value for website input compoenent
+    const [websiteLink, setWebsiteLink] = (0, react_1.useState)("");
+    //card number state for card number input component
+    const [cardNumber, setCardNumber] = (0, react_1.useState)(null);
+    // state for text area input compoenent
+    const [textAreaValue, setTextAreaValue] = (0, react_1.useState)("");
+    //state for chips input compoenent
+    const [value, setValue] = (0, react_1.useState)([]);
+    //currency selection state for sale amout input component
+    const [selectedCurrency, setSelectedCurrency] = (0, react_1.useState)({
+        name: "USD",
+        code: "USD",
+        currency: "dollar",
+    });
+    // selected country state for phone number input compoenent
+    const [selectedCountry, setSelectedCountry] = (0, react_1.useState)({
+        name: "Australia",
+        code: "AU",
+        img: label_image_png_1.default,
+    });
+    /// curriencies select drop down for sale amount dropdow componet
+    const currencies = [
+        { name: "USD", code: "USD", currency: "dollar" },
+        { name: "INR", code: "INR", currency: "pound" },
+        { code: "AFN", name: "AFN", currency: "pound" },
+        { code: "ALL", name: "ALL", currency: "pound" },
+        { code: "DZD", name: "DZD", currency: "pound" },
+    ];
+    //countries option dropdown for phone number country selection component
+    const countries = [
+        { name: "Australia", code: "AU", img: label_image_png_1.default },
+        { name: "Brazil", code: "BR", img: demoImage_png_1.default },
+        { name: "China", code: "CN", img: demoImage_png_1.default },
+        { name: "Egypt", code: "EG", img: demoImage_png_1.default },
+    ];
+    // selected dropdown elements for phone number input component
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: option.name, src: option.img }) })));
+        }
+        return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
+    };
+    // dropdown for phone number input component with image showing
+    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) => {
+                                                        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) => {
+                                                        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) => {
+                                                        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) => {
+                                                                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) => {
+                                                                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);
+                                                    } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] }))] })), (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: "Website3", 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, { disabled: true, id: "Website3", placeholder: "Enter text here", className: "w-full border-noround-right " })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button p-component text-base text-gray-700 gap-1 border-left-none font-semibold p-button-outlined flex justify-content-center", outlined: true, disabled: true, onClick: () => {
+                                                        navigator.clipboard.writeText(websiteLink);
+                                                    } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "copy-icon" }), " Copy"] }))] })), (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: "Card", className: "font-medium text-base mb-1" }, { children: "Card number" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-input-icon-left payment-card-input 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: "payment-card" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Card", useGrouping: false, onChange: (e) => {
+                                                        setCardNumber(e.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full  text-lg font-normal  card-number 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: "Card1", className: "font-medium text-base mb-1" }, { children: "Card number" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-input-icon-left payment-card-input 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: "payment-card" }) })), (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)(inputnumber_1.InputNumber, { disabled: true, value: cardNumber, id: "Card1", useGrouping: false, onChange: (e) => {
+                                                        setCardNumber(e.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", 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: "Card2", className: "font-medium text-base mb-1" }, { children: "Card number" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-right p-input-icon-left  payment-card-input 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: "payment-card" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Card2", useGrouping: false, onChange: (e) => {
+                                                        setCardNumber(e.value);
+                                                    }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full p-invalid text-lg font-normal  card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid card number." }))] }))] })), (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: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class 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: "dollar-icon" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class 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: "dollar-icon" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full   text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class 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: "dollar-icon" }) })), (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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Sale amount", className: "w-full p-invalid  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-left-none p-invalid flex align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid amount." }))] }))] })), (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: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left 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-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left 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-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  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: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left 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 valid phone number." }))] }))] })), (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: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left 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-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  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)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left 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-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  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: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
+                                                                setCardNumber(e.value);
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left 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 valid phone number." }))] }))] })), (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: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 20, className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { disabled: true, value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 20, className: "text-lg  font-normal  text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: textAreaValue, onChange: (e) => setTextAreaValue(e.target.value), rows: 2, cols: 30, className: "text-lg p-invalid font-normal  text-gray-500 hover:text-gray-900 w-full" }), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid description." }))] }))] })), (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: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card p-fluid w-full" }, { children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: " w-full " }) })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card p-fluid w-full" }, { children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { disabled: true, value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: " w-full " }) })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 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: "Amount", className: "font-medium text-base mb-1" }, { children: "Description" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card p-fluid w-full" }, { children: (0, jsx_runtime_1.jsx)(chips_1.Chips, { value: value, placeholder: "Add tags...", onChange: (e) => setValue(e.value), className: "p-invalid w-full " }) })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid tags." }))] }))] }))] })) }))] }));
+};
+exports.default = InputComponent;

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

@@ -1,7 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ProgressBarComponent = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { children: "progress-bar" }));
-};
-exports.default = ProgressBarComponent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+require("./progress-bar.scss");
+const ProgressBarComponent = () => {
+    const [value, setValue] = (0, react_1.useState)("");
+    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: "Progress-Bar" })), (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-14rem my-8 ml-auto mr-auto" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid mt-7 w-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                            position: "absolute",
+                                            top: 35,
+                                            left: `${value}%`,
+                                            transition: "left 1s ease-in-out",
+                                            transform: "translate(-50%, -50%)",
+                                        }, className: "px-3 p-progress-value  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 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2  flex align-items-start 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 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                            position: "absolute",
+                                            top: -30,
+                                            left: `${value}%`,
+                                            transition: "left 1s ease-in-out",
+                                            transform: "translate(-50%, -50%)",
+                                        }, className: "p-progress-value 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, "%"] }))] })) }))] })) }))] }));
+};
+exports.default = ProgressBarComponent;

package/dist/pages/radio-button/radio-button-component.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const radiobutton_1 = require("primereact/radiobutton");
-const RadioButtonComponent = () => {
-    const [ingredient, setIngredient] = (0, react_1.useState)("");
-    const [remember, setRemember] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Radio Button" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column align-items-center gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex justify-content-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center mr-3", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient1", name: "pizza", value: "Cheese", onChange: (e) => setIngredient(e.value), checked: ingredient === "Cheese" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "ingredient1", className: "ml-2", children: "Cheese" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient2", name: "pizza", value: "Mushroom", onChange: (e) => setIngredient(e.value), checked: ingredient === "Mushroom" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "ingredient2", className: "ml-2", children: "Mushroom" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient4", name: "pizza", value: "Onion", className: "p-invalid" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "ingredient2", className: "ml-2", children: "Onion" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient3", name: "pizza", value: "Pepperoni", onChange: (e) => setIngredient(e.value), checked: true, disabled: true }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "ingredient2", className: "ml-2", children: "Pepperoni" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: remember, className: "pt-1", onChange: () => setRemember(!remember) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "remember", className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", className: "pt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "remember", className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: true, disabled: true, className: "pt-1" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-column", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "remember", className: "text-gray-700 font-medium text-base", children: "Remember me" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600 font-normal text-base", children: "Save my login details for next time." })] })] })] })] }));
-};
-exports.default = RadioButtonComponent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const radiobutton_1 = require("primereact/radiobutton");
+const RadioButtonComponent = () => {
+    const [ingredient, setIngredient] = (0, react_1.useState)("");
+    const [remember, setRemember] = (0, react_1.useState)(false);
+    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: "Radio Button" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex justify-content-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center mr-3" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient1", name: "pizza", value: "Cheese", onChange: (e) => setIngredient(e.value), checked: ingredient === "Cheese" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient1", className: "ml-2" }, { children: "Cheese" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient2", name: "pizza", value: "Mushroom", onChange: (e) => setIngredient(e.value), checked: ingredient === "Mushroom" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Mushroom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient4", name: "pizza", value: "Onion", className: "p-invalid" }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Onion" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "ingredient3", name: "pizza", value: "Pepperoni", onChange: (e) => setIngredient(e.value), checked: true, disabled: true }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "ingredient2", className: "ml-2" }, { children: "Pepperoni" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: remember, className: "pt-1", onChange: () => setRemember(!remember) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", className: "pt-1 p-invalid" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: "remember", checked: true, disabled: true, className: "pt-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "remember", className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }));
+};
+exports.default = RadioButtonComponent;

package/dist/pages/tags/tags.js

@@ -1,7 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TagComponent = () => {
-    return ((0, jsx_runtime_1.jsx)("div", {}));
-};
-exports.default = TagComponent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tag_1 = require("primereact/tag");
+const chip_1 = require("primereact/chip");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const TagComponent = () => {
+    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: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "h-full w-full p-8 flex flex-wrap align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, { value: "Label", className: "bg-white text-gray-700 border-gray-300 border-1 font-medium px-2" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Label", removable: true, removeIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-new" }), className: "bg-white border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-base" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 pl-2 pr-1 " }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-medium text-base" }, { children: ["Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-base border-round-sm" }, { children: "5" }))] })) }))] }))] }));
+};
+exports.default = TagComponent;