sccoreui 2.2.5 → 2.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/assets/images/avatar-for-av-component.png +0 -0
  2. package/dist/assets/images/profile-square-image.png +0 -0
  3. package/dist/assets/sccoreui.css +46 -26
  4. package/dist/assets/theme.css +8 -21
  5. package/dist/components/button/menu-item.js +2 -0
  6. package/dist/directives/svg-icons.js +262 -3
  7. package/dist/pages/avatar/avatar.js +146 -1
  8. package/dist/pages/badges/badge.js +7 -1
  9. package/dist/pages/checkbox/checkbox.js +1 -1
  10. package/dist/pages/home.js +3 -1
  11. package/dist/pages/progress-bar/progress-bar.js +5 -5
  12. package/dist/pages/tags/tags.js +51 -1
  13. package/dist/pages/toggle/toggle.js +10 -0
  14. package/dist/pages/tooltip/tooltip.js +13 -0
  15. package/dist/types/components/button/menu-item.d.ts +2 -0
  16. package/dist/types/index.d.ts +2 -1
  17. package/dist/types/pages/avatar/avatar.d.ts +1 -0
  18. package/dist/types/pages/tags/tags.d.ts +1 -0
  19. package/dist/types/pages/toggle/toggle.d.ts +2 -0
  20. package/dist/types/pages/tooltip/tooltip.d.ts +2 -0
  21. package/package.json +1 -1
package/dist/pages/avatar/avatar.js CHANGED
@@ -1,7 +1,152 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
3
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const button_1 = require("primereact/button");
6
+ const avatar_for_av_component_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar-for-av-component.png"));
7
+ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
8
+ require("./avatar.scss");
9
+ const avatar_1 = require("primereact/avatar");
10
+ const avatargroup_1 = require("primereact/avatargroup");
11
+ const profile_square_image_png_1 = tslib_1.__importDefault(require("../../assets/images/profile-square-image.png"));
4
12
  const AvatarComponent = () => {
5
- return ((0, jsx_runtime_1.jsx)("div", { children: "avatar" }));
13
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xs border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xs" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-sm" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-md" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-2xl" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xs" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-sm" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-md" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-lg" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2lx" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-3xl" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-4xl" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 justify-content-between gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xs border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xs border-circle absolute border-1 border-white", style: {
14
+ position: "absolute",
15
+ right: "0",
16
+ bottom: "0",
17
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
18
+ position: "absolute",
19
+ right: "0",
20
+ bottom: "0",
21
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle absolute border-1 border-white", style: {
22
+ position: "absolute",
23
+ right: "0",
24
+ bottom: "0",
25
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle absolute border-1 border-white", style: {
26
+ position: "absolute",
27
+ right: "0",
28
+ bottom: "0",
29
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle absolute border-1 border-white", style: {
30
+ position: "absolute",
31
+ right: "0",
32
+ bottom: "0",
33
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-2xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle absolute border-1 border-white", style: {
34
+ position: "absolute",
35
+ right: "0",
36
+ bottom: "0",
37
+ } })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 justify-content-between gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xs border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
38
+ right: "-2px",
39
+ bottom: "-2px",
40
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xs" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
41
+ right: "-2px",
42
+ bottom: "-2px",
43
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-sm" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
44
+ right: "-2px",
45
+ bottom: "-2px",
46
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-md" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
47
+ right: "-2px",
48
+ bottom: "-2px",
49
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
50
+ right: "-2px",
51
+ bottom: "-2px",
52
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-2xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
53
+ right: "-2px",
54
+ bottom: "-2px",
55
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-2xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 justify-content-between gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xs border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
56
+ right: "-2px",
57
+ bottom: "-2px",
58
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xs" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
59
+ right: "-2px",
60
+ bottom: "-2px",
61
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-sm" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
62
+ right: "-2px",
63
+ bottom: "-2px",
64
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-md" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
65
+ right: "-2px",
66
+ bottom: "-2px",
67
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
68
+ right: "-2px",
69
+ bottom: "-2px",
70
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-2xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
71
+ right: "-2px",
72
+ bottom: "-2px",
73
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xs border-circle relative bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xs" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xs border-circle border-1 border-white", style: {
74
+ position: "absolute",
75
+ right: "0px",
76
+ bottom: "0px",
77
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-sm border-circle relative bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-sm" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle border-1 border-white", style: {
78
+ position: "absolute",
79
+ right: "0px",
80
+ bottom: "0px",
81
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-md border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-md" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle border-1 border-white", style: {
82
+ position: "absolute",
83
+ right: "0px",
84
+ bottom: "0px",
85
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-lg border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-lg" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle border-1 border-white", style: {
86
+ position: "absolute",
87
+ right: "0px",
88
+ bottom: "0px",
89
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xl border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xl" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle border-1 border-white", style: {
90
+ position: "absolute",
91
+ right: "0px",
92
+ bottom: "0px",
93
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-2xl border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-2xl" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle border-1 border-white", style: {
94
+ position: "absolute",
95
+ right: "0px",
96
+ bottom: "0px",
97
+ } })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-xs border-circle bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xs" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-sm border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-sm" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-md border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-md" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-lg border-circle bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-lg" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-xl border-circle bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xl" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-2xl border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-2xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-sm border-circle relative bg-gray-100 flex align-items-center text-sm text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
98
+ right: "0px",
99
+ bottom: "0px",
100
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-md border-circle relative bg-gray-100 flex align-items-center text-lg text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle absolute border-1 border-white", style: {
101
+ right: "0px",
102
+ bottom: "0px",
103
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-lg border-circle relative bg-gray-100 text-18 flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle absolute border-1 border-white", style: {
104
+ position: "absolute",
105
+ right: "0px",
106
+ bottom: "0px",
107
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xl 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", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle absolute border-1 border-white", style: {
108
+ position: "absolute",
109
+ right: "0px",
110
+ bottom: "0px",
111
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-2xl 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" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle absolute border-1 border-white", style: {
112
+ position: "absolute",
113
+ right: "0px",
114
+ bottom: "0px",
115
+ } })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-sm border-circle bg-gray-100 flex align-items-center text-sm text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-md border-circle bg-gray-100 flex align-items-center text-lg text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-lg border-circle bg-gray-100 text-18 flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-xl border-circle 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" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-2xl 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" }, { children: "OR" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-md border-circle relative bg-gray-100 text-lg flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
116
+ position: "absolute",
117
+ right: "-2px",
118
+ bottom: "-2px",
119
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-md" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-lg border-circle relative bg-gray-100 text-18 flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
120
+ position: "absolute",
121
+ right: "-2px",
122
+ bottom: "-2px",
123
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xl 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" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
124
+ position: "absolute",
125
+ right: "-2px",
126
+ bottom: "-2px",
127
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "p-avatar-xs border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-2rem h-2rem p-0 flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed p-avatar-md flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: true, rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed p-avatar-md flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: "+2", shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, 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" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: "+2", shape: "circle", size: "xlarge", className: "bg-gray-100 text-gray-600 text-base line-height-3 font-medium" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, 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 p-avatar-md flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
128
+ position: "absolute",
129
+ right: "0",
130
+ bottom: "0",
131
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle absolute border-1 border-white", style: {
132
+ position: "absolute",
133
+ right: "0",
134
+ bottom: "0",
135
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
136
+ right: "-2px",
137
+ bottom: "-2px",
138
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
139
+ right: "-2px",
140
+ bottom: "-2px",
141
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-18 font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-profile-72 border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white p-profile-72 sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
142
+ right: "-2px",
143
+ bottom: "-2px",
144
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6rem h-6rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white w-6rem h-6rem sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
145
+ right: "2px",
146
+ bottom: "2px",
147
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-3xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-11rem h-11rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white w-11rem h-11rem sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
148
+ right: "4px",
149
+ bottom: "4px",
150
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-4xl" }) }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10rem flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: profile_square_image_png_1.default, alt: "profile", className: "h-10rem " }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-900 line-height-3 pt-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 line-height-3 " }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "link-01" }) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com", className: "text-gray-500 font-normal" }, { children: "Source" }))] }))] })) }))] }))] }));
6
151
  };
7
152
  exports.default = AvatarComponent;
package/dist/pages/badges/badge.js CHANGED
@@ -50,6 +50,12 @@ const BadgeComponent = () => {
50
50
  const labelOptionTemplate = (option) => {
51
51
  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 }))] })));
52
52
  };
53
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Badges" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-8 h-full w-full flex flex-column" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid " }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-100 border-circle flex align-items-center justify-content-center p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-100 border-circle flex align-items-center justify-content-center p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-red-600" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 " }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto" }, { children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) }))] })) }))] }));
53
+ 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.jsx)("span", Object.assign({ 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: "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.jsxs)("span", Object.assign({ id: "badge-1", 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: () => {
54
+ const el = document.getElementById("badge-1");
55
+ el.remove();
56
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2", 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: () => {
57
+ const el = document.getElementById("badge-2");
58
+ el.remove();
59
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-100 border-circle flex align-items-center justify-content-center p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-100 border-circle flex align-items-center justify-content-center p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-red-600" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 " }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto" }, { children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) }))] })) }))] }));
54
60
  };
55
61
  exports.default = BadgeComponent;
package/dist/pages/checkbox/checkbox.js CHANGED
@@ -9,7 +9,7 @@ const CheckboxComponent = () => {
9
9
  const [checkedBox, setCheckedBox] = (0, react_1.useState)(false);
10
10
  const [checkedCircle, setCheckedCircle] = (0, react_1.useState)(false);
11
11
  const [indeterminateBox, setIndeterminateBox] = (0, react_1.useState)(false);
12
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Checkbox & Checkcircle" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
12
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Checkbox & Checkcircle" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
13
13
  setCheckedBox(e.checked);
14
14
  }, checked: checkedBox, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => {
15
15
  setIndeterminateBox(e.checked);
package/dist/pages/home.js CHANGED
@@ -15,7 +15,9 @@ const progress_bar_1 = tslib_1.__importDefault(require("./progress-bar/progress-
15
15
  const avatar_1 = tslib_1.__importDefault(require("./avatar/avatar"));
16
16
  const flex_1 = tslib_1.__importDefault(require("./flex"));
17
17
  const checkbox_group_component_1 = tslib_1.__importDefault(require("./checkbox-group/checkbox-group-component"));
18
+ const toggle_1 = tslib_1.__importDefault(require("./toggle/toggle"));
19
+ const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
18
20
  const Home = () => {
19
- return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) })] }) }));
21
+ return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) })] }) }));
20
22
  };
21
23
  exports.default = Home;
package/dist/pages/progress-bar/progress-bar.js CHANGED
@@ -7,18 +7,18 @@ const slider_1 = require("primereact/slider");
7
7
  require("./progress-bar.scss");
8
8
  const ProgressBarComponent = () => {
9
9
  const [value, setValue] = (0, react_1.useState)("");
10
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Progress-Bar" })), (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-14rem my-8 ml-auto mr-auto" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid mt-7 w-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
10
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Progress-Bar" })), (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-14rem my-8 ml-auto mr-auto progress-slider" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full w-full flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid mt-7 w-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
11
11
  position: "absolute",
12
- top: 35,
12
+ top: 33,
13
13
  left: `${value}%`,
14
14
  transition: "left 1s ease-in-out",
15
15
  transform: "translate(-50%, -50%)",
16
- }, className: "px-3 p-progress-value border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2 flex align-items-start text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
16
+ }, className: "px-3 p-progress-value h-2rem border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2 flex align-items-start text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
17
17
  position: "absolute",
18
- top: -30,
18
+ top: -24,
19
19
  left: `${value}%`,
20
20
  transition: "left 1s ease-in-out",
21
21
  transform: "translate(-50%, -50%)",
22
- }, className: "p-progress-value px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value py-2 flex align-items-center text-center text-sm" }, { children: [value, "%"] }))] })) }))] })) }))] }));
22
+ }, className: "p-progress-value h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value py-2 flex align-items-center text-center text-sm" }, { children: [value, "%"] }))] })) }))] })) }))] }));
23
23
  };
24
24
  exports.default = ProgressBarComponent;
package/dist/pages/tags/tags.js CHANGED
@@ -4,8 +4,58 @@ const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const tag_1 = require("primereact/tag");
6
6
  const chip_1 = require("primereact/chip");
7
+ const checkbox_1 = require("primereact/checkbox");
8
+ const react_1 = require("react");
7
9
  const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
10
+ const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
11
+ const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
12
+ require("./tags.scss");
8
13
  const TagComponent = () => {
9
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "h-full w-full p-8 flex flex-wrap align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, { value: "Label", className: "bg-white text-gray-700 border-gray-300 border-1 font-medium px-2" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Label", removable: true, removeIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-new" }), className: "bg-white border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-base" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 pl-2 pr-1 " }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-1 font-medium text-base" }, { children: ["Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-base border-round-sm" }, { children: "5" }))] })) }))] }))] }));
14
+ const [checked, setchecked] = (0, react_1.useState)(false);
15
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 xl:3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, { value: "Label", className: "bg-white text-gray-700 border-gray-300 border-1 font-medium px-2 py-1" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-1", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: ["Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
16
+ const el = document.getElementById("chip-1");
17
+ el.remove();
18
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center relative text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1 " }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: ["Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1 " }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm pr-1" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
19
+ setchecked(!checked);
20
+ } }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-2", removable: true, template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => { } }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
21
+ const el = document.getElementById("chip-2");
22
+ el.remove();
23
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 px-2 py-1 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
24
+ setchecked(!checked);
25
+ } }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-3", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
26
+ const el = document.getElementById("chip-3");
27
+ el.remove();
28
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
29
+ setchecked(!checked);
30
+ } }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-4", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
31
+ setchecked(!checked);
32
+ } }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
33
+ const el = document.getElementById("chip-4");
34
+ el.remove();
35
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
36
+ setchecked(!checked);
37
+ } }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-5", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
38
+ const el = document.getElementById("chip-5");
39
+ el.remove();
40
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm pr-1" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
41
+ setchecked(!checked);
42
+ } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-6", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
43
+ setchecked(!checked);
44
+ } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
45
+ const el = document.getElementById("chip-6");
46
+ el.remove();
47
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
48
+ setchecked(!checked);
49
+ } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-7", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
50
+ const el = document.getElementById("chip-7");
51
+ el.remove();
52
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
53
+ setchecked(!checked);
54
+ } }), (0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-8", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
55
+ const el = document.getElementById("chip-8");
56
+ el.remove();
57
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
58
+ setchecked(!checked);
59
+ } }), (0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Label", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] }))] }))] }));
10
60
  };
11
61
  exports.default = TagComponent;