@itwin/itwinui-react 2.11.5 → 3.0.0-dev.1

package/cjs/core/Table/filters/BaseFilter.js

@@ -33,7 +33,6 @@ exports.BaseFilter = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../utils/index.js");
 /**
  * Filter wrapper that should be used when creating custom filters.
@@ -51,8 +50,8 @@ const index_js_1 = require("../../utils/index.js");
  */
 const BaseFilter = (props) => {
     const { children, className, style, id } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
+    (0, index_js_1.useGlobals)();
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-table-column-filter', className), style: style, 
         // Prevents from triggering sort
         onClick: (e) => {
             e.stopPropagation();

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { LabeledInputProps } from '../../../LabeledInput/index.js';
+import * as React from 'react';
+import { LabeledInput } from '../../../LabeledInput/index.js';
 export declare type DatePickerInputProps = {
     date?: Date;
     onChange: (date?: Date) => void;
@@ -13,6 +13,6 @@ export declare type DatePickerInputProps = {
      * The 'to' date for the 'from' DatePickerInput or the 'from' date for the 'to' DatePickerInput
      */
     selectedDate?: Date;
-} & Omit<LabeledInputProps, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
+} & Omit<React.ComponentProps<typeof LabeledInput>, 'value' | 'onChange' | 'svgIcon' | 'displayStyle'>;
 declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;
 export default DatePickerInput;

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type DateRangeTranslation = {
     from: string;
     to: string;

package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
 const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
 const BaseFilter_js_1 = require("../BaseFilter.js");
-require("@itwin/itwinui-css/css/table.css");
 const DatePickerInput_js_1 = __importDefault(require("./DatePickerInput.js"));
 const defaultStrings = {
     from: 'From',
@@ -59,7 +58,7 @@ const defaultParseInput = (text) => {
 const DateRangeFilter = (props) => {
     var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter, formatDate = defaultFormatDate, parseInput = defaultParseInput, placeholder = 'MMM dd, yyyy', } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     const [from, setFrom] = React.useState(((_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) ? new Date((_b = column.filterValue) === null || _b === void 0 ? void 0 : _b[0]) : undefined);
     const onFromChange = React.useCallback((date) => {

package/cjs/core/Table/filters/FilterButtonBar.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/table.css';
 import type { CommonProps } from '../../utils/index.js';
 export declare type FilterButtonBarTranslation = {
     filter: string;

package/cjs/core/Table/filters/FilterButtonBar.js

@@ -33,7 +33,6 @@ exports.FilterButtonBar = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../utils/index.js");
 const index_js_2 = require("../../Buttons/index.js");
 const defaultStrings = {
@@ -48,8 +47,8 @@ const defaultStrings = {
 const FilterButtonBar = (props) => {
     const { children, setFilter, clearFilter, translatedLabels, className, style, id, } = props;
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
+    (0, index_js_1.useGlobals)();
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-bar', className), style: style, id: id },
         children,
         React.createElement(index_js_2.Button, { styleType: 'high-visibility', onClick: setFilter }, translatedStrings.filter),
         React.createElement(index_js_2.Button, { onClick: clearFilter }, translatedStrings.clear)));

package/cjs/core/Table/filters/FilterToggle.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import type { HeaderGroup } from 'react-table';
-import '@itwin/itwinui-css/css/table.css';
-import type { StylingProps } from '../../utils/index.js';
+import type { CommonProps } from '../../utils/index.js';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;
-} & StylingProps;
+} & CommonProps;
 /**
  * Handles showing filter icon and opening filter component.
  */

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

@@ -33,7 +33,6 @@ exports.FilterToggle = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../utils/index.js");
 const index_js_2 = require("../../Buttons/index.js");
 /**
@@ -41,7 +40,7 @@ const index_js_2 = require("../../Buttons/index.js");
  */
 const FilterToggle = (props) => {
     const { column, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const [isVisible, setIsVisible] = React.useState(false);
     const close = React.useCallback(() => setIsVisible(false), []);
     const setFilter = React.useCallback((filterValue) => {

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
-import '@itwin/itwinui-css/css/table.css';
 export declare type NumberRangeTranslation = {
     from: string;
     to: string;

package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js

@@ -32,7 +32,6 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
 const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
 const BaseFilter_js_1 = require("../BaseFilter.js");
-require("@itwin/itwinui-css/css/table.css");
 const index_js_2 = require("../../../LabeledInput/index.js");
 const defaultStrings = {
     from: 'From',
@@ -41,7 +40,7 @@ const defaultStrings = {
 const NumberRangeFilter = (props) => {
     var _a, _b, _c, _d;
     const { column, translatedLabels, setFilter, clearFilter } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const translatedStrings = { ...defaultStrings, ...translatedLabels };
     const [from, setFrom] = React.useState((_b = (_a = column.filterValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '');
     const [to, setTo] = React.useState((_d = (_c = column.filterValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : '');

package/cjs/core/Table/filters/TextFilter/TextFilter.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/table.css';
 import type { FilterButtonBarTranslation } from '../FilterButtonBar.js';
 import type { TableFilterProps } from '../types.js';
 export declare type TextFilterProps<T extends Record<string, unknown>> = TableFilterProps<T> & {

package/cjs/core/Table/filters/TextFilter/TextFilter.js

@@ -29,7 +29,6 @@ exports.TextFilter = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/table.css");
 const index_js_1 = require("../../../utils/index.js");
 const index_js_2 = require("../../../Input/index.js");
 const FilterButtonBar_js_1 = require("../FilterButtonBar.js");
@@ -37,7 +36,7 @@ const BaseFilter_js_1 = require("../BaseFilter.js");
 const TextFilter = (props) => {
     var _a;
     const { column, translatedLabels, setFilter, clearFilter } = props;
-    (0, index_js_1.useTheme)();
+    (0, index_js_1.useGlobals)();
     const [text, setText] = React.useState((_a = column.filterValue) !== null && _a !== void 0 ? _a : '');
     const onKeyDown = (event) => {
         if (event.altKey) {

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

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColumnDragAndDrop = void 0;
 const react_table_1 = require("react-table");
+const styles_js_1 = __importDefault(require("../../../styles.js"));
 const REORDER_ACTIONS = {
     columnDragStart: 'columnDragStart',
     columnDragEnd: 'columnDragEnd',
@@ -24,13 +28,13 @@ const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, })
     };
     const setOnDragColumnStyle = (event, position) => {
         const columnElement = event.currentTarget;
-        columnElement.classList.remove('iui-table-reorder-column-right');
-        columnElement.classList.remove('iui-table-reorder-column-left');
+        columnElement.classList.remove(styles_js_1.default['iui-table-reorder-column-right']);
+        columnElement.classList.remove(styles_js_1.default['iui-table-reorder-column-left']);
         if (position === 'left') {
-            columnElement.classList.add('iui-table-reorder-column-left');
+            columnElement.classList.add(styles_js_1.default['iui-table-reorder-column-left']);
         }
         else if (position === 'right') {
-            columnElement.classList.add('iui-table-reorder-column-right');
+            columnElement.classList.add(styles_js_1.default['iui-table-reorder-column-right']);
         }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
-export declare type TabProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type TabProps = {
     /**
      * The main label shown in the tab.
      */
@@ -21,7 +21,13 @@ export declare type TabProps = {
      * Custom content appended to the tab.
      */
     children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLButtonElement>;
+    /**
+     * Whether the tab has active styling.
+     *
+     * This will be automatically set by the parent `Tabs` component.
+     */
+    active?: boolean;
+};
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -30,5 +36,5 @@ export declare type TabProps = {
  *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
  */
-export declare const Tab: (props: TabProps) => JSX.Element;
+export declare const Tab: PolymorphicForwardRefComponent<"button", TabProps>;
 export default TabProps;

package/cjs/core/Tabs/Tab.js

@@ -34,7 +34,6 @@ exports.Tab = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tabs.css");
 /**
  * Individual tab component to be used in the `labels` prop of `Tabs`.
  * @example
@@ -43,18 +42,12 @@ require("@itwin/itwinui-css/css/tabs.css");
  *   <Tab label='Label 2' startIcon={<SvgPlaceholder />} />,
  * ];
  */
-const Tab = (props) => {
-    const { label, sublabel, startIcon, children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("button", { className: (0, classnames_1.default)('iui-tab', className), role: 'tab', tabIndex: -1, ...rest },
-        startIcon &&
-            React.cloneElement(startIcon, {
-                className: 'iui-tab-icon',
-                'aria-hidden': true,
-            }),
-        label && (React.createElement("span", { className: 'iui-tab-label' },
+exports.Tab = React.forwardRef((props, forwardedRef) => {
+    const { label, sublabel, startIcon, children, active = false, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'button', className: (0, classnames_1.default)('iui-tab', { 'iui-active': active }, className), role: 'tab', tabIndex: -1, ref: forwardedRef, ...rest },
+        !!startIcon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tab-icon', "aria-hidden": true }, startIcon)) : null,
+        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tab-label' },
             React.createElement("div", null, label),
-            sublabel && React.createElement("div", { className: 'iui-tab-description' }, sublabel))),
+            sublabel && React.createElement(index_js_1.Box, { className: 'iui-tab-description' }, sublabel))),
         children));
-};
-exports.Tab = Tab;
+});

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/tabs.css';
 export declare type OverflowOptions = {
     /**
      * Whether to allow tabs list to scroll when there is overflow,
@@ -103,11 +102,11 @@ export declare type TabsProps = {
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */
-export declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
+declare type HorizontalTabsProps = Omit<TabsProps, 'orientation'>;
 /**
  * @deprecated Since v2, use `TabProps` with `Tabs`
  */
-export declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
+declare type VerticalTabsProps = Omit<TabsProps, 'orientation' | 'type'> & {
     type?: 'default' | 'borderless';
 };
 /**

package/cjs/core/Tabs/Tabs.js

@@ -34,8 +34,8 @@ exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tabs.css");
 const Tab_js_1 = require("./Tab.js");
+const styles_js_1 = __importDefault(require("../../styles.js"));
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -81,7 +81,6 @@ const Tabs = (props) => {
         delete props.overflowOptions;
     }
     const { labels, activeIndex, onTabSelected, focusActivationMode = 'auto', type = 'default', color = 'blue', orientation = 'horizontal', tabsClassName, contentClassName, wrapperClassName, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const isClient = (0, index_js_1.useIsClient)();
     const tablistRef = React.useRef(null);
     const [tablistSizeRef, tabsWidth] = (0, index_js_1.useContainerWidth)(type !== 'default');
@@ -115,7 +114,7 @@ const Tabs = (props) => {
     const [focusedIndex, setFocusedIndex] = React.useState();
     React.useEffect(() => {
         if (tablistRef.current && focusedIndex !== undefined) {
-            const tab = tablistRef.current.querySelectorAll('.iui-tab')[focusedIndex];
+            const tab = tablistRef.current.querySelectorAll(`.${styles_js_1.default['iui-tab']}`)[focusedIndex];
             tab === null || tab === void 0 ? void 0 : tab.focus();
         }
     }, [focusedIndex]);
@@ -123,7 +122,7 @@ const Tabs = (props) => {
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
-            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));
+            !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_js_1.default['iui-tab-description']}`)));
     }, [type]);
     const enableHorizontalScroll = React.useCallback((e) => {
         var _a;
@@ -233,7 +232,7 @@ const Tabs = (props) => {
             if (ownerDoc !== null &&
                 (overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow) &&
                 currentActiveIndex !== undefined) {
-                const activeTab = ownerDoc.querySelectorAll('.iui-tab')[currentActiveIndex];
+                const activeTab = ownerDoc.querySelectorAll(`.${styles_js_1.default['iui-tab']}`)[currentActiveIndex];
                 const isVertical = orientation === 'vertical';
                 const tabPlacement = isTabHidden(activeTab, isVertical);
                 if (tabPlacement) {
@@ -365,9 +364,7 @@ const Tabs = (props) => {
         return (React.createElement("li", { key: index }, !React.isValidElement(label) ? (React.createElement(Tab_js_1.Tab, { label: label, className: (0, classnames_1.default)({
                 'iui-active': index === currentActiveIndex,
             }), tabIndex: index === currentActiveIndex ? 0 : -1, onClick: onClick, "aria-selected": index === currentActiveIndex })) : (React.cloneElement(label, {
-            className: (0, classnames_1.default)(label.props.className, {
-                'iui-active': index === currentActiveIndex,
-            }),
+            active: index === currentActiveIndex,
             'aria-selected': index === currentActiveIndex,
             tabIndex: index === currentActiveIndex ? 0 : -1,
             onClick: (args) => {
@@ -377,16 +374,16 @@ const Tabs = (props) => {
             },
         }))));
     }, [currentActiveIndex, onTabClick]);
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
-        React.createElement("ul", { className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-wrapper', `iui-${orientation}`, wrapperClassName), style: stripeProperties },
+        React.createElement(index_js_1.Box, { as: 'ul', className: (0, classnames_1.default)('iui-tabs', `iui-${type}`, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && isClient,
                 'iui-not-animated': type !== 'default' && !isClient,
                 'iui-large': hasSublabel,
             }, tabsClassName), "data-iui-overflow": overflowOptions === null || overflowOptions === void 0 ? void 0 : overflowOptions.useOverflow, "data-iui-scroll-placement": scrollingPlacement, role: 'tablist', ref: refs, onKeyDown: onKeyDown, ...rest }, labels.map((label, index) => createTab(label, index))),
-        actions && (React.createElement("div", { className: 'iui-tabs-actions-wrapper' },
-            React.createElement("div", { className: 'iui-tabs-actions' }, actions))),
-        children && (React.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
+        actions && (React.createElement(index_js_1.Box, { className: 'iui-tabs-actions-wrapper' },
+            React.createElement(index_js_1.Box, { className: 'iui-tabs-actions' }, actions))),
+        children && (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;
 /**

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

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

package/cjs/core/Tag/Tag.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
-export declare type TagProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type TagProps = {
     /**
      * Callback function that handles click on close icon.
      * Close icon is shown only when this function is passed.
@@ -18,12 +17,12 @@ export declare type TagProps = {
      * @default 'default'
      */
     variant?: 'default' | 'basic';
-} & CommonProps;
+};
 /**
  * Tag for showing categories, filters etc.
  * @example
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-export declare const Tag: (props: TagProps) => JSX.Element;
+export declare const Tag: PolymorphicForwardRefComponent<"span", TagProps>;
 export default Tag;

package/cjs/core/Tag/Tag.js

@@ -34,7 +34,6 @@ exports.Tag = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tag.css");
 const index_js_2 = require("../Buttons/index.js");
 /**
  * Tag for showing categories, filters etc.
@@ -42,16 +41,14 @@ const index_js_2 = require("../Buttons/index.js");
  * <Tag onRemove={() => alert('Closed a tag!')}>I'm a tag</Tag>
  * <Tag variant='basic'>Basic tag</Tag>
  */
-const Tag = (props) => {
+exports.Tag = React.forwardRef((props, forwardedRef) => {
     const { className, variant = 'default', children, onRemove, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("span", { className: (0, classnames_1.default)({
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)({
             'iui-tag-basic': variant === 'basic',
             'iui-tag': variant === 'default',
-        }, className), ...rest },
-        variant === 'default' ? (React.createElement("span", { className: 'iui-tag-label' }, children)) : (children),
+        }, className), ref: forwardedRef, ...rest },
+        variant === 'default' ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tag-label' }, children)) : (children),
         onRemove && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag', className: 'iui-tag-button' },
             React.createElement(index_js_1.SvgCloseSmall, { "aria-hidden": true })))));
-};
-exports.Tag = Tag;
+});
 exports.default = exports.Tag;

package/cjs/core/Tag/TagContainer.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
-export declare type TagContainerProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type TagContainerProps = {
     /**
      * Tags inside the container.
      */
@@ -17,12 +16,12 @@ export declare type TagContainerProps = {
      * @default 'none'
      */
     background?: 'none' | 'filled';
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * TagContainer for grouping tags.
  * @example
  * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
-export declare const TagContainer: (props: TagContainerProps) => JSX.Element;
+export declare const TagContainer: PolymorphicForwardRefComponent<"div", TagContainerProps>;
 export default TagContainer;

package/cjs/core/Tag/TagContainer.js

@@ -34,20 +34,17 @@ exports.TagContainer = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tag.css");
 /**
  * TagContainer for grouping tags.
  * @example
  * <TagContainer><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagContainer>
  * <TagContainer><Tag variant='basic'>Basic tag</Tag><Tag variant='basic'>Basic tag 2</Tag></TagContainer>
  */
-const TagContainer = (props) => {
+exports.TagContainer = React.forwardRef((props, forwardedRef) => {
     const { className, children, overflow, background = 'none', ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-tag-container', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-tag-container', {
             [`iui-${overflow}`]: !!overflow,
             'iui-visible': background !== 'none',
-        }, className), ...rest }, children));
-};
-exports.TagContainer = TagContainer;
+        }, className), ref: forwardedRef, ...rest }, children));
+});
 exports.default = exports.TagContainer;

package/cjs/core/Tag/index.d.ts

@@ -1,6 +1,4 @@
 export { Tag } from './Tag.js';
-export type { TagProps } from './Tag.js';
 declare const _default: "./Tag";
 export default _default;
 export { TagContainer } from './TagContainer.js';
-export type { TagContainerProps } from './TagContainer.js';

package/cjs/core/Textarea/Textarea.d.ts

@@ -1,23 +1,16 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/input.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type TextareaProps = {
     /**
      * Set focus on textarea element.
      * @default false
      */
     setFocus?: boolean;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+};
 /**
  * Basic textarea component
  * @example
  * <Textarea setFocus={true} placeholder='This is a textarea' />
  * <Textarea disabled={true} placeholder='This is a disabled textarea' />
  */
-export declare const Textarea: React.ForwardRefExoticComponent<{
-    /**
-     * Set focus on textarea element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: PolymorphicForwardRefComponent<"textarea", TextareaProps>;
 export default Textarea;

package/cjs/core/Textarea/Textarea.js

@@ -34,7 +34,6 @@ exports.Textarea = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Basic textarea component
  * @example
@@ -43,7 +42,6 @@ require("@itwin/itwinui-css/css/input.css");
  */
 exports.Textarea = React.forwardRef((props, ref) => {
     const { className, rows = 3, setFocus = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const textAreaRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(ref, textAreaRef);
     React.useEffect(() => {
@@ -51,6 +49,6 @@ exports.Textarea = React.forwardRef((props, ref) => {
             textAreaRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("textarea", { className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
+    return (React.createElement(index_js_1.Box, { as: 'textarea', className: (0, classnames_1.default)('iui-input', className), rows: rows, ref: refs, ...rest }));
 });
 exports.default = exports.Textarea;

package/cjs/core/Textarea/index.d.ts

@@ -1,4 +1,3 @@
 export { Textarea } from './Textarea.js';
-export type { TextareaProps } from './Textarea.js';
 declare const _default: "./Textarea";
 export default _default;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { ThemeOptions, ThemeType } from './ThemeProvider.js';
+export declare const ThemeContext: React.Context<{
+    theme?: ThemeType | undefined;
+    themeOptions?: ThemeOptions | undefined;
+    rootRef: React.RefObject<HTMLElement>;
+} | undefined>;

package/cjs/core/{Typography/Small/Small.js → ThemeProvider/ThemeContext.js}

@@ -22,27 +22,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = void 0;
+exports.ThemeContext = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/text.css");
-/**
- * @deprecated Since v2, use `Text` with variant 'small'.
- * @example
- * <Text variant='small' as='small'>I'm some small text!</Text>
- */
-exports.Small = React.forwardRef((props, ref) => {
-    const { className, isMuted = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("small", { ref: ref, className: (0, classnames_1.default)('iui-text-small', { 'iui-text-muted': isMuted }, className), ...rest }));
-});
-exports.default = exports.Small;
+exports.ThemeContext = React.createContext(undefined);