@techsio/ui-kit 0.46.0 → 0.47.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/organisms/data-table.js +51 -46
- package/dist/src/organisms/data-table.d.ts.map +1 -1
- package/dist/stories/changelog/changelog.stories.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/tokens/components/organisms/_data-table.css +30 -7
- package/src/tokens/components/organisms/_table.css +0 -17
- package/src/tokens/figma/akros/variables.css +438 -0
- package/src/tokens/figma/brand-overrides.css +1 -1
- package/src/tokens/figma/business/variables.css +2 -2
- package/src/tokens/figma/dark/variables.css +39 -1
- package/src/tokens/figma/light/variables.css +431 -6
- package/src/tokens/figma/neo/variables.css +2 -2
- package/src/tokens/figma/neo-dark/variables.css +1 -1
- package/src/tokens/figma/variables.css +430 -5
|
@@ -21,20 +21,20 @@ import { Table } from "./table.js";
|
|
|
21
21
|
const dataTableVariants = tv({
|
|
22
22
|
slots: {
|
|
23
23
|
wrapper: [
|
|
24
|
-
"flex w-full flex-col overflow-hidden rounded-table",
|
|
25
|
-
"border-(length:--border-table
|
|
24
|
+
"flex w-full flex-col overflow-hidden rounded-data-table",
|
|
25
|
+
"border-(length:--border-width-data-table) border-data-table-border"
|
|
26
26
|
],
|
|
27
27
|
toolbar: [
|
|
28
|
-
"flex items-center justify-between gap-
|
|
29
|
-
"bg-table-
|
|
30
|
-
"
|
|
31
|
-
"border-b-(length:--border-table
|
|
28
|
+
"flex items-center justify-between gap-data-table-toolbar",
|
|
29
|
+
"bg-data-table-toolbar-bg text-data-table-toolbar-fg",
|
|
30
|
+
"p-data-table-toolbar",
|
|
31
|
+
"border-b-(length:--border-width-data-table) border-data-table-border"
|
|
32
32
|
],
|
|
33
33
|
toolbarSearch: [
|
|
34
34
|
"min-w-0 flex-1"
|
|
35
35
|
],
|
|
36
36
|
toolbarActions: [
|
|
37
|
-
"flex shrink-0 items-center gap-
|
|
37
|
+
"flex shrink-0 items-center gap-data-table-toolbar"
|
|
38
38
|
],
|
|
39
39
|
scroll: [
|
|
40
40
|
"relative w-full overflow-auto"
|
|
@@ -48,68 +48,68 @@ const dataTableVariants = tv({
|
|
|
48
48
|
"data-[disabled=true]:cursor-default"
|
|
49
49
|
],
|
|
50
50
|
sortIcon: [
|
|
51
|
-
"text-fg
|
|
52
|
-
"data-[active=true]:text-fg-
|
|
51
|
+
"text-data-table-sort-icon-fg",
|
|
52
|
+
"data-[active=true]:text-data-table-sort-icon-fg-active"
|
|
53
53
|
],
|
|
54
54
|
dragHandle: [
|
|
55
|
-
"inline-flex cursor-grab items-center rounded-table text-fg
|
|
55
|
+
"inline-flex cursor-grab items-center rounded-data-table text-data-table-drag-handle-fg",
|
|
56
56
|
"opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
|
|
57
|
-
"hover:bg-table-row-bg-hover hover:opacity-100 focus-visible:opacity-100",
|
|
57
|
+
"hover:bg-data-table-row-bg-hover hover:opacity-100 focus-visible:opacity-100",
|
|
58
58
|
"group-hover/header:opacity-100 group-hover/row:opacity-100",
|
|
59
59
|
"group-focus-within/header:opacity-100 group-focus-within/row:opacity-100",
|
|
60
60
|
"group-data-dragging/header:opacity-100 group-data-dragging/row:opacity-100",
|
|
61
61
|
"active:cursor-grabbing"
|
|
62
62
|
],
|
|
63
63
|
resizeHandle: [
|
|
64
|
-
"absolute end-0 top-0 h-full
|
|
64
|
+
"w-(length:--size-data-table-resize-handle) absolute end-0 top-0 h-full cursor-col-resize touch-none select-none",
|
|
65
65
|
"opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
|
|
66
|
-
"bg-table-
|
|
66
|
+
"bg-data-table-resize-handle-bg hover:opacity-100 focus-visible:opacity-100",
|
|
67
67
|
"group-hover/header:opacity-100"
|
|
68
68
|
],
|
|
69
69
|
filterRow: [
|
|
70
|
-
"bg-table-
|
|
70
|
+
"bg-data-table-filter-row-bg"
|
|
71
71
|
],
|
|
72
72
|
filterCell: [
|
|
73
|
-
"
|
|
73
|
+
"p-data-table-filter-cell",
|
|
74
74
|
"min-w-fit",
|
|
75
|
-
"border-b-(length:--border-table
|
|
75
|
+
"border-b-(length:--border-width-data-table) border-data-table-border"
|
|
76
76
|
],
|
|
77
77
|
filterControl: [
|
|
78
|
-
"flex flex-wrap items-center gap-
|
|
78
|
+
"flex flex-wrap items-center gap-data-table-filter-control"
|
|
79
79
|
],
|
|
80
80
|
editorControl: [
|
|
81
|
-
"flex flex-col gap-
|
|
81
|
+
"flex flex-col gap-data-table-editor"
|
|
82
82
|
],
|
|
83
83
|
editorError: [
|
|
84
|
-
"text-
|
|
84
|
+
"text-data-table-editor-error-fg text-data-table-sm"
|
|
85
85
|
],
|
|
86
86
|
actionsCell: [
|
|
87
87
|
"flex items-center justify-end gap-100"
|
|
88
88
|
],
|
|
89
89
|
empty: [
|
|
90
90
|
"flex flex-col items-center justify-center gap-200",
|
|
91
|
-
"p-
|
|
91
|
+
"p-data-table-empty text-center text-data-table-empty-fg"
|
|
92
92
|
],
|
|
93
93
|
paginationBar: [
|
|
94
|
-
"flex flex-wrap items-center justify-between gap-
|
|
95
|
-
"bg-table-
|
|
96
|
-
"
|
|
97
|
-
"border-t-(length:--border-table
|
|
94
|
+
"flex flex-wrap items-center justify-between gap-data-table-pagination",
|
|
95
|
+
"bg-data-table-pagination-bg text-data-table-pagination-fg",
|
|
96
|
+
"p-data-table-pagination",
|
|
97
|
+
"border-t-(length:--border-width-data-table) border-data-table-border"
|
|
98
98
|
],
|
|
99
99
|
detailBox: [
|
|
100
|
-
"w-full p-
|
|
100
|
+
"w-full p-data-table-detail"
|
|
101
101
|
],
|
|
102
102
|
paginationInfo: [
|
|
103
|
-
"whitespace-nowrap text-table-sm"
|
|
103
|
+
"whitespace-nowrap text-data-table-sm"
|
|
104
104
|
],
|
|
105
105
|
paginationControls: [
|
|
106
|
-
"flex items-center gap-
|
|
106
|
+
"flex items-center gap-data-table-pagination"
|
|
107
107
|
]
|
|
108
108
|
},
|
|
109
109
|
variants: {
|
|
110
110
|
outlined: {
|
|
111
111
|
true: {
|
|
112
|
-
wrapper: "shadow-table-outline"
|
|
112
|
+
wrapper: "shadow-data-table-outline"
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
}
|
|
@@ -245,9 +245,9 @@ const BUILTIN_COLUMN_IDS = new Set([
|
|
|
245
245
|
function pinClass(column, kind) {
|
|
246
246
|
if (!column.getIsPinned()) return;
|
|
247
247
|
return [
|
|
248
|
-
"header" === kind ? "bg-table-header-bg" : "data-table-frozen-cell",
|
|
249
|
-
isLastStartPinned(column) ? "border-e-(length:--border-table
|
|
250
|
-
isFirstEndPinned(column) ? "border-s-(length:--border-table
|
|
248
|
+
"header" === kind ? "bg-data-table-header-bg" : "data-table-frozen-cell",
|
|
249
|
+
isLastStartPinned(column) ? "border-e-(length:--border-width-data-table) border-data-table-border" : "",
|
|
250
|
+
isFirstEndPinned(column) ? "border-s-(length:--border-width-data-table) border-data-table-border" : ""
|
|
251
251
|
].join(" ");
|
|
252
252
|
}
|
|
253
253
|
function HeaderDragHandle({ styles, setActivatorNodeRef, listeners, attributes, label }) {
|
|
@@ -392,21 +392,26 @@ function rowDragClass(dnd, opts) {
|
|
|
392
392
|
return [
|
|
393
393
|
"group/row",
|
|
394
394
|
"focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width) focus-visible:outline-primary",
|
|
395
|
-
"data-[selected=true]:[--dt-row-tint:var(--color-table-row-bg-selected)]",
|
|
396
|
-
"group-hover/row:[--dt-row-tint:var(--color-table-row-bg-hover)]",
|
|
397
|
-
"hover:[--dt-row-tint:var(--color-table-row-bg-hover)]",
|
|
398
|
-
striped ? `${(rowIndex ?? 0) % 2 === 0 ? "bg-table-row-striped-primary [--dt-row-tint:var(--color-table-row-striped-primary)]" : "bg-table-row-striped-secondary [--dt-row-tint:var(--color-table-row-striped-secondary)]"} border-b-0` : "",
|
|
395
|
+
"data-[selected=true]:[--dt-row-tint:var(--color-data-table-row-bg-selected)]",
|
|
396
|
+
"group-hover/row:[--dt-row-tint:var(--color-data-table-row-bg-hover)]",
|
|
397
|
+
"hover:[--dt-row-tint:var(--color-data-table-row-bg-hover)]",
|
|
398
|
+
striped ? `${(rowIndex ?? 0) % 2 === 0 ? "bg-data-table-row-bg-striped-primary [--dt-row-tint:var(--color-data-table-row-bg-striped-primary)]" : "bg-data-table-row-bg-striped-secondary [--dt-row-tint:var(--color-data-table-row-bg-striped-secondary)]"} border-b-0` : "",
|
|
399
399
|
tintNestedRows ? "data-[depth]:data-table-row-nested-tint" : "",
|
|
400
|
-
dnd?.isDragging ? "shadow-table-outline" : "",
|
|
400
|
+
dnd?.isDragging ? "shadow-data-table-outline" : "",
|
|
401
401
|
dnd?.dropSide === "top" ? "border-primary border-t-2" : "",
|
|
402
402
|
dnd?.dropSide === "bottom" ? "border-primary border-b-2" : "",
|
|
403
403
|
className ?? ""
|
|
404
404
|
].filter(Boolean).join(" ");
|
|
405
405
|
}
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
}
|
|
406
|
+
function opaqueSurface(tint) {
|
|
407
|
+
return {
|
|
408
|
+
backgroundColor: "var(--color-data-table-bg)",
|
|
409
|
+
backgroundImage: `linear-gradient(var(${tint}), var(${tint}))`
|
|
410
|
+
};
|
|
411
|
+
}
|
|
412
|
+
const OPAQUE_HEADER_BG = opaqueSurface("--color-data-table-header-bg");
|
|
413
|
+
const OPAQUE_FILTER_ROW_BG = opaqueSurface("--color-data-table-filter-row-bg");
|
|
414
|
+
const OPAQUE_PAGINATION_BG = opaqueSurface("--color-data-table-pagination-bg");
|
|
410
415
|
function sortState(column, enableSorting) {
|
|
411
416
|
if (!(enableSorting && column.getCanSort())) return;
|
|
412
417
|
const sorted = column.getIsSorted();
|
|
@@ -1094,7 +1099,7 @@ function DataTable(props) {
|
|
|
1094
1099
|
className: `${styles.filterCell()} ${pinClass(column, "header") ?? ""}`,
|
|
1095
1100
|
"data-pinned": column.getIsPinned() || void 0,
|
|
1096
1101
|
style: {
|
|
1097
|
-
...
|
|
1102
|
+
...OPAQUE_FILTER_ROW_BG,
|
|
1098
1103
|
...getPinningStyles(column, "header"),
|
|
1099
1104
|
...stickyHeader ? {
|
|
1100
1105
|
position: "sticky",
|
|
@@ -1111,9 +1116,9 @@ function DataTable(props) {
|
|
|
1111
1116
|
})
|
|
1112
1117
|
}, column.id)),
|
|
1113
1118
|
hasActionsColumn && /*#__PURE__*/ jsx("td", {
|
|
1114
|
-
className: stickyActions ? `${styles.filterCell()} sticky end-0 bg-table-
|
|
1119
|
+
className: stickyActions ? `${styles.filterCell()} sticky end-0 bg-data-table-filter-row-bg` : styles.filterCell(),
|
|
1115
1120
|
style: {
|
|
1116
|
-
...
|
|
1121
|
+
...OPAQUE_FILTER_ROW_BG,
|
|
1117
1122
|
...stickyHeader ? {
|
|
1118
1123
|
position: "sticky",
|
|
1119
1124
|
top: headerHeight
|
|
@@ -1368,7 +1373,7 @@ function DataTable(props) {
|
|
|
1368
1373
|
children: translations.emptyTitle
|
|
1369
1374
|
}),
|
|
1370
1375
|
/*#__PURE__*/ jsx("p", {
|
|
1371
|
-
className: "text-table-sm",
|
|
1376
|
+
className: "text-data-table-sm",
|
|
1372
1377
|
children: translations.emptyDescription
|
|
1373
1378
|
})
|
|
1374
1379
|
]
|
|
@@ -1424,7 +1429,7 @@ function DataTable(props) {
|
|
|
1424
1429
|
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
|
|
1425
1430
|
}, header.id)),
|
|
1426
1431
|
hasActionsColumn && /*#__PURE__*/ jsx(Table.Cell, {
|
|
1427
|
-
className: stickyActions ? "sticky end-0 bg-table-footer-bg" : void 0,
|
|
1432
|
+
className: stickyActions ? "sticky end-0 bg-data-table-footer-bg" : void 0,
|
|
1428
1433
|
numeric: true,
|
|
1429
1434
|
style: stickyActions ? {
|
|
1430
1435
|
zIndex: DATA_TABLE_Z.stickyActionsCell
|
|
@@ -1686,7 +1691,7 @@ DataTable.Pagination = function() {
|
|
|
1686
1691
|
}));
|
|
1687
1692
|
return /*#__PURE__*/ jsxs("div", {
|
|
1688
1693
|
className: styles.paginationBar(),
|
|
1689
|
-
style:
|
|
1694
|
+
style: OPAQUE_PAGINATION_BG,
|
|
1690
1695
|
children: [
|
|
1691
1696
|
/*#__PURE__*/ jsx("span", {
|
|
1692
1697
|
className: styles.paginationInfo(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/organisms/data-table.tsx"],"names":[],"mappings":"AAwCA,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EAEvB,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAGlB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,GAAG,EAUT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGnD,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAI1E,OAAO,EAEL,KAAK,mBAAmB,EAGxB,KAAK,uBAAuB,EAE5B,KAAK,uBAAuB,EAM7B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAGL,KAAK,MAAM,EACX,KAAK,SAAS,EAEd,KAAK,oBAAoB,EAOzB,KAAK,GAAG,EAER,KAAK,aAAa,EACnB,MAAM,sBAAsB,CAAA;AAM7B,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EACV,IAAI,EACJ,WAAW,EACX,MAAM,EACN,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,+BAA+B,EAC/B,iBAAiB,EACjB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,MAAM,EACN,GAAG,EACH,aAAa,GACd,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/organisms/data-table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiOtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,3 +1,26 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* DataTable — component tokens.
|
|
3
|
+
*
|
|
4
|
+
* The colour, radius and spacing tokens all come from Figma via
|
|
5
|
+
* libs/ui/src/tokens/figma/variables.css (`--color-data-table-*`,
|
|
6
|
+
* `--padding-data-table-*`, `--spacing-data-table-*`).
|
|
7
|
+
*
|
|
8
|
+
* Kept here: the `-x`/`-y` padding composites. Figma exports padding split
|
|
9
|
+
* into halves, and Tailwind's `p-*` utilities resolve a single
|
|
10
|
+
* `--padding-<name>` value — there is no `px-<name>` lookup for a `-x` token.
|
|
11
|
+
* So the shorthands are rebuilt from the Figma halves (padding: y x), exactly
|
|
12
|
+
* as _table.css does for `--padding-table-cell-*`.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme static {
|
|
16
|
+
--padding-data-table-toolbar: var(--padding-data-table-toolbar-y)
|
|
17
|
+
var(--padding-data-table-toolbar-x);
|
|
18
|
+
--padding-data-table-filter-cell: var(--padding-data-table-filter-cell-y)
|
|
19
|
+
var(--padding-data-table-filter-cell-x);
|
|
20
|
+
--padding-data-table-pagination: var(--padding-data-table-pagination-y)
|
|
21
|
+
var(--padding-data-table-pagination-x);
|
|
22
|
+
}
|
|
23
|
+
|
|
1
24
|
/*
|
|
2
25
|
* DataTable — nested-row tint.
|
|
3
26
|
*
|
|
@@ -5,10 +28,9 @@
|
|
|
5
28
|
* than a background, so it composes with `striped`'s zebra background instead
|
|
6
29
|
* of losing the Tailwind-merge conflict against it (two `bg-*` utilities on
|
|
7
30
|
* one element can't both render; a shadow layers on top of whichever
|
|
8
|
-
* background is already there).
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* still waiting on (see the "PROTOTYPE styling" note in data-table.tsx).
|
|
31
|
+
* background is already there). Reads `--color-data-table-row-bg-nested`,
|
|
32
|
+
* which aliases `--color-table-row-bg-hover` in Figma — the depth shading can
|
|
33
|
+
* now be retargeted without this file knowing which Table token backs it.
|
|
12
34
|
*/
|
|
13
35
|
/*
|
|
14
36
|
* Verified: box-shadow on a `<tr>` *does* paint under `border-collapse` in
|
|
@@ -21,7 +43,7 @@
|
|
|
21
43
|
* would cause.
|
|
22
44
|
*/
|
|
23
45
|
@utility data-table-row-nested-tint {
|
|
24
|
-
box-shadow: inset 0 0 0 9999px var(--color-table-row-bg-
|
|
46
|
+
box-shadow: inset 0 0 0 9999px var(--color-data-table-row-bg-nested);
|
|
25
47
|
}
|
|
26
48
|
|
|
27
49
|
/*
|
|
@@ -37,13 +59,14 @@
|
|
|
37
59
|
* inheriting it yields a see-through cell.
|
|
38
60
|
*
|
|
39
61
|
* Compositing solves both at once — the same trick `OPAQUE_HEADER_BG` uses for
|
|
40
|
-
* the header. The opaque
|
|
62
|
+
* the header. The opaque surface is `--color-data-table-pinned-cell-bg` as the
|
|
63
|
+
* background-*color*; the row tint
|
|
41
64
|
* is painted over it as a gradient image, read from a custom property the row
|
|
42
65
|
* sets. Custom properties inherit, so the row can drive its cells' tint
|
|
43
66
|
* without either knowing about the other.
|
|
44
67
|
*/
|
|
45
68
|
@utility data-table-frozen-cell {
|
|
46
|
-
background-color: var(--color-table-bg);
|
|
69
|
+
background-color: var(--color-data-table-pinned-cell-bg);
|
|
47
70
|
background-image: linear-gradient(
|
|
48
71
|
var(--dt-row-tint, transparent),
|
|
49
72
|
var(--dt-row-tint, transparent)
|
|
@@ -14,21 +14,4 @@
|
|
|
14
14
|
var(--padding-table-cell-md-x);
|
|
15
15
|
--padding-table-cell-lg: var(--padding-table-cell-lg-y)
|
|
16
16
|
var(--padding-table-cell-lg-x);
|
|
17
|
-
|
|
18
|
-
/*
|
|
19
|
-
* Foreground for a selected row. Figma exports
|
|
20
|
-
* --color-table-row-bg-selected but has no `fg` counterpart, so
|
|
21
|
-
* `text-table-row-fg-selected` in table.tsx generated no utility at all and
|
|
22
|
-
* selected rows silently kept their normal text colour on the filled brand
|
|
23
|
-
* background. Reported by review; this restores the intended pairing.
|
|
24
|
-
*
|
|
25
|
-
* White clears AA against every selected background the row can have:
|
|
26
|
-
* base light #155dfc 5.24:1, base dark #0069a8 5.86:1, neo #e60101 4.81:1
|
|
27
|
-
* in both modes. Mode-invariant, because the selected fill stays a solid
|
|
28
|
-
* brand colour in light and dark alike.
|
|
29
|
-
*
|
|
30
|
-
* TEMPORARY BRIDGE: delete once Figma exports color/table/row/fg/selected —
|
|
31
|
-
* figma/variables.css is imported after this file and would win.
|
|
32
|
-
*/
|
|
33
|
-
--color-table-row-fg-selected: var(--color-white);
|
|
34
17
|
}
|