@mirohq/design-system-badge 0.1.1 → 0.1.2
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/main.js +3 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +137 -71
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -15,7 +15,7 @@ const StyledBadgeContainer = designSystemStitches.styled(designSystemPrimitive.P
|
|
|
15
15
|
});
|
|
16
16
|
const sharedStyles = {
|
|
17
17
|
alignItems: "center",
|
|
18
|
-
backgroundColor: "$blue-
|
|
18
|
+
backgroundColor: "$blue-600",
|
|
19
19
|
borderColor: "$white",
|
|
20
20
|
borderRadius: "$half",
|
|
21
21
|
color: "$white",
|
|
@@ -28,8 +28,8 @@ const sharedStyles = {
|
|
|
28
28
|
inverted: {
|
|
29
29
|
true: {
|
|
30
30
|
backgroundColor: "$white",
|
|
31
|
-
borderColor: "$blue-
|
|
32
|
-
color: "$blue-
|
|
31
|
+
borderColor: "$blue-600",
|
|
32
|
+
color: "$blue-600"
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-600',\n borderColor: '$white',\n borderRadius: '$half',\n color: '$white',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$white',\n borderColor: '$blue-600',\n color: '$blue-600',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n border: '2px solid #fff',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(({ show, content, children, ...restProps }, forwardRef) => {\n if (!show) {\n return children as ReactElement\n }\n\n return (\n <StyledBadgeContainer data-testid='badge'>\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...restProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...restProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n})\n"],"names":["styled","Primitive","React"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -7,7 +7,7 @@ const StyledBadgeContainer = styled(Primitive.div, {
|
|
|
7
7
|
});
|
|
8
8
|
const sharedStyles = {
|
|
9
9
|
alignItems: "center",
|
|
10
|
-
backgroundColor: "$blue-
|
|
10
|
+
backgroundColor: "$blue-600",
|
|
11
11
|
borderColor: "$white",
|
|
12
12
|
borderRadius: "$half",
|
|
13
13
|
color: "$white",
|
|
@@ -20,8 +20,8 @@ const sharedStyles = {
|
|
|
20
20
|
inverted: {
|
|
21
21
|
true: {
|
|
22
22
|
backgroundColor: "$white",
|
|
23
|
-
borderColor: "$blue-
|
|
24
|
-
color: "$blue-
|
|
23
|
+
borderColor: "$blue-600",
|
|
24
|
+
color: "$blue-600"
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
}
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-600',\n borderColor: '$white',\n borderRadius: '$half',\n color: '$white',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$white',\n borderColor: '$blue-600',\n color: '$blue-600',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n border: '2px solid #fff',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(({ show, content, children, ...restProps }, forwardRef) => {\n if (!show) {\n return children as ReactElement\n }\n\n return (\n <StyledBadgeContainer data-testid='badge'>\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...restProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...restProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n})\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -13,80 +13,146 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Pick<Omit<{}, never>
|
|
|
13
13
|
readonly lg: "4px";
|
|
14
14
|
};
|
|
15
15
|
colors: {
|
|
16
|
+
readonly 'blue-100': any;
|
|
17
|
+
readonly 'blue-200': any;
|
|
18
|
+
readonly 'blue-300': any;
|
|
19
|
+
readonly 'blue-400': any;
|
|
20
|
+
readonly 'blue-500': any;
|
|
21
|
+
readonly 'blue-600': any;
|
|
22
|
+
readonly 'blue-700': any;
|
|
23
|
+
readonly 'blue-800': any;
|
|
24
|
+
readonly 'blue-900': any;
|
|
25
|
+
readonly 'blue-1000': any;
|
|
26
|
+
readonly 'gray-100': any;
|
|
27
|
+
readonly 'gray-200': any;
|
|
28
|
+
readonly 'gray-300': any;
|
|
29
|
+
readonly 'gray-400': any;
|
|
30
|
+
readonly 'gray-500': any;
|
|
31
|
+
readonly 'gray-600': any;
|
|
32
|
+
readonly 'gray-700': any;
|
|
33
|
+
readonly 'gray-800': any;
|
|
34
|
+
readonly 'gray-900': any;
|
|
35
|
+
readonly 'indigo-100': any;
|
|
36
|
+
readonly 'indigo-200': any;
|
|
37
|
+
readonly 'indigo-300': any;
|
|
38
|
+
readonly 'indigo-400': any;
|
|
39
|
+
readonly 'indigo-500': any;
|
|
40
|
+
readonly 'indigo-600': any;
|
|
41
|
+
readonly 'indigo-700': any;
|
|
42
|
+
readonly 'indigo-800': any;
|
|
43
|
+
readonly 'indigo-900': any;
|
|
44
|
+
readonly 'red-100': any;
|
|
45
|
+
readonly 'red-200': any;
|
|
46
|
+
readonly 'red-300': any;
|
|
47
|
+
readonly 'red-400': any;
|
|
48
|
+
readonly 'red-500': any;
|
|
49
|
+
readonly 'red-600': any;
|
|
50
|
+
readonly 'red-700': any;
|
|
51
|
+
readonly 'red-800': any;
|
|
52
|
+
readonly 'red-900': any;
|
|
53
|
+
readonly 'yellow-100': any;
|
|
54
|
+
readonly 'yellow-200': any;
|
|
55
|
+
readonly 'yellow-300': any;
|
|
56
|
+
readonly 'yellow-400': any;
|
|
57
|
+
readonly 'yellow-500': any;
|
|
58
|
+
readonly 'yellow-600': any;
|
|
59
|
+
readonly 'yellow-700': any;
|
|
60
|
+
readonly 'yellow-800': any;
|
|
61
|
+
readonly 'yellow-900': any;
|
|
62
|
+
readonly 'green-100': any;
|
|
63
|
+
readonly 'green-200': any;
|
|
64
|
+
readonly 'green-300': any;
|
|
65
|
+
readonly 'green-400': any;
|
|
66
|
+
readonly 'green-500': any;
|
|
67
|
+
readonly 'green-600': any;
|
|
68
|
+
readonly 'green-700': any;
|
|
69
|
+
readonly 'green-800': any;
|
|
70
|
+
readonly 'green-900': any;
|
|
16
71
|
readonly black: any;
|
|
17
|
-
readonly 'blue-10': any;
|
|
18
|
-
readonly 'blue-20': any;
|
|
19
|
-
readonly 'blue-50': any;
|
|
20
|
-
readonly 'blue-60': any;
|
|
21
|
-
readonly 'blue-70': any;
|
|
22
|
-
readonly 'blue-80': any;
|
|
23
|
-
readonly 'gray-20': any;
|
|
24
|
-
readonly 'gray-30': any;
|
|
25
|
-
readonly 'gray-40': any;
|
|
26
|
-
readonly 'gray-50': any;
|
|
27
|
-
readonly 'green-70': any;
|
|
28
|
-
readonly 'indigo-20': any;
|
|
29
|
-
readonly 'indigo-30': any;
|
|
30
|
-
readonly 'indigo-50': any;
|
|
31
|
-
readonly 'indigo-70': any;
|
|
32
|
-
readonly 'indigo-90': any;
|
|
33
|
-
readonly 'pink-20': any;
|
|
34
|
-
readonly 'pink-50': any;
|
|
35
|
-
readonly 'red-10': any;
|
|
36
|
-
readonly 'red-20': any;
|
|
37
|
-
readonly 'red-30': any;
|
|
38
|
-
readonly 'red-50': any;
|
|
39
|
-
readonly 'red-60': any;
|
|
40
|
-
readonly transparent: any;
|
|
41
72
|
readonly white: any;
|
|
42
|
-
readonly
|
|
43
|
-
readonly '
|
|
44
|
-
readonly 'background-
|
|
45
|
-
readonly 'background-
|
|
46
|
-
readonly 'background-
|
|
47
|
-
readonly 'background-
|
|
48
|
-
readonly 'background-
|
|
73
|
+
readonly transparent: any;
|
|
74
|
+
readonly 'background-neutrals'?: any;
|
|
75
|
+
readonly 'background-neutrals-body'?: any;
|
|
76
|
+
readonly 'background-neutrals-container'?: any;
|
|
77
|
+
readonly 'background-neutrals-inverted'?: any;
|
|
78
|
+
readonly 'background-neutrals-inverted-subtle'?: any;
|
|
79
|
+
readonly 'background-neutrals-subtle'?: any;
|
|
80
|
+
readonly 'background-neutrals-subtle-hover'?: any;
|
|
81
|
+
readonly 'background-neutrals-subtle-active'?: any;
|
|
82
|
+
readonly 'background-neutrals-disabled'?: any;
|
|
83
|
+
readonly 'background-neutrals-controls-disabled'?: any;
|
|
84
|
+
readonly 'background-neutrals-scrolls'?: any;
|
|
85
|
+
readonly 'background-neutrals-inactive'?: any;
|
|
86
|
+
readonly 'background-neutrals-inactive-hover'?: any;
|
|
87
|
+
readonly 'background-primary-prominent'?: any;
|
|
88
|
+
readonly 'background-primary-prominent-hover'?: any;
|
|
89
|
+
readonly 'background-primary-prominent-active'?: any;
|
|
90
|
+
readonly 'background-primary-prominent-selected'?: any;
|
|
91
|
+
readonly 'background-primary-subtle'?: any;
|
|
92
|
+
readonly 'background-primary-subtle-hover'?: any;
|
|
93
|
+
readonly 'background-primary-subtle-active'?: any;
|
|
94
|
+
readonly 'background-primary-subtle-selected'?: any;
|
|
95
|
+
readonly 'background-danger-prominent'?: any;
|
|
96
|
+
readonly 'background-danger-prominent-hover'?: any;
|
|
97
|
+
readonly 'background-danger-prominent-active'?: any;
|
|
98
|
+
readonly 'background-danger'?: any;
|
|
49
99
|
readonly 'background-danger-hover'?: any;
|
|
50
|
-
readonly 'background-
|
|
51
|
-
readonly 'background-
|
|
52
|
-
readonly 'background-
|
|
53
|
-
readonly '
|
|
54
|
-
readonly '
|
|
55
|
-
readonly '
|
|
56
|
-
readonly '
|
|
57
|
-
readonly '
|
|
58
|
-
readonly '
|
|
59
|
-
readonly '
|
|
60
|
-
readonly '
|
|
61
|
-
readonly '
|
|
62
|
-
readonly '
|
|
63
|
-
readonly '
|
|
64
|
-
readonly '
|
|
65
|
-
readonly '
|
|
66
|
-
readonly '
|
|
67
|
-
readonly '
|
|
68
|
-
readonly '
|
|
69
|
-
readonly '
|
|
70
|
-
readonly '
|
|
71
|
-
readonly '
|
|
72
|
-
readonly '
|
|
73
|
-
readonly '
|
|
74
|
-
readonly '
|
|
75
|
-
readonly '
|
|
76
|
-
readonly '
|
|
77
|
-
readonly '
|
|
78
|
-
readonly '
|
|
79
|
-
readonly '
|
|
80
|
-
readonly '
|
|
81
|
-
readonly '
|
|
82
|
-
readonly 'icon-
|
|
83
|
-
readonly 'icon-
|
|
84
|
-
readonly 'icon-
|
|
85
|
-
readonly 'icon-
|
|
86
|
-
readonly 'icon-
|
|
87
|
-
readonly 'icon-
|
|
88
|
-
readonly 'icon-
|
|
89
|
-
readonly 'icon-
|
|
100
|
+
readonly 'background-success'?: any;
|
|
101
|
+
readonly 'background-warning-subtle'?: any;
|
|
102
|
+
readonly 'background-warning-prominent'?: any;
|
|
103
|
+
readonly 'text-neutrals-inverted'?: any;
|
|
104
|
+
readonly 'text-neutrals'?: any;
|
|
105
|
+
readonly 'text-neutrals-subtle'?: any;
|
|
106
|
+
readonly 'text-neutrals-placeholder-only'?: any;
|
|
107
|
+
readonly 'text-neutrals-placeholder'?: any;
|
|
108
|
+
readonly 'text-neutrals-disabled'?: any;
|
|
109
|
+
readonly 'text-primary-inverted'?: any;
|
|
110
|
+
readonly 'text-primary'?: any;
|
|
111
|
+
readonly 'text-primary-hover'?: any;
|
|
112
|
+
readonly 'text-primary-active'?: any;
|
|
113
|
+
readonly 'text-primary-selected'?: any;
|
|
114
|
+
readonly 'text-primary-inverted-subtle'?: any;
|
|
115
|
+
readonly 'text-danger-inverted'?: any;
|
|
116
|
+
readonly 'text-danger'?: any;
|
|
117
|
+
readonly 'text-danger-hover'?: any;
|
|
118
|
+
readonly 'text-danger-active'?: any;
|
|
119
|
+
readonly 'text-success'?: any;
|
|
120
|
+
readonly 'text-warning'?: any;
|
|
121
|
+
readonly 'icon-neutrals-inverted'?: any;
|
|
122
|
+
readonly 'icon-neutrals'?: any;
|
|
123
|
+
readonly 'icon-neutrals-with-text'?: any;
|
|
124
|
+
readonly 'icon-neutrals-subtle'?: any;
|
|
125
|
+
readonly 'icon-neutrals-disabled'?: any;
|
|
126
|
+
readonly 'icon-neutrals-search'?: any;
|
|
127
|
+
readonly 'icon-neutrals-inactive'?: any;
|
|
128
|
+
readonly 'icon-neutrals-inactive-hover'?: any;
|
|
129
|
+
readonly 'icon-primary-inverted'?: any;
|
|
130
|
+
readonly 'icon-primary'?: any;
|
|
131
|
+
readonly 'icon-primary-hover'?: any;
|
|
132
|
+
readonly 'icon-primary-active'?: any;
|
|
133
|
+
readonly 'icon-primary-selected'?: any;
|
|
134
|
+
readonly 'icon-danger-inverted'?: any;
|
|
135
|
+
readonly 'icon-danger'?: any;
|
|
136
|
+
readonly 'icon-danger-hover'?: any;
|
|
137
|
+
readonly 'icon-danger-active'?: any;
|
|
138
|
+
readonly 'icon-success-inverted'?: any;
|
|
139
|
+
readonly 'icon-success'?: any;
|
|
140
|
+
readonly 'icon-warning'?: any;
|
|
141
|
+
readonly 'border-neutrals'?: any;
|
|
142
|
+
readonly 'border-neutrals-hover'?: any;
|
|
143
|
+
readonly 'border-neutrals-active'?: any;
|
|
144
|
+
readonly 'border-neutrals-disabled'?: any;
|
|
145
|
+
readonly 'border-neutrals-controls'?: any;
|
|
146
|
+
readonly 'border-neutrals-controls-disabled'?: any;
|
|
147
|
+
readonly 'border-neutrals-subtle'?: any;
|
|
148
|
+
readonly 'border-neutrals-inverted'?: any;
|
|
149
|
+
readonly 'border-primary'?: any;
|
|
150
|
+
readonly 'border-primary-hover'?: any;
|
|
151
|
+
readonly 'border-primary-active'?: any;
|
|
152
|
+
readonly 'border-primary-inverted'?: any;
|
|
153
|
+
readonly 'border-danger'?: any;
|
|
154
|
+
readonly 'border-success'?: any;
|
|
155
|
+
readonly 'border-warning'?: any;
|
|
90
156
|
};
|
|
91
157
|
'font-sizes': {
|
|
92
158
|
readonly 150: "0.75rem";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-badge",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"react": "^16.14 || ^17"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-
|
|
30
|
-
"@mirohq/design-system-
|
|
29
|
+
"@mirohq/design-system-primitive": "^1.0.4",
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.0.11"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@mirohq/design-system-button": "^2.0.
|
|
33
|
+
"@mirohq/design-system-button": "^2.0.17"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "rollup -c ../../../../rollup.config.js",
|