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

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

@@ -1,4 +1,3 @@
 export { StatusMessage } from './StatusMessage.js';
-export type { StatusMessageProps } from './StatusMessage.js';
 declare const _default: "./StatusMessage";
 export default _default;

package/cjs/core/Stepper/Stepper.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/stepper.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type StepperLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
 };
@@ -36,5 +35,5 @@ export declare type StepperProps = {
      */
     onStepClick?: (clickedIndex: number) => void;
 };
-export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Stepper: PolymorphicForwardRefComponent<"div", StepperProps>;
 export default Stepper;

package/cjs/core/Stepper/Stepper.js

@@ -30,7 +30,6 @@ exports.Stepper = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/stepper.css");
 const StepperStep_js_1 = require("./StepperStep.js");
 const defaultStepperLocalization = {
     stepsCountLabel: (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}:`,
@@ -38,11 +37,10 @@ const defaultStepperLocalization = {
 exports.Stepper = React.forwardRef((props, ref) => {
     const { currentStep, steps, type = 'default', localization = defaultStepperLocalization, onStepClick, ...rest } = props;
     const boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: 'iui-stepper', ref: ref, ...rest },
+    return (React.createElement(index_js_1.Box, { className: 'iui-stepper', ref: ref, ...rest },
         React.createElement("ol", null, steps.map((s, index) => (React.createElement(StepperStep_js_1.StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })))),
-        type === 'long' && (React.createElement("div", { className: 'iui-stepper-steps-label' },
-            React.createElement("span", { className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
+        type === 'long' && (React.createElement(index_js_1.Box, { className: 'iui-stepper-steps-label' },
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
             steps[boundedCurrentStep].name))));
 });
 exports.default = exports.Stepper;

package/cjs/core/Stepper/StepperStep.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { StylingProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type StepperStepProps = {
     /**
      * The title/label of the step.
@@ -29,5 +28,5 @@ export declare type StepperStepProps = {
      * A tooltip giving detailed description to this step.
      */
     description?: string;
-} & StylingProps;
-export declare const StepperStep: (props: StepperStepProps) => JSX.Element;
+};
+export declare const StepperStep: PolymorphicForwardRefComponent<"li", StepperStepProps>;

package/cjs/core/Stepper/StepperStep.js

@@ -34,7 +34,8 @@ exports.StepperStep = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../Tooltip/index.js");
-const StepperStep = (props) => {
+const index_js_2 = require("../utils/index.js");
+exports.StepperStep = React.forwardRef((props, forwardedRef) => {
     const { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, ...rest } = props;
     const isPast = currentStepNumber > index;
     const isActive = currentStepNumber === index;
@@ -55,16 +56,15 @@ const StepperStep = (props) => {
             onCompletedClick();
         }
     };
-    const stepShape = (React.createElement("li", { className: (0, classnames_1.default)('iui-stepper-step', {
+    const stepShape = (React.createElement(index_js_2.Box, { as: 'li', className: (0, classnames_1.default)('iui-stepper-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
         }, className), style: {
             width: type === 'default' ? `${100 / totalSteps}%` : undefined,
             ...style,
-        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ...rest },
-        React.createElement("div", { className: 'iui-stepper-track-content' },
-            React.createElement("span", { className: 'iui-stepper-circle' }, index + 1)),
-        type === 'default' && (React.createElement("span", { className: 'iui-stepper-step-name' }, title))));
+        }, onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined, ref: forwardedRef, ...rest },
+        React.createElement(index_js_2.Box, { className: 'iui-stepper-track-content' },
+            React.createElement(index_js_2.Box, { as: 'span', className: 'iui-stepper-circle' }, index + 1)),
+        type === 'default' && (React.createElement(index_js_2.Box, { as: 'span', className: 'iui-stepper-step-name' }, title))));
     return description ? (React.createElement(index_js_1.Tooltip, { content: description }, stepShape)) : (stepShape);
-};
-exports.StepperStep = StepperStep;
+});

package/cjs/core/Stepper/Wizard.js

@@ -46,7 +46,9 @@ const WorkflowDiagram_js_1 = require("./WorkflowDiagram.js");
  *  type='long'
  *  />
  */
-exports.Wizard = React.forwardRef((props, ref) => {
+exports.Wizard = React.forwardRef(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(props, ref) => {
     const { currentStep, steps, type = 'default', localization, onStepClick, ...rest } = props;
     return type !== 'workflow' ? (React.createElement(Stepper_js_1.Stepper, { type: type, currentStep: currentStep, steps: steps, localization: localization, onStepClick: onStepClick, ref: ref, ...rest })) : (React.createElement(WorkflowDiagram_js_1.WorkflowDiagram, { steps: steps, ref: ref, ...rest }));
 });

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

@@ -1,6 +1,5 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { StepperProps } from './Stepper.js';
-export declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
-export declare const WorkflowDiagram: React.ForwardRefExoticComponent<WorkflowDiagramProps & React.RefAttributes<HTMLDivElement>>;
+declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
+export declare const WorkflowDiagram: PolymorphicForwardRefComponent<"ol", WorkflowDiagramProps>;
 export default WorkflowDiagram;

package/cjs/core/Stepper/WorkflowDiagram.js

@@ -30,12 +30,12 @@ exports.WorkflowDiagram = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/workflow-diagram.css");
 const WorkflowDiagramStep_js_1 = require("./WorkflowDiagramStep.js");
-exports.WorkflowDiagram = React.forwardRef((props, ref) => {
+exports.WorkflowDiagram = React.forwardRef(
+// TODO: Remove this ref cast. ref and rest props should be applied on the same element
+(props, ref) => {
     const { steps, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { ref: ref },
-        React.createElement("ol", { className: 'iui-workflow-diagram', ...rest }, steps.map((s, index) => (React.createElement(WorkflowDiagramStep_js_1.WorkflowDiagramStep, { key: index, title: s.name, description: s.description }))))));
+    return (React.createElement(index_js_1.Box, { ref: ref },
+        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-workflow-diagram', ...rest }, steps.map((s, index) => (React.createElement(WorkflowDiagramStep_js_1.WorkflowDiagramStep, { key: index, title: s.name, description: s.description }))))));
 });
 exports.default = exports.WorkflowDiagram;

package/cjs/core/Stepper/WorkflowDiagramStep.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { StylingProps } from '../utils/index.js';
+import { type CommonProps } from '../utils/index.js';
 import type { StepperStepProps } from './StepperStep.js';
-export declare type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & StylingProps;
+export declare type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & Omit<CommonProps, 'title'>;
 export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => JSX.Element;

package/cjs/core/Stepper/WorkflowDiagramStep.js

@@ -34,10 +34,11 @@ exports.WorkflowDiagramStep = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../Tooltip/index.js");
+const index_js_2 = require("../utils/index.js");
 const WorkflowDiagramStep = (props) => {
     const { title, description, className, style, ...rest } = props;
-    const stepShape = (React.createElement("li", { className: (0, classnames_1.default)('iui-workflow-diagram-step', className), style: style, ...rest },
-        React.createElement("span", { className: 'iui-workflow-diagram-content' }, title)));
+    const stepShape = (React.createElement(index_js_2.Box, { as: 'li', className: (0, classnames_1.default)('iui-workflow-diagram-step', className), style: style, ...rest },
+        React.createElement(index_js_2.Box, { as: 'span', className: 'iui-workflow-diagram-content' }, title)));
     return description ? (React.createElement(index_js_1.Tooltip, { content: description }, stepShape)) : (stepShape);
 };
 exports.WorkflowDiagramStep = WorkflowDiagramStep;

package/cjs/core/Stepper/index.d.ts

@@ -1,8 +1,7 @@
 export { Wizard } from './Wizard.js';
 export { Stepper } from './Stepper.js';
 export { WorkflowDiagram } from './WorkflowDiagram.js';
-export type { WizardProps, WizardType, WizardLocalization } from './Wizard.js';
-export type { StepperProps, StepProperties, StepperLocalization, } from './Stepper.js';
-export type { WorkflowDiagramProps } from './WorkflowDiagram.js';
+export type { WizardType, WizardLocalization } from './Wizard.js';
+export type { StepProperties, StepperLocalization } from './Stepper.js';
 declare const _default: "./Wizard";
 export default _default;

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import type { CommonProps, PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/surface.css';
-declare type SurfaceHeaderOwnProps = {};
-export declare type SurfaceHeaderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceHeaderOwnProps>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type SurfaceBodyOwnProps = {
     /**
      * Gives padding to the surface body
      */
     isPadded?: boolean;
 };
-export declare type SurfaceBodyProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, SurfaceBodyOwnProps>;
-export declare type SurfaceProps = {
+declare type SurfaceProps = {
     /**
      * Sets the elevation of the surface
      */
@@ -19,7 +15,7 @@ export declare type SurfaceProps = {
      * Content in the surface.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * The Surface container allows content to appear elevated through the use of a drop shadow
  * @example
@@ -30,20 +26,11 @@ export declare type SurfaceProps = {
  *   <Surface.Body isPadded={true}>Surface Body Content</Surface.Body>
  * </Surface>
  */
-export declare const Surface: React.ForwardRefExoticComponent<{
-    /**
-     * Sets the elevation of the surface
-     */
-    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
-    /**
-     * Content in the surface.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Surface: PolymorphicForwardRefComponent<"div", SurfaceProps> & {
     /**
      * 	Surface header subcomponent
      */
-    Header: PolymorphicForwardRefComponent<"div", SurfaceHeaderOwnProps>;
+    Header: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * 	Surface body subcomponent. Additional padding can be added to the body through the 'isPadded' prop
      */

package/cjs/core/Surface/Surface.js

@@ -34,7 +34,6 @@ exports.Surface = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/surface.css");
 /**
  * Helper function that returns one of the preset surface elevation values.
  */
@@ -56,25 +55,27 @@ const getSurfaceElevationValue = (elevation) => {
             return '';
     }
 };
+// ----------------------------------------------------------------------------
+// Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', children, className, ...rest } = props;
+    const { children, className, ...rest } = props;
     const { setHasLayout } = (0, index_js_1.useSafeContext)(SurfaceContext);
     React.useEffect(() => {
         if (!(0, index_js_1.supportsHas)()) {
             setHasLayout(true);
         }
     }, [setHasLayout]);
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-surface-header', className), ref: ref, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-surface-header', className), ref: ref, ...rest }, children));
 });
 const SurfaceBody = React.forwardRef((props, ref) => {
-    const { as: Element = 'div', children, className, isPadded, ...rest } = props;
+    const { children, className, isPadded, ...rest } = props;
     const { setHasLayout } = (0, index_js_1.useSafeContext)(SurfaceContext);
     React.useEffect(() => {
         if (!(0, index_js_1.supportsHas)()) {
             setHasLayout(true);
         }
     }, [setHasLayout]);
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-surface-body', className), ref: ref, "data-iui-padded": isPadded ? 'true' : undefined, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-surface-body', className), ref: ref, "data-iui-padded": isPadded ? 'true' : undefined, ...rest }, children));
 });
 /**
  * The Surface container allows content to appear elevated through the use of a drop shadow
@@ -88,13 +89,12 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 exports.Surface = Object.assign(React.forwardRef((props, ref) => {
     const { elevation, className, style, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
         '--iui-surface-elevation': getSurfaceElevationValue(elevation),
         ...style,
     };
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-surface', className), style: _style, ref: ref, "data-iui-layout": hasLayout ? 'true' : undefined, ...rest },
         React.createElement(SurfaceContext.Provider, { value: { setHasLayout } }, children)));
 }), {
     /**

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

@@ -1,4 +1,3 @@
 export { Surface } from './Surface.js';
-export type { SurfaceProps, SurfaceHeaderProps, SurfaceBodyProps, } from './Surface.js';
 declare const _default: "./Surface";
 export default _default;

package/cjs/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/cjs/core/Table/Table.js

@@ -36,7 +36,6 @@ const classnames_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");
-require("@itwin/itwinui-css/css/table.css");
 const utils_js_1 = require("./utils.js");
 const TableRowMemoized_js_1 = require("./TableRowMemoized.js");
 const index_js_3 = require("./filters/index.js");
@@ -105,7 +104,7 @@ const flattenColumns = (columns) => {
  */
 const Table = (props) => {
     const { data, columns, isLoading = false, emptyTableContent, className, style, id, isSelectable = false, onSelect, onRowClick, selectionMode = 'multi', isSortable = false, onSort, stateReducer, onBottomReached, onRowInViewport, intersectionMargin = 300, subComponent, onExpand, onFilter, globalFilterValue, emptyFilteredTableContent, filterTypes: filterFunctions, expanderCell, isRowDisabled, rowProps, density = 'default', selectSubRows = true, getSubRows, selectRowOnClick = true, paginatorRenderer, pageSize = 25, isResizable = false, columnResizeMode = 'fit', styleType = 'default', enableVirtualization = false, enableColumnReordering = false, ...rest } = props;
-    (0, index_js_2.useTheme)();
+    (0, index_js_2.useGlobals)();
     const ownerDocument = React.useRef();
     const defaultColumn = React.useMemo(() => ({
         maxWidth: 0,
@@ -409,7 +408,7 @@ const Table = (props) => {
     }, []);
     const isHeaderDirectClick = React.useRef(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: (element) => {
+        React.createElement(index_js_2.Box, { ref: (element) => {
                 ownerDocument.current = element === null || element === void 0 ? void 0 : element.ownerDocument;
                 if (isResizable) {
                     resizeRef(element);
@@ -428,14 +427,14 @@ 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(index_js_2.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(index_js_2.Box, { className: 'iui-table-header' },
+                        React.createElement(index_js_2.Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
@@ -450,7 +449,7 @@ const Table = (props) => {
                                     flexWrap: 'unset',
                                 },
                             });
-                            return (React.createElement("div", { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
+                            return (React.createElement(index_js_2.Box, { ...columnProps, ...column.getDragAndDropProps(), key: columnProps.key, title: undefined, ref: (el) => {
                                     if (el) {
                                         columnRefs.current[column.id] = el;
                                         column.resizeWidth =
@@ -471,24 +470,24 @@ const Table = (props) => {
                                 } },
                                 column.render('Header'),
                                 (showFilterButton(column) ||
-                                    showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                    showSortButton(column)) && (React.createElement(index_js_2.Box, { className: 'iui-table-header-actions-container' },
                                     showFilterButton(column) && (React.createElement(index_js_3.FilterToggle, { column: column })),
-                                    showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                    showSortButton(column) && (React.createElement(index_js_2.Box, { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
                                         (!column.isSorted && column.sortDescFirst) ? (React.createElement(index_js_2.SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(index_js_2.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(index_js_2.Box, { ...column.getResizerProps(), className: 'iui-table-resizer' },
+                                    React.createElement(index_js_2.Box, { className: 'iui-table-resizer-bar' }))),
                                 enableColumnReordering &&
-                                    !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
+                                    !column.disableReordering && (React.createElement(index_js_2.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(index_js_2.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(index_js_2.Box, { className: 'iui-table-cell-shadow-left' }))));
                         })))));
             }),
-            React.createElement("div", { ...getTableBodyProps({
+            React.createElement(index_js_2.Box, { ...getTableBodyProps({
                     className: (0, classnames_1.default)('iui-table-body', {
                         'iui-zebra-striping': styleType === 'zebra-rows',
                     }),
@@ -500,16 +499,16 @@ const Table = (props) => {
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll_js_1.default, { 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(index_js_2.Box, { className: 'iui-table-empty' },
                     React.createElement(index_js_1.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(index_js_2.Box, { className: 'iui-table-row' },
+                    React.createElement(index_js_2.Box, { className: 'iui-table-cell', style: { justifyContent: 'center' } },
                         React.createElement(index_js_1.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(index_js_2.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(index_js_2.Box, { className: 'iui-table-empty' },
                     React.createElement("div", null, emptyFilteredTableContent)))), paginatorRenderer === null || paginatorRenderer === void 0 ? void 0 :
             paginatorRenderer(paginatorRendererProps))));
 };

package/cjs/core/Table/TableCell.js

@@ -37,6 +37,7 @@ const utils_js_1 = require("./utils.js");
 const SubRowExpander_js_1 = require("./SubRowExpander.js");
 const index_js_1 = require("./columns/index.js");
 const index_js_2 = require("./cells/index.js");
+const index_js_3 = require("../utils/index.js");
 const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
@@ -85,9 +86,9 @@ 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(index_js_3.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(index_js_3.Box, { className: 'iui-table-cell-shadow-left' })))),
     };
     return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer({
         ...cellRendererProps,

package/cjs/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/cjs/core/Table/TablePaginator.js

@@ -33,7 +33,6 @@ exports.TablePaginator = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../ProgressIndicators/index.js");
 const index_js_3 = require("../Menu/index.js");
@@ -60,7 +59,7 @@ const defaultLocalization = {
  */
 const TablePaginator = (props) => {
     const { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
-    (0, index_js_4.useTheme)();
+    (0, index_js_4.useGlobals)();
     const localization = React.useMemo(() => ({ ...defaultLocalization, ...userLocalization }), [userLocalization]);
     const pageListRef = React.useRef(null);
     const [focusedIndex, setFocusedIndex] = React.useState(currentPage);
@@ -81,7 +80,7 @@ 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: (0, classnames_1.default)('iui-table-paginator-page-button', {
+    const pageButton = React.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1) => (React.createElement(index_js_4.Box, { as: 'button', key: index, type: 'button', className: (0, classnames_1.default)('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);
@@ -142,19 +141,19 @@ const TablePaginator = (props) => {
     const hasNoRows = totalPagesCount === 0;
     const showPagesList = totalPagesCount > 1 || isLoading;
     const showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-    const ellipsis = (React.createElement("span", { className: (0, classnames_1.default)('iui-table-paginator-ellipsis', {
+    const ellipsis = (React.createElement(index_js_4.Box, { as: 'span', className: (0, classnames_1.default)('iui-table-paginator-ellipsis', {
             'iui-table-paginator-ellipsis-small': size === 'small',
         }) }, "\u2026"));
     const noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(index_js_2.ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(index_js_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;
     }
-    return (React.createElement("div", { className: (0, classnames_1.default)('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(index_js_4.Box, { className: (0, classnames_1.default)('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
+        React.createElement(index_js_4.Box, { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
+        showPagesList && (React.createElement(index_js_4.Box, { className: 'iui-center', ref: overflowRef },
             React.createElement(index_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(index_js_4.SvgChevronLeft, null)),
-            React.createElement("span", { className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
+            React.createElement(index_js_4.Box, { as: 'span', className: 'iui-table-paginator-pages-group', onKeyDown: onKeyDown, ref: pageListRef }, (() => {
                 if (hasNoRows) {
                     return noRowsContent;
                 }
@@ -175,9 +174,9 @@ const TablePaginator = (props) => {
             })()),
             React.createElement(index_js_1.IconButton, { styleType: 'borderless', disabled: currentPage === totalPagesCount - 1 || hasNoRows, onClick: () => onPageChange(currentPage + 1), size: buttonSize, "aria-label": localization.nextPage },
                 React.createElement(index_js_4.SvgChevronRight, null)))),
-        React.createElement("div", { className: 'iui-right' }, showPageSizeList && (React.createElement(React.Fragment, null,
+        React.createElement(index_js_4.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(index_js_4.Box, { as: 'span', className: 'iui-table-paginator-page-size-label' }, localization.rowsPerPageLabel)),
             React.createElement(index_js_1.DropdownButton, { styleType: 'borderless', size: buttonSize, menuItems: (close) => pageSizeList.map((size) => (React.createElement(index_js_3.MenuItem, { key: size, isSelected: size === pageSize, onClick: () => {
                         close();
                         onPageSizeChange(size);

package/cjs/core/Table/TableRowMemoized.js

@@ -80,7 +80,7 @@ const TableRow = (props) => {
     };
     const refs = (0, index_js_1.useMergedRefs)(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...mergedProps, ref: refs, onClick: (event) => {
+        React.createElement(index_js_1.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);
@@ -88,7 +88,7 @@ const TableRow = (props) => {
             return (React.createElement(TableCell_js_1.TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell, density: density }));
         })),
         subComponent && (React.createElement(index_js_1.WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-row', 'iui-table-expanded-content'), "aria-disabled": isDisabled }, subComponent(row))))));
 };
 exports.TableRow = TableRow;
 const hasAnySelectedSubRow = (row, selectedRowIds) => {

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

@@ -33,6 +33,7 @@ exports.DefaultCell = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const index_js_1 = require("../../utils/index.js");
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -48,10 +49,10 @@ 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: (0, classnames_1.default)(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(index_js_1.Box, { ...cellElementProps, ...rest, className: (0, classnames_1.default)(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(index_js_1.Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
         children,
-        endIcon && React.createElement("div", { className: 'iui-table-cell-end-icon' }, endIcon)));
+        endIcon && React.createElement(index_js_1.Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
 };
 exports.DefaultCell = DefaultCell;
 exports.default = exports.DefaultCell;

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

@@ -52,7 +52,7 @@ const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState((0, index_js_1.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(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
             var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);

package/cjs/core/Table/columns/actionColumn.js

@@ -104,7 +104,7 @@ const ActionColumn = ({ columnManager = false, } = {}) => {
                         (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
                     });
                 };
-                return (React.createElement(index_js_5.MenuItem, { key: column.id, icon: React.createElement(index_js_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
+                return (React.createElement(index_js_5.MenuItem, { key: column.id, startIcon: React.createElement(index_js_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: (e) => e.stopPropagation(), onChange: onClick, "aria-labelledby": `iui-column-${column.id}` }), onClick: onClick, disabled: column.disableToggleVisibility },
                     React.createElement("div", { id: `iui-column-${column.id}` }, column.render('Header'))));
             });
             const dropdownMenuProps = typeof columnManager !== 'boolean'

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

@@ -8,7 +8,7 @@ export declare const EXPANDER_CELL_ID = "iui-table-expander";
  * const subComponent = useCallback(
  *   (row: Row) => (
  *     <div style={{ padding: 16 }}>
- *       <Leading>Extra information</Leading>
+ *       <Text variant='leading'>Extra information</Text>
  *       <pre>
  *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
  *       </pre>

package/cjs/core/Table/columns/expanderColumn.js

@@ -40,7 +40,7 @@ exports.EXPANDER_CELL_ID = 'iui-table-expander';
  * const subComponent = useCallback(
  *   (row: Row) => (
  *     <div style={{ padding: 16 }}>
- *       <Leading>Extra information</Leading>
+ *       <Text variant='leading'>Extra information</Text>
  *       <pre>
  *         <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
  *       </pre>

package/cjs/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 = {
     /**