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

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 declare type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;

package/esm/core/Avatar/Avatar.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/avatar.css';
 export const defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',
@@ -31,7 +30,7 @@ export const Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
     return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ref: ref, ...rest },
-        !image && (React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+        !image && (React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, abbreviation?.substring(0, 2))),
         image,
         React.createElement(Box, { as: 'span', className: 'iui-stroke' }),
         status && (React.createElement(Box, { as: 'span', title: statusTitles[status], className: cx('iui-status', {

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

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

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 /**
  * Group Avatars together.
  *
@@ -51,7 +50,7 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
         childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
         childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
             getAvatarList(maxIcons),
-            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
+            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) },
                 React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, childrenLength <= maxLength
                     ? `${childrenLength - maxIcons}`
                     : `${maxLength}+`),

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/backdrop.css';
 export declare type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.

package/esm/core/Backdrop/Backdrop.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/backdrop.css';
 export const Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
     return (React.createElement(Box, { className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));

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

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

package/esm/core/Badge/Badge.js

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

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

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

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, useOverflow, SvgChevronRight, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -54,12 +53,11 @@ export const Breadcrumbs = React.forwardRef((props, ref) => {
             }))));
 });
 const ListItem = ({ item, isActive, }) => {
-    var _a;
     return (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
         ? React.cloneElement(item, {
-            'aria-current': ((_a = item.props['aria-current']) !== null && _a !== void 0 ? _a : isActive) ? 'location' : undefined,
+            'aria-current': item.props['aria-current'] ?? isActive ? 'location' : undefined,
         })
         : item));
 };
-const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(SvgChevronRight, null)));
+const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(SvgChevronRight, null)));
 export default Breadcrumbs;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -36,10 +35,7 @@ import '@itwin/itwinui-css/css/button.css';
  */
 export const ButtonGroup = React.forwardRef((props, ref) => {
     const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const items = React.useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)) === null || _a === void 0 ? void 0 : _a.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
-    }, [children]);
+    const items = React.useMemo(() => React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)?.filter(Boolean) ?? [], [children]);
     const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
     const refs = useMergedRefs(overflowRef, ref);
     return (React.createElement(Box, { className: cx({

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonProps = {
     /**
      * Modify size of the button.

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

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

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

@@ -2,7 +2,6 @@
 import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselProps = {
     /**
      * Index of the currently shown slide.
@@ -39,7 +38,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
         } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
@@ -47,7 +46,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
         } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {

package/esm/core/Carousel/Carousel.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { getRandomValue, useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';
@@ -15,7 +14,7 @@ import { CarouselNavigation } from './CarouselNavigation.js';
 const CarouselComponent = React.forwardRef((props, ref) => {
     const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
     // Generate a stateful random id if not specified
-    const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${getRandomValue(10)}`; });
+    const [id] = React.useState(() => props.id ?? `iui-carousel-${getRandomValue(10)}`);
     const isManuallyUpdating = React.useRef(false);
     const carouselRef = React.useRef(null);
     const refs = useMergedRefs(carouselRef, ref);
@@ -23,7 +22,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     const scrollToSlide = React.useRef(() => { }); // stub function populated in CarouselSlider
     const justMounted = React.useRef(true);
     React.useEffect(() => {
-        var _a;
         setCurrentIndex(userActiveIndex);
         scrollToSlide.current(userActiveIndex, {
             instant: justMounted.current,
@@ -31,7 +29,7 @@ const CarouselComponent = React.forwardRef((props, ref) => {
         // re-focus the carousel for keyboard nav, but not on first mount
         // because it shows outline and might interfere with other components
         if (!justMounted.current) {
-            (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            carouselRef.current?.focus({ preventScroll: true });
         }
         justMounted.current = false;
     }, [userActiveIndex]);
@@ -66,8 +64,7 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     };
     const userOnSlideChange = React.useRef(onSlideChange);
     React.useEffect(() => {
-        var _a;
-        (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
+        userOnSlideChange.current?.(currentIndex);
     }, [currentIndex]);
     return (React.createElement(Box, { as: 'section', "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
         React.createElement(CarouselContext.Provider, { value: {

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;

package/esm/core/Carousel/CarouselDotsList.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box, } from '../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
@@ -31,18 +30,17 @@ import '@itwin/itwinui-css/css/carousel.css';
  * />
  */
 export const CarouselDotsList = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
     const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
     const context = React.useContext(CarouselContext);
-    const slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : React.Children.count(children);
-    const currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
-    const idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
+    const slideCount = length ?? context?.slideCount ?? React.Children.count(children);
+    const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+    const idPrefix = props.id ?? context?.idPrefix;
     const handleSlideChange = React.useCallback((index) => {
         if (context) {
             context.setCurrentIndex(index);
             context.scrollToSlide.current(index);
         }
-        onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+        onSlideChange?.(index);
     }, [context, onSlideChange]);
     const justMounted = React.useRef(true);
     const [visibleCount, setVisibleCount] = React.useState(slideCount);
@@ -56,7 +54,7 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         const dotWidth = listRef.current.children[0].offsetWidth;
         setVisibleCount(Math.floor(width / dotWidth));
     });
-    React.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
+    React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
     const refs = useMergedRefs(ref, resizeRef, listRef);
     const firstVisibleDotIndex = React.useMemo(() => getBoundedValue(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
     const lastVisibleDotIndex = React.useMemo(() => getBoundedValue(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
@@ -80,12 +78,11 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         handleSlideChange,
     ]);
     React.useEffect(() => {
-        var _a, _b, _c;
-        const firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
+        const firstDot = listRef.current?.children[firstVisibleDotIndex];
         if (!listRef.current || !firstDot) {
             return;
         }
-        const motionOk = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        const motionOk = getWindow()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
         listRef.current.scrollTo({
             left: firstDot.offsetLeft - listRef.current.offsetLeft,
             behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
@@ -95,5 +92,5 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         }
     }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
+        React.createElement(Box, { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children ?? dots)));
 });

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

@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
     } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
@@ -17,7 +17,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
     } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {

package/esm/core/Carousel/CarouselNavigation.js

@@ -10,7 +10,7 @@ import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'nav', className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { as: 'nav', className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(Box, { className: 'iui-carousel-navigation-left' },
             React.createElement(PreviousButton, null)),
         React.createElement(CarouselDotsList, null),
@@ -25,11 +25,10 @@ const PreviousButton = React.forwardRef((props, ref) => {
     }
     const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
     return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
-            var _a;
             const prevIndex = (slideCount + currentIndex - 1) % slideCount;
             setCurrentIndex(prevIndex);
             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);
+            props?.onClick?.(e);
         } },
         React.createElement(SvgChevronLeft, null)));
 });
@@ -41,11 +40,10 @@ const NextButton = React.forwardRef((props, ref) => {
     }
     const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
     return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
-            var _a;
             const nextIndex = (slideCount + currentIndex + 1) % slideCount;
             setCurrentIndex(nextIndex);
             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);
+            props?.onClick?.(e);
         } },
         React.createElement(SvgChevronRight, null)));
 });

package/esm/core/Carousel/CarouselSlider.js

@@ -16,28 +16,24 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
         throw new Error('CarouselSlider must be used within Carousel');
     }
     const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-    const items = React.useMemo(() => {
-        var _a;
-        return (_a = React.Children.map(children, (child, index) => React.isValidElement(child)
-            ? React.cloneElement(child, {
-                id: `${idPrefix}--slide-${index}`,
-                index,
-            })
-            : child)) !== null && _a !== void 0 ? _a : [];
-    }, [children, idPrefix]);
+    const items = React.useMemo(() => React.Children.map(children, (child, index) => React.isValidElement(child)
+        ? React.cloneElement(child, {
+            id: `${idPrefix}--slide-${index}`,
+            index,
+        })
+        : child) ?? [], [children, idPrefix]);
     useIsomorphicLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);
     const refs = useMergedRefs(sliderRef, ref);
     scrollToSlide.current = (slideIndex, { instant } = {}) => {
-        var _a, _b, _c;
         isManuallyUpdating.current = true; // start manual update
-        const slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(slideIndex);
+        const slideToShow = sliderRef.current?.children.item(slideIndex);
         if (!sliderRef.current || !slideToShow) {
             return;
         }
-        const motionOk = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        const motionOk = getWindow()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
         sliderRef.current.scrollTo({
             left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
             behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
@@ -46,11 +42,10 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
     const scrollTimeout = React.useRef();
     // reset isManuallyUpdating.current to false after the last scroll event
     const handleOnScroll = React.useCallback(() => {
-        var _a, _b;
         if (scrollTimeout.current) {
-            (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
+            getWindow()?.clearTimeout(scrollTimeout.current);
         }
-        scrollTimeout.current = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+        scrollTimeout.current = getWindow()?.setTimeout(() => {
             isManuallyUpdating.current = false;
         }, 100);
     }, [isManuallyUpdating]);

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

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

package/esm/core/Checkbox/Checkbox.js

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

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,

package/esm/core/ColorPicker/ColorBuilder.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, Box, } from '../utils/index.js';
 import { Slider } from '../Slider/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
     const position = getBoundedValue(pointer, rect.top, rect.bottom);
@@ -22,7 +21,6 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
  * and a set of sliders to adjust hue and alpha values.
  */
 export const ColorBuilder = React.forwardRef((props, ref) => {
-    var _a, _b, _c;
     const { className, ...rest } = props;
     const builderRef = React.useRef();
     const refs = useMergedRefs(builderRef, ref);
@@ -30,7 +28,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     // Set values for slider
     const hueSliderColor = React.useMemo(() => ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
     const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-    const alphaValue = React.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [hsvColor.a, showAlpha]);
+    const alphaValue = React.useMemo(() => (showAlpha ? hsvColor.a ?? 1 : 1), [hsvColor.a, showAlpha]);
     // Set values for color square and color dot
     const dotColorString = React.useMemo(() => activeColor.toHexString(), [activeColor]);
     const [colorDotActive, setColorDotActive] = React.useState(false);
@@ -93,7 +91,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         event.preventDefault();
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
-    useEventListener('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+    useEventListener('pointerup', handleSquarePointerUp, builderRef.current?.ownerDocument);
     const handleSquarePointerMove = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
@@ -102,7 +100,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
-    useEventListener('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    useEventListener('pointermove', handleSquarePointerMove, builderRef.current?.ownerDocument);
     const handleSquarePointerLeave = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
@@ -110,7 +108,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
-    useEventListener('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
+    useEventListener('pointerleave', handleSquarePointerLeave, builderRef.current?.ownerDocument);
     const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     const handleColorDotKeyDown = (event) => {
@@ -154,7 +152,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
                     keysPressed.current['ArrowRight']) {
                     return;
                 }
-                onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(ColorValue.create(hsvColor));
+                onChangeComplete?.(ColorValue.create(hsvColor));
                 break;
         }
     };
@@ -163,18 +161,16 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
                 '--iui-color-field-hue': hueColorString,
                 '--iui-color-picker-selected-color': dotColorString,
             }, ref: squareRef, onPointerDown: (event) => {
-                var _a;
                 event.preventDefault();
                 updateSquareValue(event, 'onClick');
                 setColorDotActive(true);
-                (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                colorDotRef.current?.focus();
             } },
             React.createElement(Box, { className: 'iui-color-dot', style: {
                     '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
                 }, onPointerDown: () => {
-                    var _a;
                     setColorDotActive(true);
-                    (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    colorDotRef.current?.focus();
                 }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
         React.createElement(Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateHueSlider(values[0], true);

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

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