@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.1

package/esm/core/SideNavigation/SidenavSubmenu.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example

package/esm/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 declare type SidenavSubmenuHeaderProps = {
     /**
      * Actions shown at the end of the submenu label.

package/esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/skip-to-content.css';
 declare type SkipToContentLinkProps = {
     /**
      * The id of the main content that the link directs to. Don't forget the #!

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/skip-to-content.css';
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
  * Provides a shortcut to the main content of the page without navigating through the header, etc.

package/esm/core/Slider/Slider.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/slider.css';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TooltipProps } from '../Tooltip/Tooltip.js';
 /**

package/esm/core/Slider/Slider.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { getBoundedValue, useEventListener, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/slider.css';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {

package/esm/core/Slider/Track.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import { Box } from '../utils/index.js';
 function shouldDisplaySegment(segmentIndex, mode) {
     if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
         return true;
@@ -49,7 +50,7 @@ export const Track = (props) => {
                 ? 100.0 -
                     (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
                 : 100;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: {
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement(Box, { className: 'iui-slider-track', style: {
                     ...(orientation === 'horizontal'
                         ? {
                             left: `${lowPercent}%`,

package/esm/core/Stepper/Stepper.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/stepper.css';
 export declare type StepperLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
 };

package/esm/core/Stepper/Stepper.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/stepper.css';
 import { StepperStep } from './StepperStep.js';
 const defaultStepperLocalization = {
     stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,

package/esm/core/Stepper/WorkflowDiagram.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
 import type { StepperProps } from './Stepper.js';
 declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
 export declare const WorkflowDiagram: PolymorphicForwardRefComponent<"ol", WorkflowDiagramProps>;

package/esm/core/Stepper/WorkflowDiagram.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const WorkflowDiagram = React.forwardRef(
 // TODO: Remove this ref cast. ref and rest props should be applied on the same element

package/esm/core/Surface/Surface.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/surface.css';
 declare type SurfaceBodyOwnProps = {
     /**
      * Gives padding to the surface body

package/esm/core/Surface/Surface.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useSafeContext, supportsHas, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/surface.css';
 /**
  * Helper function that returns one of the preset surface elevation values.
  */

package/esm/core/Table/Table.d.ts

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

package/esm/core/Table/Table.js

@@ -6,8 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
-import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/table.css';
+import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
 import { getCellStyle, getStickyStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
@@ -380,7 +379,7 @@ export const Table = (props) => {
     }, []);
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: (element) => {
+        React.createElement(Box, { ref: (element) => {
                 ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
@@ -399,14 +398,14 @@ export const Table = (props) => {
                 const headerGroupProps = headerGroup.getHeaderGroupProps({
                     className: 'iui-table-row',
                 });
-                return (React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
+                return (React.createElement(Box, { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: () => {
                         if (headerRef.current && bodyRef.current) {
                             bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
                             updateStickyState();
                         }
                     }, key: headerGroupProps.key },
-                    React.createElement("div", { className: 'iui-table-header' },
-                        React.createElement("div", { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
+                    React.createElement(Box, { className: 'iui-table-header' },
+                        React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
@@ -421,7 +420,7 @@ export const Table = (props) => {
                                     flexWrap: 'unset',
                                 },
                             });
-                            return (React.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                            return (React.createElement(Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
                                     if (el) {
                                         columnRefs.current[column.id] = el;
                                         column.resizeWidth =
@@ -442,24 +441,24 @@ export const Table = (props) => {
                                 } },
                                 column.render('Header'),
                                 (showFilterButton(column) ||
-                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showSortButton(column)) && (React.createElement(Box, { className: 'iui-table-header-actions-container' },
                                     showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
-                                    showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                    showSortButton(column) && (React.createElement(Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
                                         (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                                 isResizable &&
                                     column.isResizerVisible &&
                                     (index !== headerGroup.headers.length - 1 ||
-                                        columnResizeMode === 'expand') && (React.createElement("div", { ...column.getResizerProps(), className: 'iui-table-resizer' },
-                                    React.createElement("div", { className: 'iui-table-resizer-bar' }))),
+                                        columnResizeMode === 'expand') && (React.createElement(Box, { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    React.createElement(Box, { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement(Box, { className: 'iui-table-reorder-bar' })),
                                 column.sticky === 'left' &&
-                                    state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                                    state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right' })),
                                 column.sticky === 'right' &&
-                                    state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
+                                    state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left' }))));
                         })))));
             }),
-            React.createElement("div", { ...getTableBodyProps({
+            React.createElement(Box, { ...getTableBodyProps({
                     className: cx('iui-table-body', {
                         'iui-zebra-striping': styleType === 'zebra-rows',
                     }),
@@ -471,16 +470,16 @@ export const Table = (props) => {
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
-                isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
+                isLoading && data.length === 0 && (React.createElement(Box, { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },
-                    React.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
+                isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-row' },
+                    React.createElement(Box, { className: 'iui-table-cell', style: { justifyContent: 'center' } },
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
-                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
+                !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(Box, { className: 'iui-table-empty' },
                     React.createElement("div", null, emptyTableContent))),
                 !isLoading &&
                     (data.length === 0 || rows.length === 0) &&
-                    areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
+                    areFiltersSet && (React.createElement(Box, { className: 'iui-table-empty' },
                     React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
             paginatorRenderer(paginatorRendererProps))));
 };

package/esm/core/Table/TableCell.js

@@ -8,6 +8,7 @@ import { getCellStyle, getStickyStyle } from './utils.js';
 import { SubRowExpander } from './SubRowExpander.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
+import { Box } from '../utils/index.js';
 export const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
@@ -56,9 +57,9 @@ export const TableCell = (props) => {
         children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
+                tableInstance.state.sticky.isScrolledToRight && (React.createElement(Box, { className: 'iui-table-cell-shadow-right' })),
             cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
+                tableInstance.state.sticky.isScrolledToLeft && (React.createElement(Box, { className: 'iui-table-cell-shadow-left' })))),
     };
     return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
         ...cellRendererProps,

package/esm/core/Table/TablePaginator.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../utils/index.js';
 import type { TablePaginatorRendererProps } from './Table.js';
 export declare type TablePaginatorProps = {

package/esm/core/Table/TablePaginator.js

@@ -4,11 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { IconButton, Button, DropdownButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 import { MenuItem } from '../Menu/index.js';
-import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, } from '../utils/index.js';
+import { getBoundedValue, useGlobals, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, Box, } from '../utils/index.js';
 const defaultLocalization = {
     pageSizeLabel: (size) => `${size} per page`,
     rangeLabel: (startIndex, endIndex, totalRows, isLoading) => isLoading
@@ -52,7 +51,7 @@ export const TablePaginator = (props) => {
         isMounted.current = true;
     }, [focusedIndex]);
     const buttonSize = size != 'default' ? 'small' : undefined;
-    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement("button", { key: index, type: 'button', className: cx('iui-table-paginator-page-button', {
+    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(Box, { as: 'button', key: index, type: 'button', className: cx('iui-table-paginator-page-button', {
             'iui-table-paginator-page-button-small': buttonSize === 'small',
         }), "data-iui-active": index === currentPage, onClick: () => onPageChange(index), "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)), [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     const totalPagesCount = Math.ceil(totalRowsCount / pageSize);
@@ -113,19 +112,19 @@ export const TablePaginator = (props) => {
     const hasNoRows = totalPagesCount === 0;
     const showPagesList = totalPagesCount > 1 || isLoading;
     const showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    const ellipsis = (React.createElement("span", { className: cx('iui-table-paginator-ellipsis', {
+    const ellipsis = (React.createElement(Box, { as: 'span', className: cx('iui-table-paginator-ellipsis', {
             'iui-table-paginator-ellipsis-small': size === 'small',
         }) }, "\u2026"));
     const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;
     }
-    return (React.createElement("div", { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
-        showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
+    return (React.createElement(Box, { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
+        React.createElement(Box, { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
+        showPagesList && (React.createElement(Box, { className: 'iui-center', ref: overflowRef },
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(SvgChevronLeft, null)),
-            React.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
+            React.createElement(Box, { as: 'span', className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
                 if (hasNoRows) {
                     return noRowsContent;
                 }
@@ -146,9 +145,9 @@ export const TablePaginator = (props) => {
             })()),
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
                 React.createElement(SvgChevronRight, null)))),
-        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
+        React.createElement(Box, { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
             localization.rowsPerPageLabel !== null &&
-                paginatorWidth >= 1024 && (React.createElement("span", { className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
+                paginatorWidth >= 1024 && (React.createElement(Box, { as: 'span', className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
             React.createElement(DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(MenuItem, { key: size, isSelected: size === pageSize, onClick: () => {
                         close();
                         onPageSizeChange(size);

package/esm/core/Table/TableRowMemoized.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useIntersection, useMergedRefs, WithCSSTransition, } from '../utils/index.js';
+import { Box, useIntersection, useMergedRefs, WithCSSTransition, } from '../utils/index.js';
 import { TableCell } from './TableCell.js';
 /**
  * Memoization is needed to avoid unnecessary re-renders of all rows when additional data is added when lazy-loading.
@@ -51,7 +51,7 @@ export const TableRow = (props) => {
     };
     const refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...mergedProps, ref: refs, onClick: (event) => {
+        React.createElement(Box, { ...mergedProps, ref: refs, onClick: (event) => {
                 var _a;
                 (_a = mergedProps === null || mergedProps === void 0 ? void 0 : mergedProps.onClick) === null || _a === void 0 ? void 0 : _a.call(mergedProps, event);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event, row);
@@ -59,7 +59,7 @@ export const TableRow = (props) => {
             return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
+            React.createElement(Box, { className: cx('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {
     if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {

package/esm/core/Table/cells/DefaultCell.js

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
+import { Box } from '../../utils/index.js';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -19,9 +20,9 @@ export const DefaultCell = (props) => {
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
-    return (React.createElement("div", { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
-        startIcon && (React.createElement("div", { className: 'iui-table-cell-start-icon' }, startIcon)),
+    return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
+        startIcon && (React.createElement(Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
         children,
-        endIcon && React.createElement("div", { className: 'iui-table-cell-end-icon' }, endIcon)));
+        endIcon && React.createElement(Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
 };
 export default DefaultCell;

package/esm/core/Table/cells/EditableCell.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getRandomValue } from '../../utils/index.js';
+import { Box, getRandomValue } from '../../utils/index.js';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -26,7 +26,7 @@ export const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState(getRandomValue(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement("div", { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
+    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
             var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);

package/esm/core/Table/filters/BaseFilter.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type BaseFilterProps = {
     /**

package/esm/core/Table/filters/BaseFilter.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 /**
  * Filter wrapper that should be used when creating custom filters.
  * @example
@@ -23,7 +22,7 @@ import { useGlobals } from '../../utils/index.js';
 export const BaseFilter = (props) => {
     const { children, className, style, id } = props;
     useGlobals();
-    return (React.createElement("div", { className: cx('iui-table-column-filter', className), style: style, 
+    return (React.createElement(Box, { className: cx('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
         onClick: (e) => {
             e.stopPropagation();

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type DateRangeTranslation = {
     from: string;
     to: string;

package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import { useGlobals } from '../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
-import '@itwin/itwinui-css/css/table.css';
 import DatePickerInput from './DatePickerInput.js';
 const defaultStrings = {
     from: 'From',

package/esm/core/Table/filters/FilterButtonBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterButtonBarTranslation = {
     filter: string;

package/esm/core/Table/filters/FilterButtonBar.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
-import { useGlobals } from '../../utils/index.js';
+import { Box, useGlobals } from '../../utils/index.js';
 import { Button } from '../../Buttons/index.js';
 const defaultStrings = {
     filter: 'Filter',
@@ -20,7 +19,7 @@ export const FilterButtonBar = (props) => {
     const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     useGlobals();
-    return (React.createElement("div", { className: cx('iui-button-bar', className), style: style, id: id },
+    return (React.createElement(Box, { className: cx('iui-button-bar', className), style: style, id: id },
         children,
         React.createElement(Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
         React.createElement(Button, { onClick: clearFilter }, translatedStrings.clear)));

package/esm/core/Table/filters/FilterToggle.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { HeaderGroup } from 'react-table';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;

package/esm/core/Table/filters/FilterToggle.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { useGlobals, Popover, SvgFilterHollow, SvgFilter, } from '../../utils/index.js';
 import { IconButton } from '../../Buttons/index.js';
 /**

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type NumberRangeTranslation = {
     from: string;
     to: string;

package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import { useGlobals } from '../../../utils/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';
 import { BaseFilter } from '../BaseFilter.js';
-import '@itwin/itwinui-css/css/table.css';
 import { LabeledInput } from '../../../LabeledInput/index.js';
 const defaultStrings = {
     from: 'From',

package/esm/core/Table/filters/TextFilter/TextFilter.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export declare type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {

package/esm/core/Table/filters/TextFilter/TextFilter.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import { useGlobals } from '../../../utils/index.js';
 import { Input } from '../../../Input/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';

package/esm/core/Table/hooks/useColumnDragAndDrop.js

@@ -1,4 +1,5 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
+import styles from '../../../styles.js';
 const REORDER_ACTIONS = {
     columnDragStart: 'columnDragStart',
     columnDragEnd: 'columnDragEnd',
@@ -20,13 +21,13 @@ const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, })
     };
     const setOnDragColumnStyle = (event, position) => {
         const columnElement = event.currentTarget;
-        columnElement.classList.remove('iui-table-reorder-column-right');
-        columnElement.classList.remove('iui-table-reorder-column-left');
+        columnElement.classList.remove(styles['iui-table-reorder-column-right']);
+        columnElement.classList.remove(styles['iui-table-reorder-column-left']);
         if (position === 'left') {
-            columnElement.classList.add('iui-table-reorder-column-left');
+            columnElement.classList.add(styles['iui-table-reorder-column-left']);
         }
         else if (position === 'right') {
-            columnElement.classList.add('iui-table-reorder-column-right');
+            columnElement.classList.add(styles['iui-table-reorder-column-right']);
         }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {

package/esm/core/Tabs/Tab.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 declare type TabProps = {
     /**
      * The main label shown in the tab.

package/esm/core/Tabs/Tab.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example

package/esm/core/Tabs/Tabs.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
 export declare type OverflowOptions = {
     /**
      * Whether to allow tabs list to scroll when there is overflow,

package/esm/core/Tabs/Tabs.js

@@ -5,8 +5,8 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, useIsClient, useResizeObserver, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab.js';
+import styles from '../../styles.js';
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -85,7 +85,7 @@ export const Tabs = (props) => {
     const [focusedIndex, setFocusedIndex] = React.useState();
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
-            const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
+            const tab = tablistRef.current.querySelectorAll(`.${styles['iui-tab']}`)[focusedIndex];
             tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
@@ -93,7 +93,7 @@ export const Tabs = (props) => {
     useIsomorphicLayoutEffect(() => {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));
+            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles['iui-tab-description']}`)));
     }, [type]);
     const enableHorizontalScroll = React.useCallback((e) => {
         var _a;
@@ -203,7 +203,7 @@ export const Tabs = (props) => {
             if (ownerDoc !== null &&
                 (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
                 currentActiveIndex !== undefined) {
-                const activeTab = ownerDoc.querySelectorAll('.iui-tab')[currentActiveIndex];
+                const activeTab = ownerDoc.querySelectorAll(`.${styles['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
                 const tabPlacement = isTabHidden(activeTab, isVertical);
                 if (tabPlacement) {