sccoreui 5.2.0 → 5.2.2

package/dist/App.scss

@@ -632,7 +632,7 @@ button#formatOLOptions-1.fr-active::before {
 }
 
 
-.fr-buttons.fr-tabs{
+.fr-buttons.fr-tabs {
   display: none;
 }
 
@@ -641,17 +641,19 @@ button#formatOLOptions-1.fr-active::before {
 }
 
 .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
-  background: #f9fafb   !important;
+  background: #f9fafb !important;
 }
 
-button[data-cmd="fontFamily"]:focus{
+button[data-cmd="fontFamily"]:focus {
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 2px var(--primary-100);
   border: 1px solid var(--primary-300) !important;
   background: none !important;
 }
+
 .text-editor {
   border: 1px solid #d0d5dd;
-    border-radius: 10px;
+  border-radius: 10px;
+
   * {
     border: none !important;
   }
@@ -668,8 +670,9 @@ button[data-cmd="fontFamily"]:focus{
 }
 
 
-button[data-cmd='fontFamily']{
+button[data-cmd='fontFamily'] {
   border: 1px solid var(--gray-300) !important;
+
   &::before {
     content: '';
     border: 1.8px solid #0b0c12;
@@ -709,6 +712,7 @@ button[aria-expanded="true"] {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
+
   .p-tree-toggler {
     display: none;
   }
@@ -717,7 +721,7 @@ button[aria-expanded="true"] {
     background: var(--Gray-100, #F2F4F7) !important;
   }
 
-  .p-treenode-content:hover{
+  .p-treenode-content:hover {
     background: var(--Primary-25, #F5F6FD) !important;
   }
 
@@ -747,6 +751,7 @@ button[aria-expanded="true"] {
     }
   }
 }
+
 /// Custon treeDropdownSelect style end /////////////////
 
 /////// Custom list_box_dropdown ///////////
@@ -795,6 +800,7 @@ button[aria-expanded="true"] {
   display: inline-block;
   align-items: center;
   list-style: none;
+
   li {
     float: left;
     height: 24px;
@@ -804,15 +810,42 @@ button[aria-expanded="true"] {
 /////// Custom list_box_dropdown ///////////
 
 //ScMulti Select//
-.sc_multiSelect .p-multiselect-clear-icon {
-  right: 42px !important;
+.sc_multiSelect {
+  height: 40px !important;
+
+  .p-multiselect-clear-icon {
+    right: 42px !important;
+  }
+
+  .p-multiselect-label {
+    line-height: 38px !important;
+  }
 }
 
-.sc_multiSelect.hideChipremoveIcon  {
+.sc_multiSelect.hideChipremoveIcon {
   .p-multiselect-token {
     svg {
       display: none;
     }
   }
 }
+
+.sc_multiSelect_panel {
+  .p-multiselect-items {
+    padding: 4px !important;
+
+    .p-highlight::after {
+      content: '';
+      width: 12px;
+      height: 6px;
+      border: solid #162578;
+      border-width: 1.9px;
+      border-top: 0;
+      border-right: 0;
+      transform: rotate(-45deg);
+      margin-right: 8px;
+    }
+  }
+}
+
 //////////////////////////////////////////////

package/dist/components/sc-multi-select/scMultiSelect.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sccoreui_1 = require("sccoreui");
 const ScMultiSelect = (props) => {
     var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.MultiSelect, { onShow: () => props === null || props === void 0 ? void 0 : props.onShow, onHide: () => props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) + ` ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''}  sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), (props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.MultiSelect, { filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: () => props === null || props === void 0 ? void 0 : props.onShow, onHide: () => props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) + ` ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''}  sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), (props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
                     (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute top-0 h-full text-center flex align-items-center w-2rem justify-content-center", style: { right: `${(props === null || props === void 0 ? void 0 : props.showClear) ? '68px' : '40px'}` } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: (((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 0) && `+${(_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.length}` })) }))] })) }));
 };
 exports.default = ScMultiSelect;

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;