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

package/cjs/core/Header/Header.d.ts

@@ -26,8 +26,12 @@ export declare type HeaderProps = {
      */
     breadcrumbs?: React.ReactNode;
     /**
-     * Content displayed to the left of the user icon
+     * Content displayed to the left of the `menuItems`
      * (expects array of `IconButton`, potentially wrapped in a `DropdownMenu`)
+     *
+     * Since v2, `userIcon` is deprecated.
+     * The new recommendation is to add `Avatar` (Called `UserIcon` before v2) to the end of `actions`.
+     * `Avatar` can be wrapped in `IconButton` and `DropdownMenu` if needed.
      * @example
      * [
      *  <IconButton><SvgNotification /></IconButton>,
@@ -35,6 +39,11 @@ export declare type HeaderProps = {
      *   <IconButton>
      *    <SvgHelpCircularHollow />
      *   </IconButton>
+     *  </DropdownMenu>,
+     *  <DropdownMenu menuItems={...}>
+     *    <IconButton styleType='borderless'>
+     *      <Avatar ... />
+     *    </IconButton>
      *  </DropdownMenu>
      * ]
      */
@@ -44,7 +53,10 @@ export declare type HeaderProps = {
      */
     children?: React.ReactNode;
     /**
+     * @deprecated Since v2, add your `UserIcon` (called `Avatar` since v2) to the end of `actions` itself
+     *
      * User icon
+     *
      * It's size and transition will be handled between slim/not slim state of the
      * Header
      * (expects `UserIcon`, can be wrapped in `IconButton` and `DropdownMenu` if needed)
@@ -89,15 +101,13 @@ export declare type HeaderProps = {
  *    <IconButton>
  *     <SvgHelpCircularHollow />
  *    </IconButton>
- *   </DropdownMenu>
- *  ]}
- *  userIcon={
+ *   </DropdownMenu>,
  *   <DropdownMenu menuItems={...}>
  *    <IconButton styleType='borderless'>
- *     <UserIcon ... />
+ *     <Avatar ... />
  *    </IconButton>
  *   </DropdownMenu>
- *  }
+ *  ]}
  *  isSlim
  * />
  */

package/cjs/core/Header/Header.js

@@ -30,7 +30,6 @@ exports.Header = 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 MoreVertical_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/MoreVertical"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../Buttons");
@@ -57,15 +56,13 @@ var defaultTranslations = {
  *    <IconButton>
  *     <SvgHelpCircularHollow />
  *    </IconButton>
- *   </DropdownMenu>
- *  ]}
- *  userIcon={
+ *   </DropdownMenu>,
  *   <DropdownMenu menuItems={...}>
  *    <IconButton styleType='borderless'>
- *     <UserIcon ... />
+ *     <Avatar ... />
  *    </IconButton>
  *   </DropdownMenu>
- *  }
+ *  ]}
  *  isSlim
  * />
  */
@@ -73,18 +70,18 @@ var Header = function (props) {
     var appLogo = props.appLogo, breadcrumbs = props.breadcrumbs, _a = props.isSlim, isSlim = _a === void 0 ? false : _a, actions = props.actions, userIcon = props.userIcon, menuItems = props.menuItems, translatedStrings = props.translatedStrings, className = props.className, children = props.children, rest = __rest(props, ["appLogo", "breadcrumbs", "isSlim", "actions", "userIcon", "menuItems", "translatedStrings", "className", "children"]);
     (0, utils_1.useTheme)();
     var headerTranslations = __assign(__assign({}, defaultTranslations), translatedStrings);
-    return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', { 'iui-slim': isSlim }, className) }, rest),
-        react_1.default.createElement("div", { className: 'iui-left' },
+    return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined }, rest),
+        react_1.default.createElement("div", { className: 'iui-page-header-left' },
             appLogo,
-            breadcrumbs && react_1.default.createElement("div", { className: 'iui-divider' }),
+            breadcrumbs && react_1.default.createElement("div", { className: 'iui-page-header-divider' }),
             breadcrumbs),
-        children && react_1.default.createElement("div", { className: 'iui-center' }, children),
-        react_1.default.createElement("div", { className: 'iui-right' },
+        children && react_1.default.createElement("div", { className: 'iui-page-header-center' }, children),
+        react_1.default.createElement("div", { className: 'iui-page-header-right' },
             actions,
             userIcon,
             menuItems && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems },
                 react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
-                    react_1.default.createElement(MoreVertical_1.default, { "aria-hidden": true })))))));
+                    react_1.default.createElement(utils_1.SvgMoreVertical, { "aria-hidden": true })))))));
 };
 exports.Header = Header;
 exports.default = exports.Header;

package/cjs/core/Header/HeaderBasicButton.d.ts

@@ -0,0 +1,6 @@
+import { PolymorphicForwardRefComponent } from '../utils';
+import { ButtonProps } from '../Buttons';
+export declare type HeaderBasicButtonProps = ButtonProps;
+declare type HeaderBasicButtonComponent = PolymorphicForwardRefComponent<'button', HeaderBasicButtonProps>;
+export declare const HeaderBasicButton: HeaderBasicButtonComponent;
+export default HeaderBasicButton;

package/cjs/core/Header/HeaderBasicButton.js

@@ -0,0 +1,52 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBasicButton = 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");
+exports.HeaderBasicButton = react_1.default.forwardRef(function (props, ref) {
+    var onClick = props.onClick, className = props.className, children = props.children, style = props.style, _a = props.type, type = _a === void 0 ? 'button' : _a, startIcon = props.startIcon, endIcon = props.endIcon, _b = props.as, Element = _b === void 0 ? 'button' : _b, styleType = props.styleType, size = props.size, rest = __rest(props, ["onClick", "className", "children", "style", "type", "startIcon", "endIcon", "as", "styleType", "size"]);
+    styleType; // To omit and prevent eslint error.
+    size; // To omit and prevent eslint error.
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: type, style: style }, rest),
+        startIcon &&
+            react_1.default.cloneElement(startIcon, {
+                className: startIcon.props.className,
+            }),
+        children,
+        endIcon &&
+            react_1.default.cloneElement(endIcon, {
+                className: endIcon.props.className,
+            })));
+});
+exports.default = exports.HeaderBasicButton;

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -39,7 +39,6 @@ exports.HeaderBreadcrumbs = 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 ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
@@ -56,10 +55,12 @@ require("@itwin/itwinui-css/css/header.css");
 var HeaderBreadcrumbs = function (props) {
     var items = props.items, rest = __rest(props, ["items"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
-        current,
-        index !== items.length - 1 && (react_1.default.createElement(ChevronRight_1.default, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' })),
-    ], false); }, [])));
+    return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs', className: 'iui-header-breadcrumbs' }, rest),
+        react_1.default.createElement("ol", { className: 'iui-header-breadcrumbs-list' }, items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
+            current,
+            index !== items.length - 1 && (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', key: index },
+                react_1.default.createElement(utils_1.SvgChevronRight, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' }))),
+        ], false); }, []))));
 };
 exports.HeaderBreadcrumbs = HeaderBreadcrumbs;
 exports.default = exports.HeaderBreadcrumbs;

package/cjs/core/Header/HeaderButton.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ButtonProps, DropdownButtonProps } from '../Buttons';
+import { ButtonProps } from '../Buttons';
 import { PolymorphicForwardRefComponent } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
+import { HeaderDropdownButtonProps } from './HeaderDropdownButton';
 export declare type HeaderButtonProps = {
     /**
      * Main label of the header button.
@@ -16,7 +17,7 @@ export declare type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
-} & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
+} & Partial<Pick<HeaderDropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', HeaderButtonProps>;
 /**
  * Header button that handles slim state of the `Header` it's in.

package/cjs/core/Header/HeaderButton.js

@@ -32,9 +32,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderButton = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var Buttons_1 = require("../Buttons");
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/header.css");
+var HeaderSplitButton_1 = require("./HeaderSplitButton");
+var HeaderDropdownButton_1 = require("./HeaderDropdownButton");
+var HeaderBasicButton_1 = require("./HeaderBasicButton");
 var isSplitButton = function (props) {
     return !!props.menuItems && !!props.onClick;
 };
@@ -52,26 +54,16 @@ var isDropdownButton = function (props) {
  * <HeaderButton name='Project D' isActive />
  */
 exports.HeaderButton = react_1.default.forwardRef(function (props, ref) {
-    var name = props.name, description = props.description, _a = props.isActive, isActive = _a === void 0 ? false : _a, className = props.className, startIcon = props.startIcon, menuItems = props.menuItems, rest = __rest(props, ["name", "description", "isActive", "className", "startIcon", "menuItems"]);
+    var name = props.name, description = props.description, _a = props.isActive, isActive = _a === void 0 ? false : _a, className = props.className, startIcon = props.startIcon, menuItems = props.menuItems, disabled = props.disabled, rest = __rest(props, ["name", "description", "isActive", "className", "startIcon", "menuItems", "disabled"]);
     (0, utils_1.useTheme)();
     var buttonProps = __assign(__assign({ startIcon: react_1.default.isValidElement(startIcon)
             ? react_1.default.cloneElement(startIcon, {
-                className: (0, classnames_1.default)('iui-header-button-icon', startIcon.props.className),
+                className: (0, classnames_1.default)('iui-header-breadcrumb-button-icon', startIcon.props.className),
             })
-            : undefined, styleType: 'borderless', className: (0, classnames_1.default)({
-            'iui-header-button': !isSplitButton(props),
-            'iui-header-split-button': isSplitButton(props),
-            'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
-            'iui-active': isActive,
-        }, className), 'aria-current': isActive ? 'location' : undefined, children: (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", null, name),
-            description && react_1.default.createElement("div", { className: 'iui-description' }, description))), ref: ref }, (!!menuItems && { menuItems: menuItems })), rest);
-    if (isSplitButton(buttonProps)) {
-        return react_1.default.createElement(Buttons_1.SplitButton, __assign({}, buttonProps));
-    }
-    if (isDropdownButton(buttonProps)) {
-        return react_1.default.createElement(Buttons_1.DropdownButton, __assign({}, buttonProps));
-    }
-    return react_1.default.createElement(Buttons_1.Button, __assign({}, buttonProps));
+            : undefined, className: className, children: (react_1.default.createElement("span", { className: 'iui-header-breadcrumb-button-text' },
+            react_1.default.createElement("span", { className: 'iui-header-breadcrumb-button-text-label' }, name),
+            description && (react_1.default.createElement("span", { className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))), ref: ref, disabled: disabled }, (!!menuItems && { menuItems: menuItems })), rest);
+    var headerButton = isSplitButton(buttonProps) ? (react_1.default.createElement(HeaderSplitButton_1.HeaderSplitButton, __assign({}, buttonProps))) : isDropdownButton(buttonProps) ? (react_1.default.createElement(HeaderDropdownButton_1.HeaderDropdownButton, __assign({}, buttonProps))) : (react_1.default.createElement(HeaderBasicButton_1.HeaderBasicButton, __assign({}, buttonProps)));
+    return (react_1.default.createElement("li", { className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
 });
 exports.default = exports.HeaderButton;

package/cjs/core/Header/HeaderDropdownButton.d.ts

@@ -0,0 +1,6 @@
+import { PolymorphicForwardRefComponent } from '../utils';
+import { DropdownButtonProps } from '../Buttons';
+export declare type HeaderDropdownButtonProps = DropdownButtonProps;
+declare type HeaderDropdownButtonComponent = PolymorphicForwardRefComponent<'button', HeaderDropdownButtonProps>;
+export declare const HeaderDropdownButton: HeaderDropdownButtonComponent;
+export default HeaderDropdownButton;

package/cjs/core/Header/HeaderDropdownButton.js

@@ -0,0 +1,53 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderDropdownButton = 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 DropdownMenu_1 = require("../DropdownMenu");
+var utils_1 = require("../utils");
+var HeaderBasicButton_1 = require("./HeaderBasicButton");
+exports.HeaderDropdownButton = react_1.default.forwardRef(function (props, ref) {
+    var menuItems = props.menuItems, className = props.className, children = props.children, rest = __rest(props, ["menuItems", "className", "children"]);
+    (0, utils_1.useTheme)();
+    var _a = react_1.default.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
+    var _b = react_1.default.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
+    var buttonRef = react_1.default.useRef(null);
+    var refs = (0, utils_1.useMergedRefs)(ref, buttonRef);
+    react_1.default.useEffect(function () {
+        if (buttonRef.current) {
+            setMenuWidth(buttonRef.current.offsetWidth);
+        }
+    }, [children]);
+    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(HeaderBasicButton_1.HeaderBasicButton, __assign({ className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) }, rest), children)));
+});
+exports.default = exports.HeaderDropdownButton;

package/cjs/core/Header/HeaderLogo.js

@@ -52,13 +52,13 @@ var HeaderLogo = function (props) {
         }
     };
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-header-logo', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-header-brand', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
         react_1.default.isValidElement(logo)
             ? react_1.default.cloneElement(logo, {
-                className: (0, classnames_1.default)('iui-header-button-icon', logo.props.className),
+                className: (0, classnames_1.default)('iui-header-brand-icon', logo.props.className),
             })
             : undefined,
-        children && react_1.default.createElement("span", { className: 'iui-label' }, children)));
+        children && react_1.default.createElement("span", { className: 'iui-header-brand-label' }, children)));
 };
 exports.HeaderLogo = HeaderLogo;
 exports.default = exports.HeaderLogo;

package/cjs/core/Header/HeaderSplitButton.d.ts

@@ -0,0 +1,6 @@
+import { PolymorphicForwardRefComponent } from '../utils';
+import { SplitButtonProps } from '../Buttons';
+export declare type HeaderSplitButtonProps = SplitButtonProps;
+declare type HeaderSplitButtonComponent = PolymorphicForwardRefComponent<'button', HeaderSplitButtonProps>;
+export declare const HeaderSplitButton: HeaderSplitButtonComponent;
+export default HeaderSplitButton;

package/cjs/core/Header/HeaderSplitButton.js

@@ -0,0 +1,54 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSplitButton = 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 DropdownMenu_1 = require("../DropdownMenu");
+var utils_1 = require("../utils");
+var HeaderBasicButton_1 = require("./HeaderBasicButton");
+exports.HeaderSplitButton = react_1.default.forwardRef(function (props, forwardedRef) {
+    var menuItems = props.menuItems, className = props.className, _a = props.menuPlacement, menuPlacement = _a === void 0 ? 'bottom-end' : _a, children = props.children, style = props.style, title = props.title, disabled = props.disabled, rest = __rest(props, ["menuItems", "className", "menuPlacement", "children", "style", "title", "disabled"]);
+    (0, utils_1.useTheme)();
+    var _b = react_1.default.useState(false), isMenuOpen = _b[0], setIsMenuOpen = _b[1];
+    var _c = react_1.default.useState(0), menuWidth = _c[0], setMenuWidth = _c[1];
+    var ref = react_1.default.useRef(null);
+    react_1.default.useEffect(function () {
+        if (ref.current) {
+            setMenuWidth(ref.current.offsetWidth);
+        }
+    }, [children]);
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), style: style, title: title, ref: ref },
+        react_1.default.createElement(HeaderBasicButton_1.HeaderBasicButton, __assign({ ref: forwardedRef, disabled: disabled }, 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("button", { className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (react_1.default.createElement(utils_1.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (react_1.default.createElement(utils_1.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+});
+exports.default = exports.HeaderSplitButton;

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -33,7 +33,6 @@ exports.InformationPanelHeader = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Buttons_1 = require("../Buttons");
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/information-panel.css");
 /**
@@ -60,7 +59,7 @@ var InformationPanelHeader = function (props) {
         react_1.default.createElement("div", { className: 'iui-information-header-actions' },
             actions,
             onClose && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true }))))));
+                react_1.default.createElement(utils_1.SvgCloseSmall, { "aria-hidden": true }))))));
 };
 exports.InformationPanelHeader = InformationPanelHeader;
 exports.default = exports.InformationPanelHeader;

package/cjs/core/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type InputProps = {
     /**
      * Set focus on input element.

package/cjs/core/Input/Input.js

@@ -33,7 +33,7 @@ exports.Input = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic input component
  * @example
@@ -42,8 +42,7 @@ require("@itwin/itwinui-css/css/inputs.css");
  * <Input size='small' />
  */
 exports.Input = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var _b = props.setFocus, setFocus = _b === void 0 ? false : _b, size = props.size, className = props.className, rest = __rest(props, ["setFocus", "size", "className"]);
+    var _a = props.setFocus, setFocus = _a === void 0 ? false : _a, size = props.size, className = props.className, rest = __rest(props, ["setFocus", "size", "className"]);
     (0, utils_1.useTheme)();
     var inputRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(inputRef, ref);
@@ -52,6 +51,6 @@ exports.Input = react_1.default.forwardRef(function (props, ref) {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-input', (_a = {}, _a["iui-".concat(size)] = !!size, _a), className), ref: refs }, rest)));
+    return (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-input', className), "data-iui-size": size, ref: refs }, rest)));
 });
 exports.default = exports.Input;

package/cjs/core/InputGroup/InputGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type InputGroupProps = {
     /**
      * Label of the group.

package/cjs/core/InputGroup/InputGroup.js

@@ -32,7 +32,7 @@ exports.InputGroup = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/utils.css");
 /**
  * Group Checkbox/Radio components together
  * @example

package/cjs/core/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/utils.css';
 declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
     /**
      * What element should the label be rendered as?

package/cjs/core/Label/Label.js

@@ -33,7 +33,7 @@ exports.Label = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/utils.css");
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputProps } from '../Input/Input';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledInputProps = {
     /**
      * Label of the input.
@@ -93,7 +93,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
      */
-    iconDisplayStyle?: "block" | "inline" | undefined;
+    iconDisplayStyle?: "inline" | "block" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;

package/cjs/core/LabeledInput/LabeledInput.js

@@ -33,7 +33,7 @@ exports.LabeledInput = void 0;
 var react_1 = __importDefault(require("react"));
 var Input_1 = require("../Input/Input");
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic labeled input component
  * @example

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SelectProps } from '../Select/Select';
 import { LabeledInputProps } from '../LabeledInput';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 export declare type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -33,7 +33,7 @@ exports.LabeledSelect = void 0;
 var react_1 = __importDefault(require("react"));
 var Select_1 = require("../Select");
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/select.css");
 /**
  * Labeled select component to select value from options.
  * @example

package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextareaProps } from '../Textarea/Textarea';
 import { LabeledInputProps } from '../LabeledInput';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -33,7 +33,7 @@ exports.LabeledTextarea = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var Textarea_1 = require("../Textarea");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/input.css");
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/cjs/core/Menu/MenuItem.js

@@ -34,7 +34,6 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
-var CaretRightSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretRightSmall"));
 var Menu_1 = require("./Menu");
 /**
  * Context used to provide menu item ref to sub-menu items.
@@ -100,7 +99,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement("span", { className: 'iui-content' },
             react_1.default.createElement("div", { className: 'iui-menu-label' }, children),
             sublabel && react_1.default.createElement("div", { className: 'iui-menu-description' }, sublabel)),
-        !badge && subMenuItems.length > 0 && (react_1.default.createElement(CaretRightSmall_1.default, { className: 'iui-icon' })),
+        !badge && subMenuItems.length > 0 && (react_1.default.createElement(utils_1.SvgCaretRightSmall, { className: 'iui-icon' })),
         badge &&
             react_1.default.cloneElement(badge, {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -30,8 +30,6 @@ exports.ProgressRadial = 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 CheckmarkSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CheckmarkSmall"));
-var ImportantSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ImportantSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
@@ -56,8 +54,8 @@ var ProgressRadial = function (props) {
     var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, status = props.status, children = props.children, _d = props.size, size = _d === void 0 ? '' : _d, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "status", "children", "size", "className", "style"]);
     (0, utils_1.useTheme)();
     var statusMap = {
-        negative: react_1.default.createElement(ImportantSmall_1.default, { "aria-hidden": true }),
-        positive: react_1.default.createElement(CheckmarkSmall_1.default, { "aria-hidden": true }),
+        negative: react_1.default.createElement(utils_1.SvgImportantSmall, { "aria-hidden": true }),
+        positive: react_1.default.createElement(utils_1.SvgCheckmarkSmall, { "aria-hidden": true }),
     };
     var fillStyle = {
         strokeDashoffset: status === 'positive'