@fuf-stack/pixels 0.38.0 → 0.39.0
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/Alert/index.cjs +2 -2
- package/dist/Alert/index.d.cts +2 -2
- package/dist/Alert/index.d.ts +2 -2
- package/dist/Alert/index.js +1 -1
- package/dist/{Alert-Bz_lJ_YE.d.cts → Alert-DELD9ZWe.d.cts} +80 -1
- package/dist/{Alert-Bz_lJ_YE.d.ts → Alert-DELD9ZWe.d.ts} +80 -1
- package/dist/Popover/index.cjs +2 -2
- package/dist/Popover/index.d.cts +2 -2
- package/dist/Popover/index.d.ts +2 -2
- package/dist/Popover/index.js +1 -1
- package/dist/{Popover-B2-09nsy.d.ts → Popover-BHPrdRy6.d.ts} +1 -1
- package/dist/{Popover-DAYvOjOY.d.cts → Popover-BXyk9y8I.d.cts} +1 -1
- package/dist/Table/index.cjs +2 -2
- package/dist/Table/index.js +1 -1
- package/dist/{chunk-MOIIBJ6O.js → chunk-5TOE75VE.js} +3 -3
- package/dist/chunk-5TOE75VE.js.map +1 -0
- package/dist/{chunk-QMYSCJEJ.js → chunk-AFGRLKHU.js} +2 -2
- package/dist/{chunk-QMYSCJEJ.js.map → chunk-AFGRLKHU.js.map} +1 -1
- package/dist/{chunk-A4MJ5V64.cjs → chunk-AJCAIA6H.cjs} +2 -2
- package/dist/chunk-AJCAIA6H.cjs.map +1 -0
- package/dist/{chunk-EAJGISR6.cjs → chunk-EAX5J2I2.cjs} +3 -3
- package/dist/chunk-EAX5J2I2.cjs.map +1 -0
- package/dist/{chunk-V2WKZH63.js → chunk-MG3PTEMK.js} +16 -3
- package/dist/chunk-MG3PTEMK.js.map +1 -0
- package/dist/{chunk-33S6NRVI.cjs → chunk-YVPRFCWI.cjs} +16 -3
- package/dist/chunk-YVPRFCWI.cjs.map +1 -0
- package/dist/index.cjs +170 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +282 -7
- package/dist/index.d.ts +282 -7
- package/dist/index.js +169 -4
- package/dist/index.js.map +1 -1
- package/package.json +23 -22
- package/dist/chunk-33S6NRVI.cjs.map +0 -1
- package/dist/chunk-A4MJ5V64.cjs.map +0 -1
- package/dist/chunk-EAJGISR6.cjs.map +0 -1
- package/dist/chunk-MOIIBJ6O.js.map +0 -1
- package/dist/chunk-V2WKZH63.js.map +0 -1
package/dist/Alert/index.cjs
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkYVPRFCWIcjs = require('../chunk-YVPRFCWI.cjs');
|
|
6
6
|
require('../chunk-D4TLDLEX.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
exports.Alert =
|
|
11
|
+
exports.Alert = _chunkYVPRFCWIcjs.Alert_default; exports.alertVariants = _chunkYVPRFCWIcjs.alertVariants; exports.default = _chunkYVPRFCWIcjs.Alert_default2;
|
|
12
12
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Alert/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { A as Alert } from '../Alert-
|
|
2
|
-
export { b as AlertProps, a as alertVariants } from '../Alert-
|
|
1
|
+
import { A as Alert } from '../Alert-DELD9ZWe.cjs';
|
|
2
|
+
export { b as AlertProps, a as alertVariants } from '../Alert-DELD9ZWe.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import 'tailwind-variants/dist/config.js';
|
package/dist/Alert/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { A as Alert } from '../Alert-
|
|
2
|
-
export { b as AlertProps, a as alertVariants } from '../Alert-
|
|
1
|
+
import { A as Alert } from '../Alert-DELD9ZWe.js';
|
|
2
|
+
export { b as AlertProps, a as alertVariants } from '../Alert-DELD9ZWe.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import 'tailwind-variants/dist/config.js';
|
package/dist/Alert/index.js
CHANGED
|
@@ -28,6 +28,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
28
28
|
base: string;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
|
+
sizeLimit: {
|
|
32
|
+
height: {
|
|
33
|
+
base: string;
|
|
34
|
+
};
|
|
35
|
+
width: {
|
|
36
|
+
base: string;
|
|
37
|
+
};
|
|
38
|
+
both: {
|
|
39
|
+
base: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
31
42
|
}, {
|
|
32
43
|
base: string;
|
|
33
44
|
title: string;
|
|
@@ -60,6 +71,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
60
71
|
base: string;
|
|
61
72
|
};
|
|
62
73
|
};
|
|
74
|
+
sizeLimit: {
|
|
75
|
+
height: {
|
|
76
|
+
base: string;
|
|
77
|
+
};
|
|
78
|
+
width: {
|
|
79
|
+
base: string;
|
|
80
|
+
};
|
|
81
|
+
both: {
|
|
82
|
+
base: string;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
63
85
|
}, {
|
|
64
86
|
color: {
|
|
65
87
|
default: {};
|
|
@@ -84,6 +106,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
84
106
|
base: string;
|
|
85
107
|
};
|
|
86
108
|
};
|
|
109
|
+
sizeLimit: {
|
|
110
|
+
height: {
|
|
111
|
+
base: string;
|
|
112
|
+
};
|
|
113
|
+
width: {
|
|
114
|
+
base: string;
|
|
115
|
+
};
|
|
116
|
+
both: {
|
|
117
|
+
base: string;
|
|
118
|
+
};
|
|
119
|
+
};
|
|
87
120
|
}>, {
|
|
88
121
|
color: {
|
|
89
122
|
default: {};
|
|
@@ -108,6 +141,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
108
141
|
base: string;
|
|
109
142
|
};
|
|
110
143
|
};
|
|
144
|
+
sizeLimit: {
|
|
145
|
+
height: {
|
|
146
|
+
base: string;
|
|
147
|
+
};
|
|
148
|
+
width: {
|
|
149
|
+
base: string;
|
|
150
|
+
};
|
|
151
|
+
both: {
|
|
152
|
+
base: string;
|
|
153
|
+
};
|
|
154
|
+
};
|
|
111
155
|
}, {
|
|
112
156
|
base: string;
|
|
113
157
|
title: string;
|
|
@@ -140,6 +184,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
140
184
|
base: string;
|
|
141
185
|
};
|
|
142
186
|
};
|
|
187
|
+
sizeLimit: {
|
|
188
|
+
height: {
|
|
189
|
+
base: string;
|
|
190
|
+
};
|
|
191
|
+
width: {
|
|
192
|
+
base: string;
|
|
193
|
+
};
|
|
194
|
+
both: {
|
|
195
|
+
base: string;
|
|
196
|
+
};
|
|
197
|
+
};
|
|
143
198
|
}, {
|
|
144
199
|
base: string;
|
|
145
200
|
title: string;
|
|
@@ -172,6 +227,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
172
227
|
base: string;
|
|
173
228
|
};
|
|
174
229
|
};
|
|
230
|
+
sizeLimit: {
|
|
231
|
+
height: {
|
|
232
|
+
base: string;
|
|
233
|
+
};
|
|
234
|
+
width: {
|
|
235
|
+
base: string;
|
|
236
|
+
};
|
|
237
|
+
both: {
|
|
238
|
+
base: string;
|
|
239
|
+
};
|
|
240
|
+
};
|
|
175
241
|
}, {
|
|
176
242
|
color: {
|
|
177
243
|
default: {};
|
|
@@ -196,6 +262,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
196
262
|
base: string;
|
|
197
263
|
};
|
|
198
264
|
};
|
|
265
|
+
sizeLimit: {
|
|
266
|
+
height: {
|
|
267
|
+
base: string;
|
|
268
|
+
};
|
|
269
|
+
width: {
|
|
270
|
+
base: string;
|
|
271
|
+
};
|
|
272
|
+
both: {
|
|
273
|
+
base: string;
|
|
274
|
+
};
|
|
275
|
+
};
|
|
199
276
|
}>, unknown, unknown, undefined>>;
|
|
200
277
|
type VariantProps = TVProps<typeof alertVariants>;
|
|
201
278
|
type ClassName = TVClassName<typeof alertVariants>;
|
|
@@ -216,6 +293,8 @@ interface AlertProps extends VariantProps {
|
|
|
216
293
|
onClose?: () => void | undefined;
|
|
217
294
|
/** Whether to show the icon at the start */
|
|
218
295
|
showIcon?: boolean;
|
|
296
|
+
/** limit height to 150px or width to 480px or both */
|
|
297
|
+
sizeLimit?: VariantProps['sizeLimit'];
|
|
219
298
|
/** HTML data-testid attribute used in e2e tests */
|
|
220
299
|
testId?: string;
|
|
221
300
|
/** Title displayed in the Alert above the content */
|
|
@@ -226,6 +305,6 @@ interface AlertProps extends VariantProps {
|
|
|
226
305
|
/**
|
|
227
306
|
* Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
|
|
228
307
|
*/
|
|
229
|
-
declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
308
|
+
declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, sizeLimit, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
230
309
|
|
|
231
310
|
export { Alert as A, alertVariants as a, type AlertProps as b };
|
|
@@ -28,6 +28,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
28
28
|
base: string;
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
|
+
sizeLimit: {
|
|
32
|
+
height: {
|
|
33
|
+
base: string;
|
|
34
|
+
};
|
|
35
|
+
width: {
|
|
36
|
+
base: string;
|
|
37
|
+
};
|
|
38
|
+
both: {
|
|
39
|
+
base: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
31
42
|
}, {
|
|
32
43
|
base: string;
|
|
33
44
|
title: string;
|
|
@@ -60,6 +71,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
60
71
|
base: string;
|
|
61
72
|
};
|
|
62
73
|
};
|
|
74
|
+
sizeLimit: {
|
|
75
|
+
height: {
|
|
76
|
+
base: string;
|
|
77
|
+
};
|
|
78
|
+
width: {
|
|
79
|
+
base: string;
|
|
80
|
+
};
|
|
81
|
+
both: {
|
|
82
|
+
base: string;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
63
85
|
}, {
|
|
64
86
|
color: {
|
|
65
87
|
default: {};
|
|
@@ -84,6 +106,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
84
106
|
base: string;
|
|
85
107
|
};
|
|
86
108
|
};
|
|
109
|
+
sizeLimit: {
|
|
110
|
+
height: {
|
|
111
|
+
base: string;
|
|
112
|
+
};
|
|
113
|
+
width: {
|
|
114
|
+
base: string;
|
|
115
|
+
};
|
|
116
|
+
both: {
|
|
117
|
+
base: string;
|
|
118
|
+
};
|
|
119
|
+
};
|
|
87
120
|
}>, {
|
|
88
121
|
color: {
|
|
89
122
|
default: {};
|
|
@@ -108,6 +141,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
108
141
|
base: string;
|
|
109
142
|
};
|
|
110
143
|
};
|
|
144
|
+
sizeLimit: {
|
|
145
|
+
height: {
|
|
146
|
+
base: string;
|
|
147
|
+
};
|
|
148
|
+
width: {
|
|
149
|
+
base: string;
|
|
150
|
+
};
|
|
151
|
+
both: {
|
|
152
|
+
base: string;
|
|
153
|
+
};
|
|
154
|
+
};
|
|
111
155
|
}, {
|
|
112
156
|
base: string;
|
|
113
157
|
title: string;
|
|
@@ -140,6 +184,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
140
184
|
base: string;
|
|
141
185
|
};
|
|
142
186
|
};
|
|
187
|
+
sizeLimit: {
|
|
188
|
+
height: {
|
|
189
|
+
base: string;
|
|
190
|
+
};
|
|
191
|
+
width: {
|
|
192
|
+
base: string;
|
|
193
|
+
};
|
|
194
|
+
both: {
|
|
195
|
+
base: string;
|
|
196
|
+
};
|
|
197
|
+
};
|
|
143
198
|
}, {
|
|
144
199
|
base: string;
|
|
145
200
|
title: string;
|
|
@@ -172,6 +227,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
172
227
|
base: string;
|
|
173
228
|
};
|
|
174
229
|
};
|
|
230
|
+
sizeLimit: {
|
|
231
|
+
height: {
|
|
232
|
+
base: string;
|
|
233
|
+
};
|
|
234
|
+
width: {
|
|
235
|
+
base: string;
|
|
236
|
+
};
|
|
237
|
+
both: {
|
|
238
|
+
base: string;
|
|
239
|
+
};
|
|
240
|
+
};
|
|
175
241
|
}, {
|
|
176
242
|
color: {
|
|
177
243
|
default: {};
|
|
@@ -196,6 +262,17 @@ declare const alertVariants: tailwind_variants.TVReturnType<{
|
|
|
196
262
|
base: string;
|
|
197
263
|
};
|
|
198
264
|
};
|
|
265
|
+
sizeLimit: {
|
|
266
|
+
height: {
|
|
267
|
+
base: string;
|
|
268
|
+
};
|
|
269
|
+
width: {
|
|
270
|
+
base: string;
|
|
271
|
+
};
|
|
272
|
+
both: {
|
|
273
|
+
base: string;
|
|
274
|
+
};
|
|
275
|
+
};
|
|
199
276
|
}>, unknown, unknown, undefined>>;
|
|
200
277
|
type VariantProps = TVProps<typeof alertVariants>;
|
|
201
278
|
type ClassName = TVClassName<typeof alertVariants>;
|
|
@@ -216,6 +293,8 @@ interface AlertProps extends VariantProps {
|
|
|
216
293
|
onClose?: () => void | undefined;
|
|
217
294
|
/** Whether to show the icon at the start */
|
|
218
295
|
showIcon?: boolean;
|
|
296
|
+
/** limit height to 150px or width to 480px or both */
|
|
297
|
+
sizeLimit?: VariantProps['sizeLimit'];
|
|
219
298
|
/** HTML data-testid attribute used in e2e tests */
|
|
220
299
|
testId?: string;
|
|
221
300
|
/** Title displayed in the Alert above the content */
|
|
@@ -226,6 +305,6 @@ interface AlertProps extends VariantProps {
|
|
|
226
305
|
/**
|
|
227
306
|
* Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
|
|
228
307
|
*/
|
|
229
|
-
declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
308
|
+
declare const Alert: ({ children, className, color, endContent, icon, isClosable, onClose, sizeLimit, showIcon, testId, title, variant, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
230
309
|
|
|
231
310
|
export { Alert as A, alertVariants as a, type AlertProps as b };
|
package/dist/Popover/index.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkEAX5J2I2cjs = require('../chunk-EAX5J2I2.cjs');
|
|
5
5
|
require('../chunk-TX2VP4J7.cjs');
|
|
6
6
|
require('../chunk-D4TLDLEX.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
exports.Popover =
|
|
10
|
+
exports.Popover = _chunkEAX5J2I2cjs.Popover_default; exports.default = _chunkEAX5J2I2cjs.Popover_default2;
|
|
11
11
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Popover/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as _default } from '../Popover-
|
|
2
|
-
export { P as PopoverProps } from '../Popover-
|
|
1
|
+
import { _ as _default } from '../Popover-BXyk9y8I.cjs';
|
|
2
|
+
export { P as PopoverProps } from '../Popover-BXyk9y8I.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
package/dist/Popover/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as _default } from '../Popover-
|
|
2
|
-
export { P as PopoverProps } from '../Popover-
|
|
1
|
+
import { _ as _default } from '../Popover-BHPrdRy6.js';
|
|
2
|
+
export { P as PopoverProps } from '../Popover-BHPrdRy6.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants/dist/config.js';
|
|
5
5
|
import 'tailwind-variants';
|
package/dist/Popover/index.js
CHANGED
|
@@ -104,7 +104,7 @@ interface PopoverProps extends VariantProps {
|
|
|
104
104
|
/** Popover title */
|
|
105
105
|
title?: ReactNode;
|
|
106
106
|
/** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
|
|
107
|
-
triggerButtonProps?: Pick<ButtonProps, 'ariaLabel' | 'className' | 'color' | 'disableAnimation' | 'disabled' | '
|
|
107
|
+
triggerButtonProps?: Pick<ButtonProps, 'ariaLabel' | 'className' | 'color' | 'disableAnimation' | 'disabled' | 'size' | 'testId' | 'variant'>;
|
|
108
108
|
}
|
|
109
109
|
/**
|
|
110
110
|
* Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)
|
|
@@ -104,7 +104,7 @@ interface PopoverProps extends VariantProps {
|
|
|
104
104
|
/** Popover title */
|
|
105
105
|
title?: ReactNode;
|
|
106
106
|
/** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
|
|
107
|
-
triggerButtonProps?: Pick<ButtonProps, 'ariaLabel' | 'className' | 'color' | 'disableAnimation' | 'disabled' | '
|
|
107
|
+
triggerButtonProps?: Pick<ButtonProps, 'ariaLabel' | 'className' | 'color' | 'disableAnimation' | 'disabled' | 'size' | 'testId' | 'variant'>;
|
|
108
108
|
}
|
|
109
109
|
/**
|
|
110
110
|
* Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)
|
package/dist/Table/index.cjs
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkAJCAIA6Hcjs = require('../chunk-AJCAIA6H.cjs');
|
|
6
6
|
require('../chunk-D4TLDLEX.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
exports.Table =
|
|
11
|
+
exports.Table = _chunkAJCAIA6Hcjs.Table_default; exports.default = _chunkAJCAIA6Hcjs.Table_default2; exports.tableVariants = _chunkAJCAIA6Hcjs.tableVariants;
|
|
12
12
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Table/index.js
CHANGED
|
@@ -51,10 +51,10 @@ var Popover_default = ({
|
|
|
51
51
|
// TODO: currently we have to use @heroui/button because
|
|
52
52
|
// passing ref does not work (even with forwardRef in Button)
|
|
53
53
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
54
|
-
/* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, triggerButtonProps), { children }))
|
|
54
|
+
/* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ className: className.trigger }, triggerButtonProps), { children }))
|
|
55
55
|
) : (
|
|
56
56
|
// eslint-disable-next-line react/button-has-type
|
|
57
|
-
/* @__PURE__ */ jsx("button", { children })
|
|
57
|
+
/* @__PURE__ */ jsx("button", { className: className.trigger, children })
|
|
58
58
|
) }),
|
|
59
59
|
/* @__PURE__ */ jsxs(PopoverContent, { "data-testid": contentTestId, children: [
|
|
60
60
|
title && /* @__PURE__ */ jsxs("div", { className: className.header, children: [
|
|
@@ -79,4 +79,4 @@ export {
|
|
|
79
79
|
Popover_default,
|
|
80
80
|
Popover_default2
|
|
81
81
|
};
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-5TOE75VE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Popover/Popover.tsx","../src/Popover/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n slots: {\n body: 'w-full px-2.5 py-1',\n content: 'flex max-h-[80vh] flex-col p-0',\n footer: 'w-full px-2.5 py-1',\n header: 'w-full px-2.5 py-1',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** content of the popover */\n content: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n contentTestId?: string;\n /** popover footer */\n footer?: ReactNode;\n /** use as controlled component */\n openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n /** placement of the popover relative to its trigger reference */\n placement?: HeroPopoverProps['placement'];\n /** The container element in which the overlay portal will be placed. */\n portalContainer?: HeroPopoverProps['portalContainer'];\n /** Whether to block scrolling outside the popover */\n shouldBlockScroll?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Popover title */\n title?: ReactNode;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'ariaLabel'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'size'\n | 'testId'\n | 'variant'\n >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n children = null,\n className: _className = undefined,\n content,\n contentTestId = undefined,\n footer = undefined,\n openControlled = undefined,\n placement = 'top',\n portalContainer = undefined,\n shouldBlockScroll = undefined,\n testId = undefined,\n title = undefined,\n triggerButtonProps = undefined,\n}: PopoverProps) => {\n // className from slots\n const variants = popoverVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n return (\n <Popover\n classNames={className}\n placement={placement}\n portalContainer={portalContainer}\n radius=\"sm\"\n shouldBlockScroll={shouldBlockScroll}\n showArrow\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(openControlled\n ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n : {})}\n >\n <PopoverTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n {triggerButtonProps ? (\n // TODO: currently we have to use @heroui/button because\n // passing ref does not work (even with forwardRef in Button)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button className={className.trigger} {...triggerButtonProps}>\n {children}\n </Button>\n ) : (\n // eslint-disable-next-line react/button-has-type\n <button className={className.trigger}>{children}</button>\n )}\n </PopoverTrigger>\n <PopoverContent data-testid={contentTestId}>\n {title && (\n <div className={className.header}>\n {title}\n <hr />\n </div>\n )}\n <ScrollShadow className={className.body}>{content}</ScrollShadow>\n {footer && (\n <div className={className.footer}>\n <hr />\n {footer}\n </div>\n )}\n </PopoverContent>\n </Popover>\n );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"],"mappings":";;;;;;;;;AAKA,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,IAAI,4BAA4B;AA+F/B,cAUA,YAVA;AA1FH,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF,CAAC;AA6CD,IAAO,kBAAQ,CAAC;AAAA,EACd,WAAW;AAAA,EACX,WAAW,aAAa;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,qBAAqB;AACvB,MAAoB;AAElB,QAAM,WAAW,gBAAgB;AACjC,QAAM,YAAY,qBAAqB,UAAU,YAAY,SAAS;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,WAAS;AAAA,OAEJ,iBACD,EAAE,QAAQ,eAAe,MAAM,cAAc,eAAe,QAAQ,IACpE,CAAC,IAVN;AAAA,MAYC;AAAA,4BAAC,kBAAe,eAAa,QAE1B;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,uCAAO,WAAW,UAAU,WAAa,qBAAzC,EACE,WACH;AAAA;AAAA;AAAA,UAGA,oBAAC,YAAO,WAAW,UAAU,SAAU,UAAS;AAAA,WAEpD;AAAA,QACA,qBAAC,kBAAe,eAAa,eAC1B;AAAA,mBACC,qBAAC,SAAI,WAAW,UAAU,QACvB;AAAA;AAAA,YACD,oBAAC,QAAG;AAAA,aACN;AAAA,UAEF,oBAAC,wBAAa,WAAW,UAAU,MAAO,mBAAQ;AAAA,UACjD,UACC,qBAAC,SAAI,WAAW,UAAU,QACxB;AAAA,gCAAC,QAAG;AAAA,YACH;AAAA,aACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC1HA,IAAOA,mBAAQ;","names":["Popover_default"]}
|
|
@@ -81,7 +81,7 @@ var Table = ({
|
|
|
81
81
|
isStriped: separation === "striped" || separation === "striped-divider-x",
|
|
82
82
|
isVirtualized: virtualized,
|
|
83
83
|
maxTableHeight,
|
|
84
|
-
removeWrapper: !hasWrapper,
|
|
84
|
+
removeWrapper: virtualized ? false : !hasWrapper,
|
|
85
85
|
rowHeight,
|
|
86
86
|
children: [
|
|
87
87
|
/* @__PURE__ */ jsx(TableHeader, { columns, children: (column) => /* @__PURE__ */ jsx(TableColumn, { children: column.label }, column.key) }),
|
|
@@ -115,4 +115,4 @@ export {
|
|
|
115
115
|
Table_default,
|
|
116
116
|
Table_default2
|
|
117
117
|
};
|
|
118
|
-
//# sourceMappingURL=chunk-
|
|
118
|
+
//# sourceMappingURL=chunk-AFGRLKHU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Table/Table.tsx","../src/Table/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n getKeyValue,\n Table as HeroTable,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n slots: {\n base: '',\n wrapper: '',\n table: '',\n thead: '',\n tbody: '',\n tr: '',\n th: 'bg-content2',\n td: '',\n tfoot: '',\n sortIcon: '',\n emptyWrapper: '',\n loadingWrapper: '',\n },\n variants: {\n separation: {\n divider: {\n tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'divider-x': {\n tr: 'divide-x',\n },\n 'divider-y': {\n tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'striped-divider-x': {\n tr: 'divide-x',\n th: 'border-divider',\n td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n striped: {\n tr: '',\n td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n none: {},\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n key: string;\n label: ReactNode;\n}\n\nexport interface TableRowProps {\n key: string | number;\n [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n /** Aria label for the Table. */\n ariaLabel?: string;\n /** Component to display at the bottom of the Table. */\n bottomContent?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Objects with table data */\n columns: TableColumnProps[];\n /** Component to display if there are no rows! */\n emptyContent?: ReactNode;\n /** Determine if the Table should have a card like wrapper. */\n hasWrapper?: boolean;\n /** remove header */\n hideHeader?: boolean;\n /** Tells the Table to show the loading component. */\n loading?: boolean;\n /** Loading animation component. */\n loadingContent?: ReactNode;\n /** The maximum height of the table in pixels. Required when using virtualization. */\n maxTableHeight?: number;\n /** The fixed height of each row item in pixels. Required when using virtualization. */\n rowHeight?: number;\n /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n rows?: TableRowProps[];\n /** Separation style for the rows & columns. */\n separation?:\n | 'none'\n | 'striped'\n | 'striped-divider-x'\n | 'divider-x'\n | 'divider-y'\n | 'divider';\n /** Keeps the header of the Table in view while scrolling a height limited Table. */\n stickyHeader?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n ariaLabel = undefined,\n bottomContent = undefined,\n className = undefined,\n columns,\n emptyContent = 'No rows to display.',\n hasWrapper = false,\n hideHeader = false,\n loading = false,\n loadingContent = undefined,\n maxTableHeight = undefined,\n rowHeight = undefined,\n rows = [],\n separation = 'none',\n stickyHeader = false,\n testId = undefined,\n virtualized = false,\n}: TableProps) => {\n const variants = tableVariants({ separation });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTable\n aria-label={ariaLabel}\n bottomContent={bottomContent}\n classNames={classNames}\n data-testid={testId && slugify(testId)}\n hideHeader={hideHeader}\n isHeaderSticky={stickyHeader}\n isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n isVirtualized={virtualized}\n maxTableHeight={maxTableHeight}\n removeWrapper={!hasWrapper}\n rowHeight={rowHeight}\n >\n <TableHeader columns={columns}>\n {(column: TableColumnProps) => (\n <TableColumn key={column.key}>{column.label}</TableColumn>\n )}\n </TableHeader>\n <TableBody\n isLoading={loading}\n loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n emptyContent={emptyContent}\n items={rows}\n >\n {(item: TableRowProps) => (\n <TableRow\n key={item.key}\n // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n >\n {(columnKey) => (\n <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n )}\n </TableRow>\n )}\n </TableBody>\n </HeroTable>\n );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n TableProps,\n TableRowProps,\n TableColumnProps,\n VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,SAAS,IAAI,4BAA4B;AA0H9C,SAeM,KAfN;AAvHG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,qBAAqB;AAAA,QACnB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;AA2DD,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,cAAc;AAChB,MAAkB;AAChB,QAAM,WAAW,cAAc,EAAE,WAAW,CAAC;AAC7C,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC;AAAA,MACA,gBAAgB;AAAA,MAChB,WAAW,eAAe,aAAa,eAAe;AAAA,MACtD,eAAe;AAAA,MACf;AAAA,MACA,eAAe,CAAC;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/Table/Table.tsx","../src/Table/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n getKeyValue,\n Table as HeroTable,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n slots: {\n base: '',\n wrapper: '',\n table: '',\n thead: '',\n tbody: '',\n tr: '',\n th: 'bg-content2',\n td: '',\n tfoot: '',\n sortIcon: '',\n emptyWrapper: '',\n loadingWrapper: '',\n },\n variants: {\n separation: {\n divider: {\n tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'divider-x': {\n tr: 'divide-x',\n },\n 'divider-y': {\n tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'striped-divider-x': {\n tr: 'divide-x',\n th: 'border-divider',\n td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n striped: {\n tr: '',\n td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n none: {},\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n key: string;\n label: ReactNode;\n}\n\nexport interface TableRowProps {\n key: string | number;\n [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n /** Aria label for the Table. */\n ariaLabel?: string;\n /** Component to display at the bottom of the Table. */\n bottomContent?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Objects with table data */\n columns: TableColumnProps[];\n /** Component to display if there are no rows! */\n emptyContent?: ReactNode;\n /** Determine if the Table should have a card like wrapper. */\n hasWrapper?: boolean;\n /** remove header */\n hideHeader?: boolean;\n /** Tells the Table to show the loading component. */\n loading?: boolean;\n /** Loading animation component. */\n loadingContent?: ReactNode;\n /** The maximum height of the table in pixels. Required when using virtualization. */\n maxTableHeight?: number;\n /** The fixed height of each row item in pixels. Required when using virtualization. */\n rowHeight?: number;\n /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n rows?: TableRowProps[];\n /** Separation style for the rows & columns. */\n separation?:\n | 'none'\n | 'striped'\n | 'striped-divider-x'\n | 'divider-x'\n | 'divider-y'\n | 'divider';\n /** Keeps the header of the Table in view while scrolling a height limited Table. */\n stickyHeader?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n ariaLabel = undefined,\n bottomContent = undefined,\n className = undefined,\n columns,\n emptyContent = 'No rows to display.',\n hasWrapper = false,\n hideHeader = false,\n loading = false,\n loadingContent = undefined,\n maxTableHeight = undefined,\n rowHeight = undefined,\n rows = [],\n separation = 'none',\n stickyHeader = false,\n testId = undefined,\n virtualized = false,\n}: TableProps) => {\n const variants = tableVariants({ separation });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTable\n aria-label={ariaLabel}\n bottomContent={bottomContent}\n classNames={classNames}\n data-testid={testId && slugify(testId)}\n hideHeader={hideHeader}\n isHeaderSticky={stickyHeader}\n isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n isVirtualized={virtualized}\n maxTableHeight={maxTableHeight}\n removeWrapper={virtualized ? false : !hasWrapper} // always show wrapper if virtualized\n rowHeight={rowHeight}\n >\n <TableHeader columns={columns}>\n {(column: TableColumnProps) => (\n <TableColumn key={column.key}>{column.label}</TableColumn>\n )}\n </TableHeader>\n <TableBody\n isLoading={loading}\n loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n emptyContent={emptyContent}\n items={rows}\n >\n {(item: TableRowProps) => (\n <TableRow\n key={item.key}\n // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n >\n {(columnKey) => (\n <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n )}\n </TableRow>\n )}\n </TableBody>\n </HeroTable>\n );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n TableProps,\n TableRowProps,\n TableColumnProps,\n VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,SAAS,IAAI,4BAA4B;AA0H9C,SAeM,KAfN;AAvHG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,aAAa;AAAA,QACX,IAAI;AAAA,MACN;AAAA,MACA,qBAAqB;AAAA,QACnB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,MAAM,CAAC;AAAA,IACT;AAAA,EACF;AACF,CAAC;AA2DD,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,cAAc;AAChB,MAAkB;AAChB,QAAM,WAAW,cAAc,EAAE,WAAW,CAAC;AAC7C,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,eAAa,UAAU,QAAQ,MAAM;AAAA,MACrC;AAAA,MACA,gBAAgB;AAAA,MAChB,WAAW,eAAe,aAAa,eAAe;AAAA,MACtD,eAAe;AAAA,MACf;AAAA,MACA,eAAe,cAAc,QAAQ,CAAC;AAAA,MACtC;AAAA,MAEA;AAAA,4BAAC,eAAY,SACV,WAAC,WACA,oBAAC,eAA8B,iBAAO,SAApB,OAAO,GAAmB,GAEhD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,gBAAgB,kBAAkB;AAAA,YAClC;AAAA,YACA,OAAO;AAAA,YAEN,WAAC,SACA;AAAA,cAAC;AAAA;AAAA,gBAIE,WAAC,cACA,oBAAC,aAAW,sBAAY,MAAM,SAAS,GAAE;AAAA;AAAA,cAJtC,KAAK;AAAA,YAMZ;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACnKf,IAAOA,iBAAQ;","names":["Table_default"]}
|
|
@@ -81,7 +81,7 @@ var Table = ({
|
|
|
81
81
|
isStriped: separation === "striped" || separation === "striped-divider-x",
|
|
82
82
|
isVirtualized: virtualized,
|
|
83
83
|
maxTableHeight,
|
|
84
|
-
removeWrapper: !hasWrapper,
|
|
84
|
+
removeWrapper: virtualized ? false : !hasWrapper,
|
|
85
85
|
rowHeight,
|
|
86
86
|
children: [
|
|
87
87
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableHeader, { columns, children: (column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _table.TableColumn, { children: column.label }, column.key) }),
|
|
@@ -115,4 +115,4 @@ var Table_default2 = Table_default;
|
|
|
115
115
|
|
|
116
116
|
|
|
117
117
|
exports.tableVariants = tableVariants; exports.Table_default = Table_default; exports.Table_default2 = Table_default2;
|
|
118
|
-
//# sourceMappingURL=chunk-
|
|
118
|
+
//# sourceMappingURL=chunk-AJCAIA6H.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AJCAIA6H.cjs","../src/Table/Table.tsx","../src/Table/index.ts"],"names":["Table_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AJCAIA6H.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport {\n getKeyValue,\n Table as HeroTable,\n TableBody,\n TableCell,\n TableColumn,\n TableHeader,\n TableRow,\n} from '@heroui/table';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// table styling variants\nexport const tableVariants = tv({\n slots: {\n base: '',\n wrapper: '',\n table: '',\n thead: '',\n tbody: '',\n tr: '',\n th: 'bg-content2',\n td: '',\n tfoot: '',\n sortIcon: '',\n emptyWrapper: '',\n loadingWrapper: '',\n },\n variants: {\n separation: {\n divider: {\n tr: 'divide-x rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'divider-x': {\n tr: 'divide-x',\n },\n 'divider-y': {\n tr: 'rounded-lg border-b data-[last=true]:border-none [&:first-child:not([data-first=\"true\"])]:border-none',\n },\n 'striped-divider-x': {\n tr: 'divide-x',\n th: 'border-divider',\n td: 'border-divider first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n striped: {\n tr: '',\n td: 'first:rounded-s-lg last:rounded-e-lg group-data-[odd=true]:bg-content2',\n },\n none: {},\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof tableVariants>;\ntype ClassName = TVClassName<typeof tableVariants>;\n\nexport interface TableColumnProps {\n key: string;\n label: ReactNode;\n}\n\nexport interface TableRowProps {\n key: string | number;\n [key: string | number]: ReactNode;\n}\n\nexport interface TableProps extends VariantProps {\n /** Aria label for the Table. */\n ariaLabel?: string;\n /** Component to display at the bottom of the Table. */\n bottomContent?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Objects with table data */\n columns: TableColumnProps[];\n /** Component to display if there are no rows! */\n emptyContent?: ReactNode;\n /** Determine if the Table should have a card like wrapper. */\n hasWrapper?: boolean;\n /** remove header */\n hideHeader?: boolean;\n /** Tells the Table to show the loading component. */\n loading?: boolean;\n /** Loading animation component. */\n loadingContent?: ReactNode;\n /** The maximum height of the table in pixels. Required when using virtualization. */\n maxTableHeight?: number;\n /** The fixed height of each row item in pixels. Required when using virtualization. */\n rowHeight?: number;\n /** Items displayed as rows in the Table. Should have key-value pair for each column. */\n rows?: TableRowProps[];\n /** Separation style for the rows & columns. */\n separation?:\n | 'none'\n | 'striped'\n | 'striped-divider-x'\n | 'divider-x'\n | 'divider-y'\n | 'divider';\n /** Keeps the header of the Table in view while scrolling a height limited Table. */\n stickyHeader?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Virtualize allows efficient rendering of large lists by only rendering items that are visible in the viewport. */\n virtualized?: boolean;\n}\n\n/**\n * Table component based on [HeroUI Table](https://www.heroui.com//docs/components/table)\n */\nconst Table = ({\n ariaLabel = undefined,\n bottomContent = undefined,\n className = undefined,\n columns,\n emptyContent = 'No rows to display.',\n hasWrapper = false,\n hideHeader = false,\n loading = false,\n loadingContent = undefined,\n maxTableHeight = undefined,\n rowHeight = undefined,\n rows = [],\n separation = 'none',\n stickyHeader = false,\n testId = undefined,\n virtualized = false,\n}: TableProps) => {\n const variants = tableVariants({ separation });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroTable\n aria-label={ariaLabel}\n bottomContent={bottomContent}\n classNames={classNames}\n data-testid={testId && slugify(testId)}\n hideHeader={hideHeader}\n isHeaderSticky={stickyHeader}\n isStriped={separation === 'striped' || separation === 'striped-divider-x'}\n isVirtualized={virtualized}\n maxTableHeight={maxTableHeight}\n removeWrapper={virtualized ? false : !hasWrapper} // always show wrapper if virtualized\n rowHeight={rowHeight}\n >\n <TableHeader columns={columns}>\n {(column: TableColumnProps) => (\n <TableColumn key={column.key}>{column.label}</TableColumn>\n )}\n </TableHeader>\n <TableBody\n isLoading={loading}\n loadingContent={loadingContent || '...'} // TODO: use future spinner/loading component\n emptyContent={emptyContent}\n items={rows}\n >\n {(item: TableRowProps) => (\n <TableRow\n key={item.key}\n // data-testid={`${slugify(testId || 'table')}_item_${slugify(JSON.stringify(item.testId || item.key))}`}\n >\n {(columnKey) => (\n <TableCell>{getKeyValue(item, columnKey)}</TableCell>\n )}\n </TableRow>\n )}\n </TableBody>\n </HeroTable>\n );\n};\n\nexport default Table;\n","import Table, { tableVariants } from './Table';\n\nexport type {\n TableProps,\n TableRowProps,\n TableColumnProps,\n VariantProps,\n} from './Table';\n\nexport { Table, tableVariants };\n\nexport default Table;\n"]}
|
|
@@ -51,10 +51,10 @@ var Popover_default = ({
|
|
|
51
51
|
// TODO: currently we have to use @heroui/button because
|
|
52
52
|
// passing ref does not work (even with forwardRef in Button)
|
|
53
53
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
54
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, {}, triggerButtonProps), { children }))
|
|
54
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, _chunkD4TLDLEXcjs.__spreadProps.call(void 0, _chunkD4TLDLEXcjs.__spreadValues.call(void 0, { className: className.trigger }, triggerButtonProps), { children }))
|
|
55
55
|
) : (
|
|
56
56
|
// eslint-disable-next-line react/button-has-type
|
|
57
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { children })
|
|
57
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { className: className.trigger, children })
|
|
58
58
|
) }),
|
|
59
59
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _popover.PopoverContent, { "data-testid": contentTestId, children: [
|
|
60
60
|
title && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: className.header, children: [
|
|
@@ -79,4 +79,4 @@ var Popover_default2 = Popover_default;
|
|
|
79
79
|
|
|
80
80
|
|
|
81
81
|
exports.Popover_default = Popover_default; exports.Popover_default2 = Popover_default2;
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-EAX5J2I2.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-EAX5J2I2.cjs","../src/Popover/Popover.tsx","../src/Popover/index.ts"],"names":["Popover_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-EAX5J2I2.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n slots: {\n body: 'w-full px-2.5 py-1',\n content: 'flex max-h-[80vh] flex-col p-0',\n footer: 'w-full px-2.5 py-1',\n header: 'w-full px-2.5 py-1',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** content of the popover */\n content: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n contentTestId?: string;\n /** popover footer */\n footer?: ReactNode;\n /** use as controlled component */\n openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n /** placement of the popover relative to its trigger reference */\n placement?: HeroPopoverProps['placement'];\n /** The container element in which the overlay portal will be placed. */\n portalContainer?: HeroPopoverProps['portalContainer'];\n /** Whether to block scrolling outside the popover */\n shouldBlockScroll?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Popover title */\n title?: ReactNode;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'ariaLabel'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'size'\n | 'testId'\n | 'variant'\n >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n children = null,\n className: _className = undefined,\n content,\n contentTestId = undefined,\n footer = undefined,\n openControlled = undefined,\n placement = 'top',\n portalContainer = undefined,\n shouldBlockScroll = undefined,\n testId = undefined,\n title = undefined,\n triggerButtonProps = undefined,\n}: PopoverProps) => {\n // className from slots\n const variants = popoverVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n return (\n <Popover\n classNames={className}\n placement={placement}\n portalContainer={portalContainer}\n radius=\"sm\"\n shouldBlockScroll={shouldBlockScroll}\n showArrow\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(openControlled\n ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n : {})}\n >\n <PopoverTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n {triggerButtonProps ? (\n // TODO: currently we have to use @heroui/button because\n // passing ref does not work (even with forwardRef in Button)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button className={className.trigger} {...triggerButtonProps}>\n {children}\n </Button>\n ) : (\n // eslint-disable-next-line react/button-has-type\n <button className={className.trigger}>{children}</button>\n )}\n </PopoverTrigger>\n <PopoverContent data-testid={contentTestId}>\n {title && (\n <div className={className.header}>\n {title}\n <hr />\n </div>\n )}\n <ScrollShadow className={className.body}>{content}</ScrollShadow>\n {footer && (\n <div className={className.footer}>\n <hr />\n {footer}\n </div>\n )}\n </PopoverContent>\n </Popover>\n );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"]}
|
|
@@ -26,7 +26,18 @@ var alertVariants = tv({
|
|
|
26
26
|
description: "text-inherit"
|
|
27
27
|
}
|
|
28
28
|
}, heroAlertVariants.variants.color),
|
|
29
|
-
variant: __spreadValues({}, heroAlertVariants.variants.variant)
|
|
29
|
+
variant: __spreadValues({}, heroAlertVariants.variants.variant),
|
|
30
|
+
sizeLimit: {
|
|
31
|
+
height: {
|
|
32
|
+
base: "max-h-[150px] overflow-y-auto overflow-x-hidden"
|
|
33
|
+
},
|
|
34
|
+
width: {
|
|
35
|
+
base: "max-w-[480px] overflow-x-auto overflow-y-hidden"
|
|
36
|
+
},
|
|
37
|
+
both: {
|
|
38
|
+
base: "max-h-[150px] max-w-[480px] overflow-y-auto overflow-x-hidden"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
30
41
|
},
|
|
31
42
|
compoundVariants: [
|
|
32
43
|
...heroAlertVariants.compoundVariants,
|
|
@@ -79,6 +90,7 @@ var Alert = ({
|
|
|
79
90
|
icon = void 0,
|
|
80
91
|
isClosable = false,
|
|
81
92
|
onClose = void 0,
|
|
93
|
+
sizeLimit = void 0,
|
|
82
94
|
showIcon = true,
|
|
83
95
|
testId = void 0,
|
|
84
96
|
title = void 0,
|
|
@@ -86,7 +98,8 @@ var Alert = ({
|
|
|
86
98
|
}) => {
|
|
87
99
|
const variants = alertVariants({
|
|
88
100
|
color,
|
|
89
|
-
variant
|
|
101
|
+
variant,
|
|
102
|
+
sizeLimit
|
|
90
103
|
});
|
|
91
104
|
const isHeroUIColor = Object.keys(heroAlertVariants.variants.color).includes(
|
|
92
105
|
color
|
|
@@ -119,4 +132,4 @@ export {
|
|
|
119
132
|
Alert_default,
|
|
120
133
|
Alert_default2
|
|
121
134
|
};
|
|
122
|
-
//# sourceMappingURL=chunk-
|
|
135
|
+
//# sourceMappingURL=chunk-MG3PTEMK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Alert/Alert.tsx","../src/Alert/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { AlertProps as HeroAlertProps } from '@heroui/alert';\nimport type { ReactNode } from 'react';\n\nimport { Alert as HeroAlert } from '@heroui/alert';\nimport { alert as heroAlertVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nexport const alertVariants = tv({\n slots: {\n base: '',\n title: '',\n description: '',\n mainWrapper: '',\n closeButton: '',\n iconWrapper: '',\n alertIcon: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/alert.ts\n color: {\n info: {\n mainWrapper: 'text-inherit',\n title: 'text-inherit',\n description: 'text-inherit',\n },\n ...heroAlertVariants.variants.color,\n },\n variant: {\n ...heroAlertVariants.variants.variant,\n },\n sizeLimit: {\n height: {\n base: 'max-h-[150px] overflow-y-auto overflow-x-hidden',\n },\n width: {\n base: 'max-w-[480px] overflow-x-auto overflow-y-hidden',\n },\n both: {\n base: 'max-h-[150px] max-w-[480px] overflow-y-auto overflow-x-hidden',\n },\n },\n },\n compoundVariants: [\n ...heroAlertVariants.compoundVariants,\n {\n color: 'info',\n variant: 'solid',\n className: {\n base: 'bg-info text-info-foreground',\n alertIcon: 'text-info-foreground',\n closeButton: 'text-inherit',\n },\n },\n {\n color: 'info',\n variant: 'flat',\n className: {\n alertIcon: 'fill-current',\n base: 'dark:bg-info-50/50 bg-info-50 text-info-600',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n },\n },\n {\n color: 'info',\n variant: 'faded',\n className: {\n alertIcon: 'fill-current',\n base: 'dark:bg-info-50/50 border-small border-info-200 bg-info-50 text-info-600 dark:border-info-100',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'border-info-100 bg-info-50 dark:bg-info-100',\n },\n },\n {\n color: 'info',\n variant: 'bordered',\n className: {\n alertIcon: 'fill-current',\n base: 'border-small border-info text-info',\n closeButton: 'text-info-500 data-[hover]:bg-info-200',\n iconWrapper: 'bg-info-100 dark:bg-info-50',\n },\n },\n ],\n});\n\nexport type VariantProps = TVProps<typeof alertVariants>;\ntype ClassName = TVClassName<typeof alertVariants>;\n\nexport interface AlertProps extends VariantProps {\n /** Content displayed inside the Alert if no description is given! */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** Color scheme of the Alert */\n color?: VariantProps['color'];\n /** Content displayed at the end of the Alert */\n endContent?: ReactNode;\n /** Icon displayed at the start of the Alert */\n icon?: ReactNode;\n /** Whether the Alert can be closed */\n isClosable?: boolean;\n /** Callback fired when the close button is clicked */\n onClose?: () => void | undefined;\n /** Whether to show the icon at the start */\n showIcon?: boolean;\n /** limit height to 150px or width to 480px or both */\n sizeLimit?: VariantProps['sizeLimit'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Title displayed in the Alert above the content */\n title?: ReactNode;\n /** Style variant of the Alert */\n variant?: VariantProps['variant'];\n}\n\n/**\n * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)\n */\nconst Alert = ({\n children = undefined,\n className = undefined,\n color = 'primary',\n endContent = undefined,\n icon = undefined,\n isClosable = false,\n onClose = undefined,\n sizeLimit = undefined,\n showIcon = true,\n testId = undefined,\n title = undefined,\n variant = 'solid',\n}: AlertProps) => {\n const variants = alertVariants({\n color,\n variant,\n sizeLimit,\n });\n const isHeroUIColor = Object.keys(heroAlertVariants.variants.color).includes(\n color,\n );\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroAlert\n classNames={classNames}\n color={isHeroUIColor ? (color as HeroAlertProps['color']) : undefined}\n data-testid={testId}\n description={title ? children : undefined}\n endContent={endContent}\n hideIcon={!showIcon}\n icon={icon}\n isClosable={isClosable}\n onClose={onClose}\n title={(title || children) as string}\n variant={variant}\n />\n );\n};\n\nexport default Alert;\n","import Alert, { alertVariants } from './Alert';\n\nexport type { AlertProps } from './Alert';\n\nexport { Alert, alertVariants };\n\nexport default Alert;\n"],"mappings":";;;;;AAIA,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,yBAAyB;AAE3C,SAAS,IAAI,4BAA4B;AA2IrC;AAzIG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,aAAa;AAAA,QACb,OAAO;AAAA,QACP,aAAa;AAAA,MACf;AAAA,OACG,kBAAkB,SAAS;AAAA,IAEhC,SAAS,mBACJ,kBAAkB,SAAS;AAAA,IAEhC,WAAW;AAAA,MACT,QAAQ;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,GAAG,kBAAkB;AAAA,IACrB;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAmCD,IAAM,QAAQ,CAAC;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ,MAAkB;AAChB,QAAM,WAAW,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,gBAAgB,OAAO,KAAK,kBAAkB,SAAS,KAAK,EAAE;AAAA,IAClE;AAAA,EACF;AACA,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,gBAAiB,QAAoC;AAAA,MAC5D,eAAa;AAAA,MACb,aAAa,QAAQ,WAAW;AAAA,MAChC;AAAA,MACA,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAQ,SAAS;AAAA,MACjB;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;AC5Jf,IAAOA,iBAAQ;","names":["Alert_default"]}
|