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

package/cjs/core/Table/hooks/useColumnDragAndDrop.js

@@ -45,13 +45,13 @@ var defaultGetDragAndDropProps = function (isEnabled) { return function (props,
     };
     var setOnDragColumnStyle = function (event, position) {
         var columnElement = event.currentTarget;
-        columnElement.classList.remove('iui-reorder-column-right');
-        columnElement.classList.remove('iui-reorder-column-left');
+        columnElement.classList.remove('iui-table-reorder-column-right');
+        columnElement.classList.remove('iui-table-reorder-column-left');
         if (position === 'left') {
-            columnElement.classList.add('iui-reorder-column-left');
+            columnElement.classList.add('iui-table-reorder-column-left');
         }
         else if (position === 'right') {
-            columnElement.classList.add('iui-reorder-column-right');
+            columnElement.classList.add('iui-table-reorder-column-right');
         }
     };
     var reorderColumns = function (tableColumns, srcIndex, dstIndex) {

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -22,123 +22,127 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResizeColumns = void 0;
 var react_table_1 = require("react-table");
-var useResizeColumns = function (ownerDocument) { return function (hooks) {
-    hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
-    hooks.stateReducers.push(reducer);
-    hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
-}; };
+var useResizeColumns = function (ownerDocument) {
+    return function (hooks) {
+        hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
+        hooks.stateReducers.push(reducer);
+        hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+    };
+};
 exports.useResizeColumns = useResizeColumns;
 var isTouchEvent = function (event) {
     return event.type === 'touchstart';
 };
-var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
-    var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
-    var dispatch = instance.dispatch;
-    var onResizeStart = function (e, header) {
-        var _a, _b, _c;
-        // lets not respond to multiple touches (e.g. 2 or 3 fingers)
-        if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
-            return;
-        }
-        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
-            d.id,
-            getHeaderWidth(d),
-        ]; });
-        var nextHeaderIdWidths = nextHeader
-            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
-            : [];
-        var clientX = isTouchEvent(e)
-            ? Math.round(e.touches[0].clientX)
-            : e.clientX;
-        var dispatchMove = function (clientXPos) {
-            return dispatch({ type: react_table_1.actions.columnResizing, clientX: clientXPos });
-        };
-        var dispatchEnd = function () {
-            return dispatch({
-                type: react_table_1.actions.columnDoneResizing,
+var defaultGetResizerProps = function (ownerDocument) {
+    return function (props, _a) {
+        var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
+        var dispatch = instance.dispatch;
+        var onResizeStart = function (e, header) {
+            var _a, _b, _c;
+            // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+            if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
+                return;
+            }
+            var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
+                d.id,
+                getHeaderWidth(d),
+            ]; });
+            var nextHeaderIdWidths = nextHeader
+                ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
+                : [];
+            var clientX = isTouchEvent(e)
+                ? Math.round(e.touches[0].clientX)
+                : e.clientX;
+            var dispatchMove = function (clientXPos) {
+                return dispatch({ type: react_table_1.actions.columnResizing, clientX: clientXPos });
+            };
+            var dispatchEnd = function () {
+                return dispatch({
+                    type: react_table_1.actions.columnDoneResizing,
+                });
+            };
+            var handlersAndEvents = {
+                mouse: {
+                    moveEvent: 'mousemove',
+                    moveHandler: function (e) { return dispatchMove(e.clientX); },
+                    upEvent: 'mouseup',
+                    upHandler: function () {
+                        var _a, _b, _c;
+                        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                        (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
+                        dispatchEnd();
+                    },
+                },
+                touch: {
+                    moveEvent: 'touchmove',
+                    moveHandler: function (e) {
+                        if (e.cancelable) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                        dispatchMove(e.touches[0].clientX);
+                    },
+                    upEvent: 'touchend',
+                    upHandler: function () {
+                        var _a, _b;
+                        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                        dispatchEnd();
+                    },
+                },
+            };
+            var events = isTouchEvent(e)
+                ? handlersAndEvents.touch
+                : handlersAndEvents.mouse;
+            var passiveIfSupported = passiveEventSupported()
+                ? { passive: false }
+                : false;
+            (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+            (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+            if (!isTouchEvent(e)) {
+                (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+            }
+            dispatch({
+                type: react_table_1.actions.columnStartResizing,
+                columnId: header.id,
+                columnWidth: getHeaderWidth(header),
+                nextColumnWidth: getHeaderWidth(nextHeader),
+                headerIdWidths: headerIdWidths,
+                nextHeaderIdWidths: nextHeaderIdWidths,
+                clientX: clientX,
             });
         };
-        var handlersAndEvents = {
-            mouse: {
-                moveEvent: 'mousemove',
-                moveHandler: function (e) { return dispatchMove(e.clientX); },
-                upEvent: 'mouseup',
-                upHandler: function () {
-                    var _a, _b, _c;
-                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
-                    (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
-                    dispatchEnd();
+        return [
+            props,
+            {
+                onClick: function (e) {
+                    // Prevents from triggering sort
+                    e.stopPropagation();
                 },
-            },
-            touch: {
-                moveEvent: 'touchmove',
-                moveHandler: function (e) {
-                    if (e.cancelable) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }
-                    dispatchMove(e.touches[0].clientX);
+                onMouseDown: function (e) {
+                    e.persist();
+                    // Prevents from triggering drag'n'drop
+                    e.preventDefault();
+                    // Prevents from triggering sort
+                    e.stopPropagation();
+                    onResizeStart(e, header);
                 },
-                upEvent: 'touchend',
-                upHandler: function () {
-                    var _a, _b;
-                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
-                    dispatchEnd();
+                onTouchStart: function (e) {
+                    e.persist();
+                    // Prevents from triggering drag'n'drop
+                    e.preventDefault();
+                    onResizeStart(e, header);
                 },
+                style: {
+                    cursor: 'col-resize',
+                },
+                draggable: false,
+                role: 'separator',
             },
-        };
-        var events = isTouchEvent(e)
-            ? handlersAndEvents.touch
-            : handlersAndEvents.mouse;
-        var passiveIfSupported = passiveEventSupported()
-            ? { passive: false }
-            : false;
-        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
-        if (!isTouchEvent(e)) {
-            (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
-        }
-        dispatch({
-            type: react_table_1.actions.columnStartResizing,
-            columnId: header.id,
-            columnWidth: getHeaderWidth(header),
-            nextColumnWidth: getHeaderWidth(nextHeader),
-            headerIdWidths: headerIdWidths,
-            nextHeaderIdWidths: nextHeaderIdWidths,
-            clientX: clientX,
-        });
+        ];
     };
-    return [
-        props,
-        {
-            onClick: function (e) {
-                // Prevents from triggering sort
-                e.stopPropagation();
-            },
-            onMouseDown: function (e) {
-                e.persist();
-                // Prevents from triggering drag'n'drop
-                e.preventDefault();
-                // Prevents from triggering sort
-                e.stopPropagation();
-                onResizeStart(e, header);
-            },
-            onTouchStart: function (e) {
-                e.persist();
-                // Prevents from triggering drag'n'drop
-                e.preventDefault();
-                onResizeStart(e, header);
-            },
-            style: {
-                cursor: 'col-resize',
-            },
-            draggable: false,
-            role: 'separator',
-        },
-    ];
-}; };
+};
 exports.useResizeColumns.pluginName = 'useResizeColumns';
 var reducer = function (newState, action, previousState, instance) {
     if (action.type === react_table_1.actions.init) {

package/cjs/core/Tabs/Tab.d.ts

@@ -22,10 +22,6 @@ export declare type TabProps = {
      */
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLButtonElement>;
-/**
- * @deprecated Use `TabProps` instead.
- */
-export declare type HorizontalTabProps = TabProps;
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -35,8 +31,4 @@ export declare type HorizontalTabProps = TabProps;
  * ];
  */
 export declare const Tab: (props: TabProps) => JSX.Element;
-/**
- * @deprecated Use `Tab` instead.
- */
-export declare const HorizontalTab: (props: TabProps) => JSX.Element;
 export default TabProps;

package/cjs/core/Tabs/Tab.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalTab = exports.Tab = void 0;
+exports.Tab = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -57,7 +57,3 @@ var Tab = function (props) {
         children));
 };
 exports.Tab = Tab;
-/**
- * @deprecated Use `Tab` instead.
- */
-exports.HorizontalTab = exports.Tab;

package/cjs/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/cjs/core/Tabs/Tabs.js

@@ -46,6 +46,9 @@ var Tab_1 = require("./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' />,
@@ -60,24 +63,23 @@ var Tab_1 = require("./Tab");
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 var Tabs = function (props) {
-    var _a, _b, _c;
-    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
+    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
     (0, utils_1.useTheme)();
     var tablistRef = react_1.default.useRef(null);
-    var _h = (0, utils_1.useContainerWidth)(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
+    var _e = (0, utils_1.useContainerWidth)(type !== 'default'), tablistSizeRef = _e[0], tabsWidth = _e[1];
     var refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
-    var _j = react_1.default.useState(function () {
+    var _f = react_1.default.useState(function () {
         return activeIndex != null
             ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
             : 0;
-    }), currentActiveIndex = _j[0], setCurrentActiveIndex = _j[1];
+    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
     react_1.default.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     // CSS custom properties to place the active stripe
-    var _k = react_1.default.useState({}), stripeProperties = _k[0], setStripeProperties = _k[1];
+    var _g = react_1.default.useState({}), stripeProperties = _g[0], setStripeProperties = _g[1];
     react_1.default.useLayoutEffect(function () {
         if (type !== 'default' && tablistRef.current != undefined) {
             var activeTab = tablistRef.current.children[currentActiveIndex];
@@ -91,14 +93,14 @@ var Tabs = function (props) {
             })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _l = react_1.default.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
+    var _h = react_1.default.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
     react_1.default.useEffect(function () {
         if (tablistRef.current && focusedIndex !== undefined) {
             var tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
             tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
-    var _m = react_1.default.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
+    var _j = react_1.default.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
     react_1.default.useLayoutEffect(function () {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
@@ -171,12 +173,10 @@ var Tabs = function (props) {
                 break;
         }
     };
-    var isIE = !((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, '--stripe-width', '100px'));
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-".concat(orientation), wrapperClassName), style: stripeProperties },
         react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-".concat(type), {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default' && !isIE,
-                'iui-not-animated': isIE,
+                'iui-animated': type !== 'default',
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
             var onClick = function () {
@@ -202,6 +202,8 @@ var Tabs = function (props) {
 };
 exports.Tabs = Tabs;
 /**
+ * @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 = [
@@ -214,12 +216,14 @@ exports.Tabs = Tabs;
 var HorizontalTabs = function (props) { return (react_1.default.createElement(exports.Tabs, __assign({ orientation: 'horizontal' }, props))); };
 exports.HorizontalTabs = HorizontalTabs;
 /**
+ * @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/cjs/core/Tabs/index.d.ts

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

package/cjs/core/Tabs/index.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HorizontalTab = exports.Tab = exports.HorizontalTabs = exports.VerticalTabs = void 0;
+exports.Tab = exports.HorizontalTabs = exports.VerticalTabs = exports.Tabs = 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 Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "VerticalTabs", { enumerable: true, get: function () { return Tabs_1.VerticalTabs; } });
 Object.defineProperty(exports, "HorizontalTabs", { enumerable: true, get: function () { return Tabs_1.HorizontalTabs; } });
 var Tab_1 = require("./Tab");
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
-Object.defineProperty(exports, "HorizontalTab", { enumerable: true, get: function () { return Tab_1.HorizontalTab; } });

package/cjs/core/Tag/Tag.js

@@ -32,7 +32,6 @@ exports.Tag = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tag.css");
 var Buttons_1 = require("../Buttons");
@@ -51,7 +50,7 @@ var Tag = function (props) {
         }, className) }, rest),
         variant === 'default' ? (react_1.default.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
         onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
-            react_1.default.createElement(CloseSmall_1.default, { "aria-hidden": true })))));
+            react_1.default.createElement(utils_1.SvgCloseSmall, { "aria-hidden": true })))));
 };
 exports.Tag = Tag;
 exports.default = exports.Tag;

package/cjs/core/Textarea/Textarea.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 TextareaProps = {
     /**
      * Set focus on textarea element.

package/cjs/core/Textarea/Textarea.js

@@ -33,7 +33,7 @@ exports.Textarea = 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 textarea component
  * @example
@@ -50,6 +50,6 @@ exports.Textarea = react_1.default.forwardRef(function (props, ref) {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("textarea", __assign({ className: (0, classnames_1.default)('iui-textarea', className), rows: rows, ref: refs }, rest)));
+    return (react_1.default.createElement("textarea", __assign({ className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs }, rest)));
 });
 exports.default = exports.Textarea;

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,21 +1,31 @@
 import React from 'react';
-import { ThemeOptions, ThemeType } from '../utils';
-export declare type ThemeProviderProps = {
-    /**
-     * Theme to be applied. If not set, light theme will be used.
-     */
-    theme?: ThemeType;
-    /**
-     * Optional children.
-     */
-    children?: React.ReactNode;
-    /**
-     * Options that can be specified to override default theming behavior.
-     */
-    themeOptions?: ThemeOptions;
-};
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType, UseThemeProps } from '../utils';
+import '@itwin/itwinui-css/css/global.css';
+import '@itwin/itwinui-variables/index.css';
+export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, UseThemeProps>;
 /**
- * Component providing global styles that are required for all components and allows changing theme.
+ * This component provides global styles and applies theme to the entire tree
+ * that it is wrapping around. The `theme` prop is optional and defaults to the
+ * light theme.
+ *
+ * If you want to theme the entire app, you should use this component at the root.
+ * The `as` prop can be used to render a `<body>` element instead of a `<div>`.
+ *
+ * You can also use this component to apply a different theme to only a part of the tree.
+ *
+ * @example
+ * <ThemeProvider theme='os'>
+ *  <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider as='body'>
+ *   <App />
+ * </ThemeProvider>
  */
-export declare const ThemeProvider: (props: ThemeProviderProps) => JSX.Element;
+export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", UseThemeProps>;
 export default ThemeProvider;
+export declare const ThemeContext: React.Context<{
+    theme?: ThemeType | undefined;
+    themeOptions?: ThemeOptions | undefined;
+} | undefined>;