@itwin/itwinui-react 2.11.11 → 2.12.1

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 export declare type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 /**
  * Shows progress on a linear bar
  * @example

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 export declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme, SvgCheckmarkSmall, SvgImportantSmall, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 /**
  * Circular Progress Indicator
  * @example

package/esm/core/Radio/Radio.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/radio.css';
 export declare type RadioProps = {
     /**
      * Label of the radio.

package/esm/core/Radio/Radio.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio.css';
 /**
  * Basic radio input component
  * @example

package/esm/core/RadioTiles/RadioTile.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileProps = {
     /**
      * Icon to be used.

package/esm/core/RadioTiles/RadioTile.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { InputGroupProps } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 import { useTheme } from '../utils/index.js';
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/SearchBox/SearchBox.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { IconProps, PolymorphicForwardRefComponent, PolymorphicComponentProps, InputFlexContainerProps } from '../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/searchbox.css';
 declare type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.

package/esm/core/SearchBox/SearchBox.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { InputFlexContainer, useTheme, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, mergeEventHandlers, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/searchbox.css';
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
     useTheme();

package/esm/core/Select/Select.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PopoverProps, CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 export declare type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.

package/esm/core/Select/Select.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Menu, MenuItem } from '../Menu/index.js';
 import { useTheme, SvgCaretDownSmall, Popover, useId, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 import SelectTag from './SelectTag.js';
 import SelectTagContainer from './SelectTagContainer.js';
 const isMultipleEnabled = (variable, multiple) => {

package/esm/core/Select/SelectTag.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 export declare type SelectTagProps = {
     /**
      * Text inside the tag.

package/esm/core/Select/SelectTag.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 /**
  * Tag for showing selected value in `Select`.
  * @private

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/esm/core/SideNavigation/SideNavigation.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { useTheme, WithCSSTransition, SvgChevronRight, } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { Tooltip } from '../Tooltip/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Left side navigation menu component.
  * @example

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

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { ButtonProps } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,

package/esm/core/SideNavigation/SidenavButton.js

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../utils/index.js';
 import { Button } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavSubmenuProps = {
     /**
      * Content of the submenu.

package/esm/core/SideNavigation/SidenavSubmenu.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } 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 { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavSubmenuHeaderProps = {
     /**
      * Content of the submenu header (e.g. label)

package/esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } 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,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/skip-to-content.css';
 export 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 { useTheme } 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 { CommonProps } from '../utils/index.js';
 import type { TooltipProps } from '../Tooltip/index.js';
 /**

package/esm/core/Slider/Slider.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme, getBoundedValue, useEventListener } 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/Stepper/Stepper.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-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 { useTheme } 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 * as React from 'react';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
 import type { StepperProps } from './Stepper.js';
 export declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
 export declare const WorkflowDiagram: React.ForwardRefExoticComponent<WorkflowDiagramProps & React.RefAttributes<HTMLDivElement>>;

package/esm/core/Stepper/WorkflowDiagram.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/workflow-diagram.css';
 import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
 export const WorkflowDiagram = React.forwardRef((props, ref) => {
     const { steps, ...rest } = props;

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

@@ -1,6 +1,5 @@
 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>;
 declare type SurfaceBodyOwnProps = {

package/esm/core/Surface/Surface.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useSafeContext, useTheme, supportsHas } 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

@@ -7,7 +7,6 @@ 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 { useTheme, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/table.css';
 import { getCellStyle, getStickyStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';

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,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 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';

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,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { useTheme } from '../../utils/index.js';
 /**
  * Filter wrapper that should be used when creating custom filters.

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 { useTheme } 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,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { useTheme } from '../../utils/index.js';
 import { Button } from '../../Buttons/index.js';
 const defaultStrings = {

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 { StylingProps } 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 { useTheme, 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 { useTheme } 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 { useTheme } from '../../../utils/index.js';
 import { Input } from '../../../Input/index.js';
 import { FilterButtonBar } from '../FilterButtonBar.js';

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
 export 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 { useTheme } 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,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, useIsClient, useResizeObserver, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab.js';
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

package/esm/core/Tag/Tag.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 export declare type TagProps = {
     /**
      * Callback function that handles click on close icon.

package/esm/core/Tag/Tag.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme, SvgCloseSmall } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 import { IconButton } from '../Buttons/index.js';
 /**
  * Tag for showing categories, filters etc.

package/esm/core/Tag/TagContainer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 export declare type TagContainerProps = {
     /**
      * Tags inside the container.

package/esm/core/Tag/TagContainer.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.
  * @example

package/esm/core/Textarea/Textarea.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/input.css';
 export declare type TextareaProps = {
     /**
      * Set focus on textarea element.

package/esm/core/Textarea/Textarea.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic textarea component
  * @example

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils/index.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
 export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;
 declare type RootProps = {
     /**
@@ -37,11 +35,30 @@ declare type RootProps = {
      */
     isInheritingTheme?: boolean;
 };
+declare type IncludeCssProps = {
+    /**
+     * If false, styles will not be included at runtime, so .css will need to
+     * be manually imported. By default, styles are included and wrapped in a layer.
+     *
+     * @default { withLayer: true }
+     */
+    includeCss?: boolean | {
+        /**
+         * If true, all styles will be wrapped in a cascade layer named `itwinui`.
+         * This helps avoid specificity battles with application styles.
+         *
+         * @default true
+         */
+        withLayer: boolean;
+    };
+};
 declare type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & ({
     themeOptions?: RootProps['themeOptions'];
+    includeCss?: IncludeCssProps['includeCss'];
     children: Required<React.ReactNode>;
 } | {
     themeOptions?: ThemeOptions;
+    includeCss?: never;
     children?: undefined;
 });
 /**
@@ -76,4 +93,5 @@ export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;
     themeOptions?: ThemeOptions | undefined;
     rootRef: React.RefObject<HTMLElement>;
+    includeCss?: IncludeCssProps['includeCss'];
 } | undefined>;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -5,8 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
+import { useStyles } from '../utils/hooks/useStyles.js';
 /**
  * This component provides global styles and applies theme to the entire tree
  * that it is wrapping around. The `theme` prop is optional and defaults to the
@@ -35,19 +34,20 @@ import '@itwin/itwinui-variables/index.css';
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
     var _a;
-    const { theme: themeProp, children, themeOptions, ...rest } = props;
+    const { theme: themeProp, children, themeOptions, includeCss = { withLayer: true }, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = useMergedRefs(rootRef, ref);
     const hasChildren = React.Children.count(children) > 0;
     const parentContext = React.useContext(ThemeContext);
     const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
-    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef, includeCss }), [theme, themeOptions, includeCss]);
     // if no children, then fallback to this wrapper component which calls useTheme
     if (!hasChildren) {
         return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
     }
     // now that we know there are children, we can render the root and provide the context value
     return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
+        includeCss ? (React.createElement(Styles, { includeCss: includeCss, document: () => { var _a; return (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument; } })) : null,
         React.createElement(ThemeContext.Provider, { value: contextValue }, children)));
 });
 export default ThemeProvider;
@@ -70,3 +70,14 @@ const ThemeLogicWrapper = (props) => {
     useTheme(theme, themeOptions);
     return React.createElement(React.Fragment, null);
 };
+/**
+ * Wrapper around `useStyles` hook.
+ *
+ * Must be the first thing rendered by `ThemeProvider`, to ensure that its
+ * `useStyles` is called before any subsequent `useStyles` calls from child components.
+ */
+const Styles = (props) => {
+    const { includeCss, document } = props;
+    useStyles({ includeCss, document });
+    return null;
+};

package/esm/core/Tile/Tile.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicComponentProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tile.css';
 declare type TileActionOwnProps = {};
 /**
  * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.