sccoreui 5.6.7 → 5.6.8

package/dist/components/AG-Grid/Ag-Grid.js

@@ -1,8 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AGGridComponent = (props) => {
-    console.log(props);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("h1", { children: "Ag Grid....!" }) }));
+const react_1 = require("@ag-grid-community/react");
+// import { RowModelType,ClientSideRowModelStep } from "@ag-grid-community/core";
+require("ag-grid-community/styles/ag-grid.css");
+require("ag-grid-community/styles/ag-theme-quartz.css");
+const core_1 = require("@ag-grid-community/core");
+const client_side_row_model_1 = require("@ag-grid-community/client-side-row-model");
+core_1.ModuleRegistry.registerModules([client_side_row_model_1.ClientSideRowModelModule]);
+const core_2 = require("@ag-grid-enterprise/core");
+const react_2 = require("react");
+// import { ColDef } from '@ag-grid-community/core';
+core_2.LicenseManager.setLicenseKey("Using_this_{AG_Grid}_Enterprise_key_{AG-056800}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Sellers_Commerce_LLC}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{SellersCommerce}_only_for_{2}_Front-End_JavaScript_developers___All_Front-End_JavaScript_developers_working_on_{SellersCommerce}_need_to_be_licensed___{SellersCommerce}_has_been_granted_a_Deployment_License_Add-on_for_{1}_Production_Environment___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{14_April_2025}____[v3]_[01]_MTc0NDU4NTIwMDAwMA==895f2234e1659afcfba586110daf0549");
+const columnDefs = [
+    { field: "make" },
+    { field: "model" },
+    { field: "price" }
+];
+const rowData = [
+    { make: "Toyota", model: "Celica", price: 35000 },
+    { make: "Ford", model: "Mondeo", price: 32000 },
+    { make: "Porsche", model: "Boxster", price: 72000 }
+];
+const AgGrid = () => {
+    const [gridApi, setGridApi] = (0, react_2.useState)(null);
+    const onGridReady = (0, react_2.useCallback)((params) => {
+        setGridApi(params.api);
+    }, []);
+    console.log(gridApi, 'grid api');
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ag-theme-alpine", style: { height: 400, width: 600 } }, { children: (0, jsx_runtime_1.jsx)(react_1.AgGridReact, { columnDefs: columnDefs, rowData: rowData, onGridReady: onGridReady }) })));
 };
-exports.default = AGGridComponent;
+exports.default = AgGrid;

package/dist/components/AG-Grid/AgGrid.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@ag-grid-community/react");
+const core_1 = require("@ag-grid-community/core");
+require("ag-grid-community/styles/ag-grid.css");
+require("ag-grid-community/styles/ag-theme-quartz.css");
+const client_side_row_model_1 = require("@ag-grid-community/client-side-row-model");
+const core_2 = require("@ag-grid-enterprise/core");
+const range_selection_1 = require("@ag-grid-enterprise/range-selection");
+const react_2 = require("react");
+const axios_1 = tslib_1.__importDefault(require("axios"));
+core_1.ModuleRegistry.registerModules([client_side_row_model_1.ClientSideRowModelModule, range_selection_1.RangeSelectionModule]);
+core_2.LicenseManager.setLicenseKey("Using_this_{AG_Grid}_Enterprise_key_{AG-056800}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Sellers_Commerce_LLC}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{SellersCommerce}_only_for_{2}_Front-End_JavaScript_developers___All_Front-End_JavaScript_developers_working_on_{SellersCommerce}_need_to_be_licensed___{SellersCommerce}_has_been_granted_a_Deployment_License_Add-on_for_{1}_Production_Environment___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{14_April_2025}____[v3]_[01]_MTc0NDU4NTIwMDAwMA==895f2234e1659afcfba586110daf0549");
+const AgGrid = () => {
+    const [rowData, setRowData] = (0, react_2.useState)([]);
+    const [columnDefs] = (0, react_2.useState)([
+        { field: "athlete", minWidth: 150 },
+        { field: "age", maxWidth: 90 },
+        { field: "country", minWidth: 150 },
+        { field: "year", maxWidth: 90 },
+        { field: "date", minWidth: 150 },
+        { field: "sport", minWidth: 150 },
+        { field: "gold" },
+        { field: "silver" },
+        { field: "bronze" },
+        { field: "total" },
+    ]);
+    const defaultColDef = (0, react_2.useMemo)(() => {
+        return {
+            flex: 1,
+            minWidth: 100,
+        };
+    }, []);
+    // Get api call for rows  
+    const onGridReady = (0, react_2.useCallback)((params) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.log(params, 'params');
+        const result = (yield axios_1.default.get("https://www.ag-grid.com/example-assets/olympic-winners.json")).data;
+        console.log(result.length, result, "length of data");
+        setRowData(result);
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ag-theme-alpine ", style: { height: 800, width: 1200 } }, { children: (0, jsx_runtime_1.jsx)(react_1.AgGridReact, { rowData: rowData, columnDefs: columnDefs, defaultColDef: defaultColDef, onGridReady: onGridReady, enableRangeSelection: true }) })) }) }));
+};
+exports.default = AgGrid;

package/dist/components/AG-Grid/Grid-Parent.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Ag_Grid_1 = tslib_1.__importDefault(require("./Ag-Grid"));
+const AGGridComponent = (props) => {
+    console.log(props);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Ag_Grid_1.default, {}) }));
+};
+exports.default = AGGridComponent;

package/dist/components/AG-Grid/ParentForGrid.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AgGrid_1 = tslib_1.__importDefault(require("./AgGrid"));
+function ParentForGrid(props) {
+    console.log(props, 'props');
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(AgGrid_1.default, {}) }));
+}
+exports.default = ParentForGrid;

package/dist/components/AG-Grid/Types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.js

@@ -228,6 +228,6 @@ var hooks_1 = require("primereact/hooks");
 Object.defineProperty(exports, "useClickOutside", { enumerable: true, get: function () { return hooks_1.useClickOutside; } });
 Object.defineProperty(exports, "useOverlayListener", { enumerable: true, get: function () { return hooks_1.useOverlayListener; } });
 Object.defineProperty(exports, "useOverlayScrollListener", { enumerable: true, get: function () { return hooks_1.useOverlayScrollListener; } });
-var Ag_Grid_1 = require("./components/AG-Grid/Ag-Grid");
-Object.defineProperty(exports, "AGGridComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(Ag_Grid_1).default; } });
+var ParentForGrid_1 = require("./components/ag-grid/ParentForGrid");
+Object.defineProperty(exports, "AGGridComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(ParentForGrid_1).default; } });
 client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/pages/ag-grid/agGridPage.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import React from 'react'
+const Grid_Parent_1 = tslib_1.__importDefault(require("../../components/ag-grid/Grid-Parent"));
+const AgGridPage = () => {
+    return ((0, jsx_runtime_1.jsx)(Grid_Parent_1.default, {}));
+};
+exports.default = AgGridPage;

package/dist/pages/avatar/avatar.js

@@ -0,0 +1,338 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import { Button } from "primereact/button";
+// import avatar from "../../assets/images/avatar.png";
+// import SvgComponent from "../../directives/svg-component";
+// import "./avatar.scss";
+// import { Avatar } from "primereact/avatar";
+// import { AvatarGroup } from "primereact/avatargroup";
+// import profileimage from "../../assets/images/profile-square-image.png";
+// // import FormComponent from "../../components/form/form";
+// import FormFields from "../../components/form/form-fields/form-fields";
+// import { object, number } from "yup";
+// import TextEditor from "../../components/froala-editor/FroalaEditor";
+// import { useState } from "react";
+// const AvatarComponent = () => {
+//   const [text, setText] = useState<string>("");
+//   // const initVals = {
+//   //   title: 0,
+//   // }
+//   const onChangeText = (e: any) => {
+//     setText(e);
+//     debugger
+//   }
+//   // const FormVals = (props: any) => {
+//   //   const { errors, touched, isValid, values, setFieldValue } = props;
+//   //   const triggerSubmit = (e: any) => {
+//   //     console.log(e)
+//   //     debugger
+//   //     console.log(values);
+//   //     // submitForm()
+//   //     // resetForm()
+//   //   }
+//   //   return (
+//   //     <div className="p-5">
+//   //       <Button className={`p-button-xs ${isValid && Object.keys(touched).length === Object.keys(initVals).length ? '' : 'p-disabled'}`} type="submit" label="Create" onClick={(e: any) => triggerSubmit(e)} />
+//   //       <FormFields.InputNumberField  min={0} name={'title'} label={'Title'} setFieldValue={setFieldValue} length={'full'} placeholder={'Enter the plan title'} touched={touched} errors={errors} />
+//   //     </div>
+//   //   )
+//   // }
+//   // const validtionSchema = object().shape({
+//   //   title: number().min(1,'error').max(24, 'err max').test("custom","invalid",(value: any) => {
+//   //     if (value === "") {
+//   //       return false
+//   //     } else {
+//   //       return true;
+//   //     }
+//   //   })
+//   // })
+//   const config = {
+//     placeholder: 'Enter text',
+//     charCounterCount: true,
+//   }
+//   return (
+//     <>
+//       <h2 className="flex bg-gray-200 p-3 justify-content-center mb-4">Tags</h2>
+//       <div className="grid">
+//         {/* <FormComponent values={initVals} validations={validtionSchema}>
+//             {
+//               ({errors, touched, isValid, values, actions,resetForm, submitForm, setFieldValue}: any) => (
+//                   <FormVals errors={errors} touched={touched} isValid={isValid} values={values} actions={actions} resetForm={resetForm} submitForm={submitForm} setFieldValue={setFieldValue} />
+//               )
+//           }
+//         </FormComponent> */}
+//         <TextEditor config={config} model={text} onModelChange={onChangeText} />
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
+//           <img
+//             src={avatar}
+//             className=" border-circle w-4rem h-4rem p-avatar-focus"
+//           />
+//           <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-4rem h-4rem p-avatar-focus"
+//             />
+//             <span
+//               className="bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white"
+//               style={{
+//                 position: "absolute",
+//                 right: "0",
+//                 bottom: "0",
+//               }}
+//             ></span>
+//           </div>
+//           <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-4rem h-4rem p-avatar-focus"
+//             />
+//             <span
+//               className=" absolute "
+//               style={{
+//                 right: "-2px",
+//                 bottom: "-2px",
+//               }}
+//             >
+//               <SvgComponent icon="avatar-company-logo-2xl" />
+//             </span>
+//           </div>
+//           <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-4rem h-4rem p-avatar-focus"
+//             />
+//             <span
+//               className=" absolute "
+//               style={{
+//                 right: "-2px",
+//                 bottom: "-2px",
+//               }}
+//             >
+//               <SvgComponent icon="verified-tick-2xl" />
+//             </span>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
+//           <span className="w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200">
+//             <SvgComponent icon="avatar-user-2xl" />
+//           </span>
+//           <span className="w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200">
+//             <SvgComponent icon="avatar-user-2xl" />
+//             <span
+//               className="bg-green-500 w-1rem h-1rem border-circle  border-1 border-white"
+//               style={{
+//                 position: "absolute",
+//                 right: "0px",
+//                 bottom: "0px",
+//               }}
+//             ></span>
+//           </span>
+//           <span className="w-4rem h-4rem border-circle  bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium  justify-content-center border-3 border-transparent hover:border-gray-200">
+//             OR
+//           </span>
+//           <span
+//             className="w-4rem h-4rem border-circle relative bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200"
+//             style={{ fontSize: "18px" }}
+//           >
+//             OR
+//             <span
+//               className="bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white"
+//               style={{
+//                 position: "absolute",
+//                 right: "0px",
+//                 bottom: "0px",
+//               }}
+//             ></span>
+//           </span>
+//           <span className="w-4rem h-4rem border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200">
+//             OR
+//             <span
+//               className="absolute "
+//               style={{
+//                 position: "absolute",
+//                 right: "-2px",
+//                 bottom: "-2px",
+//               }}
+//             >
+//               <SvgComponent icon="avatar-company-logo-xl" />
+//             </span>
+//           </span>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
+//           <Button
+//             rounded
+//             tooltipOptions={{ position: "top" }}
+//             tooltip="Add user"
+//             className="w-3rem h-3rem border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center"
+//           >
+//             <SvgComponent icon="avatar-button-plus" />
+//           </Button>
+//           <Button
+//             disabled
+//             rounded
+//             tooltipOptions={{ position: "top" }}
+//             tooltip="Add user"
+//             className="border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-3rem h-3rem flex align-items-center justify-content-center"
+//           >
+//             <SvgComponent icon="avatar-button-plus" />
+//           </Button>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8">
+//           <div className="flex align-items-center">
+//             <AvatarGroup>
+//               {/* you can define the size of the avatar using size property with "noraml, large, xlarge" values */}
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar
+//                 label="+2"
+//                 shape="circle"
+//                 size="large"
+//                 className="bg-gray-100 text-gray-600 text-base font-medium"
+//               />
+//             </AvatarGroup>
+//             <Button
+//               rounded
+//               tooltipOptions={{ position: "top" }}
+//               tooltip="Add user"
+//               className="border-gray-300 p-0 border-1 ml-1 bg-white avatar-button  p-dark-tooltip border-dashed h-2rem w-2rem flex align-items-center justify-content-center"
+//             >
+//               <SvgComponent icon="avatar-button-plus" />
+//             </Button>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
+//           <div className="flex align-items-center gap-3">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-2rem h-2rem p-avatar-focus"
+//             />
+//             <div className="flex flex-column">
+//               <span className="text-base font-semibold line-height-2">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-sm font-normal line-height-2">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//           <div className="flex align-items-center gap-3">
+//             <div className="w-2rem h-2rem border-circle flex align-items-center justify-content-center relative ">
+//               <img
+//                 src={avatar}
+//                 className=" border-circle w-2rem h-2rem p-avatar-focus"
+//               />
+//               <span
+//                 className="bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white"
+//                 style={{
+//                   position: "absolute",
+//                   right: "0",
+//                   bottom: "0",
+//                 }}
+//               ></span>
+//             </div>
+//             <div className="flex flex-column">
+//               <span className="text-base font-semibold line-height-2">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-sm font-normal line-height-2">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//           <div className="flex align-items-center gap-3">
+//             <div className="w-3rem h-3rem border-circle flex align-items-center justify-content-center relative ">
+//               <img
+//                 src={avatar}
+//                 className=" border-circle w-3rem h-3rem p-avatar-focus"
+//               />
+//               <span
+//                 className=" absolute "
+//                 style={{
+//                   right: "-2px",
+//                   bottom: "-2px",
+//                 }}
+//               >
+//                 <SvgComponent icon="avatar-company-logo-lg" />
+//               </span>
+//             </div>
+//             <div className="flex flex-column">
+//               <span className="text-lg font-semibold line-height-3">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-lg font-normal line-height-3">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//           <div className="flex align-items-center gap-3">
+//             <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//               <img
+//                 src={avatar}
+//                 className=" border-circle w-4rem h-4rem p-avatar-focus"
+//               />
+//               <span
+//                 className=" absolute "
+//                 style={{
+//                   right: "-2px",
+//                   bottom: "-2px",
+//                 }}
+//               >
+//                 <SvgComponent icon="verified-tick-xl" />
+//               </span>
+//             </div>
+//             <div className="flex flex-column">
+//               <span className="text-lg font-semibold line-height-3">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-lg font-normal line-height-3">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
+//           <div className="w-6rem h-6rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle border-3 border-white w-6rem h-6rem shadow-4"
+//             />
+//             <span
+//               className=" absolute "
+//               style={{
+//                 right: "2px",
+//                 bottom: "2px",
+//               }}
+//             >
+//               <SvgComponent icon="verified-tick-3xl" />
+//             </span>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
+//           <div className="w-10rem flex flex-column align-items-start">
+//             <img src={profileimage} alt="profile" className="h-10rem " />
+//             <span className="text-lg text-gray-900 line-height-3 pt-2">
+//               Olivia Rhye
+//             </span>
+//             <span className="flex align-items-center gap-2 line-height-3 ">
+//               <a href="www.google.com">
+//                 <SvgComponent icon="link-01" />
+//               </a>
+//               <a href="www.google.com" className="text-gray-500 font-normal">
+//                 Source
+//               </a>
+//             </span>
+//           </div>
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
+// export default AvatarComponent;
+const avatar = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: "avatar" }));
+};
+exports.default = avatar;

package/dist/pages/badges/badge.js

@@ -0,0 +1,73 @@
+"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({ id: "badge-1-a", className: "bg-green-50 border-round-2xl font-medium flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: ["Label", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                                const el = document.getElementById("badge-1-a");
+                                                el.remove();
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-green-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-b", 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)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                                const el = document.getElementById("badge-1-b");
+                                                el.remove();
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-primary-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-c", 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)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                                const el = document.getElementById("badge-1-c");
+                                                el.remove();
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-red-500" }) }))] }))] })), (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({ id: "badge-2-a", 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)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                                const el = document.getElementById("badge-2-a");
+                                                el.remove();
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-green-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-b", 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)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                                const el = document.getElementById("badge-2-b");
+                                                el.remove();
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-primary-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-c", 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)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                                const el = document.getElementById("badge-2-c");
+                                                el.remove();
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-red-500" }) }))] }))] })), (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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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, { icon: "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;