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

package/cjs/core/Modal/ModalContent.js

@@ -1,38 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContent = 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 React = __importStar(require("react"));
 const DialogContent_js_1 = require("../Dialog/DialogContent.js");
 /**
  * Container for content in `Modal`.
  */
-const ModalContent = (props) => (React.createElement(DialogContent_js_1.DialogContent, { ...props }));
-exports.ModalContent = ModalContent;
+exports.ModalContent = Object.assign({}, DialogContent_js_1.DialogContent);
 exports.default = exports.ModalContent;

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

@@ -1,8 +1,5 @@
 export { Modal } from './Modal.js';
-export type { ModalProps } from './Modal.js';
 export { ModalButtonBar } from './ModalButtonBar.js';
-export type { ModalButtonBarProps } from './ModalButtonBar.js';
 export { ModalContent } from './ModalContent.js';
-export type { ModalContentProps } from './ModalContent.js';
 declare const _default: "./Modal";
 export default _default;

package/cjs/core/NonIdealState/NonIdealState.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
-export declare type NonIdealStateProps = {
+declare type NonIdealStateProps = {
     /**
      * An svg component, preferably from @itwin/itwinui-illustrations-react.
      *
@@ -34,7 +35,7 @@ export declare type NonIdealStateProps = {
      * />
      */
     actions?: React.ReactNode;
-} & React.ComponentPropsWithoutRef<'div'>;
+};
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
  * Works well with svgs from @itwin/itwinui-illustrations-react.
@@ -42,5 +43,5 @@ export declare type NonIdealStateProps = {
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
-export declare const NonIdealState: (props: NonIdealStateProps) => JSX.Element;
+export declare const NonIdealState: PolymorphicForwardRefComponent<"div", NonIdealStateProps>;
 export default NonIdealState;

package/cjs/core/NonIdealState/NonIdealState.js

@@ -42,14 +42,12 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />
  */
-const NonIdealState = (props) => {
+exports.NonIdealState = React.forwardRef((props, forwardedRef) => {
     const { className, svg, heading, description, actions, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-non-ideal-state', className), ...rest },
-        React.createElement("div", { className: 'iui-non-ideal-state-illustration' }, svg),
-        heading && React.createElement("div", { className: 'iui-non-ideal-state-title' }, heading),
-        description && (React.createElement("div", { className: 'iui-non-ideal-state-description' }, description)),
-        actions && React.createElement("div", { className: 'iui-non-ideal-state-actions' }, actions)));
-};
-exports.NonIdealState = NonIdealState;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-non-ideal-state', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-illustration' }, svg),
+        heading && React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-title' }, heading),
+        description && (React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-description' }, description)),
+        actions && React.createElement(index_js_1.Box, { className: 'iui-non-ideal-state-actions' }, actions)));
+});
 exports.default = exports.NonIdealState;

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

@@ -1,6 +1,5 @@
 export { ErrorPage } from './ErrorPage.js';
-export type { ErrorPageProps, ErrorPageType, ErrorTypeTranslations, } from './ErrorPage.js';
+export type { ErrorPageType, ErrorTypeTranslations } from './ErrorPage.js';
 export { NonIdealState } from './NonIdealState.js';
-export type { NonIdealStateProps } from './NonIdealState.js';
 declare const _default: "./NonIdealState";
 export default _default;

package/cjs/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/utils.css';
-export declare type NotificationMarkerProps = {
+declare type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.
      */
@@ -34,7 +35,7 @@ export declare type NotificationMarkerProps = {
      * </NotificationMarker>
      */
     enabled?: boolean;
-} & React.ComponentProps<'span'>;
+};
 /**
  * A small notification circle to the top-right of the passed children prop.
  * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.
@@ -47,5 +48,5 @@ export declare type NotificationMarkerProps = {
  * @example
  * <NotificationMarker status='positive' pulsing={true}>Live</NotificationMarker>
  */
-export declare const NotificationMarker: React.ForwardRefExoticComponent<Pick<NotificationMarkerProps, "key" | "status" | keyof React.HTMLAttributes<HTMLSpanElement> | "enabled" | "pulsing"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const NotificationMarker: PolymorphicForwardRefComponent<"span", NotificationMarkerProps>;
 export default NotificationMarker;

package/cjs/core/NotificationMarker/NotificationMarker.js

@@ -49,7 +49,6 @@ require("@itwin/itwinui-css/css/utils.css");
  */
 exports.NotificationMarker = React.forwardRef((props, ref) => {
     const { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("span", { ref: ref, className: (0, classnames_1.default)({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
+    return (React.createElement(index_js_1.Box, { as: 'span', ref: ref, className: (0, classnames_1.default)({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
 });
 exports.default = exports.NotificationMarker;

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

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

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.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/progress-indicator.css';
-export declare type ProgressLinearProps = {
+declare type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
      * @default 0
@@ -25,7 +25,7 @@ export declare type ProgressLinearProps = {
      * Status of progress. Positive status always has 100% value.
      */
     status?: 'positive' | 'negative';
-} & CommonProps;
+};
 /**
  * Shows progress on a linear bar
  * @example
@@ -41,5 +41,5 @@ export declare type ProgressLinearProps = {
  * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
  * <ProgressLinear status='negative' />
  */
-export declare const ProgressLinear: (props: ProgressLinearProps) => JSX.Element;
+export declare const ProgressLinear: PolymorphicForwardRefComponent<"div", ProgressLinearProps>;
 export default ProgressLinear;

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -50,19 +50,17 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
  * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
  * <ProgressLinear status='negative' />
  */
-const ProgressLinear = (props) => {
-    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
+exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
+    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, ...rest } = props;
     const boundedValue = Math.min(100, Math.max(0, value));
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-progress-indicator-linear', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-linear', {
             [`iui-${status}`]: !!status,
-        }, className), style: style, ...rest },
-        React.createElement("div", { className: 'iui-track' },
-            React.createElement("div", { className: (0, classnames_1.default)('iui-fill', {
+        }, className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-track' },
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-fill', {
                     'iui-determinate': !indeterminate && isAnimated,
                     'iui-indeterminate': indeterminate,
                 }), style: { width: indeterminate ? '100%' : `${boundedValue}%` } })),
-        labels.length > 0 && (React.createElement("div", { className: 'iui-label' }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
-};
-exports.ProgressLinear = ProgressLinear;
+        labels.length > 0 && (React.createElement(index_js_1.Box, { className: 'iui-label' }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+});
 exports.default = exports.ProgressLinear;

package/cjs/core/ProgressIndicators/ProgressLinear/index.d.ts

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

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.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/progress-indicator.css';
-export declare type ProgressRadialProps = {
+declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
      * @default 0
@@ -25,7 +25,7 @@ export declare type ProgressRadialProps = {
      * Content shown inside progress indicator.
      */
     children?: React.ReactNode;
-} & CommonProps;
+};
 /**
  * Circular Progress Indicator
  * @example
@@ -41,5 +41,5 @@ export declare type ProgressRadialProps = {
  * Small
  * <ProgressRadial size={'small'} indeterminate/>
  */
-export declare const ProgressRadial: (props: ProgressRadialProps) => JSX.Element;
+export declare const ProgressRadial: PolymorphicForwardRefComponent<"div", ProgressRadialProps>;
 export default ProgressRadial;

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -50,9 +50,8 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
  * Small
  * <ProgressRadial size={'small'} indeterminate/>
  */
-const ProgressRadial = (props) => {
-    const { value = 0, indeterminate = false, status, children, size = '', className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
+exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
+    const { value = 0, indeterminate = false, status, children, size = '', className, ...rest } = props;
     const statusMap = {
         negative: React.createElement(index_js_1.SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(index_js_1.SvgCheckmarkSmall, { "aria-hidden": true }),
@@ -63,18 +62,17 @@ const ProgressRadial = (props) => {
             : 88 -
                 Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
     };
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-progress-indicator-radial', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-radial', {
             'iui-determinate': !indeterminate,
             'iui-indeterminate': indeterminate,
             [`iui-${size}`]: !!size,
             [`iui-${status}`]: !!status,
-        }, className), style: style, ...rest },
-        React.createElement("svg", { className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
-            React.createElement("circle", { className: 'iui-track', cx: '16', cy: '16', r: '14' }),
-            React.createElement("circle", { className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),
+        }, className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'svg', className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
+            React.createElement(index_js_1.Box, { as: 'circle', className: 'iui-track', cx: '16', cy: '16', r: '14' }),
+            React.createElement(index_js_1.Box, { as: 'circle', className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),
         React.createElement(React.Fragment, null,
-            status && (React.createElement("span", { className: 'iui-inner-content' }, statusMap[status])),
-            !status && children && (React.createElement("span", { className: 'iui-inner-content' }, children)))));
-};
-exports.ProgressRadial = ProgressRadial;
+            status && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-inner-content' }, statusMap[status])),
+            !status && children && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-inner-content' }, children)))));
+});
 exports.default = exports.ProgressRadial;

package/cjs/core/ProgressIndicators/ProgressRadial/index.d.ts

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

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

@@ -1,4 +1,2 @@
 export { ProgressLinear } from './ProgressLinear/index.js';
-export type { ProgressLinearProps } from './ProgressLinear/index.js';
 export { ProgressRadial } from './ProgressRadial/index.js';
-export type { ProgressRadialProps } from './ProgressRadial/index.js';

package/cjs/core/Radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/radio.css';
-export declare type RadioProps = {
+declare type RadioProps = {
     /**
      * Label of the radio.
      */
@@ -14,7 +15,7 @@ export declare type RadioProps = {
      * @default false
      */
     setFocus?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+};
 /**
  * Basic radio input component
  * @example
@@ -25,19 +26,5 @@ export declare type RadioProps = {
  * <Radio status='warning' label='Warning' />
  * <Radio status='negative' label='Negative' />
  */
-export declare const Radio: React.ForwardRefExoticComponent<{
-    /**
-     * Label of the radio.
-     */
-    label?: React.ReactNode;
-    /**
-     * Status of the radio.
-     */
-    status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Set focus on radio element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: PolymorphicForwardRefComponent<"input", RadioProps>;
 export default Radio;

package/cjs/core/Radio/Radio.js

@@ -47,7 +47,6 @@ require("@itwin/itwinui-css/css/radio.css");
  */
 exports.Radio = React.forwardRef((props, ref) => {
     const { className, disabled = false, label, status, style, setFocus = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const inputElementRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
     React.useEffect(() => {
@@ -55,9 +54,9 @@ exports.Radio = React.forwardRef((props, ref) => {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    const radio = (React.createElement("input", { className: (0, classnames_1.default)('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
-    return !label ? (radio) : (React.createElement("label", { className: (0, classnames_1.default)('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
+    const radio = (React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
+    return !label ? (radio) : (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
         radio,
-        label && React.createElement("span", { className: 'iui-radio-label' }, label)));
+        label && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-radio-label' }, label))));
 });
 exports.default = exports.Radio;

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

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

package/cjs/core/RadioTiles/RadioTile.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/radio-tile.css';
-export declare type RadioTileProps = {
+declare type RadioTileProps = {
     /**
      * Icon to be used.
      */
@@ -18,29 +19,11 @@ export declare type RadioTileProps = {
      * @default false
      */
     setFocus?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+};
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
-export declare const RadioTile: React.ForwardRefExoticComponent<{
-    /**
-     * Icon to be used.
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Label of the Radio tile.
-     */
-    label?: React.ReactNode;
-    /**
-     * Additional description, if needed.
-     */
-    description?: React.ReactNode;
-    /**
-     * Set focus on radio tile element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RadioTile: PolymorphicForwardRefComponent<"input", RadioTileProps>;
 export default RadioTile;

package/cjs/core/RadioTiles/RadioTile.js

@@ -42,7 +42,6 @@ require("@itwin/itwinui-css/css/radio-tile.css");
  */
 exports.RadioTile = React.forwardRef((props, ref) => {
     const { icon, label, description, setFocus = false, className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const inputElementRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
     React.useEffect(() => {
@@ -50,14 +49,11 @@ exports.RadioTile = React.forwardRef((props, ref) => {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("label", { className: (0, classnames_1.default)('iui-radio-tile', className), style: style },
-        React.createElement("input", { className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
-        React.createElement("div", { className: 'iui-radio-tile-content' },
-            icon &&
-                React.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-radio-tile-icon', icon.props.className),
-                }),
-            label && React.createElement("div", { className: 'iui-radio-tile-label' }, label),
-            description && (React.createElement("div", { className: 'iui-radio-tile-sublabel' }, description)))));
+    return (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-radio-tile', className), style: style },
+        React.createElement(index_js_1.Box, { as: 'input', className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
+        React.createElement(index_js_1.Box, { className: 'iui-radio-tile-content' },
+            icon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-radio-tile-icon', "aria-hidden": true }, icon)),
+            label && React.createElement(index_js_1.Box, { className: 'iui-radio-tile-label' }, label),
+            description && (React.createElement(index_js_1.Box, { className: 'iui-radio-tile-sublabel' }, description)))));
 });
 exports.default = exports.RadioTile;

package/cjs/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
-import type { InputGroupProps } from '../InputGroup/index.js';
+import * as React from 'react';
+import { InputGroup } from '../InputGroup/index.js';
 import '@itwin/itwinui-css/css/radio-tile.css';
-export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -10,5 +11,5 @@ export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' |
  *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
  * </RadioTileGroup>
  */
-export declare const RadioTileGroup: (props: RadioTileGroupProps) => JSX.Element;
+export declare const RadioTileGroup: PolymorphicForwardRefComponent<"div", RadioTileGroupProps>;
 export default RadioTileGroup;

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -40,11 +40,9 @@ const index_js_2 = require("../utils/index.js");
  *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
  * </RadioTileGroup>
  */
-const RadioTileGroup = (props) => {
+exports.RadioTileGroup = React.forwardRef((props, forwardedRef) => {
     const { children, label, ...rest } = props;
-    (0, index_js_2.useTheme)();
-    return (React.createElement(index_js_1.InputGroup, { label: label, ...rest },
-        React.createElement("div", { className: 'iui-radio-tile-container' }, children)));
-};
-exports.RadioTileGroup = RadioTileGroup;
+    return (React.createElement(index_js_1.InputGroup, { label: label, ref: forwardedRef, ...rest },
+        React.createElement(index_js_2.Box, { className: 'iui-radio-tile-container' }, children)));
+});
 exports.default = exports.RadioTileGroup;

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

@@ -1,6 +1,4 @@
 export { RadioTileGroup } from './RadioTileGroup.js';
-export type { RadioTileGroupProps } from './RadioTileGroup.js';
 export { RadioTile } from './RadioTile.js';
-export type { RadioTileProps } from './RadioTile.js';
 declare const _default: "./RadioTileGroup";
 export default _default;

package/cjs/core/SearchBox/SearchBox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { IconProps, PolymorphicForwardRefComponent, PolymorphicComponentProps, InputFlexContainerProps } from '../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton/index.js';
+import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
 import '@itwin/itwinui-css/css/searchbox.css';
 declare type SearchBoxOwnProps = {
     /**
@@ -48,13 +48,7 @@ declare type SearchBoxOwnProps = {
  *   </SearchBox.ExpandedState>
  * </SearchBox>
  */
-export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxOwnProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, keyof {
-    isDisabled?: boolean | undefined;
-    status?: "positive" | "warning" | "negative" | undefined;
-}> & {
-    isDisabled?: boolean | undefined;
-    status?: "positive" | "warning" | "negative" | undefined;
-}> & {
+export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxOwnProps & InputFlexContainerProps> & {
     /**
      * Icon to be placed within SearchBox.
      * @default Looking glass icon
@@ -63,7 +57,7 @@ export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxO
     /**
      * Input to be placed within SearchBox
      */
-    Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+    Input: PolymorphicForwardRefComponent<"input", {}>;
     /**
      * Button to be placed within SearchBox. Default has looking glass icon.
      */
@@ -95,10 +89,4 @@ export declare const SearchBox: PolymorphicForwardRefComponent<"div", SearchBoxO
         displayName: string;
     };
 };
-export declare type SearchBoxProps = PolymorphicComponentProps<'div', SearchBoxOwnProps & InputFlexContainerProps>;
-export declare type SearchBoxInputProps = React.ComponentProps<'input'>;
-export declare type SearchBoxButtonProps = PolymorphicComponentProps<'button', IconButtonProps>;
-export declare type SearchBoxExpandButtonProps = PolymorphicComponentProps<'button', IconButtonProps>;
-export declare type SearchBoxCollapseButtonProps = PolymorphicComponentProps<'button', IconButtonProps>;
-export declare type SearchBoxIconProps = PolymorphicComponentProps<'span', IconProps>;
 export default SearchBox;

package/cjs/core/SearchBox/SearchBox.js

@@ -38,7 +38,6 @@ const index_js_2 = require("../Buttons/IconButton/index.js");
 require("@itwin/itwinui-css/css/searchbox.css");
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
-    (0, index_js_1.useTheme)();
     const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
     const uid = (0, index_js_1.useId)();
     const [inputId, setInputId] = React.useState(uid);
@@ -109,7 +108,7 @@ const SearchBoxInput = React.forwardRef((props, ref) => {
             setInputId(idProp);
         }
     }, [idProp, inputId, setInputId]);
-    return (React.createElement("input", { id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: (0, index_js_1.useMergedRefs)(ref, inputRef), role: 'searchbox', type: 'text', className: (0, classnames_1.default)('iui-search-input', className), disabled: isDisabled, ...rest }));
+    return (React.createElement(index_js_1.Box, { as: 'input', id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: (0, index_js_1.useMergedRefs)(ref, inputRef), role: 'searchbox', type: 'text', className: (0, classnames_1.default)('iui-search-input', className), disabled: isDisabled, ...rest }));
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------

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

@@ -1,4 +1,3 @@
 export { SearchBox } from './SearchBox.js';
-export type { SearchBoxProps, SearchBoxButtonProps, SearchBoxCollapseButtonProps, SearchBoxExpandButtonProps, SearchBoxIconProps, SearchBoxInputProps, } from './SearchBox.js';
 declare const _default: "./SearchBox";
 export default _default;

package/cjs/core/Select/Select.d.ts

@@ -32,9 +32,14 @@ export declare type SelectOption<T> = {
      */
     value: T;
     /**
-     * SVG icon component shown on the right.
+     * @deprecated Use startIcon
+     * SVG icon component shown on the left.
      */
     icon?: JSX.Element;
+    /**
+     * SVG icon component shown on the left.
+     */
+    startIcon?: JSX.Element;
     /**
      * Item is disabled.
      */