@chumsinc/sortable-tables 2.0.14 → 2.1.1

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/DataTableTH.tsx","../src/DataTableHead.tsx","../src/DataTableCell.tsx","../src/DataTableRow.tsx","../src/DataTableTBody.tsx","../src/Table.tsx","../src/DataTable.tsx","../src/SortableTableTH.tsx","../src/SortableTableHead.tsx","../src/SortableTable.tsx","../src/RowsPerPage.tsx","../src/TablePagination.tsx"],"sourcesContent":["import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport type {DataTableTHProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTH<T = unknown>({\r\n                                                     field,\r\n                                                     className,\r\n                                                     children,\r\n                                                     ...rest\r\n                                                 }: DataTableTHProps<T>) {\r\n    const thClassName = classNames({[`text-${field.align}`]: !!field.align}, className);\r\n    return (\r\n        <th className={thClassName} scope=\"col\" {...rest}>\r\n            {children ?? field.title}\r\n        </th>\r\n    )\r\n}\r\nDataTableTH.displayName = 'DataTableTH';\r\nexport default DataTableTH;\r\n","import React from \"react\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport classNames from \"classnames\";\r\nimport type {DataTableHeadProps} from \"./types\";\r\n\r\n\r\nfunction DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {\r\n    return (\r\n        <thead {...rest}>\r\n        <tr>\r\n            {fields.map((field, index) => (\r\n                <DataTableTH key={field.id ?? index}\r\n                             {...field.thProps}\r\n                             field={field}\r\n                             className={classNames(\r\n                                 typeof field.className === 'function'\r\n                                     ? {[`text-${field.align}`]: !!field.align}\r\n                                     : field.className\r\n                             )}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nDataTableHead.displayName = 'DataTableHead';\r\nexport default DataTableHead;\r\n","import React, {ReactNode} from 'react';\nimport type {DataTableCellProps} from \"./types\";\nimport classNames from \"classnames\";\n\nexport default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {\n    const cellClassName = classNames(\n        {[`text-${field.align}`]: !!field.align},\n        className,\n        typeof field.className === 'function' ? field.className(row) : field.className\n    );\n    return React.createElement(\n        (as ?? field.as) ?? 'td',\n        {\n            className: cellClassName,\n            scope: (as ?? field.as) === 'th' ? 'row' : undefined,\n            colSpan: field.colSpan,\n            ...field.cellProps,\n            ...rest\n        },\n        (row[field.field] === undefined && !field.render)\n            ? null\n            : (\n                typeof field.render === 'function'\n                    ? field.render(row)\n                    : row[field.field] as ReactNode\n            )\n    )\n}\n","import React, {MouseEvent} from 'react';\r\nimport classNames from \"classnames\";\r\nimport type {DataTableRowProps} from \"./types\";\r\nimport DataTableCell from \"./DataTableCell\";\r\n\r\n\r\nfunction DataTableRow<T = unknown>({\r\n                                       className,\r\n                                       rowClassName,\r\n                                       selected,\r\n                                       fields,\r\n                                       row,\r\n                                       trRef,\r\n                                       onClick,\r\n                                       ...rest\r\n                                   }: DataTableRowProps<T>) {\r\n    const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {\r\n        onClick?.(row, ev)\r\n    }\r\n\r\n    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;\r\n    if (!row) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <tr ref={trRef}\r\n            className={classNames({'table-active': selected}, className, _className)}\r\n            onClick={clickHandler}\r\n            {...rest}>\r\n            {fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}/>))}\r\n        </tr>\r\n    )\r\n}\r\n\r\nDataTableRow.displayName = 'DataTableRow';\r\nexport default DataTableRow;\r\n","import React from 'react';\r\nimport DataTableRow from \"./DataTableRow\";\r\nimport type {DataTableTBodyProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTBody<T = unknown>({\r\n                                         fields,\r\n                                         data,\r\n                                         keyField,\r\n                                         rowClassName,\r\n                                         renderRow,\r\n                                         onSelectRow,\r\n                                         selected = '',\r\n                                         children,\r\n                                         ...rest\r\n                                     }: DataTableTBodyProps<T>) {\r\n    return (\r\n        <tbody {...rest}>\r\n        {data.map(row => {\r\n            const keyValue = String(typeof keyField === \"function\" ? keyField(row) : row[keyField]);\r\n            const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;\r\n            if (renderRow) {\r\n                return renderRow(row);\r\n            }\r\n            return (\r\n                <DataTableRow key={keyValue} onClick={onSelectRow}\r\n                              rowClassName={rowClassName}\r\n                              fields={fields}\r\n                              row={row} selected={isSelected}/>\r\n            )\r\n        })}\r\n        {children}\r\n        </tbody>\r\n    )\r\n}\r\n\r\nDataTableTBody.displayName = 'DataTableTBody';\r\nexport default DataTableTBody\r\n","import React, {TableHTMLAttributes} from 'react';\nimport styled from \"@emotion/styled\";\nimport type {DataTableProps} from \"./types\";\nimport classNames from \"classnames\";\n\nexport type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>\n\nconst StyledTable = styled.table<StyledTableProps>`\n    --table-sticky-top: ${props => props.sticky ? '0' : undefined};\n\n    thead {\n        tr:nth-of-type(1) td,\n        tr:nth-of-type(1) th {\n            top: var(--table-sticky-top, unset);\n            position: ${props => props.sticky ? \"sticky\" : \"unset\"};\n            z-index: ${props => props.sticky ? 10 : \"unset\"};\n            background: ${props => props.sticky ? \"linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))\" : \"unset\"};\n        }\n    }\n`\n\nexport default React.forwardRef<HTMLTableElement, StyledTableProps>(\n    function Table({\n                       sticky,\n                       responsive,\n                       children,\n                       className,\n                       ...rest\n                   }, ref) {\n        if (responsive) {\n            const _className = classNames(className, {\n                'table-responsive': responsive === true,\n                [`table-responsive-${responsive}`]: responsive !== true,\n            })\n            return (\n                <div className={_className}>\n                    <StyledTable ref={ref} {...rest}>{children}</StyledTable>\n                </div>\n            )\n        }\n        return (\n            <StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>\n        )\n    })\n","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport DataTableHead from \"./DataTableHead\";\r\nimport DataTableTBody from \"./DataTableTBody\";\r\nimport type {DataTableProps} from \"./types\";\r\nimport Table from \"./Table\";\r\n\r\n\r\nfunction DataTable<T = unknown>({\r\n                                    fields,\r\n                                    data,\r\n                                    keyField,\r\n                                    size = '',\r\n                                    sticky,\r\n                                    responsive,\r\n                                    rowClassName,\r\n                                    renderRow,\r\n                                    onSelectRow,\r\n                                    selected = '',\r\n                                    className = '',\r\n                                    tfoot,\r\n                                    children,\r\n                                    tableHeadProps,\r\n                                    ...rest\r\n                                }: DataTableProps<T>) {\r\n\r\n    const tableClassName = classNames('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>\r\n            <DataTableHead {...tableHeadProps} fields={fields}/>\r\n            {!!data.length && (\r\n                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n\r\nDataTable.displayName = 'DataTable';\r\nexport default DataTable;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport type {SortableTableTHProps, UIFlexAlign} from \"./types\";\r\nimport styled from '@emotion/styled';\r\n\r\nconst flexJustifyContent = (align?: UIFlexAlign) => {\r\n    if (!align) {\r\n        return 'flex-start';\r\n    }\r\n    switch (align) {\r\n        case 'end':\r\n            return 'flex-end';\r\n        default:\r\n            return 'center';\r\n    }\r\n}\r\n\r\ntype FieldTitleProps = {\r\n    sorted?: boolean;\r\n    align?: UIFlexAlign;\r\n};\r\nconst FieldTitle = styled.div<FieldTitleProps>`\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};\r\n    justify-content: ${props => flexJustifyContent(props.align)};\r\n    .sort-icon {\r\n        flex-grow: ${props => props.align === 'end' ? '1' : '0'};\r\n        opacity: ${props => props.sorted ? 1 : 0};\r\n    }\r\n    &:hover .sort-icon {\r\n        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'} ;\r\n        opacity: 0.75;\r\n        transition: opacity 0.2s;\r\n    }\r\n`\r\n\r\nfunction SortableTableTH<T = unknown>({\r\n                                          field,\r\n                                          sorted,\r\n                                          ascending,\r\n                                          className,\r\n                                          onClick\r\n                                      }: SortableTableTHProps<T>) {\r\n    if (!field.sortable) {\r\n        return (<DataTableTH field={field} className={className}/>)\r\n    }\r\n\r\n    const {className: _thClassName, ...thProps} = field.thProps ?? {};\r\n    const thClassName = classNames(\r\n        className,\r\n        _thClassName,\r\n        {[`text-${field.align}`]: !!field.align}\r\n    );\r\n\r\n    const clickHandler = () => {\r\n        onClick({field: field.field, ascending: !sorted ? true : !ascending});\r\n    }\r\n\r\n    const iconClassName = {\r\n        'bi-arrow-down': ascending,\r\n        'bi-arrow-up': !ascending,\r\n    }\r\n\r\n    return (\r\n        <th {...thProps} className={classNames(\"sortable\", thClassName)} scope=\"col\" onClick={clickHandler}>\r\n            <FieldTitle sorted={sorted} align={field.align}>\r\n                <div className=\"field-title\">{field.title}</div>\r\n                <div className={classNames('me-1 sort-icon', iconClassName)}/>\r\n            </FieldTitle>\r\n        </th>\r\n    )\r\n}\r\n\r\nSortableTableTH.displayName = 'SortableTableTH';\r\nexport default SortableTableTH;\r\n","import React from \"react\";\r\nimport SortableTableTH from \"./SortableTableTH\";\r\nimport classNames from \"classnames\";\r\nimport type {SortableTableHeadProps} from \"./types\";\r\n\r\n\r\nfunction SortableTableHead<T = unknown>({\r\n                                                           currentSort,\r\n                                                           fields,\r\n                                                           onChangeSort,\r\n                                                       }: SortableTableHeadProps<T>) {\r\n    const {field, ascending} = currentSort;\r\n    return (\r\n        <thead>\r\n        <tr>\r\n            {fields.map((tableField, index) => (\r\n                <SortableTableTH<T> key={index} field={tableField}\r\n                                 sorted={field === tableField.field} ascending={ascending}\r\n                                 className={classNames(\r\n                                typeof tableField.className === 'function'\r\n                                    ? {[`text-${tableField.align}`]: !!tableField.align}\r\n                                    : tableField.className\r\n                            )} onClick={onChangeSort}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nSortableTableHead.displayName = 'SortableTableHead';\r\nexport default SortableTableHead;\r\n","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport SortableTableHead from \"./SortableTableHead\";\r\nimport DataTableTBody from \"./DataTableTBody\";\r\nimport type {SortableTableProps} from \"./types\";\r\nimport Table from \"./Table\";\r\n\r\n\r\nfunction SortableTable<T = unknown>({\r\n                                        fields,\r\n                                        data,\r\n                                        currentSort,\r\n                                        onChangeSort,\r\n                                        keyField,\r\n                                        size = '',\r\n                                        sticky,\r\n                                        rowClassName,\r\n                                        renderRow,\r\n                                        onSelectRow,\r\n                                        selected = '',\r\n                                        className = '',\r\n                                        tfoot,\r\n                                        children,\r\n                                        ...rest\r\n                                    }: SortableTableProps<T>) {\r\n    const tableClassName = classNames('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table className={tableClassName} sticky={sticky} {...rest}>\r\n            <SortableTableHead currentSort={currentSort} fields={fields} onChangeSort={onChangeSort}/>\r\n            {!!data.length && (\r\n                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n\r\nSortableTable.displayName = 'SortableTable';\r\nexport default SortableTable;\r\n","import React, {ChangeEvent, useId} from 'react';\r\nimport classNames from \"classnames\";\r\nimport type {RowsPerPageProps} from \"./types\";\r\n\r\nexport const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];\r\n\r\n\r\nfunction RowsPerPage({\r\n                         value,\r\n                         pageValues = defaultRowsPerPageValues,\r\n                         size,\r\n                         label,\r\n                         className,\r\n                         onChange,\r\n                         ...rest\r\n                     }: RowsPerPageProps) {\r\n    const id = useId();\r\n    const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));\r\n    const selectClassName = className ?? classNames('form-select', {[`form-select-${size}`]: !!size});\r\n    const inputGroupClassName = classNames('input-group', {\r\n        [`input-group-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <div className={inputGroupClassName} key={value}>\r\n            <label className=\"input-group-text\" htmlFor={id}>{label ?? 'Rows'}</label>\r\n            <select className={selectClassName} id={id}\r\n                    value={value} onChange={changeHandler} {...rest}>\r\n                {pageValues.map(value => (\r\n                    <option key={value} value={value}>{value}</option>\r\n                ))}\r\n            </select>\r\n        </div>\r\n    )\r\n}\r\n\r\nRowsPerPage.displayName = 'RowsPerPage';\r\nexport default RowsPerPage;\r\n","import React from 'react';\r\nimport RowsPerPage from \"./RowsPerPage\";\r\nimport classNames from \"classnames\";\r\nimport type {TablePaginationProps} from \"./types\";\r\n\r\nfunction TablePagination({\r\n                             page,\r\n                             rowsPerPage,\r\n                             onChangePage,\r\n                             count,\r\n                             size,\r\n                             showFirst,\r\n                             showLast,\r\n                             className,\r\n                             rowsPerPageProps,\r\n                             ...rest\r\n                         }: TablePaginationProps) {\r\n\r\n    const first = count === 0 ? 0 : (page * rowsPerPage) + 1;\r\n    const last = Math.min(page * rowsPerPage + rowsPerPage, count);\r\n    const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);\r\n\r\n    const buttonClassName = classNames(\"btn btn-link\", {[`btn-${size}`]: !!size});\r\n\r\n    return (\r\n        <div className={classNames(\"row g-3 justify-content-end\", className)} {...rest}>\r\n            {!!rowsPerPageProps && (\r\n                <div className=\"col-auto\">\r\n                    <RowsPerPage {...rowsPerPageProps} value={rowsPerPage} size={size}/>\r\n                </div>\r\n            )}\r\n            <div className=\"col-auto\">\r\n                <div className=\"row g-3 flex-nowrap align-items-baseline\">\r\n                    <div className=\"col-auto\">\r\n                        {first}-{last} of {count}\r\n                    </div>\r\n                    {showFirst && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page === 0}\r\n                                    onClick={() => onChangePage(0)} aria-label=\"First page\">\r\n                                <span className=\"bi-chevron-bar-left\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page === 0}\r\n                                onClick={() => onChangePage(page - 1)} aria-label=\"Previous page\">\r\n                            <span className=\"bi-chevron-left\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page >= lastPage}\r\n                                onClick={() => onChangePage(page + 1)} aria-label=\"Next page\">\r\n                            <span className=\"bi-chevron-right\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    {showLast && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page >= lastPage}\r\n                                    onClick={() => onChangePage(lastPage)} aria-label=\"Last page\">\r\n                                <span className=\"bi-chevron-bar-right\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nTablePagination.displayname = 'TablePagination';\r\nexport default TablePagination\r\n"],"names":["DataTableTH","field","className","children","rest","thClassName","classNames","jsx","DataTableHead","fields","index","DataTableCell","row","as","cellClassName","React","DataTableRow","rowClassName","selected","trRef","onClick","clickHandler","ev","_className","DataTableTBody","data","keyField","renderRow","onSelectRow","jsxs","keyValue","isSelected","StyledTable","styled","props","Table","sticky","responsive","ref","DataTable","size","tfoot","tableHeadProps","tableClassName","flexJustifyContent","align","FieldTitle","SortableTableTH","sorted","ascending","_thClassName","thProps","iconClassName","SortableTableHead","currentSort","onChangeSort","tableField","SortableTable","defaultRowsPerPageValues","RowsPerPage","value","pageValues","label","onChange","id","useId","changeHandler","selectClassName","inputGroupClassName","TablePagination","page","rowsPerPage","onChangePage","count","showFirst","showLast","rowsPerPageProps","first","last","lastPage","buttonClassName"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,12 +1,12 @@
-import React, { HTMLAttributes, ReactNode, TableHTMLAttributes, MouseEvent } from 'react';
-import classNames from "classnames";
+import { default as React, HTMLAttributes, MouseEvent, ReactNode, TableHTMLAttributes } from 'react';
+import { Argument } from 'classnames';
 export interface SortProps<T = unknown> {
     field: keyof T;
     ascending: boolean;
 }
 export type UISize = 'sm' | 'lg' | '';
 export type UITableSize = UISize | 'xs';
-export type DataTableClassNames<T = unknown> = string | classNames.Argument | ((row: T) => (string | classNames.Argument));
+export type DataTableClassNames<T = unknown> = string | Argument | ((row: T) => (string | Argument));
 export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 export interface DataTableField<T = unknown> {
     id?: number | string;
@@ -42,7 +42,7 @@ export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttribute
     field: DataTableField<T>;
     row: T;
     as?: 'td' | 'th';
-    className?: string | classNames.Argument;
+    className?: string | Argument;
     children?: React.ReactNode;
 }
 export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T>, 'row'> {
@@ -62,7 +62,7 @@ export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HT
     children?: ReactNode;
 }
 export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
-    rowClassName?: string | classNames.Argument | ((row: T) => string | classNames.Argument);
+    rowClassName?: string | Argument | ((row: T) => string | Argument);
     selected?: boolean;
     fields: DataTableField<T>[];
     row: T;

package/eslint.config.mjs

@@ -1,14 +1,23 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
 
-
-export default [
-  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
-  {languageOptions: { globals: globals.browser }},
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-];
+export default tseslint.config([
+    globalIgnores(['dist']),
+    {
+        files: ['**/*.{ts,tsx}'],
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommended,
+            reactHooks.configs['recommended-latest'],
+            reactRefresh.configs.vite,
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+    },
+])

package/{public/index.html → index.html}

@@ -1,4 +1,4 @@
-<!doctype html public "storage">
+<!doctype html>
 <html lang="en-us">
 <head>
     <meta charSet="utf-8"/>
@@ -20,9 +20,6 @@
 <div id="app" class="container-fluid">
     <strong>Loading</strong> the app.
 </div>
-<script src="main.js"></script>
-<!--<script src="/chums.js"></script>-->
-<script src="vendors.js"></script>
-<script src="vendors-react.js"></script>
+<script type="module" src="/test/index.tsx"></script>
 </body>
 </html>

package/package.json

@@ -1,9 +1,23 @@
 {
   "name": "@chumsinc/sortable-tables",
-  "version": "2.0.14",
-  "main": "./dist/index.js",
+  "version": "2.1.1",
+  "type": "module",
   "source": "./src/index.tsx",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.umd.js"
+      }
+    }
+  },
   "peerDependencies": {
     "@emotion/styled": "^11.14.0",
     "classnames": "*",
@@ -11,10 +25,10 @@
     "react-dom": ">=18.1.0"
   },
   "scripts": {
-    "clean": "rimraf dist/",
-    "compile": "tsc",
-    "dev": "webpack serve --config webpack.dev.mjs --progress",
-    "build": "npm run clean && npm run compile",
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
     "version": "auto-changelog -p && git add CHANGELOG.md"
   },
   "browserslist": {
@@ -36,29 +50,21 @@
     "@types/numeral": "^2.0.3",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^5.1.0",
     "auto-changelog": "^2.4.0",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
     "classnames": "^2.3.2",
-    "css-loader": "^7.1.2",
     "eslint": "^9.8.0",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "rimraf": "^6.0.1",
-    "sass-loader": "^16.0.0",
-    "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.9",
-    "ts-loader": "^9.4.4",
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.0.1",
-    "webpack": "^5.88.2",
-    "webpack-bundle-analyzer": "^4.9.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.0.4",
-    "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^6.0.1"
+    "vite": "^7.0.4",
+    "vite-plugin-dts": "^4.5.4"
   },
   "auto-changelog": {
     "template": "changelog-template.hbs",

package/src/DataTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from "classnames";
 import DataTableHead from "./DataTableHead";
 import DataTableTBody from "./DataTableTBody";
-import {DataTableProps} from "./types";
+import type {DataTableProps} from "./types";
 import Table from "./Table";
 
 

package/src/DataTableCell.tsx

@@ -1,5 +1,5 @@
 import React, {ReactNode} from 'react';
-import {DataTableCellProps} from "./types";
+import type {DataTableCellProps} from "./types";
 import classNames from "classnames";
 
 export default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {

package/src/DataTableHead.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import DataTableTH from "./DataTableTH";
 import classNames from "classnames";
-import {DataTableHeadProps} from "./types";
+import type {DataTableHeadProps} from "./types";
 
 
 function DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {

package/src/DataTableRow.tsx

@@ -1,6 +1,6 @@
 import React, {MouseEvent} from 'react';
 import classNames from "classnames";
-import {DataTableRowProps} from "./types";
+import type {DataTableRowProps} from "./types";
 import DataTableCell from "./DataTableCell";
 
 

package/src/DataTableTBody.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import DataTableRow from "./DataTableRow";
-import {DataTableTBodyProps} from "./types";
+import type {DataTableTBodyProps} from "./types";
 
 
 function DataTableTBody<T = unknown>({

package/src/DataTableTH.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import classNames from "classnames";
-import {DataTableTHProps} from "./types";
+import type {DataTableTHProps} from "./types";
 
 
 function DataTableTH<T = unknown>({

package/src/RowsPerPage.tsx

@@ -1,6 +1,6 @@
 import React, {ChangeEvent, useId} from 'react';
 import classNames from "classnames";
-import {RowsPerPageProps} from "./types";
+import type {RowsPerPageProps} from "./types";
 
 export const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
 

package/src/SortableTable.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from "classnames";
 import SortableTableHead from "./SortableTableHead";
 import DataTableTBody from "./DataTableTBody";
-import {SortableTableProps} from "./types";
+import type {SortableTableProps} from "./types";
 import Table from "./Table";
 
 

package/src/SortableTableHead.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import SortableTableTH from "./SortableTableTH";
 import classNames from "classnames";
-import {SortableTableHeadProps} from "./types";
+import type {SortableTableHeadProps} from "./types";
 
 
 function SortableTableHead<T = unknown>({

package/src/SortableTableTH.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import DataTableTH from "./DataTableTH";
-import {SortableTableTHProps, UIFlexAlign} from "./types";
+import type {SortableTableTHProps, UIFlexAlign} from "./types";
 import styled from '@emotion/styled';
 
 const flexJustifyContent = (align?: UIFlexAlign) => {

package/src/Table.tsx

@@ -1,6 +1,6 @@
 import React, {TableHTMLAttributes} from 'react';
 import styled from "@emotion/styled";
-import {DataTableProps} from "./types";
+import type {DataTableProps} from "./types";
 import classNames from "classnames";
 
 export type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>

package/src/TablePagination.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import RowsPerPage from "./RowsPerPage";
 import classNames from "classnames";
-import {TablePaginationProps} from "./types";
+import type {TablePaginationProps} from "./types";
 
 function TablePagination({
                              page,

package/src/types.ts

@@ -1,5 +1,5 @@
-import React, {HTMLAttributes, ReactNode, TableHTMLAttributes, MouseEvent} from 'react'
-import classNames from "classnames";
+import React, {type HTMLAttributes, type  MouseEvent, type  ReactNode, type  TableHTMLAttributes} from 'react'
+import {Argument} from "classnames";
 
 
 export interface SortProps<T = unknown> {
@@ -7,13 +7,13 @@ export interface SortProps<T = unknown> {
     ascending: boolean;
 }
 
-export type UISize = 'sm'|'lg'|'';
-export type UITableSize = UISize|'xs';
+export type UISize = 'sm' | 'lg' | '';
+export type UITableSize = UISize | 'xs';
 
 export type DataTableClassNames<T = unknown> =
     string
-    | classNames.Argument
-    | ((row: T) => (string | classNames.Argument));
+    | Argument
+    | ((row: T) => (string | Argument));
 
 
 export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
@@ -22,7 +22,7 @@ export interface DataTableField<T = unknown> {
     id?: number | string;
     field: keyof T;
     title: ReactNode;
-    as?: 'td'|'th';
+    as?: 'td' | 'th';
     align?: 'start' | 'center' | 'end';
     render?: (row: T) => ReactNode;
     className?: DataTableClassNames<T>;
@@ -38,13 +38,13 @@ export interface SortableTableField<T = unknown> extends DataTableField<T> {
 export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTableElement> {
     fields: DataTableField<T>[];
     data: T[];
-    keyField: keyof T | ((row: T) => string|number);
+    keyField: keyof T | ((row: T) => string | number);
     size?: UITableSize;
     sticky?: boolean;
-    responsive?: boolean|"sm" | "md" | "lg" | "xl" | 'xxl';
+    responsive?: boolean | "sm" | "md" | "lg" | "xl" | 'xxl';
     rowClassName?: DataTableClassNames<T>;
     renderRow?: (row: T) => React.ReactNode;
-    onSelectRow?: (row: T, ev?:MouseEvent<HTMLTableRowElement>) => void;
+    onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
     selected?: string | number | ((row: T) => boolean);
     tfoot?: React.ReactElement<HTMLTableSectionElement>;
     tableHeadProps?: DataTableHeadProps<T>;
@@ -54,8 +54,8 @@ export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTab
 export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableCellElement>, 'className'> {
     field: DataTableField<T>;
     row: T;
-    as?: 'td'|'th',
-    className?: string | classNames.Argument;
+    as?: 'td' | 'th',
+    className?: string | Argument;
     children?: React.ReactNode;
 }
 
@@ -70,21 +70,21 @@ export interface DataTableHeadProps<T = unknown> extends TableHTMLAttributes<HTM
 export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
     fields: DataTableField<T>[];
     data: T[];
-    keyField: keyof T | ((row: T) => string|number);
+    keyField: keyof T | ((row: T) => string | number);
     rowClassName?: DataTableClassNames<T>;
     renderRow?: (row: T) => React.ReactNode;
-    onSelectRow?: (row: T, ev?:MouseEvent<HTMLTableRowElement>) => void;
+    onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
     selected?: string | number | ((row: T) => boolean);
     children?: ReactNode;
 }
 
 export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
-    rowClassName?: string | classNames.Argument | ((row: T) => string | classNames.Argument);
+    rowClassName?: string | Argument | ((row: T) => string | Argument);
     selected?: boolean;
     fields: DataTableField<T>[];
     row: T;
     trRef?: React.Ref<HTMLTableRowElement>;
-    onClick?: (row:T, ev?:MouseEvent<HTMLTableRowElement>) => void;
+    onClick?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
 }
 
 export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
@@ -109,7 +109,7 @@ export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps
 export interface RowsPerPageProps extends Omit<HTMLAttributes<HTMLSelectElement>, 'onChange'> {
     value: number;
     pageValues?: number[];
-    label?: string|React.ReactNode;
+    label?: string | React.ReactNode;
     size?: UISize;
     className?: string;
     onChange: (value: number) => void;

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "allowJs": true,
+    "allowJs": false,
     "allowSyntheticDefaultImports": true,
     "declaration": true,
+    "declarationDir": "./dist/types",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
@@ -12,9 +13,9 @@
       "dom.iterable",
       "esnext"
     ],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmit": false,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
     "outDir": "./dist/",
@@ -22,8 +23,9 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es2020"
+    "target": "esNext",
+    "useDefineForClassFields": true,
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules","dist"]
 }

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import {resolve} from 'node:path'
+import {cwd} from 'node:process'
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [react({}), dts({include: ['src']})],
+    resolve: {},
+    build: {
+        lib: {
+            entry: resolve(cwd(), './src/index.tsx'),
+            name: 'SortableTables',
+            fileName: (format) => `index.${format}.js`,
+            formats: ['es', 'cjs'],
+        },
+        rollupOptions: {
+            external: ['react', 'react/jsx-runtime', 'react-dom', 'classnames', '@emotion/styled'],
+            output: {
+                globals:{
+                    react: 'React',
+                    'react-dom': 'ReactDOM',
+                    'react/jsx-runtime': 'jsxRuntime',
+                    classnames: 'classNames',
+                    '@emotion/styled': 'styled'
+                }
+            }
+        },
+        sourcemap: true,
+        minify: true,
+    }
+})

package/babel.config.mjs

@@ -1,13 +0,0 @@
-const presets = [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-];
-
-const plugins = [
-];
-
-export default {
-    presets,
-    plugins,
-};

package/dist/DataTable.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import DataTableHead from "./DataTableHead";
-import DataTableTBody from "./DataTableTBody";
-import Table from "./Table";
-function DataTable({ fields, data, keyField, size = '', sticky, responsive, rowClassName, renderRow, onSelectRow, selected = '', className = '', tfoot, children, tableHeadProps, ...rest }) {
-    const tableClassName = classNames('table', className, {
-        [`table-${size}`]: !!size,
-    });
-    return (_jsxs(Table, { sticky: sticky, responsive: responsive, className: tableClassName, ...rest, children: [_jsx(DataTableHead, { ...tableHeadProps, fields: fields }), !!data.length && (_jsx(DataTableTBody, { fields: fields, data: data, keyField: keyField, rowClassName: rowClassName, renderRow: renderRow, onSelectRow: onSelectRow, selected: selected })), children, tfoot] }));
-}
-DataTable.displayName = 'DataTable';
-export default DataTable;
-//# sourceMappingURL=DataTable.js.map

package/dist/DataTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../src/DataTable.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,MAAM,SAAS,CAAC;AAG5B,SAAS,SAAS,CAAc,EACI,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EACR,cAAc,EACd,GAAG,IAAI,EACS;IAEhD,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE;QAClD,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;KAC5B,CAAC,CAAA;IAEF,OAAO,CACH,MAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,KAAM,IAAI,aAC9E,KAAC,aAAa,OAAK,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,EACnD,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CACd,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAC1E,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,CAClE,EACA,QAAQ,EACR,KAAK,IACF,CACX,CAAA;AACL,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AACpC,eAAe,SAAS,CAAC"}

package/dist/DataTableCell.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import classNames from "classnames";
-export default function DataTableCell({ field, row, className, as, ...rest }) {
-    const cellClassName = classNames({ [`text-${field.align}`]: !!field.align }, className, typeof field.className === 'function' ? field.className(row) : field.className);
-    return React.createElement((as ?? field.as) ?? 'td', {
-        className: cellClassName,
-        scope: (as ?? field.as) === 'th' ? 'row' : undefined,
-        colSpan: field.colSpan,
-        ...field.cellProps,
-        ...rest
-    }, (row[field.field] === undefined && !field.render)
-        ? null
-        : (typeof field.render === 'function'
-            ? field.render(row)
-            : row[field.field]));
-}
-//# sourceMappingURL=DataTableCell.js.map

package/dist/DataTableCell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableCell.js","sourceRoot":"","sources":["../src/DataTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAc,EAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAuB;IACzG,MAAM,aAAa,GAAG,UAAU,CAC5B,EAAC,CAAC,QAAQ,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,EAAC,EACxC,SAAS,EACT,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CACjF,CAAC;IACF,OAAO,KAAK,CAAC,aAAa,CACtB,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI,EACxB;QACI,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACpD,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,GAAG,KAAK,CAAC,SAAS;QAClB,GAAG,IAAI;KACV,EACD,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7C,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,CACE,OAAO,KAAK,CAAC,MAAM,KAAK,UAAU;YAC9B,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;YACnB,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAc,CACtC,CACR,CAAA;AACL,CAAC"}

package/dist/DataTableHead.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import DataTableTH from "./DataTableTH";
-import classNames from "classnames";
-function DataTableHead({ fields, ...rest }) {
-    return (_jsx("thead", { ...rest, children: _jsx("tr", { children: fields.map((field, index) => (_jsx(DataTableTH, { ...field.thProps, field: field, className: classNames(typeof field.className === 'function'
-                    ? { [`text-${field.align}`]: !!field.align }
-                    : field.className) }, field.id ?? index))) }) }));
-}
-DataTableHead.displayName = 'DataTableHead';
-export default DataTableHead;
-//# sourceMappingURL=DataTableHead.js.map

package/dist/DataTableHead.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableHead.js","sourceRoot":"","sources":["../src/DataTableHead.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,SAAS,aAAa,CAAc,EAAC,MAAM,EAAE,GAAG,IAAI,EAAwB;IACxE,OAAO,CACH,mBAAW,IAAI,YACf,uBACK,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,WAAW,OACK,KAAK,CAAC,OAAO,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CACjB,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU;oBACjC,CAAC,CAAC,EAAC,CAAC,QAAQ,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,EAAC;oBAC1C,CAAC,CAAC,KAAK,CAAC,SAAS,CACxB,IAPI,KAAK,CAAC,EAAE,IAAI,KAAK,CAOlB,CACpB,CAAC,GACD,GACG,CACX,CAAA;AACL,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAC5C,eAAe,aAAa,CAAC"}

package/dist/DataTableRow.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import DataTableCell from "./DataTableCell";
-function DataTableRow({ className, rowClassName, selected, fields, row, trRef, onClick, ...rest }) {
-    const clickHandler = (ev) => {
-        onClick?.(row, ev);
-    };
-    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;
-    if (!row) {
-        return null;
-    }
-    return (_jsx("tr", { ref: trRef, className: classNames({ 'table-active': selected }, className, _className), onClick: clickHandler, ...rest, children: fields.map((field, index) => (_jsx(DataTableCell, { field: field, row: row }, index))) }));
-}
-DataTableRow.displayName = 'DataTableRow';
-export default DataTableRow;
-//# sourceMappingURL=DataTableRow.js.map

package/dist/DataTableRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableRow.js","sourceRoot":"","sources":["../src/DataTableRow.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,SAAS,YAAY,CAAc,EACI,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACY;IACtD,MAAM,YAAY,GAAG,CAAC,EAAmC,EAAE,EAAE;QACzD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;IACzF,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,aAAI,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,UAAU,CAAC,EAAC,cAAc,EAAE,QAAQ,EAAC,EAAE,SAAS,EAAE,UAAU,CAAC,EACxE,OAAO,EAAE,YAAY,KACjB,IAAI,YACP,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAC,aAAa,IAAa,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAA7B,KAAK,CAA2B,CAAC,CAAC,GACpF,CACR,CAAA;AACL,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}