@itwin/itwinui-react 1.35.0 → 1.37.1

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

@@ -38,8 +38,8 @@ 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"]);
     useTheme();
-    return (React.createElement(Element, __assign({ ref: ref, className: cx('iui-button', "iui-" + styleType, (_a = {},
-            _a["iui-" + size] = !!size,
+    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),

package/esm/core/Carousel/Carousel.js

@@ -55,7 +55,7 @@ import { CarouselNavigation } from './CarouselNavigation';
 export var Carousel = Object.assign(React.forwardRef(function (props, ref) {
     var _a = props.activeSlideIndex, userActiveIndex = _a === void 0 ? 0 : _a, onSlideChange = props.onSlideChange, className = props.className, children = props.children, rest = __rest(props, ["activeSlideIndex", "onSlideChange", "className", "children"]);
     // Generate a stateful random id if not specified
-    var id = React.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-" + getRandomValue(10); })[0];
+    var id = React.useState(function () { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : "iui-carousel-".concat(getRandomValue(10)); })[0];
     useTheme();
     var isManuallyUpdating = React.useRef(false);
     var scrollInstantly = React.useRef(false);

package/esm/core/Carousel/CarouselDotsList.js

@@ -96,7 +96,7 @@ export var CarouselDotsList = React.forwardRef(function (props, ref) {
             var isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
                 (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
             var isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-            return (React.createElement(CarouselDot, { key: index, "aria-label": "Slide " + index, isActive: index === currentIndex, onClick: function () { return handleSlideChange(index); }, isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && idPrefix + "--dot-" + index, "aria-controls": idPrefix && idPrefix + "--slide-" + index }));
+            return (React.createElement(CarouselDot, { key: index, "aria-label": "Slide ".concat(index), isActive: index === currentIndex, onClick: function () { return handleSlideChange(index); }, isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && "".concat(idPrefix, "--dot-").concat(index), "aria-controls": idPrefix && "".concat(idPrefix, "--slide-").concat(index) }));
         });
     }, [
         slideCount,

package/esm/core/Carousel/CarouselSlider.js

@@ -43,7 +43,7 @@ export var CarouselSlider = React.forwardRef(function (props, ref) {
         return (_a = React.Children.map(children, function (child, index) {
             return React.isValidElement(child)
                 ? React.cloneElement(child, {
-                    id: idPrefix + "--slide-" + index,
+                    id: "".concat(idPrefix, "--slide-").concat(index),
                     index: index,
                 })
                 : child;

package/esm/core/Checkbox/Checkbox.js

@@ -69,7 +69,7 @@ export var Checkbox = React.forwardRef(function (props, ref) {
     return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', (_b = {
                 'iui-disabled': disabled
             },
-            _b["iui-" + status] = !!status,
+            _b["iui-".concat(status)] = !!status,
             _b['iui-loading'] = isLoading,
             _b), className), style: style },
         checkbox,

package/esm/core/ColorPicker/ColorBuilder.js

@@ -63,20 +63,20 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
     ]);
     var _p = React.useState(false), colorDotActive = _p[0], setColorDotActive = _p[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: " + hueColorString))
+    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: " + 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': squareTop.toString() + "% auto auto " + squareLeft.toString() + "%",
+            '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
         }
         : {
             backgroundColor: dotColorString,

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -150,7 +150,7 @@ export var ColorInputPanel = React.forwardRef(function (props, ref) {
         React.createElement(Input, { size: 'small', maxLength: showAlpha ? 9 : 7, minLength: 1, placeholder: 'HEX', value: input[0], onChange: function (event) {
                 var value = event.target.value.startsWith('#')
                     ? event.target.value
-                    : "#" + event.target.value;
+                    : "#".concat(event.target.value);
                 setInput([value]);
             }, onKeyDown: function (event) {
                 if (event.key === 'Enter') {

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" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "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" | "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" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "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" | "role" | "children" | "className" | "onClick" | "accessKey" | "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" | "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" | "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 default ColorSwatch;

package/esm/core/ColorPicker/ColorSwatch.js

@@ -45,7 +45,7 @@ export var ColorSwatch = React.forwardRef(function (props, ref) {
     }, [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: " + colorString))
+        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)));

package/esm/core/ComboBox/ComboBox.js

@@ -51,18 +51,21 @@ export var ComboBox = function (props) {
     // Generate a stateful random id if not specified
     var id = React.useState(function () {
         var _a, _b;
-        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && inputProps.id + "-cb")) !== null && _b !== void 0 ? _b : "iui-cb-" + getRandomValue(10);
+        return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && "".concat(inputProps.id, "-cb"))) !== null && _b !== void 0 ? _b : "iui-cb-".concat(getRandomValue(10));
     })[0];
     useTheme();
     /** Generates a memoized id for an option, given the index from original list */
     var getOptionId = React.useCallback(function (index) {
         var _a;
-        return (_a = options[index].id) !== null && _a !== void 0 ? _a : id + "-option" + options.findIndex(function (_a) {
+        return (_a = options[index].id) !== null && _a !== void 0 ? _a : "".concat(id, "-option").concat(options.findIndex(function (_a) {
             var value = _a.value;
             return value === options[index].value;
-        });
+        }));
     }, [options, id]);
     var userOnChange = React.useRef(onChange);
+    React.useEffect(function () {
+        userOnChange.current = onChange;
+    }, [onChange]);
     var memoizedItems = React.useMemo(function () {
         return options.map(function (option, index) {
             var label = option.label, value = option.value, rest = __rest(option, ["label", "value"]);
@@ -278,9 +281,9 @@ export var ComboBox = function (props) {
                     if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
                         setIsOpen(false);
                     }
-                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: "".concat(id, "-list"), className: 'iui-scroll', style: {
                         minWidth: minWidth,
-                        maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
+                        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
                         maxHeight: 300,
                     }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
                     var _a;
@@ -296,7 +299,7 @@ export var ComboBox = function (props) {
                 } }),
                 React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
                         ? getOptionId(focusedIndex)
-                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? "".concat(id, "-list") : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
             React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
                     'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
                     'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,

package/esm/core/DatePicker/DatePicker.js

@@ -288,9 +288,9 @@ export var DatePicker = function (props) {
                     React.createElement(SvgChevronRightDouble, null)))),
             React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map(function (day, index) { return (React.createElement("div", { key: day, title: longDays[index] }, day)); })),
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
-                return (React.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
+                return (React.createElement("div", { key: "week-".concat(displayedMonthIndex, "-").concat(weekIndex), className: 'iui-calendar-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (React.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
+                    return (React.createElement("div", { key: "day-".concat(displayedMonthIndex, "-").concat(dayIndex), className: getDayClass(weekDay), onClick: function () { return onDayClick(weekDay); }, role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, ref: function (element) {
                             return isSameDay(weekDay, focusedDay) &&
                                 needFocus.current &&
                                 (element === null || element === void 0 ? void 0 : element.focus());

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -71,7 +71,7 @@ export var ExpandableBlock = function (props) {
                 caption && React.createElement("div", { className: 'iui-caption' }, caption)),
             icon &&
                 React.cloneElement(icon, {
-                    className: cx('iui-status-icon', (_a = {}, _a["iui-" + status] = !!status, _a), icon.props.className),
+                    className: cx('iui-status-icon', (_a = {}, _a["iui-".concat(status)] = !!status, _a), icon.props.className),
                 })),
         React.createElement(WithCSSTransition, { in: expanded },
             React.createElement("div", { className: 'iui-expandable-content' },

package/esm/core/Footer/Footer.js

@@ -64,7 +64,7 @@ export var Footer = function (props) {
     var defaultElements = [
         {
             key: 'copyright',
-            title: "\u00A9 " + new Date().getFullYear() + " Bentley Systems, Incorporated",
+            title: "\u00A9 ".concat(new Date().getFullYear(), " Bentley Systems, Incorporated"),
         },
         {
             key: 'termsOfService',
@@ -101,7 +101,7 @@ export var Footer = function (props) {
     }
     return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
         React.createElement("ul", null, elements.map(function (element, index) {
-            return (React.createElement("li", { key: element.key || element.title + "-" + index },
+            return (React.createElement("li", { key: element.key || "".concat(element.title, "-").concat(index) },
                 index > 0 && React.createElement("span", { className: 'iui-separator' }),
                 element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
         }))));

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -52,7 +52,7 @@ export var HeaderBreadcrumbs = function (props) {
     useTheme();
     return (React.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
         current,
-        index !== items.length - 1 && (React.createElement(SvgChevronRight, { key: "chevron" + index, "aria-hidden": true, className: 'iui-chevron' })),
+        index !== items.length - 1 && (React.createElement(SvgChevronRight, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' })),
     ], false); }, [])));
 };
 export default HeaderBreadcrumbs;

package/esm/core/Header/HeaderButton.js

@@ -55,6 +55,7 @@ export var HeaderButton = React.forwardRef(function (props, ref) {
             : undefined, styleType: 'borderless', className: cx({
             'iui-header-button': !isSplitButton(props),
             'iui-header-split-button': isSplitButton(props),
+            'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
             'iui-active': isActive,
         }, className), 'aria-current': isActive ? 'location' : undefined, children: (React.createElement(React.Fragment, null,
             React.createElement("div", null, name),

package/esm/core/InformationPanel/InformationPanel.js

@@ -76,10 +76,10 @@ export var InformationPanel = React.forwardRef(function (props, ref) {
         }
         var _a = infoPanelRef.current.getBoundingClientRect(), right = _a.right, bottom = _a.bottom;
         if (orientation === 'vertical') {
-            infoPanelRef.current.style.width = right - e.clientX + "px";
+            infoPanelRef.current.style.width = "".concat(right - e.clientX, "px");
         }
         else {
-            infoPanelRef.current.style.height = bottom - e.clientY + "px";
+            infoPanelRef.current.style.height = "".concat(bottom - e.clientY, "px");
         }
     }, [orientation]);
     return (React.createElement("div", __assign({ className: cx('iui-information-panel', {

package/esm/core/Input/Input.js

@@ -46,6 +46,6 @@ export var Input = React.forwardRef(function (props, ref) {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("input", __assign({ className: cx('iui-input', (_a = {}, _a["iui-" + size] = !!size, _a), className), ref: refs }, rest)));
+    return (React.createElement("input", __assign({ className: cx('iui-input', (_a = {}, _a["iui-".concat(size)] = !!size, _a), className), ref: refs }, rest)));
 });
 export default Input;

package/esm/core/Menu/Menu.js

@@ -40,9 +40,14 @@ export var Menu = React.forwardRef(function (props, ref) {
     React.useEffect(function () {
         setFocusedIndex(null);
     }, [children]);
+    var getFocusableNodes = React.useCallback(function () {
+        var focusableItems = getFocusableElements(menuRef.current);
+        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+        return focusableItems.filter(function (i) { return !focusableItems.some(function (p) { return p.contains(i.parentElement); }); });
+    }, []);
     React.useEffect(function () {
         var _a;
-        var items = getFocusableElements(menuRef.current);
+        var items = getFocusableNodes();
         if (focusedIndex != null) {
             (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             return;
@@ -51,9 +56,9 @@ export var Menu = React.forwardRef(function (props, ref) {
         if (setFocus) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
-    }, [setFocus, focusedIndex]);
+    }, [setFocus, focusedIndex, getFocusableNodes]);
     var onKeyDown = function (event) {
-        var items = getFocusableElements(menuRef.current);
+        var items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;
         }

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

@@ -15,7 +15,7 @@ export declare type ProgressLinearProps = {
     /**
      * Labels array. One label will be centered, two will be put to the sides.
      */
-    labels?: React.ReactNodeArray;
+    labels?: React.ReactNode[];
     /**
      * Apply animation to the value change, if determinate.
      * @default false

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

@@ -49,13 +49,13 @@ export var ProgressLinear = function (props) {
     useTheme();
     var boundedValue = Math.min(100, Math.max(0, value));
     return (React.createElement("div", __assign({ className: cx('iui-progress-indicator-linear', (_a = {},
-            _a["iui-" + status] = !!status,
+            _a["iui-".concat(status)] = !!status,
             _a), className), style: style }, rest),
         React.createElement("div", { className: 'iui-track' },
             React.createElement("div", { className: cx('iui-fill', {
                     'iui-determinate': !indeterminate && isAnimated,
                     'iui-indeterminate': indeterminate,
-                }), style: { width: indeterminate ? '100%' : boundedValue + "%" } })),
+                }), style: { width: indeterminate ? '100%' : "".concat(boundedValue, "%") } })),
         labels.length > 0 && (React.createElement("div", { className: 'iui-label' }, labels.map(function (label, index) { return (React.createElement("span", { key: index }, label)); })))));
 };
 export default ProgressLinear;

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

@@ -63,8 +63,8 @@ export var ProgressRadial = function (props) {
                 'iui-determinate': !indeterminate,
                 'iui-indeterminate': indeterminate
             },
-            _a["iui-" + size] = !!size,
-            _a["iui-" + status] = !!status,
+            _a["iui-".concat(size)] = !!size,
+            _a["iui-".concat(status)] = !!status,
             _a), className), style: style }, rest),
         React.createElement("svg", { className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
             React.createElement("circle", { className: 'iui-track', cx: '16', cy: '16', r: '14' }),

package/esm/core/Radio/Radio.js

@@ -50,7 +50,7 @@ export var Radio = React.forwardRef(function (props, ref) {
         }
     }, [setFocus]);
     var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled, type: 'radio', ref: refs }, rest)));
-    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-" + status] = !!status, _b), className), style: style },
+    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
         radio,
         label && React.createElement("span", { className: 'iui-radio-label' }, label)));
 });

package/esm/core/Select/Select.js

@@ -127,7 +127,7 @@ export var Select = function (props) {
         return options.map(function (option, index) {
             var isSelected = value === option.value;
             var menuItem = itemRenderer ? (itemRenderer(option, { close: close, isSelected: isSelected })) : (React.createElement(MenuItem, null, option.label));
-            return React.cloneElement(menuItem, __assign(__assign({ key: option.label + "-" + index, isSelected: isSelected, onClick: function () {
+            return React.cloneElement(menuItem, __assign(__assign({ key: "".concat(option.label, "-").concat(index), isSelected: isSelected, onClick: function () {
                     !option.disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option.value));
                     close();
                 }, ref: function (el) { return isSelected && (el === null || el === void 0 ? void 0 : el.scrollIntoView()); }, role: 'option' }, option), menuItem.props));
@@ -140,7 +140,7 @@ export var Select = function (props) {
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
                 var target = _a.target;
                 if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
@@ -151,7 +151,7 @@ export var Select = function (props) {
                         'iui-placeholder': !selectedItem && !!placeholder,
                         'iui-disabled': disabled
                     },
-                    _a["iui-" + size] = !!size,
+                    _a["iui-".concat(size)] = !!size,
                     _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 !selectedItem && React.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/skip-to-content.css';
+export declare type SkipToContentLinkProps = {
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
+export default SkipToContentLink;

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/skip-to-content.css';
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export var SkipToContentLink = React.forwardRef(function (props, ref) {
+    var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("a", __assign({ ref: ref, className: cx('iui-skip-to-content-link', className) }, rest), children));
+});
+export default SkipToContentLink;

package/esm/core/SkipToContentLink/index.d.ts

@@ -0,0 +1,4 @@
+export { SkipToContentLink } from './SkipToContentLink';
+export type { SkipToContentLinkProps } from './SkipToContentLink';
+declare const _default: "./SkipToContentLink";
+export default _default;

package/esm/core/SkipToContentLink/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { SkipToContentLink } from './SkipToContentLink';
+export default './SkipToContentLink';

package/esm/core/Slider/Slider.js

@@ -74,7 +74,7 @@ var focusThumb = function (sliderContainer, activeIndex) {
     var doc = sliderContainer.ownerDocument;
     if (!sliderContainer.contains(doc.activeElement) ||
         Number((_a = doc.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-index')) !== activeIndex) {
-        var thumbToFocus = sliderContainer.querySelector("[data-index=\"" + activeIndex + "\"]");
+        var thumbToFocus = sliderContainer.querySelector("[data-index=\"".concat(activeIndex, "\"]"));
         thumbToFocus && thumbToFocus.focus();
     }
 };

package/esm/core/Slider/Thumb.js

@@ -67,5 +67,5 @@ export var Thumb = function (props) {
     var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
     return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
-        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: leftPercent + "%" }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };

package/esm/core/Slider/Track.js

@@ -49,6 +49,6 @@ export var Track = function (props) {
             var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
             var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
             rightPercent = 100.0 - rightPercent;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: leftPercent + "%", right: rightPercent + "%" } })) : null));
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/surface.css';
+export declare type SurfaceProps = {
+    /**
+     * Sets the elevation of the surface
+     * @default 0
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Content in the surface.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * The Surface container allows content to appear elevated through the use of a drop shadow
+ * @example
+ * <Surface>Surface Content</Surface>
+ * <Surface elevation={2}>Surface Content</Surface>
+ */
+export declare const Surface: React.ForwardRefExoticComponent<{
+    /**
+     * Sets the elevation of the surface
+     * @default 0
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+    /**
+     * Content in the surface.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export default Surface;

package/esm/core/Surface/Surface.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme, getWindow } from '../utils';
+import '@itwin/itwinui-css/css/surface.css';
+/**
+ * Helper function that returns one of the preset surface elevation values.
+ */
+var getSurfaceElevationValue = function (elevation) {
+    switch (elevation) {
+        case 1:
+            return '0 1px 5px rgba(0, 0, 0, 0.25)';
+        case 2:
+            return '0 1px 10px rgba(0, 0, 0, 0.25)';
+        case 3:
+            return '0 3px 14px rgba(0, 0, 0, 0.25)';
+        case 4:
+            return '0 6px 30px rgba(0, 0, 0, 0.25)';
+        case 5:
+            return '0 9px 46px rgba(0, 0, 0, 0.25)';
+        default:
+            return 'none';
+    }
+};
+/**
+ * The Surface container allows content to appear elevated through the use of a drop shadow
+ * @example
+ * <Surface>Surface Content</Surface>
+ * <Surface elevation={2}>Surface Content</Surface>
+ */
+export var Surface = React.forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
+    useTheme();
+    var _style = ((_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-surface-elevation: ".concat(getSurfaceElevationValue(elevation))))
+        ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
+    return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));
+});
+export default Surface;