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

package/README.md

@@ -50,9 +50,7 @@ Yes, that's really all you need as you can see in this live interactive demo:
 
 ## Theming
 
-By default, all components use the light theme but we also provide support for switching to dark theme in two different ways:
-
-- Use `ThemeProvider` in your root component where you can pass one of the following values:
+By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
   - `light` (default)
   - `dark`
   - `os` (which respects the color scheme of the operating system)
@@ -62,29 +60,13 @@ import { ThemeProvider } from '@itwin/itwinui-react';
 
 const App = () => (
   <>
-    <ThemeProvider theme='dark' />
-    // Your code goes here.
+    <ThemeProvider theme='dark'>
+      {/* Your components go here. */}
+    </ThemeProvider>
   </>
 );
 ```
 
-- The `useTheme` hook also provides the same functionality as `ThemeProvider`.
-
-```jsx
-import { useTheme } from '@itwin/itwinui-react';
-
-const App = () => {
-  useTheme('dark');
-  return (
-    <>
-      // Your code goes here.
-    </>
-  );
-};
-```
-
-*Note: You only need to use one of these methods, and it only needs to be done once.*
-
 ---
 
 ## FAQ

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

@@ -15,11 +15,6 @@ export declare type AlertProps = {
      * Props for the clickable text. Used for providing `href` and other attributes.
      */
     clickableTextProps?: React.ComponentPropsWithRef<'a'>;
-    /**
-     * Action handler for the clickable text.
-     * @deprecated `clickableTextProps` should be used instead.
-     */
-    onClick?: () => void;
     /**
      * Action handler for close.
      */
@@ -41,7 +36,13 @@ export declare type AlertProps = {
  * <Alert type='positive'>This is a positive alert.</Alert>
  * <Alert type='warning'>This is a warning alert.</Alert>
  * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert type='positive' clickableText="I am a clickable text" onClick={()=>alert("Pressed")}>This is a positive alert with a clickable text</Alert>
+ * <Alert
+ *  type='positive'
+ *  clickableText="I am a clickable text"
+ *  clickableTextProps={{ href: 'https://www.example.com' }}
+ * >
+ *   This is a positive alert with a clickable text
+ * </Alert>
  */
 export declare const Alert: (props: AlertProps) => JSX.Element;
 export default Alert;

package/cjs/core/Alert/Alert.js

@@ -30,12 +30,10 @@ 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 CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/alert.css");
-var IconButton_1 = require("../Buttons/IconButton");
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
@@ -43,19 +41,26 @@ var IconButton_1 = require("../Buttons/IconButton");
  * <Alert type='positive'>This is a positive alert.</Alert>
  * <Alert type='warning'>This is a warning alert.</Alert>
  * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert type='positive' clickableText="I am a clickable text" onClick={()=>alert("Pressed")}>This is a positive alert with a clickable text</Alert>
+ * <Alert
+ *  type='positive'
+ *  clickableText="I am a clickable text"
+ *  clickableTextProps={{ href: 'https://www.example.com' }}
+ * >
+ *   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, onClick = props.onClick, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "clickableTextProps", "onClick", "onClose", "style", "isSticky"]);
+    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"]);
     (0, utils_1.useTheme)();
     var StatusIcon = utils_1.StatusIconMap[type];
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-alert', "iui-".concat(type), { 'iui-sticky': isSticky }, className), style: style }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-alert-".concat(type), { 'iui-sticky': isSticky }, className), 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({ onClick: onClick }, clickableTextProps, { className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }), clickableText))),
-        onClose && (react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onClose, "aria-label": 'Close' },
-            react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true })))));
+            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))),
+        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))))));
 };
 exports.Alert = Alert;
 exports.default = exports.Alert;

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

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/avatar.css';
+export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarStatus` (Use with `Avatar`)
+ */
+export declare type UserIconStatus = AvatarStatus;
+export declare type StatusTitles = {
+    [key in Exclude<AvatarStatus, ''>]: string;
+};
+export declare type AvatarProps = {
+    /**
+     * Size of a avatar.
+     * @default 'small'
+     */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Status/Availability of a user.
+     */
+    status?: AvatarStatus;
+    /**
+     * Text which will appear when hovering over the icon.
+     */
+    title?: string;
+    /**
+     * Abbreviation to be displayed.
+     */
+    abbreviation?: string;
+    /**
+     * User image to be displayed. MUST be an <img> element!
+     */
+    image?: JSX.Element;
+    /**
+     * Color of the icon. You can use `getUserColor` function to generate color from user name or email.
+     * @default 'white'
+     */
+    backgroundColor?: string;
+    /**
+     * Translated status messages shown on hover.
+     */
+    translatedStatusTitles?: StatusTitles;
+} & Omit<CommonProps, 'title'>;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarProps` (Use with `Avatar`)
+ */
+export declare type UserIconProps = AvatarProps;
+export declare const defaultStatusTitles: StatusTitles;
+/**
+ * Basic avatar component
+ * @example
+ * <caption>Small icon with abbreviation</caption>
+ * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
+ * @example
+ * <caption>Medium icon with image</caption>
+ * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * @example
+ * <caption>Large icon with status</caption>
+ * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
+ * @example
+ * <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" />}/>
+ */
+export declare const Avatar: (props: AvatarProps) => JSX.Element;
+/**
+ * @deprecated Since v2, this has been renamed to `Avatar`
+ */
+export declare const UserIcon: (props: AvatarProps) => JSX.Element;
+export default Avatar;

package/cjs/core/{UserIcon/UserIcon.js → Avatar/Avatar.js}

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserIcon = exports.defaultStatusTitles = void 0;
+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.
@@ -33,7 +33,7 @@ exports.UserIcon = exports.defaultStatusTitles = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/user-icon.css");
+require("@itwin/itwinui-css/css/avatar.css");
 exports.defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',
@@ -41,30 +41,34 @@ exports.defaultStatusTitles = {
     online: 'Online',
 };
 /**
- * Basic user icon component
+ * Basic avatar component
  * @example
  * <caption>Small icon with abbreviation</caption>
- * <UserIcon size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
+ * <Avatar size='small' title='Terry Rivers' abbreviation='TR' backgroundColor='green'/>
  * @example
  * <caption>Medium icon with image</caption>
- * <UserIcon size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * <Avatar size='medium' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  * @example
  * <caption>Large icon with status</caption>
- * <UserIcon size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
+ * <Avatar size='large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' status='online' />
  * @example
  * <caption>X-large icon with image</caption>
- * <UserIcon size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
+ * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
-var UserIcon = function (props) {
+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"]);
     (0, utils_1.useTheme)();
     var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-user-icon', (_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))),
+    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))),
         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] }))));
 };
-exports.UserIcon = UserIcon;
-exports.default = exports.UserIcon;
+exports.Avatar = Avatar;
+/**
+ * @deprecated Since v2, this has been renamed to `Avatar`
+ */
+exports.UserIcon = exports.Avatar;
+exports.default = exports.Avatar;

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

@@ -0,0 +1,4 @@
+export { Avatar, UserIcon } from './Avatar';
+export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar';
+declare const _default: "./Avatar";
+export default _default;

package/cjs/core/{UserIcon → Avatar}/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserIcon = void 0;
+exports.UserIcon = 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 UserIcon_1 = require("./UserIcon");
-Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return UserIcon_1.UserIcon; } });
-exports.default = './UserIcon';
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
+Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return Avatar_1.UserIcon; } });
+exports.default = './Avatar';

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/avatar.css';
+export declare type AvatarGroupProps = {
+    /**
+     * Max number of avatars unstacked.
+     * @default 5
+     */
+    maxIcons?: number;
+    /**
+     * If true, group will be stacked to take less space.
+     * @default true
+     */
+    stacked?: boolean;
+    /**
+     * If true, group will be animated on hover.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Size of avatars and count avatars.
+     * @default 'small'
+     */
+    iconSize?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Avatars in the group.
+     */
+    children: React.ReactNode;
+    /**
+     * Count Avatar props.
+     */
+    countIconProps?: React.ComponentPropsWithRef<'div'>;
+} & Omit<CommonProps, 'title'>;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarGroupProps` (Use with `AvatarGroup`)
+ */
+export declare type UserIconGroupProps = AvatarGroupProps;
+/**
+ * Group Avatars together.
+ *
+ * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
+ * this component will show 5 Avatars and Count Avatar with "3" in it.
+ *
+ * You can add custom Count Avatar behavior by using `countAvatarProps`.
+ *
+ * @example
+ * <AvatarGroup avatarSize='medium'>
+ *  <Avatar
+ *    abbreviation="TR"
+ *    backgroundColor={getUserColor("Terry Rivers")}
+ *    title="Terry Rivers"
+ *  />
+ *  <Avatar
+ *    abbreviation="RM"
+ *    backgroundColor={getUserColor("Robin Mercer")}
+ *    title="Robin Mercer"
+ *  />
+ *  <Avatar
+ *    abbreviation="JM"
+ *    backgroundColor={getUserColor("Jean Mullins")}
+ *    title="Jean Mullins"
+ *  />
+ * </AvatarGroup>
+ */
+export declare const AvatarGroup: (props: AvatarGroupProps) => JSX.Element;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarGroup`
+ */
+export declare const UserIconGroup: (props: AvatarGroupProps) => JSX.Element;
+export default AvatarGroup;

package/cjs/core/{UserIconGroup/UserIconGroup.js → AvatarGroup/AvatarGroup.js}

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserIconGroup = void 0;
+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.
@@ -33,42 +33,42 @@ exports.UserIconGroup = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/user-icon.css");
+require("@itwin/itwinui-css/css/avatar.css");
 /**
- * Group User Icons together.
+ * Group Avatars together.
  *
- * User Icons stacking is based on `maxIcons` count. If you provide 8 User Icons and keep default 5 `maxIcons` count,
- * this component will show 5 User Icons and User Count Icon with "3" in it.
+ * Avatars stacking is based on `maxAvatars` count. If you provide 8 Avatars and keep default 5 `maxAvatars` count,
+ * this component will show 5 Avatars and Count Avatar with "3" in it.
  *
- * You can add custom User Count Icon behavior by using `countIconProps`.
+ * You can add custom Count Avatar behavior by using `countAvatarProps`.
  *
  * @example
- * <UserIconGroup iconSize='medium'>
- *  <UserIcon
+ * <AvatarGroup avatarSize='medium'>
+ *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}
  *    title="Terry Rivers"
  *  />
- *  <UserIcon
+ *  <Avatar
  *    abbreviation="RM"
  *    backgroundColor={getUserColor("Robin Mercer")}
  *    title="Robin Mercer"
  *  />
- *  <UserIcon
+ *  <Avatar
  *    abbreviation="JM"
  *    backgroundColor={getUserColor("Jean Mullins")}
  *    title="Jean Mullins"
  *  />
- * </UserIconGroup>
+ * </AvatarGroup>
  */
-var UserIconGroup = function (props) {
+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;
     (0, utils_1.useTheme)();
-    var getUserIconList = function (count) {
+    var getAvatarList = function (count) {
         return childrenArray.slice(0, count).map(function (child) {
             return react_1.default.cloneElement(child, {
                 status: undefined,
@@ -77,18 +77,22 @@ var UserIconGroup = function (props) {
         });
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-user-icon-list', {
+        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-avatar-list', {
                 'iui-animated': animated,
                 'iui-stacked': stacked,
             }, className) }, rest),
-            childrenArray.length <= maxIcons + 1 && getUserIconList(maxIcons + 1),
+            childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
             childrenArray.length > maxIcons + 1 && (react_1.default.createElement(react_1.default.Fragment, null,
-                getUserIconList(maxIcons),
-                react_1.default.createElement("div", __assign({}, countIconProps, { className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-".concat(iconSize)] = iconSize !== 'medium', _a), 'iui-user-icon-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
+                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("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
                         ? "".concat(childrenLength - maxIcons)
                         : "".concat(maxLength, "+")),
                     react_1.default.createElement("span", { className: 'iui-stroke' })))))));
 };
-exports.UserIconGroup = UserIconGroup;
-exports.default = exports.UserIconGroup;
+exports.AvatarGroup = AvatarGroup;
+/**
+ * @deprecated Since v2, this has been renamed to `AvatarGroup`
+ */
+exports.UserIconGroup = exports.AvatarGroup;
+exports.default = exports.AvatarGroup;

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

@@ -0,0 +1,4 @@
+export { AvatarGroup, UserIconGroup } from './AvatarGroup';
+export type { AvatarGroupProps, UserIconGroupProps } from './AvatarGroup';
+declare const _default: "./AvatarGroup";
+export default _default;

package/cjs/core/{UserIconGroup → AvatarGroup}/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserIconGroup = void 0;
+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 UserIconGroup_1 = require("./UserIconGroup");
-Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return UserIconGroup_1.UserIconGroup; } });
-exports.default = './UserIconGroup';
+var AvatarGroup_1 = require("./AvatarGroup");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_1.AvatarGroup; } });
+Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return AvatarGroup_1.UserIconGroup; } });
+exports.default = './AvatarGroup';

package/cjs/core/Badge/Badge.js

@@ -62,12 +62,10 @@ var getBadgeColorValue = function (color) {
  * <Badge backgroundColor="positive">Label</Badge>
  */
 var Badge = function (props) {
-    var _a, _b, _c;
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     (0, utils_1.useTheme)();
-    var _style = backgroundColor &&
-        ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-badge-background-color: ".concat(backgroundColor)))
-        ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
+    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));
 };
 exports.Badge = Badge;

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -33,7 +33,6 @@ exports.Breadcrumbs = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 require("@itwin/itwinui-css/css/breadcrumbs.css");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -94,6 +93,6 @@ var ListItem = function (_a) {
 };
 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(ChevronRight_1.default, null)));
+    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)));
 };
 exports.default = exports.Breadcrumbs;

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -54,5 +54,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "orientation" | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

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

@@ -44,20 +44,11 @@ require("@itwin/itwinui-css/css/button.css");
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 exports.Button = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var children = props.children, className = props.className, size = props.size, style = props.style, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, _c = props.type, type = _c === void 0 ? 'button' : _c, startIcon = props.startIcon, endIcon = props.endIcon, _d = props.as, Element = _d === void 0 ? 'button' : _d, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon", "as"]);
+    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"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', "iui-".concat(styleType), (_a = {},
-            _a["iui-".concat(size)] = !!size,
-            _a), className), style: style, type: type }, rest),
-        startIcon &&
-            react_1.default.cloneElement(startIcon, {
-                className: (0, classnames_1.default)('iui-button-icon', startIcon.props.className),
-            }),
-        children && react_1.default.createElement("span", { className: 'iui-button-label' }, children),
-        endIcon &&
-            react_1.default.cloneElement(endIcon, {
-                className: (0, classnames_1.default)('iui-button-icon', endIcon.props.className),
-            })));
+    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),
+        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))));
 });
 exports.default = exports.Button;

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -34,8 +34,6 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Button_1 = require("../Button");
 var DropdownMenu_1 = require("../../DropdownMenu");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
-var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
@@ -60,6 +58,6 @@ exports.DropdownButton = react_1.default.forwardRef(function (props, ref) {
         }
     }, [children, size, styleType]);
     return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        react_1.default.createElement(Button_1.Button, __assign({ className: (0, classnames_1.default)('iui-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(CaretUpSmall_1.default, { "aria-hidden": true })) : (react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
+        react_1.default.createElement(Button_1.Button, __assign({ className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
 });
 exports.default = exports.DropdownButton;

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -41,15 +41,9 @@ require("@itwin/itwinui-css/css/button.css");
  * <IconButton styleType='borderless'><SvgAdd /></IconButton>
  */
 exports.IconButton = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var isActive = props.isActive, children = props.children, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, _c = props.type, type = _c === void 0 ? 'button' : _c, className = props.className, _d = props.as, Element = _d === void 0 ? 'button' : _d, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className", "as"]);
+    var isActive = props.isActive, children = props.children, _a = props.styleType, styleType = _a === void 0 ? 'default' : _a, size = props.size, _b = props.type, type = _b === void 0 ? 'button' : _b, className = props.className, _c = props.as, Element = _c === void 0 ? 'button' : _c, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className", "as"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Element, __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', "iui-".concat(styleType), (_a = {},
-            _a["iui-".concat(size)] = !!size,
-            _a['iui-active'] = isActive,
-            _a), className), type: type }, rest), react_1.default.cloneElement(children, {
-        className: (0, classnames_1.default)('iui-button-icon', children.props.className),
-        'aria-hidden': true,
-    })));
+    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, "data-iui-active": isActive, type: type }, rest),
+        react_1.default.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children)));
 });
 exports.default = exports.IconButton;

package/cjs/core/Buttons/IdeasButton/IdeasButton.js

@@ -31,7 +31,6 @@ exports.IdeasButton = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var SmileyHappy_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SmileyHappy"));
 var utils_1 = require("../../utils");
 var Button_1 = require("../Button");
 /**
@@ -42,6 +41,6 @@ var Button_1 = require("../Button");
 exports.IdeasButton = react_1.default.forwardRef(function (props, ref) {
     var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, className: 'iui-idea', onClick: onClick, startIcon: react_1.default.createElement(SmileyHappy_1.default, { "aria-hidden": true }) }, rest), feedbackLabel));
+    return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: react_1.default.createElement(utils_1.SvgSmileyHappy, { "aria-hidden": true }) }, rest), feedbackLabel));
 });
 exports.default = exports.IdeasButton;

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -35,8 +35,6 @@ var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Button");
 var IconButton_1 = require("../IconButton");
 var DropdownMenu_1 = require("../../DropdownMenu");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
-var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
@@ -64,13 +62,11 @@ exports.SplitButton = react_1.default.forwardRef(function (props, forwardedRef)
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children, size]);
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)(className, 'iui-button-split-menu', {
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)(className, 'iui-button-split', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children)),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(CaretUpSmall_1.default, null) : react_1.default.createElement(CaretDownSmall_1.default, null))))));
+        react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick, ref: forwardedRef }, rest), children),
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: react_1.default.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: react_1.default.useCallback(function () { return setIsMenuOpen(false); }, []) },
+            react_1.default.createElement(IconButton_1.IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? react_1.default.createElement(utils_1.SvgCaretUpSmall, null) : react_1.default.createElement(utils_1.SvgCaretDownSmall, null)))));
 });
 exports.default = exports.SplitButton;