@itwin/itwinui-react 1.48.0 → 1.48.2-dev.0

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

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

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

@@ -17,7 +17,6 @@ import React from 'react';
 import { useTheme } from '../../../utils';
 import { FilterButtonBar, } from '../FilterButtonBar';
 import { BaseFilter } from '../BaseFilter';
-import '@itwin/itwinui-css/css/table.css';
 import DatePickerInput from './DatePickerInput';
 var defaultStrings = {
     from: 'From',

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

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

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

@@ -15,7 +15,6 @@ var __assign = (this && this.__assign) || function () {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { useTheme } from '../../utils';
 import { Button } from '../../Buttons';
 var defaultStrings = {

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

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

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

@@ -28,7 +28,6 @@ import SvgFilterHollow from '@itwin/itwinui-icons-react/cjs/icons/FilterHollow';
 import SvgFilter from '@itwin/itwinui-icons-react/cjs/icons/Filter';
 import React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/table.css';
 import { useTheme, Popover } from '../../utils';
 import { IconButton } from '../../Buttons';
 /**

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

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

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

@@ -17,7 +17,6 @@ import React from 'react';
 import { useTheme } from '../../../utils';
 import { FilterButtonBar, } from '../FilterButtonBar';
 import { BaseFilter } from '../BaseFilter';
-import '@itwin/itwinui-css/css/table.css';
 import { LabeledInput } from '../../../LabeledInput';
 var 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 { FilterButtonBarTranslation } from '../FilterButtonBar';
 import { TableFilterProps } from '../types';
 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 React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import { useTheme } from '../../../utils';
 import { Input } from '../../../Input';
 import { FilterButtonBar, } from '../FilterButtonBar';

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

@@ -1,5 +1,4 @@
 import 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

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-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 React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
 export declare type TabsProps = {
     /**
      * Elements shown for each tab.

package/esm/core/Tabs/Tabs.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme, useMergedRefs, getBoundedValue, getWindow, useContainerWidth, } from '../utils';
-import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
  * 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 React from 'react';
 import { CommonProps } from '../utils';
-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

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

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

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

package/esm/core/Tag/TagContainer.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.
  * @example

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

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

package/esm/core/Textarea/Textarea.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Basic textarea component
  * @example

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/tile.css';
 export declare type TileProps = {
     /**
      * Name or title of the tile.

package/esm/core/Tile/Tile.js

@@ -30,7 +30,6 @@ import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
 import SvgMore from '@itwin/itwinui-icons-react/cjs/icons/More';
 import SvgNew from '@itwin/itwinui-icons-react/cjs/icons/New';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu';
 import { IconButton } from '../Buttons';
 /**

package/esm/core/TimePicker/TimePicker.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { StylingProps } from '../utils';
-import '@itwin/itwinui-css/css/time-picker.css';
 export declare type MeridiemType = 'AM' | 'PM';
 export declare type TimePickerProps = {
     /**

package/esm/core/TimePicker/TimePicker.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/time-picker.css';
 var isSameHour = function (date1, date2, meridiem) {
     var adjustedHours = meridiem
         ? formatHourFrom12(date1.getHours(), meridiem)

package/esm/core/Toast/Toast.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/toast-notification.css';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {
     /**

package/esm/core/Toast/Toast.js

@@ -29,7 +29,6 @@ import { Transition } from 'react-transition-group';
 import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
 import { useTheme, getWindow, StatusIconMap } from '../utils';
-import '@itwin/itwinui-css/css/toast-notification.css';
 import { IconButton } from '../Buttons';
 /**
  * Generic Toast Notification Component

package/esm/core/Toast/ToastWrapper.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/toast-notification.css';
 import React from 'react';
 import { ToastProps } from './Toast';
 import { ToasterSettings } from './Toaster';

package/esm/core/Toast/ToastWrapper.js

@@ -13,7 +13,6 @@ var __assign = (this && this.__assign) || function () {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import '@itwin/itwinui-css/css/toast-notification.css';
 import React from 'react';
 import cx from 'classnames';
 import Toast from './Toast';

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 export declare type ToggleSwitchProps = {
     /**
      * Label for the toggle switch.

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 /**
  * A switch for turning on and off.
  * @example

package/esm/core/Tooltip/Tooltip.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps, PopoverProps } from '../utils';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type TooltipProps = {
     /**
      * Content of the tooltip.

package/esm/core/Tooltip/Tooltip.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, Popover } from '../utils';
-import '@itwin/itwinui-css/css/tooltip.css';
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

package/esm/core/Tree/Tree.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/tree.css';
 export declare type NodeData<T> = {
     /**
      * Array of the child nodes contained in the node.

package/esm/core/Tree/Tree.js

@@ -26,7 +26,6 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { useTheme, getFocusableElements, useVirtualization, mergeRefs, } from '../utils';
-import '@itwin/itwinui-css/css/tree.css';
 import cx from 'classnames';
 import { TreeContext } from './TreeContext';
 /**

package/esm/core/Tree/TreeNode.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/tree.css';
 export declare type TreeNodeProps = {
     /**
      * Unique id of the node.

package/esm/core/Tree/TreeNode.js

@@ -26,7 +26,6 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { getFocusableElements, getWindow, useTheme, } from '../utils';
-import '@itwin/itwinui-css/css/tree.css';
 import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander';
 import { useTreeContext } from './TreeContext';

package/esm/core/Tree/TreeNodeExpander.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { IconButtonProps } from '../Buttons/IconButton';
-import '@itwin/itwinui-css/css/tree.css';
 export declare type TreeNodeExpanderProps = {
     isExpanded?: boolean;
 } & IconButtonProps;

package/esm/core/Tree/TreeNodeExpander.js

@@ -28,7 +28,6 @@ import React from 'react';
 import cx from 'classnames';
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import { IconButton } from '../Buttons/IconButton';
-import '@itwin/itwinui-css/css/tree.css';
 export var TreeNodeExpander = function (props) {
     var isExpanded = props.isExpanded, rest = __rest(props, ["isExpanded"]);
     return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand' }, rest),

package/esm/core/Typography/Anchor/Anchor.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/anchor.css';
 export declare const Anchor: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;

package/esm/core/Typography/Anchor/Anchor.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/anchor.css';
 export var Anchor = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     useTheme();

package/esm/core/Typography/Blockquote/Blockquote.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/blockquote.css';
 export declare type BlockquoteProps = {
     /**
      * Optional footer for any attribution/source.

package/esm/core/Typography/Blockquote/Blockquote.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/blockquote.css';
 /**
  * Basic blockquote component
  * @example

package/esm/core/Typography/Body/Body.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type BodyProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Body/Body.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * Body text, renders a paragraph element
  * @example

package/esm/core/Typography/Code/Code.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../../utils';
-import '@itwin/itwinui-css/css/code.css';
 export declare type CodeProps = {
     /**
      * A piece of inline code.

package/esm/core/Typography/Code/Code.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/code.css';
 /**
  * Inline code element.
  * @example

package/esm/core/Typography/Headline/Headline.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type HeadlineProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Headline/Headline.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * The biggest title on the page, renders a h1 element
  * @example

package/esm/core/Typography/Kbd/Kbd.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CommonProps } from '../../utils';
-import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/esm/core/Typography/Kbd/Kbd.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/esm/core/Typography/Leading/Leading.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type LeadingProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Leading/Leading.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * The third biggest title on the page, renders a h3 element
  * @example

package/esm/core/Typography/Small/Small.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type SmallProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Small/Small.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * Small text, renders a paragraph element
  * @example

package/esm/core/Typography/Subheading/Subheading.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type SubheadingProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Subheading/Subheading.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * The third biggest title on the page, renders a h3 element
  * @example

package/esm/core/Typography/Text/Text.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 declare type TextOwnProps = {
     /**
      * Which typography variant/size should be used for the styling?

package/esm/core/Typography/Text/Text.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme, } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
  * @example

package/esm/core/Typography/Title/Title.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type TitleProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Title/Title.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * The second biggest title on the page, renders a h2 element
  * @example

package/esm/core/UserIcon/UserIcon.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
 export declare type UserIconStatus = 'online' | 'busy' | 'away' | 'offline';
 export declare type StatusTitles = {
     [key in Exclude<UserIconStatus, ''>]: string;

package/esm/core/UserIcon/UserIcon.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
 export var defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',

package/esm/core/UserIconGroup/UserIconGroup.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
 export declare type UserIconGroupProps = {
     /**
      * Max number of icons unstacked.

package/esm/core/UserIconGroup/UserIconGroup.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/user-icon.css';
 /**
  * Group User Icons together.
  *

package/esm/core/Wizard/Wizard.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/wizard.css';
 export declare type WizardLocalization = {
     stepsCountLabel: (currentStep: number, totalSteps: number) => string;
 };

package/esm/core/Wizard/Wizard.js

@@ -27,7 +27,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/wizard.css';
 import { Step } from './Step';
 var defaultWizardLocalization = {
     stepsCountLabel: function (currentStep, totalSteps) {

package/esm/core/utils/components/Popover.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/popover.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.

package/esm/core/utils/components/Popover.js

@@ -26,7 +26,6 @@ import React from 'react';
 import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import { useMergedRefs } from '../hooks/useMergedRefs';
-import '@itwin/itwinui-css/css/popover.css';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).

package/esm/core/utils/functions/dom.js

@@ -16,6 +16,7 @@ export var getContainer = function (containerId, ownerDocument) {
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
+        container.innerHTML = "<style>:where(.iui-dialog-wrapper) { z-index: 999; }</style>"; // TODO: move to css
         ownerDocument.body.appendChild(container);
     }
     return container;

package/esm/core/utils/hooks/useTheme.d.ts

@@ -1,4 +1,4 @@
-import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-css/css/all.css';
 export declare type ThemeOptions = {
     /**
      * Document to which the theme will be applied.

package/esm/core/utils/hooks/useTheme.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-css/css/all.css';
 import { getDocument, getWindow } from '../functions/dom';
 import { useMediaQuery } from './useMediaQuery';
 /**