@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 3.0.0-dev.5
+
+### Major Changes
+
+- [#1370](https://github.com/iTwin/iTwinUI/pull/1370): ProgressLinear has been refactored to be a single `<div>`.
+- [#1371](https://github.com/iTwin/iTwinUI/pull/1371): Checkbox: `className` and `style` will now always be applied on the checkbox input element. Added new `wrapperProps` and `labelProps` to allow for styling of wrapper and label elements.
+- [#1389](https://github.com/iTwin/iTwinUI/pull/1389): iTwinUI now correctly supports both ESM and CJS environments.
+- [#1369](https://github.com/iTwin/iTwinUI/pull/1369): Added new `Breadcrumbs.Item` subcomponent to use for custom `a` and `button` elements within the `Breadcrumbs`
+- [#1400](https://github.com/iTwin/iTwinUI/pull/1400): `ErrorPage` will now dynamically import illustrations. The peer dependency on `@itwin/itwinui-illustrations-react` will need to be manually installed if using `ErrorPage`.
+- [#1354](https://github.com/iTwin/iTwinUI/pull/1354): Updated Expandable Block component to be composition of customizable subcomponents: <ExpandableBlock.Header/>, <ExpandableBlock.ExpandIcon/>, <ExpandableBlock.LabelArea/>, <ExpandableBlock.Title/>, <ExpandableBlock.Caption/>, <ExpandableBlock.EndIcon/>, <ExpandableBlock.Content/>
+
+  The following props have been removed as they are now subcomponents: `title`, `caption`, `endIcon`
+
+- [#1406](https://github.com/iTwin/iTwinUI/pull/1406): Removed `setFocus` prop from Checkbox, ColorPicker, ComboBox, Input, LabeledInput, LabeledTextarea, Radio, RadioTile, Select, Slider, ToggleSwitch. Users can use `ref` to focus the element.
+
+### Minor Changes
+
+- [#1373](https://github.com/iTwin/iTwinUI/pull/1373): Converted all physical CSS properties to their logical equivalents.
+- [#1328](https://github.com/iTwin/iTwinUI/pull/1328): Created new Overlay component with customizable subcomponents: Overlay.Wrapper, Overlay.HiddenContent, Overlay.Overlay
+- [#1403](https://github.com/iTwin/iTwinUI/pull/1403): Updated `DropdownMenu` to additionally accept list of JSX elements or a JSX fragment for `menuItems` prop,
+- [#1407](https://github.com/iTwin/iTwinUI/pull/1407): Adding the ability for each node element in `NonIdealState` to have a custom `className`.
+
+### Patch Changes
+
+- [#1354](https://github.com/iTwin/iTwinUI/pull/1354): Expandable block animation now uses pure css instead of javascript for transitioning.
+- [#1389](https://github.com/iTwin/iTwinUI/pull/1389): The build output is now more readable, using a combination of `prettier` for formatting and `tslib` for import helpers.
+- [#1397](https://github.com/iTwin/iTwinUI/pull/1397): Avatar will no longer incorrectly set aria-label on the status dot.
+- [#1404](https://github.com/iTwin/iTwinUI/pull/1404): `aria-orientation` attribute removed from ButtonGroup to meet accessibility requirements.
+
 ## 3.0.0-dev.4
 
 ### Major Changes
@@ -74,6 +103,14 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.11.8
+
+### Patch Changes
+
+- [#1410](https://github.com/iTwin/iTwinUI/pull/1410): Fixed an issue in `Tabs` where tabs-list was becoming too tall when the tabpanel didn't have enough content inside.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.3
+
 ## 2.11.7
 
 ### Patch Changes

package/cjs/core/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type AlertOwnProps = {
+type AlertOwnProps = {
     /**
      * Type of the alert.
      * @default 'informational'
@@ -42,12 +42,12 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps>
     /**
      * 	Alert icon subcomponent
      */
-    Icon: PolymorphicForwardRefComponent<"span", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "as" | "fill" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        size?: "small" | "auto" | "large" | "medium" | import("../utils/types.js").AnyString | undefined;
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
-    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }>;
     /**

package/cjs/core/Alert/Alert.js

@@ -1,54 +1,48 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Alert = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Buttons/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const index_js_2 = require('../Buttons/index.js');
 const AlertContext = React.createContext(undefined);
 const AlertComponent = React.forwardRef((props, ref) => {
-    const { children, className, type = 'informational', isSticky = false, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
-        React.createElement(AlertContext.Provider, { value: { type } }, children)));
+  const {
+    children,
+    className,
+    type = 'informational',
+    isSticky = false,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-alert', className),
+      'data-iui-status': type,
+      'data-iui-variant': isSticky ? 'sticky' : undefined,
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(AlertContext.Provider, { value: { type } }, children),
+  );
 });
 AlertComponent.displayName = 'Alert';
 // ----------------------------------------------------------------------------
 // Alert.Icon component
 const AlertIcon = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { type } = (0, index_js_1.useSafeContext)(AlertContext);
-    const StatusIcon = index_js_1.StatusIconMap[type];
-    return (React.createElement(index_js_1.Icon, { fill: type, ref: ref, ...rest }, children ?? React.createElement(StatusIcon, null)));
+  const { children, ...rest } = props;
+  const { type } = (0, index_js_1.useSafeContext)(AlertContext);
+  const StatusIcon = index_js_1.StatusIconMap[type];
+  return React.createElement(
+    index_js_1.Icon,
+    { fill: type, ref: ref, ...rest },
+    children ?? React.createElement(StatusIcon, null),
+  );
 });
 AlertIcon.displayName = 'Alert.Icon';
 // ----------------------------------------------------------------------------
@@ -58,15 +52,34 @@ AlertMessage.displayName = 'Alert.Message';
 // ----------------------------------------------------------------------------
 // Alert.Action component
 const AlertAction = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: (!!props.href ? 'a' : 'button'), className: (0, classnames_1.default)('iui-alert-link', className), ref: ref, ...rest }, children));
+  const { children, className, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: !!props.href ? 'a' : 'button',
+      className: (0, classnames_1.default)('iui-alert-link', className),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 AlertAction.displayName = 'Alert.Action';
 // ----------------------------------------------------------------------------
 // Alert.CloseButton component
 const AlertCloseButton = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    return (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'Close', ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgCloseSmall, null)));
+  const { children, ...rest } = props;
+  return React.createElement(
+    index_js_2.IconButton,
+    {
+      styleType: 'borderless',
+      size: 'small',
+      'aria-label': 'Close',
+      ref: ref,
+      ...rest,
+    },
+    children ?? React.createElement(index_js_1.SvgCloseSmall, null),
+  );
 });
 AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
@@ -96,21 +109,21 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
  * </Alert>
  */
 exports.Alert = Object.assign(AlertComponent, {
-    /**
-     * 	Alert icon subcomponent
-     */
-    Icon: AlertIcon,
-    /**
-     * 	Alert message subcomponent
-     */
-    Message: AlertMessage,
-    /**
-     * 	Alert action subcomponent for the link you want to provide.
-     */
-    Action: AlertAction,
-    /**
-     * 	Alert close button subcomponent
-     */
-    CloseButton: AlertCloseButton,
+  /**
+   * 	Alert icon subcomponent
+   */
+  Icon: AlertIcon,
+  /**
+   * 	Alert message subcomponent
+   */
+  Message: AlertMessage,
+  /**
+   * 	Alert action subcomponent for the link you want to provide.
+   */
+  Action: AlertAction,
+  /**
+   * 	Alert close button subcomponent
+   */
+  CloseButton: AlertCloseButton,
 });
 exports.default = exports.Alert;

package/cjs/core/Alert/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Alert = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Alert_js_1 = require("./Alert.js");
-Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_js_1.Alert; } });
+var Alert_js_1 = require('./Alert.js');
+Object.defineProperty(exports, 'Alert', {
+  enumerable: true,
+  get: function () {
+    return Alert_js_1.Alert;
+  },
+});
 exports.default = './Alert';

package/cjs/core/Avatar/Avatar.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-declare type StatusTitles = {
+export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;
 };
-declare type AvatarProps = {
+type AvatarProps = {
     /**
      * Size of an avatar.
      * @default 'small'

package/cjs/core/Avatar/Avatar.js

@@ -1,44 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Avatar = exports.defaultStatusTitles = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 exports.defaultStatusTitles = {
-    away: 'Away',
-    busy: 'Busy',
-    offline: 'Offline',
-    online: 'Online',
+  away: 'Away',
+  busy: 'Busy',
+  offline: 'Offline',
+  online: 'Online',
 };
 /**
  * Basic avatar component
@@ -56,14 +31,55 @@ exports.defaultStatusTitles = {
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
 exports.Avatar = React.forwardRef((props, ref) => {
-    const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
-    const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ref: ref, ...rest },
-        !image && (React.createElement(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, abbreviation?.substring(0, 2))),
-        image,
-        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-stroke' }),
-        status && (React.createElement(index_js_1.Box, { as: 'span', title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
-                [`iui-${status}`]: !!status,
-            }), "aria-label": statusTitles[status] }))));
+  const {
+    size = 'small',
+    status,
+    abbreviation,
+    image,
+    backgroundColor,
+    title,
+    translatedStatusTitles,
+    className,
+    style,
+    ...rest
+  } = props;
+  const statusTitles = {
+    ...exports.defaultStatusTitles,
+    ...translatedStatusTitles,
+  };
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'span',
+      className: (0, classnames_1.default)(
+        'iui-avatar',
+        { [`iui-${size}`]: size !== 'medium' },
+        className,
+      ),
+      title: title,
+      style: { backgroundColor, ...style },
+      ref: ref,
+      ...rest,
+    },
+    !image &&
+      React.createElement(
+        index_js_1.Box,
+        { as: 'abbr', className: 'iui-initials' },
+        abbreviation?.substring(0, 2),
+      ),
+    image,
+    React.createElement(index_js_1.Box, {
+      as: 'span',
+      className: 'iui-stroke',
+    }),
+    status &&
+      React.createElement(index_js_1.Box, {
+        as: 'span',
+        title: statusTitles[status],
+        className: (0, classnames_1.default)('iui-status', {
+          [`iui-${status}`]: !!status,
+        }),
+      }),
+  );
 });
 exports.default = exports.Avatar;

package/cjs/core/Avatar/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Avatar = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Avatar_js_1 = require("./Avatar.js");
-Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_js_1.Avatar; } });
+var Avatar_js_1 = require('./Avatar.js');
+Object.defineProperty(exports, 'Avatar', {
+  enumerable: true,
+  get: function () {
+    return Avatar_js_1.Avatar;
+  },
+});
 exports.default = './Avatar';

package/cjs/core/AvatarGroup/AvatarGroup.d.ts

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

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.AvatarGroup = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Group Avatars together.
  *
@@ -62,27 +37,68 @@ const index_js_1 = require("../utils/index.js");
  * </AvatarGroup>
  */
 exports.AvatarGroup = React.forwardRef((props, ref) => {
-    const maxLength = 99;
-    const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
-    const childrenArray = React.Children.toArray(children);
-    const childrenLength = childrenArray.length;
-    const getAvatarList = (count) => {
-        return childrenArray.slice(0, count).map((child) => React.cloneElement(child, {
-            status: undefined,
-            size: iconSize,
-        }));
-    };
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-avatar-list', {
-            'iui-animated': animated,
-            'iui-stacked': stacked,
-        }, className), ref: ref, ...rest },
-        childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
-        childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
-            getAvatarList(maxIcons),
-            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) },
-                React.createElement(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, childrenLength <= maxLength
-                    ? `${childrenLength - maxIcons}`
-                    : `${maxLength}+`),
-                React.createElement(index_js_1.Box, { className: 'iui-stroke' }))))));
+  const maxLength = 99;
+  const {
+    children,
+    animated = false,
+    stacked = true,
+    maxIcons = 5,
+    iconSize = 'small',
+    countIconProps,
+    className,
+    ...rest
+  } = props;
+  const childrenArray = React.Children.toArray(children);
+  const childrenLength = childrenArray.length;
+  const getAvatarList = (count) => {
+    return childrenArray.slice(0, count).map((child) =>
+      React.cloneElement(child, {
+        status: undefined,
+        size: iconSize,
+      }),
+    );
+  };
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-avatar-list',
+        {
+          'iui-animated': animated,
+          'iui-stacked': stacked,
+        },
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
+    childrenArray.length > maxIcons + 1 &&
+      React.createElement(
+        React.Fragment,
+        null,
+        getAvatarList(maxIcons),
+        React.createElement(
+          index_js_1.Box,
+          {
+            ...countIconProps,
+            className: (0, classnames_1.default)(
+              'iui-avatar',
+              { [`iui-${iconSize}`]: iconSize !== 'medium' },
+              'iui-avatar-count',
+              countIconProps?.className,
+            ),
+          },
+          React.createElement(
+            index_js_1.Box,
+            { as: 'abbr', className: 'iui-initials' },
+            childrenLength <= maxLength
+              ? `${childrenLength - maxIcons}`
+              : `${maxLength}+`,
+          ),
+          React.createElement(index_js_1.Box, { className: 'iui-stroke' }),
+        ),
+      ),
+  );
 });
 exports.default = exports.AvatarGroup;

package/cjs/core/AvatarGroup/index.js

@@ -1,10 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.AvatarGroup = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var AvatarGroup_js_1 = require("./AvatarGroup.js");
-Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_js_1.AvatarGroup; } });
+var AvatarGroup_js_1 = require('./AvatarGroup.js');
+Object.defineProperty(exports, 'AvatarGroup', {
+  enumerable: true,
+  get: function () {
+    return AvatarGroup_js_1.AvatarGroup;
+  },
+});
 exports.default = './AvatarGroup';

package/cjs/core/Backdrop/Backdrop.d.ts

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

package/cjs/core/Backdrop/Backdrop.js

@@ -1,40 +1,23 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Backdrop = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 exports.Backdrop = React.forwardRef((props, ref) => {
-    const { isVisible = true, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
+  const { isVisible = true, className, ...rest } = props;
+  return React.createElement(index_js_1.Box, {
+    className: (0, classnames_1.default)(
+      'iui-backdrop',
+      { 'iui-backdrop-visible': isVisible },
+      className,
+    ),
+    ref: ref,
+    ...rest,
+  });
 });