@node-core/ui-components 1.0.1-a459447336d99556960d6f9e1c997327b29e4974 → 1.0.1-b2d4fae0fc29bf3aeebacb37572f47a0a81dd8ed
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/Common/AlertBox/index.module.css +1 -76
- package/Common/AvatarGroup/Avatar/index.module.css +1 -59
- package/Common/AvatarGroup/Overlay/index.module.css +1 -37
- package/Common/AvatarGroup/index.module.css +1 -21
- package/Common/Badge/index.js +1 -3
- package/Common/Badge/index.module.css +1 -45
- package/Common/BadgeGroup/index.js +2 -2
- package/Common/BadgeGroup/index.module.css +1 -100
- package/Common/Banner/index.module.css +1 -44
- package/Common/BaseButton/index.module.css +1 -371
- package/Common/BaseCodeBox/index.module.css +1 -95
- package/Common/BaseCrossLink/index.module.css +1 -68
- package/Common/BaseLinkTabs/index.module.css +1 -76
- package/Common/BasePagination/Ellipsis/index.module.css +1 -15
- package/Common/BasePagination/PaginationListItem/index.module.css +1 -41
- package/Common/BasePagination/index.module.css +1 -39
- package/Common/Blockquote/index.module.css +1 -49
- package/Common/Breadcrumbs/BreadcrumbHomeLink/index.module.css +1 -4
- package/Common/Breadcrumbs/BreadcrumbItem/index.module.css +1 -51
- package/Common/Breadcrumbs/BreadcrumbLink/index.module.css +1 -31
- package/Common/Breadcrumbs/BreadcrumbRoot/index.module.css +1 -9
- package/Common/ChangeHistory/index.module.css +1 -197
- package/Common/CodeTabs/index.module.css +1 -66
- package/Common/DataTag/index.module.css +1 -53
- package/Common/GlowingBackdrop/index.module.css +1 -129
- package/Common/LanguageDropDown/index.module.css +1 -150
- package/Common/Modal/index.module.css +1 -233
- package/Common/NodejsLogo/index.module.css +1 -4
- package/Common/Notification/index.module.css +1 -103
- package/Common/Preview/index.module.css +1 -282
- package/Common/Select/index.js +2 -4
- package/Common/Select/index.module.css +1 -327
- package/Common/Separator/index.module.css +1 -12
- package/Common/Skeleton/index.module.css +1 -126
- package/Common/Tabs/index.module.css +1 -71
- package/Common/ThemeToggle/index.module.css +1 -21
- package/Common/Tooltip/index.module.css +1 -132
- package/Containers/Article/index.module.css +1 -138
- package/Containers/Footer/index.js +2 -3
- package/Containers/Footer/index.module.css +1 -60
- package/Containers/MetaBar/index.module.css +1 -122
- package/Containers/NavBar/NavItem/index.module.css +1 -73
- package/Containers/NavBar/index.module.css +1 -204
- package/Containers/Sidebar/SidebarGroup/index.module.css +1 -191
- package/Containers/Sidebar/SidebarItem/index.js +1 -1
- package/Containers/Sidebar/SidebarItem/index.module.css +1 -66
- package/Containers/Sidebar/index.module.css +1 -47
- package/MDX/CodeTabs.js +11 -2
- package/Providers/NotificationProvider/index.js +16 -0
- package/Providers/NotificationProvider/index.module.css +2 -0
- package/package.json +5 -2
- package/styles/index.css +1 -1135
- package/Containers/DocSideBar/index.js +0 -1
|
@@ -1,77 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.alertBox {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: row;
|
|
5
|
-
align-items: center;
|
|
6
|
-
gap: calc(var(--spacing, 0.25rem)*2);
|
|
7
|
-
border-radius: var(--radius-sm, 0.25rem);
|
|
8
|
-
padding-inline: calc(var(--spacing, 0.25rem)*4);
|
|
9
|
-
padding-block: calc(var(--spacing, 0.25rem)*3);
|
|
10
|
-
font-size: var(--text-sm, 0.875rem);
|
|
11
|
-
line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
|
|
12
|
-
color: var(--color-white, #fff);
|
|
13
|
-
a {
|
|
14
|
-
--tw-font-weight: var(--font-weight-bold, 700);
|
|
15
|
-
font-weight: var(--font-weight-bold, 700);
|
|
16
|
-
color: var(--color-white, #fff);
|
|
17
|
-
text-decoration-line: underline;
|
|
18
|
-
&:hover {
|
|
19
|
-
@media (hover: hover) {
|
|
20
|
-
color: var(--color-white, #fff);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
&:hover {
|
|
24
|
-
text-decoration-line: none;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
&.small {
|
|
28
|
-
gap: calc(var(--spacing, 0.25rem)*1);
|
|
29
|
-
padding-block: calc(var(--spacing, 0.25rem)*2);
|
|
30
|
-
font-size: var(--text-xs, 0.75rem);
|
|
31
|
-
line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
|
|
32
|
-
.title {
|
|
33
|
-
padding-inline: calc(var(--spacing, 0.25rem)*1);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
.title {
|
|
37
|
-
border-radius: var(--radius-xs, 0.125rem);
|
|
38
|
-
padding-inline: calc(var(--spacing, 0.25rem)*1.5);
|
|
39
|
-
}
|
|
40
|
-
svg {
|
|
41
|
-
display: inline;
|
|
42
|
-
width: calc(var(--spacing, 0.25rem)*5);
|
|
43
|
-
height: calc(var(--spacing, 0.25rem)*5);
|
|
44
|
-
}
|
|
45
|
-
&.info {
|
|
46
|
-
background-color: var(--color-info-600, #0c7bb3);
|
|
47
|
-
.title {
|
|
48
|
-
background-color: var(--color-info-700, #066291);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
&.success {
|
|
52
|
-
background-color: var(--color-green-600, #417e38);
|
|
53
|
-
.title {
|
|
54
|
-
background-color: var(--color-green-700, #2c682c);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
&.warning {
|
|
58
|
-
background-color: var(--color-warning-600, #ae5f00);
|
|
59
|
-
.title {
|
|
60
|
-
background-color: var(--color-warning-700, #8b4d04);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
&.danger {
|
|
64
|
-
background-color: var(--color-danger-600, #de1a1b);
|
|
65
|
-
.title {
|
|
66
|
-
background-color: var(--color-danger-700, #b80c0c);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
code {
|
|
70
|
-
all: unset;
|
|
71
|
-
font-family: var(--font-ibm-plex-mono, var(--font-ibm-plex-mono));
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
@property --tw-font-weight {
|
|
75
|
-
syntax: "*";
|
|
76
|
-
inherits: false;
|
|
77
|
-
}
|
|
2
|
+
.title{min-width:max-content}.alertBox{align-items:center;gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-sm,.25rem);padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));color:var(--color-white,#fff);flex-direction:row;display:flex}.alertBox a{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:var(--color-white,#fff);text-decoration-line:underline}@media (hover:hover){.alertBox a:hover{color:var(--color-white,#fff)}}.alertBox a:hover{text-decoration-line:none}.alertBox.small{gap:calc(var(--spacing,.25rem)*1);padding-block:calc(var(--spacing,.25rem)*2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333))}.alertBox.small .title{padding-inline:calc(var(--spacing,.25rem)*1)}.alertBox .title{border-radius:var(--radius-xs,.125rem);padding-inline:calc(var(--spacing,.25rem)*1.5)}.alertBox svg{width:calc(var(--spacing,.25rem)*5);height:calc(var(--spacing,.25rem)*5);display:inline}.alertBox.info{background-color:var(--color-info-600,#0c7bb3)}.alertBox.info .title{background-color:var(--color-info-700,#066291)}.alertBox.success{background-color:var(--color-green-600,#417e38)}.alertBox.success .title{background-color:var(--color-green-700,#2c682c)}.alertBox.warning{background-color:var(--color-warning-600,#ae5f00)}.alertBox.warning .title{background-color:var(--color-warning-700,#8b4d04)}.alertBox.danger{background-color:var(--color-danger-600,#de1a1b)}.alertBox.danger .title{background-color:var(--color-danger-700,#b80c0c)}.alertBox.neutral{background-color:var(--color-neutral-600,#929fa5)}.alertBox.neutral .title{background-color:var(--color-neutral-700,#6e7b83)}.alertBox code{all:unset;font-family:var(--font-ibm-plex-mono,var(--font-ibm-plex-mono))}@property --tw-font-weight{syntax:"*";inherits:false}
|
|
@@ -1,60 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.item {
|
|
3
|
-
display: flex;
|
|
4
|
-
height: 100%;
|
|
5
|
-
max-height: calc(var(--spacing, 0.25rem)*12);
|
|
6
|
-
width: 100%;
|
|
7
|
-
max-width: calc(var(--spacing, 0.25rem)*12);
|
|
8
|
-
align-items: center;
|
|
9
|
-
justify-content: center;
|
|
10
|
-
border-radius: calc(infinity*1px);
|
|
11
|
-
border-style: var(--tw-border-style);
|
|
12
|
-
border-width: 2px;
|
|
13
|
-
border-color: transparent;
|
|
14
|
-
background-color: var(--color-neutral-100, #f6f7f9);
|
|
15
|
-
object-fit: cover;
|
|
16
|
-
font-size: var(--text-xs, 0.75rem);
|
|
17
|
-
line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
|
|
18
|
-
color: var(--color-neutral-800, #556066);
|
|
19
|
-
@media (width >= 670px) {
|
|
20
|
-
max-height: calc(var(--spacing, 0.25rem)*10);
|
|
21
|
-
}
|
|
22
|
-
@media (width >= 670px) {
|
|
23
|
-
max-width: calc(var(--spacing, 0.25rem)*10);
|
|
24
|
-
}
|
|
25
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
26
|
-
background-color: var(--color-neutral-900, #2c3437);
|
|
27
|
-
}
|
|
28
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
29
|
-
color: var(--color-neutral-300, #d9e1e4);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
.avatar {
|
|
33
|
-
width: calc(var(--spacing, 0.25rem)*8);
|
|
34
|
-
height: calc(var(--spacing, 0.25rem)*8);
|
|
35
|
-
.wrapper {
|
|
36
|
-
@media (width < 670px) {
|
|
37
|
-
display: block;
|
|
38
|
-
}
|
|
39
|
-
@media (width < 670px) {
|
|
40
|
-
padding-block: calc(var(--spacing, 0.25rem)*0);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
.small {
|
|
45
|
-
width: calc(var(--spacing, 0.25rem)*10);
|
|
46
|
-
height: calc(var(--spacing, 0.25rem)*10);
|
|
47
|
-
@media (width >= 670px) {
|
|
48
|
-
width: calc(var(--spacing, 0.25rem)*8);
|
|
49
|
-
height: calc(var(--spacing, 0.25rem)*8);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
.medium {
|
|
53
|
-
width: calc(var(--spacing, 0.25rem)*10);
|
|
54
|
-
height: calc(var(--spacing, 0.25rem)*10);
|
|
55
|
-
}
|
|
56
|
-
@property --tw-border-style {
|
|
57
|
-
syntax: "*";
|
|
58
|
-
inherits: false;
|
|
59
|
-
initial-value: solid;
|
|
60
|
-
}
|
|
2
|
+
.item{height:100%;max-height:calc(var(--spacing,.25rem)*12);width:100%;max-width:calc(var(--spacing,.25rem)*12);border-style:var(--tw-border-style);background-color:var(--color-neutral-100,#f6f7f9);object-fit:cover;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));color:var(--color-neutral-800,#556066);border-width:2px;border-color:#0000;border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}@media (min-width:670px){.item{max-height:calc(var(--spacing,.25rem)*10);max-width:calc(var(--spacing,.25rem)*10)}}.item:where([data-theme=dark],[data-theme=dark] *){background-color:var(--color-neutral-900,#2c3437);color:var(--color-neutral-300,#d9e1e4)}.avatar{width:calc(var(--spacing,.25rem)*8);height:calc(var(--spacing,.25rem)*8)}@media not all and (min-width:670px){.avatar .wrapper{padding-block:calc(var(--spacing,.25rem)*0);display:block}}.small{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10)}@media (min-width:670px){.small{width:calc(var(--spacing,.25rem)*8);height:calc(var(--spacing,.25rem)*8)}}.medium{width:calc(var(--spacing,.25rem)*10);height:calc(var(--spacing,.25rem)*10)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
@@ -1,38 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.overlay {
|
|
3
|
-
display: flex;
|
|
4
|
-
min-width: calc(var(--spacing, 0.25rem)*56);
|
|
5
|
-
align-items: center;
|
|
6
|
-
gap: calc(var(--spacing, 0.25rem)*2);
|
|
7
|
-
padding: calc(var(--spacing, 0.25rem)*3);
|
|
8
|
-
}
|
|
9
|
-
.user {
|
|
10
|
-
flex-grow: 1;
|
|
11
|
-
}
|
|
12
|
-
.name {
|
|
13
|
-
--tw-font-weight: var(--font-weight-semibold, 600);
|
|
14
|
-
font-weight: var(--font-weight-semibold, 600);
|
|
15
|
-
color: var(--color-neutral-900, #2c3437);
|
|
16
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
17
|
-
color: var(--color-neutral-300, #d9e1e4);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
.nickname {
|
|
21
|
-
--tw-font-weight: var(--font-weight-medium, 500);
|
|
22
|
-
font-weight: var(--font-weight-medium, 500);
|
|
23
|
-
color: var(--color-neutral-700, #6e7b83);
|
|
24
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
25
|
-
color: var(--color-neutral-500, #b1bcc2);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
.arrow {
|
|
29
|
-
width: calc(var(--spacing, 0.25rem)*3);
|
|
30
|
-
fill: var(--color-neutral-600, #929fa5);
|
|
31
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
32
|
-
fill: var(--color-white, #fff);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
@property --tw-font-weight {
|
|
36
|
-
syntax: "*";
|
|
37
|
-
inherits: false;
|
|
38
|
-
}
|
|
2
|
+
.overlay{min-width:calc(var(--spacing,.25rem)*56);align-items:center;gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*3);display:flex}.user{flex-grow:1}.name{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-neutral-900,#2c3437)}.name:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.nickname{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-neutral-700,#6e7b83)}.nickname:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-500,#b1bcc2)}.arrow{width:calc(var(--spacing,.25rem)*3);fill:var(--color-neutral-600,#929fa5)}.arrow:where([data-theme=dark],[data-theme=dark] *){fill:var(--color-white,#fff)}@property --tw-font-weight{syntax:"*";inherits:false}
|
|
@@ -1,22 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.avatarGroup
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-wrap: wrap;
|
|
5
|
-
align-items: center;
|
|
6
|
-
}
|
|
7
|
-
.small {
|
|
8
|
-
> span {
|
|
9
|
-
margin-left: calc(var(--spacing, 0.25rem)*-2);
|
|
10
|
-
&:first-child {
|
|
11
|
-
margin-left: calc(var(--spacing, 0.25rem)*0);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
.medium {
|
|
16
|
-
> span {
|
|
17
|
-
margin-left: calc(var(--spacing, 0.25rem)*-2.5);
|
|
18
|
-
&:first-child {
|
|
19
|
-
margin-left: calc(var(--spacing, 0.25rem)*0);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
2
|
+
.avatarGroup{flex-wrap:wrap;align-items:center;display:flex}.small>span{margin-left:calc(var(--spacing,.25rem)*-2)}.small>span:first-child{margin-left:calc(var(--spacing,.25rem)*0)}.medium>span{margin-left:calc(var(--spacing,.25rem)*-2.5)}.medium>span:first-child{margin-left:calc(var(--spacing,.25rem)*0)}
|
package/Common/Badge/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import styles from './index.module.css';
|
|
4
|
-
const Badge = ({ kind = 'default', size = 'medium', className, children, ...props }) => {
|
|
5
|
-
return (_jsx("span", { className: classNames(styles.badge, styles[kind], styles[size], className), ...props, children: children }));
|
|
6
|
-
};
|
|
4
|
+
const Badge = ({ kind = 'default', size = 'medium', className, children, ...props }) => (_jsx("span", { className: classNames(styles.badge, styles[kind], styles[size], className), ...props, children: children }));
|
|
7
5
|
export default Badge;
|
|
@@ -1,46 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.badge {
|
|
3
|
-
border-radius: calc(infinity*1px);
|
|
4
|
-
border-style: var(--tw-border-style);
|
|
5
|
-
border-width: 1px;
|
|
6
|
-
text-align: center;
|
|
7
|
-
color: var(--color-white, #fff);
|
|
8
|
-
&.small {
|
|
9
|
-
padding-inline: calc(var(--spacing, 0.25rem)*1.5);
|
|
10
|
-
padding-block: calc(var(--spacing, 0.25rem)*0.5);
|
|
11
|
-
font-size: var(--text-xs, 0.75rem);
|
|
12
|
-
line-height: var(--tw-leading, var(--text-xs--line-height, 1.33333));
|
|
13
|
-
}
|
|
14
|
-
&.medium {
|
|
15
|
-
padding-inline: calc(var(--spacing, 0.25rem)*2.5);
|
|
16
|
-
padding-block: calc(var(--spacing, 0.25rem)*0.5);
|
|
17
|
-
font-size: var(--text-base, 1rem);
|
|
18
|
-
line-height: var(--tw-leading, var(--text-base--line-height, 1.5));
|
|
19
|
-
}
|
|
20
|
-
&.default {
|
|
21
|
-
border-color: var(--color-green-200, #c5e5b4);
|
|
22
|
-
background-color: var(--color-green-600, #417e38);
|
|
23
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
24
|
-
border-color: var(--color-green-800, #2c682c);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
&.error {
|
|
28
|
-
border-color: var(--color-danger-200, #fad3d4);
|
|
29
|
-
background-color: var(--color-danger-600, #de1a1b);
|
|
30
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
31
|
-
border-color: var(--color-danger-800, #900e0e);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
&.warning {
|
|
35
|
-
border-color: var(--color-warning-200, #fad9b0);
|
|
36
|
-
background-color: var(--color-warning-600, #ae5f00);
|
|
37
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
38
|
-
border-color: var(--color-warning-600, #ae5f00);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
@property --tw-border-style {
|
|
43
|
-
syntax: "*";
|
|
44
|
-
inherits: false;
|
|
45
|
-
initial-value: solid;
|
|
46
|
-
}
|
|
2
|
+
.badge{border-style:var(--tw-border-style);text-align:center;color:var(--color-white,#fff);border-width:1px;border-radius:3.40282e38px}.badge.small{padding-inline:calc(var(--spacing,.25rem)*1.5);padding-block:calc(var(--spacing,.25rem)*0.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333))}.badge.medium{padding-inline:calc(var(--spacing,.25rem)*2.5);padding-block:calc(var(--spacing,.25rem)*0.5);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,1.5))}.badge.default{border-color:var(--color-green-200,#c5e5b4);background-color:var(--color-green-600,#417e38)}.badge.default:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-green-800,#2c682c)}.badge.error{border-color:var(--color-danger-200,#fad3d4);background-color:var(--color-danger-600,#de1a1b)}.badge.error:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-danger-800,#900e0e)}.badge.warning{border-color:var(--color-warning-200,#fad9b0);background-color:var(--color-warning-600,#ae5f00)}.badge.warning:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-warning-600,#ae5f00)}.badge.info{border-color:var(--color-info-200,#bce6fc);background-color:var(--color-info-600,#0c7bb3)}.badge.info:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-info-800,#074d71)}.badge.neutral{border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-neutral-600,#929fa5)}.badge.neutral:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-800,#556066)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import ArrowUpRightIcon from '@heroicons/react/24/solid/ArrowUpRightIcon';
|
|
3
3
|
import Badge from '#ui/Common/Badge';
|
|
4
4
|
import styles from './index.module.css';
|
|
5
|
-
const BadgeGroup = ({ kind = 'default', badgeText, children, as: Component = 'a', ...args }) => (_jsxs(Component, { className: `${styles.wrapper} ${styles[kind]}`, ...args, children: [badgeText && (_jsx(Badge, { kind: kind, className: styles.badge, children: badgeText })), _jsx("span", { className: styles.message, children: children }), args.
|
|
5
|
+
const BadgeGroup = ({ kind = 'default', size = 'medium', badgeText, children, as: Component = 'a', ...args }) => (_jsxs(Component, { className: `${styles.wrapper} ${styles[kind]}`, ...args, children: [badgeText && (_jsx(Badge, { kind: kind, size: size, className: styles.badge, children: badgeText })), _jsx("span", { className: styles.message, children: children }), args.target === '_blank' && _jsx(ArrowUpRightIcon, { className: styles.icon })] }));
|
|
6
6
|
export default BadgeGroup;
|
|
@@ -1,101 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.wrapper {
|
|
3
|
-
display: flex;
|
|
4
|
-
width: fit-content;
|
|
5
|
-
align-items: center;
|
|
6
|
-
border-radius: calc(infinity*1px);
|
|
7
|
-
border-style: var(--tw-border-style);
|
|
8
|
-
border-width: 1px;
|
|
9
|
-
padding-block: calc(var(--spacing, 0.25rem)*1);
|
|
10
|
-
padding-right: calc(var(--spacing, 0.25rem)*2.5);
|
|
11
|
-
padding-left: calc(var(--spacing, 0.25rem)*1);
|
|
12
|
-
font-size: var(--text-sm, 0.875rem);
|
|
13
|
-
line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
|
|
14
|
-
--tw-font-weight: var(--font-weight-medium, 500);
|
|
15
|
-
font-weight: var(--font-weight-medium, 500);
|
|
16
|
-
.icon {
|
|
17
|
-
width: calc(var(--spacing, 0.25rem)*4);
|
|
18
|
-
height: calc(var(--spacing, 0.25rem)*4);
|
|
19
|
-
}
|
|
20
|
-
.badge {
|
|
21
|
-
margin-right: calc(var(--spacing, 0.25rem)*2);
|
|
22
|
-
}
|
|
23
|
-
.message {
|
|
24
|
-
margin-right: calc(var(--spacing, 0.25rem)*1);
|
|
25
|
-
}
|
|
26
|
-
&.default {
|
|
27
|
-
border-color: var(--color-green-200, #c5e5b4);
|
|
28
|
-
background-color: var(--color-green-100, #edf2eb);
|
|
29
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
30
|
-
border-color: var(--color-green-700, #2c682c);
|
|
31
|
-
}
|
|
32
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
33
|
-
background-color: var(--color-neutral-900, #2c3437);
|
|
34
|
-
}
|
|
35
|
-
.icon {
|
|
36
|
-
color: var(--color-green-500, #5fa04e);
|
|
37
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
38
|
-
color: var(--color-green-300, #99cc7d);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
.message {
|
|
42
|
-
color: var(--color-green-700, #2c682c);
|
|
43
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
44
|
-
color: var(--color-green-300, #99cc7d);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
&.error {
|
|
49
|
-
border-color: var(--color-danger-200, #fad3d4);
|
|
50
|
-
background-color: var(--color-danger-100, #fbf1f0);
|
|
51
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
52
|
-
border-color: var(--color-danger-700, #b80c0c);
|
|
53
|
-
}
|
|
54
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
55
|
-
background-color: var(--color-neutral-900, #2c3437);
|
|
56
|
-
}
|
|
57
|
-
.icon {
|
|
58
|
-
color: var(--color-danger-500, #f65354);
|
|
59
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
60
|
-
color: var(--color-danger-300, #fab6b7);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
.message {
|
|
64
|
-
color: var(--color-danger-700, #b80c0c);
|
|
65
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
66
|
-
color: var(--color-danger-300, #fab6b7);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
&.warning {
|
|
71
|
-
border-color: var(--color-warning-200, #fad9b0);
|
|
72
|
-
background-color: var(--color-warning-100, #fdf3e7);
|
|
73
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
74
|
-
border-color: var(--color-warning-700, #8b4d04);
|
|
75
|
-
}
|
|
76
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
77
|
-
background-color: var(--color-neutral-900, #2c3437);
|
|
78
|
-
}
|
|
79
|
-
.icon {
|
|
80
|
-
color: var(--color-warning-500, #d07912);
|
|
81
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
82
|
-
color: var(--color-warning-300, #f5bc75);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
.message {
|
|
86
|
-
color: var(--color-warning-700, #8b4d04);
|
|
87
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
88
|
-
color: var(--color-warning-300, #f5bc75);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
@property --tw-border-style {
|
|
94
|
-
syntax: "*";
|
|
95
|
-
inherits: false;
|
|
96
|
-
initial-value: solid;
|
|
97
|
-
}
|
|
98
|
-
@property --tw-font-weight {
|
|
99
|
-
syntax: "*";
|
|
100
|
-
inherits: false;
|
|
101
|
-
}
|
|
2
|
+
.wrapper{border-style:var(--tw-border-style);width:fit-content;padding-block:calc(var(--spacing,.25rem)*1);padding-right:calc(var(--spacing,.25rem)*2.5);padding-left:calc(var(--spacing,.25rem)*1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);border-width:1px;border-radius:3.40282e38px;align-items:center;display:flex}.wrapper .icon{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4)}.wrapper .badge{margin-right:calc(var(--spacing,.25rem)*2)}.wrapper .message{margin-right:calc(var(--spacing,.25rem)*1)}.wrapper.default{border-color:var(--color-green-200,#c5e5b4);background-color:var(--color-green-100,#edf2eb)}.wrapper.default:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-green-700,#2c682c);background-color:var(--color-neutral-900,#2c3437)}.wrapper.default .icon{color:var(--color-green-500,#5fa04e)}.wrapper.default .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-green-300,#99cc7d)}.wrapper.default .message,.wrapper.default .message a:not(:hover){color:var(--color-green-700,#2c682c)}:is(.wrapper.default .message,.wrapper.default .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-green-300,#99cc7d)}.wrapper.error{border-color:var(--color-danger-200,#fad3d4);background-color:var(--color-danger-100,#fbf1f0)}.wrapper.error:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-danger-700,#b80c0c);background-color:var(--color-neutral-900,#2c3437)}.wrapper.error .icon{color:var(--color-danger-500,#f65354)}.wrapper.error .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-danger-300,#fab6b7)}.wrapper.error .message,.wrapper.error .message a:not(:hover){color:var(--color-danger-700,#b80c0c)}:is(.wrapper.error .message,.wrapper.error .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-danger-300,#fab6b7)}.wrapper.warning{border-color:var(--color-warning-200,#fad9b0);background-color:var(--color-warning-100,#fdf3e7)}.wrapper.warning:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-warning-700,#8b4d04);background-color:var(--color-neutral-900,#2c3437)}.wrapper.warning .icon{color:var(--color-warning-500,#d07912)}.wrapper.warning .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-warning-300,#f5bc75)}.wrapper.warning .message,.wrapper.warning .message a:not(:hover){color:var(--color-warning-700,#8b4d04)}:is(.wrapper.warning .message,.wrapper.warning .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-warning-300,#f5bc75)}.wrapper.info{border-color:var(--color-info-200,#bce6fc);background-color:var(--color-info-100,#e9f4fa)}.wrapper.info:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-info-700,#066291);background-color:var(--color-neutral-900,#2c3437)}.wrapper.info .icon{color:var(--color-info-500,#229ad6)}.wrapper.info .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-info-300,#8ed4f8)}.wrapper.info .message,.wrapper.info .message a:not(:hover){color:var(--color-info-700,#066291)}:is(.wrapper.info .message,.wrapper.info .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-info-300,#8ed4f8)}.wrapper.neutral{border-color:var(--color-neutral-200,#e9edf0);background-color:var(--color-neutral-100,#f6f7f9)}.wrapper.neutral:where([data-theme=dark],[data-theme=dark] *){border-color:var(--color-neutral-700,#6e7b83);background-color:var(--color-neutral-900,#2c3437)}.wrapper.neutral .icon{color:var(--color-neutral-500,#b1bcc2)}.wrapper.neutral .icon:where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}.wrapper.neutral .message,.wrapper.neutral .message a:not(:hover){color:var(--color-neutral-700,#6e7b83)}:is(.wrapper.neutral .message,.wrapper.neutral .message a:not(:hover)):where([data-theme=dark],[data-theme=dark] *){color:var(--color-neutral-300,#d9e1e4)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}
|
|
@@ -1,45 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.banner {
|
|
3
|
-
display: flex;
|
|
4
|
-
width: 100%;
|
|
5
|
-
flex-direction: row;
|
|
6
|
-
align-items: center;
|
|
7
|
-
justify-content: center;
|
|
8
|
-
gap: calc(var(--spacing, 0.25rem)*2);
|
|
9
|
-
padding-inline: calc(var(--spacing, 0.25rem)*8);
|
|
10
|
-
padding-block: calc(var(--spacing, 0.25rem)*3);
|
|
11
|
-
font-size: var(--text-sm, 0.875rem);
|
|
12
|
-
line-height: var(--tw-leading, var(--text-sm--line-height, 1.42857));
|
|
13
|
-
&,
|
|
14
|
-
a {
|
|
15
|
-
color: var(--color-white, #fff);
|
|
16
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
17
|
-
color: var(--color-white, #fff);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
a {
|
|
21
|
-
width: fit-content;
|
|
22
|
-
text-decoration-line: underline;
|
|
23
|
-
text-decoration-color: color-mix(in srgb, #fff 50%, transparent);
|
|
24
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
25
|
-
text-decoration-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
svg {
|
|
29
|
-
width: calc(var(--spacing, 0.25rem)*4);
|
|
30
|
-
height: calc(var(--spacing, 0.25rem)*4);
|
|
31
|
-
color: color-mix(in srgb, #fff 50%, transparent);
|
|
32
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
33
|
-
color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
.default {
|
|
38
|
-
background-color: var(--color-green-600, #417e38);
|
|
39
|
-
}
|
|
40
|
-
.error {
|
|
41
|
-
background-color: var(--color-danger-600, #de1a1b);
|
|
42
|
-
}
|
|
43
|
-
.warning {
|
|
44
|
-
background-color: var(--color-warning-600, #ae5f00);
|
|
45
|
-
}
|
|
2
|
+
.banner{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*2);width:100%;padding-inline:calc(var(--spacing,.25rem)*8);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,1.42857));flex-direction:row;display:flex}.banner,.banner a,:is(.banner,.banner a):where([data-theme=dark],[data-theme=dark] *){color:var(--color-white,#fff)}.banner a{width:fit-content;text-decoration-line:underline;text-decoration-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.banner a{-webkit-text-decoration-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent);-webkit-text-decoration-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent);text-decoration-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}.banner svg{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.banner svg{color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}.default{background-color:var(--color-green-600,#417e38)}.error{background-color:var(--color-danger-600,#de1a1b)}.warning{background-color:var(--color-warning-600,#ae5f00)}
|