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

package/esm/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
-export declare type NotificationMarkerProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.
      */
@@ -34,7 +34,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 +47,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/esm/core/NotificationMarker/NotificationMarker.js

@@ -3,9 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * 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`.
@@ -20,7 +19,6 @@ import '@itwin/itwinui-css/css/utils.css';
  */
 export const NotificationMarker = React.forwardRef((props, ref) => {
     const { className, children, status = 'primary', pulsing = false, enabled = true, ...rest } = props;
-    useTheme();
-    return (React.createElement("span", { ref: ref, className: cx({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
+    return (React.createElement(Box, { as: 'span', ref: ref, className: cx({ 'iui-notification-marker': enabled }, className), "data-iui-variant": enabled ? status : null, "data-iui-urgent": enabled ? pulsing : null, ...rest }, children));
 });
 export default NotificationMarker;

package/esm/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/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
-export declare type ProgressLinearProps = {
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+declare type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
      * @default 0
@@ -25,7 +24,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 +40,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/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
+import { Box } from '../../utils/index.js';
 /**
  * Shows progress on a linear bar
  * @example
@@ -21,18 +20,17 @@ import '@itwin/itwinui-css/css/progress-indicator.css';
  * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
  * <ProgressLinear status='negative' />
  */
-export const ProgressLinear = (props) => {
-    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, style, ...rest } = props;
-    useTheme();
+export const 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: cx('iui-progress-indicator-linear', {
+    return (React.createElement(Box, { className: cx('iui-progress-indicator-linear', {
             [`iui-${status}`]: !!status,
-        }, className), style: style, ...rest },
-        React.createElement("div", { className: 'iui-track' },
-            React.createElement("div", { className: cx('iui-fill', {
+        }, className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-track' },
+            React.createElement(Box, { className: cx('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)))))));
-};
+        labels.length > 0 && (React.createElement(Box, { className: 'iui-label' }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+});
 export default ProgressLinear;

package/esm/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/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
-export declare type ProgressRadialProps = {
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.
      * @default 0
@@ -25,7 +24,7 @@ export declare type ProgressRadialProps = {
      * Content shown inside progress indicator.
      */
     children?: React.ReactNode;
-} & CommonProps;
+};
 /**
  * Circular Progress Indicator
  * @example
@@ -41,5 +40,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/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme, SvgCheckmarkSmall, SvgImportantSmall, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
+import { SvgCheckmarkSmall, SvgImportantSmall, Box, } from '../../utils/index.js';
 /**
  * Circular Progress Indicator
  * @example
@@ -21,9 +20,8 @@ import '@itwin/itwinui-css/css/progress-indicator.css';
  * Small
  * <ProgressRadial size={'small'} indeterminate/>
  */
-export const ProgressRadial = (props) => {
-    const { value = 0, indeterminate = false, status, children, size = '', className, style, ...rest } = props;
-    useTheme();
+export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
+    const { value = 0, indeterminate = false, status, children, size = '', className, ...rest } = props;
     const statusMap = {
         negative: React.createElement(SvgImportantSmall, { "aria-hidden": true }),
         positive: React.createElement(SvgCheckmarkSmall, { "aria-hidden": true }),
@@ -34,17 +32,17 @@ export const ProgressRadial = (props) => {
             : 88 -
                 Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
     };
-    return (React.createElement("div", { className: cx('iui-progress-indicator-radial', {
+    return (React.createElement(Box, { className: cx('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(Box, { as: 'svg', className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
+            React.createElement(Box, { as: 'circle', className: 'iui-track', cx: '16', cy: '16', r: '14' }),
+            React.createElement(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)))));
-};
+            status && (React.createElement(Box, { as: 'span', className: 'iui-inner-content' }, statusMap[status])),
+            !status && children && (React.createElement(Box, { as: 'span', className: 'iui-inner-content' }, children)))));
+});
 export default ProgressRadial;

package/esm/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/esm/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/esm/core/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/radio.css';
-export declare type RadioProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type RadioProps = {
     /**
      * Label of the radio.
      */
@@ -14,7 +14,7 @@ export declare type RadioProps = {
      * @default false
      */
     setFocus?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+};
 /**
  * Basic radio input component
  * @example
@@ -25,19 +25,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/esm/core/Radio/Radio.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio.css';
+import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Basic radio input component
  * @example
@@ -18,7 +17,6 @@ import '@itwin/itwinui-css/css/radio.css';
  */
 export const Radio = React.forwardRef((props, ref) => {
     const { className, disabled = false, label, status, style, setFocus = false, ...rest } = props;
-    useTheme();
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
     React.useEffect(() => {
@@ -26,9 +24,9 @@ export const Radio = React.forwardRef((props, ref) => {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    const radio = (React.createElement("input", { className: cx('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
-    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
+    const radio = (React.createElement(Box, { as: 'input', className: cx('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
+    return !label ? (radio) : (React.createElement(Box, { as: 'label', className: cx('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(Box, { as: 'span', className: 'iui-radio-label' }, label))));
 });
 export default Radio;

package/esm/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/esm/core/RadioTiles/RadioTile.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/radio-tile.css';
-export declare type RadioTileProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type RadioTileProps = {
     /**
      * Icon to be used.
      */
@@ -18,29 +18,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/esm/core/RadioTiles/RadioTile.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
+import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
@@ -13,7 +12,6 @@ import '@itwin/itwinui-css/css/radio-tile.css';
  */
 export const RadioTile = React.forwardRef((props, ref) => {
     const { icon, label, description, setFocus = false, className, style, ...rest } = props;
-    useTheme();
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
     React.useEffect(() => {
@@ -21,14 +19,11 @@ export const RadioTile = React.forwardRef((props, ref) => {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("label", { className: cx('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: cx('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(Box, { as: 'label', className: cx('iui-radio-tile', className), style: style },
+        React.createElement(Box, { as: 'input', className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
+        React.createElement(Box, { className: 'iui-radio-tile-content' },
+            icon && (React.createElement(Box, { as: 'span', className: 'iui-radio-tile-icon', "aria-hidden": true }, icon)),
+            label && React.createElement(Box, { className: 'iui-radio-tile-label' }, label),
+            description && (React.createElement(Box, { className: 'iui-radio-tile-sublabel' }, description)))));
 });
 export default RadioTile;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { InputGroupProps } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
-export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
+import * as React from 'react';
+import { InputGroup } from '../InputGroup/index.js';
+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 +10,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/esm/core/RadioTiles/RadioTileGroup.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -14,10 +13,9 @@ import { useTheme } from '../utils/index.js';
  *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
  * </RadioTileGroup>
  */
-export const RadioTileGroup = (props) => {
+export const RadioTileGroup = React.forwardRef((props, forwardedRef) => {
     const { children, label, ...rest } = props;
-    useTheme();
-    return (React.createElement(InputGroup, { label: label, ...rest },
-        React.createElement("div", { className: 'iui-radio-tile-container' }, children)));
-};
+    return (React.createElement(InputGroup, { label: label, ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-radio-tile-container' }, children)));
+});
 export default RadioTileGroup;

package/esm/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/esm/core/SearchBox/SearchBox.d.ts

@@ -1,7 +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 '@itwin/itwinui-css/css/searchbox.css';
+import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
 declare type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.
@@ -48,13 +47,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 +56,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 +88,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/esm/core/SearchBox/SearchBox.js

@@ -4,12 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { InputFlexContainer, useTheme, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, mergeEventHandlers, } from '../utils/index.js';
+import { InputFlexContainer, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, mergeEventHandlers, Box, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/searchbox.css';
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
-    useTheme();
     const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
     const uid = useId();
     const [inputId, setInputId] = React.useState(uid);
@@ -80,7 +78,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: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
+    return (React.createElement(Box, { as: 'input', id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------

package/esm/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/esm/core/Select/Select.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PopoverProps, CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
 export declare type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.
@@ -32,9 +31,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.
      */

package/esm/core/Select/Select.js

@@ -5,8 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Menu, MenuItem } from '../Menu/index.js';
-import { useTheme, SvgCaretDownSmall, Popover, useId, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
+import { SvgCaretDownSmall, Popover, useId, AutoclearingHiddenLiveRegion, Box, } from '../utils/index.js';
 import SelectTag from './SelectTag.js';
 import SelectTagContainer from './SelectTagContainer.js';
 const isMultipleEnabled = (variable, multiple) => {
@@ -69,7 +68,6 @@ export const Select = (props) => {
     var _a;
     const uid = useId();
     const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, triggerProps, ...rest } = props;
-    useTheme();
     const [isOpenState, setIsOpen] = React.useState(false);
     const isOpen = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : isOpenState;
     const [minWidth, setMinWidth] = React.useState(0);
@@ -119,10 +117,12 @@ export const Select = (props) => {
                 ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
                 : value === option.value;
             const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(MenuItem, null, option.label));
-            const { label, ...restOption } = option;
+            const { label, icon, startIcon: startIconProp, ...restOption } = option;
+            const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
             return React.cloneElement(menuItem, {
                 key: `${label}-${index}`,
                 isSelected,
+                startIcon: startIcon,
                 onClick: () => {
                     if (option.disabled) {
                         return;
@@ -169,7 +169,7 @@ export const Select = (props) => {
     const tagRenderer = React.useCallback((item) => {
         return React.createElement(SelectTag, { key: item.label, label: item.label });
     }, []);
-    return (React.createElement("div", { className: cx('iui-input-with-icon', className), style: style, ...rest },
+    return (React.createElement(Box, { className: cx('iui-input-with-icon', className), style: style, ...rest },
         React.createElement(Popover, { content: React.createElement(Menu, { role: 'listbox', className: cx('iui-scroll', menuClassName), style: {
                     minWidth,
                     maxWidth: `min(${minWidth * 2}px, 90vw)`,
@@ -180,13 +180,13 @@ export const Select = (props) => {
                     setIsOpen(false);
                 }
             } },
-            React.createElement("div", { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: cx('iui-select-button', {
+            React.createElement(Box, { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, className: cx('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
                 }, triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.className) },
-                (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
+                (!selectedItems || selectedItems.length === 0) && (React.createElement(Box, { as: 'span', className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
-        React.createElement("span", { "aria-hidden": true, ref: toggleButtonRef, className: cx('iui-end-icon', {
+        React.createElement(Box, { as: 'span', "aria-hidden": true, ref: toggleButtonRef, className: cx('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
@@ -195,16 +195,15 @@ export const Select = (props) => {
         multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null));
 };
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
+    var _a;
+    const startIcon = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.startIcon) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
     return (React.createElement(React.Fragment, null,
         selectedItem &&
             selectedItemRenderer &&
             selectedItemRenderer(selectedItem),
         selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
-            selectedItem.icon &&
-                React.cloneElement(selectedItem.icon, {
-                    className: cx(selectedItem.icon.props.className, 'iui-icon'),
-                }),
-            React.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
+            startIcon && (React.createElement(Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
+            React.createElement(Box, { as: 'span', className: 'iui-content' }, selectedItem.label)))));
 };
 const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
     const selectedItemsElements = React.useMemo(() => {
@@ -217,7 +216,7 @@ const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRendere
         selectedItems &&
             selectedItemsRenderer &&
             selectedItemsRenderer(selectedItems),
-        selectedItems && !selectedItemsRenderer && (React.createElement("span", { className: 'iui-content' },
+        selectedItems && !selectedItemsRenderer && (React.createElement(Box, { as: 'span', className: 'iui-content' },
             React.createElement(SelectTagContainer, { tags: selectedItemsElements })))));
 };
 export default Select;

package/esm/core/Select/SelectTag.d.ts

@@ -1,15 +1,13 @@
-/// <reference types="react" />
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
-export declare type SelectTagProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type SelectTagProps = {
     /**
      * Text inside the tag.
      */
     label: string;
-} & CommonProps;
+};
 /**
  * Tag for showing selected value in `Select`.
  * @private
  */
-export declare const SelectTag: (props: SelectTagProps) => JSX.Element;
+export declare const SelectTag: PolymorphicForwardRefComponent<"span", SelectTagProps>;
 export default SelectTag;