@react-fabric/data 1.0.0-beta.60 → 1.0.0-beta.61

package/dist/esm/table/BodyRow.js

@@ -1,9 +1,9 @@
 'use client';
 
+import { Icon } from '@react-fabric/core';
 import classNames from 'classnames';
 import { BodyCell } from './BodyCell.js';
 import { CheckboxCell } from './CheckboxCell.js';
-import { Icon, CoreIcons } from '@react-fabric/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -65,7 +65,7 @@ var BodyRow = function BodyRow(_ref) {
           className: classNames("group font-medium w-6 flex flex-nowrap text-start py-1", !canExpand(data) && "pointer-events-none opacity-35"),
           children: /*#__PURE__*/jsx(Icon, {
             className: "p-1 text-tint-700 hover:text-primary-600",
-            icon: expanded ? CoreIcons.collapse : CoreIcons.expand,
+            icon: expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]",
             onClick: function onClick(e) {
               return [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()];
             }

package/dist/esm/table/CheckboxCell.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -32,7 +32,7 @@ var CheckboxCell = function CheckboxCell(_ref) {
   return /*#__PURE__*/jsx("div", {
     className: "group font-medium border-e w-6 flex flex-nowrap text-start py-1",
     children: /*#__PURE__*/jsx(Icon, {
-      icon: state === 2 ? CoreIcons.checkboxInt : state === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
+      icon: state === 2 ? "icon-[mdi--checkbox-intermediate]" : state === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
       className: "p-1 text-tint-700 hover:text-primary-600",
       onClick: function onClick(e) {
         return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];

package/dist/esm/table/HeaderCell.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Menu, CoreIcons, MenuItem, Divider, Tooltip, Icon, getIconProps, DropdownTool, Button } from '@react-fabric/core';
+import { Menu, MenuItem, Divider, Tooltip, Icon, getIconProps, DropdownTool, Button } from '@react-fabric/core';
 import { isEmpty } from '@react-fabric/utilities';
 import { useMemo, useCallback } from 'react';
 import { ColumnFilters } from './ColumnFilters.js';
@@ -50,7 +50,7 @@ var HeaderCell = function HeaderCell(_ref) {
     if (filterable && (dataType !== null && dataType !== void 0 ? dataType : filterOptions)) {
       ret.push( /*#__PURE__*/jsx(Menu, {
         label: "Filter",
-        icon: filter ? CoreIcons.tick : "",
+        icon: filter ? "icon-[mdi--check]" : "",
         trigger: "click",
         children: /*#__PURE__*/jsx(ColumnFilters, {
           type: dataType,
@@ -65,13 +65,13 @@ var HeaderCell = function HeaderCell(_ref) {
     if (sortable) {
       ret.push( /*#__PURE__*/jsx(MenuItem, {
         label: "Sort ascending",
-        icon: CoreIcons.sortAsc,
+        icon: "icon-[mdi--sort-ascending]",
         onClick: function onClick() {
           return handleSort("asc");
         }
       }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
         label: "Sort descending",
-        icon: CoreIcons.sortDesc,
+        icon: "icon-[mdi--sort-descending]",
         onClick: function onClick() {
           return handleSort("desc");
         }
@@ -136,7 +136,7 @@ var HeaderCell = function HeaderCell(_ref) {
       variant: "link",
       "aria-label": "clear filter",
       stopPropagation: true,
-      icon: CoreIcons.funnelRemove,
+      icon: "icon-[mdi--filter-remove]",
       onClick: function onClick() {
         return _onFilter === null || _onFilter === void 0 ? void 0 : _onFilter(id);
       }

package/dist/esm/table/Table.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useDebounce, Loading, Icon, CoreIcons, EmptyContent } from '@react-fabric/core';
+import { useDebounce, LoadingLine, Icon, EmptyContent } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useMemo, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
@@ -168,7 +168,7 @@ var Table = function Table(_ref) {
             })
           })]
         })]
-      }), loading && /*#__PURE__*/jsx(Loading, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
+      }), loading && /*#__PURE__*/jsx(LoadingLine, {}), data.length > 0 && /*#__PURE__*/jsxs("div", {
         className: "area-content flex flex-col flex-nowrap min-h-full",
         style: {
           height: totalSize()
@@ -183,26 +183,29 @@ var Table = function Table(_ref) {
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return "__GROUP__" in data ? /*#__PURE__*/jsxs("div", {
+          return "__GROUP__" in data ? /*#__PURE__*/jsx("div", {
             ref: measureElement,
             "data-index": index,
-            className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
+            className: classNames("text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
             role: "none",
             onClick: function onClick() {
               return toggleGroupExpand(data.key);
             },
-            children: [/*#__PURE__*/jsx(Icon, {
-              rtlFlip: true,
-              icon: data.open ? CoreIcons.chevronDown : CoreIcons.chevronRight
-            }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxs("div", {
-              className: "flex gap-1 items-center",
-              children: [/*#__PURE__*/jsx("span", {
-                children: data.key
-              }), /*#__PURE__*/jsxs("span", {
-                className: "text-sm",
-                children: ["(", data.itemCount, ")"]
+            children: /*#__PURE__*/jsxs("div", {
+              className: classNames("px-2 py-1 flex items-center gap-1 z-2 sticky start-0"),
+              children: [/*#__PURE__*/jsx(Icon, {
+                rtlFlip: true,
+                icon: data.open ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]"
+              }), (_groupRenderer = groupRenderer === null || groupRenderer === void 0 ? void 0 : groupRenderer(data)) !== null && _groupRenderer !== void 0 ? _groupRenderer : /*#__PURE__*/jsxs("div", {
+                className: "flex gap-1 items-center",
+                children: [/*#__PURE__*/jsx("span", {
+                  children: data.key
+                }), /*#__PURE__*/jsxs("span", {
+                  className: "text-sm",
+                  children: ["(", data.itemCount, ")"]
+                })]
               })]
-            })]
+            })
           }, key) : /*#__PURE__*/jsx(BodyRow, {
             rowKey: key.toString(),
             index: index,

package/dist/esm/tree/TreeNode.js

@@ -1,8 +1,8 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { getBadgeProps, Icon, CoreIcons, getIconProps, Badge } from '@react-fabric/core';
-import { isString, isEmpty } from '@react-fabric/utilities';
+import { getBadgeProps, Icon, getIconProps, Badge } from '@react-fabric/core';
+import { isTrue, isString, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, isValidElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -57,7 +57,7 @@ var TreeNode = function TreeNode(_ref) {
     };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
   var canCheck = useMemo(function () {
-    return checkable === true || checkable === "leafOnly" && node.leaf;
+    return isTrue(checkable) || checkable === "leafOnly" && node.leaf;
   }, [node.leaf, checkable]);
   var canSelect = useMemo(function () {
     return !node.disabled && (selectable === true || selectable === "leafOnly" && node.leaf);
@@ -72,8 +72,8 @@ var TreeNode = function TreeNode(_ref) {
     children: [filler, node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsx(Icon, {
-        icon: CoreIcons.spinner,
-        className: "animate-spin text-muted"
+        icon: "icon-[svg-spinners--eclipse]",
+        className: "text-muted"
       })
     }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
@@ -91,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
         onClick: function onClick() {
           return !node.disabled && onChecked(node.id);
         },
-        icon: node.checked === 2 ? CoreIcons.checkboxInt : node.checked === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
+        icon: node.checked === 2 ? "icon-[mdi--checkbox-intermediate]" : node.checked === 1 ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]",
         className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
     }), !node.empty && /*#__PURE__*/jsxs("div", {

package/dist/esm/tree/TreePanel.js

@@ -2,12 +2,11 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
+import { Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef, useMemo, useImperativeHandle, useEffect } from 'react';
 import { TreeNode } from './TreeNode.js';
-import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -81,10 +80,10 @@ var TreePanel = function TreePanel(_ref) {
   });
   var virtualItems = virtualizer.getVirtualItems();
   var expanders = useMemo(function () {
-    if (expander === "caret") return [CoreIcons.caretRight, CoreIcons.caretDown];
-    if (expander === "chevron") return [CoreIcons.chevronRight, CoreIcons.chevronDown];
-    if (expander === "folder") return [CoreIcons.folderClosed, CoreIcons.folderOpen];
-    return [CoreIcons.expand, CoreIcons.collapse];
+    if (expander === "caret") return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
+    if (expander === "chevron") return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
+    if (expander === "folder") return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
   useImperativeHandle(ref, function () {
     return {
@@ -118,7 +117,7 @@ var TreePanel = function TreePanel(_ref) {
         placeholder: filterPlaceholder,
         noBorder: true,
         decorateStart: /*#__PURE__*/jsx(Icon, {
-          icon: CoreIcons.filter,
+          icon: "icon-[mdi--filter-variant]",
           className: "p-1"
         })
       }), /*#__PURE__*/jsxs(ButtonGroup, {
@@ -127,12 +126,12 @@ var TreePanel = function TreePanel(_ref) {
         children: [/*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "expand all",
-          icon: iconExpandAll,
+          icon: "icon-[mdi--arrow-expand-vertical]",
           onClick: expandAll
         }), /*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "collapse all",
-          icon: iconCollapseAll,
+          icon: "icon-[mdi--arrow-collapse-vertical]",
           onClick: collapseAll
         })]
       })]

package/dist/esm/virtual/Scroller.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { ButtonGroup, Button, CoreIcons } from '@react-fabric/core';
+import { ButtonGroup, Button } from '@react-fabric/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -43,7 +43,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll to top",
       icon: {
-        icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+        icon: vertical ? "icon-[mdi--chevron-double-up]" : "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       },
       disabled: (scrollActive & 2) === 0,
@@ -53,7 +53,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll up",
       icon: {
-        icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+        icon: vertical ? "icon-[mdi--chevron-up]" : "icon-[mdi--chevron-left]",
         rtlFlip: true
       },
       disabled: (scrollActive & 2) === 0,
@@ -63,7 +63,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll down",
       icon: {
-        icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+        icon: vertical ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]",
         rtlFlip: true
       },
       disabled: scrollActive % 2 === 0,
@@ -73,7 +73,7 @@ var Scroller = function Scroller(_ref) {
       variant: "link",
       "aria-label": "scroll to bottom",
       icon: {
-        icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+        icon: vertical ? "icon-[mdi--chevron-double-down]" : "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       },
       disabled: scrollActive % 2 === 0,

package/dist/types/table/types.d.ts

@@ -1,5 +1,5 @@
 import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
-import { type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type Elements, type NestedKeys, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";
 export declare const COL_MAX_WIDTH = "64rem";
@@ -33,7 +33,7 @@ export declare const COL_DEFAULT_WIDTH = "12rem";
  * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
  */
 export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
-    id: keyof T | string;
+    id: NestedKeys<T>;
     field?: string;
     label?: string;
     tooltip?: string;
@@ -65,8 +65,8 @@ export interface TableRef {
 export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     columns: Array<TableColumn<T>>;
     data: T[];
-    keyProperty?: keyof T;
-    groupProperty?: keyof T;
+    keyProperty?: NestedKeys<T>;
+    groupProperty?: NestedKeys<T>;
     groupRenderer?: (key: AnyObject) => ReactElement;
     emptyDisplay?: ReactElement;
     /**
@@ -93,7 +93,7 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     onScroll?: (firstItem: number) => void;
     canExpand?: (record: T) => boolean;
     children?: (record: T) => Elements<AnyObject>;
-    onFilter?: (id: keyof T | string, value?: AnyObject) => void;
+    onFilter?: (id: NestedKeys<T> | string, value?: AnyObject) => void;
     total?: number;
     onLoadMore?: (lastIndex?: number) => void;
 }

package/dist/types/tree/TreePanel.d.ts

@@ -20,8 +20,8 @@ import { type TreePanelProps } from "./types";
  *   selectable={true}
  *   matcher={(item, query) => item.name.toLowerCase().includes(query.toLowerCase())}
  *   filterPlaceholder="Search..."
- *   defaultLeafIcon={<Icon icon={CoreIcons.file} />}
- *   defaultNodeIcon={<Icon icon={CoreIcons.folder} />}
+ *   defaultLeafIcon={<Icon icon="icon-[mdi--file]" />}
+ *   defaultNodeIcon={<Icon icon="icon-[mdi--folder]" />}
  *   expander="caret"
  *   onChecked={(checkedItems) => console.log(checkedItems)}
  *   onLoad={(id) => console.log(`Load children for ${id}`)}

package/dist/types/tree/types.d.ts

@@ -183,6 +183,4 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, R
     leafClassName?: string;
     nodeClassName?: string;
 }
-export declare const iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
-export declare const iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.61",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.60",
-    "@react-fabric/date": "^1.0.0-beta.60",
-    "@react-fabric/form": "^1.0.0-beta.60",
-    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "@react-fabric/core": "^1.0.0-beta.61",
+    "@react-fabric/date": "^1.0.0-beta.61",
+    "@react-fabric/form": "^1.0.0-beta.61",
+    "@react-fabric/utilities": "^1.0.0-beta.61",
     "@tanstack/react-virtual": "~3.13.12",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
 }

package/src/checklist/CheckList.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Badge, CoreIcons, EmptyContent, Icon } from "@react-fabric/core";
+import { Badge, EmptyContent, Icon } from "@react-fabric/core";
 import {
   type BadgeType,
   type TestProps,
@@ -106,7 +106,11 @@ const CheckItem: FC<
           data-type="checkbox"
           className="ax-checkList__checkbox"
           data-selected={selected === 1}
-          icon={selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff}
+          icon={
+            selected
+              ? "icon-[mdi--checkbox-marked]"
+              : "icon-[mdi--checkbox-blank-outline]"
+          }
         />
       )}
       {allowNegative && (
@@ -116,10 +120,10 @@ const CheckItem: FC<
             className="ax-checkList__checkbox"
             icon={
               selected === 1
-                ? CoreIcons.expand
+                ? "icon-[mdi--plus-box-outline]"
                 : selected === -1
-                  ? CoreIcons.collapse
-                  : CoreIcons.checkboxOff
+                  ? "icon-[mdi--minus-box-outline]"
+                  : "icon-[mdi--checkbox-blank-outline]"
             }
             data-selected={selected}
           />
@@ -127,14 +131,20 @@ const CheckItem: FC<
             <Icon
               data-type="positive"
               onClick={(e) => [(onClick(id, false), e.stopPropagation())]}
-              icon={selected === 1 ? CoreIcons.expandActive : CoreIcons.expand}
+              icon={
+                selected === 1
+                  ? "icon-[mdi--plus-box]"
+                  : "icon-[mdi--plus-box-outline]"
+              }
               data-selected={selected === 1}
             />
             <Icon
               data-type="negative"
               onClick={(e) => [(onClick(id, true), e.stopPropagation())]}
               icon={
-                selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse
+                selected === -1
+                  ? "icon-[mdi--minus-box]"
+                  : "icon-[mdi--minus-box-outline]"
               }
               data-selected={selected === -1}
             />

package/src/histogram/Histogram.tsx

@@ -21,13 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  ActionLabel,
-  Button,
-  CoreIcons,
-  EmptyContent,
-  Icon,
-} from "@react-fabric/core";
+import { ActionLabel, Button, EmptyContent, Icon } from "@react-fabric/core";
 import {
   type ColorType,
   type PaletteType,
@@ -178,7 +172,7 @@ export const Histogram = ({
                 color="danger"
                 size="sm"
                 stopPropagation
-                icon={CoreIcons.funnelMinus}
+                icon="icon-[mdi--filter-minus]"
                 aria-label="Filter Negative"
                 onClick={() => onClick?.(item.id, true)}
               />,
@@ -187,7 +181,7 @@ export const Histogram = ({
                 color="primary"
                 size="sm"
                 stopPropagation
-                icon={CoreIcons.funnelPlus}
+                icon="icon-[mdi--filter-plus]"
                 aria-label="Filter"
                 onClick={() => onClick?.(item.id)}
               />,

package/src/json/JsonViewer.tsx

@@ -24,7 +24,6 @@
 import {
   Button,
   Copy,
-  CoreIcons,
   EmptyContent,
   Icon,
   Meter,
@@ -230,7 +229,7 @@ const JsonEntry = ({
               color="danger"
               size="xs"
               variant="link"
-              icon={CoreIcons.funnelMinus}
+              icon="icon-[mdi--filter-minus]"
               aria-label="Filter Negative"
               onClick={() => onFilter?.(pathWithoutOrdinal, actualValue, true)}
             />
@@ -239,7 +238,7 @@ const JsonEntry = ({
               color="primary"
               size="xs"
               variant="link"
-              icon={CoreIcons.funnelPlus}
+              icon="icon-[mdi--filter-plus]"
               aria-label="Filter"
               onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
             />
@@ -277,7 +276,11 @@ const JsonEntry = ({
             {canExpand && (
               <Icon
                 rtlFlip
-                icon={expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+                icon={
+                  expanded
+                    ? "icon-[mdi--chevron-down]"
+                    : "icon-[mdi--chevron-right]"
+                }
               />
             )}
             {labelDisplay}

package/src/pagination/Pagination.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import classNames from "classnames";
 import { Fragment, memo, useMemo } from "react";
 
@@ -125,7 +125,7 @@ export const Pagination = memo(
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronsLeft} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-double-left]" rtlFlip />
         </button>
         <button
           onClick={() => onPageChange(page - 1)}
@@ -134,7 +134,7 @@ export const Pagination = memo(
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronLeft} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-left]" rtlFlip />
         </button>
         {!minimal && pageBody}
         {minimal && (
@@ -149,7 +149,7 @@ export const Pagination = memo(
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronRight} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-right]" rtlFlip />
         </button>
         <button
           onClick={() => onPageChange(totalPages - 1)}
@@ -158,7 +158,7 @@ export const Pagination = memo(
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronsRight} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-double-right]" rtlFlip />
         </button>
       </div>
     );

package/src/table/AddColumn.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
 import { type TableColumn } from "./types";
 
 export const AddColumn = ({
@@ -35,7 +35,7 @@ export const AddColumn = ({
     <div className="group font-medium w-6 flex flex-nowrap text-start items-center">
       <Dropdown placement="bottom-end">
         <Icon
-          icon={CoreIcons.insert}
+          icon="icon-[mdi--plus-circle-outline]"
           className="p-1 rounded-t rounded-b-none hover:outline"
         />
         <Menu className="text-sm" onClick={onClick}>
@@ -45,7 +45,7 @@ export const AddColumn = ({
               id={String(col.id)}
               data-dropdown-dismiss="false"
               label={`${col.label ?? String(col.id)}`}
-              icon={!col.hidden ? CoreIcons.tick : ""}
+              icon={!col.hidden ? "icon-[mdi--check]" : ""}
             />
           ))}
         </Menu>

package/src/table/BodyCell.tsx

@@ -22,7 +22,13 @@
  */
 
 import { DateDisplay } from "@react-fabric/date";
-import { Format, getByPath, isTrue } from "@react-fabric/utilities";
+import {
+  Format,
+  getByPath,
+  isArray,
+  isObject,
+  isTrue,
+} from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { useTableContext } from "./Context";
@@ -55,11 +61,14 @@ export const BodyCell = ({
       return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
-      const map = column.valueMap ?? { true: "Yes", false: "no" };
+      const map = column.valueMap ?? { true: "Yes", false: "No" };
       return map[`${isTrue(value) ? "true" : "false"}`];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
+      if (
+        ["number", "string"].includes(column.dataType ?? "string") &&
+        value in column.valueMap
+      ) {
         return column.valueMap[value];
       }
     }
@@ -69,6 +78,12 @@ export const BodyCell = ({
     if (column.dataType === "number") {
       return Format.number(value, column.format);
     }
+    if (isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (isArray(value)) {
+      return value.join(", ");
+    }
     return value ?? "";
   }, [item, column]);
 

package/src/table/BodyRow.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { Icon } from "@react-fabric/core";
 import classNames from "classnames";
 import { BodyCell } from "./BodyCell";
 import { CheckboxCell } from "./CheckboxCell";
 import { type TableColumn } from "./types";
-import { CoreIcons, Icon } from "@react-fabric/core";
 
 export const BodyRow = ({
   rowKey,
@@ -94,7 +94,9 @@ export const BodyRow = ({
             >
               <Icon
                 className="p-1 text-tint-700 hover:text-primary-600"
-                icon={expanded ? CoreIcons.collapse : CoreIcons.expand}
+                icon={
+                  expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]"
+                }
                 onClick={(e) => [
                   keyProperty && toggleExpand(data[keyProperty]),
                   e.stopPropagation(),