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

package/cjs/core/Carousel/CarouselNavigation.js

@@ -35,8 +35,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var CarouselContext_1 = require("./CarouselContext");
 var Buttons_1 = require("../Buttons");
 var CarouselDotsList_1 = require("./CarouselDotsList");
-var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var utils_1 = require("../utils");
 /** Button for switching to previous slide */
 var PreviousButton = react_1.default.forwardRef(function (props, ref) {
     var context = react_1.default.useContext(CarouselContext_1.CarouselContext);
@@ -51,7 +50,7 @@ var PreviousButton = react_1.default.forwardRef(function (props, ref) {
             scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } }),
-        react_1.default.createElement(ChevronLeft_1.default, null)));
+        react_1.default.createElement(utils_1.SvgChevronLeft, null)));
 });
 /** Button for switching to next slide */
 var NextButton = react_1.default.forwardRef(function (props, ref) {
@@ -67,7 +66,7 @@ var NextButton = react_1.default.forwardRef(function (props, ref) {
             scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
         } }),
-        react_1.default.createElement(ChevronRight_1.default, null)));
+        react_1.default.createElement(utils_1.SvgChevronRight, null)));
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`

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

@@ -34,7 +34,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var ProgressIndicators_1 = require("../ProgressIndicators");
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/checkbox.css");
 /**
  * Simple input checkbox
  * @example
@@ -49,7 +49,7 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.Checkbox = react_1.default.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"]);
     (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -70,7 +70,7 @@ exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('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_1.default.createElement(ProgressIndicators_1.ProgressRadial, { size: 'x-small', indeterminate: true })));
     return !label ? (checkbox) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-checkbox-wrapper', (_b = {
                 'iui-disabled': disabled

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -50,12 +50,12 @@ var getHorizontalPercentageOfRectangle = function (rect, pointer) {
  * and a set of sliders to adjust hue and alpha values.
  */
 exports.ColorBuilder = react_1.default.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_1.default.useRef();
     var refs = (0, utils_1.useMergedRefs)(builderRef, ref);
     (0, utils_1.useTheme)();
-    var _o = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _o.activeColor, hsvColor = _o.hsvColor, onChangeComplete = _o.onChangeComplete, applyHsvColorChange = _o.applyHsvColorChange, showAlpha = _o.showAlpha;
+    var _d = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _d.activeColor, hsvColor = _d.hsvColor, onChangeComplete = _d.onChangeComplete, applyHsvColorChange = _d.applyHsvColorChange, showAlpha = _d.showAlpha;
     // Set values for slider
     var hueSliderColor = react_1.default.useMemo(function () { return utils_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }); }, [hsvColor.h]);
     var sliderValue = react_1.default.useMemo(function () { return hsvColor.h; }, [hsvColor]);
@@ -67,28 +67,10 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
     var dotColorString = react_1.default.useMemo(function () { return activeColor.toHexString(); }, [
         activeColor,
     ]);
-    var _p = react_1.default.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
+    var _e = react_1.default.useState(false), colorDotActive = _e[0], setColorDotActive = _e[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_c = (_b = (_a = (0, utils_1.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 = (0, utils_1.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 = (0, utils_1.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_1.default.useCallback(function (huePercent, selectionChanged) {
         var hue = Number(huePercent.toFixed(2));
@@ -145,7 +127,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         event.preventDefault();
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
+    (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     var handleSquarePointerMove = react_1.default.useCallback(function (event) {
         if (!colorDotActive) {
             return;
@@ -154,7 +136,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
+    (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var handleSquarePointerLeave = react_1.default.useCallback(function (event) {
         if (!colorDotActive) {
             return;
@@ -162,7 +144,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
+    (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
     var keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     var handleColorDotKeyDown = function (event) {
@@ -208,14 +190,19 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         }
     };
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs }, rest),
-        react_1.default.createElement("div", { className: 'iui-color-field', style: colorSquareStyle, ref: squareRef, onPointerDown: function (event) {
+        react_1.default.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_1.default.createElement("div", { className: 'iui-color-dot', style: colorDotStyle, onPointerDown: function () {
+            react_1.default.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();
@@ -229,5 +216,7 @@ exports.ColorBuilder = react_1.default.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/cjs/core/ColorPicker/ColorInputPanel.js

@@ -36,7 +36,6 @@ var Buttons_1 = require("../Buttons");
 var Input_1 = require("../Input");
 var utils_1 = require("../utils");
 var ColorPickerContext_1 = require("./ColorPickerContext");
-var Swap_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Swap"));
 require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -303,7 +302,7 @@ exports.ColorInputPanel = react_1.default.forwardRef(function (props, ref) {
             : currentFormat.toUpperCase()),
         react_1.default.createElement("div", { className: 'iui-color-input' },
             allowedColorFormats.length > 1 && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-                react_1.default.createElement(Swap_1.default, null))),
+                react_1.default.createElement(utils_1.SvgSwap, null))),
             react_1.default.createElement("div", { ref: inputsContainerRef, className: 'iui-color-input-fields' },
                 currentFormat === 'hex' && hexInputField,
                 currentFormat === 'rgb' && rgbInputs,

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

@@ -49,11 +49,6 @@ exports.ColorSwatch = react_1.default.forwardRef(function (props, ref) {
             ? color
             : (0, ColorPicker_1.getColorValue)(color).toHslString(true);
     }, [color]);
-    var _style = react_1.default.useMemo(function () {
-        var _a, _b, _c;
-        return ((_c = (_b = (_a = (0, utils_1.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_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('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)));
 });
 exports.default = exports.ColorSwatch;

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

@@ -34,7 +34,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 exports.ComboBoxEndIcon = react_1.default.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 = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
@@ -49,6 +48,6 @@ exports.ComboBoxEndIcon = react_1.default.forwardRef(function (props, forwardedR
             if (!e.isDefaultPrevented()) {
                 dispatch([isOpen ? 'close' : 'open']);
             }
-        } }, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })));
+        } }, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });
 exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -38,7 +38,7 @@ var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
 var VirtualizedComboBoxMenu = react_1.default.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 = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
     var menuRef = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext).menuRef;
     var virtualItemRenderer = react_1.default.useCallback(function (index) {
@@ -68,11 +68,10 @@ var VirtualizedComboBoxMenu = react_1.default.forwardRef(function (_a, forwarded
     var styles = react_1.default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-        maxHeight: 315,
     }); }, [minWidth]);
     return (react_1.default.createElement(Surface_1.Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
         react_1.default.createElement("div", __assign({}, outerProps),
-            react_1.default.createElement(Menu_1.Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), style: innerProps.style }, visibleChildren))));
+            react_1.default.createElement(Menu_1.Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: (0, classnames_1.default)('iui-scroll', className), style: innerProps.style }, visibleChildren))));
 });
 exports.ComboBoxMenu = react_1.default.forwardRef(function (props, forwardedRef) {
     var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
@@ -82,7 +81,6 @@ exports.ComboBoxMenu = react_1.default.forwardRef(function (props, forwardedRef)
     var styles = react_1.default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-        maxHeight: 315,
     }); }, [minWidth]);
     return (react_1.default.createElement(react_1.default.Fragment, null, !enableVirtualization ? (react_1.default.createElement(Menu_1.Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: (0, classnames_1.default)('iui-scroll', className) }, rest))) : (react_1.default.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
 });

package/cjs/core/DatePicker/DatePicker.js

@@ -30,10 +30,6 @@ exports.DatePicker = exports.generateLocalizedStrings = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeft"));
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
-var ChevronLeftDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronLeftDouble"));
-var ChevronRightDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRightDouble"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -374,17 +370,17 @@ var DatePicker = function (props) {
         react_1.default.createElement("div", null,
             react_1.default.createElement("div", { className: 'iui-calendar-month-year' },
                 showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
-                    react_1.default.createElement(ChevronLeftDouble_1.default, null))),
+                    react_1.default.createElement(utils_1.SvgChevronLeftDouble, null))),
                 react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
-                    react_1.default.createElement(ChevronLeft_1.default, null)),
+                    react_1.default.createElement(utils_1.SvgChevronLeft, null)),
                 react_1.default.createElement("span", { "aria-live": 'polite' },
                     react_1.default.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
                 react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
-                    react_1.default.createElement(ChevronRight_1.default, null)),
+                    react_1.default.createElement(utils_1.SvgChevronRight, null)),
                 showYearSelection && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
-                    react_1.default.createElement(ChevronRightDouble_1.default, null)))),
+                    react_1.default.createElement(utils_1.SvgChevronRightDouble, null)))),
             react_1.default.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (react_1.default.createElement("div", { key: day, title: longDays[index] }, day)); })),
             react_1.default.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
                 return (react_1.default.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {

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

@@ -80,7 +80,7 @@ exports.Dialog = Object.assign(react_1.default.forwardRef(function (props, ref)
             relativeTo: relativeTo,
             dialogRootRef: dialogRootRef,
         } },
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-wrapper', className), ref: refs, style: __assign({ position: relativeTo === 'container' ? 'absolute' : 'fixed' }, style) }, rest), children)));
+        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: __assign({}, style) }, rest), children)));
 }), {
     Backdrop: DialogBackdrop_1.DialogBackdrop,
     Main: DialogMain_1.DialogMain,

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

@@ -34,6 +34,7 @@ var react_1 = __importDefault(require("react"));
 var Backdrop_1 = require("../Backdrop");
 var utils_1 = require("../utils");
 var DialogContext_1 = require("./DialogContext");
+var classnames_1 = __importDefault(require("classnames"));
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`
  * then its visibility is being controlled by dialog's `isOpen` prop.
@@ -42,7 +43,7 @@ var DialogContext_1 = require("./DialogContext");
  */
 exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
     var dialogContext = (0, DialogContext_1.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_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(backdropRef, ref);
     var handleMouseDown = function (event) {
@@ -56,6 +57,8 @@ exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
         }
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
     };
-    return (react_1.default.createElement(Backdrop_1.Backdrop, __assign({ isVisible: isVisible, ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto', position: relativeTo === 'container' ? 'absolute' : 'fixed' }, style) }, rest)));
+    return (react_1.default.createElement(Backdrop_1.Backdrop, __assign({ isVisible: isVisible, className: (0, classnames_1.default)({
+            'iui-backdrop-fixed': relativeTo === 'viewport',
+        }, className), ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto' }, style) }, rest)));
 });
 exports.default = exports.DialogBackdrop;

package/cjs/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;

package/cjs/core/Dialog/DialogMain.js

@@ -65,6 +65,7 @@ exports.DialogMain = react_1.default.forwardRef(function (props, ref) {
     var _l = react_1.default.useState(), style = _l[0], setStyle = _l[1];
     var dialogRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(dialogRef, ref);
+    var hasBeenResized = react_1.default.useRef(false);
     // Focuses dialog when opened and brings back focus to the previously focused element when closed.
     var previousFocusedElement = react_1.default.useRef();
     var setFocusRef = (0, utils_1.useLatestRef)(setFocus);
@@ -150,7 +151,12 @@ exports.DialogMain = react_1.default.forwardRef(function (props, ref) {
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: __assign(__assign({ transform: transform, overflow: 'unset' }, style), propStyle) }, rest),
-        isResizable && (react_1.default.createElement(utils_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeEnd: setResizeStyle })),
+        isResizable && (react_1.default.createElement(utils_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: function () {
+                if (!hasBeenResized.current) {
+                    hasBeenResized.current = true;
+                    setResizeStyle({ maxWidth: '100%' });
+                }
+            }, onResizeEnd: setResizeStyle })),
         children));
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
         react_1.default.createElement(DialogDragContext_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },

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

@@ -28,7 +28,7 @@ export declare type DialogTitleBarProps = {
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<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>>;
 };
 export default DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBar.js

@@ -32,7 +32,6 @@ exports.DialogTitleBar = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
 var Buttons_1 = require("../Buttons");
 require("@itwin/itwinui-css/css/dialog.css");
@@ -72,7 +71,7 @@ exports.DialogTitleBar = Object.assign(react_1.default.forwardRef(function (prop
         }), ref: ref, onPointerDown: handlePointerDown }, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(DialogTitleBarTitle_1.DialogTitleBarTitle, null, titleText),
         isDismissible && (react_1.default.createElement(Buttons_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-            react_1.default.createElement(Close_1.default, null)))))));
+            react_1.default.createElement(utils_1.SvgClose, null)))))));
 }), {
     Title: DialogTitleBarTitle_1.DialogTitleBarTitle,
 });

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -30,7 +30,6 @@ exports.ExpandableBlock = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -45,11 +44,10 @@ require("@itwin/itwinui-css/css/expandable-block.css");
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
 var ExpandableBlock = function (props) {
-    var _a;
-    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, endIcon = props.endIcon, status = props.status, _c = props.size, size = _c === void 0 ? 'default' : _c, _d = props.styleType, styleType = _d === void 0 ? 'default' : _d, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size", "styleType"]);
+    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _a = props.isExpanded, isExpanded = _a === void 0 ? false : _a, endIcon = props.endIcon, status = props.status, _b = props.size, size = _b === void 0 ? 'default' : _b, _c = props.styleType, styleType = _c === void 0 ? 'default' : _c, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size", "styleType"]);
     (0, utils_1.useTheme)();
     var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && utils_1.StatusIconMap[status]());
-    var _e = react_1.default.useState(isExpanded), expanded = _e[0], setExpanded = _e[1];
+    var _d = react_1.default.useState(isExpanded), expanded = _d[0], setExpanded = _d[1];
     react_1.default.useEffect(function () {
         setExpanded(isExpanded);
     }, [isExpanded]);
@@ -71,13 +69,14 @@ var ExpandableBlock = function (props) {
             'iui-borderless': styleType === 'borderless',
         }, className), style: style }, rest),
         react_1.default.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
-            react_1.default.createElement(ChevronRight_1.default, { className: 'iui-icon', "aria-hidden": true }),
+            react_1.default.createElement(utils_1.SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
             react_1.default.createElement("span", { className: 'iui-expandable-block-label' },
                 react_1.default.createElement("div", { className: 'iui-title' }, title),
                 caption && react_1.default.createElement("div", { className: 'iui-caption' }, caption)),
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-status-icon', (_a = {}, _a["iui-".concat(status)] = !!status, _a), icon.props.className),
+                    className: (0, classnames_1.default)('iui-status-icon', icon.props.className),
+                    'data-iui-icon-color': status,
                 })),
         react_1.default.createElement(utils_1.WithCSSTransition, { in: expanded },
             react_1.default.createElement("div", { className: 'iui-expandable-content' },

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -11,7 +11,6 @@ exports.FileUploadTemplate = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/file-upload.css");
-var Upload_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Upload"));
 /**
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
@@ -22,7 +21,7 @@ var FileUploadTemplate = function (props) {
     var onChange = props.onChange, _a = props.acceptMultiple, acceptMultiple = _a === void 0 ? true : _a, acceptType = props.acceptType, _b = props.label, label = _b === void 0 ? 'Choose a file' : _b, _c = props.subtitle, subtitle = _c === void 0 ? 'or drag & drop it here.' : _c, children = props.children;
     (0, utils_1.useTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Upload_1.default, { className: 'iui-icon', "aria-hidden": true }),
+        react_1.default.createElement(utils_1.SvgUpload, { className: 'iui-icon', "aria-hidden": true }),
         react_1.default.createElement("div", { className: 'iui-template-text' },
             react_1.default.createElement("label", { className: 'iui-anchor' },
                 react_1.default.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),