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

package/README.md

@@ -1,5 +1,14 @@
 <p align="center">
-  <img src="https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-logo.png" alt="iTwinUI logo" />
+  <picture>
+    <source
+      media='(prefers-color-scheme: dark)'
+      srcSet='https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-new-dark-logo.png'
+    />
+    <img
+      src='https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-new-logo.png'
+      alt='iTwinUI logo'
+    />
+  </picture>
 </p>
 
 <h1 align="center">iTwinUI-react</h1>

package/cjs/core/Alert/Alert.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ 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 classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/alert.css");
 /**
  * A small box to quickly grab user attention and communicate a brief message
@@ -49,15 +27,15 @@ require("@itwin/itwinui-css/css/alert.css");
  *   This is a positive alert with a clickable text
  * </Alert>
  */
-var Alert = function (props) {
-    var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? 'informational' : _a, clickableText = props.clickableText, clickableTextProps = props.clickableTextProps, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "clickableTextProps", "onClose", "style", "isSticky"]);
+const Alert = (props) => {
+    const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, style, isSticky = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var StatusIcon = utils_1.StatusIconMap[type];
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-alert-".concat(type), { 'iui-sticky': isSticky }, className), style: style }, rest),
+    const StatusIcon = utils_1.StatusIconMap[type];
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, style: style, ...rest },
         react_1.default.createElement(StatusIcon, { className: 'iui-alert-icon' }),
         react_1.default.createElement("span", { className: 'iui-alert-message' },
             children,
-            clickableText && (react_1.default.createElement("a", __assign({}, clickableTextProps, { className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }), clickableText))),
+            clickableText && (react_1.default.createElement("a", { ...clickableTextProps, className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
         onClose && (react_1.default.createElement("button", { onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
             react_1.default.createElement("span", { className: 'iui-alert-button-icon', "aria-hidden": true },
                 react_1.default.createElement(utils_1.SvgCloseSmall, null))))));

package/cjs/core/Avatar/Avatar.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.UserIcon = exports.Avatar = exports.defaultStatusTitles = 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 classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/avatar.css");
 exports.defaultStatusTitles = {
     away: 'Away',
@@ -55,16 +33,15 @@ exports.defaultStatusTitles = {
  * <caption>X-large icon with image</caption>
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
-var Avatar = function (props) {
-    var _a, _b;
-    var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
+const Avatar = (props) => {
+    const { size = 'small', status, abbreviation, image, backgroundColor = 'white', title, translatedStatusTitles, className, style, ...rest } = props;
     (0, utils_1.useTheme)();
-    var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-avatar', (_a = {}, _a["iui-".concat(size)] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: style, ...rest }, image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         react_1.default.createElement("span", { className: 'iui-stroke' }),
-        status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', (_b = {},
-                _b["iui-".concat(status)] = !!status,
-                _b)), "aria-label": statusTitles[status] }))));
+        status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
+                [`iui-${status}`]: !!status,
+            }), "aria-label": statusTitles[status] }))));
 };
 exports.Avatar = Avatar;
 /**

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.UserIconGroup = 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 react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/avatar.css");
 /**
  * Group Avatars together.
@@ -61,33 +39,30 @@ require("@itwin/itwinui-css/css/avatar.css");
  *  />
  * </AvatarGroup>
  */
-var AvatarGroup = function (props) {
-    var _a;
-    var maxLength = 99;
-    var children = props.children, _b = props.animated, animated = _b === void 0 ? false : _b, _c = props.stacked, stacked = _c === void 0 ? true : _c, _d = props.maxIcons, maxIcons = _d === void 0 ? 5 : _d, _e = props.iconSize, iconSize = _e === void 0 ? 'small' : _e, countIconProps = props.countIconProps, className = props.className, rest = __rest(props, ["children", "animated", "stacked", "maxIcons", "iconSize", "countIconProps", "className"]);
-    var childrenArray = react_1.default.Children.toArray(children);
-    var childrenLength = childrenArray.length;
+const AvatarGroup = (props) => {
+    const maxLength = 99;
+    const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
+    const childrenArray = react_1.default.Children.toArray(children);
+    const childrenLength = childrenArray.length;
     (0, utils_1.useTheme)();
-    var getAvatarList = function (count) {
-        return childrenArray.slice(0, count).map(function (child) {
-            return react_1.default.cloneElement(child, {
-                status: undefined,
-                size: iconSize,
-            });
-        });
+    const getAvatarList = (count) => {
+        return childrenArray.slice(0, count).map((child) => react_1.default.cloneElement(child, {
+            status: undefined,
+            size: iconSize,
+        }));
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-avatar-list', {
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-avatar-list', {
                 'iui-animated': animated,
                 'iui-stacked': stacked,
-            }, className) }, rest),
+            }, className), ...rest },
             childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
             childrenArray.length > maxIcons + 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                 getAvatarList(maxIcons),
-                react_1.default.createElement("div", __assign({}, countIconProps, { className: (0, classnames_1.default)('iui-avatar', (_a = {}, _a["iui-".concat(iconSize)] = iconSize !== 'medium', _a), 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
+                react_1.default.createElement("div", { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
                     react_1.default.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
-                        ? "".concat(childrenLength - maxIcons)
-                        : "".concat(maxLength, "+")),
+                        ? `${childrenLength - maxIcons}`
+                        : `${maxLength}+`),
                     react_1.default.createElement("span", { className: 'iui-stroke' })))))));
 };
 exports.AvatarGroup = AvatarGroup;

package/cjs/core/Backdrop/Backdrop.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,12 +8,12 @@ exports.Backdrop = 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 react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/backdrop.css");
-exports.Backdrop = react_1.default.forwardRef(function (props, ref) {
-    var _a = props.isVisible, isVisible = _a === void 0 ? true : _a, className = props.className, rest = __rest(props, ["isVisible", "className"]);
+exports.Backdrop = react_1.default.forwardRef((props, ref) => {
+    const { isVisible = true, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref }, rest)));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
 });

package/cjs/core/Badge/Badge.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,14 +8,14 @@ exports.Badge = 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 react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/badge.css");
 /**
  * Helper function that returns one of the preset badge color values.
  */
-var getBadgeColorValue = function (color) {
+const getBadgeColorValue = (color) => {
     if (!color) {
         return '';
     }
@@ -61,12 +39,16 @@ var getBadgeColorValue = function (color) {
  * <Badge backgroundColor="sunglow">Label</Badge>
  * <Badge backgroundColor="positive">Label</Badge>
  */
-var Badge = function (props) {
-    var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
+const Badge = (props) => {
+    const { backgroundColor, style, className, children, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _style = backgroundColor
-        ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({}, style);
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-badge', className), style: _style }, rest), children));
+    const _style = backgroundColor
+        ? {
+            '--iui-badge-background-color': getBadgeColorValue(backgroundColor),
+            ...style,
+        }
+        : { ...style };
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-badge', className), style: _style, ...rest }, children));
 };
 exports.Badge = Badge;
 exports.default = exports.Badge;

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.Breadcrumbs = 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 react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/breadcrumbs.css");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -56,12 +34,12 @@ require("@itwin/itwinui-css/css/breadcrumbs.css");
  *   <span>Current level</span>
  * </Breadcrumbs>
  */
-exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
-    var items = props.children, _a = props.currentIndex, currentIndex = _a === void 0 ? items.length - 1 : _a, separator = props.separator, overflowButton = props.overflowButton, className = props.className, rest = __rest(props, ["children", "currentIndex", "separator", "overflowButton", "className"]);
+exports.Breadcrumbs = react_1.default.forwardRef((props, ref) => {
+    const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _b = (0, utils_1.useOverflow)(items), overflowRef = _b[0], visibleCount = _b[1];
-    var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
-    return (react_1.default.createElement("nav", __assign({ className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb' }, rest),
+    const [overflowRef, visibleCount] = (0, utils_1.useOverflow)(items);
+    const refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
+    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
         react_1.default.createElement("ol", { className: 'iui-breadcrumbs-list' },
             visibleCount > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
@@ -73,8 +51,8 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
                 .slice(visibleCount > 1
                 ? items.length - visibleCount + 1
                 : items.length - 1)
-                .map(function (_, _index) {
-                var index = visibleCount > 1
+                .map((_, _index) => {
+                const index = visibleCount > 1
                     ? 1 + (items.length - visibleCount) + _index
                     : items.length - 1;
                 return (react_1.default.createElement(react_1.default.Fragment, { key: index },
@@ -82,17 +60,13 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
                     index < items.length - 1 && (react_1.default.createElement(Separator, { separator: separator }))));
             }))));
 });
-var ListItem = function (_a) {
-    var _b;
-    var item = _a.item, isActive = _a.isActive;
+const ListItem = ({ item, isActive, }) => {
+    var _a;
     return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, react_1.default.isValidElement(item)
         ? react_1.default.cloneElement(item, {
-            'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : isActive) ? 'location' : undefined,
+            'aria-current': ((_a = item.props['aria-current']) !== null && _a !== void 0 ? _a : isActive) ? 'location' : undefined,
         })
         : item));
 };
-var Separator = function (_a) {
-    var separator = _a.separator;
-    return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(utils_1.SvgChevronRight, null)));
-};
+const Separator = ({ separator }) => (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(utils_1.SvgChevronRight, null)));
 exports.default = exports.Breadcrumbs;

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.ButtonGroup = 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 react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Group buttons together for common actions.
@@ -62,17 +40,17 @@ require("@itwin/itwinui-css/css/button.css");
  *   {buttons}
  * </ButtonGroup>
  */
-exports.ButtonGroup = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, rest = __rest(props, ["children", "className", "overflowButton", "overflowPlacement", "orientation"]);
-    var items = react_1.default.useMemo(function () { var _a; return (_a = react_1.default.Children.map(children, function (child) { return react_1.default.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
+exports.ButtonGroup = react_1.default.forwardRef((props, ref) => {
+    const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    const items = react_1.default.useMemo(() => { var _a; return (_a = react_1.default.Children.map(children, (child) => react_1.default.createElement("div", null, child))) !== null && _a !== void 0 ? _a : []; }, [children]);
     (0, utils_1.useTheme)();
-    var _c = (0, utils_1.useOverflow)(items, !overflowButton, orientation), overflowRef = _c[0], visibleCount = _c[1];
-    var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)({
+    const [overflowRef, visibleCount] = (0, utils_1.useOverflow)(items, !overflowButton, orientation);
+    const refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, className), "aria-orientation": orientation, ref: refs }, rest),
+        }, className), "aria-orientation": orientation, ref: refs, ...rest },
         react_1.default.createElement(react_1.default.Fragment, null,
             visibleCount < items.length &&
                 overflowButton &&

package/cjs/core/Buttons/Button/Button.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.Button = 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 classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Generic button component
@@ -43,10 +21,10 @@ require("@itwin/itwinui-css/css/button.css");
  * <Button size='small' styleType='cta'>This is a small call to action button</Button>
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
-exports.Button = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, size = props.size, style = props.style, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, _b = props.type, type = _b === void 0 ? 'button' : _b, startIcon = props.startIcon, endIcon = props.endIcon, _c = props.as, Element = _c === void 0 ? 'button' : _c, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon", "as"]);
+exports.Button = react_1.default.forwardRef((props, ref) => {
+    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, as: Element = 'button', ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type }, rest),
+    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
         startIcon && (react_1.default.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
         children && react_1.default.createElement("span", null, children),
         endIcon && (react_1.default.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, endIcon))));