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

package/cjs/core/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTabs = exports.Tab = exports.Tabs = exports.VerticalTabs = exports.TransferList = exports.ListItem = exports.List = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.UserIconGroup = exports.AvatarGroup = exports.UserIcon = exports.Avatar = exports.Alert = void 0;
-exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.useToaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = void 0;
-exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.getUserColor = exports.SearchBox = exports.WorkflowDiagram = exports.Stepper = exports.Wizard = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = void 0;
+exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.Tab = exports.Tabs = exports.TransferList = exports.ListItem = exports.List = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileEmptyCard = exports.FileUploadCard = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.NonIdealState = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.AvatarGroup = exports.Avatar = exports.Alert = void 0;
+exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.useToaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.NotificationMarker = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = void 0;
+exports.Divider = exports.VisuallyHidden = exports.Flex = exports.Icon = exports.LinkAction = exports.LinkBox = exports.MiddleTextTruncation = exports.ColorValue = exports.getUserColor = exports.SearchBox = exports.WorkflowDiagram = exports.Stepper = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,10 +11,8 @@ var index_js_1 = require("./Alert/index.js");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return index_js_1.Alert; } });
 var index_js_2 = require("./Avatar/index.js");
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return index_js_2.Avatar; } });
-Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return index_js_2.UserIcon; } });
 var index_js_3 = require("./AvatarGroup/index.js");
 Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return index_js_3.AvatarGroup; } });
-Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return index_js_3.UserIconGroup; } });
 var index_js_4 = require("./Backdrop/index.js");
 Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return index_js_4.Backdrop; } });
 var index_js_5 = require("./Badge/index.js");
@@ -74,10 +72,8 @@ Object.defineProperty(exports, "ListItem", { enumerable: true, get: function ()
 var index_js_23 = require("./TransferList/index.js");
 Object.defineProperty(exports, "TransferList", { enumerable: true, get: function () { return index_js_23.TransferList; } });
 var index_js_24 = require("./Tabs/index.js");
-Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return index_js_24.VerticalTabs; } });
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return index_js_24.Tabs; } });
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return index_js_24.Tab; } });
-Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return index_js_24.HorizontalTabs; } });
 var index_js_25 = require("./InformationPanel/index.js");
 Object.defineProperty(exports, "InformationPanel", { enumerable: true, get: function () { return index_js_25.InformationPanel; } });
 Object.defineProperty(exports, "InformationPanelWrapper", { enumerable: true, get: function () { return index_js_25.InformationPanelWrapper; } });
@@ -171,7 +167,6 @@ Object.defineProperty(exports, "Kbd", { enumerable: true, get: function () { ret
 Object.defineProperty(exports, "KbdKeys", { enumerable: true, get: function () { return index_js_54.KbdKeys; } });
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return index_js_54.Text; } });
 var index_js_55 = require("./Stepper/index.js");
-Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return index_js_55.Wizard; } });
 Object.defineProperty(exports, "Stepper", { enumerable: true, get: function () { return index_js_55.Stepper; } });
 Object.defineProperty(exports, "WorkflowDiagram", { enumerable: true, get: function () { return index_js_55.WorkflowDiagram; } });
 var index_js_56 = require("./SearchBox/index.js");

package/cjs/styles.js

@@ -244,11 +244,7 @@ const styles = {
   "iui-indeterminate": "_iui3-indeterminate",
   "iui-progress-indicator-linear-animate-indeterminate": "_iui3-progress-indicator-linear-animate-indeterminate",
   "iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
-  "iui-radial": "_iui3-radial",
-  "iui-inner-content": "_iui3-inner-content",
-  "iui-x-small": "_iui3-x-small",
   "rotate-indeterminate": "_iui3-rotate-indeterminate",
-  "dash-indeterminate": "_iui3-dash-indeterminate",
   "iui-progress-indicator-overlay": "_iui3-progress-indicator-overlay",
   "iui-overlay-exiting": "_iui3-overlay-exiting",
   closeAnimation,
@@ -377,9 +373,9 @@ const styles = {
   "iui-tile": "_iui3-tile",
   "iui-folder": "_iui3-folder",
   "iui-tile-thumbnail": "_iui3-tile-thumbnail",
+  "iui-tile-name": "_iui3-tile-name",
   "iui-tile-more-options": "_iui3-tile-more-options",
   "iui-tile-metadata": "_iui3-tile-metadata",
-  "iui-tile-name": "_iui3-tile-name",
   "iui-tile-description": "_iui3-tile-description",
   "iui-thumbnail-icon": "_iui3-thumbnail-icon",
   "iui-tile-thumbnail-picture": "_iui3-tile-thumbnail-picture",

package/esm/core/Avatar/Avatar.d.ts

@@ -52,8 +52,4 @@ export declare const defaultStatusTitles: StatusTitles;
  * <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: PolymorphicForwardRefComponent<"span", AvatarProps>;
-/**
- * @deprecated Since v2, this has been renamed to `Avatar`
- */
-export declare const UserIcon: PolymorphicForwardRefComponent<"span", AvatarProps>;
 export default Avatar;

package/esm/core/Avatar/Avatar.js

@@ -37,8 +37,4 @@ export const Avatar = React.forwardRef((props, ref) => {
                 [`iui-${status}`]: !!status,
             }), "aria-label": statusTitles[status] }))));
 });
-/**
- * @deprecated Since v2, this has been renamed to `Avatar`
- */
-export const UserIcon = Avatar;
 export default Avatar;

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

@@ -1,3 +1,3 @@
-export { Avatar, UserIcon } from './Avatar.js';
+export { Avatar } from './Avatar.js';
 declare const _default: "./Avatar";
 export default _default;

package/esm/core/Avatar/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Avatar, UserIcon } from './Avatar.js';
+export { Avatar } from './Avatar.js';
 export default './Avatar';

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -58,8 +58,4 @@ declare type AvatarGroupProps = {
  * </AvatarGroup>
  */
 export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroup`
- */
-export declare const UserIconGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 export default AvatarGroup;

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -56,8 +56,4 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
                     : `${maxLength}+`),
                 React.createElement(Box, { className: 'iui-stroke' }))))));
 });
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroup`
- */
-export const UserIconGroup = AvatarGroup;
 export default AvatarGroup;

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

@@ -1,3 +1,3 @@
-export { AvatarGroup, UserIconGroup } from './AvatarGroup.js';
+export { AvatarGroup } from './AvatarGroup.js';
 declare const _default: "./AvatarGroup";
 export default _default;

package/esm/core/AvatarGroup/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { AvatarGroup, UserIconGroup } from './AvatarGroup.js';
+export { AvatarGroup } from './AvatarGroup.js';
 export default './AvatarGroup';

package/esm/core/Header/Header.d.ts

@@ -26,11 +26,8 @@ declare type HeaderProps = {
     breadcrumbs?: React.ReactNode;
     /**
      * Content displayed to the left of the `menuItems`
-     * (expects array of `IconButton`, potentially wrapped in a `DropdownMenu`)
+     * (expects array of icons/avatars wrapped in `IconButton` and/or `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>,
@@ -51,22 +48,6 @@ declare type HeaderProps = {
      * Children is put in the center of the Header.
      */
     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)
-     * @example
-     * <DropdownMenu menuItems={...}>
-     *   <IconButton styleType='borderless'>
-     *     <UserIcon ... />
-     *   </IconButton>
-     * </DropdownMenu>
-     */
-    userIcon?: React.ReactNode;
     /**
      * Items in the more dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),

package/esm/core/Header/Header.js

@@ -38,7 +38,7 @@ const defaultTranslations = {
  * />
  */
 export const Header = React.forwardRef((props, forwardedRef) => {
-    const { appLogo, breadcrumbs, isSlim = false, actions, userIcon, menuItems, translatedStrings, className, children, ...rest } = props;
+    const { appLogo, breadcrumbs, isSlim = false, actions, menuItems, translatedStrings, className, children, ...rest } = props;
     const headerTranslations = { ...defaultTranslations, ...translatedStrings };
     return (React.createElement(Box, { as: 'header', className: cx('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
         React.createElement(Box, { className: 'iui-page-header-left' },
@@ -48,7 +48,6 @@ export const Header = React.forwardRef((props, forwardedRef) => {
         children && React.createElement(Box, { className: 'iui-page-header-center' }, children),
         React.createElement(Box, { className: 'iui-page-header-right' },
             actions,
-            userIcon,
             menuItems && (React.createElement(DropdownMenu, { menuItems: menuItems },
                 React.createElement(IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
                     React.createElement(SvgMoreVertical, { "aria-hidden": true })))))));

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts

@@ -3,12 +3,12 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
-     * @default 0
      */
     value?: number;
     /**
      * Progress variant. If true, value will be ignored.
-     * @default false
+     *
+     * @default false if value is provided, true otherwise
      */
     indeterminate?: boolean;
     /**

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCheckmarkSmall, SvgImportantSmall, Box, } from '../../utils/index.js';
+import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, } from '../../utils/index.js';
 /**
  * Circular Progress Indicator
  * @example
@@ -21,28 +21,21 @@ import { SvgCheckmarkSmall, SvgImportantSmall, Box, } from '../../utils/index.js
  * <ProgressRadial size={'small'} indeterminate/>
  */
 export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
-    const { value = 0, indeterminate = false, status, children, size = '', className, ...rest } = props;
+    const { value, indeterminate = value === undefined, status, size, className, style, children, ...rest } = props;
     const statusMap = {
         negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
     };
-    const fillStyle = {
-        strokeDashoffset: status === 'positive'
-            ? 0
-            : 88 -
-                Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
-    };
     return (React.createElement(Box, { className: cx('iui-progress-indicator-radial', {
-            'iui-determinate': !indeterminate,
             'iui-indeterminate': indeterminate,
-            [`iui-${size}`]: !!size,
-            [`iui-${status}`]: !!status,
-        }, className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { as: 'svg', className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
-            React.createElement(Box, { as: 'circle', className: 'iui-track', cx: '16', cy: '16', r: '14' }),
-            React.createElement(Box, { as: 'circle', className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),
-        React.createElement(React.Fragment, null,
-            status && (React.createElement(Box, { as: 'span', className: 'iui-inner-content' }, statusMap[status])),
-            !status && children && (React.createElement(Box, { as: 'span', className: 'iui-inner-content' }, children)))));
+            'iui-determinate': !indeterminate,
+        }, className), "data-iui-size": size, "data-iui-status": status, ref: forwardedRef, style: {
+            ...(value !== undefined && {
+                '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
+            }),
+            ...style,
+        }, ...rest }, size !== 'x-small'
+        ? children ?? (!!status ? statusMap[status] : null)
+        : null));
 });
 export default ProgressRadial;

package/esm/core/Slider/Slider.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { TooltipProps } from '../Tooltip/Tooltip.js';
+import type { Tooltip } from '../Tooltip/index.js';
 /**
  * Determines which segments are shown with color.
  */
 export declare type TrackDisplayMode = 'auto' | 'none' | 'odd-segments' | 'even-segments';
+declare type TooltipProps = React.ComponentProps<typeof Tooltip>;
 export declare type SliderProps = {
     /**
      * Set focus on first thumb in slider element.

package/esm/core/Slider/Thumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TooltipProps } from '../Tooltip/Tooltip.js';
+import { Tooltip } from '../Tooltip/index.js';
 import type { SliderProps } from './Slider.js';
 declare type ThumbProps = {
     /**
@@ -49,7 +49,7 @@ declare type ThumbProps = {
     /**
      * Additional tooltip props.
      */
-    tooltipProps: Omit<TooltipProps, 'children'>;
+    tooltipProps: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;
     /**
      * Additional props for Thumb.
      */

package/esm/core/Slider/Thumb.js

@@ -57,7 +57,7 @@ export const Thumb = (props) => {
         return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
-    return (React.createElement(Tooltip, { placement: 'top', trigger: tooltipProps?.visible == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
+    return (React.createElement(Tooltip, { placement: 'top', autoUpdateOptions: { animationFrame: true }, ...tooltipProps },
         React.createElement(Box, { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'

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

@@ -1,7 +1,3 @@
-export { Wizard } from './Wizard.js';
 export { Stepper } from './Stepper.js';
 export { WorkflowDiagram } from './WorkflowDiagram.js';
-export type { WizardType, WizardLocalization } from './Wizard.js';
 export type { StepProperties, StepperLocalization } from './Stepper.js';
-declare const _default: "./Wizard";
-export default _default;

package/esm/core/Stepper/index.js

@@ -2,7 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Wizard } from './Wizard.js';
 export { Stepper } from './Stepper.js';
 export { WorkflowDiagram } from './WorkflowDiagram.js';
-export default './Wizard';

package/esm/core/Tabs/Tabs.d.ts

@@ -99,16 +99,6 @@ export declare type TabsProps = {
      */
     children?: React.ReactNode;
 } & TabsOrientationProps & TabsTypeProps & TabsOverflowProps;
-/**
- * @deprecated Since v2, use `TabProps` with `Tabs`
- */
-declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
-/**
- * @deprecated Since v2, use `TabProps` with `Tabs`
- */
-declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
-    type?: 'default' | 'borderless';
-};
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -137,30 +127,4 @@ declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
- */
-export declare const HorizontalTabs: (props: HorizontalTabsProps) => JSX.Element;
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
- */
-export declare const VerticalTabs: (props: VerticalTabsProps) => JSX.Element;
 export default Tabs;

package/esm/core/Tabs/Tabs.js

@@ -353,30 +353,4 @@ export const Tabs = (props) => {
             React.createElement(Box, { className: 'iui-tabs-actions' }, actions))),
         children && (React.createElement(Box, { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'horizontal'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <HorizontalTabs labels={tabs} activeIndex={1}>Tabpanel content</HorizontalTabs>
- */
-export const HorizontalTabs = (props) => (React.createElement(Tabs, { orientation: 'horizontal', ...props }));
-/**
- * @deprecated Since v2, directly use `Tabs` with `orientation: 'vertical'`
- *
- * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
- * @example
- * const tabs = [
- *   <Tab label='Label 1' sublabel='First tab' />,
- *   <Tab label='Label 2' sublabel='Active tab' />,
- *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
- * ];
- * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
- */
-export const VerticalTabs = (props) => (React.createElement(Tabs, { orientation: 'vertical', ...props }));
 export default Tabs;

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

@@ -1,2 +1,2 @@
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export { Tabs } from './Tabs.js';
 export { Tab } from './Tab.js';

package/esm/core/Tabs/index.js

@@ -2,5 +2,5 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs.js';
+export { Tabs } from './Tabs.js';
 export { Tab } from './Tab.js';