@itwin/itwinui-react 2.0.0-dev.0 → 2.0.0-dev.2

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 { useTheme, useOverflow, SvgCaretDownSmall, } from '../utils';
 import '@itwin/itwinui-css/css/select.css';
-import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SelectTag from './SelectTag';
 var isMultipleEnabled = function (variable, multiple) {
     return multiple;

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/Surface/Surface.d.ts

@@ -4,7 +4,6 @@ import '@itwin/itwinui-css/css/surface.css';
 export declare type SurfaceProps = {
     /**
      * Sets the elevation of the surface
-     * @default 0
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
     /**
@@ -21,7 +20,6 @@ export declare type SurfaceProps = {
 export declare const Surface: React.ForwardRefExoticComponent<{
     /**
      * Sets the elevation of the surface
-     * @default 0
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
     /**

package/esm/core/Surface/Surface.js

@@ -33,18 +33,20 @@ import '@itwin/itwinui-css/css/surface.css';
  */
 var getSurfaceElevationValue = function (elevation) {
     switch (elevation) {
+        case 0:
+            return 'none';
         case 1:
-            return '0 1px 5px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-1)';
         case 2:
-            return '0 1px 10px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-2)';
         case 3:
-            return '0 3px 14px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-3)';
         case 4:
-            return '0 6px 30px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-4)';
         case 5:
-            return '0 9px 46px rgba(0, 0, 0, 0.25)';
+            return 'var(--iui-shadow-5)';
         default:
-            return 'none';
+            return '';
     }
 };
 /**
@@ -54,7 +56,7 @@ var getSurfaceElevationValue = function (elevation) {
  * <Surface elevation={2}>Surface Content</Surface>
  */
 export var Surface = React.forwardRef(function (props, ref) {
-    var _a = props.elevation, elevation = _a === void 0 ? 0 : _a, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
+    var elevation = props.elevation, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
     useTheme();
     var _style = __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style);
     return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));

package/esm/core/Table/SubRowExpander.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { SvgChevronRight } from '../utils';
 import { IconButton } from '../Buttons';
 export var SubRowExpander = function (props) {
     var cell = props.cell, isDisabled = props.isDisabled, cellProps = props.cellProps, expanderCell = props.expanderCell;

package/esm/core/Table/Table.js

@@ -28,10 +28,8 @@ import React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators';
-import { useTheme, useResizeObserver } from '../utils';
+import { useTheme, useResizeObserver, SvgSortDown, SvgSortUp, } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
-import SvgSortDown from '@itwin/itwinui-icons-react/cjs/icons/SortDown';
-import SvgSortUp from '@itwin/itwinui-icons-react/cjs/icons/SortUp';
 import { getCellStyle, getStickyStyle } from './utils';
 import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
@@ -418,7 +416,7 @@ export var Table = function (props) {
                                 showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
                                 showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
                                 showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
-                                    (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-table-sort', "aria-hidden": true })))))),
+                                    (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-table-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
                                 (index !== headerGroup.headers.length - 1 ||

package/esm/core/Table/TablePaginator.js

@@ -27,12 +27,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/table.css';
-import SvgChevronLeft from '@itwin/itwinui-icons-react/cjs/icons/ChevronLeft';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import { IconButton, Button, DropdownButton } from '../Buttons';
 import { ProgressRadial } from '../ProgressIndicators';
 import { MenuItem } from '../Menu';
-import { getBoundedValue, useTheme, useOverflow, useContainerWidth, } from '../utils';
+import { getBoundedValue, useTheme, useOverflow, useContainerWidth, SvgChevronLeft, SvgChevronRight, } from '../utils';
 var defaultLocalization = {
     pageSizeLabel: function (size) { return "".concat(size, " per page"); },
     rangeLabel: function (startIndex, endIndex, totalRows, isLoading) {

package/esm/core/Table/columns/actionColumn.js

@@ -15,7 +15,7 @@ var __assign = (this && this.__assign) || function () {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { Checkbox } from '../../Checkbox';
-import SvgColumnManager from '@itwin/itwinui-icons-react/cjs/icons/ColumnManager';
+import { SvgColumnManager } from '../../utils';
 import { DropdownMenu } from '../../DropdownMenu';
 import { IconButton } from '../../Buttons/IconButton';
 import { MenuItem } from '../../Menu';

package/esm/core/Table/columns/expanderColumn.js

@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { SvgChevronRight } from '../../utils';
 import { IconButton } from '../../Buttons';
 import { DefaultCell } from '../cells';
 export var EXPANDER_CELL_ID = 'iui-table-expander';

package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -25,8 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import SvgCalendar from '@itwin/itwinui-icons-react/cjs/icons/Calendar';
-import { Popover } from '../../../utils';
+import { Popover, SvgCalendar } from '../../../utils';
 import { LabeledInput } from '../../../LabeledInput';
 import { DatePicker } from '../../../DatePicker';
 import { IconButton } from '../../../Buttons';

package/esm/core/Table/filters/FilterToggle.js

@@ -24,12 +24,10 @@ 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 SvgFilterHollow from '@itwin/itwinui-icons-react/cjs/icons/FilterHollow';
-import SvgFilter from '@itwin/itwinui-icons-react/cjs/icons/Filter';
 import React from 'react';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/table.css';
-import { useTheme, Popover } from '../../utils';
+import { useTheme, Popover, SvgFilterHollow, SvgFilter, } from '../../utils';
 import { IconButton } from '../../Buttons';
 /**
  * Handles showing filter icon and opening filter component.

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

@@ -1,5 +1,22 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/tabs.css';
+declare type TabsOrientationProps = {
+    /**
+     * Orientation of the tabs.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal';
+    /**
+     * Type of the tabs.
+     *
+     * If `orientation = 'vertical'`, `pill` is not applicable.
+     * @default 'default'
+     */
+    type?: 'default' | 'borderless' | 'pill';
+} | {
+    orientation: 'vertical';
+    type?: 'default' | 'borderless';
+};
 export declare type TabsProps = {
     /**
      * Elements shown for each tab.
@@ -25,16 +42,6 @@ export declare type TabsProps = {
      * @default 'blue'
      */
     color?: 'blue' | 'green';
-    /**
-     * Type of the tabs.
-     * @default 'default'
-     */
-    type?: 'default' | 'borderless' | 'pill';
-    /**
-     * Orientation of the tabs.
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
     /**
      * Custom CSS class name for tabs.
      */
@@ -51,8 +58,14 @@ export declare type TabsProps = {
      * Content inside the tab panel.
      */
     children?: React.ReactNode;
-};
+} & TabsOrientationProps;
+/**
+ * @deprecated Since v2, use `TabProps` with `Tabs`
+ */
 export declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
+/**
+ * @deprecated Since v2, use `TabProps` with `Tabs`
+ */
 export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
     type?: 'default' | 'borderless';
 };
@@ -67,6 +80,9 @@ export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'>
  * <Tabs labels={tabs} />
  *
  * @example
+ * <Tabs orientation='vertical' labels={tabs} />
+ *
+ * @example
  * const tabsWithSublabels = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
@@ -82,6 +98,8 @@ export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'>
  */
 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 = [
@@ -93,12 +111,14 @@ export declare const Tabs: (props: TabsProps) => JSX.Element;
  */
 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 />} />,
+ *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */

package/esm/core/Tabs/Tabs.js

@@ -40,6 +40,9 @@ import { Tab } from './Tab';
  * <Tabs labels={tabs} />
  *
  * @example
+ * <Tabs orientation='vertical' labels={tabs} />
+ *
+ * @example
  * const tabsWithSublabels = [
  *   <Tab label='Label 1' sublabel='First tab' />,
  *   <Tab label='Label 2' sublabel='Active tab' />,
@@ -192,6 +195,8 @@ export var Tabs = function (props) {
         children && (React.createElement("div", { 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 = [
@@ -203,12 +208,14 @@ export var Tabs = function (props) {
  */
 export var HorizontalTabs = function (props) { return (React.createElement(Tabs, __assign({ 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 />} />,
+ *   <Tab label='Label 3' sublabel='Disabled tab' disabled icon={<SvgPlaceholder />} />,
  * ];
  * <VerticalTabs labels={tabs} activeIndex={1}>Tabpanel content</VerticalTabs>
  */

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

@@ -1,4 +1,4 @@
-export { VerticalTabs, HorizontalTabs } from './Tabs';
-export type { VerticalTabsProps, HorizontalTabsProps } from './Tabs';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
+export type { TabsProps, VerticalTabsProps, HorizontalTabsProps } from './Tabs';
 export { Tab } from './Tab';
 export type { TabProps } from './Tab';

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 { VerticalTabs, HorizontalTabs } from './Tabs';
+export { Tabs, VerticalTabs, HorizontalTabs } from './Tabs';
 export { Tab } from './Tab';

package/esm/core/Tag/Tag.js

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

package/esm/core/Tile/Tile.js

@@ -26,10 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
-import SvgMore from '@itwin/itwinui-icons-react/cjs/icons/More';
-import SvgNew from '@itwin/itwinui-icons-react/cjs/icons/New';
-import { StatusIconMap, useTheme } from '../utils';
+import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu';
 import { IconButton } from '../Buttons';

package/esm/core/Toast/Toast.js

@@ -26,9 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { Transition } from 'react-transition-group';
-import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
-import { useTheme, getWindow, StatusIconMap } from '../utils';
+import { useTheme, getWindow, StatusIconMap, SvgCloseSmall, } from '../utils';
 import '@itwin/itwinui-css/css/toast.css';
 import { IconButton } from '../Buttons';
 /**

package/esm/core/Tree/TreeNodeExpander.js

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

package/esm/core/Typography/Body/Body.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/text.css';
+/**
+ * @deprecated Since v2, use `Text` with variant 'body'.
+ */
 export declare type BodyProps = {
     /**
      * Set text to muted.
@@ -13,10 +16,9 @@ export declare type BodyProps = {
     isSkeleton?: boolean;
 } & React.HTMLAttributes<HTMLParagraphElement>;
 /**
- * Body text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'body'.
  * @example
- * <Body>I'm some body text!</Body>
- * <Body isMuted>I'm some muted body text.</Body>
+ * <Text variant='body' as='p'>I'm some body text!</Text>
  */
 export declare const Body: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Body/Body.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * Body text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'body'.
  * @example
- * <Body>I'm some body text!</Body>
- * <Body isMuted>I'm some muted body text.</Body>
+ * <Text variant='body' as='p'>I'm some body text!</Text>
  */
 export var Body = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, _b = props.isSkeleton, isSkeleton = _b === void 0 ? false : _b, rest = __rest(props, ["className", "isMuted", "isSkeleton"]);

package/esm/core/Typography/Headline/Headline.d.ts

@@ -8,10 +8,9 @@ export declare type HeadlineProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The biggest title on the page, renders a h1 element
+ * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example
- * <Headline>I'm a headline!</Headline>
- * <Headline isMuted>I'm a muted headline.</Headline>
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
  */
 export declare const Headline: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Headline/Headline.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The biggest title on the page, renders a h1 element
+ * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example
- * <Headline>I'm a headline!</Headline>
- * <Headline isMuted>I'm a muted headline.</Headline>
+ * <Text variant='headline' as='h1'>I'm a headline!</Text>
  */
 export var Headline = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Leading/Leading.d.ts

@@ -8,10 +8,9 @@ export declare type LeadingProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example
- * <Leading>I'm a Leading!</Leading>
- * <Leading isMuted>I'm a muted Leading.</Leading>
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
  */
 export declare const Leading: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Leading/Leading.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example
- * <Leading>I'm a Leading!</Leading>
- * <Leading isMuted>I'm a muted Leading.</Leading>
+ * <Text variant='leading' as='h3'>I'm a leading!</Text>
  */
 export var Leading = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Small/Small.d.ts

@@ -8,10 +8,9 @@ export declare type SmallProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLParagraphElement>;
 /**
- * Small text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'small'.
  * @example
- * <Small>I'm some small text!</Small>
- * <Small isMuted>I'm some muted small text.</Small>
+ * <Text variant='small' as='small'>I'm some small text!</Text>
  */
 export declare const Small: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Small/Small.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * Small text, renders a paragraph element
+ * @deprecated Since v2, use `Text` with variant 'small'.
  * @example
- * <Small>I'm some small text!</Small>
- * <Small isMuted>I'm some muted small text.</Small>
+ * <Text variant='small' as='small'>I'm some small text!</Text>
  */
 export var Small = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Subheading/Subheading.d.ts

@@ -8,10 +8,9 @@ export declare type SubheadingProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example
- * <Subheading>I'm a subheading!</Subheading>
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
  */
 export declare const Subheading: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Subheading/Subheading.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The third biggest title on the page, renders a h3 element
+ * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example
- * <Subheading>I'm a subheading!</Subheading>
- * <Subheading isMuted>I'm a muted subheading.</Subheading>
+ * <Text variant='subheading' as='h3'>I'm a subheading!</Text>
  */
 export var Subheading = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/Typography/Text/Text.d.ts

@@ -30,6 +30,8 @@ export declare type TextProps<T extends React.ElementType = 'div'> = Polymorphic
 declare type TextComponent = PolymorphicForwardRefComponent<'div', TextOwnProps>;
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
+ *
  * @example
  * <Text>Some normal paragraph text rendered as a div</Text>
  * @example

package/esm/core/Typography/Text/Text.js

@@ -30,6 +30,8 @@ import { useTheme, } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
+ * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
+ *
  * @example
  * <Text>Some normal paragraph text rendered as a div</Text>
  * @example

package/esm/core/Typography/Title/Title.d.ts

@@ -8,10 +8,9 @@ export declare type TitleProps = {
     isMuted?: boolean;
 } & React.HTMLAttributes<HTMLHeadingElement>;
 /**
- * The second biggest title on the page, renders a h2 element
+ * @deprecated Since v2, use `Text` with variant 'title'.
  * @example
- * <Title>I'm a title!</Title>
- * <Title isMuted>I'm a muted title.</Title>
+ * <Text variant='title' as='h2'>I'm a title!</Text>
  */
 export declare const Title: React.ForwardRefExoticComponent<{
     /**

package/esm/core/Typography/Title/Title.js

@@ -29,10 +29,9 @@ import React from 'react';
 import { useTheme } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 /**
- * The second biggest title on the page, renders a h2 element
+ * @deprecated Since v2, use `Text` with variant 'title'.
  * @example
- * <Title>I'm a title!</Title>
- * <Title isMuted>I'm a muted title.</Title>
+ * <Text variant='title' as='h2'>I'm a title!</Text>
  */
 export var Title = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);

package/esm/core/index.d.ts

@@ -40,7 +40,7 @@ export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
-export { VerticalTabs, Tab, HorizontalTabs } from './Tabs';
+export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';

package/esm/core/index.js

@@ -23,7 +23,7 @@ export { Fieldset } from './Fieldset';
 export { FileUpload, FileUploadTemplate } from './FileUpload';
 export { Footer, defaultFooterElements } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
-export { VerticalTabs, Tab, HorizontalTabs } from './Tabs';
+export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';
 export { Label } from './Label';

package/esm/core/utils/components/index.d.ts

@@ -2,7 +2,6 @@ export * from './Popover';
 export * from './Resizer';
 export * from './FocusTrap';
 export * from './InputContainer';
-export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';

package/esm/core/utils/components/index.js

@@ -6,7 +6,6 @@ export * from './Popover';
 export * from './Resizer';
 export * from './FocusTrap';
 export * from './InputContainer';
-export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';