periplo-ui 3.22.2 → 3.23.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/components/DataTable/DataTable.js +5 -2
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/components/DataTableBody.d.ts +5 -1
- package/dist/components/DataTable/components/DataTableBody.js +9 -3
- package/dist/components/DataTable/components/DataTableBody.js.map +1 -1
- package/dist/components/DataTable/types.d.ts +4 -0
- package/dist/components/Table/Table.d.ts +6 -3
- package/dist/components/Table/Table.js +2 -2
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/table-empty-state.svg +85 -0
- package/package.json +1 -1
|
@@ -27,7 +27,9 @@ function DataTable({
|
|
|
27
27
|
labels = {
|
|
28
28
|
columnVisibilityButton: "Hide columns",
|
|
29
29
|
filters: "Filters",
|
|
30
|
-
moreFilters: "More filters"
|
|
30
|
+
moreFilters: "More filters",
|
|
31
|
+
noOptionsTitle: "No data available",
|
|
32
|
+
noOptionsDescription: "Try adjusting your filters or search criteria"
|
|
31
33
|
},
|
|
32
34
|
className,
|
|
33
35
|
tableClassName
|
|
@@ -161,7 +163,8 @@ function DataTable({
|
|
|
161
163
|
pageSize,
|
|
162
164
|
getRowId,
|
|
163
165
|
rowSelection,
|
|
164
|
-
isSelectionStarted: selection?.isSelectionStarted ?? false
|
|
166
|
+
isSelectionStarted: selection?.isSelectionStarted ?? false,
|
|
167
|
+
labels
|
|
165
168
|
}
|
|
166
169
|
)
|
|
167
170
|
] }) }) }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n flexRender,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n VisibilityState,\n Row,\n PaginationState,\n Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n columns: userColumns,\n data,\n getRowId = (row: TData) => (row as { id: string }).id,\n showColumnVisibilityControls = true,\n isLoading = false,\n pagination,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels = {\n columnVisibilityButton: 'Hide columns',\n filters: 'Filters',\n moreFilters: 'More filters',\n },\n className,\n tableClassName,\n}: DataTableProps<TData>) {\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n const [pageIndex, setPageIndex] = React.useState(0)\n\n const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n const total = isBackendPagination ? pagination.total : data.length\n const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n const totalPages = Math.ceil(total / pageSize)\n\n const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n data,\n getRowId,\n selection,\n })\n\n const rowSelection = React.useMemo(\n () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n [selectedIds],\n )\n\n const SelectColumnHeader = React.useCallback(\n () => (\n <DataTableSelectHeader\n isBackendPagination={isBackendPagination}\n selectedIds={selectedIds}\n data={data}\n handleSelectAll={handleSelectAll}\n isLoading={isLoading}\n />\n ),\n [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n )\n\n const SelectColumnCell = React.useCallback(\n ({ row }: { row: Row<TData> }) => (\n <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n ),\n [selectedIds, getRowId, handleRowSelect],\n )\n\n const tableColumns = React.useMemo(() => {\n const baseColumns = [...userColumns]\n if (selection !== undefined) {\n const selectColumn = {\n id: 'select',\n size: 50,\n cell: SelectColumnCell,\n header: SelectColumnHeader,\n }\n baseColumns.unshift(selectColumn)\n }\n return baseColumns\n }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n const toolbarSelectionProps = React.useMemo(() => {\n if (isBackendPagination && selection) {\n return {\n isSelectionStarted: selection.isSelectionStarted,\n onSelectionStart: selection.onSelectionStart,\n onSelectionCancel: selection.onSelectionCancel,\n selectionSummary: selection.labels?.selectionSummary,\n labels: selection.labels,\n }\n }\n return undefined\n }, [isBackendPagination, selection])\n\n const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n const tablePaginationState = React.useMemo(() => {\n if (!pagination) {\n return undefined\n }\n return {\n pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n pageSize,\n }\n }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n const tableGetPaginationRowModel = React.useMemo(() => {\n return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n }, [pagination, isBackendPagination])\n\n const tableOnPaginationChange = React.useCallback(\n (updater: Updater<PaginationState>) => {\n if (typeof updater === 'function') {\n const newState = updater({ pageIndex, pageSize })\n setPageIndex(newState.pageIndex)\n }\n },\n [pageIndex, pageSize, setPageIndex],\n )\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: tableGetPaginationRowModel,\n onColumnVisibilityChange: setColumnVisibility,\n enableRowSelection: !!selection,\n getRowId: getRowId,\n state: {\n columnVisibility,\n rowSelection,\n pagination: tablePaginationState,\n },\n manualPagination: isBackendPagination,\n onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n })\n\n return (\n <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n <DataTableToolbar\n table={table}\n showColumnVisibilityControls={showColumnVisibilityControls}\n primaryFilters={primaryFilters}\n secondaryFilters={secondaryFilters}\n activePrimaryFiltersCount={activePrimaryFiltersCount}\n activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n labels={labels}\n selection={toolbarSelectionProps}\n />\n\n <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n <div className=\"min-h-0 flex-1 overflow-auto\">\n <div className=\"h-full overflow-auto\">\n <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead\n key={header.id}\n className=\"whitespace-normal\"\n style={{ width: header.column.columnDef.size }}\n >\n <Typography weight=\"medium\">\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </Typography>\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <DataTableBody\n table={table}\n isLoading={isLoading}\n pageSize={pageSize}\n getRowId={getRowId}\n rowSelection={rowSelection}\n isSelectionStarted={selection?.isSelectionStarted ?? false}\n />\n </TableComponent>\n </div>\n </div>\n {!!pagination && (\n <div className=\"border-t px-4 py-2\">\n <DataTablePagination\n table={table}\n total={total}\n pageSize={pageSize}\n currentPage={currentPage}\n totalPages={totalPages}\n onPageChange={handlePageChange}\n isLoading={pagination.isLoading}\n labels={pagination.labels}\n />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n flexRender,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n VisibilityState,\n Row,\n PaginationState,\n Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n columns: userColumns,\n data,\n getRowId = (row: TData) => (row as { id: string }).id,\n showColumnVisibilityControls = true,\n isLoading = false,\n pagination,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels = {\n columnVisibilityButton: 'Hide columns',\n filters: 'Filters',\n moreFilters: 'More filters',\n noOptionsTitle: 'No data available',\n noOptionsDescription: 'Try adjusting your filters or search criteria',\n },\n className,\n tableClassName,\n}: DataTableProps<TData>) {\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n const [pageIndex, setPageIndex] = React.useState(0)\n\n const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n const total = isBackendPagination ? pagination.total : data.length\n const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n const totalPages = Math.ceil(total / pageSize)\n\n const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n data,\n getRowId,\n selection,\n })\n\n const rowSelection = React.useMemo(\n () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n [selectedIds],\n )\n\n const SelectColumnHeader = React.useCallback(\n () => (\n <DataTableSelectHeader\n isBackendPagination={isBackendPagination}\n selectedIds={selectedIds}\n data={data}\n handleSelectAll={handleSelectAll}\n isLoading={isLoading}\n />\n ),\n [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n )\n\n const SelectColumnCell = React.useCallback(\n ({ row }: { row: Row<TData> }) => (\n <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n ),\n [selectedIds, getRowId, handleRowSelect],\n )\n\n const tableColumns = React.useMemo(() => {\n const baseColumns = [...userColumns]\n if (selection !== undefined) {\n const selectColumn = {\n id: 'select',\n size: 50,\n cell: SelectColumnCell,\n header: SelectColumnHeader,\n }\n baseColumns.unshift(selectColumn)\n }\n return baseColumns\n }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n const toolbarSelectionProps = React.useMemo(() => {\n if (isBackendPagination && selection) {\n return {\n isSelectionStarted: selection.isSelectionStarted,\n onSelectionStart: selection.onSelectionStart,\n onSelectionCancel: selection.onSelectionCancel,\n selectionSummary: selection.labels?.selectionSummary,\n labels: selection.labels,\n }\n }\n return undefined\n }, [isBackendPagination, selection])\n\n const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n const tablePaginationState = React.useMemo(() => {\n if (!pagination) {\n return undefined\n }\n return {\n pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n pageSize,\n }\n }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n const tableGetPaginationRowModel = React.useMemo(() => {\n return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n }, [pagination, isBackendPagination])\n\n const tableOnPaginationChange = React.useCallback(\n (updater: Updater<PaginationState>) => {\n if (typeof updater === 'function') {\n const newState = updater({ pageIndex, pageSize })\n setPageIndex(newState.pageIndex)\n }\n },\n [pageIndex, pageSize, setPageIndex],\n )\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: tableGetPaginationRowModel,\n onColumnVisibilityChange: setColumnVisibility,\n enableRowSelection: !!selection,\n getRowId: getRowId,\n state: {\n columnVisibility,\n rowSelection,\n pagination: tablePaginationState,\n },\n manualPagination: isBackendPagination,\n onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n })\n\n return (\n <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n <DataTableToolbar\n table={table}\n showColumnVisibilityControls={showColumnVisibilityControls}\n primaryFilters={primaryFilters}\n secondaryFilters={secondaryFilters}\n activePrimaryFiltersCount={activePrimaryFiltersCount}\n activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n labels={labels}\n selection={toolbarSelectionProps}\n />\n\n <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n <div className=\"min-h-0 flex-1 overflow-auto\">\n <div className=\"h-full overflow-auto\">\n <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead\n key={header.id}\n className=\"whitespace-normal\"\n style={{ width: header.column.columnDef.size }}\n >\n <Typography weight=\"medium\">\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </Typography>\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <DataTableBody\n table={table}\n isLoading={isLoading}\n pageSize={pageSize}\n getRowId={getRowId}\n rowSelection={rowSelection}\n isSelectionStarted={selection?.isSelectionStarted ?? false}\n labels={labels}\n />\n </TableComponent>\n </div>\n </div>\n {!!pagination && (\n <div className=\"border-t px-4 py-2\">\n <DataTablePagination\n table={table}\n total={total}\n pageSize={pageSize}\n currentPage={currentPage}\n totalPages={totalPages}\n onPageChange={handlePageChange}\n isLoading={pagination.isLoading}\n labels={pagination.labels}\n />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACG;AACM;AACxB;AACA;AAEF;AACE;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAuE;AACrE;AACA;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AAAA;AACF;AAEiE;AAGrE;AAA+B;AAEqF;AAE3E;AAGzC;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AAClB;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACkC;AAGpC;AAA4B;AAC1B;AACS;AACwB;AACV;AACG;AACJ;AACtB;AACO;AACL;AACA;AACY;AACd;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAIQ;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACqD;AACrD;AAAA;AACF;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
|
|
@@ -7,6 +7,10 @@ type DataTableBodyProps<TData> = {
|
|
|
7
7
|
readonly getRowId: RowIdentifierFn<TData>;
|
|
8
8
|
readonly rowSelection: Record<string, boolean>;
|
|
9
9
|
readonly isSelectionStarted: boolean;
|
|
10
|
+
readonly labels?: {
|
|
11
|
+
noOptionsTitle?: string;
|
|
12
|
+
noOptionsDescription?: string;
|
|
13
|
+
};
|
|
10
14
|
};
|
|
11
|
-
export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, isSelectionStarted, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, isSelectionStarted, labels, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
12
16
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { flexRender } from '@tanstack/react-table';
|
|
3
3
|
import { Skeleton } from '../../Skeleton/Skeleton.js';
|
|
4
4
|
import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
|
|
@@ -17,7 +17,8 @@ function DataTableBody({
|
|
|
17
17
|
pageSize,
|
|
18
18
|
getRowId,
|
|
19
19
|
rowSelection,
|
|
20
|
-
isSelectionStarted
|
|
20
|
+
isSelectionStarted,
|
|
21
|
+
labels
|
|
21
22
|
}) {
|
|
22
23
|
if (isLoading) {
|
|
23
24
|
return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsx(TableRow, { children: table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => {
|
|
@@ -39,7 +40,12 @@ function DataTableBody({
|
|
|
39
40
|
}
|
|
40
41
|
const rows = table.getRowModel().rows;
|
|
41
42
|
if (!rows.length) {
|
|
42
|
-
|
|
43
|
+
const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible());
|
|
44
|
+
return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { className: "h-full", children: /* @__PURE__ */ jsx(TableCell, { colSpan: visibleColumns.length, className: "h-full p-0", children: /* @__PURE__ */ jsxs("div", { className: "mt-20 flex h-full w-full flex-col items-center justify-center", children: [
|
|
45
|
+
/* @__PURE__ */ jsx("img", { className: "mb-6 w-[200px] md:w-[300px]", src: "/table-empty-state.svg", alt: "No data available" }),
|
|
46
|
+
/* @__PURE__ */ jsx(Typography, { variant: "title-md", weight: "semibold", className: "text-center", children: labels?.noOptionsTitle }),
|
|
47
|
+
/* @__PURE__ */ jsx(Typography, { variant: "title-sm", className: "text-center opacity-80", children: labels?.noOptionsDescription })
|
|
48
|
+
] }) }) }) });
|
|
43
49
|
}
|
|
44
50
|
return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
|
|
45
51
|
const rowId = getRowId(row.original);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n readonly table: Table<TData>\n readonly isLoading?: boolean\n readonly pageSize: number\n readonly getRowId: RowIdentifierFn<TData>\n readonly rowSelection: Record<string, boolean>\n readonly isSelectionStarted: boolean\n}\n\ntype TableRowProps<TData> = {\n readonly row: Row<TData>\n readonly isSelectable: boolean\n readonly isSelected: boolean\n readonly isSelectionStarted: boolean\n readonly getRowId: (row: TData) => string\n readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n row,\n isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n return (\n <TableRow data-selected={isSelected}>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n <Typography>\n {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Typography>\n </TableCell>\n ))}\n </TableRow>\n )\n}\n\nexport function DataTableBody<TData>({\n table,\n isLoading,\n pageSize,\n getRowId,\n rowSelection,\n isSelectionStarted,\n}: DataTableBodyProps<TData>) {\n if (isLoading) {\n return (\n <TableBody>\n {Array.from({ length: pageSize }).map((_unused, index) => (\n <TableRow key={`skeleton-row-${String(index)}`}>\n {table\n .getAllColumns()\n .filter((column) => column.getIsVisible())\n .map((column) => {\n let skeletonClass = 'h-[20px] w-full'\n if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n let justifyClass = 'justify-center'\n if (column.id === 'actions') justifyClass = 'justify-end'\n else if (column.id === 'select') justifyClass = 'justify-start'\n\n return (\n <TableCell\n key={`skeleton-cell-${String(index)}-${column.id}`}\n style={{ width: column.columnDef.size }}\n >\n <div className={cn('flex items-center', justifyClass)}>\n <Skeleton className={cn(skeletonClass)} />\n </div>\n </TableCell>\n )\n })}\n </TableRow>\n ))}\n </TableBody>\n )\n }\n\n const rows = table.getRowModel().rows\n\n if (!rows.length) {\n return (\n <TableBody>\n <TableRow>\n <TableCell colSpan={
|
|
1
|
+
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n readonly table: Table<TData>\n readonly isLoading?: boolean\n readonly pageSize: number\n readonly getRowId: RowIdentifierFn<TData>\n readonly rowSelection: Record<string, boolean>\n readonly isSelectionStarted: boolean\n readonly labels?: {\n noOptionsTitle?: string\n noOptionsDescription?: string\n }\n}\n\ntype TableRowProps<TData> = {\n readonly row: Row<TData>\n readonly isSelectable: boolean\n readonly isSelected: boolean\n readonly isSelectionStarted: boolean\n readonly getRowId: (row: TData) => string\n readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n row,\n isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n return (\n <TableRow data-selected={isSelected}>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n <Typography>\n {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Typography>\n </TableCell>\n ))}\n </TableRow>\n )\n}\n\nexport function DataTableBody<TData>({\n table,\n isLoading,\n pageSize,\n getRowId,\n rowSelection,\n isSelectionStarted,\n labels,\n}: DataTableBodyProps<TData>) {\n if (isLoading) {\n return (\n <TableBody>\n {Array.from({ length: pageSize }).map((_unused, index) => (\n <TableRow key={`skeleton-row-${String(index)}`}>\n {table\n .getAllColumns()\n .filter((column) => column.getIsVisible())\n .map((column) => {\n let skeletonClass = 'h-[20px] w-full'\n if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n let justifyClass = 'justify-center'\n if (column.id === 'actions') justifyClass = 'justify-end'\n else if (column.id === 'select') justifyClass = 'justify-start'\n\n return (\n <TableCell\n key={`skeleton-cell-${String(index)}-${column.id}`}\n style={{ width: column.columnDef.size }}\n >\n <div className={cn('flex items-center', justifyClass)}>\n <Skeleton className={cn(skeletonClass)} />\n </div>\n </TableCell>\n )\n })}\n </TableRow>\n ))}\n </TableBody>\n )\n }\n\n const rows = table.getRowModel().rows\n\n if (!rows.length) {\n const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n return (\n <TableBody>\n <TableRow className=\"h-full\">\n <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n <img className=\"mb-6 w-[200px] md:w-[300px]\" src=\"/table-empty-state.svg\" alt=\"No data available\" />\n <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n {labels?.noOptionsTitle}\n </Typography>\n <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n {labels?.noOptionsDescription}\n </Typography>\n </div>\n </TableCell>\n </TableRow>\n </TableBody>\n )\n }\n\n return (\n <TableBody>\n {rows.map((row) => {\n const rowId = getRowId(row.original)\n const isSelected = rowSelection[rowId] ?? false\n return (\n <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n )\n })}\n </TableBody>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -123,6 +123,10 @@ export type DataTableProps<TData> = {
|
|
|
123
123
|
filters?: string
|
|
124
124
|
/** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
|
|
125
125
|
moreFilters?: string
|
|
126
|
+
/** Text for the no options message (default: "No data available") */
|
|
127
|
+
noOptionsTitle?: string
|
|
128
|
+
/** Text for the no options description (default: "Try adjusting your filters or search criteria") */
|
|
129
|
+
noOptionsDescription?: string
|
|
126
130
|
}
|
|
127
131
|
/** Optional className for the table container */
|
|
128
132
|
readonly className?: string
|
|
@@ -2,15 +2,18 @@ import * as React from 'react';
|
|
|
2
2
|
/**
|
|
3
3
|
* Props for the Table component
|
|
4
4
|
*/
|
|
5
|
-
|
|
5
|
+
type TableProps = {
|
|
6
6
|
/** Additional className for the table element */
|
|
7
7
|
tableClassName?: string;
|
|
8
|
-
}
|
|
8
|
+
} & React.HTMLAttributes<HTMLTableElement>;
|
|
9
9
|
/**
|
|
10
10
|
* A reusable table component that provides a consistent styling and structure
|
|
11
11
|
* for displaying tabular data.
|
|
12
12
|
*/
|
|
13
|
-
declare const Table: React.ForwardRefExoticComponent<
|
|
13
|
+
declare const Table: React.ForwardRefExoticComponent<{
|
|
14
|
+
/** Additional className for the table element */
|
|
15
|
+
tableClassName?: string;
|
|
16
|
+
} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
|
|
14
17
|
/**
|
|
15
18
|
* TableHeader component for grouping header cells
|
|
16
19
|
*/
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { cn } from '../../lib/utils.js';
|
|
3
2
|
import * as React from 'react';
|
|
3
|
+
import { cn } from '../../lib/utils.js';
|
|
4
4
|
|
|
5
|
-
const Table = React.forwardRef(({
|
|
5
|
+
const Table = React.forwardRef(({ tableClassName, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", tableClassName), ...props }));
|
|
6
6
|
Table.displayName = "Table";
|
|
7
7
|
const TableHeader = React.forwardRef(
|
|
8
8
|
({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\n/**\n * Props for the Table component\n */\ntype TableProps = {\n /** Additional className for the table element */\n tableClassName?: string\n} & React.HTMLAttributes<HTMLTableElement>\n\n/**\n * A reusable table component that provides a consistent styling and structure\n * for displaying tabular data.\n */\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(({ tableClassName, ...props }, ref) => (\n <table ref={ref} className={cn('w-full caption-bottom text-sm', tableClassName)} {...props} />\n))\nTable.displayName = 'Table'\n\n/**\n * TableHeader component for grouping header cells\n */\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />,\n)\nTableHeader.displayName = 'TableHeader'\n\n/**\n * TableBody component for grouping table rows\n */\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n ({ className, ...props }, ref) => (\n <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />\n ),\n)\nTableBody.displayName = 'TableBody'\n\n/**\n * TableFooter component for grouping footer cells\n */\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n ({ className, ...props }, ref) => (\n <tfoot ref={ref} className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />\n ),\n)\nTableFooter.displayName = 'TableFooter'\n\n/**\n * TableRow component for table rows with hover and selection states\n */\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n ({ className, ...props }, ref) => (\n <tr\n ref={ref}\n className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}\n {...props}\n />\n ),\n)\nTableRow.displayName = 'TableRow'\n\n/**\n * TableHead component for table header cells\n */\nconst TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(\n ({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={cn('text-muted-foreground h-12 px-4 text-left align-middle font-medium', className)}\n {...props}\n />\n ),\n)\nTableHead.displayName = 'TableHead'\n\n/**\n * TableCell component for table data cells\n */\nconst TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(\n ({ className, ...props }, ref) => <td ref={ref} className={cn('p-4 align-middle', className)} {...props} />,\n)\nTableCell.displayName = 'TableCell'\n\n/**\n * TableCaption component for table captions\n */\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(\n ({ className, ...props }, ref) => (\n <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />\n ),\n)\nTableCaption.displayName = 'TableCaption'\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableProps }\n"],"names":[],"mappings":";;;;AAgBM,MAAA,KAAA,GAAQ,MAAM,UAAyC,CAAA,CAAC,EAAE,cAAgB,EAAA,GAAG,OAAS,EAAA,GAAA,yBACzF,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,+BAAA,EAAiC,cAAc,CAAI,EAAA,GAAG,OAAO,CAC7F;AACD,KAAA,CAAM,WAAc,GAAA,OAAA;AAKpB,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAQ,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,iBAAA,EAAmB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAC7G;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;AAK1B,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAExF;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,yDAAA,EAA2D,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAErH;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;AAK1B,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG;AAAA;AAAA;AAGV;AACA,QAAA,CAAS,WAAc,GAAA,UAAA;AAKvB,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,oEAAA,EAAsE,SAAS,CAAA;AAAA,MAC5F,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAQ,qBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,kBAAA,EAAoB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAC3G;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,eAAe,KAAM,CAAA,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,SAAQ,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,oCAAA,EAAsC,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAElG;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 221">
|
|
3
|
+
<defs>
|
|
4
|
+
<style>
|
|
5
|
+
.cls-1 {
|
|
6
|
+
fill: #070707;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-2 {
|
|
10
|
+
fill: #050505;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cls-3 {
|
|
14
|
+
fill: #010101;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cls-4 {
|
|
18
|
+
fill: #030303;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cls-5 {
|
|
22
|
+
fill: #020101;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.cls-6 {
|
|
26
|
+
fill: #ef7d00;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cls-7 {
|
|
30
|
+
fill: #020202;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.cls-8 {
|
|
34
|
+
fill: #020100;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.cls-9 {
|
|
38
|
+
fill: #040404;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.cls-10 {
|
|
42
|
+
fill: #040303;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.cls-11 {
|
|
46
|
+
fill: #020201;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.cls-12 {
|
|
50
|
+
fill: #010100;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.cls-13 {
|
|
54
|
+
fill: #ed7d30;
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
|
+
</defs>
|
|
58
|
+
<path class="cls-6" d="M239.13,173.06c-1,.36-6.41,2.5-7.41,2.87-.3-.7-18.58-95.42-18.63-95.38-.64.46-6.75-14.66-6.94-14.44-41.44-1.48-139-9.37-140.14-9.48,1.1.19,5.73-10.54,8.23-14.74,1.37-2.3,3.33-3.32,5.97-3.48,8.09-.49,46.32.68,49.08.8,2.85.12,4.47,1.25,5.54,3.84,1.2,2.92,1.81,6.04,3.06,8.94,1.3,3.02,3.31,4.9,6.85,5.06,3.82.17,103.45.71,104.22.63,3.77-.41,5.72,1.68,7.1,4.51.77,1.58.94,3.24.48,5.11-.43,1.76-17.31,105.18-17.42,105.78Z"/>
|
|
59
|
+
<path d="M133.38,144.85c.02,1.25-.24,2.43-.75,3.58-.89,1.99-2.5,2.23-3.72.45-1.7-2.46-2.13-5.28-2-8.19.04-.89-.01-1.8.32-2.67.44-1.14,1.12-1.86,2.43-1.88,1.32-.02,2.14.81,2.48,1.85.71,2.22,1.21,4.5,1.24,6.86Z"/>
|
|
60
|
+
<path d="M91.72,145.01c.04.78.1,1.55-.17,2.31-.77,2.15-2.37,2.49-3.92.83-1.54-1.65-2.51-7.47-1.6-9.54.34-.78.75-1.57,1.69-1.58,1.13-.01,2.2.29,2.69,1.51.73,1.84,1.21,3.74,1.31,5.73.01.25,0,.49,0,.74Z"/>
|
|
61
|
+
<path class="cls-13" d="M234.98,196.82c.05-2.91-2.48-15.37-2.77-18.11-.03-.32,5.47-2.13,6.38-2.44-.54,4.49-3.25,18.14-3.61,20.55Z"/>
|
|
62
|
+
<path class="cls-3" d="M80.79,122.95c.87-.68,1.81-1.12,2.89-1.19.29-.02.69.01.81.41.12.41-.2.51-.48.71-4.63,3.22-8.09,7.24-8.89,13.07-.07.53-.11,1.4-.74,1.36-.68-.04-.73-.86-.73-1.49.01-2.85,1.43-8.45,7.14-12.88Z"/>
|
|
63
|
+
<path class="cls-7" d="M136.58,119.58c3.09.67,5.83,2.02,8.03,4.35,1.86,1.96,2.89,4.33,3.43,6.95.1.48.37,1.11-.2,1.31-.71.25-.8-.55-1-.98-1.25-2.73-2.44-5.52-4.77-7.52-1.63-1.4-3.45-2.6-5.64-3.03-.41-.08-.85-.09-.97-.57-.08-.31.3-.46,1.13-.5Z"/>
|
|
64
|
+
<path class="cls-4" d="M247.86,171.3c-.29.01-1.2-1.14-1.66-1.78-.26-.35.25-.68.51-.89,1.79-1.37,3.08-3.16,4.18-5.08.36-.62.58-.59,1.09-.29,1.73,1.01,1.74,1.03.59,2.73-1.06,1.56-2.24,3.02-3.54,4.38-.33.35-.76.61-1.17.93Z"/>
|
|
65
|
+
<path class="cls-7" d="M255.66,152.05c.23.33-.14,5.64-.8,8.58-.18.81-.47.71-1.07.44-1.1-.5-1.71-1.18-1.31-2.46.61-1.91.39-3.91.48-5.86.03-.79.15-1.16,1.01-1,.52.09,1.16.15,1.69.31Z"/>
|
|
66
|
+
<path class="cls-7" d="M255.41,147.59c.03.48.17,1.12-.41,1.13-.82,0-2.08.09-2.17-1.04-.18-2.27-.73-4.42-1.39-6.59-.3-1,.83-1.38,1.52-1.57.58-.16.6.3.72.64.86,2.43,1.61,4.81,1.74,7.43Z"/>
|
|
67
|
+
<path class="cls-5" d="M245.62,56.58c-.08.78-.14,7.47-.29,9.8-.06.96-.84,1.12-1.61,1.16-.84.04-1.03-.56-1.04-1.22-.04-2.01.75-8.49.83-8.92.24-1.21.45-1.29,2.12-.83Z"/>
|
|
68
|
+
<path class="cls-7" d="M253.65,33.97c.63-.6,1.81.69.72,2.05-1.59,1.98-3.4,3.8-4.66,6.03-.15.27-.23.44-.61.2-.61-.39-1.48-.67-.93-1.71.56-1.07,1.39-1.93,2.15-2.84,1.23-1.48,1.97-2.23,3.34-3.72Z"/>
|
|
69
|
+
<path class="cls-4" d="M245.76,131.66c-.22-.3-.12-.71.2-.89,1.66-.93,1.72-.84,2.87.91.86,1.3,1.68,2.63,2.56,3.91.35.51.38.82-.19,1.19-1.85,1.18-1.27,1.33-2.45-.49-1-1.54-1.91-3.14-2.99-4.62Z"/>
|
|
70
|
+
<path class="cls-11" d="M250.7,82.88c-.54-.54-.49-.8-.21-1.29.37-.4.7-.87,1.35-.83.93,2.1,4.5,4.71,6.49,4.3.4-.08.51.68.34,1.08-.19.43-.25,1.04-1,.92-3.34-.53-6.28-3.33-6.97-4.18Z"/>
|
|
71
|
+
<path class="cls-9" d="M266.43,73.45c3.19.79,5.38,1.5,6.76,4.68.13.29.31.78.04.89-.52.21-1.32.79-1.74-.04-1.06-2.08-2.93-2.81-5-3.32-1.14-.28-1.43-.84-1.08-1.92.09-.27.27-.45,1.03-.29Z"/>
|
|
72
|
+
<path class="cls-7" d="M246.3,44.39c1.54.63,1.73,1.52,1.28,2.88-.56,1.7-.9,3.48-1.21,5.25-.21,1.2-1.13.99-1.71.8-.29-.1-.31-.74-.25-1.09.41-2.66,1.04-5.27,1.9-7.84Z"/>
|
|
73
|
+
<path class="cls-10" d="M254.65,72.99c.52-.06,4.59-.43,6.27-.4.62.01,1.52.32,1.36,1.28-.13.78-.24,1.08-1.19.99-1.79-.17-4.56-.06-6.77.5-.64-.15-.9-2.11.33-2.38Z"/>
|
|
74
|
+
<path class="cls-1" d="M261.62,87.67c-.5-.3-.93-1.8.5-1.47,1.11.25,3.8.03,4.8-.32,1.23-.42,1.18,1.15.74,1.47-1.03.77-4.79,1.05-6.04.32Z"/>
|
|
75
|
+
<path class="cls-9" d="M264.12,25.93c-2.2,2.05-4.27,3.88-6.16,5.91-.16.17-.41.47-.7.24-.33-.27-.98-.7-.48-1.21,1.97-2.01,4.14-3.78,6.7-5.02.12-.06.9-.22.64.08Z"/>
|
|
76
|
+
<path class="cls-2" d="M273.93,82.12c.02,1.61-1.55,3.85-2.94,4.39-.5.2-1.54-1.25-.72-1.73.9-.53,1.64-1.16,1.88-2.29.16-.74.97-.65,1.55-.74.26-.04.22.27.23.37Z"/>
|
|
77
|
+
<path class="cls-9" d="M287.08,17.86c.92-1.15,1.66-2.25.83-3.55-.44-.69-1.48-.94-2.36-.64-1.75.6-1.36,2.05-1.39,3.51-.06-.91-.52-1.53-1.15-2.09-3.21-2.91-8.61-3.71-12.43-1.82-.88.43-1.69.98-1.71,2.05-.01,1.07.79,1.64,1.63,2.15,1.45.89,3.09,1.25,5.03,1.64-.8.37-1.31.6-1.81.85-1.71.88-3.44,1.75-4.64,3.34-1.07,1.41-.71,2.43.95,2.95,2.36.74,4.62.14,6.87-.5,1.12-.32,2.21-.76,3.33-1.15.14.48-.14.7-.29.98-.86,1.63-1.71,3.26-2.1,5.08-.08.39-.17.9.34,1.06.44.14.62-.3.82-.6.88-1.34,1.42-2.85,2.04-4.32.72-1.7.82-3.84,3.15-4.47-.75,2.78-1.46,5.61-2.8,8.22-.76,1.49-1.81,2.72-3.41,3.41-.64.27-1.79.03-2.06-.63-.54-1.33-.45-2.49.17-3.97.1-.24.52-.62.05-.84-.35-.16-.64.15-.89.45-1.17,1.41-1.03,4.13.31,5.59.74.81,1.6,1.09,2.64.65,1.55-.66,2.75-1.73,3.68-3.14,1.42-2.15,2.06-4.58,2.61-7.04.32-1.41.5-2.84.82-4.68.52,1.46,1.48,2.26,2.7,1.86,1.05-.35,1.58-1.09,1.56-2.36-.03-1.55-1.07-1.91-2.5-1.96ZM282.2,17.31c-.81.18-1.04.28-1.79-.34-1.25-1.04-2.83-1.37-4.38-1.71-.34-.08-.83-.14-.91.35-.08.5.41.5.75.62,1.31.45,2.73.65,4.23,1.63-1.2.44-3.7,1.51-9.26-1.61-1.07-.6.05-1.41.52-1.62,3.15-1.41,6.43-1.45,9.34.29.84.5,1.16.84,1.78,1.59.41.49.26.68-.28.8Z"/>
|
|
78
|
+
<path class="cls-8" d="M244.74,127.73c-1.05.98-1.73.54-2.39-.52-1.12-1.81-2.28-3.6-3.49-5.34-.57-.81-.06-1.11.51-1.38.51-.24.98-.85,1.59.12,1.27,2.04,2.54,4.1,4.08,5.97.43.52.06.84-.3,1.15Z"/>
|
|
79
|
+
<path d="M113.43,167.47c-.67-1.2-1.64-2.05-3.14-2.02-1.2.03-2.18.51-2.78,1.53-1.6,2.72-.94,7.4,1.32,9.59,1.45,1.41,3.55,1.32,4.57-.31.74-1.18,1.28-2.49,1.23-3.95-.06-1.7-.37-3.35-1.2-4.85ZM112.69,172.39c.05.97-.19,1.88-.68,2.79-.54.99-1.17.88-1.89.34-.77-.59-1.31-1.4-1.59-2.3-.35-1.13-.62-2.29-.55-3.51.06-.93-.1-1.92,1.21-2.19,1.02-.21,2.11.19,2.64,1.29.54,1.1,1.04,2.25.86,3.58Z"/>
|
|
80
|
+
<path class="cls-12" d="M250.93,73.72c.71-.19.97,1.73.46,1.96-.2.05-3.14,1.05-3.05,1.21.14.22.76.99,1.07,1.51.5.84-.26,1.19-.73,1.45-.56.32-1.08-.35-1.33-.55-.09-.07-1.19-1.46-1.19-1.46,0,0-3.38,3.05-4.31,4.26-.26.35-.72.85-1.41.26-.49-.42-1.25-.54-.41-1.64,1.28-1.68,3.75-3.82,5.49-4.88,0,0-1.16-3.1-1.53-4.19-.13-.38-.04-.77.63-.98.48-.15.98-.32,1.23.45.32,1.02,1.4,3.5,1.62,3.56.16.04,2.52-.67,3.47-.94Z"/>
|
|
81
|
+
<path class="cls-8" d="M233.99,93.32c.68-2.64,1.62-5.22,2.93-7.65.23-.43.46-.43.88-.2,1.49.81,1.44.76.76,2.34-.83,1.91-1.78,3.8-1.95,5.93-.04.52-.32.83-.8.6-.6-.29-1.78.45-1.81-1.01Z"/>
|
|
82
|
+
<path class="cls-8" d="M235.56,109.8c.38-.02.7-.03.83.48.54,2.22,1.14,4.42,2.16,6.5.49,1-.67,1.2-1.28,1.4-.51.17-.66.01-.88-.38-1.15-2.11-1.77-4.39-2.37-6.69-.22-.85.36-1.32,1.55-1.31Z"/>
|
|
83
|
+
<path class="cls-8" d="M233.11,102.49c.08-1.06.08-2.14.26-3.18.22-1.32,1.31-.53,1.98-.63.76-.11.5.57.45.96-.26,2.04-.22,4.09-.09,6.13.09,1.44-1.11.87-1.7,1.16-.75.37-.56-.38-.65-.76-.27-1.21-.2-2.45-.24-3.68Z"/>
|
|
84
|
+
<path d="M243.01,171.12c.42-.23.6-.18.91.15,1.69,1.77,1.63,1.87-.62,2.97-1.54.76-8.88,3.68-9.47,3.86-1.49.46-1.49.48-1.31,2.09.27,2.45,2.86,13.42,2.45,16.64-.1,1.96-.13,3.92-.55,5.86-.9,4.19-3.39,6.68-7.55,7.58-3.29.71-167.95-2.68-168.6-3.04-.26-.14-1.6-2.15.41-2.42,3.08-.41,152.55,3.74,167.16,2.32,5.17-.5,5.81-5.56,5.67-9.27-.23-6.22-17.1-104.9-18.21-108.94-1.36-4.93-2.65-9.89-4.77-14.55-1.55-3.4-3.79-6.24-7.75-7.14-1.05-.24-169.21-8.43-173.79-8.29-4.32.13-7.6,4.36-8.17,6.34-1.05,3.67-.48,6.54-.13,10.26.42,4.44,20.34,99.72,21.29,103.63,1.33,5.51,2.18,9.9,3.72,15.19.1.33.1,1.82-.42,2.05-.6.26-1.31-1.36-1.47-1.68-1.49-2.99-1.94-5.26-2.67-8.5-1.61-7.08-21.74-99.46-22.72-104.89-.81-4.53-1.36-9.11-.84-13.69.27-2.3.71-7.5,4.56-9.62,3.13-1.73,3.07-3.24,11.15-3.06,5.41.12,161.17,8.09,164.79,7.99,3.31-.09,6.34.74,9.26,2.16,3.26,1.77,4.91,4.83,6.44,8,.92,2.46,1.87,4.91,2.74,7.4,2.91,8.27,17.26,91.54,17.48,93.87.09.94.48,1.14,1.29.73.91-.47,8.54-3.36,9.72-4Z"/>
|
|
85
|
+
</svg>
|