draft-components 4.8.0 → 4.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/draft-components.css +92 -76
- package/dist/components/form-field/form-field.css +8 -1
- package/dist/components/table/index.d.ts +1 -0
- package/dist/components/table/index.js +1 -0
- package/dist/components/table/index.js.map +1 -1
- package/dist/components/table/table-body.d.ts +1 -1
- package/dist/components/table/table-body.js +2 -3
- package/dist/components/table/table-body.js.map +1 -1
- package/dist/components/table/table-cell.d.ts +1 -1
- package/dist/components/table/table-cell.js +2 -3
- package/dist/components/table/table-cell.js.map +1 -1
- package/dist/components/table/table-container.d.ts +2 -11
- package/dist/components/table/table-container.js +2 -14
- package/dist/components/table/table-container.js.map +1 -1
- package/dist/components/table/table-footer.d.ts +5 -0
- package/dist/components/table/table-footer.js +6 -0
- package/dist/components/table/table-footer.js.map +1 -0
- package/dist/components/table/table-head-cell.d.ts +1 -1
- package/dist/components/table/table-head-cell.js +2 -7
- package/dist/components/table/table-head-cell.js.map +1 -1
- package/dist/components/table/table-head.d.ts +2 -5
- package/dist/components/table/table-head.js +2 -6
- package/dist/components/table/table-head.js.map +1 -1
- package/dist/components/table/table-row.d.ts +1 -1
- package/dist/components/table/table-row.js +2 -6
- package/dist/components/table/table-row.js.map +1 -1
- package/dist/components/table/table.css +84 -75
- package/dist/components/table/table.d.ts +5 -1
- package/dist/components/table/table.js +5 -1
- package/dist/components/table/table.js.map +1 -1
- package/package.json +1 -1
package/css/draft-components.css
CHANGED
|
@@ -4232,7 +4232,8 @@
|
|
|
4232
4232
|
}
|
|
4233
4233
|
|
|
4234
4234
|
.dc-form-field {
|
|
4235
|
-
display:
|
|
4235
|
+
display: grid;
|
|
4236
|
+
justify-items: start;
|
|
4236
4237
|
min-width: 0;
|
|
4237
4238
|
text-align: left;
|
|
4238
4239
|
color-scheme: light;
|
|
@@ -4242,6 +4243,12 @@
|
|
|
4242
4243
|
margin-bottom: 4px;
|
|
4243
4244
|
}
|
|
4244
4245
|
|
|
4246
|
+
.dc-form-field__input,
|
|
4247
|
+
.dc-form-field__error,
|
|
4248
|
+
.dc-form-field__hint {
|
|
4249
|
+
width: 100%;
|
|
4250
|
+
}
|
|
4251
|
+
|
|
4245
4252
|
.dc-form-field__error,
|
|
4246
4253
|
.dc-form-field__hint {
|
|
4247
4254
|
display: block;
|
|
@@ -4427,13 +4434,14 @@
|
|
|
4427
4434
|
.dc-table {
|
|
4428
4435
|
--color: var(--dc-text-color-primary);
|
|
4429
4436
|
--border-color: var(--dc-neutral-300);
|
|
4437
|
+
--border: 1px solid var(--border-color);
|
|
4430
4438
|
--background: var(--dc-background-primary);
|
|
4431
|
-
--
|
|
4439
|
+
--background-sticky: rgb(var(--dc-white-rgb) / 80%);
|
|
4440
|
+
--backdrop-filter-sticky: blur(20px) saturate(180%);
|
|
4441
|
+
--head-background: var(--background);
|
|
4432
4442
|
--row-background-stripped: var(--dc-neutral-100);
|
|
4433
4443
|
--row-background-selected: var(--dc-neutral-100);
|
|
4434
|
-
--row-background-highlighted:
|
|
4435
|
-
--cell-background-hover: var(--dc-neutral-100);
|
|
4436
|
-
--cell-background-focus: var(--dc-neutral-100);
|
|
4444
|
+
--row-background-highlighted: var(--dc-neutral-200);
|
|
4437
4445
|
--cell-padding: 8px 12px;
|
|
4438
4446
|
--sort-btn-focus-ring: 2px solid var(--dc-focus-ring-color);
|
|
4439
4447
|
--sort-btn-focus-ring-offset: 2px;
|
|
@@ -4443,72 +4451,110 @@
|
|
|
4443
4451
|
--sort-icon-background: rgb(var(--dc-neutral-900-rgb) / 7.5%);
|
|
4444
4452
|
--sort-icon-radius: 4px;
|
|
4445
4453
|
|
|
4454
|
+
width: 100%;
|
|
4455
|
+
font: var(--dc-text-sm);
|
|
4456
|
+
color: var(--color);
|
|
4457
|
+
text-align: left;
|
|
4446
4458
|
color-scheme: light;
|
|
4447
4459
|
}
|
|
4448
4460
|
|
|
4449
4461
|
.dc-table-container {
|
|
4450
4462
|
box-sizing: border-box;
|
|
4451
|
-
|
|
4452
|
-
overflow-x: auto;
|
|
4463
|
+
overflow: auto;
|
|
4453
4464
|
scroll-snap-type: x mandatory;
|
|
4454
|
-
border-color: var(--border-color);
|
|
4455
|
-
border-style: solid;
|
|
4456
|
-
border-width: 0;
|
|
4457
4465
|
scroll-behavior: smooth;
|
|
4458
4466
|
}
|
|
4459
4467
|
|
|
4460
|
-
.dc-table-container_border_all {
|
|
4461
|
-
border-width: 1px;
|
|
4462
|
-
}
|
|
4463
|
-
|
|
4464
|
-
.dc-table-container_border_top {
|
|
4465
|
-
border-top-width: 1px;
|
|
4466
|
-
}
|
|
4467
|
-
|
|
4468
|
-
.dc-table-container_border_right {
|
|
4469
|
-
border-right-width: 1px;
|
|
4470
|
-
}
|
|
4471
|
-
|
|
4472
|
-
.dc-table-container_border_bottom {
|
|
4473
|
-
border-bottom-width: 1px;
|
|
4474
|
-
}
|
|
4475
|
-
|
|
4476
|
-
.dc-table-container_border_left {
|
|
4477
|
-
border-left-width: 1px;
|
|
4478
|
-
}
|
|
4479
|
-
|
|
4480
4468
|
.dc-table {
|
|
4481
|
-
width: 100%;
|
|
4482
|
-
font: var(--dc-text-sm);
|
|
4483
4469
|
font-variant-numeric: tabular-nums;
|
|
4484
|
-
color: var(--color);
|
|
4485
4470
|
border-spacing: 0;
|
|
4486
4471
|
border-collapse: separate;
|
|
4487
4472
|
}
|
|
4488
4473
|
|
|
4489
|
-
.dc-table
|
|
4474
|
+
.dc-table th,
|
|
4475
|
+
.dc-table td {
|
|
4490
4476
|
box-sizing: border-box;
|
|
4491
4477
|
padding: var(--cell-padding);
|
|
4492
4478
|
scroll-snap-align: start;
|
|
4493
4479
|
background: var(--background);
|
|
4494
|
-
border-bottom: 1px solid var(--border-color);
|
|
4495
4480
|
}
|
|
4496
4481
|
|
|
4497
|
-
.dc-table
|
|
4482
|
+
.dc-table th {
|
|
4498
4483
|
font-size: 90%;
|
|
4499
4484
|
font-weight: 700;
|
|
4500
4485
|
white-space: nowrap;
|
|
4501
|
-
|
|
4486
|
+
background: var(--head-background);
|
|
4502
4487
|
}
|
|
4503
4488
|
|
|
4504
|
-
.dc-table_cell_sm
|
|
4489
|
+
.dc-table_cell_sm th,
|
|
4490
|
+
.dc-table_cell_sm td {
|
|
4505
4491
|
--cell-padding: 4px 8px;
|
|
4506
4492
|
}
|
|
4507
4493
|
|
|
4508
|
-
.dc-table_cell_lg
|
|
4494
|
+
.dc-table_cell_lg th,
|
|
4495
|
+
.dc-table_cell_lg td {
|
|
4509
4496
|
--cell-padding: 12px 16px;
|
|
4510
4497
|
}
|
|
4511
4498
|
|
|
4499
|
+
.dc-table thead th,
|
|
4500
|
+
.dc-table thead td {
|
|
4501
|
+
border-bottom: var(--border);
|
|
4502
|
+
}
|
|
4503
|
+
|
|
4504
|
+
.dc-table tfoot th,
|
|
4505
|
+
.dc-table tfoot td {
|
|
4506
|
+
border-top: var(--border);
|
|
4507
|
+
}
|
|
4508
|
+
|
|
4509
|
+
.dc-table_sticky_header thead,
|
|
4510
|
+
.dc-table_sticky_footer tfoot {
|
|
4511
|
+
position: sticky;
|
|
4512
|
+
z-index: 1;
|
|
4513
|
+
background: var(--background-sticky);
|
|
4514
|
+
-webkit-backdrop-filter: var(--backdrop-filter-sticky);
|
|
4515
|
+
backdrop-filter: var(--backdrop-filter-sticky);
|
|
4516
|
+
}
|
|
4517
|
+
|
|
4518
|
+
.dc-table_sticky_header thead {
|
|
4519
|
+
top: 0;
|
|
4520
|
+
}
|
|
4521
|
+
|
|
4522
|
+
.dc-table_sticky_footer tfoot {
|
|
4523
|
+
bottom: 0;
|
|
4524
|
+
}
|
|
4525
|
+
|
|
4526
|
+
.dc-table_sticky_header thead th,
|
|
4527
|
+
.dc-table_sticky_header thead td,
|
|
4528
|
+
.dc-table_sticky_footer tfoot th,
|
|
4529
|
+
.dc-table_sticky_footer tfoot td {
|
|
4530
|
+
background: none;
|
|
4531
|
+
}
|
|
4532
|
+
|
|
4533
|
+
.dc-table_bordered th + th,
|
|
4534
|
+
.dc-table_bordered td + td {
|
|
4535
|
+
border-left: var(--border);
|
|
4536
|
+
}
|
|
4537
|
+
|
|
4538
|
+
.dc-table tbody tr + tr td {
|
|
4539
|
+
border-top: var(--border);
|
|
4540
|
+
}
|
|
4541
|
+
|
|
4542
|
+
.dc-table_striped tbody tr + tr td {
|
|
4543
|
+
border-top-color: transparent;
|
|
4544
|
+
}
|
|
4545
|
+
|
|
4546
|
+
.dc-table_striped tr:nth-child(even) td {
|
|
4547
|
+
background: var(--row-background-stripped);
|
|
4548
|
+
}
|
|
4549
|
+
|
|
4550
|
+
.dc-table tr[data-selected="true"] td {
|
|
4551
|
+
background: var(--row-background-selected);
|
|
4552
|
+
}
|
|
4553
|
+
|
|
4554
|
+
.dc-table_highlight_row tbody tr:hover td {
|
|
4555
|
+
background: var(--row-background-highlighted);
|
|
4556
|
+
}
|
|
4557
|
+
|
|
4512
4558
|
.dc-table-cell__sort-btn {
|
|
4513
4559
|
position: relative;
|
|
4514
4560
|
padding: 0 calc(var(--sort-icon-gap) + var(--sort-icon-size)) 0 0;
|
|
@@ -4553,47 +4599,17 @@
|
|
|
4553
4599
|
height: 90%;
|
|
4554
4600
|
}
|
|
4555
4601
|
|
|
4556
|
-
.dc-table-head_tinted .dc-table-cell {
|
|
4557
|
-
background: var(--head-background);
|
|
4558
|
-
}
|
|
4559
|
-
|
|
4560
|
-
.dc-table-row_selected .dc-table-cell {
|
|
4561
|
-
background: var(--row-background-selected) !important;
|
|
4562
|
-
}
|
|
4563
|
-
|
|
4564
|
-
.dc-table_bordered .dc-table-cell:not(:last-child) {
|
|
4565
|
-
border-right: 1px solid var(--border-color);
|
|
4566
|
-
}
|
|
4567
|
-
|
|
4568
|
-
.dc-table_striped .dc-table-body .dc-table-cell {
|
|
4569
|
-
border-bottom-color: transparent;
|
|
4570
|
-
}
|
|
4571
|
-
|
|
4572
|
-
.dc-table-body .dc-table-row:last-child .dc-table-cell {
|
|
4573
|
-
border-bottom-color: transparent;
|
|
4574
|
-
}
|
|
4575
|
-
|
|
4576
|
-
.dc-table_striped .dc-table-body .dc-table-row:nth-child(even) .dc-table-cell {
|
|
4577
|
-
background: var(--row-background-stripped);
|
|
4578
|
-
}
|
|
4579
|
-
|
|
4580
|
-
.dc-table_highlight_row .dc-table-body .dc-table-row:hover .dc-table-cell {
|
|
4581
|
-
background: var(--row-background-highlighted);
|
|
4582
|
-
}
|
|
4583
|
-
|
|
4584
|
-
.dark .dc-table,
|
|
4585
|
-
.dark.dc-table,
|
|
4586
4602
|
.dark .dc-table-container,
|
|
4587
|
-
.dark.dc-table-container
|
|
4603
|
+
.dark.dc-table-container,
|
|
4604
|
+
.dark .dc-table,
|
|
4605
|
+
.dark.dc-table {
|
|
4588
4606
|
--color: var(--dc-text-color-primary);
|
|
4589
4607
|
--border-color: var(--dc-neutral-600);
|
|
4590
4608
|
--background: var(--dc-background-primary);
|
|
4591
|
-
--
|
|
4592
|
-
--row-background-stripped: var(--dc-neutral-
|
|
4593
|
-
--row-background-selected: var(--dc-neutral-
|
|
4594
|
-
--row-background-highlighted:
|
|
4595
|
-
--cell-background-hover: var(--dc-neutral-800);
|
|
4596
|
-
--cell-background-focus: var(--dc-neutral-800);
|
|
4609
|
+
--background-sticky: rgb(var(--dc-neutral-800-rgb) / 80%);
|
|
4610
|
+
--row-background-stripped: var(--dc-neutral-700);
|
|
4611
|
+
--row-background-selected: var(--dc-neutral-700);
|
|
4612
|
+
--row-background-highlighted: var(--dc-neutral-600);
|
|
4597
4613
|
--sort-icon-color: var(--dc-neutral-100);
|
|
4598
4614
|
--sort-icon-background: rgb(var(--dc-neutral-100-rgb) / 15%);
|
|
4599
4615
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.dc-form-field {
|
|
2
|
-
display:
|
|
2
|
+
display: grid;
|
|
3
|
+
justify-items: start;
|
|
3
4
|
min-width: 0;
|
|
4
5
|
text-align: left;
|
|
5
6
|
color-scheme: light;
|
|
@@ -9,6 +10,12 @@
|
|
|
9
10
|
margin-bottom: 4px;
|
|
10
11
|
}
|
|
11
12
|
|
|
13
|
+
.dc-form-field__input,
|
|
14
|
+
.dc-form-field__error,
|
|
15
|
+
.dc-form-field__hint {
|
|
16
|
+
width: 100%;
|
|
17
|
+
}
|
|
18
|
+
|
|
12
19
|
.dc-form-field__error,
|
|
13
20
|
.dc-form-field__hint {
|
|
14
21
|
display: block;
|
|
@@ -2,6 +2,7 @@ export * from './table-container.js';
|
|
|
2
2
|
export * from './table.js';
|
|
3
3
|
export * from './table-head.js';
|
|
4
4
|
export * from './table-body.js';
|
|
5
|
+
export * from './table-footer.js';
|
|
5
6
|
export * from './table-row.js';
|
|
6
7
|
export * from './table-head-cell.js';
|
|
7
8
|
export * from './table-cell.js';
|
|
@@ -2,6 +2,7 @@ export * from './table-container.js';
|
|
|
2
2
|
export * from './table.js';
|
|
3
3
|
export * from './table-head.js';
|
|
4
4
|
export * from './table-body.js';
|
|
5
|
+
export * from './table-footer.js';
|
|
5
6
|
export * from './table-row.js';
|
|
6
7
|
export * from './table-head-cell.js';
|
|
7
8
|
export * from './table-cell.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ComponentProps } from 'react';
|
|
2
2
|
type TableBodyHTMLProps = ComponentProps<'tbody'>;
|
|
3
3
|
export type TableBodyProps = TableBodyHTMLProps;
|
|
4
|
-
export declare function TableBody(
|
|
4
|
+
export declare function TableBody(props: TableBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import {} from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return (_jsx("tbody", { ...props, className: classNames(className, 'dc-table-body'), children: children }));
|
|
3
|
+
export function TableBody(props) {
|
|
4
|
+
return _jsx("tbody", { ...props });
|
|
6
5
|
}
|
|
7
6
|
//# sourceMappingURL=table-body.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../src/components/table/table-body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../src/components/table/table-body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,OAAO,mBAAW,KAAK,GAAI,CAAC;AAC9B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ComponentProps } from 'react';
|
|
2
2
|
type TableCellHTMLProps = ComponentProps<'td'>;
|
|
3
3
|
export type TableCellProps = TableCellHTMLProps;
|
|
4
|
-
export declare function TableCell(
|
|
4
|
+
export declare function TableCell(props: TableCellProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import {} from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return (_jsx("td", { ...props, className: classNames('dc-table-cell', className), children: children }));
|
|
3
|
+
export function TableCell(props) {
|
|
4
|
+
return _jsx("td", { ...props });
|
|
6
5
|
}
|
|
7
6
|
//# sourceMappingURL=table-cell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-cell.js","sourceRoot":"","sources":["../../../src/components/table/table-cell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-cell.js","sourceRoot":"","sources":["../../../src/components/table/table-cell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,OAAO,gBAAQ,KAAK,GAAI,CAAC;AAC3B,CAAC"}
|
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
import { type ComponentProps } from 'react';
|
|
2
|
-
export type TableContainerBorder = {
|
|
3
|
-
top?: boolean;
|
|
4
|
-
right?: boolean;
|
|
5
|
-
bottom?: boolean;
|
|
6
|
-
left?: boolean;
|
|
7
|
-
};
|
|
8
2
|
type TableContainerHTMLProps = ComponentProps<'div'>;
|
|
9
|
-
type
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
export type TableContainerProps = TableContainerBaseProps & Omit<TableContainerHTMLProps, keyof TableContainerBaseProps>;
|
|
13
|
-
export declare function TableContainer({ border, className, children, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export type TableContainerProps = TableContainerHTMLProps;
|
|
4
|
+
export declare function TableContainer({ className, children, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
14
5
|
export {};
|
|
@@ -1,19 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import {} from 'react';
|
|
3
3
|
import { classNames } from '../../lib/react-helpers.js';
|
|
4
|
-
export function TableContainer({
|
|
5
|
-
|
|
6
|
-
if (typeof border === 'object' && border != null) {
|
|
7
|
-
modifier = classNames({
|
|
8
|
-
'dc-table-container_border_top': border.top,
|
|
9
|
-
'dc-table-container_border_right': border.right,
|
|
10
|
-
'dc-table-container_border_bottom': border.bottom,
|
|
11
|
-
'dc-table-container_border_left': border.left,
|
|
12
|
-
});
|
|
13
|
-
}
|
|
14
|
-
else if (border === 'all') {
|
|
15
|
-
modifier = 'dc-table-container_border_all';
|
|
16
|
-
}
|
|
17
|
-
return (_jsx("div", { ...props, className: classNames(className, modifier, 'dc-table-container'), children: children }));
|
|
4
|
+
export function TableContainer({ className, children, ...props }) {
|
|
5
|
+
return (_jsx("div", { ...props, className: classNames(className, 'dc-table-container'), children: children }));
|
|
18
6
|
}
|
|
19
7
|
//# sourceMappingURL=table-container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../src/components/table/table-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../src/components/table/table-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,UAAU,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACY;IACpB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC,YAErD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-footer.js","sourceRoot":"","sources":["../../../src/components/table/table-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,WAAW,CAAC,KAAqB;IAC/C,OAAO,mBAAW,KAAK,GAAI,CAAC;AAC9B,CAAC"}
|
|
@@ -7,5 +7,5 @@ type TableHeadCellBaseProps = {
|
|
|
7
7
|
onChangeSort?: (sort: TableHeadCellSort) => void;
|
|
8
8
|
};
|
|
9
9
|
export type TableHeadCellProps = TableHeadCellBaseProps & Omit<TableHeadCellHTMLProps, keyof TableHeadCellBaseProps>;
|
|
10
|
-
export declare function TableHeadCell({ isSortable, sort,
|
|
10
|
+
export declare function TableHeadCell({ isSortable, sort, 'aria-sort': ariaSort, children, onChangeSort, ...props }: TableHeadCellProps): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import {} from 'react';
|
|
3
|
-
|
|
4
|
-
export function TableHeadCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }) {
|
|
3
|
+
export function TableHeadCell({ isSortable = false, sort = 'none', 'aria-sort': ariaSort = sort, children, onChangeSort, ...props }) {
|
|
5
4
|
if (isSortable) {
|
|
6
5
|
let icon;
|
|
7
6
|
if (sort === 'ascending') {
|
|
@@ -30,11 +29,7 @@ export function TableHeadCell({ isSortable = false, sort = 'none', className, ch
|
|
|
30
29
|
};
|
|
31
30
|
children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: handleClick, children: [children, icon && (_jsx("span", { className: "dc-table-cell__sort-btn-icon", "aria-hidden": true, children: icon }))] }));
|
|
32
31
|
}
|
|
33
|
-
return (_jsx("th", { ...props,
|
|
34
|
-
'dc-table-cell': true,
|
|
35
|
-
'dc-table-cell_head': true,
|
|
36
|
-
'dc-table-cell_sortable': isSortable,
|
|
37
|
-
}), "aria-sort": isSortable ? sort : props['aria-sort'], children: children }));
|
|
32
|
+
return (_jsx("th", { ...props, "aria-sort": ariaSort, "data-sortable": isSortable, children: children }));
|
|
38
33
|
}
|
|
39
34
|
function ChevronUpIcon({ width = 20, height = 20, ...props }) {
|
|
40
35
|
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: width, height: height, fill: "currentColor", ...props, children: _jsx("path", { d: "M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z", clipRule: "evenodd", fillRule: "evenodd" }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-head-cell.js","sourceRoot":"","sources":["../../../src/components/table/table-head-cell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-head-cell.js","sourceRoot":"","sources":["../../../src/components/table/table-head-cell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { type ComponentProps } from 'react';
|
|
2
2
|
type TableHeadHTMLProps = ComponentProps<'thead'>;
|
|
3
|
-
type
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
export type TableHeadProps = TableHeadBaseProps & Omit<TableHeadHTMLProps, keyof TableHeadBaseProps>;
|
|
7
|
-
export declare function TableHead({ className, isTinted, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export type TableHeadProps = TableHeadHTMLProps;
|
|
4
|
+
export declare function TableHead(props: TableHeadProps): import("react/jsx-runtime").JSX.Element;
|
|
8
5
|
export {};
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import {} from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return (_jsx("thead", { ...props, className: classNames(className, {
|
|
6
|
-
'dc-table-head': true,
|
|
7
|
-
'dc-table-head_tinted': isTinted,
|
|
8
|
-
}) }));
|
|
3
|
+
export function TableHead(props) {
|
|
4
|
+
return _jsx("thead", { ...props });
|
|
9
5
|
}
|
|
10
6
|
//# sourceMappingURL=table-head.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-head.js","sourceRoot":"","sources":["../../../src/components/table/table-head.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-head.js","sourceRoot":"","sources":["../../../src/components/table/table-head.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,OAAO,mBAAW,KAAK,GAAI,CAAC;AAC9B,CAAC"}
|
|
@@ -4,5 +4,5 @@ type TableRowBaseProps = {
|
|
|
4
4
|
isSelected?: boolean;
|
|
5
5
|
};
|
|
6
6
|
export type TableRowProps = TableRowBaseProps & Omit<TableRowHTMLProps, keyof TableRowBaseProps>;
|
|
7
|
-
export declare function TableRow({
|
|
7
|
+
export declare function TableRow({ isSelected, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import {} from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return (_jsx("tr", { ...props, className: classNames(className, {
|
|
6
|
-
'dc-table-row': true,
|
|
7
|
-
'dc-table-row_selected': isSelected,
|
|
8
|
-
}) }));
|
|
3
|
+
export function TableRow({ isSelected, ...props }) {
|
|
4
|
+
return (_jsx("tr", { ...props, "data-selected": isSelected }));
|
|
9
5
|
}
|
|
10
6
|
//# sourceMappingURL=table-row.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../src/components/table/table-row.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-row.js","sourceRoot":"","sources":["../../../src/components/table/table-row.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAY5C,MAAM,UAAU,QAAQ,CAAC,EACvB,UAAU,EACV,GAAG,KAAK,EACM;IACd,OAAO,CACL,gBACM,KAAK,mBACM,UAAU,GACzB,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
.dc-table {
|
|
3
3
|
--color: var(--dc-text-color-primary);
|
|
4
4
|
--border-color: var(--dc-neutral-300);
|
|
5
|
+
--border: 1px solid var(--border-color);
|
|
5
6
|
--background: var(--dc-background-primary);
|
|
6
|
-
--
|
|
7
|
+
--background-sticky: rgb(var(--dc-white-rgb) / 80%);
|
|
8
|
+
--backdrop-filter-sticky: blur(20px) saturate(180%);
|
|
9
|
+
--head-background: var(--background);
|
|
7
10
|
--row-background-stripped: var(--dc-neutral-100);
|
|
8
11
|
--row-background-selected: var(--dc-neutral-100);
|
|
9
|
-
--row-background-highlighted:
|
|
10
|
-
--cell-background-hover: var(--dc-neutral-100);
|
|
11
|
-
--cell-background-focus: var(--dc-neutral-100);
|
|
12
|
+
--row-background-highlighted: var(--dc-neutral-200);
|
|
12
13
|
--cell-padding: 8px 12px;
|
|
13
14
|
--sort-btn-focus-ring: 2px solid var(--dc-focus-ring-color);
|
|
14
15
|
--sort-btn-focus-ring-offset: 2px;
|
|
@@ -18,72 +19,110 @@
|
|
|
18
19
|
--sort-icon-background: rgb(var(--dc-neutral-900-rgb) / 7.5%);
|
|
19
20
|
--sort-icon-radius: 4px;
|
|
20
21
|
|
|
22
|
+
width: 100%;
|
|
23
|
+
font: var(--dc-text-sm);
|
|
24
|
+
color: var(--color);
|
|
25
|
+
text-align: left;
|
|
21
26
|
color-scheme: light;
|
|
22
27
|
}
|
|
23
28
|
|
|
24
29
|
.dc-table-container {
|
|
25
30
|
box-sizing: border-box;
|
|
26
|
-
|
|
27
|
-
overflow-x: auto;
|
|
31
|
+
overflow: auto;
|
|
28
32
|
scroll-snap-type: x mandatory;
|
|
29
|
-
border-color: var(--border-color);
|
|
30
|
-
border-style: solid;
|
|
31
|
-
border-width: 0;
|
|
32
33
|
scroll-behavior: smooth;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
|
-
.dc-table-container_border_all {
|
|
36
|
-
border-width: 1px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.dc-table-container_border_top {
|
|
40
|
-
border-top-width: 1px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.dc-table-container_border_right {
|
|
44
|
-
border-right-width: 1px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.dc-table-container_border_bottom {
|
|
48
|
-
border-bottom-width: 1px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.dc-table-container_border_left {
|
|
52
|
-
border-left-width: 1px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
36
|
.dc-table {
|
|
56
|
-
width: 100%;
|
|
57
|
-
font: var(--dc-text-sm);
|
|
58
37
|
font-variant-numeric: tabular-nums;
|
|
59
|
-
color: var(--color);
|
|
60
38
|
border-spacing: 0;
|
|
61
39
|
border-collapse: separate;
|
|
62
40
|
}
|
|
63
41
|
|
|
64
|
-
.dc-table
|
|
42
|
+
.dc-table th,
|
|
43
|
+
.dc-table td {
|
|
65
44
|
box-sizing: border-box;
|
|
66
45
|
padding: var(--cell-padding);
|
|
67
46
|
scroll-snap-align: start;
|
|
68
47
|
background: var(--background);
|
|
69
|
-
border-bottom: 1px solid var(--border-color);
|
|
70
48
|
}
|
|
71
49
|
|
|
72
|
-
.dc-table
|
|
50
|
+
.dc-table th {
|
|
73
51
|
font-size: 90%;
|
|
74
52
|
font-weight: 700;
|
|
75
53
|
white-space: nowrap;
|
|
76
|
-
|
|
54
|
+
background: var(--head-background);
|
|
77
55
|
}
|
|
78
56
|
|
|
79
|
-
.dc-table_cell_sm
|
|
57
|
+
.dc-table_cell_sm th,
|
|
58
|
+
.dc-table_cell_sm td {
|
|
80
59
|
--cell-padding: 4px 8px;
|
|
81
60
|
}
|
|
82
61
|
|
|
83
|
-
.dc-table_cell_lg
|
|
62
|
+
.dc-table_cell_lg th,
|
|
63
|
+
.dc-table_cell_lg td {
|
|
84
64
|
--cell-padding: 12px 16px;
|
|
85
65
|
}
|
|
86
66
|
|
|
67
|
+
.dc-table thead th,
|
|
68
|
+
.dc-table thead td {
|
|
69
|
+
border-bottom: var(--border);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.dc-table tfoot th,
|
|
73
|
+
.dc-table tfoot td {
|
|
74
|
+
border-top: var(--border);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.dc-table_sticky_header thead,
|
|
78
|
+
.dc-table_sticky_footer tfoot {
|
|
79
|
+
position: sticky;
|
|
80
|
+
z-index: 1;
|
|
81
|
+
background: var(--background-sticky);
|
|
82
|
+
-webkit-backdrop-filter: var(--backdrop-filter-sticky);
|
|
83
|
+
backdrop-filter: var(--backdrop-filter-sticky);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.dc-table_sticky_header thead {
|
|
87
|
+
top: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.dc-table_sticky_footer tfoot {
|
|
91
|
+
bottom: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.dc-table_sticky_header thead th,
|
|
95
|
+
.dc-table_sticky_header thead td,
|
|
96
|
+
.dc-table_sticky_footer tfoot th,
|
|
97
|
+
.dc-table_sticky_footer tfoot td {
|
|
98
|
+
background: none;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.dc-table_bordered th + th,
|
|
102
|
+
.dc-table_bordered td + td {
|
|
103
|
+
border-left: var(--border);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.dc-table tbody tr + tr td {
|
|
107
|
+
border-top: var(--border);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.dc-table_striped tbody tr + tr td {
|
|
111
|
+
border-top-color: transparent;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.dc-table_striped tr:nth-child(even) td {
|
|
115
|
+
background: var(--row-background-stripped);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.dc-table tr[data-selected="true"] td {
|
|
119
|
+
background: var(--row-background-selected);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.dc-table_highlight_row tbody tr:hover td {
|
|
123
|
+
background: var(--row-background-highlighted);
|
|
124
|
+
}
|
|
125
|
+
|
|
87
126
|
.dc-table-cell__sort-btn {
|
|
88
127
|
position: relative;
|
|
89
128
|
padding: 0 calc(var(--sort-icon-gap) + var(--sort-icon-size)) 0 0;
|
|
@@ -128,47 +167,17 @@
|
|
|
128
167
|
height: 90%;
|
|
129
168
|
}
|
|
130
169
|
|
|
131
|
-
.dc-table-head_tinted .dc-table-cell {
|
|
132
|
-
background: var(--head-background);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.dc-table-row_selected .dc-table-cell {
|
|
136
|
-
background: var(--row-background-selected) !important;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.dc-table_bordered .dc-table-cell:not(:last-child) {
|
|
140
|
-
border-right: 1px solid var(--border-color);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.dc-table_striped .dc-table-body .dc-table-cell {
|
|
144
|
-
border-bottom-color: transparent;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.dc-table-body .dc-table-row:last-child .dc-table-cell {
|
|
148
|
-
border-bottom-color: transparent;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.dc-table_striped .dc-table-body .dc-table-row:nth-child(even) .dc-table-cell {
|
|
152
|
-
background: var(--row-background-stripped);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.dc-table_highlight_row .dc-table-body .dc-table-row:hover .dc-table-cell {
|
|
156
|
-
background: var(--row-background-highlighted);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.dark .dc-table,
|
|
160
|
-
.dark.dc-table,
|
|
161
170
|
.dark .dc-table-container,
|
|
162
|
-
.dark.dc-table-container
|
|
171
|
+
.dark.dc-table-container,
|
|
172
|
+
.dark .dc-table,
|
|
173
|
+
.dark.dc-table {
|
|
163
174
|
--color: var(--dc-text-color-primary);
|
|
164
175
|
--border-color: var(--dc-neutral-600);
|
|
165
176
|
--background: var(--dc-background-primary);
|
|
166
|
-
--
|
|
167
|
-
--row-background-stripped: var(--dc-neutral-
|
|
168
|
-
--row-background-selected: var(--dc-neutral-
|
|
169
|
-
--row-background-highlighted:
|
|
170
|
-
--cell-background-hover: var(--dc-neutral-800);
|
|
171
|
-
--cell-background-focus: var(--dc-neutral-800);
|
|
177
|
+
--background-sticky: rgb(var(--dc-neutral-800-rgb) / 80%);
|
|
178
|
+
--row-background-stripped: var(--dc-neutral-700);
|
|
179
|
+
--row-background-selected: var(--dc-neutral-700);
|
|
180
|
+
--row-background-highlighted: var(--dc-neutral-600);
|
|
172
181
|
--sort-icon-color: var(--dc-neutral-100);
|
|
173
182
|
--sort-icon-background: rgb(var(--dc-neutral-100-rgb) / 15%);
|
|
174
183
|
|
|
@@ -2,6 +2,7 @@ import { type ComponentProps } from 'react';
|
|
|
2
2
|
import { TableContainer } from './table-container.js';
|
|
3
3
|
import { TableHead } from './table-head.js';
|
|
4
4
|
import { TableBody } from './table-body.js';
|
|
5
|
+
import { TableFooter } from './table-footer.js';
|
|
5
6
|
import { TableRow } from './table-row.js';
|
|
6
7
|
import { TableHeadCell } from './table-head-cell.js';
|
|
7
8
|
import { TableCell } from './table-cell.js';
|
|
@@ -11,14 +12,17 @@ type TableBaseProps = {
|
|
|
11
12
|
cellSize?: TableCellSize;
|
|
12
13
|
isStriped?: boolean;
|
|
13
14
|
isBordered?: boolean;
|
|
15
|
+
stickyHeader?: boolean;
|
|
16
|
+
stickyFooter?: boolean;
|
|
14
17
|
shouldHighlightHoveredRow?: boolean;
|
|
15
18
|
};
|
|
16
19
|
export type TableProps = TableBaseProps & Omit<TableHTMLProps, keyof TableBaseProps>;
|
|
17
|
-
export declare function Table({ cellSize, isStriped, isBordered, shouldHighlightHoveredRow, className, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function Table({ cellSize, isStriped, isBordered, stickyHeader, stickyFooter, shouldHighlightHoveredRow, className, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
18
21
|
export declare namespace Table {
|
|
19
22
|
var Container: typeof TableContainer;
|
|
20
23
|
var Head: typeof TableHead;
|
|
21
24
|
var Body: typeof TableBody;
|
|
25
|
+
var Footer: typeof TableFooter;
|
|
22
26
|
var Row: typeof TableRow;
|
|
23
27
|
var HeadCell: typeof TableHeadCell;
|
|
24
28
|
var Cell: typeof TableCell;
|
|
@@ -4,20 +4,24 @@ import { classNames } from '../../lib/react-helpers.js';
|
|
|
4
4
|
import { TableContainer } from './table-container.js';
|
|
5
5
|
import { TableHead } from './table-head.js';
|
|
6
6
|
import { TableBody } from './table-body.js';
|
|
7
|
+
import { TableFooter } from './table-footer.js';
|
|
7
8
|
import { TableRow } from './table-row.js';
|
|
8
9
|
import { TableHeadCell } from './table-head-cell.js';
|
|
9
10
|
import { TableCell } from './table-cell.js';
|
|
10
|
-
export function Table({ cellSize = 'md', isStriped = false, isBordered = false, shouldHighlightHoveredRow = false, className, children, ...props }) {
|
|
11
|
+
export function Table({ cellSize = 'md', isStriped = false, isBordered = false, stickyHeader = false, stickyFooter = false, shouldHighlightHoveredRow = false, className, children, ...props }) {
|
|
11
12
|
return (_jsx("table", { ...props, className: classNames(className, 'dc-table', {
|
|
12
13
|
[`dc-table_cell_${cellSize}`]: cellSize,
|
|
13
14
|
'dc-table_striped': isStriped,
|
|
14
15
|
'dc-table_bordered': isBordered,
|
|
16
|
+
'dc-table_sticky_header': stickyHeader,
|
|
17
|
+
'dc-table_sticky_footer': stickyFooter,
|
|
15
18
|
'dc-table_highlight_row': shouldHighlightHoveredRow,
|
|
16
19
|
}), children: children }));
|
|
17
20
|
}
|
|
18
21
|
Table.Container = TableContainer;
|
|
19
22
|
Table.Head = TableHead;
|
|
20
23
|
Table.Body = TableBody;
|
|
24
|
+
Table.Footer = TableFooter;
|
|
21
25
|
Table.Row = TableRow;
|
|
22
26
|
Table.HeadCell = TableHeadCell;
|
|
23
27
|
Table.Cell = TableCell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAmB5C,MAAM,UAAU,KAAK,CAAC,EACpB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,KAAK,EACpB,yBAAyB,GAAG,KAAK,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACG;IACX,OAAO,CACL,mBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,EAAE;YAC3C,CAAC,iBAAiB,QAAQ,EAAE,CAAC,EAAE,QAAQ;YACvC,kBAAkB,EAAE,SAAS;YAC7B,mBAAmB,EAAE,UAAU;YAC/B,wBAAwB,EAAE,YAAY;YACtC,wBAAwB,EAAE,YAAY;YACtC,wBAAwB,EAAE,yBAAyB;SACpD,CAAC,YAED,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AACjC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;AACrB,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC;AAC/B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC"}
|