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

package/esm/core/TransferList/TransferList.js

@@ -0,0 +1,142 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { getFocusableElements, useMergedRefs, useId, useSafeContext, Box, polymorphic, } from '../utils/index.js';
+import { List, ListItem } from '../List/index.js';
+// ----------------------------------------------------------------------------
+// TransferListComponent
+const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+TransferListComponent.displayName = 'TransferList';
+const TransferListListboxWrapper = React.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    const uid = useId();
+    const [labelId, setLabelId] = React.useState(uid);
+    return (React.createElement(Box, { as: 'div', className: cx('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
+        React.createElement(TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
+});
+TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+const TransferListListbox = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { labelId } = useSafeContext(TransferListContext);
+    const [focusedIndex, setFocusedIndex] = React.useState();
+    const listRef = React.useRef(null);
+    const refs = useMergedRefs(listRef, ref);
+    const getFocusableNodes = React.useCallback(() => {
+        const focusableItems = getFocusableElements(listRef.current);
+        // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
+    }, []);
+    React.useEffect(() => {
+        var _a;
+        const items = getFocusableNodes();
+        if (focusedIndex != null) {
+            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+    }, [focusedIndex, getFocusableNodes]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        const items = getFocusableNodes();
+        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+            return;
+        }
+        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    return (React.createElement(List, { className: cx('iui-transfer-list-listbox', className), onKeyDown: onKeyDown, role: 'listbox', "aria-multiselectable": true, "aria-labelledby": labelId, tabIndex: 0, ref: refs, ...rest }, children));
+});
+TransferListListbox.displayName = 'TransferList.Listbox';
+const TransferListItem = React.forwardRef((props, ref) => {
+    const { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
+    const onClickEvents = () => actionable && onActiveChange && onActiveChange(!active);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'Spacebar') {
+            !disabled && onClickEvents();
+            event.preventDefault();
+        }
+    };
+    return (React.createElement(ListItem, { ref: ref, onClick: onClickEvents, onKeyDown: onKeyDown, active: active, actionable: actionable, tabIndex: -1, role: 'option', "aria-disabled": disabled ? 'true' : undefined, "aria-selected": active ? 'true' : undefined, disabled: disabled, ...rest }, children));
+});
+TransferListItem.displayName = 'TransferList.Item';
+const TransferListListboxLabel = React.forwardRef((props, ref) => {
+    const { children, className, id, ...rest } = props;
+    const { labelId, setLabelId } = useSafeContext(TransferListContext);
+    React.useEffect(() => {
+        if (id && id !== labelId) {
+            setLabelId(id);
+        }
+    }, [id, labelId, setLabelId]);
+    return (React.createElement(Box, { as: 'div', className: cx('iui-transfer-list-listbox-label', className), id: labelId, ref: ref, ...rest }, children));
+});
+TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+// ----------------------------------------------------------------------------
+// TransferList.Toolbar component
+const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+    role: 'toolbar',
+});
+TransferListToolbar.displayName = 'TransferList.Toolbar';
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+export const TransferList = Object.assign(TransferListComponent, {
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: TransferListListboxWrapper,
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: TransferListListbox,
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: TransferListItem,
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: TransferListListboxLabel,
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: TransferListToolbar,
+});
+export const TransferListContext = React.createContext(undefined);
+export default TransferList;

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

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

package/esm/core/{Typography/Headline → TransferList}/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 { Headline } from './Headline.js';
-export default './Headline';
+export { TransferList } from './TransferList.js';
+export default './TransferList';

package/esm/core/Tree/Tree.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 export declare type NodeData<T> = {
     /**
      * Array of the child nodes contained in the node.
@@ -77,7 +76,7 @@ export declare type TreeProps<T> = {
      * @beta
      */
     enableVirtualization?: boolean;
-} & Omit<CommonProps, 'title'>;
+} & CommonProps;
 /**
  * Tree component used to display a hierarchical structure of `TreeNodes`.
  * User should control state of expanded, selected and disabled nodes using `getNode` prop.

package/esm/core/Tree/Tree.js

@@ -3,8 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useTheme, getFocusableElements, useVirtualization, mergeRefs, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
+import { getFocusableElements, useVirtualization, mergeRefs, Box, polymorphic, } from '../utils/index.js';
 import cx from 'classnames';
 import { TreeContext } from './TreeContext.js';
 /**
@@ -59,7 +58,6 @@ import { TreeContext } from './TreeContext.js';
  */
 export const Tree = (props) => {
     const { data, className, nodeRenderer, getNode, enableVirtualization = false, style, ...rest } = props;
-    useTheme();
     const treeRef = React.useRef(null);
     const focusedIndex = React.useRef(0);
     React.useEffect(() => {
@@ -179,8 +177,9 @@ export const Tree = (props) => {
     };
     return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
 };
-const TreeElement = React.forwardRef(({ children, className, ...rest }, ref) => {
-    return (React.createElement("ul", { className: cx('iui-tree', className), role: 'tree', ref: ref, tabIndex: 0, ...rest }, children));
+const TreeElement = polymorphic.ul('iui-tree', {
+    role: 'tree',
+    tabIndex: 0,
 });
 // Having virtualized tree separately prevents from running all virtualization logic
 const VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest }, ref) => {
@@ -189,7 +188,7 @@ const VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollT
         itemRenderer: itemRenderer,
         scrollToIndex,
     });
-    return (React.createElement("div", { ...{
+    return (React.createElement(Box, { ...{
             ...outerProps,
             className: cx(className, outerProps.className),
             style: { ...style, ...outerProps.style },

package/esm/core/Tree/TreeNode.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
-export declare type TreeNodeProps = {
+declare type TreeNodeProps = {
     /**
      * Unique id of the node.
      * It has to be compatible with HTML id attribute.

package/esm/core/Tree/TreeNode.js

@@ -3,8 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getFocusableElements, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
+import { getFocusableElements, Box } from '../utils/index.js';
 import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander.js';
 import { useTreeContext } from './TreeContext.js';
@@ -29,7 +28,6 @@ import { useTreeContext } from './TreeContext.js';
  */
 export const TreeNode = (props) => {
     const { nodeId, label, sublabel, children, className, icon, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, expander, ...rest } = props;
-    useTheme();
     const { nodeDepth, subNodeIds = [], parentNodeId, scrollToParent, groupSize, indexInGroup, } = useTreeContext();
     const [isFocused, setIsFocused] = React.useState(false);
     const nodeRef = React.useRef(null);
@@ -103,34 +101,30 @@ export const TreeNode = (props) => {
         onExpanded(nodeId, !isExpanded);
         event.stopPropagation();
     }, [isExpanded, nodeId, onExpanded]);
-    return (React.createElement("li", { role: 'treeitem', className: cx('iui-tree-item', className), id: nodeId, "aria-expanded": hasSubNodes ? isExpanded : undefined, "aria-disabled": isDisabled, "aria-selected": isSelected, "aria-level": nodeDepth + 1, "aria-setsize": groupSize, "aria-posinset": indexInGroup + 1, tabIndex: -1, onFocus: (e) => {
+    return (React.createElement(Box, { as: 'li', role: 'treeitem', className: cx('iui-tree-item', className), id: nodeId, "aria-expanded": hasSubNodes ? isExpanded : undefined, "aria-disabled": isDisabled, "aria-selected": isSelected, "aria-level": nodeDepth + 1, "aria-setsize": groupSize, "aria-posinset": indexInGroup + 1, tabIndex: -1, onFocus: (e) => {
             setIsFocused(true);
             // Prevents from triggering onFocus on parent Tree
             e.stopPropagation();
         }, onBlur: () => {
             setIsFocused(false);
         }, ref: nodeRef, onKeyDown: onKeyDown, ...rest },
-        React.createElement("div", { className: cx('iui-tree-node', {
+        React.createElement(Box, { className: cx('iui-tree-node', {
                 'iui-active': isSelected,
                 'iui-disabled': isDisabled,
             }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)) },
-            checkbox && React.isValidElement(checkbox)
+            checkbox && (React.createElement(Box, { className: 'iui-tree-node-checkbox' }, React.isValidElement(checkbox)
                 ? React.cloneElement(checkbox, {
-                    className: cx('iui-tree-node-checkbox', checkbox.props.className),
                     tabIndex: isFocused ? 0 : -1,
                 })
-                : checkbox,
-            React.createElement("div", { className: 'iui-tree-node-content' },
+                : checkbox)),
+            React.createElement(Box, { className: 'iui-tree-node-content' },
                 hasSubNodes && expander,
                 hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
-                icon &&
-                    React.cloneElement(icon, {
-                        className: cx('iui-tree-node-content-icon', icon.props.className),
-                    }),
-                React.createElement("span", { className: 'iui-tree-node-content-label' },
-                    React.createElement("div", { className: 'iui-tree-node-content-title' }, label),
-                    sublabel && (React.createElement("div", { className: 'iui-tree-node-content-caption' }, sublabel))),
+                icon && (React.createElement(Box, { as: 'span', className: 'iui-tree-node-content-icon', "aria-hidden": true }, icon)),
+                React.createElement(Box, { className: 'iui-tree-node-content-label' },
+                    React.createElement(Box, { className: 'iui-tree-node-content-title' }, label),
+                    sublabel && (React.createElement(Box, { className: 'iui-tree-node-content-caption' }, sublabel))),
                 children)),
-        hasSubNodes && (React.createElement("ul", { className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(',') }))));
+        hasSubNodes && (React.createElement(Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(',') }))));
 };
 export default TreeNode;

package/esm/core/Tree/TreeNodeExpander.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import type { IconButtonProps } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/tree.css';
-export declare type TreeNodeExpanderProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
+declare type TreeNodeExpanderProps = {
     isExpanded?: boolean;
 } & IconButtonProps;
-export declare const TreeNodeExpander: (props: TreeNodeExpanderProps) => JSX.Element;
+export declare const TreeNodeExpander: PolymorphicForwardRefComponent<"button", TreeNodeExpanderProps>;
 export default TreeNodeExpander;

package/esm/core/Tree/TreeNodeExpander.js

@@ -6,12 +6,11 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/tree.css';
-export const TreeNodeExpander = (props) => {
+export const TreeNodeExpander = React.forwardRef((props, ref) => {
     const { isExpanded, ...rest } = props;
-    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ...rest },
+    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ref: ref, ...rest },
         React.createElement(SvgChevronRight, { className: cx('iui-tree-node-content-expander-icon', {
                 'iui-tree-node-content-expander-icon-expanded': isExpanded,
             }) })));
-};
+});
 export default TreeNodeExpander;

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

@@ -1,6 +1,4 @@
 export { Tree } from './Tree.js';
-export type { TreeProps, NodeData, NodeRenderProps } from './Tree.js';
+export type { NodeData, NodeRenderProps } from './Tree.js';
 export { TreeNode } from './TreeNode.js';
-export type { TreeNodeProps } from './TreeNode.js';
 export { TreeNodeExpander } from './TreeNodeExpander.js';
-export type { TreeNodeExpanderProps } from './TreeNodeExpander.js';

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

@@ -1,8 +1,3 @@
-import * as React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/anchor.css';
-declare type AnchorOwnProps = Record<never, never>;
-export declare type AnchorProps<T extends React.ElementType = 'a'> = PolymorphicComponentProps<T, AnchorOwnProps>;
 /**
  * A consistently styled anchor component.
  *
@@ -17,5 +12,5 @@ export declare type AnchorProps<T extends React.ElementType = 'a'> = Polymorphic
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export declare const Anchor: PolymorphicForwardRefComponent<"a", AnchorOwnProps>;
+export declare const Anchor: import("../../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
 export default Anchor;

package/esm/core/Typography/Anchor/Anchor.js

@@ -2,10 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/anchor.css';
+import { polymorphic } from '../../utils/index.js';
 /**
  * A consistently styled anchor component.
  *
@@ -20,9 +17,5 @@ import '@itwin/itwinui-css/css/anchor.css';
  * <Anchor as={Link} to='/'>Home</Anchor>
  * <Anchor as='button' onClick={() => {}}>click me</Anchor>
  */
-export const Anchor = React.forwardRef((props, ref) => {
-    const { as: Element = 'a', className, ...rest } = props;
-    useTheme();
-    return (React.createElement(Element, { className: cx('iui-anchor', className), ref: ref, ...rest }));
-});
+export const Anchor = polymorphic.a('iui-anchor');
 export default Anchor;

package/esm/core/Typography/Anchor/index.d.ts

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

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/blockquote.css';
-export declare type BlockquoteProps = {
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+declare type BlockquoteProps = {
     /**
      * Optional footer for any attribution/source.
      */
     footer?: React.ReactNode;
-} & React.BlockquoteHTMLAttributes<HTMLQuoteElement>;
+};
 /**
  * Basic blockquote component
  * @example
@@ -14,10 +14,5 @@ export declare type BlockquoteProps = {
  *  <p>This is a quote from someone</p>
  * </Blockquote>
  */
-export declare const Blockquote: React.ForwardRefExoticComponent<{
-    /**
-     * Optional footer for any attribution/source.
-     */
-    footer?: React.ReactNode;
-} & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & React.RefAttributes<HTMLQuoteElement>>;
+export declare const Blockquote: PolymorphicForwardRefComponent<"blockquote", BlockquoteProps>;
 export default Blockquote;

package/esm/core/Typography/Blockquote/Blockquote.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/blockquote.css';
+import { Box } from '../../utils/index.js';
 /**
  * Basic blockquote component
  * @example
@@ -16,8 +15,7 @@ import '@itwin/itwinui-css/css/blockquote.css';
  */
 export const Blockquote = React.forwardRef((props, ref) => {
     const { className, children, footer, ...rest } = props;
-    useTheme();
-    return (React.createElement("blockquote", { className: cx('iui-blockquote', className), ref: ref, ...rest },
+    return (React.createElement(Box, { as: 'blockquote', className: cx('iui-blockquote', className), ref: ref, ...rest },
         children,
         footer && React.createElement("footer", null, footer)));
 });

package/esm/core/Typography/Blockquote/index.d.ts

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

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

@@ -1,16 +1,7 @@
-import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/code.css';
-export declare type CodeProps = {
-    /**
-     * A piece of inline code.
-     */
-    children: React.ReactNode;
-} & CommonProps;
 /**
  * Inline code element.
  * @example
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
-export declare const Code: (props: CodeProps) => JSX.Element;
+export declare const Code: import("../../utils/props.js").PolymorphicForwardRefComponent<"code", {}>;
 export default Code;

package/esm/core/Typography/Code/Code.js

@@ -2,18 +2,11 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
-import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/code.css';
+import { polymorphic } from '../../utils/index.js';
 /**
  * Inline code element.
  * @example
  * <p>Some <Code>inline code</Code> in a paragraph</p>
  */
-export const Code = (props) => {
-    const { className, children, ...rest } = props;
-    useTheme();
-    return (React.createElement("code", { className: cx('iui-code', className), ...rest }, children));
-};
+export const Code = polymorphic.code('iui-code');
 export default Code;

package/esm/core/Typography/Code/index.d.ts

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

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

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/keyboard.css';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * Some predefined strings for common keyboard keys.
  */
@@ -19,17 +17,17 @@ export declare const KbdKeys: {
     readonly Right: "→";
     readonly Down: "↓";
 };
-export declare type KbdProps = {
+declare type KbdProps = {
     /**
      * Content of the key to be passed as children. Must be a string or one of the `KbdKeys`.
      */
     children: string;
-} & CommonProps;
+};
 /**
  * A keyboard key element.
  * @example
  * <Kbd>A</Kbd>
  * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
  */
-export declare const Kbd: (props: KbdProps) => JSX.Element;
+export declare const Kbd: PolymorphicForwardRefComponent<"kbd", KbdProps>;
 export default Kbd;

package/esm/core/Typography/Kbd/Kbd.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/keyboard.css';
+import { Box } from '../../utils/index.js';
 /**
  * Some predefined strings for common keyboard keys.
  */
@@ -30,9 +29,8 @@ export const KbdKeys = {
  * <Kbd>A</Kbd>
  * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
  */
-export const Kbd = (props) => {
+export const Kbd = React.forwardRef((props, forwardedRef) => {
     const { className, children, ...rest } = props;
-    useTheme();
-    return (React.createElement("kbd", { className: cx('iui-keyboard', className), ...rest }, children));
-};
+    return (React.createElement(Box, { as: 'kbd', className: cx('iui-keyboard', className), ref: forwardedRef, ...rest }, children));
+});
 export default Kbd;

package/esm/core/Typography/Kbd/index.d.ts

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

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

@@ -1,7 +1,5 @@
-import * as React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
-declare type TextOwnProps = {
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+declare type TextProps = {
     /**
      * Which typography variant/size should be used for the styling?
      *
@@ -26,8 +24,6 @@ declare type TextOwnProps = {
      */
     isSkeleton?: boolean;
 };
-export declare type TextProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, TextOwnProps>;
-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
@@ -40,5 +36,5 @@ declare type TextComponent = PolymorphicForwardRefComponent<'div', TextOwnProps>
  * <Text isMuted>Some muted text.</Text>
  * <Text isSkeleton>Skeleton text</Text>
  */
-export declare const Text: TextComponent;
+export declare const Text: PolymorphicForwardRefComponent<"div", TextProps>;
 export default Text;

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

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
+import { Box } from '../../utils/index.js';
 /**
  * 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
@@ -19,9 +18,8 @@ import '@itwin/itwinui-css/css/text.css';
  * <Text isSkeleton>Skeleton text</Text>
  */
 export const Text = React.forwardRef((props, ref) => {
-    const { variant = 'body', as: Element = 'div', className, isMuted = false, isSkeleton = false, ...rest } = props;
-    useTheme();
-    return (React.createElement(Element, { className: cx({
+    const { variant = 'body', className, isMuted = false, isSkeleton = false, ...rest } = props;
+    return (React.createElement(Box, { className: cx({
             [`iui-text-${variant}`]: variant !== 'body',
             'iui-text-block': variant === 'body',
             'iui-text-muted': isMuted,

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

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

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

@@ -1,22 +1,5 @@
 export { Anchor } from './Anchor/index.js';
-export type { AnchorProps } from './Anchor/index.js';
-export { Headline } from './Headline/index.js';
-export type { HeadlineProps } from './Headline/index.js';
-export { Title } from './Title/index.js';
-export type { TitleProps } from './Title/index.js';
-export { Subheading } from './Subheading/index.js';
-export type { SubheadingProps } from './Subheading/index.js';
-export { Leading } from './Leading/index.js';
-export type { LeadingProps } from './Leading/index.js';
-export { Body } from './Body/index.js';
-export type { BodyProps } from './Body/index.js';
-export { Small } from './Small/index.js';
-export type { SmallProps } from './Small/index.js';
 export { Blockquote } from './Blockquote/index.js';
-export type { BlockquoteProps } from './Blockquote/index.js';
 export { Code } from './Code/index.js';
-export type { CodeProps } from './Code/index.js';
 export { Kbd, KbdKeys } from './Kbd/index.js';
-export type { KbdProps } from './Kbd/index.js';
 export { Text } from './Text/index.js';
-export type { TextProps } from './Text/index.js';

package/esm/core/Typography/index.js

@@ -3,12 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export { Anchor } from './Anchor/index.js';
-export { Headline } from './Headline/index.js';
-export { Title } from './Title/index.js';
-export { Subheading } from './Subheading/index.js';
-export { Leading } from './Leading/index.js';
-export { Body } from './Body/index.js';
-export { Small } from './Small/index.js';
 export { Blockquote } from './Blockquote/index.js';
 export { Code } from './Code/index.js';
 export { Kbd, KbdKeys } from './Kbd/index.js';