@itwin/itwinui-react 2.11.10 → 2.12.0

package/esm/core/Alert/Alert.d.ts

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

package/esm/core/Alert/Alert.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import '@itwin/itwinui-css/css/alert.css';
 import { useTheme, StatusIconMap, SvgCloseSmall } from '../utils/index.js';
 /**
  * A small box to quickly grab user attention and communicate a brief message

package/esm/core/Avatar/Avatar.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 /**
  * @deprecated Since v2, this has been renamed to `AvatarStatus` (Use with `Avatar`)

package/esm/core/Avatar/Avatar.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/avatar.css';
 export const defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.

package/esm/core/AvatarGroup/AvatarGroup.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/avatar.css';
 /**
  * Group Avatars together.
  *

package/esm/core/Backdrop/Backdrop.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/backdrop.css';
 export declare type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.

package/esm/core/Backdrop/Backdrop.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/backdrop.css';
 export const Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
     useTheme();

package/esm/core/Badge/Badge.d.ts

@@ -2,7 +2,6 @@
 import { SoftBackgrounds } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
 import type { AnyString } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 export declare type BadgeProps = {
     /**
      * Background color of the badge.

package/esm/core/Badge/Badge.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme, isSoftBackground, SoftBackgrounds } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 export declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme, useMergedRefs, useOverflow, SvgChevronRight, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme, useOverflow, useMergedRefs } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.

package/esm/core/Buttons/Button/Button.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 declare type ButtonOwnProps = {
     /**
      * Modify size of the button.

package/esm/core/Buttons/Button/Button.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/button.css';
 /**
  * Generic button component
  * @example

package/esm/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/index.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.
@@ -14,7 +13,7 @@ export declare type DropdownButtonProps = {
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: 'default' | 'borderless';
+    styleType?: 'default' | 'borderless' | 'high-visibility';
     /**
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */
@@ -41,7 +40,7 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<{
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: "default" | "borderless" | undefined;
+    styleType?: "default" | "high-visibility" | "borderless" | undefined;
     /**
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { Button } from '../Button/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
 import { SvgCaretDownSmall, SvgCaretUpSmall, useTheme, useMergedRefs, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -38,6 +37,6 @@ export const DropdownButton = React.forwardRef((props, ref) => {
             setIsMenuOpen(false);
             (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
         }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
-        React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
+        React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, ...rest }, children)));
 });
 export default DropdownButton;

package/esm/core/Buttons/IconButton/IconButton.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.

package/esm/core/Buttons/IconButton/IconButton.js

@@ -5,8 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme, VisuallyHidden, Popover } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 /**
  * Icon button
  * @example

package/esm/core/Buttons/SplitButton/SplitButton.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { ButtonProps } from '../Button/index.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/SplitButton/SplitButton.js

@@ -8,7 +8,6 @@ import { Button } from '../Button/index.js';
 import { IconButton } from '../IconButton/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
 import { SvgCaretDownSmall, SvgCaretUpSmall, useTheme, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Split button component with a DropdownMenu.
  *

package/esm/core/Carousel/Carousel.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
 export declare type CarouselProps = {
     /**
      * Index of the currently shown slide.

package/esm/core/Carousel/Carousel.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { getRandomValue, useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/esm/core/Carousel/CarouselDotsList.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, useTheme, } from '../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/checkbox.css';
 export declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.

package/esm/core/Checkbox/Checkbox.js

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/checkbox.css';
 /**
  * Simple input checkbox
  * @example

package/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorBuilderProps = Omit<CommonProps, 'title'>;
 /**
  * `ColorBuilder` consists of two parts:

package/esm/core/ColorPicker/ColorBuilder.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, useTheme, } from '../utils/index.js';
 import { Slider } from '../Slider/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
     const position = getBoundedValue(pointer, rect.top, rect.bottom);

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -8,7 +8,6 @@ import { IconButton } from '../Buttons/index.js';
 import { Input } from '../Input/index.js';
 import { ColorValue, InputContainer, useTheme, SvgSwap, } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
  * It also allows switching between the specified formats using a swap button.

package/esm/core/ColorPicker/ColorPalette.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ColorValue } from '../utils/index.js';
 import type { CommonProps, ColorType } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**
      * Label shown above the palette.

package/esm/core/ColorPicker/ColorPalette.js

@@ -8,7 +8,6 @@ import { ColorValue, getFocusableElements, useMergedRefs, useTheme, } from '../u
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { CommonProps, ColorType } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;

package/esm/core/ColorPicker/ColorPicker.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/color-picker.css';
 import { useTheme, ColorValue, getTabbableElements } from '../utils/index.js';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext.js';

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType } from '../utils/index.js';
 export declare type ColorSwatchProps = {

package/esm/core/ColorPicker/ColorSwatch.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { useTheme, ColorValue } from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 /**

package/esm/core/ComboBox/ComboBox.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { InputProps } from '../Input/index.js';
 import type { SelectOption } from '../Select/index.js';
 import type { PopoverProps, CommonProps, InputContainerProps } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
 declare type ActionType = 'added' | 'removed';
 declare type MultipleOnChangeProps<T> = {
     value: T;

package/esm/core/ComboBox/ComboBox.js

@@ -8,7 +8,6 @@ import { MenuExtraContent } from '../Menu/index.js';
 import SelectTag from '../Select/SelectTag.js';
 import { Text } from '../Typography/index.js';
 import { useTheme, getRandomValue, mergeRefs, useLatestRef, useIsomorphicLayoutEffect, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
 import { ComboBoxDropdown } from './ComboBoxDropdown.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';

package/esm/core/ComboBox/ComboBoxDropdown.d.ts

@@ -3,5 +3,5 @@ import type { PopoverProps } from '../utils/index.js';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "children" | "theme" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
 export {};

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/date-picker.css';
 import type { TimePickerProps } from '../TimePicker/index.js';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.

package/esm/core/DatePicker/DatePicker.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme, SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import { TimePicker } from '../TimePicker/index.js';
 const isSameDay = (a, b) => {

package/esm/core/Dialog/Dialog.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogProps = {
     /**
@@ -29,9 +28,9 @@ export declare type DialogProps = {
  *   </Dialog.Main>
  * </Dialog>
  */
-export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "placement" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
     Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop.js").DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain.js").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain.js").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "placement" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
     TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar.js").DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
         Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle.js").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     };

package/esm/core/Dialog/Dialog.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/dialog.css';
 import { DialogTitleBar } from './DialogTitleBar.js';
 import { DialogContent } from './DialogContent.js';
 import { DialogBackdrop } from './DialogBackdrop.js';
@@ -35,7 +34,7 @@ import { useMergedRefs } from '../utils/index.js';
  * </Dialog>
  */
 export const Dialog = Object.assign(React.forwardRef((props, ref) => {
-    const { children, trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, style, ...rest } = props;
+    const { children, trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, style, ...rest } = props;
     const dialogRootRef = React.useRef(null);
     const refs = useMergedRefs(ref, dialogRootRef);
     return (React.createElement(DialogContext.Provider, { value: {
@@ -51,6 +50,7 @@ export const Dialog = Object.assign(React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             dialogRootRef,
+            placement,
         } },
         React.createElement("div", { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: {
                 ...style,

package/esm/core/Dialog/DialogButtonBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogButtonBarProps = {
     /**
      * Buttons in the dialog bar.

package/esm/core/Dialog/DialogButtonBar.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/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogContent.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogContentProps = {
     /**
      * Main content in the `Dialog`.

package/esm/core/Dialog/DialogContent.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { supportsHas, useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogContext.d.ts

@@ -65,6 +65,10 @@ export declare type DialogContextProps = {
      * Dialog root ref. For internal use.
      */
     dialogRootRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Determines the positioning of Dialog on page.
+     */
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 export declare const DialogContext: React.Context<DialogContextProps | undefined>;
 export declare const useDialogContext: () => DialogContextProps;

package/esm/core/Dialog/DialogMain.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
     /**
@@ -32,5 +31,5 @@ export declare type DialogMainProps = {
  *   </Dialog.ButtonBar>
  * </Dialog.Main>
  */
-export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "placement" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
 export default DialogMain;

package/esm/core/Dialog/DialogMain.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -32,7 +31,7 @@ import useDragAndDrop from '../utils/hooks/useDragAndDrop.js';
  */
 export const DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = useDialogContext();
-    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, ...rest } = props;
+    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     useTheme();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
@@ -114,7 +113,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
             ...style,
             ...propStyle,

package/esm/core/Dialog/DialogTitleBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogTitleBarProps = {
     /**

package/esm/core/Dialog/DialogTitleBar.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useTheme, SvgClose, mergeEventHandlers } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';

package/esm/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogTitleBarTitleProps = {
     /**
      * Dialog title content.

package/esm/core/Dialog/DialogTitleBarTitle.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/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
 export declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.
@@ -44,6 +43,11 @@ export declare type ExpandableBlockProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
+    /**
+     * Disables ExpandableBlock.
+     * @default false
+     */
+    disabled?: boolean;
 } & Omit<CommonProps, 'title'>;
 /**
  * Container that allows content to be hidden behind a brief title and a caption.