sccoreui 2.2.2 → 2.2.4

package/dist/index.js

@@ -1,100 +1,106 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = tslib_1.__importDefault(require("react-dom/client"));
-const App_1 = tslib_1.__importDefault(require("./App"));
-// component exports
-var button_1 = require("./components/button/button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return tslib_1.__importDefault(button_1).default; } });
-var dropdown_1 = require("./components/dropdown/dropdown");
-Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return tslib_1.__importDefault(dropdown_1).default; } });
-var input_1 = require("./components/input/input");
-Object.defineProperty(exports, "InputText", { enumerable: true, get: function () { return tslib_1.__importDefault(input_1).default; } });
-var accordion_1 = require("./components/accordion/accordion");
-Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
-Object.defineProperty(exports, "AccordionTab", { enumerable: true, get: function () { return accordion_1.AccordionTab; } });
-var color_picker_1 = require("./components/color-picker/color-picker");
-Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return tslib_1.__importDefault(color_picker_1).default; } });
-var auto_complete_1 = require("./components/auto-complete/auto-complete");
-Object.defineProperty(exports, "AutoComplete", { enumerable: true, get: function () { return tslib_1.__importDefault(auto_complete_1).default; } });
-var checkbox_1 = require("./components/checkbox/checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return tslib_1.__importDefault(checkbox_1).default; } });
-var data_table_1 = require("./components/data-table/data-table");
-Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return tslib_1.__importDefault(data_table_1).default; } });
-var column_1 = require("./components/data-table/column");
-Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return tslib_1.__importDefault(column_1).default; } });
-var side_panel_1 = require("./components/side-panel/side-panel");
-Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return tslib_1.__importDefault(side_panel_1).default; } });
-var tabview_1 = require("./components/tabview/tabview");
-Object.defineProperty(exports, "TabView", { enumerable: true, get: function () { return tabview_1.TabView; } });
-Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return tabview_1.TabPanel; } });
-var tab_menu_1 = require("./components/tab-menu/tab-menu");
-Object.defineProperty(exports, "TabMenu", { enumerable: true, get: function () { return tslib_1.__importDefault(tab_menu_1).default; } });
-var file_upload_1 = require("./components/file-upload/file-upload");
-Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return tslib_1.__importDefault(file_upload_1).default; } });
-var multi_select_1 = require("./components/multi-select/multi-select");
-Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_1).default; } });
-var data_table_2 = require("./components/data-table/data-table");
-Object.defineProperty(exports, "Paginator", { enumerable: true, get: function () { return tslib_1.__importDefault(data_table_2).default; } });
-var classnames_1 = require("./components/utils/classnames");
-Object.defineProperty(exports, "classNames", { enumerable: true, get: function () { return tslib_1.__importDefault(classnames_1).default; } });
-var avatar_1 = require("./components/avatar/avatar");
-Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return tslib_1.__importDefault(avatar_1).default; } });
-var avatar_group_1 = require("./components/avatar/avatar-group");
-Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return tslib_1.__importDefault(avatar_group_1).default; } });
-var image_1 = require("./components/image/image");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return tslib_1.__importDefault(image_1).default; } });
-var calendar_1 = require("./components/calendar/calendar");
-Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return tslib_1.__importDefault(calendar_1).default; } });
-var tooltip_1 = require("./components/tooltip/tooltip");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tslib_1.__importDefault(tooltip_1).default; } });
-var badge_1 = require("./components/badge/badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return tslib_1.__importDefault(badge_1).default; } });
-var radio_button_1 = require("./components/radio-button/radio-button");
-Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return tslib_1.__importDefault(radio_button_1).default; } });
-var confirm_dialog_1 = require("./components/dialogs/confirm-dialog");
-Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return tslib_1.__importDefault(confirm_dialog_1).default; } });
-var confirm_popup_1 = require("./components/dialogs/confirm-popup");
-Object.defineProperty(exports, "confirmPopup", { enumerable: true, get: function () { return tslib_1.__importDefault(confirm_popup_1).default; } });
-var password_1 = require("./components/password/password");
-Object.defineProperty(exports, "Password", { enumerable: true, get: function () { return tslib_1.__importDefault(password_1).default; } });
-var dialog_1 = require("./components/dialogs/dialog");
-Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return tslib_1.__importDefault(dialog_1).default; } });
-var card_1 = require("./components/card/card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return tslib_1.__importDefault(card_1).default; } });
-var slider_1 = require("./components/range-slider/slider");
-Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return tslib_1.__importDefault(slider_1).default; } });
-var toggle_button_1 = require("./components/toggle/toggle-button");
-Object.defineProperty(exports, "ToggleButton", { enumerable: true, get: function () { return tslib_1.__importDefault(toggle_button_1).default; } });
-var carousel_1 = require("./components/carousel/carousel");
-Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return tslib_1.__importDefault(carousel_1).default; } });
-var tag_1 = require("./components/carousel/tag");
-Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return tslib_1.__importDefault(tag_1).default; } });
-var overlay_panel_1 = require("./components/overlays/overlay-panel");
-Object.defineProperty(exports, "OverlayPanel", { enumerable: true, get: function () { return tslib_1.__importDefault(overlay_panel_1).default; } });
-var input_number_1 = require("./components/input/input-number");
-Object.defineProperty(exports, "InputNumber", { enumerable: true, get: function () { return tslib_1.__importDefault(input_number_1).default; } });
-var toast_1 = require("./components/toast/toast");
-Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return tslib_1.__importDefault(toast_1).default; } });
-var data_view_1 = require("./components/data-view/data-view");
-Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return data_view_1.DataView; } });
-Object.defineProperty(exports, "DataViewLayoutOptions", { enumerable: true, get: function () { return data_view_1.DataViewLayoutOptions; } });
-var split_button_1 = require("./components/button/split-button");
-Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_1).default; } });
-var split_button_2 = require("./components/button/split-button");
-Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_2).default; } });
-var input_mask_1 = require("./components/input/input-mask");
-Object.defineProperty(exports, "InputMask", { enumerable: true, get: function () { return tslib_1.__importDefault(input_mask_1).default; } });
-var input_switch_1 = require("./components/input/input-switch");
-Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return tslib_1.__importDefault(input_switch_1).default; } });
-var input_textarea_1 = require("./components/input/input-textarea");
-Object.defineProperty(exports, "InputTextarea", { enumerable: true, get: function () { return tslib_1.__importDefault(input_textarea_1).default; } });
-var rating_1 = require("./components/rating/rating");
-Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return tslib_1.__importDefault(rating_1).default; } });
-var chips_1 = require("./components/chips/chips");
-Object.defineProperty(exports, "Chips", { enumerable: true, get: function () { return tslib_1.__importDefault(chips_1).default; } });
-var chip_1 = require("./components/chips/chip");
-Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return tslib_1.__importDefault(chip_1).default; } });
-client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chart = exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = tslib_1.__importDefault(require("react-dom/client"));
+const App_1 = tslib_1.__importDefault(require("./App"));
+// export component exports
+var button_1 = require("./components/button/button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return tslib_1.__importDefault(button_1).default; } });
+var dropdown_1 = require("./components/dropdown/dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return tslib_1.__importDefault(dropdown_1).default; } });
+var input_1 = require("./components/input/input");
+Object.defineProperty(exports, "InputText", { enumerable: true, get: function () { return tslib_1.__importDefault(input_1).default; } });
+var accordion_1 = require("./components/accordion/accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
+Object.defineProperty(exports, "AccordionTab", { enumerable: true, get: function () { return accordion_1.AccordionTab; } });
+var color_picker_1 = require("./components/color-picker/color-picker");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return tslib_1.__importDefault(color_picker_1).default; } });
+var auto_complete_1 = require("./components/auto-complete/auto-complete");
+Object.defineProperty(exports, "AutoComplete", { enumerable: true, get: function () { return tslib_1.__importDefault(auto_complete_1).default; } });
+var checkbox_1 = require("./components/checkbox/checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return tslib_1.__importDefault(checkbox_1).default; } });
+var data_table_1 = require("./components/data-table/data-table");
+Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return tslib_1.__importDefault(data_table_1).default; } });
+var column_1 = require("./components/data-table/column");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return tslib_1.__importDefault(column_1).default; } });
+var side_panel_1 = require("./components/side-panel/side-panel");
+Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return tslib_1.__importDefault(side_panel_1).default; } });
+var tabview_1 = require("./components/tabview/tabview");
+Object.defineProperty(exports, "TabView", { enumerable: true, get: function () { return tabview_1.TabView; } });
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return tabview_1.TabPanel; } });
+var tab_menu_1 = require("./components/tab-menu/tab-menu");
+Object.defineProperty(exports, "TabMenu", { enumerable: true, get: function () { return tslib_1.__importDefault(tab_menu_1).default; } });
+var file_upload_1 = require("./components/file-upload/file-upload");
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return tslib_1.__importDefault(file_upload_1).default; } });
+var multi_select_1 = require("./components/multi-select/multi-select");
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_1).default; } });
+var data_table_2 = require("./components/data-table/data-table");
+Object.defineProperty(exports, "Paginator", { enumerable: true, get: function () { return tslib_1.__importDefault(data_table_2).default; } });
+var classnames_1 = require("./components/utils/classnames");
+Object.defineProperty(exports, "classNames", { enumerable: true, get: function () { return tslib_1.__importDefault(classnames_1).default; } });
+var avatar_1 = require("./components/avatar/avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return tslib_1.__importDefault(avatar_1).default; } });
+var avatar_group_1 = require("./components/avatar/avatar-group");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return tslib_1.__importDefault(avatar_group_1).default; } });
+var image_1 = require("./components/image/image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return tslib_1.__importDefault(image_1).default; } });
+var calendar_1 = require("./components/calendar/calendar");
+Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return tslib_1.__importDefault(calendar_1).default; } });
+var tooltip_1 = require("./components/tooltip/tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tslib_1.__importDefault(tooltip_1).default; } });
+var badge_1 = require("./components/badge/badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return tslib_1.__importDefault(badge_1).default; } });
+var radio_button_1 = require("./components/radio-button/radio-button");
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return tslib_1.__importDefault(radio_button_1).default; } });
+var confirm_dialog_1 = require("./components/dialogs/confirm-dialog");
+Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return tslib_1.__importDefault(confirm_dialog_1).default; } });
+var confirm_popup_1 = require("./components/dialogs/confirm-popup");
+Object.defineProperty(exports, "confirmPopup", { enumerable: true, get: function () { return tslib_1.__importDefault(confirm_popup_1).default; } });
+var password_1 = require("./components/password/password");
+Object.defineProperty(exports, "Password", { enumerable: true, get: function () { return tslib_1.__importDefault(password_1).default; } });
+var dialog_1 = require("./components/dialogs/dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return tslib_1.__importDefault(dialog_1).default; } });
+var card_1 = require("./components/card/card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return tslib_1.__importDefault(card_1).default; } });
+var slider_1 = require("./components/range-slider/slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return tslib_1.__importDefault(slider_1).default; } });
+var toggle_button_1 = require("./components/toggle/toggle-button");
+Object.defineProperty(exports, "ToggleButton", { enumerable: true, get: function () { return tslib_1.__importDefault(toggle_button_1).default; } });
+var carousel_1 = require("./components/carousel/carousel");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return tslib_1.__importDefault(carousel_1).default; } });
+var tag_1 = require("./components/carousel/tag");
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return tslib_1.__importDefault(tag_1).default; } });
+var overlay_panel_1 = require("./components/overlays/overlay-panel");
+Object.defineProperty(exports, "OverlayPanel", { enumerable: true, get: function () { return tslib_1.__importDefault(overlay_panel_1).default; } });
+var input_number_1 = require("./components/input/input-number");
+Object.defineProperty(exports, "InputNumber", { enumerable: true, get: function () { return tslib_1.__importDefault(input_number_1).default; } });
+var toast_1 = require("./components/toast/toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return tslib_1.__importDefault(toast_1).default; } });
+var data_view_1 = require("./components/data-view/data-view");
+Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return data_view_1.DataView; } });
+Object.defineProperty(exports, "DataViewLayoutOptions", { enumerable: true, get: function () { return data_view_1.DataViewLayoutOptions; } });
+var split_button_1 = require("./components/button/split-button");
+Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_1).default; } });
+var split_button_2 = require("./components/button/split-button");
+Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_2).default; } });
+var input_mask_1 = require("./components/input/input-mask");
+Object.defineProperty(exports, "InputMask", { enumerable: true, get: function () { return tslib_1.__importDefault(input_mask_1).default; } });
+var input_switch_1 = require("./components/input/input-switch");
+Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return tslib_1.__importDefault(input_switch_1).default; } });
+var input_textarea_1 = require("./components/input/input-textarea");
+Object.defineProperty(exports, "InputTextarea", { enumerable: true, get: function () { return tslib_1.__importDefault(input_textarea_1).default; } });
+var rating_1 = require("./components/rating/rating");
+Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return tslib_1.__importDefault(rating_1).default; } });
+var chips_1 = require("./components/chips/chips");
+Object.defineProperty(exports, "Chips", { enumerable: true, get: function () { return tslib_1.__importDefault(chips_1).default; } });
+var chip_1 = require("./components/chips/chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return tslib_1.__importDefault(chip_1).default; } });
+var skeleton_1 = require("./components/skeleton/skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return tslib_1.__importDefault(skeleton_1).default; } });
+var spinner_1 = require("./components/spinner/spinner");
+Object.defineProperty(exports, "ProgressSpinner", { enumerable: true, get: function () { return tslib_1.__importDefault(spinner_1).default; } });
+var chart_1 = require("./components/chart/chart");
+Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return tslib_1.__importDefault(chart_1).default; } });
+client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/pages/avatar/avatar.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const AvatarComponent = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { children: "avatar" }));
-};
-exports.default = AvatarComponent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AvatarComponent = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: "avatar" }));
+};
+exports.default = AvatarComponent;

package/dist/pages/badges/badge.js

@@ -1,55 +1,55 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const badge_1 = require("primereact/badge");
-require("./badge.scss");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
-const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
-const dropdown_1 = require("primereact/dropdown");
-const react_1 = require("react");
-const button_1 = require("primereact/button");
-const BadgeComponent = () => {
-    // dropdown badge state
-    const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
-        name: "Error",
-        code: "bg-red-500",
-        text_code: "text-red-700",
-        bg: "bg-red-50",
-    });
-    //dropdown badge options list
-    const labels = [
-        {
-            name: "Error",
-            code: "bg-red-500",
-            text_code: "text-red-700",
-            bg: "bg-red-50",
-        },
-        {
-            name: "Pending",
-            code: "bg-primary-500",
-            text_code: "text-primary-700",
-            bg: "bg-primary-50",
-        },
-        {
-            name: "Success",
-            code: "bg-green-500",
-            text_code: "text-green-700",
-            bg: "bg-green-50",
-        },
-    ];
-    // badge dropdown selected lablel templete
-    const selectedlabelTemplate = (option) => {
-        if (option) {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
-        }
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.text_code}`, children: selectedLabel.name })] }));
-    };
-    // badge dropdown option lablel templete
-    const labelOptionTemplate = (option) => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
-    };
-    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: "Badges" }), (0, jsx_runtime_1.jsx)("div", { className: "p-8 h-full w-full flex flex-column", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid ", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600  p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600  p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600  p-1" }), " Label"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center  p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-circle flex align-items-center justify-content-center  p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-circle flex align-items-center justify-content-center  p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center  p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-100 border-circle flex align-items-center justify-content-center  p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-100 border-circle flex align-items-center justify-content-center  p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-red-600" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500  flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50  pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50  pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white  flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between  border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700   ", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl  text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2  border-round-2xl py-1 text-primary-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto", children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) })] }) })] }));
-};
-exports.default = BadgeComponent;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const badge_1 = require("primereact/badge");
+require("./badge.scss");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
+const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
+const dropdown_1 = require("primereact/dropdown");
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const BadgeComponent = () => {
+    // dropdown badge state
+    const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
+        name: "Error",
+        code: "bg-red-500",
+        text_code: "text-red-700",
+        bg: "bg-red-50",
+    });
+    //dropdown badge options list
+    const labels = [
+        {
+            name: "Error",
+            code: "bg-red-500",
+            text_code: "text-red-700",
+            bg: "bg-red-50",
+        },
+        {
+            name: "Pending",
+            code: "bg-primary-500",
+            text_code: "text-primary-700",
+            bg: "bg-primary-50",
+        },
+        {
+            name: "Success",
+            code: "bg-green-500",
+            text_code: "text-green-700",
+            bg: "bg-green-50",
+        },
+    ];
+    // badge dropdown selected lablel templete
+    const selectedlabelTemplate = (option) => {
+        if (option) {
+            return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${option.text_code}` }, { children: option.name }))] })));
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${selectedLabel.text_code}` }, { children: selectedLabel.name }))] })));
+    };
+    // badge dropdown option lablel templete
+    const labelOptionTemplate = (option) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${option.text_code}` }, { children: option.name }))] })));
+    };
+    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: "Badges" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-8 h-full w-full flex flex-column" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid " }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600  p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600  p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600  p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center  p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center  p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center  p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center  p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-100 border-circle flex align-items-center justify-content-center  p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-100 border-circle flex align-items-center justify-content-center  p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-red-600" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500  flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50  pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50  pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white  flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between  border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700   " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 " }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl  text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2  border-round-2xl py-1 text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto" }, { children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) }))] })) }))] }));
+};
+exports.default = BadgeComponent;