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

package/esm/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/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
 import { Textarea } from '../Textarea';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/esm/core/Menu/MenuItem.js

@@ -26,9 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme, Popover, useMergedRefs } from '../utils';
+import { useTheme, Popover, useMergedRefs, SvgCaretRightSmall, } from '../utils';
 import '@itwin/itwinui-css/css/menu.css';
-import SvgCaretRightSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretRightSmall';
 import { Menu } from './Menu';
 /**
  * Context used to provide menu item ref to sub-menu items.

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -24,11 +24,9 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import Positive from '@itwin/itwinui-icons-react/cjs/icons/CheckmarkSmall';
-import Negative from '@itwin/itwinui-icons-react/cjs/icons/ImportantSmall';
 import cx from 'classnames';
 import React from 'react';
-import { useTheme } from '../../utils';
+import { useTheme, SvgCheckmarkSmall, SvgImportantSmall, } from '../../utils';
 import '@itwin/itwinui-css/css/progress-indicator.css';
 /**
  * Circular Progress Indicator
@@ -50,8 +48,8 @@ export 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"]);
     useTheme();
     var statusMap = {
-        negative: React.createElement(Negative, { "aria-hidden": true }),
-        positive: React.createElement(Positive, { "aria-hidden": true }),
+        negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
+        positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
     };
     var fillStyle = {
         strokeDashoffset: status === 'positive'

package/esm/core/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio.css';
 export declare type RadioProps = {
     /**
      * Label of the radio.
@@ -9,20 +9,6 @@ export declare type RadioProps = {
      * Status of the radio.
      */
     status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Custom CSS class name for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkClassName?: string;
-    /**
-     * Custom CSS Style for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkStyle?: React.CSSProperties;
     /**
      * Set focus on radio element.
      * @default false
@@ -48,20 +34,6 @@ export declare const Radio: React.ForwardRefExoticComponent<{
      * Status of the radio.
      */
     status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Custom CSS class name for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkClassName?: string | undefined;
-    /**
-     * Custom CSS Style for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkStyle?: React.CSSProperties | undefined;
     /**
      * Set focus on radio element.
      * @default false

package/esm/core/Radio/Radio.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio.css';
 /**
  * Basic radio input component
  * @example
@@ -40,7 +40,7 @@ import '@itwin/itwinui-css/css/inputs.css';
  */
 export var Radio = React.forwardRef(function (props, ref) {
     var _a, _b;
-    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
+    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, label = props.label, status = props.status, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "setFocus"]);
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
@@ -49,7 +49,7 @@ export var Radio = React.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled, type: 'radio', ref: refs }, rest)));
+    var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs }, rest)));
     return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
         radio,
         label && React.createElement("span", { className: 'iui-radio-label' }, label)));

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { InputGroupProps } from '../InputGroup';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { InputGroup } from '../InputGroup';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio-tile.css';
 import { useTheme } from '../utils';
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopoverProps, CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 export declare type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.

package/esm/core/Select/Select.js

@@ -28,9 +28,8 @@ import React from 'react';
 import cx from 'classnames';
 import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
-import { useTheme, useOverflow, } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
-import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
+import { useTheme, useOverflow, SvgCaretDownSmall, } from '../utils';
+import '@itwin/itwinui-css/css/select.css';
 import SelectTag from './SelectTag';
 var isMultipleEnabled = function (variable, multiple) {
     return multiple;
@@ -90,14 +89,13 @@ var isSingleOnChange = function (onChange, multiple) {
  */
 export var Select = function (props) {
     var _a;
-    var _b;
-    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, _e = props.multiple, multiple = _e === void 0 ? false : _e, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps", "multiple"]);
+    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _b = props.disabled, disabled = _b === void 0 ? false : _b, size = props.size, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, _d = props.multiple, multiple = _d === void 0 ? false : _d, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps", "multiple"]);
     useTheme();
-    var _f = React.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _f[0], setIsOpen = _f[1];
+    var _e = React.useState((_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : false), isOpen = _e[0], setIsOpen = _e[1];
     React.useEffect(function () {
         setIsOpen(function (open) { var _a; return (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : open; });
     }, [popoverProps]);
-    var _g = React.useState(0), minWidth = _g[0], setMinWidth = _g[1];
+    var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
@@ -171,19 +169,17 @@ export var Select = function (props) {
         return React.createElement(SelectTag, { key: item.label, label: item.label });
     }, []);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)") }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
                 var target = _a.target;
                 if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
                     setIsOpen(false);
                 }
             } }),
-            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', (_a = {
-                        'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
-                        'iui-disabled': disabled
-                    },
-                    _a["iui-".concat(size)] = !!size,
-                    _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
+            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', {
+                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
+                    'iui-disabled': disabled,
+                }), "data-iui-size": size, onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {

package/esm/core/Select/SelectTag.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 export declare type SelectTagProps = {
     /**
      * Text inside the tag.

package/esm/core/Select/SelectTag.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 /**
  * Tag for showing selected value in `Select`.
  * @private

package/esm/core/SideNavigation/SideNavigation.js

@@ -26,8 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme, WithCSSTransition } from '../utils';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { useTheme, WithCSSTransition, SvgChevronRight, } from '../utils';
 import { IconButton } from '../Buttons';
 import { Tooltip } from '../Tooltip';
 import '@itwin/itwinui-css/css/side-navigation.css';

package/esm/core/SideNavigation/SidenavButton.js

@@ -37,8 +37,7 @@ export var SidenavButton = React.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.isSubmenuOpen, isSubmenuOpen = _c === void 0 ? false : _c, rest = __rest(props, ["className", "children", "isActive", "disabled", "isSubmenuOpen"]);
     useTheme();
     return (React.createElement(Button, __assign({ className: cx('iui-sidenav-button', {
-            'iui-active': isActive,
             'iui-submenu-open': isSubmenuOpen,
-        }, className), size: 'large', disabled: disabled, ref: ref }, rest), children));
+        }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref }, rest), children));
 });
 export default SidenavButton;

package/esm/core/Stepper/Stepper.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/stepper.css';
+export declare type StepperLocalization = {
+    stepsCountLabel: (currentStep: number, totalSteps: number) => string;
+};
+export declare type StepProperties = {
+    /**
+     * The title/label of the step.
+     */
+    name: string;
+    /**
+     * A tooltip giving detailed description to this step.
+     */
+    description?: string;
+};
+export declare type StepperProps = {
+    /**
+     * Current step index, 0 - based.
+     */
+    currentStep?: number;
+    /**
+     * An array of step objects.
+     */
+    steps: StepProperties[];
+    /**
+     *  The type of Stepper to display.
+     *  @default 'default'
+     */
+    type?: 'default' | 'long';
+    /**
+     *  Option to provide localized strings.
+     */
+    localization?: StepperLocalization;
+    /**
+     *  Click handler on completed step.
+     */
+    onStepClick?: (clickedIndex: number) => void;
+};
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/esm/core/{Wizard/Wizard.js → Stepper/Stepper.js}

@@ -24,40 +24,23 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/wizard.css';
-import { Step } from './Step';
-var defaultWizardLocalization = {
+import '@itwin/itwinui-css/css/stepper.css';
+import { StepperStep } from './StepperStep';
+var defaultStepperLocalization = {
     stepsCountLabel: function (currentStep, totalSteps) {
         return "Step ".concat(currentStep, " of ").concat(totalSteps, ":");
     },
 };
-/**
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export var Wizard = React.forwardRef(function (props, ref) {
-    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultWizardLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
+export var Stepper = React.forwardRef(function (props, ref) {
+    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultStepperLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
     var boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-wizard', {
-            'iui-long': type === 'long',
-            'iui-workflow': type === 'workflow',
-        }), ref: ref }, rest),
-        React.createElement("ol", null, steps.map(function (s, index) { return (React.createElement(Step, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })); })),
-        type === 'long' && (React.createElement("div", { className: 'iui-wizard-steps-label' },
-            React.createElement("span", { className: 'iui-steps-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
+    return (React.createElement("div", __assign({ className: 'iui-stepper', ref: ref }, rest),
+        React.createElement("ol", null, steps.map(function (s, index) { return (React.createElement(StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })); })),
+        type === 'long' && (React.createElement("div", { className: 'iui-stepper-steps-label' },
+            React.createElement("span", { className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
             steps[boundedCurrentStep].name))));
 });
-export default Wizard;
+export default Stepper;

package/esm/core/{Wizard/Step.d.ts → Stepper/StepperStep.d.ts}

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { StylingProps } from '../utils';
-import { WizardType } from './Wizard';
-export declare type StepProps = {
+export declare type StepperStepProps = {
     /**
      * The title/label of the step.
      */
@@ -11,17 +10,17 @@ export declare type StepProps = {
      */
     index: number;
     /**
-     * the Wizard's current step number, 0-based.
+     * the Stepper's current step number, 0-based.
      */
     currentStepNumber: number;
     /**
-     * number of total steps in the wizard.
+     * number of total steps in the stepper.
      */
     totalSteps: number;
     /**
-     * Wizard type.
+     * Stepper type.
      */
-    type: WizardType;
+    type: 'default' | 'long';
     /**
      *  Click handler on completed step.
      */
@@ -31,4 +30,4 @@ export declare type StepProps = {
      */
     description?: string;
 } & StylingProps;
-export declare const Step: (props: StepProps) => JSX.Element;
+export declare const StepperStep: (props: StepperStepProps) => JSX.Element;

package/esm/core/{Wizard/Step.js → Stepper/StepperStep.js}

@@ -27,11 +27,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { Tooltip } from '../Tooltip';
-export var Step = function (props) {
+export var StepperStep = function (props) {
     var title = props.title, index = props.index, currentStepNumber = props.currentStepNumber, totalSteps = props.totalSteps, type = props.type, onClick = props.onClick, description = props.description, className = props.className, style = props.style, rest = __rest(props, ["title", "index", "currentStepNumber", "totalSteps", "type", "onClick", "description", "className", "style"]);
-    var isPast = type !== 'workflow' && currentStepNumber > index;
-    var isActive = type !== 'workflow' && currentStepNumber === index;
-    var isClickable = type !== 'workflow' && isPast && !!onClick;
+    var isPast = currentStepNumber > index;
+    var isActive = currentStepNumber === index;
+    var isClickable = isPast && !!onClick;
     var onCompletedClick = function () {
         if (isClickable) {
             onClick === null || onClick === void 0 ? void 0 : onClick(index);
@@ -45,12 +45,12 @@ export var Step = function (props) {
             onCompletedClick();
         }
     };
-    var stepShape = (React.createElement("li", __assign({ className: cx('iui-wizard-step', {
+    var stepShape = (React.createElement("li", __assign({ className: cx('iui-stepper-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
         }, className), style: __assign({ width: type === 'default' ? "".concat(100 / totalSteps, "%") : undefined }, style), onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined }, rest),
-        React.createElement("div", { className: 'iui-wizard-track-content' },
-            React.createElement("span", { className: 'iui-wizard-circle' }, type === 'workflow' ? title : index + 1)),
-        type === 'default' && (React.createElement("span", { className: 'iui-wizard-step-name' }, title))));
+        React.createElement("div", { className: 'iui-stepper-track-content' },
+            React.createElement("span", { className: 'iui-stepper-circle' }, index + 1)),
+        type === 'default' && (React.createElement("span", { className: 'iui-stepper-step-name' }, title))));
     return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
 };

package/esm/core/Stepper/Wizard.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StepperProps, StepperLocalization } from './Stepper';
+/**
+ * @deprecated Since v2:
+ *
+ * - For `default` | `long`, use `StepperType` with `Stepper` instead
+ * - For `workflow`, use `WorkflowDiagram` instead
+ */
+export declare type WizardType = 'default' | 'long' | 'workflow';
+/**
+ * @deprecated Since v2, use `StepperLocalization` with `Stepper`
+ */
+export declare type WizardLocalization = StepperLocalization;
+/**
+ * @deprecated Since v2, use `StepperProps` with `Stepper` or `WorkflowDiagramProps` with `WorkflowDiagram`
+ */
+export declare type WizardProps = {
+    /**
+     *  The type of Wizard to display.
+     *  @default 'default'
+     */
+    type?: WizardType;
+} & Omit<StepperProps, 'type'>;
+/**
+ * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
+ *
+ * A wizard displays progress through a sequence of logical and numbered steps.
+ * It may also be used for navigation.
+ *
+ * The `type` can be set to 'long' to show labels under steps.
+ *
+ * @example
+ * <Wizard
+ *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
+ *  currentStep={0}
+ *  type='long'
+ *  />
+ */
+export declare const Wizard: React.ForwardRefExoticComponent<{
+    /**
+     *  The type of Wizard to display.
+     *  @default 'default'
+     */
+    type?: WizardType | undefined;
+} & Omit<StepperProps, "type"> & React.RefAttributes<HTMLDivElement>>;
+export default Wizard;

package/esm/core/Stepper/Wizard.js

@@ -0,0 +1,49 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Stepper } from './Stepper';
+import { WorkflowDiagram } from './WorkflowDiagram';
+/**
+ * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
+ *
+ * A wizard displays progress through a sequence of logical and numbered steps.
+ * It may also be used for navigation.
+ *
+ * The `type` can be set to 'long' to show labels under steps.
+ *
+ * @example
+ * <Wizard
+ *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
+ *  currentStep={0}
+ *  type='long'
+ *  />
+ */
+export var Wizard = React.forwardRef(function (props, ref) {
+    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, localization = props.localization, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
+    return type !== 'workflow' ? (React.createElement(Stepper, __assign({ type: type, currentStep: currentStep, steps: steps, localization: localization, onStepClick: onStepClick, ref: ref }, rest))) : (React.createElement(WorkflowDiagram, __assign({ steps: steps, ref: ref }, rest)));
+});
+export default Wizard;

package/esm/core/Stepper/WorkflowDiagram.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/workflow-diagram.css';
+import { StepperProps } from './Stepper';
+export declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
+export declare const WorkflowDiagram: React.ForwardRefExoticComponent<WorkflowDiagramProps & React.RefAttributes<HTMLDivElement>>;
+export default WorkflowDiagram;

package/esm/core/Stepper/WorkflowDiagram.js

@@ -0,0 +1,37 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/workflow-diagram.css';
+import { WorkflowDiagramStep } from './WorkflowDiagramStep';
+export var WorkflowDiagram = React.forwardRef(function (props, ref) {
+    var steps = props.steps, rest = __rest(props, ["steps"]);
+    useTheme();
+    return (React.createElement("div", { ref: ref },
+        React.createElement("ol", __assign({ className: 'iui-workflow-diagram' }, rest), steps.map(function (s, index) { return (React.createElement(WorkflowDiagramStep, { key: index, title: s.name, description: s.description })); }))));
+});
+export default WorkflowDiagram;

package/esm/core/Stepper/WorkflowDiagramStep.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StylingProps } from '../utils';
+import { StepperStepProps } from './StepperStep';
+export declare type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & StylingProps;
+export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => JSX.Element;

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -0,0 +1,35 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+export var WorkflowDiagramStep = function (props) {
+    var title = props.title, description = props.description, className = props.className, style = props.style, rest = __rest(props, ["title", "description", "className", "style"]);
+    var stepShape = (React.createElement("li", __assign({ className: cx('iui-workflow-diagram-step', className), style: style }, rest),
+        React.createElement("span", { className: 'iui-workflow-diagram-content' }, title)));
+    return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
+};

package/esm/core/Stepper/index.d.ts

@@ -0,0 +1,8 @@
+export { Wizard } from './Wizard';
+export { Stepper } from './Stepper';
+export { WorkflowDiagram } from './WorkflowDiagram';
+export type { WizardProps, WizardType, WizardLocalization } from './Wizard';
+export type { StepperProps, StepProperties, StepperLocalization, } from './Stepper';
+export type { WorkflowDiagramProps } from './WorkflowDiagram';
+declare const _default: "./Wizard";
+export default _default;