@itwin/itwinui-react 3.0.0-dev.10 → 3.0.0-dev.12

package/cjs/core/SideNavigation/SideNavigation.js

@@ -9,8 +9,8 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
-const index_js_3 = require('../Tooltip/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
 /**
  * Left side navigation menu component.
  * @example
@@ -46,7 +46,7 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
     _setIsExpanded(isExpanded);
   }, [isExpanded]);
   const ExpandButton = React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       label: 'Toggle icon labels',
       'aria-expanded': _isExpanded,
@@ -106,7 +106,7 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
           items.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(
-                  index_js_3.Tooltip,
+                  Tooltip_js_1.Tooltip,
                   {
                     content: sidenavButton.props.children,
                     placement: 'right',
@@ -130,7 +130,7 @@ exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
           secondaryItems?.map((sidenavButton, index) =>
             !_isExpanded
               ? React.createElement(
-                  index_js_3.Tooltip,
+                  Tooltip_js_1.Tooltip,
                   {
                     content: sidenavButton.props.children,
                     placement: 'right',

package/cjs/core/SideNavigation/SidenavButton.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,

package/cjs/core/SideNavigation/SidenavButton.js

@@ -8,7 +8,7 @@ exports.SidenavButton = void 0;
 const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Buttons/index.js');
+const Button_js_1 = require('../Buttons/Button.js');
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
@@ -23,7 +23,7 @@ exports.SidenavButton = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Button,
+    Button_js_1.Button,
     {
       className: (0, classnames_1.default)(
         'iui-sidenav-button',

package/cjs/core/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { Tooltip } from '../Tooltip/index.js';
+import type { Tooltip } from '../Tooltip/Tooltip.js';
 /**
  * Determines which segments are shown with color.
  */

package/cjs/core/Slider/Thumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import type { SliderProps } from './Slider.js';
 type ThumbProps = {
     /**

package/cjs/core/Slider/Thumb.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Tooltip/index.js');
-const index_js_2 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
@@ -88,14 +88,14 @@ const Thumb = (props) => {
   }, [adjustedValue, sliderMax, sliderMin]);
   const { style, className, ...rest } = thumbProps || {};
   return React.createElement(
-    index_js_1.Tooltip,
+    Tooltip_js_1.Tooltip,
     {
       placement: 'top',
       autoUpdateOptions: { animationFrame: true },
       ariaStrategy: 'none',
       ...tooltipProps,
     },
-    React.createElement(index_js_2.Box, {
+    React.createElement(index_js_1.Box, {
       ...rest,
       'data-index': index,
       ref: thumbRef,

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.

package/cjs/core/StatusMessage/StatusMessage.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const Icon_js_1 = require('../Icon/Icon.js');
 /**
  * Component to display icon and text below the form field.
  * @example
@@ -36,7 +37,7 @@ exports.StatusMessage = React.forwardRef((props, ref) => {
     },
     !!icon
       ? React.createElement(
-          index_js_1.Icon,
+          Icon_js_1.Icon,
           { 'aria-hidden': true, ...iconProps },
           icon,
         )

package/cjs/core/Stepper/StepperStep.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Tooltip/index.js');
-const index_js_2 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
 exports.StepperStep = React.forwardRef((props, forwardedRef) => {
   const {
     title,
@@ -47,7 +47,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     }
   };
   const stepShape = React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       as: 'li',
       ...stepProps,
@@ -70,7 +70,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         as: 'div',
         ...trackContentProps,
@@ -80,7 +80,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
         ),
       },
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           as: 'span',
           ...circleProps,
@@ -94,7 +94,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     ),
     type === 'default' &&
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           as: 'span',
           ...nameProps,
@@ -108,7 +108,7 @@ exports.StepperStep = React.forwardRef((props, forwardedRef) => {
   );
   return description
     ? React.createElement(
-        index_js_1.Tooltip,
+        Tooltip_js_1.Tooltip,
         { content: description },
         stepShape,
       )

package/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -8,12 +8,12 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Tooltip/index.js');
-const index_js_2 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
 const WorkflowDiagramStep = (props) => {
   const { title, description, className, style, contentProps, ...rest } = props;
   const stepShape = React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       as: 'li',
       className: (0, classnames_1.default)(
@@ -24,7 +24,7 @@ const WorkflowDiagramStep = (props) => {
       ...rest,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         as: 'span',
         ...contentProps,
@@ -38,7 +38,7 @@ const WorkflowDiagramStep = (props) => {
   );
   return description
     ? React.createElement(
-        index_js_1.Tooltip,
+        Tooltip_js_1.Tooltip,
         { content: description },
         stepShape,
       )

package/cjs/core/Surface/Surface.d.ts

@@ -11,6 +11,14 @@ type SurfaceProps = {
      * Sets the elevation of the surface
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Sets the border of the surface.
+     *
+     * Can be a boolean to toggle the default border, or a string value to specify a custom border.
+     *
+     * @default true
+     */
+    border?: boolean | string;
     /**
      * Content in the surface.
      */

package/cjs/core/Surface/Surface.js

@@ -30,6 +30,16 @@ const getSurfaceElevationValue = (elevation) => {
       return '';
   }
 };
+/** Returns correct border value based on prop */
+const getBorderValue = (border) => {
+  if (typeof border === 'string') {
+    return border;
+  }
+  if (border === false) {
+    return 'none';
+  }
+  return '';
+};
 // ----------------------------------------------------------------------------
 // Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
@@ -81,10 +91,18 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 exports.Surface = Object.assign(
   React.forwardRef((props, ref) => {
-    const { elevation, className, style, children, ...rest } = props;
+    const {
+      elevation,
+      border = true,
+      className,
+      style,
+      children,
+      ...rest
+    } = props;
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
       '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+      '--iui-surface-border': getBorderValue(border),
       ...style,
     };
     return React.createElement(

package/cjs/core/Table/SubRowExpander.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Cell, CellProps } from 'react-table';
+import type { Cell, CellProps } from '../../react-table/react-table.js';
 export type SubRowExpanderProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     expanderCell?: (cellProps: CellProps<T>) => React.ReactNode;

package/cjs/core/Table/SubRowExpander.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const SubRowExpander = (props) => {
   const { cell, isDisabled, cellProps, expanderCell, density } = props;
   return React.createElement(
@@ -17,7 +17,7 @@ const SubRowExpander = (props) => {
     expanderCell
       ? expanderCell(cellProps)
       : React.createElement(
-          index_js_2.IconButton,
+          IconButton_js_1.IconButton,
           {
             'aria-label': 'Toggle sub row',
             'aria-expanded': cell.row.isExpanded ? 'true' : 'false',

package/cjs/core/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CellProps, TableOptions, Row, TableState } from 'react-table';
+import type { CellProps, TableOptions, Row, TableState } from '../../react-table/react-table.js';
 import type { CommonProps } from '../utils/index.js';
 import type { TableFilterValue } from './filters/index.js';
 export declare const tableResizeStartAction = "tableResizeStart";

package/cjs/core/Table/Table.js

@@ -9,23 +9,23 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const react_table_1 = require('react-table');
-const index_js_1 = require('../ProgressIndicators/index.js');
-const index_js_2 = require('../utils/index.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const index_js_1 = require('../utils/index.js');
 const utils_js_1 = require('./utils.js');
 const TableRowMemoized_js_1 = require('./TableRowMemoized.js');
-const index_js_3 = require('./filters/index.js');
+const index_js_2 = require('./filters/index.js');
 const customFilterFunctions_js_1 = require('./filters/customFilterFunctions.js');
-const index_js_4 = require('./hooks/index.js');
-const index_js_5 = require('./actionHandlers/index.js');
+const index_js_3 = require('./hooks/index.js');
+const index_js_4 = require('./actionHandlers/index.js');
 const VirtualScroll_js_1 = tslib_1.__importDefault(
   require('../utils/components/VirtualScroll.js'),
 );
-const index_js_6 = require('./columns/index.js');
+const index_js_5 = require('./columns/index.js');
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 exports.tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
-const logWarningInDev = (0, index_js_2.createWarningLogger)();
+const logWarningInDev = (0, index_js_1.createWarningLogger)();
 const flattenColumns = (columns) => {
   const flatColumns = [];
   columns.forEach((column) => {
@@ -119,7 +119,7 @@ const Table = (props) => {
     emptyTableContentProps,
     ...rest
   } = props;
-  (0, index_js_2.useGlobals)();
+  (0, index_js_1.useGlobals)();
   const ownerDocument = React.useRef();
   const defaultColumn = React.useMemo(
     () => ({
@@ -139,7 +139,7 @@ const Table = (props) => {
   const hasManualSelectionColumn = React.useMemo(() => {
     const flatColumns = flattenColumns(columns);
     return flatColumns.some(
-      (column) => column.id === index_js_6.SELECTION_CELL_ID,
+      (column) => column.id === index_js_5.SELECTION_CELL_ID,
     );
   }, [columns]);
   const disableUserSelect = React.useCallback((e) => {
@@ -181,7 +181,7 @@ const Table = (props) => {
           onSort?.(newState);
           break;
         case react_table_1.actions.setFilter:
-          currentFilter.current = (0, index_js_5.onFilterHandler)(
+          currentFilter.current = (0, index_js_4.onFilterHandler)(
             newState,
             action,
             previousState,
@@ -191,10 +191,10 @@ const Table = (props) => {
           break;
         case react_table_1.actions.toggleRowExpanded:
         case react_table_1.actions.toggleAllRowsExpanded:
-          (0, index_js_5.onExpandHandler)(newState, instance, onExpand);
+          (0, index_js_4.onExpandHandler)(newState, instance, onExpand);
           break;
         case singleRowSelectedAction: {
-          newState = (0, index_js_5.onSingleSelectHandler)(
+          newState = (0, index_js_4.onSingleSelectHandler)(
             newState,
             action,
             instance,
@@ -205,7 +205,7 @@ const Table = (props) => {
           break;
         }
         case shiftRowSelectedAction: {
-          newState = (0, index_js_5.onShiftSelectHandler)(
+          newState = (0, index_js_4.onShiftSelectHandler)(
             newState,
             action,
             instance,
@@ -218,7 +218,7 @@ const Table = (props) => {
         case react_table_1.actions.toggleRowSelected:
         case react_table_1.actions.toggleAllRowsSelected:
         case react_table_1.actions.toggleAllPageRowsSelected: {
-          (0, index_js_5.onToggleHandler)(
+          (0, index_js_4.onToggleHandler)(
             newState,
             action,
             instance,
@@ -229,11 +229,11 @@ const Table = (props) => {
           break;
         }
         case exports.tableResizeStartAction: {
-          newState = (0, index_js_5.onTableResizeStart)(newState);
+          newState = (0, index_js_4.onTableResizeStart)(newState);
           break;
         }
         case tableResizeEndAction: {
-          newState = (0, index_js_5.onTableResizeEnd)(newState, action);
+          newState = (0, index_js_4.onTableResizeEnd)(newState, action);
           break;
         }
         default:
@@ -281,25 +281,25 @@ const Table = (props) => {
       columnResizeMode,
     },
     react_table_1.useFlexLayout,
-    (0, index_js_4.useResizeColumns)(ownerDocument),
+    (0, index_js_3.useResizeColumns)(ownerDocument),
     react_table_1.useFilters,
-    (0, index_js_4.useSubRowFiltering)(hasAnySubRows),
+    (0, index_js_3.useSubRowFiltering)(hasAnySubRows),
     react_table_1.useGlobalFilter,
     react_table_1.useSortBy,
     react_table_1.useExpanded,
     react_table_1.usePagination,
     react_table_1.useRowSelect,
-    index_js_4.useSubRowSelection,
-    (0, index_js_4.useExpanderCell)(subComponent, expanderCell, isRowDisabled),
-    (0, index_js_4.useSelectionCell)(
+    index_js_3.useSubRowSelection,
+    (0, index_js_3.useExpanderCell)(subComponent, expanderCell, isRowDisabled),
+    (0, index_js_3.useSelectionCell)(
       isSelectable,
       selectionMode,
       isRowDisabled,
       density,
     ),
     react_table_1.useColumnOrder,
-    (0, index_js_4.useColumnDragAndDrop)(enableColumnReordering),
-    index_js_4.useStickyColumns,
+    (0, index_js_3.useColumnDragAndDrop)(enableColumnReordering),
+    index_js_3.useStickyColumns,
   );
   const {
     getTableProps,
@@ -427,7 +427,7 @@ const Table = (props) => {
       selectionMode,
     ],
   );
-  const { scrollToIndex, tableRowRef } = (0, index_js_4.useScrollToRow)({
+  const { scrollToIndex, tableRowRef } = (0, index_js_3.useScrollToRow)({
     ...props,
     page,
   });
@@ -455,9 +455,9 @@ const Table = (props) => {
     },
     [dispatch, state.columnResizing.columnWidths, flatHeaders, instance],
   );
-  const [resizeRef] = (0, index_js_2.useResizeObserver)(onTableResize);
+  const [resizeRef] = (0, index_js_1.useResizeObserver)(onTableResize);
   // Flexbox handles columns resize so we take new column widths before browser repaints.
-  (0, index_js_2.useIsomorphicLayoutEffect)(() => {
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
     if (state.isTableResizing) {
       const newColumnWidths = {};
       flatHeaders.forEach((column) => {
@@ -545,7 +545,7 @@ const Table = (props) => {
     React.Fragment,
     null,
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       {
         ref: (element) => {
           ownerDocument.current = element?.ownerDocument;
@@ -575,7 +575,7 @@ const Table = (props) => {
           className: 'iui-table-row',
         });
         return React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           {
             as: 'div',
             ref: headerRef,
@@ -593,7 +593,7 @@ const Table = (props) => {
             ),
           },
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             {
               as: 'div',
               ...headerProps,
@@ -603,7 +603,7 @@ const Table = (props) => {
               ),
             },
             React.createElement(
-              index_js_2.Box,
+              index_js_1.Box,
               { ...headerGroupProps },
               headerGroup.headers.map((column, index) => {
                 const { onClick, ...restSortProps } =
@@ -629,7 +629,7 @@ const Table = (props) => {
                   },
                 });
                 return React.createElement(
-                  index_js_2.Box,
+                  index_js_1.Box,
                   {
                     ...columnProps,
                     ...column.getDragAndDropProps(),
@@ -661,23 +661,23 @@ const Table = (props) => {
                   column.render('Header'),
                   (showFilterButton(column) || showSortButton(column)) &&
                     React.createElement(
-                      index_js_2.Box,
+                      index_js_1.Box,
                       { className: 'iui-table-header-actions-container' },
                       showFilterButton(column) &&
-                        React.createElement(index_js_3.FilterToggle, {
+                        React.createElement(index_js_2.FilterToggle, {
                           column: column,
                         }),
                       showSortButton(column) &&
                         React.createElement(
-                          index_js_2.Box,
+                          index_js_1.Box,
                           { className: 'iui-table-cell-end-icon' },
                           column.isSortedDesc ||
                             (!column.isSorted && column.sortDescFirst)
-                            ? React.createElement(index_js_2.SvgSortDown, {
+                            ? React.createElement(index_js_1.SvgSortDown, {
                                 className: 'iui-table-sort',
                                 'aria-hidden': true,
                               })
-                            : React.createElement(index_js_2.SvgSortUp, {
+                            : React.createElement(index_js_1.SvgSortUp, {
                                 className: 'iui-table-sort',
                                 'aria-hidden': true,
                               }),
@@ -688,28 +688,28 @@ const Table = (props) => {
                     (index !== headerGroup.headers.length - 1 ||
                       columnResizeMode === 'expand') &&
                     React.createElement(
-                      index_js_2.Box,
+                      index_js_1.Box,
                       {
                         ...column.getResizerProps(),
                         className: 'iui-table-resizer',
                       },
-                      React.createElement(index_js_2.Box, {
+                      React.createElement(index_js_1.Box, {
                         className: 'iui-table-resizer-bar',
                       }),
                     ),
                   enableColumnReordering &&
                     !column.disableReordering &&
-                    React.createElement(index_js_2.Box, {
+                    React.createElement(index_js_1.Box, {
                       className: 'iui-table-reorder-bar',
                     }),
                   column.sticky === 'left' &&
                     state.sticky.isScrolledToRight &&
-                    React.createElement(index_js_2.Box, {
+                    React.createElement(index_js_1.Box, {
                       className: 'iui-table-cell-shadow-right',
                     }),
                   column.sticky === 'right' &&
                     state.sticky.isScrolledToLeft &&
-                    React.createElement(index_js_2.Box, {
+                    React.createElement(index_js_1.Box, {
                       className: 'iui-table-cell-shadow-left',
                     }),
                 );
@@ -719,7 +719,7 @@ const Table = (props) => {
         );
       }),
       React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           ...bodyProps,
           ...getTableBodyProps({
@@ -758,7 +758,7 @@ const Table = (props) => {
         isLoading &&
           data.length === 0 &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             {
               as: 'div',
               ...emptyTableContentProps,
@@ -767,22 +767,22 @@ const Table = (props) => {
                 emptyTableContentProps?.className,
               ),
             },
-            React.createElement(index_js_1.ProgressRadial, {
+            React.createElement(ProgressRadial_js_1.ProgressRadial, {
               indeterminate: true,
             }),
           ),
         isLoading &&
           data.length !== 0 &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             { className: 'iui-table-row' },
             React.createElement(
-              index_js_2.Box,
+              index_js_1.Box,
               {
                 className: 'iui-table-cell',
                 style: { justifyContent: 'center' },
               },
-              React.createElement(index_js_1.ProgressRadial, {
+              React.createElement(ProgressRadial_js_1.ProgressRadial, {
                 indeterminate: true,
                 size: 'small',
               }),
@@ -792,7 +792,7 @@ const Table = (props) => {
           data.length === 0 &&
           !areFiltersSet &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             {
               as: 'div',
               ...emptyTableContentProps,
@@ -807,7 +807,7 @@ const Table = (props) => {
           (data.length === 0 || rows.length === 0) &&
           areFiltersSet &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             {
               as: 'div',
               ...emptyTableContentProps,

package/cjs/core/Table/TableCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Cell, CellProps, TableInstance } from 'react-table';
+import type { Cell, CellProps, TableInstance } from '../../react-table/react-table.js';
 export type TableCellProps<T extends Record<string, unknown>> = {
     cell: Cell<T>;
     cellIndex: number;