sccoreui 2.1.9 → 2.2.1
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.
- package/dist/App.scss +7 -5
- package/dist/assets/App copy.scss +63 -0
- package/dist/assets/sccoreui.css +3 -3
- package/dist/assets copy/svg/svg.js +32 -0
- package/dist/components/button/speed-dial.js +4 -0
- package/dist/components/button/split-button.js +4 -0
- package/dist/components/chips/chips.js +4 -0
- package/dist/components/input/input-mask.js +4 -0
- package/dist/components/input/input-switch.js +4 -0
- package/dist/components/input/input-textarea.js +4 -0
- package/dist/components/rating/rating.js +4 -0
- package/dist/directives/svg-icons.js +72 -15
- package/dist/index.js +15 -1
- package/dist/pages/badges/badge.js +11 -17
- package/dist/types/assets copy/svg/svg.d.ts +7 -0
- package/dist/types/components/button/speed-dial.d.ts +2 -0
- package/dist/types/components/button/split-button.d.ts +2 -0
- package/dist/types/components/chips/chips.d.ts +2 -0
- package/dist/types/components/input/input-mask.d.ts +2 -0
- package/dist/types/components/input/input-switch.d.ts +2 -0
- package/dist/types/components/input/input-textarea.d.ts +2 -0
- package/dist/types/components/rating/rating.d.ts +2 -0
- package/dist/types/index.d.ts +7 -0
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -27,17 +27,19 @@
|
|
|
27
27
|
src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
* {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
30
|
+
// * {
|
|
31
|
+
// padding: 0;
|
|
32
|
+
// margin: 0;
|
|
33
|
+
// }
|
|
34
34
|
|
|
35
35
|
body {
|
|
36
|
-
margin: 0;
|
|
37
36
|
font-family: 'Lato-400', sans-serif;
|
|
38
37
|
-webkit-font-smoothing: antialiased;
|
|
39
38
|
-moz-osx-font-smoothing: grayscale;
|
|
40
39
|
line-height: var(--lh);
|
|
40
|
+
padding: 0;
|
|
41
|
+
margin: 0;
|
|
42
|
+
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
code {
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@import url('./assets/theme.css');
|
|
2
|
+
@import url('./assets/sccoreui.css');
|
|
3
|
+
@import url('./assets/sccoreicons.css');
|
|
4
|
+
@import url('./assets/flex.css');
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--fw-600: 600;
|
|
8
|
+
--fw-400: 400;
|
|
9
|
+
--fs-24: 24px;
|
|
10
|
+
--fs-18: 18px;
|
|
11
|
+
--fs-16: 16px;
|
|
12
|
+
--lh:24px;
|
|
13
|
+
--fs-14:14px;
|
|
14
|
+
--grey-bg:#101828;
|
|
15
|
+
--border-none: border-none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@font-face {
|
|
19
|
+
font-family: 'Lato-400';
|
|
20
|
+
font-weight: 400;
|
|
21
|
+
src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@font-face {
|
|
25
|
+
font-family: 'Lato-600';
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
src: url('./assets/fonts/Lato-Regular.ttf') format('truetype');
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// * {
|
|
31
|
+
// padding: 0;
|
|
32
|
+
// margin: 0;
|
|
33
|
+
// }
|
|
34
|
+
|
|
35
|
+
body {
|
|
36
|
+
font-family: 'Lato-400', sans-serif;
|
|
37
|
+
-webkit-font-smoothing: antialiased;
|
|
38
|
+
-moz-osx-font-smoothing: grayscale;
|
|
39
|
+
line-height: var(--lh);
|
|
40
|
+
padding: 0;
|
|
41
|
+
margin: 0;
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
code {
|
|
46
|
+
font-family: 'Lato-400', monospace;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
h1 {
|
|
50
|
+
font-size: var(--fs-24);
|
|
51
|
+
font-weight: var(--fw-600);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
h2 {
|
|
55
|
+
font-size: var(--fs-18);
|
|
56
|
+
font-weight: var(--fw-600);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
h3 {
|
|
60
|
+
font-size: var(--fs-16);
|
|
61
|
+
font-weight: var(--fw-400);
|
|
62
|
+
}
|
|
63
|
+
|
package/dist/assets/sccoreui.css
CHANGED
|
@@ -910,7 +910,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
|
|
|
910
910
|
background: transparent;
|
|
911
911
|
border: 0 none;
|
|
912
912
|
text-align: left;
|
|
913
|
-
line-height:
|
|
913
|
+
line-height: 20px;
|
|
914
914
|
padding-inline-start: 0px;
|
|
915
915
|
}
|
|
916
916
|
.p-inputgroup > .p-dropdown > .p-dropdown-label {
|
|
@@ -925,7 +925,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
|
|
|
925
925
|
color: var(--gray-500);
|
|
926
926
|
text-align: left;
|
|
927
927
|
height: 24px;
|
|
928
|
-
line-height:
|
|
928
|
+
line-height: 20px;
|
|
929
929
|
font-size: 16px;
|
|
930
930
|
font-weight: 400;
|
|
931
931
|
padding-inline-start: 0px;
|
|
@@ -5356,7 +5356,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
|
|
|
5356
5356
|
/* box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); */
|
|
5357
5357
|
border-radius: 8px;
|
|
5358
5358
|
border: 1px solid #eaecf0;
|
|
5359
|
-
padding: 10px 16px;
|
|
5359
|
+
padding: 6px 16px 10px 16px;
|
|
5360
5360
|
}
|
|
5361
5361
|
.p-card:hover {
|
|
5362
5362
|
box-shadow: 0px 0px 2px #c5c5c5;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Times = exports.Copy = exports.Dollar = exports.Message = exports.Error = exports.Card = exports.InfoLogo = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const InfoLogo = () => {
|
|
6
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M6.05992 5.99998C6.21665 5.55442 6.52602 5.17872 6.93322 4.9394C7.34042 4.70009 7.81918 4.61261 8.2847 4.69245C8.75022 4.7723 9.17246 5.01433 9.47664 5.37567C9.78081 5.737 9.94729 6.19433 9.94659 6.66665C9.94659 7.99998 7.94659 8.66665 7.94659 8.66665M7.99992 11.3333H8.00659M14.6666 7.99998C14.6666 11.6819 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6819 1.33325 7.99998C1.33325 4.31808 4.31802 1.33331 7.99992 1.33331C11.6818 1.33331 14.6666 4.31808 14.6666 7.99998Z", stroke: "#98A2B3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
7
|
+
};
|
|
8
|
+
exports.InfoLogo = InfoLogo;
|
|
9
|
+
const Card = () => {
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { width: "34", height: "24", viewBox: "0 0 34 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "23", rx: "3.5", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.179 16.8295C15.9949 17.8275 14.459 18.43 12.7807 18.43C9.03582 18.43 6 15.4303 6 11.73C6 8.02972 9.03582 5.03003 12.7807 5.03003C14.459 5.03003 15.9949 5.63253 17.179 6.63057C18.363 5.63253 19.8989 5.03003 21.5773 5.03003C25.3221 5.03003 28.358 8.02972 28.358 11.73C28.358 15.4303 25.3221 18.43 21.5773 18.43C19.8989 18.43 18.363 17.8275 17.179 16.8295Z", fill: "#ED0006" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1792 16.8295C18.6371 15.6006 19.5616 13.772 19.5616 11.73C19.5616 9.68807 18.6371 7.85947 17.1792 6.63057C18.3632 5.63253 19.8992 5.03003 21.5775 5.03003C25.3224 5.03003 28.3582 8.02972 28.3582 11.73C28.3582 15.4303 25.3224 18.43 21.5775 18.43C19.8992 18.43 18.3632 17.8275 17.1792 16.8295Z", fill: "#F9A000" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.1788 16.8295C18.6367 15.6006 19.5611 13.772 19.5611 11.7301C19.5611 9.68811 18.6367 7.85952 17.1788 6.63062C15.7208 7.85952 14.7964 9.68811 14.7964 11.7301C14.7964 13.772 15.7208 15.6006 17.1788 16.8295Z", fill: "#FF5E00" }), (0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "23", rx: "3.5", stroke: "#F2F4F7" })] }));
|
|
11
|
+
};
|
|
12
|
+
exports.Card = Card;
|
|
13
|
+
const Error = () => {
|
|
14
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.99992 5.33337V8.00004M7.99992 10.6667H8.00659M14.6666 8.00004C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00004C1.33325 4.31814 4.31802 1.33337 7.99992 1.33337C11.6818 1.33337 14.6666 4.31814 14.6666 8.00004Z", stroke: "var(--red-500)", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
15
|
+
};
|
|
16
|
+
exports.Error = Error;
|
|
17
|
+
const Message = () => {
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "16", viewBox: "0 0 20 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M1.66675 3.83331L8.47085 8.59618C9.02182 8.98187 9.29731 9.17471 9.59697 9.2494C9.86166 9.31538 10.1385 9.31538 10.4032 9.2494C10.7029 9.17471 10.9783 8.98187 11.5293 8.59618L18.3334 3.83331M5.66675 14.6666H14.3334C15.7335 14.6666 16.4336 14.6666 16.9684 14.3942C17.4388 14.1545 17.8212 13.772 18.0609 13.3016C18.3334 12.7668 18.3334 12.0668 18.3334 10.6666V5.33331C18.3334 3.93318 18.3334 3.23312 18.0609 2.69834C17.8212 2.22793 17.4388 1.84548 16.9684 1.6058C16.4336 1.33331 15.7335 1.33331 14.3334 1.33331H5.66675C4.26662 1.33331 3.56655 1.33331 3.03177 1.6058C2.56137 1.84548 2.17892 2.22793 1.93923 2.69834C1.66675 3.23312 1.66675 3.93318 1.66675 5.33331V10.6666C1.66675 12.0668 1.66675 12.7668 1.93923 13.3016C2.17892 13.772 2.56137 14.1545 3.03177 14.3942C3.56655 14.6666 4.26662 14.6666 5.66675 14.6666Z", stroke: "#667085", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
19
|
+
};
|
|
20
|
+
exports.Message = Message;
|
|
21
|
+
const Dollar = () => {
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.904 12.904C5.256 12.872 5.56533 12.7973 5.832 12.68C6.09867 12.5573 6.32267 12.4027 6.504 12.216C6.69067 12.0293 6.82933 11.8133 6.92 11.568C7.016 11.3173 7.064 11.0427 7.064 10.744C7.064 10.4773 7.01333 10.248 6.912 10.056C6.816 9.864 6.68267 9.69867 6.512 9.56C6.34133 9.416 6.14133 9.296 5.912 9.2C5.68267 9.09867 5.43733 9.00533 5.176 8.92L4.904 12.904ZM4.64 3.656C4.29333 3.688 3.992 3.75733 3.736 3.864C3.48533 3.97067 3.27733 4.104 3.112 4.264C2.94667 4.424 2.824 4.60533 2.744 4.808C2.664 5.00533 2.624 5.21333 2.624 5.432C2.624 5.688 2.66933 5.912 2.76 6.104C2.85067 6.29067 2.976 6.456 3.136 6.6C3.296 6.744 3.48267 6.86933 3.696 6.976C3.90933 7.08267 4.14133 7.17867 4.392 7.264L4.64 3.656ZM5.272 7.544C5.656 7.66667 6.03467 7.79733 6.408 7.936C6.78133 8.07467 7.11733 8.25333 7.416 8.472C7.71467 8.69067 7.95467 8.96533 8.136 9.296C8.32267 9.62133 8.416 10.0293 8.416 10.52C8.416 11 8.336 11.4507 8.176 11.872C8.016 12.2933 7.78133 12.664 7.472 12.984C7.168 13.304 6.792 13.5653 6.344 13.768C5.90133 13.9653 5.39467 14.0827 4.824 14.12L4.728 15.52C4.72267 15.6213 4.68267 15.7093 4.608 15.784C4.53333 15.864 4.44 15.904 4.328 15.904H3.8L3.92 14.104C3.27467 14.04 2.68533 13.88 2.152 13.624C1.624 13.3627 1.168 13.032 0.784 12.632L1.216 11.976C1.25867 11.9173 1.312 11.8693 1.376 11.832C1.44 11.7947 1.50933 11.776 1.584 11.776C1.68533 11.776 1.8 11.8267 1.928 11.928C2.056 12.0293 2.21333 12.144 2.4 12.272C2.592 12.4 2.816 12.5253 3.072 12.648C3.33333 12.7707 3.64533 12.8533 4.008 12.896L4.296 8.648C3.92267 8.536 3.55467 8.41067 3.192 8.272C2.83467 8.13333 2.512 7.94933 2.224 7.72C1.94133 7.49067 1.712 7.20533 1.536 6.864C1.36533 6.52267 1.28 6.09333 1.28 5.576C1.28 5.18667 1.35467 4.808 1.504 4.44C1.65867 4.06667 1.88267 3.736 2.176 3.448C2.46933 3.16 2.82933 2.92533 3.256 2.744C3.68267 2.55733 4.17067 2.45333 4.72 2.432L4.8 1.28C4.80533 1.17867 4.84267 1.088 4.912 1.008C4.98667 0.927999 5.08267 0.888 5.2 0.888H5.728L5.624 2.464C6.17867 2.53333 6.65867 2.67733 7.064 2.896C7.47467 3.11467 7.83733 3.38133 8.152 3.696L7.808 4.224C7.70133 4.384 7.57867 4.464 7.44 4.464C7.36533 4.464 7.272 4.432 7.16 4.368C7.05333 4.29867 6.92267 4.21867 6.768 4.128C6.61867 4.03733 6.44 3.94933 6.232 3.864C6.02933 3.77867 5.79733 3.71467 5.536 3.672L5.272 7.544Z", fill: "#475467" }) }));
|
|
23
|
+
};
|
|
24
|
+
exports.Dollar = Dollar;
|
|
25
|
+
const Copy = () => {
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "var(--gray-700)", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.1665 12.5C3.38993 12.5 3.00165 12.5 2.69536 12.3732C2.28698 12.204 1.96253 11.8795 1.79337 11.4712C1.6665 11.1649 1.6665 10.7766 1.6665 10V4.33335C1.6665 3.39993 1.6665 2.93322 1.84816 2.5767C2.00795 2.2631 2.26292 2.00813 2.57652 1.84834C2.93304 1.66669 3.39975 1.66669 4.33317 1.66669H9.99984C10.7764 1.66669 11.1647 1.66669 11.471 1.79355C11.8794 1.96271 12.2038 2.28717 12.373 2.69555C12.4998 3.00183 12.4998 3.39012 12.4998 4.16669M10.1665 18.3334H15.6665C16.5999 18.3334 17.0666 18.3334 17.4232 18.1517C17.7368 17.9919 17.9917 17.7369 18.1515 17.4233C18.3332 17.0668 18.3332 16.6001 18.3332 15.6667V10.1667C18.3332 9.23327 18.3332 8.76656 18.1515 8.41004C17.9917 8.09643 17.7368 7.84147 17.4232 7.68168C17.0666 7.50002 16.5999 7.50002 15.6665 7.50002H10.1665C9.23308 7.50002 8.76637 7.50002 8.40985 7.68168C8.09625 7.84147 7.84128 8.09643 7.68149 8.41004C7.49984 8.76656 7.49984 9.23327 7.49984 10.1667V15.6667C7.49984 16.6001 7.49984 17.0668 7.68149 17.4233C7.84128 17.7369 8.09625 17.9919 8.40985 18.1517C8.76637 18.3334 9.23308 18.3334 10.1665 18.3334Z", stroke: "#344054", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
27
|
+
};
|
|
28
|
+
exports.Copy = Copy;
|
|
29
|
+
const Times = () => {
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 1L1 7M1 1L7 7", stroke: "#98A2B3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
31
|
+
};
|
|
32
|
+
exports.Times = Times;
|
|
@@ -37,12 +37,33 @@ exports.svgIcons = [
|
|
|
37
37
|
</svg>
|
|
38
38
|
`,
|
|
39
39
|
},
|
|
40
|
+
{
|
|
41
|
+
name: "close-chip-green-600",
|
|
42
|
+
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
43
|
+
<path d="M7 1L1 7M1 1L7 7" stroke="#12B76A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
44
|
+
</svg>
|
|
45
|
+
`,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "close-chip-primary-600",
|
|
49
|
+
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
50
|
+
<path d="M7 1L1 7M1 1L7 7" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
51
|
+
</svg>
|
|
52
|
+
`,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: "close-chip-red-600",
|
|
56
|
+
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
57
|
+
<path d="M7 1L1 7M1 1L7 7" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
|
+
</svg>
|
|
59
|
+
`,
|
|
60
|
+
},
|
|
40
61
|
{
|
|
41
62
|
name: "close-chip",
|
|
42
63
|
svg: `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
43
64
|
<path d="M7 1L1 7M1 1L7 7" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
44
65
|
</svg>
|
|
45
|
-
|
|
66
|
+
`,
|
|
46
67
|
},
|
|
47
68
|
{
|
|
48
69
|
name: "close-toaster",
|
|
@@ -56,14 +77,14 @@ exports.svgIcons = [
|
|
|
56
77
|
svg: `<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
57
78
|
<path d="M1 1.5L6 6.5L11 1.5" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
79
|
</svg>
|
|
59
|
-
|
|
80
|
+
`,
|
|
60
81
|
},
|
|
61
82
|
{
|
|
62
83
|
name: "help-circle",
|
|
63
84
|
svg: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
64
85
|
<path d="M6.05992 5.99998C6.21665 5.55442 6.52602 5.17872 6.93322 4.9394C7.34042 4.70009 7.81918 4.61261 8.2847 4.69245C8.75022 4.7723 9.17246 5.01433 9.47664 5.37567C9.78081 5.737 9.94729 6.19433 9.94659 6.66665C9.94659 7.99998 7.94659 8.66665 7.94659 8.66665M7.99992 11.3333H8.00659M14.6666 7.99998C14.6666 11.6819 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6819 1.33325 7.99998C1.33325 4.31808 4.31802 1.33331 7.99992 1.33331C11.6818 1.33331 14.6666 4.31808 14.6666 7.99998Z" stroke="#98A2B3" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
65
86
|
</svg>
|
|
66
|
-
|
|
87
|
+
`,
|
|
67
88
|
},
|
|
68
89
|
{
|
|
69
90
|
name: "alert-circle",
|
|
@@ -120,7 +141,6 @@ exports.svgIcons = [
|
|
|
120
141
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1788 16.8294C18.6367 15.6005 19.5611 13.7719 19.5611 11.73C19.5611 9.68805 18.6367 7.85946 17.1788 6.63055C15.7208 7.85946 14.7964 9.68805 14.7964 11.73C14.7964 13.7719 15.7208 15.6005 17.1788 16.8294Z" fill="#FF5E00"/>
|
|
121
142
|
<rect x="0.5" y="0.5" width="33" height="23" rx="3.5" stroke="#F2F4F7"/>
|
|
122
143
|
</svg>
|
|
123
|
-
|
|
124
144
|
`,
|
|
125
145
|
},
|
|
126
146
|
{
|
|
@@ -138,7 +158,7 @@ exports.svgIcons = [
|
|
|
138
158
|
`,
|
|
139
159
|
},
|
|
140
160
|
{
|
|
141
|
-
name: "arrow-right-gray-
|
|
161
|
+
name: "arrow-right-gray-600",
|
|
142
162
|
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
143
163
|
<path d="M1.5 5H8.5M8.5 5L5 1.5M8.5 5L5 8.5" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
144
164
|
</svg>
|
|
@@ -152,14 +172,21 @@ exports.svgIcons = [
|
|
|
152
172
|
`,
|
|
153
173
|
},
|
|
154
174
|
{
|
|
155
|
-
name: "arrow-right-
|
|
175
|
+
name: "arrow-right-green-600",
|
|
176
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
177
|
+
<path d="M1.5 5H8.5M8.5 5L5 1.5M8.5 5L5 8.5" stroke="#12B76A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
178
|
+
</svg>
|
|
179
|
+
`,
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
name: "arrow-right-primary-600",
|
|
156
183
|
svg: `<svg width="10" height="10" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
157
184
|
<path d="M1.33334 6.00004H10.6667M10.6667 6.00004L6.00001 1.33337M10.6667 6.00004L6.00001 10.6667" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
158
185
|
</svg>
|
|
159
186
|
`,
|
|
160
187
|
},
|
|
161
188
|
{
|
|
162
|
-
name: "arrow-right-
|
|
189
|
+
name: "arrow-right-red-600",
|
|
163
190
|
svg: `<svg width="10" height="10" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
164
191
|
<path d="M1.33334 5.99992H10.6667M10.6667 5.99992L6.00001 1.33325M10.6667 5.99992L6.00001 10.6666" stroke="#F04438" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
165
192
|
</svg>
|
|
@@ -170,24 +197,55 @@ exports.svgIcons = [
|
|
|
170
197
|
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
171
198
|
<path d="M1.5 5H8.5M8.5 5L5 1.5M8.5 5L5 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
172
199
|
</svg>
|
|
173
|
-
|
|
174
|
-
`,
|
|
200
|
+
`,
|
|
175
201
|
},
|
|
176
202
|
{
|
|
177
203
|
name: "arrow-top",
|
|
178
204
|
svg: `<svg width="12" height="12" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
179
205
|
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#162578" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
206
|
+
</svg>
|
|
207
|
+
`,
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
name: "arrow-top-green-600",
|
|
211
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
212
|
+
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#12B76A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
213
|
+
</svg>
|
|
214
|
+
`,
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
name: "arrow-top-primary-600",
|
|
218
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
219
|
+
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#132067" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
220
|
+
</svg>
|
|
221
|
+
`,
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
name: "arrow-top-red-600",
|
|
225
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
226
|
+
<path d="M5 8.5V1.5M5 1.5L1.5 5M5 1.5L8.5 5" stroke="#D92D20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
227
|
+
</svg>
|
|
228
|
+
`,
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
name: "plus-icon-primary-600",
|
|
232
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
233
|
+
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#132067" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
234
|
+
</svg>
|
|
235
|
+
`,
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
name: "plus-icon-red-600",
|
|
239
|
+
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
240
|
+
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#D92D20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
180
241
|
</svg>
|
|
181
|
-
|
|
182
242
|
`,
|
|
183
243
|
},
|
|
184
244
|
{
|
|
185
|
-
name: "plus-icon",
|
|
245
|
+
name: "plus-icon-green-600",
|
|
186
246
|
svg: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
187
|
-
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#
|
|
247
|
+
<path d="M5 1.5V8.5M1.5 5H8.5" stroke="#039855" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
188
248
|
</svg>
|
|
189
|
-
|
|
190
|
-
|
|
191
249
|
`,
|
|
192
250
|
},
|
|
193
251
|
{
|
|
@@ -209,7 +267,6 @@ exports.svgIcons = [
|
|
|
209
267
|
svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
210
268
|
<path d="M6.24984 10.0013L8.74984 12.5013L13.7498 7.5013M18.3332 10.0013C18.3332 14.6037 14.6022 18.3346 9.99984 18.3346C5.39746 18.3346 1.6665 14.6037 1.6665 10.0013C1.6665 5.39893 5.39746 1.66797 9.99984 1.66797C14.6022 1.66797 18.3332 5.39893 18.3332 10.0013Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
211
269
|
</svg>
|
|
212
|
-
|
|
213
270
|
`,
|
|
214
271
|
},
|
|
215
272
|
{
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
|
|
3
|
+
exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const client_1 = tslib_1.__importDefault(require("react-dom/client"));
|
|
@@ -81,4 +81,18 @@ Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { r
|
|
|
81
81
|
var data_view_1 = require("./components/data-view/data-view");
|
|
82
82
|
Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return data_view_1.DataView; } });
|
|
83
83
|
Object.defineProperty(exports, "DataViewLayoutOptions", { enumerable: true, get: function () { return data_view_1.DataViewLayoutOptions; } });
|
|
84
|
+
var split_button_1 = require("./components/button/split-button");
|
|
85
|
+
Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_1).default; } });
|
|
86
|
+
var split_button_2 = require("./components/button/split-button");
|
|
87
|
+
Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_2).default; } });
|
|
88
|
+
var input_mask_1 = require("./components/input/input-mask");
|
|
89
|
+
Object.defineProperty(exports, "InputMask", { enumerable: true, get: function () { return tslib_1.__importDefault(input_mask_1).default; } });
|
|
90
|
+
var input_switch_1 = require("./components/input/input-switch");
|
|
91
|
+
Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return tslib_1.__importDefault(input_switch_1).default; } });
|
|
92
|
+
var input_textarea_1 = require("./components/input/input-textarea");
|
|
93
|
+
Object.defineProperty(exports, "InputTextarea", { enumerable: true, get: function () { return tslib_1.__importDefault(input_textarea_1).default; } });
|
|
94
|
+
var rating_1 = require("./components/rating/rating");
|
|
95
|
+
Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return tslib_1.__importDefault(rating_1).default; } });
|
|
96
|
+
var chips_1 = require("./components/chips/chips");
|
|
97
|
+
Object.defineProperty(exports, "Chips", { enumerable: true, get: function () { return tslib_1.__importDefault(chips_1).default; } });
|
|
84
98
|
client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));
|
|
@@ -13,49 +13,43 @@ const button_1 = require("primereact/button");
|
|
|
13
13
|
const BadgeComponent = () => {
|
|
14
14
|
// dropdown badge state
|
|
15
15
|
const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
|
|
16
|
-
name: "
|
|
16
|
+
name: "Error",
|
|
17
17
|
code: "bg-red-500",
|
|
18
|
-
text_code: "text-
|
|
19
|
-
bg: "bg-
|
|
18
|
+
text_code: "text-red-700",
|
|
19
|
+
bg: "bg-red-50",
|
|
20
20
|
});
|
|
21
21
|
//dropdown badge options list
|
|
22
22
|
const labels = [
|
|
23
23
|
{
|
|
24
|
-
name: "
|
|
24
|
+
name: "Error",
|
|
25
25
|
code: "bg-red-500",
|
|
26
|
-
text_code: "text-
|
|
27
|
-
bg: "bg-
|
|
26
|
+
text_code: "text-red-700",
|
|
27
|
+
bg: "bg-red-50",
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
name: "
|
|
30
|
+
name: "Pending",
|
|
31
31
|
code: "bg-primary-500",
|
|
32
32
|
text_code: "text-primary-700",
|
|
33
33
|
bg: "bg-primary-50",
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
name: "
|
|
36
|
+
name: "Success",
|
|
37
37
|
code: "bg-green-500",
|
|
38
38
|
text_code: "text-green-700",
|
|
39
39
|
bg: "bg-green-50",
|
|
40
40
|
},
|
|
41
|
-
{
|
|
42
|
-
name: "Label",
|
|
43
|
-
code: "bg-orange-500",
|
|
44
|
-
text_code: "text-orange-700",
|
|
45
|
-
bg: "bg-orange-50",
|
|
46
|
-
},
|
|
47
41
|
];
|
|
48
42
|
// badge dropdown selected lablel templete
|
|
49
|
-
const selectedlabelTemplate = (option
|
|
43
|
+
const selectedlabelTemplate = (option) => {
|
|
50
44
|
if (option) {
|
|
51
45
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
|
|
52
46
|
}
|
|
53
|
-
return (0, jsx_runtime_1.jsx)("span", { children:
|
|
47
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.text_code}`, children: selectedLabel.name })] }));
|
|
54
48
|
};
|
|
55
49
|
// badge dropdown option lablel templete
|
|
56
50
|
const labelOptionTemplate = (option) => {
|
|
57
51
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", { className: `${option.text_code}`, children: option.name })] }));
|
|
58
52
|
};
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Badges" }), (0, jsx_runtime_1.jsxs)("div", { className: "p-8 h-full w-full flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 mb-3 pl-1 pr-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl gap-2 text-gray-700 pr-4", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 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-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: " bg-red-100 mb-3 text-red-700 pl-3 pr-1 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-gray-700 gap-2 text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-red-600 gap-2 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-primary-50 pl-1 pr-4 mb-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-600 text-white 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-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 text-red-700 mb-3 pl-1 pr-3 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: " text-white bg-red-600 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-Error-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-12 sm:col-6 md:col-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " bg-white mb-3 pl-1 pr-3 py-1 flex align-items-center justify-content-between text-md font-medium border-round-3xl border-1 border-primary-600 text-gray-700 gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 text-gray-700 bg-white 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-primary-500" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white text-red-700 pl-3 pr-1 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl border-1 border-red-600 gap-2 ", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "text-red-700 border-1 border-red-600 gap-2 bg-white text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-Error-500" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex mt-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-gray-100 border-round-2xl px-3 py-1 text-gray-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-gray-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mx-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-500" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-gray-100 border-round-2xl flex align-items-center border-gray-700 border-1 py-1 gap-2 px-3 text-gray-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-3 mx-8" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "gap-5 my-8 w-full flex flex-wrap align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center border-gray-700 border-1 p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top" }) }), (0, jsx_runtime_1.jsx)("span", { className: " bg-gray-100 border-circle flex align-items-center justify-content-center p-3 text-gray-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon" }) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: "Label", className: "shadow-none p-dropdown-badge py-0 bg-red-50 border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl", valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500", 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", { className: "flex bg-gray-200 p-3 justify-content-center mb-4", children: "Badges" }), (0, jsx_runtime_1.jsx)("div", { className: "p-8 h-full w-full flex flex-column", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid ", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700", children: "Label" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700", children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700", children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Label" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 border-circle flex align-items-center justify-content-center p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-50 border-circle flex align-items-center justify-content-center p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-top-red-600" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 border-circle flex align-items-center justify-content-center p-3 text-green-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-green-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-primary-100 border-circle flex align-items-center justify-content-center p-3 text-primary-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-primary-600" }) }), (0, jsx_runtime_1.jsx)("span", { className: "bg-red-100 border-circle flex align-items-center justify-content-center p-3 text-red-700", children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "plus-icon-red-600" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500 flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 ", children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 ", children: "Sample text" }), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-primary-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-white" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-green-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-primary-600" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700", children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", { className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 ", children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-red-600" })] })] })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto", children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) })] }) })] }));
|
|
60
54
|
};
|
|
61
55
|
exports.default = BadgeComponent;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export function InfoLogo(): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export function Card(): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export function Error(): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export function Message(): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export function Dollar(): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export function Copy(): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export function Times(): import("react/jsx-runtime").JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -38,4 +38,11 @@ export { default as OverlayPanel } from './components/overlays/overlay-panel';
|
|
|
38
38
|
export { default as InputNumber } from './components/input/input-number';
|
|
39
39
|
export { default as Toast } from './components/toast/toast';
|
|
40
40
|
export { DataView, DataViewLayoutOptions } from './components/data-view/data-view';
|
|
41
|
+
export { default as SplitButton } from './components/button/split-button';
|
|
42
|
+
export { default as SpeedDial } from './components/button/split-button';
|
|
43
|
+
export { default as InputMask } from './components/input/input-mask';
|
|
44
|
+
export { default as InputSwitch } from './components/input/input-switch';
|
|
45
|
+
export { default as InputTextarea } from './components/input/input-textarea';
|
|
46
|
+
export { default as Rating } from './components/rating/rating';
|
|
47
|
+
export { default as Chips } from './components/chips/chips';
|
|
41
48
|
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent };
|