@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.2

package/esm/core/Menu/MenuItem.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 /**
@@ -21,10 +20,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
     const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
     const subMenuRef = React.useRef(null);
     const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
-    const endIcon = endIconProp !== null && endIconProp !== void 0 ? endIconProp : badge;
+    const startIcon = startIconProp ?? icon;
+    const endIcon = endIconProp ?? badge;
     const onKeyDown = (event) => {
-        var _a;
         if (event.altKey) {
             return;
         }
@@ -32,7 +30,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
             case 'Enter':
             case ' ':
             case 'Spacebar': {
-                !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value));
+                !disabled && onClick?.(value);
                 event.preventDefault();
                 break;
             }
@@ -45,7 +43,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
             }
             case 'ArrowLeft': {
-                (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                parentMenuItemRef?.current?.focus();
                 event.stopPropagation();
                 event.preventDefault();
                 break;
@@ -54,10 +52,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
-            var _a;
+    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && onClick?.(value), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
             if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                !subMenuRef.current?.contains(e.relatedTarget)) {
                 setIsSubmenuVisible(false);
             }
         }, ...rest },
@@ -70,10 +67,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
         endIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
         React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+                        !subMenuRef.current?.contains(e.relatedTarget) &&
+                        !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
                         setIsSubmenuVisible(false);
                 } },
                 React.createElement(Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));

package/esm/core/Menu/MenuItemSkeleton.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 declare type MenuItemSkeletonProps = {
     /**
      * Flag whether to show skeleton for sub-label.

package/esm/core/Menu/MenuItemSkeleton.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, VisuallyHidden } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */

package/esm/core/Modal/Modal.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogMainProps } from '../Dialog/DialogMain.js';
 declare type ModalProps = {
     /**
@@ -31,16 +30,15 @@ declare type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * Id of the root where the modal will be rendered in.
-     * @default 'iui-react-portal-container'
-     */
-    modalRootId?: string;
-    /**
-     * Document where the modal will be rendered.
-     * Can be specified to render in a different document (e.g. a popup window).
-     * @default document
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default true
      */
-    ownerDocument?: Document;
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Content of the modal.
      */

package/esm/core/Modal/Modal.js

@@ -3,9 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { Dialog } from '../Dialog/index.js';
 /**
  * Modal component which can wrap any content.
@@ -29,16 +26,11 @@ import { Dialog } from '../Dialog/index.js';
  * </Modal>
  */
 export const Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = getDocument(), ...rest } = props;
-    const [container, setContainer] = React.useState();
-    React.useEffect(() => {
-        setContainer(getContainer(modalRootId, ownerDocument));
-        return () => setContainer(undefined);
-    }, [ownerDocument, modalRootId]);
-    return !!container ? (ReactDOM.createPortal(React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
+    return (React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
         React.createElement(Dialog.Backdrop, null),
         React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
             React.createElement(Dialog.TitleBar, { titleText: title }),
-            children)), container)) : (React.createElement(React.Fragment, null));
+            children)));
 });
 export default Modal;

package/esm/core/NonIdealState/NonIdealState.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/non-ideal-state.css';
 declare type NonIdealStateProps = {
     /**
      * An svg component, preferably from @itwin/itwinui-illustrations-react.

package/esm/core/NonIdealState/NonIdealState.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { Box } from '../utils/index.js';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/non-ideal-state.css';
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
  * Works well with svgs from @itwin/itwinui-illustrations-react.

package/esm/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.

package/esm/core/NotificationMarker/NotificationMarker.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { Box } from '../utils/index.js';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * A small notification circle to the top-right of the passed children prop.
  * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 declare type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.

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

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 /**
  * Shows progress on a linear bar
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.

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

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCheckmarkSmall, SvgImportantSmall, Box, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 /**
  * Circular Progress Indicator
  * @example

package/esm/core/Radio/Radio.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio.css';
 declare type RadioProps = {
     /**
      * Label of the radio.

package/esm/core/Radio/Radio.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio.css';
 /**
  * Basic radio input component
  * @example

package/esm/core/RadioTiles/RadioTile.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 declare type RadioTileProps = {
     /**
      * Icon to be used.

package/esm/core/RadioTiles/RadioTile.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 import { Box } from '../utils/index.js';
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/SearchBox/SearchBox.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
-import '@itwin/itwinui-css/css/searchbox.css';
 declare type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.

package/esm/core/SearchBox/SearchBox.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { InputFlexContainer, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, mergeEventHandlers, Box, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/searchbox.css';
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
     const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
@@ -15,16 +14,16 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
     const inputRef = React.useRef(null);
     const openButtonRef = React.useRef(null);
     const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-    const isExpanded = isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : localExpanded;
+    const isExpanded = isExpandedProp ?? localExpanded;
     const onCollapse = () => {
         setLocalExpanded(false);
-        onCollapseProp === null || onCollapseProp === void 0 ? void 0 : onCollapseProp();
-        queueMicrotask(() => { var _a; return (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        onCollapseProp?.();
+        queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
     };
     const onExpand = () => {
         setLocalExpanded(true);
-        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp();
-        queueMicrotask(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        onExpandProp?.();
+        queueMicrotask(() => inputRef.current?.focus({ preventScroll: true }));
     };
     return (React.createElement(SearchBoxContext.Provider, { value: {
             size,
@@ -38,7 +37,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
             isExpanded,
             expandable,
         } },
-        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children ?? (React.createElement(React.Fragment, null,
             React.createElement(SearchBoxCollapsedState, null,
                 React.createElement(SearchBoxExpandButton, null)),
             React.createElement(SearchBoxExpandedState, null,
@@ -52,7 +51,7 @@ const SearchBoxCollapsedState = ({ children, }) => {
     if (!expandable || isExpanded) {
         return null;
     }
-    return React.createElement(React.Fragment, null, children !== null && children !== void 0 ? children : React.createElement(SearchBoxExpandButton, null));
+    return React.createElement(React.Fragment, null, children ?? React.createElement(SearchBoxExpandButton, null));
 };
 SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
 // ----------------------------------------------------------------------------
@@ -67,7 +66,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 // ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
 // ----------------------------------------------------------------------------
@@ -79,28 +78,28 @@ const SearchBoxInput = React.forwardRef((props, ref) => {
             setInputId(idProp);
         }
     }, [idProp, inputId, setInputId]);
-    return (React.createElement(Box, { as: 'input', id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
+    return (React.createElement(Box, { as: 'input', id: idProp ?? inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------
 const SearchBoxButton = React.forwardRef((props, ref) => {
     const { children, ...rest } = props;
     const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
-    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
 // ----------------------------------------------------------------------------
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     const { children, onClick: onClickProp, ...rest } = props;
     const { onCollapse, size: sizeContext, isDisabled, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCloseSmall, null)));
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children ?? React.createElement(SvgCloseSmall, null)));
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
     const { children, className, onClick: onClickProp, ...rest } = props;
     const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------

package/esm/core/Select/Select.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PopoverProps, CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 export declare type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.

package/esm/core/Select/Select.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Menu, MenuItem } from '../Menu/index.js';
 import { SvgCaretDownSmall, Popover, useId, AutoclearingHiddenLiveRegion, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 import SelectTag from './SelectTag.js';
 import SelectTagContainer from './SelectTagContainer.js';
 const isMultipleEnabled = (variable, multiple) => {
@@ -66,24 +65,22 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 export const Select = (props) => {
-    var _a;
     const uid = useId();
     const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, triggerProps, ...rest } = props;
     const [isOpenState, setIsOpen] = React.useState(false);
-    const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
+    const isOpen = popoverProps?.visible ?? isOpenState;
     const [minWidth, setMinWidth] = React.useState(0);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const selectRef = React.useRef(null);
     const toggleButtonRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
         setIsOpen(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+        onShow?.(instance);
     }, [onShow]);
     const onHideHandler = React.useCallback((instance) => {
-        var _a;
         setIsOpen(false);
-        (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // move focus back to select button
-        onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+        selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
+        onHide?.(instance);
     }, [onHide]);
     React.useEffect(() => {
         if (selectRef.current && !disabled && setFocus) {
@@ -113,13 +110,12 @@ export const Select = (props) => {
     };
     const menuItems = React.useMemo(() => {
         return options.map((option, index) => {
-            var _a;
             const isSelected = isMultipleEnabled(value, multiple)
-                ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
+                ? value?.includes(option.value) ?? false
                 : value === option.value;
             const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(MenuItem, null, option.label));
             const { label, icon, startIcon: startIconProp, ...restOption } = option;
-            const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
+            const startIcon = startIconProp ?? icon;
             return React.cloneElement(menuItem, {
                 key: `${label}-${index}`,
                 isSelected,
@@ -129,11 +125,11 @@ export const Select = (props) => {
                         return;
                     }
                     if (isSingleOnChange(onChange, multiple)) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+                        onChange?.(option.value);
                         setIsOpen(false);
                     }
                     else {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
+                        onChange?.(option.value, isSelected ? 'removed' : 'added');
                     }
                     // update live region
                     if (isMultipleEnabled(value, multiple)) {
@@ -150,7 +146,7 @@ export const Select = (props) => {
                 },
                 ref: (el) => {
                     if (isSelected && !multiple) {
-                        el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+                        el?.scrollIntoView({ block: 'nearest' });
                     }
                 },
                 role: 'option',
@@ -176,15 +172,14 @@ export const Select = (props) => {
                     maxWidth: `min(${minWidth * 2}px, 90vw)`,
                     ...menuStyle,
                 }, id: `${uid}-menu`, key: `${uid}-menu` }, menuItems), placement: 'bottom-start', aria: { content: null }, onShow: onShowHandler, onHide: onHideHandler, ...popoverProps, visible: isOpen, onClickOutside: (_, { target }) => {
-                var _a;
-                if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                if (!toggleButtonRef.current?.contains(target)) {
                     setIsOpen(false);
                 }
             } },
             React.createElement(Box, { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: cx('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
-                }, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.className) },
+                }, triggerProps?.className) },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement(Box, { as: 'span', className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         React.createElement(Box, { as: 'span', "aria-hidden": true, ref: toggleButtonRef, className: cx('iui-end-icon', {
@@ -196,8 +191,7 @@ export const Select = (props) => {
         multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null));
 };
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
-    var _a;
-    const startIcon = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.startIcon) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
+    const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
     return (React.createElement(React.Fragment, null,
         selectedItem &&
             selectedItemRenderer &&

package/esm/core/Select/SelectTag.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 declare type SelectTagProps = {
     /**
      * Text inside the tag.

package/esm/core/Select/SelectTag.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 /**
  * Tag for showing selected value in `Select`.
  * @private

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 declare type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/esm/core/SideNavigation/SideNavigation.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { WithCSSTransition, SvgChevronRight, Box } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { Tooltip } from '../Tooltip/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Left side navigation menu component.
  * @example
@@ -30,7 +29,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     }, [isExpanded]);
     const ExpandButton = (React.createElement(IconButton, { className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
             _setIsExpanded((expanded) => !expanded);
-            onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
+            onExpanderClick?.();
         }, [onExpanderClick]) },
         React.createElement(SvgChevronRight, null)));
     return (React.createElement(Box, { className: cx('iui-side-navigation-wrapper', className), ref: forwardedRef, ...rest },
@@ -41,7 +40,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
             expanderPlacement === 'top' && ExpandButton,
             React.createElement(Box, { className: 'iui-sidenav-content' },
                 React.createElement(Box, { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(Box, { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
+                React.createElement(Box, { className: 'iui-bottom' }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
             expanderPlacement === 'bottom' && ExpandButton),
         submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
 });

package/esm/core/SideNavigation/SidenavButton.d.ts

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { ButtonProps } from '../Buttons/Button/Button.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 declare type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,

package/esm/core/SideNavigation/SidenavButton.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Button } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.

package/esm/core/SideNavigation/SidenavSubmenu.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example

package/esm/core/SideNavigation/SidenavSubmenu.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example

package/esm/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 declare type SidenavSubmenuHeaderProps = {
     /**
      * Actions shown at the end of the submenu label.

package/esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/skip-to-content.css';
 declare type SkipToContentLinkProps = {
     /**
      * The id of the main content that the link directs to. Don't forget the #!

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-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.

package/esm/core/Slider/Slider.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/slider.css';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TooltipProps } from '../Tooltip/Tooltip.js';
 /**