@itwin/itwinui-react 1.48.1 → 2.0.0-dev.1

package/esm/core/Badge/Badge.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme, getWindow, isSoftBackground, SoftBackgrounds, } from '../utils';
+import { useTheme, isSoftBackground, SoftBackgrounds, } from '../utils';
 import '@itwin/itwinui-css/css/badge.css';
 /**
  * Helper function that returns one of the preset badge color values.
@@ -56,12 +56,10 @@ var getBadgeColorValue = function (color) {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 export var Badge = function (props) {
-    var _a, _b, _c;
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     useTheme();
-    var _style = backgroundColor &&
-        ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-badge-background-color: ".concat(backgroundColor)))
-        ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
+    var _style = backgroundColor
+        ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({}, style);
     return (React.createElement("span", __assign({ className: cx('iui-badge', className), style: _style }, rest), children));
 };
 export default Badge;

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme, useMergedRefs, useOverflow } from '../utils';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { useTheme, useMergedRefs, useOverflow, SvgChevronRight, } from '../utils';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track

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

@@ -54,5 +54,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "orientation" | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/esm/core/Buttons/Button/Button.js

@@ -38,20 +38,11 @@ import '@itwin/itwinui-css/css/button.css';
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export var Button = React.forwardRef(function (props, ref) {
-    var _a;
-    var children = props.children, className = props.className, size = props.size, style = props.style, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, _c = props.type, type = _c === void 0 ? 'button' : _c, startIcon = props.startIcon, endIcon = props.endIcon, _d = props.as, Element = _d === void 0 ? 'button' : _d, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon", "as"]);
+    var children = props.children, className = props.className, size = props.size, style = props.style, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, _b = props.type, type = _b === void 0 ? 'button' : _b, startIcon = props.startIcon, endIcon = props.endIcon, _c = props.as, Element = _c === void 0 ? 'button' : _c, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon", "as"]);
     useTheme();
-    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', "iui-".concat(styleType), (_a = {},
-            _a["iui-".concat(size)] = !!size,
-            _a), className), style: style, type: type }, rest),
-        startIcon &&
-            React.cloneElement(startIcon, {
-                className: cx('iui-button-icon', startIcon.props.className),
-            }),
-        children && React.createElement("span", { className: 'iui-button-label' }, children),
-        endIcon &&
-            React.cloneElement(endIcon, {
-                className: cx('iui-button-icon', endIcon.props.className),
-            })));
+    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type }, rest),
+        startIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
+        children && React.createElement("span", null, children),
+        endIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, endIcon))));
 });
 export default Button;

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

@@ -28,9 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { Button } from '../Button';
 import { DropdownMenu } from '../../DropdownMenu';
-import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
-import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
-import { useTheme, useMergedRefs } from '../../utils';
+import { SvgCaretDownSmall, SvgCaretUpSmall, useTheme, useMergedRefs, } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Button that opens a DropdownMenu.
@@ -54,6 +52,6 @@ export var DropdownButton = React.forwardRef(function (props, ref) {
         }
     }, [children, size, styleType]);
     return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        React.createElement(Button, __assign({ className: cx('iui-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, __assign({ 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)));
 });
 export default DropdownButton;

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

@@ -35,15 +35,9 @@ import '@itwin/itwinui-css/css/button.css';
  * <IconButton styleType='borderless'><SvgAdd /></IconButton>
  */
 export var IconButton = React.forwardRef(function (props, ref) {
-    var _a;
-    var isActive = props.isActive, children = props.children, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, _c = props.type, type = _c === void 0 ? 'button' : _c, className = props.className, _d = props.as, Element = _d === void 0 ? 'button' : _d, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className", "as"]);
+    var isActive = props.isActive, children = props.children, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, size = props.size, _b = props.type, type = _b === void 0 ? 'button' : _b, className = props.className, _c = props.as, Element = _c === void 0 ? 'button' : _c, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className", "as"]);
     useTheme();
-    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', "iui-".concat(styleType), (_a = {},
-            _a["iui-".concat(size)] = !!size,
-            _a['iui-active'] = isActive,
-            _a), className), type: type }, rest), React.cloneElement(children, {
-        className: cx('iui-button-icon', children.props.className),
-        'aria-hidden': true,
-    })));
+    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, type: type }, rest),
+        React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children)));
 });
 export default IconButton;

package/esm/core/Buttons/IdeasButton/IdeasButton.js

@@ -25,8 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import SvgSmileyHappy from '@itwin/itwinui-icons-react/cjs/icons/SmileyHappy';
-import { useTheme } from '../../utils';
+import { SvgSmileyHappy, useTheme } from '../../utils';
 import { Button } from '../Button';
 /**
  * Ideas button
@@ -36,6 +35,6 @@ import { Button } from '../Button';
 export var IdeasButton = React.forwardRef(function (props, ref) {
     var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
     useTheme();
-    return (React.createElement(Button, __assign({ ref: ref, className: 'iui-idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }) }, rest), feedbackLabel));
+    return (React.createElement(Button, __assign({ ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }) }, rest), feedbackLabel));
 });
 export default IdeasButton;

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

@@ -29,9 +29,7 @@ import React from 'react';
 import { Button } from '../Button';
 import { IconButton } from '../IconButton';
 import { DropdownMenu } from '../../DropdownMenu';
-import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
-import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
-import { useTheme } from '../../utils';
+import { SvgCaretDownSmall, SvgCaretUpSmall, useTheme, } from '../../utils';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Split button component with a DropdownMenu.
@@ -58,13 +56,11 @@ export var SplitButton = React.forwardRef(function (props, forwardedRef) {
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children, size]);
-    return (React.createElement("span", { className: cx(className, 'iui-button-split-menu', {
+    return (React.createElement("span", { className: cx(className, 'iui-button-split', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
-        React.createElement("div", null,
-            React.createElement(Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children)),
-        React.createElement("div", null,
-            React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: React.useCallback(function () { return setIsMenuOpen(false); }, []) },
-                React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null))))));
+        React.createElement(Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children),
+        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: React.useCallback(function () { return setIsMenuOpen(false); }, []) },
+            React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null)))));
 });
 export default SplitButton;

package/esm/core/Carousel/CarouselNavigation.js

@@ -29,8 +29,7 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext';
 import { IconButton } from '../Buttons';
 import { CarouselDotsList } from './CarouselDotsList';
-import SvgChevronLeft from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeft';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { SvgChevronLeft, SvgChevronRight } from '../utils';
 /** Button for switching to previous slide */
 var PreviousButton = React.forwardRef(function (props, ref) {
     var context = React.useContext(CarouselContext);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/checkbox.css';
 export declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.
@@ -28,20 +28,6 @@ export declare type CheckboxProps = {
      * @default false
      */
     isLoading?: boolean;
-    /**
-     * Custom CSS class name for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkClassName?: string;
-    /**
-     * Custom CSS Style for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkStyle?: React.CSSProperties;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 /**
  * Simple input checkbox
@@ -83,19 +69,5 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
      * @default false
      */
     isLoading?: boolean | undefined;
-    /**
-     * Custom CSS class name for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkClassName?: string | undefined;
-    /**
-     * Custom CSS Style for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkStyle?: React.CSSProperties | undefined;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/esm/core/Checkbox/Checkbox.js

@@ -28,7 +28,7 @@ import cx from 'classnames';
 import React from 'react';
 import { ProgressRadial } from '../ProgressIndicators';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/checkbox.css';
 /**
  * Simple input checkbox
  * @example
@@ -43,7 +43,7 @@ import '@itwin/itwinui-css/css/inputs.css';
  */
 export var Checkbox = React.forwardRef(function (props, ref) {
     var _a, _b;
-    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.indeterminate, indeterminate = _d === void 0 ? false : _d, label = props.label, status = props.status, _e = props.variant, variant = _e === void 0 ? 'default' : _e, setFocus = props.setFocus, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style", "checkmarkClassName", "checkmarkStyle"]);
+    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.indeterminate, indeterminate = _d === void 0 ? false : _d, label = props.label, status = props.status, _e = props.variant, variant = _e === void 0 ? 'default' : _e, setFocus = props.setFocus, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, style = props.style, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style"]);
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
@@ -64,7 +64,7 @@ export var Checkbox = React.forwardRef(function (props, ref) {
         React.createElement("input", __assign({ className: cx('iui-checkbox', {
                 'iui-checkbox-visibility': variant === 'eyeball',
                 'iui-loading': isLoading,
-            }, className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
+            }, className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
         isLoading && React.createElement(ProgressRadial, { size: 'x-small', indeterminate: true })));
     return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', (_b = {
                 'iui-disabled': disabled

package/esm/core/ColorPicker/ColorBuilder.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { ColorValue, getBoundedValue, getWindow, useEventListener, useMergedRefs, useTheme, } from '../utils';
+import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, useTheme, } from '../utils';
 import { Slider } from '../Slider';
 import '@itwin/itwinui-css/css/color-picker.css';
 import { useColorPickerContext } from './ColorPickerContext';
@@ -44,12 +44,12 @@ var getHorizontalPercentageOfRectangle = function (rect, pointer) {
  * and a set of sliders to adjust hue and alpha values.
  */
 export var ColorBuilder = React.forwardRef(function (props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c;
     var className = props.className, rest = __rest(props, ["className"]);
     var builderRef = React.useRef();
     var refs = useMergedRefs(builderRef, ref);
     useTheme();
-    var _o = useColorPickerContext(), activeColor = _o.activeColor, hsvColor = _o.hsvColor, onChangeComplete = _o.onChangeComplete, applyHsvColorChange = _o.applyHsvColorChange, showAlpha = _o.showAlpha;
+    var _d = useColorPickerContext(), activeColor = _d.activeColor, hsvColor = _d.hsvColor, onChangeComplete = _d.onChangeComplete, applyHsvColorChange = _d.applyHsvColorChange, showAlpha = _d.showAlpha;
     // Set values for slider
     var hueSliderColor = React.useMemo(function () { return ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }); }, [hsvColor.h]);
     var sliderValue = React.useMemo(function () { return hsvColor.h; }, [hsvColor]);
@@ -61,28 +61,10 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
     var dotColorString = React.useMemo(function () { return activeColor.toHexString(); }, [
         activeColor,
     ]);
-    var _p = React.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
+    var _e = React.useState(false), colorDotActive = _e[0], setColorDotActive = _e[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-field-hue: ".concat(hueColorString)))
-        ? {
-            '--iui-color-field-hue': hueColorString,
-            '--iui-color-picker-selected-color': dotColorString,
-        }
-        : { backgroundColor: hueColorString };
-    var opacitySliderStyle = ((_f = (_e = (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--iui-color-picker-selected-color: ".concat(hueColorString)))
-        ? { '--iui-color-picker-selected-color': hueColorString }
-        : { backgroundColor: hueColorString };
     var squareTop = 100 - hsvColor.v;
     var squareLeft = hsvColor.s;
-    var colorDotStyle = ((_j = (_h = (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.CSS) === null || _h === void 0 ? void 0 : _h.supports) === null || _j === void 0 ? void 0 : _j.call(_h, "--iui-color-dot-inset: 0"))
-        ? {
-            '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
-        }
-        : {
-            backgroundColor: dotColorString,
-            top: squareTop.toString() + '%',
-            left: squareLeft.toString() + '%',
-        };
     // Update slider change
     var updateHueSlider = React.useCallback(function (huePercent, selectionChanged) {
         var hue = Number(huePercent.toFixed(2));
@@ -139,7 +121,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         event.preventDefault();
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
-    useEventListener('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
+    useEventListener('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     var handleSquarePointerMove = React.useCallback(function (event) {
         if (!colorDotActive) {
             return;
@@ -148,7 +130,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
-    useEventListener('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
+    useEventListener('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var handleSquarePointerLeave = React.useCallback(function (event) {
         if (!colorDotActive) {
             return;
@@ -156,7 +138,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
-    useEventListener('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
+    useEventListener('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
     var keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     var handleColorDotKeyDown = function (event) {
@@ -202,14 +184,19 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         }
     };
     return (React.createElement("div", __assign({ className: cx('iui-color-selection-wrapper', className), ref: refs }, rest),
-        React.createElement("div", { className: 'iui-color-field', style: colorSquareStyle, ref: squareRef, onPointerDown: function (event) {
+        React.createElement("div", { className: 'iui-color-field', style: {
+                '--iui-color-field-hue': hueColorString,
+                '--iui-color-picker-selected-color': dotColorString,
+            }, ref: squareRef, onPointerDown: function (event) {
                 var _a;
                 event.preventDefault();
                 updateSquareValue(event, 'onClick');
                 setColorDotActive(true);
                 (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             } },
-            React.createElement("div", { className: 'iui-color-dot', style: colorDotStyle, onPointerDown: function () {
+            React.createElement("div", { className: 'iui-color-dot', style: {
+                    '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
+                }, onPointerDown: function () {
                     var _a;
                     setColorDotActive(true);
                     (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -223,5 +210,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
                 updateOpacitySlider(values[0], true);
             }, onUpdate: function (values) {
                 updateOpacitySlider(values[0], false);
-            }, min: 0, max: 1, step: 0.01, style: opacitySliderStyle }))));
+            }, min: 0, max: 1, step: 0.01, style: {
+                '--iui-color-picker-selected-color': hueColorString,
+            } }))));
 });

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -28,9 +28,8 @@ import React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons';
 import { Input } from '../Input';
-import { ColorValue, InputContainer, useTheme } from '../utils';
+import { ColorValue, InputContainer, useTheme, SvgSwap, } from '../utils';
 import { useColorPickerContext } from './ColorPickerContext';
-import SvgSwap from '@itwin/itwinui-icons-react/cjs/icons/Swap';
 import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.

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

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "children" | "role" | "className" | "onClick" | "accessKey" | "onPointerDown" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/esm/core/ColorPicker/ColorSwatch.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/color-picker.css';
-import { useTheme, getWindow } from '../utils';
+import { useTheme } from '../utils';
 import { getColorValue } from './ColorPicker';
 /**
  * ColorSwatch component to display within a color palette.
@@ -43,11 +43,6 @@ export var ColorSwatch = React.forwardRef(function (props, ref) {
             ? color
             : getColorValue(color).toHslString(true);
     }, [color]);
-    var _style = React.useMemo(function () {
-        var _a, _b, _c;
-        return ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-swatch-background: ".concat(colorString)))
-            ? __assign({ '--iui-color-swatch-background': colorString }, style) : __assign({ backgroundColor: colorString }, style);
-    }, [colorString, style]);
-    return (React.createElement("div", __assign({ className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
+    return (React.createElement("div", __assign({ className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: __assign({ '--iui-color-swatch-background': colorString }, style), onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
 });
 export default ColorSwatch;

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

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

@@ -26,9 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useSafeContext, useMergedRefs } from '../utils';
+import { useSafeContext, useMergedRefs, SvgCaretDownSmall } from '../utils';
 import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers';
-import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 export var ComboBoxEndIcon = React.forwardRef(function (props, forwardedRef) {
     var className = props.className, children = props.children, onClickProp = props.onClick, disabled = props.disabled, isOpen = props.isOpen, rest = __rest(props, ["className", "children", "onClick", "disabled", "isOpen"]);
     var dispatch = useSafeContext(ComboBoxActionContext);

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -32,7 +32,7 @@ import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow,
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
 var VirtualizedComboBoxMenu = React.forwardRef(function (_a, forwardedRef) {
     var _b, _c, _d;
-    var children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
+    var children = _a.children, className = _a.className, style = _a.style, rest = __rest(_a, ["children", "className", "style"]);
     var _e = useSafeContext(ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
     var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
     var virtualItemRenderer = React.useCallback(function (index) {
@@ -62,11 +62,10 @@ var VirtualizedComboBoxMenu = React.forwardRef(function (_a, forwardedRef) {
     var styles = React.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-        maxHeight: 315,
     }); }, [minWidth]);
     return (React.createElement(Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
         React.createElement("div", __assign({}, outerProps),
-            React.createElement(Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), style: innerProps.style }, visibleChildren))));
+            React.createElement(Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), className: cx('iui-scroll', className), style: innerProps.style }, visibleChildren))));
 });
 export var ComboBoxMenu = React.forwardRef(function (props, forwardedRef) {
     var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
@@ -76,7 +75,6 @@ export var ComboBoxMenu = React.forwardRef(function (props, forwardedRef) {
     var styles = React.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-        maxHeight: 315,
     }); }, [minWidth]);
     return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: cx('iui-scroll', className) }, rest))) : (React.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
 });

package/esm/core/DatePicker/DatePicker.js

@@ -24,13 +24,9 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import SvgChevronLeft from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeft';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
-import SvgChevronLeftDouble from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeftDouble';
-import SvgChevronRightDouble from '@itwin/itwinui-icons-react/cjs/icons/ChevronRightDouble';
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../utils';
+import { useTheme, SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, } from '../utils';
 import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton';
 import { TimePicker } from '../TimePicker';

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

@@ -29,10 +29,10 @@ export declare type DialogProps = {
  *   </Dialog.Main>
  * </Dialog>
  */
-export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
-    Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop").DialogBackdropProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain").DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar").DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+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>> & {
+    Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop").DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+    TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar").DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
         Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     };
     Content: React.ForwardRefExoticComponent<Pick<import("./DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/esm/core/Dialog/Dialog.js

@@ -74,7 +74,7 @@ export var Dialog = Object.assign(React.forwardRef(function (props, ref) {
             relativeTo: relativeTo,
             dialogRootRef: dialogRootRef,
         } },
-        React.createElement("div", __assign({ className: cx('iui-dialog-wrapper', className), ref: refs, style: __assign({ position: relativeTo === 'container' ? 'absolute' : 'fixed' }, style) }, rest), children)));
+        React.createElement("div", __assign({ className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: __assign({}, style) }, rest), children)));
 }), {
     Backdrop: DialogBackdrop,
     Main: DialogMain,

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

@@ -8,5 +8,5 @@ export declare type DialogBackdropProps = BackdropProps & Pick<DialogContextProp
  * @example
  * <Dialog.Backdrop />
  */
-export declare const DialogBackdrop: React.ForwardRefExoticComponent<Pick<DialogBackdropProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Pick<DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
 export default DialogBackdrop;

package/esm/core/Dialog/DialogBackdrop.js

@@ -28,6 +28,7 @@ import React from 'react';
 import { Backdrop } from '../Backdrop';
 import { useMergedRefs } from '../utils';
 import { useDialogContext } from './DialogContext';
+import cx from 'classnames';
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`
  * then its visibility is being controlled by dialog's `isOpen` prop.
@@ -36,7 +37,7 @@ import { useDialogContext } from './DialogContext';
  */
 export var DialogBackdrop = React.forwardRef(function (props, ref) {
     var dialogContext = useDialogContext();
-    var _a = props.isVisible, isVisible = _a === void 0 ? dialogContext.isOpen : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? dialogContext.isDismissible : _b, _c = props.onClose, onClose = _c === void 0 ? dialogContext.onClose : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? dialogContext.closeOnExternalClick : _d, _e = props.relativeTo, relativeTo = _e === void 0 ? dialogContext.relativeTo : _e, onMouseDown = props.onMouseDown, style = props.style, rest = __rest(props, ["isVisible", "isDismissible", "onClose", "closeOnExternalClick", "relativeTo", "onMouseDown", "style"]);
+    var _a = props.isVisible, isVisible = _a === void 0 ? dialogContext.isOpen : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? dialogContext.isDismissible : _b, _c = props.onClose, onClose = _c === void 0 ? dialogContext.onClose : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? dialogContext.closeOnExternalClick : _d, _e = props.relativeTo, relativeTo = _e === void 0 ? dialogContext.relativeTo : _e, onMouseDown = props.onMouseDown, className = props.className, style = props.style, rest = __rest(props, ["isVisible", "isDismissible", "onClose", "closeOnExternalClick", "relativeTo", "onMouseDown", "className", "style"]);
     var backdropRef = React.useRef(null);
     var refs = useMergedRefs(backdropRef, ref);
     var handleMouseDown = function (event) {
@@ -50,6 +51,8 @@ export var DialogBackdrop = React.forwardRef(function (props, ref) {
         }
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
     };
-    return (React.createElement(Backdrop, __assign({ isVisible: isVisible, ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto', position: relativeTo === 'container' ? 'absolute' : 'fixed' }, style) }, rest)));
+    return (React.createElement(Backdrop, __assign({ isVisible: isVisible, className: cx({
+            'iui-backdrop-fixed': relativeTo === 'viewport',
+        }, className), ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto' }, style) }, rest)));
 });
 export default DialogBackdrop;

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

@@ -32,5 +32,5 @@ export declare type DialogMainProps = {
  *   </Dialog.ButtonBar>
  * </Dialog.Main>
  */
-export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "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" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
 export default DialogMain;