@itwin/itwinui-react 2.11.4 → 3.0.0-dev.0

package/esm/core/Avatar/Avatar.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/avatar.css';
 export const defaultStatusTitles = {
     away: 'Away',
@@ -27,18 +27,17 @@ export const defaultStatusTitles = {
  * <caption>X-large icon with image</caption>
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
-export const Avatar = (props) => {
+export const Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
-    useTheme();
     const statusTitles = { ...defaultStatusTitles, ...translatedStatusTitles };
-    return (React.createElement("span", { className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ...rest },
-        !image && (React.createElement("abbr", { className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (React.createElement(Box, { as: 'span', className: cx('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ref: ref, ...rest },
+        !image && (React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         image,
-        React.createElement("span", { className: 'iui-stroke' }),
-        status && (React.createElement("span", { title: statusTitles[status], className: cx('iui-status', {
+        React.createElement(Box, { as: 'span', className: 'iui-stroke' }),
+        status && (React.createElement(Box, { as: 'span', title: statusTitles[status], className: cx('iui-status', {
                 [`iui-${status}`]: !!status,
             }), "aria-label": statusTitles[status] }))));
-};
+});
 /**
  * @deprecated Since v2, this has been renamed to `Avatar`
  */

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

@@ -1,4 +1,3 @@
 export { Avatar, UserIcon } from './Avatar.js';
-export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar.js';
 declare const _default: "./Avatar";
 export default _default;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/avatar.css';
-export declare type AvatarGroupProps = {
+declare type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.
      * @default 5
@@ -30,11 +30,7 @@ export declare type AvatarGroupProps = {
      * Count Avatar props.
      */
     countIconProps?: React.ComponentPropsWithRef<'div'>;
-} & Omit<CommonProps, 'title'>;
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroupProps` (Use with `AvatarGroup`)
- */
-export declare type UserIconGroupProps = AvatarGroupProps;
+};
 /**
  * Group Avatars together.
  *
@@ -62,9 +58,9 @@ export declare type UserIconGroupProps = AvatarGroupProps;
  *  />
  * </AvatarGroup>
  */
-export declare const AvatarGroup: (props: AvatarGroupProps) => JSX.Element;
+export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 /**
  * @deprecated Since v2, this has been renamed to `AvatarGroup`
  */
-export declare const UserIconGroup: (props: AvatarGroupProps) => JSX.Element;
+export declare const UserIconGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 export default AvatarGroup;

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/avatar.css';
 /**
  * Group Avatars together.
@@ -33,32 +33,30 @@ import '@itwin/itwinui-css/css/avatar.css';
  *  />
  * </AvatarGroup>
  */
-export const AvatarGroup = (props) => {
+export const AvatarGroup = React.forwardRef((props, ref) => {
     const maxLength = 99;
     const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
     const childrenArray = React.Children.toArray(children);
     const childrenLength = childrenArray.length;
-    useTheme();
     const getAvatarList = (count) => {
         return childrenArray.slice(0, count).map((child) => React.cloneElement(child, {
             status: undefined,
             size: iconSize,
         }));
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cx('iui-avatar-list', {
-                'iui-animated': animated,
-                'iui-stacked': stacked,
-            }, className), ...rest },
-            childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
-            childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
-                getAvatarList(maxIcons),
-                React.createElement("div", { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
-                    React.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
-                        ? `${childrenLength - maxIcons}`
-                        : `${maxLength}+`),
-                    React.createElement("span", { className: 'iui-stroke' })))))));
-};
+    return (React.createElement(Box, { className: cx('iui-avatar-list', {
+            'iui-animated': animated,
+            'iui-stacked': stacked,
+        }, className), ref: ref, ...rest },
+        childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
+        childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
+            getAvatarList(maxIcons),
+            React.createElement(Box, { ...countIconProps, className: cx('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
+                React.createElement(Box, { as: 'abbr', className: 'iui-initials' }, childrenLength <= maxLength
+                    ? `${childrenLength - maxIcons}`
+                    : `${maxLength}+`),
+                React.createElement(Box, { className: 'iui-stroke' }))))));
+});
 /**
  * @deprecated Since v2, this has been renamed to `AvatarGroup`
  */

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

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

package/esm/core/Backdrop/Backdrop.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/backdrop.css';
 export declare type BackdropProps = {
     /**
@@ -6,5 +6,5 @@ export declare type BackdropProps = {
      * @default true
      */
     isVisible?: boolean;
-} & React.ComponentPropsWithRef<'div'>;
-export declare const Backdrop: React.ForwardRefExoticComponent<Pick<BackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible"> & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Backdrop: PolymorphicForwardRefComponent<"div", BackdropProps>;

package/esm/core/Backdrop/Backdrop.js

@@ -4,10 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/backdrop.css';
 export const Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
+    return (React.createElement(Box, { className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
 });

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

@@ -1,2 +1 @@
 export { Backdrop } from './Backdrop.js';
-export type { BackdropProps } from './Backdrop.js';

package/esm/core/Badge/Badge.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
 import { SoftBackgrounds } from '../utils/index.js';
-import type { CommonProps } from '../utils/index.js';
-import type { AnyString } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/badge.css';
-export declare type BadgeProps = {
+declare type BadgeProps = {
     /**
      * Background color of the badge.
      *
@@ -17,7 +15,7 @@ export declare type BadgeProps = {
      * Always gets converted to uppercase, and truncated if too long.
      */
     children: string;
-} & CommonProps;
+};
 /**
  * A colorful visual indicator for categorizing items.
  * @example
@@ -25,5 +23,5 @@ export declare type BadgeProps = {
  * <Badge backgroundColor="sunglow">Label</Badge>
  * <Badge backgroundColor="positive">Label</Badge>
  */
-export declare const Badge: (props: BadgeProps) => JSX.Element;
+export declare const Badge: PolymorphicForwardRefComponent<"span", BadgeProps>;
 export default Badge;

package/esm/core/Badge/Badge.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, isSoftBackground, SoftBackgrounds } from '../utils/index.js';
+import { isSoftBackground, SoftBackgrounds, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/badge.css';
 /**
  * Helper function that returns one of the preset badge color values.
@@ -29,9 +29,8 @@ const getStatusValue = (color) => {
  * <Badge backgroundColor="sunglow">Label</Badge>
  * <Badge backgroundColor="positive">Label</Badge>
  */
-export const Badge = (props) => {
+export const Badge = React.forwardRef((props, forwardedRef) => {
     const { backgroundColor, style, className, children, ...rest } = props;
-    useTheme();
     // choosing 'primary' status should result in data-iui-status equaling 'informational'
     const reducedBackgroundColor = backgroundColor === 'primary' ? 'informational' : backgroundColor;
     const statusValue = getStatusValue(reducedBackgroundColor);
@@ -41,6 +40,6 @@ export const Badge = (props) => {
             ...style,
         }
         : { ...style };
-    return (React.createElement("span", { className: cx('iui-badge', className), style: _style, "data-iui-status": statusValue, ...rest }, children));
-};
+    return (React.createElement(Box, { as: 'span', className: cx('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
+});
 export default Badge;

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

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

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
-export declare type BreadcrumbsProps = {
+declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.
      * Defaults to the index of the last breadcrumb item.
@@ -74,7 +74,7 @@ export declare type BreadcrumbsProps = {
      *  </Breadcrumbs>
      */
     overflowButton?: (visibleCount: number) => React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -97,78 +97,5 @@ export declare type BreadcrumbsProps = {
  *   <span>Current level</span>
  * </Breadcrumbs>
  */
-export declare const Breadcrumbs: React.ForwardRefExoticComponent<{
-    /**
-     * Index of the currently active breadcrumb.
-     * Defaults to the index of the last breadcrumb item.
-     */
-    currentIndex?: number | undefined;
-    /**
-     * Breadcrumb items.
-     */
-    children: React.ReactNode[];
-    /**
-     * Specify a custom separator element to show between breadcrumb items.
-     * Defaults to the `SvgChevronRight` icon.
-     */
-    separator?: React.ReactNode;
-    /**
-     * If specified, this prop will be used to show a custom button when overflow happens,
-     * i.e. when there is not enough space to fit all the breadcrumbs.
-     *
-     * Expects a function that takes the number of items that are visible
-     * and returns the `ReactNode` to render.
-     *
-     * @example <caption>Uses the overflow button to redirect to the previous breadcrumb</caption>
-     *  <Breadcrumbs
-     *    overflowButton={(visibleCount: number) => {
-     *      const previousBreadcrumb = visibleCount > 1 ? items.length - visibleCount : items.length - 2;
-     *      return (
-     *        <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
-     *          <IconButton
-     *            onClick={() => {
-     *              // click on "previousBreadcrumb"
-     *            }}
-     *          >
-     *            <SvgMoreSmall />
-     *          </IconButton>
-     *        </Tooltip>
-     *      );
-     *    }}
-     *  >
-     *    {items}
-     *  </Breadcrumbs>
-     *
-     * @example <caption>Uses the overflow button to add a dropdown that contains hidden breadcrumbs</caption>
-     *  <Breadcrumbs
-     *    overflowButton={(visibleCount) => (
-     *      <DropdownMenu
-     *        menuItems={(close) =>
-     *          Array(items.length - visibleCount)
-     *            .fill(null)
-     *            .map((_, _index) => {
-     *              const index = visibleCount > 1 ? _index + 1 : _index;
-     *              const onClick = () => {
-     *                // click on "index" breadcrumb
-     *                close();
-     *              };
-     *              return (
-     *                <MenuItem key={index} onClick={onClick}>
-     *                  Item {index}
-     *                </MenuItem>
-     *              );
-     *            })
-     *        }
-     *      >
-     *        <IconButton>
-     *          <SvgMoreSmall />
-     *        </IconButton>
-     *      </DropdownMenu>
-     *    )}
-     *  >
-     *    {items}
-     *  </Breadcrumbs>
-     */
-    overflowButton?: ((visibleCount: number) => React.ReactNode) | undefined;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLElement>>;
+export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps>;
 export default Breadcrumbs;

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useMergedRefs, useOverflow, SvgChevronRight, } from '../utils/index.js';
+import { useMergedRefs, useOverflow, SvgChevronRight, Box, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -30,16 +30,15 @@ import '@itwin/itwinui-css/css/breadcrumbs.css';
  */
 export const Breadcrumbs = React.forwardRef((props, ref) => {
     const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
-    useTheme();
     const [overflowRef, visibleCount] = useOverflow(items);
     const refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement("nav", { className: cx('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
-        React.createElement("ol", { className: 'iui-breadcrumbs-list' },
+    return (React.createElement(Box, { as: 'nav', className: cx('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
+        React.createElement(Box, { as: 'ol', className: 'iui-breadcrumbs-list' },
             visibleCount > 1 && (React.createElement(React.Fragment, null,
                 React.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
                 React.createElement(Separator, { separator: separator }))),
             items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026"))),
+                React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement(Box, { as: 'span', className: 'iui-breadcrumbs-text' }, "\u2026"))),
                 React.createElement(Separator, { separator: separator }))),
             items
                 .slice(visibleCount > 1
@@ -56,11 +55,11 @@ export const Breadcrumbs = React.forwardRef((props, ref) => {
 });
 const ListItem = ({ item, isActive, }) => {
     var _a;
-    return (React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
+    return (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
         ? React.cloneElement(item, {
             'aria-current': ((_a = item.props['aria-current']) !== null && _a !== void 0 ? _a : isActive) ? 'location' : undefined,
         })
         : item));
 };
-const Separator = ({ separator }) => (React.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(SvgChevronRight, null)));
+const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(SvgChevronRight, null)));
 export default Breadcrumbs;

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

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

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
-export declare type ButtonGroupProps = {
+declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.
      */
@@ -25,7 +26,7 @@ export declare type ButtonGroupProps = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
-} & React.ComponentPropsWithRef<'div'>;
+};
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -54,5 +55,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "orientation" | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useOverflow, useMergedRefs } from '../utils/index.js';
+import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Group buttons together for common actions.
@@ -40,23 +40,25 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
         var _a, _b;
         return (_b = (_a = React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)) === null || _a === void 0 ? void 0 : _a.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
     }, [children]);
-    useTheme();
     const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
     const refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement("div", { className: cx({
+    return (React.createElement(Box, { className: cx({
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, className), "aria-orientation": orientation, ref: refs, ...rest },
-        React.createElement(React.Fragment, null,
-            visibleCount < items.length &&
-                overflowButton &&
-                overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
-            visibleCount < items.length
-                ? items.slice(0, Math.max(0, visibleCount - 1))
-                : items,
-            visibleCount < items.length &&
-                overflowButton &&
-                overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))));
+        }, className), "aria-orientation": orientation, ref: refs, ...rest }, (() => {
+        if (!(visibleCount < items.length)) {
+            return items;
+        }
+        const overflowStart = overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return (React.createElement(React.Fragment, null,
+            overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(overflowStart))),
+            overflowPlacement === 'start'
+                ? items.slice(overflowStart + 1)
+                : items.slice(0, Math.max(0, overflowStart)),
+            overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(overflowStart)))));
+    })()));
 });
 export default ButtonGroup;

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

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

package/esm/core/Buttons/Button/Button.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
+/// <reference types="react" />
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
-declare type ButtonOwnProps = {
+export declare type ButtonProps = {
     /**
      * Modify size of the button.
      */
@@ -20,13 +20,7 @@ declare type ButtonOwnProps = {
      * Icon shown after the main button content.
      */
     endIcon?: JSX.Element;
-    /**
-     * Content of the button.
-     */
-    children?: React.ReactNode;
 };
-export declare type ButtonProps<T extends React.ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOwnProps>;
-declare type ButtonComponent = PolymorphicForwardRefComponent<'button', ButtonOwnProps>;
 /**
  * Generic button component
  * @example
@@ -36,5 +30,5 @@ declare type ButtonComponent = PolymorphicForwardRefComponent<'button', ButtonOw
  * <Button size='small' styleType='cta'>This is a small call to action button</Button>
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
-export declare const Button: ButtonComponent;
+export declare const Button: PolymorphicForwardRefComponent<"button", ButtonProps>;
 export default Button;

package/esm/core/Buttons/Button/Button.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../../utils/index.js';
+import { Box } from '../../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Generic button component
@@ -16,11 +16,10 @@ import '@itwin/itwinui-css/css/button.css';
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export const Button = React.forwardRef((props, ref) => {
-    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, as: Element = 'button', ...rest } = props;
-    useTheme();
-    return (React.createElement(Element, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
-        startIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
+    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, ...rest } = props;
+    return (React.createElement(Box, { as: 'button', ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
+        startIcon && (React.createElement(Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
         children && React.createElement("span", null, children),
-        endIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, endIcon))));
+        endIcon && (React.createElement(Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, endIcon))));
 });
 export default Button;

package/esm/core/Buttons/Button/index.d.ts

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

package/esm/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
-import type { ButtonProps } from '../Button/index.js';
+/// <reference types="react" />
+import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
@@ -19,7 +20,7 @@ export declare type DropdownButtonProps = {
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */
     dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
-} & Omit<ButtonProps, 'onClick' | 'styleType' | 'endIcon'>;
+} & Omit<ButtonProps, 'styleType' | 'endIcon'>;
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -29,22 +30,5 @@ export declare type DropdownButtonProps = {
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-export declare const DropdownButton: React.ForwardRefExoticComponent<{
-    /**
-     * Items in the dropdown menu.
-     * Pass a function that takes the `close` argument (to close the menu),
-     * and returns a list of `MenuItem` components.
-     */
-    menuItems: (close: () => void) => JSX.Element[];
-    /**
-     * Style of the dropdown button.
-     * Use 'borderless' to hide outline.
-     * @default 'default'
-     */
-    styleType?: "default" | "borderless" | undefined;
-    /**
-     * Props for the `DropdownMenu` which extends `PopoverProps`.
-     */
-    dropdownMenuProps?: Omit<DropdownMenuProps, "children" | "menuItems"> | undefined;
-} & Omit<ButtonProps<"button">, "onClick" | "styleType" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
 export default DropdownButton;

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Button } from '../Button/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, useTheme, useMergedRefs, } from '../../utils/index.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall, useMergedRefs, } from '../../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
 /**
  * Button that opens a DropdownMenu.
@@ -19,7 +19,6 @@ import '@itwin/itwinui-css/css/button.css';
  */
 export const DropdownButton = React.forwardRef((props, ref) => {
     const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
-    useTheme();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const buttonRef = React.useRef(null);

package/esm/core/Buttons/DropdownButton/index.d.ts

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

package/esm/core/Buttons/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/index.js';
+import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import '@itwin/itwinui-css/css/button.css';
 import '@itwin/itwinui-css/css/tooltip.css';
@@ -14,7 +14,6 @@ export declare type IconButtonProps = {
      */
     label?: React.ReactNode;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
-declare type IconButtonComponent = PolymorphicForwardRefComponent<'button', IconButtonProps>;
 /**
  * Icon button
  * @example
@@ -22,5 +21,5 @@ declare type IconButtonComponent = PolymorphicForwardRefComponent<'button', Icon
  * @example
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
-export declare const IconButton: IconButtonComponent;
+export declare const IconButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
 export default IconButton;