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

package/esm/core/Select/SelectTag.js

@@ -4,16 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/select.css';
+import { Box } from '../utils/index.js';
 /**
  * Tag for showing selected value in `Select`.
  * @private
  */
-export const SelectTag = (props) => {
+export const SelectTag = React.forwardRef((props, forwardedRef) => {
     const { className, label, ...rest } = props;
-    useTheme();
-    return (React.createElement("span", { className: cx('iui-select-tag', className), ...rest },
-        React.createElement("span", { className: 'iui-select-tag-label' }, label)));
-};
+    return (React.createElement(Box, { as: 'span', className: cx('iui-select-tag', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { as: 'span', className: 'iui-select-tag-label' }, label)));
+});
 export default SelectTag;

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

@@ -1,16 +1,12 @@
 import * as React from 'react';
-export declare type SelectTagContainerProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type SelectTagContainerProps = {
     /**
      * Select tags.
      */
     tags: React.ReactNode[];
-} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+};
 /**
  */
-export declare const SelectTagContainer: React.ForwardRefExoticComponent<{
-    /**
-     * Select tags.
-     */
-    tags: React.ReactNode[];
-} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectTagContainer: PolymorphicForwardRefComponent<"div", SelectTagContainerProps>;
 export default SelectTagContainer;

package/esm/core/Select/SelectTagContainer.js

@@ -4,16 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 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 SelectTag from './SelectTag.js';
 /**
  */
 export const SelectTagContainer = React.forwardRef((props, ref) => {
     const { tags, className, ...rest } = props;
-    useTheme();
     const [containerRef, visibleCount] = useOverflow(tags);
     const refs = useMergedRefs(ref, containerRef);
-    return (React.createElement("div", { className: cx('iui-select-tag-container', className), ref: refs, ...rest },
+    return (React.createElement(Box, { className: cx('iui-select-tag-container', className), ref: refs, ...rest },
         React.createElement(React.Fragment, null,
             visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags,
             visibleCount < tags.length && (React.createElement(SelectTag, { label: `+${tags.length - visibleCount + 1} item(s)` })))));

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

@@ -1,4 +1,4 @@
 export { Select } from './Select.js';
-export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select.js';
+export type { SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select.js';
 declare const _default: "./Select";
 export default _default;

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
-export declare type SideNavigationProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.
      * Recommended to use `SidenavButton` components.
@@ -49,7 +48,7 @@ export declare type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Left side navigation menu component.
  * @example
@@ -64,5 +63,5 @@ export declare type SideNavigationProps = {
  *   ]}
  * />
  */
-export declare const SideNavigation: (props: SideNavigationProps) => JSX.Element;
+export declare const SideNavigation: PolymorphicForwardRefComponent<"div", SideNavigationProps>;
 export default SideNavigation;

package/esm/core/SideNavigation/SideNavigation.js

@@ -4,10 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, WithCSSTransition, SvgChevronRight, } from '../utils/index.js';
+import { WithCSSTransition, SvgChevronRight, Box } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { Tooltip } from '../Tooltip/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Left side navigation menu component.
  * @example
@@ -22,9 +21,8 @@ import '@itwin/itwinui-css/css/side-navigation.css';
  *   ]}
  * />
  */
-export const SideNavigation = (props) => {
+export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, ...rest } = props;
-    useTheme();
     const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         _setIsExpanded(isExpanded);
@@ -34,16 +32,16 @@ export const SideNavigation = (props) => {
             onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
         }, [onExpanderClick]) },
         React.createElement(SvgChevronRight, null)));
-    return (React.createElement("div", { className: cx('iui-side-navigation-wrapper', className), ...rest },
-        React.createElement("div", { className: cx('iui-side-navigation', {
+    return (React.createElement(Box, { className: cx('iui-side-navigation-wrapper', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: cx('iui-side-navigation', {
                 'iui-expanded': _isExpanded,
                 'iui-collapsed': !_isExpanded,
             }) },
             expanderPlacement === 'top' && ExpandButton,
-            React.createElement("div", { className: 'iui-sidenav-content' },
-                React.createElement("div", { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement("div", { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
+            React.createElement(Box, { className: 'iui-sidenav-content' },
+                React.createElement(Box, { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
+                React.createElement(Box, { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
             expanderPlacement === 'bottom' && ExpandButton),
         submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
-};
+});
 export default SideNavigation;

package/esm/core/SideNavigation/SidenavButton.d.ts

@@ -1,7 +1,6 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
-export declare type SidenavButtonProps = {
+import type { ButtonProps } from '../Buttons/Button/Button.js';
+declare type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,
      * i.e. the current page corresponds to this button.
@@ -13,10 +12,9 @@ export declare type SidenavButtonProps = {
      */
     isSubmenuOpen?: boolean;
 } & Omit<ButtonProps, 'styleType' | 'size'>;
-declare type SideNavButtonComponent = PolymorphicForwardRefComponent<'button', SidenavButtonProps>;
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
-export declare const SidenavButton: SideNavButtonComponent;
+export declare const SidenavButton: PolymorphicForwardRefComponent<"button", SidenavButtonProps>;
 export default SidenavButton;

package/esm/core/SideNavigation/SidenavButton.js

@@ -4,18 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
 import { Button } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 export const SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    useTheme();
-    return (React.createElement(Button, { className: cx('iui-sidenav-button', {
-            'iui-submenu-open': isSubmenuOpen,
-        }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    return (React.createElement(Button, { className: cx('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
 });
 export default SidenavButton;

package/esm/core/SideNavigation/SidenavSubmenu.d.ts

@@ -1,12 +1,4 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
-export declare type SidenavSubmenuProps = {
-    /**
-     * Content of the submenu.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example
@@ -15,10 +7,5 @@ export declare type SidenavSubmenuProps = {
  *   <div> ... </div>
  * </SidenavSubmenu>
  */
-export declare const SidenavSubmenu: React.ForwardRefExoticComponent<{
-    /**
-     * Content of the submenu.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SidenavSubmenu: PolymorphicForwardRefComponent<"div", {}>;
 export default SidenavSubmenu;

package/esm/core/SideNavigation/SidenavSubmenu.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
+import { Box } from '../utils/index.js';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example
@@ -16,8 +15,7 @@ import '@itwin/itwinui-css/css/side-navigation.css';
  */
 export const SidenavSubmenu = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-side-navigation-submenu', className), ref: ref, ...rest },
-        React.createElement("div", { className: 'iui-side-navigation-submenu-content' }, children)));
+    return (React.createElement(Box, { className: cx('iui-side-navigation-submenu', className), ref: ref, ...rest },
+        React.createElement(Box, { className: 'iui-side-navigation-submenu-content' }, children)));
 });
 export default SidenavSubmenu;

package/esm/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
-export declare type SidenavSubmenuHeaderProps = {
-    /**
-     * Content of the submenu header (e.g. label)
-     */
-    children?: React.ReactNode;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type SidenavSubmenuHeaderProps = {
     /**
      * Actions shown at the end of the submenu label.
      */
     actions?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example
@@ -25,5 +20,5 @@ export declare type SidenavSubmenuHeaderProps = {
  *   <span>Documents</span>
  * </SidenavSubmenuHeader>
  */
-export declare const SidenavSubmenuHeader: (props: SidenavSubmenuHeaderProps) => JSX.Element;
+export declare const SidenavSubmenuHeader: PolymorphicForwardRefComponent<"div", SidenavSubmenuHeaderProps>;
 export default SidenavSubmenuHeader;

package/esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/side-navigation.css';
+import { Box } from '../utils/index.js';
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example
@@ -20,11 +19,10 @@ import '@itwin/itwinui-css/css/side-navigation.css';
  *   <span>Documents</span>
  * </SidenavSubmenuHeader>
  */
-export const SidenavSubmenuHeader = (props) => {
+export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => {
     const { children, actions, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-side-navigation-submenu-header', className), ...rest },
-        React.createElement("div", { className: 'iui-side-navigation-submenu-header-label' }, children),
-        actions && (React.createElement("div", { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
-};
+    return (React.createElement(Box, { className: cx('iui-side-navigation-submenu-header', className), ref: forwardedRef, ...rest },
+        React.createElement(Box, { className: 'iui-side-navigation-submenu-header-label' }, children),
+        actions && (React.createElement(Box, { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
+});
 export default SidenavSubmenuHeader;

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

@@ -1,10 +1,6 @@
 export { SideNavigation } from './SideNavigation.js';
-export type { SideNavigationProps } from './SideNavigation.js';
 declare const _default: "./SideNavigation";
 export default _default;
 export { SidenavButton } from './SidenavButton.js';
-export type { SidenavButtonProps } from './SidenavButton.js';
 export { SidenavSubmenu } from './SidenavSubmenu.js';
-export type { SidenavSubmenuProps } from './SidenavSubmenu.js';
 export { SidenavSubmenuHeader } from './SidenavSubmenuHeader.js';
-export type { SidenavSubmenuHeaderProps } from './SidenavSubmenuHeader.js';

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/skip-to-content.css';
-export declare type SkipToContentLinkProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type SkipToContentLinkProps = {
     /**
      * The id of the main content that the link directs to. Don't forget the #!
      */
@@ -10,7 +10,7 @@ export declare type SkipToContentLinkProps = {
      * @default 'Skip to main content'
      */
     children?: React.ReactNode;
-} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
+};
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
  * Provides a shortcut to the main content of the page without navigating through the header, etc.
@@ -19,15 +19,5 @@ export declare type SkipToContentLinkProps = {
  * <body><SkipToContentLink href='#main-content-id' /> ... </body>
  * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
  */
-export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
-    /**
-     * The id of the main content that the link directs to. Don't forget the #!
-     */
-    href: string;
-    /**
-     * Localize 'Skip to main content' label.
-     * @default 'Skip to main content'
-     */
-    children?: React.ReactNode;
-} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const SkipToContentLink: PolymorphicForwardRefComponent<"a", SkipToContentLinkProps>;
 export default SkipToContentLink;

package/esm/core/SkipToContentLink/SkipToContentLink.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/skip-to-content.css';
+import { Box } from '../utils/index.js';
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
  * Provides a shortcut to the main content of the page without navigating through the header, etc.
@@ -16,7 +15,6 @@ import '@itwin/itwinui-css/css/skip-to-content.css';
  */
 export const SkipToContentLink = React.forwardRef((props, ref) => {
     const { children = 'Skip to main content', className, ...rest } = props;
-    useTheme();
-    return (React.createElement("a", { ref: ref, className: cx('iui-skip-to-content-link', className), ...rest }, children));
+    return (React.createElement(Box, { as: 'a', ref: ref, className: cx('iui-skip-to-content-link', className), ...rest }, children));
 });
 export default SkipToContentLink;

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

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

package/esm/core/Slider/Slider.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/slider.css';
-import type { CommonProps } from '../utils/index.js';
-import type { TooltipProps } from '../Tooltip/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { TooltipProps } from '../Tooltip/Tooltip.js';
 /**
  * Determines which segments are shown with color.
  */
@@ -101,7 +100,7 @@ export declare type SliderProps = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Slider component that display Thumbs for each value specified along a Rail.
  * @example
@@ -110,100 +109,5 @@ export declare type SliderProps = {
  * <Slider values={[10, 20, 30, 40]} min={0} max={60} setFocus
  *   thumbMode='allow-crossing' />
  */
-export declare const Slider: React.ForwardRefExoticComponent<{
-    /**
-     * Set focus on first thumb in slider element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Minimum slider value.
-     * @default 0
-     */
-    min?: number | undefined;
-    /**
-     * Maximum slider value.
-     * @default 100
-     */
-    max?: number | undefined;
-    /**
-     * Array of one or more values to show.
-     */
-    values: number[];
-    /**
-     *  Determines which segments are shown with color.
-     * 'none' - no colored tracks are displayed.
-     * 'auto' - segment display is based on number of values.
-     * 'odd-segments'- colored tracks shown in segments 1,3,5, etc.
-     *                 Default if number of thumbs values are even.
-     * 'even-segments'- colored tracks shown in segments 0,2,4, etc.
-     *                 Default if number of thumbs values are odd.
-     * @default 'auto'
-     */
-    trackDisplayMode?: TrackDisplayMode | undefined;
-    /**
-     * Step increment controls what values are allowed and the amount the value will
-     * change when left and right arrows are pressed when a Thumb has focus.
-     * @default 1
-     */
-    step?: number | undefined;
-    /**
-     * Forces control to be displayed in a disabled state where no interactive value
-     * changes are allowed.
-     * @default false
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Function that can return tooltip props including content.
-     */
-    tooltipProps?: ((index: number, val: number, step: number) => Partial<Omit<TooltipProps, 'children'>>) | undefined;
-    /**
-     * Either an array of labels that will be placed under auto generated tick marks
-     * that are spaced evenly across width of Slider or a custom component that allows
-     * custom content to be placed in tick mark area below slider.
-     */
-    tickLabels?: React.ReactNode;
-    /**
-     * Label for the minimum value. If undefined then the min
-     * value is shown. Use empty string for no label.
-     */
-    minLabel?: React.ReactNode;
-    /**
-     * Label for the maximum value. If undefined then the max
-     * value is shown. Use empty string for no label.
-     */
-    maxLabel?: React.ReactNode;
-    /**
-     * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
-     */
-    railContainerProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
-    /**
-     * Defines the allowed behavior when moving Thumbs when multiple Thumbs are
-     * shown. It controls if a Thumb movement should be limited to only move in
-     * the segments adjacent to the Thumb. Possible values:
-     * 'allow-crossing' - allows thumb to cross other thumbs. Default.
-     * 'inhibit-crossing'- keeps the thumb from crossing and separated by a step.
-     * @default 'inhibit-crossing'
-     */
-    thumbMode?: "allow-crossing" | "inhibit-crossing" | undefined;
-    /**
-     * Callback that can provide additional props for `<div>` representing a thumb.
-     */
-    thumbProps?: ((index: number) => React.HTMLAttributes<HTMLDivElement>) | undefined;
-    /**
-     * Callback fired at the end of a thumb move (i.e. on pointerUp) and when user clicks on rail.
-     */
-    onChange?: ((values: ReadonlyArray<number>) => void) | undefined;
-    /**
-     * Callback fired when the value(s) of the slider are internally updated during
-     * operations like dragging a Thumb. Use this callback with caution as a
-     * high-volume of updates will occur when dragging.
-     */
-    onUpdate?: ((values: ReadonlyArray<number>) => void) | undefined;
-    /**
-     * The orientation of slider
-     * @default 'horizontal'
-     */
-    orientation?: "horizontal" | "vertical" | undefined;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Slider: PolymorphicForwardRefComponent<"div", SliderProps>;
 export default Slider;

package/esm/core/Slider/Slider.js

@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme, getBoundedValue, useEventListener } from '../utils/index.js';
-import '@itwin/itwinui-css/css/slider.css';
+import { getBoundedValue, useEventListener, Box } from '../utils/index.js';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
@@ -78,7 +77,6 @@ export const Slider = React.forwardRef((props, ref) => {
     React.useEffect(() => {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
-    useTheme();
     const containerRef = React.useRef(null);
     React.useEffect(() => {
         if (containerRef.current && setFocus) {
@@ -203,7 +201,7 @@ export const Slider = React.forwardRef((props, ref) => {
             return null;
         }
         if (Array.isArray(tickLabels)) {
-            return (React.createElement("div", { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (React.createElement("span", { key: index, className: 'iui-slider-tick' }, label)))));
+            return (React.createElement(Box, { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (React.createElement(Box, { as: 'span', key: index, className: 'iui-slider-tick' }, label)))));
         }
         return tickLabels;
     }, [tickLabels]);
@@ -218,12 +216,12 @@ export const Slider = React.forwardRef((props, ref) => {
                 : formatNumberValue(val, step, getNumDecimalPlaces),
         };
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement("div", { ref: ref, className: cx('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
-        minValueLabel && (React.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
-        React.createElement("div", { ref: containerRef, className: cx('iui-slider-container', {
+    return (React.createElement(Box, { ref: ref, className: cx('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
+        minValueLabel && (React.createElement(Box, { as: 'span', className: 'iui-slider-min' }, minValueLabel)),
+        React.createElement(Box, { ref: containerRef, className: cx('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
             }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
-            React.createElement("div", { className: 'iui-slider-rail' }),
+            React.createElement(Box, { className: 'iui-slider-rail' }),
             currentValues.map((thumbValue, index) => {
                 var _a;
                 const [minVal, maxVal] = getAllowableThumbRange(index);
@@ -232,6 +230,6 @@ export const Slider = React.forwardRef((props, ref) => {
             }),
             React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),
-        maxValueLabel && (React.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
+        maxValueLabel && (React.createElement(Box, { as: 'span', className: 'iui-slider-max' }, maxValueLabel))));
 });
 export default Slider;

package/esm/core/Slider/Thumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { TooltipProps } from '../Tooltip/index.js';
+import type { TooltipProps } from '../Tooltip/Tooltip.js';
 import type { SliderProps } from './Slider.js';
-export declare type ThumbProps = {
+declare type ThumbProps = {
     /**
      * Thumb value.
      */
@@ -61,3 +61,4 @@ export declare type ThumbProps = {
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
 export declare const Thumb: (props: ThumbProps) => JSX.Element;
+export {};

package/esm/core/Slider/Thumb.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Tooltip } from '../Tooltip/index.js';
+import { Box } from '../utils/index.js';
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects
@@ -57,7 +58,7 @@ export const Thumb = (props) => {
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
     return (React.createElement(Tooltip, { placement: 'top', trigger: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.visible) == null ? 'mouseenter click focus' : undefined, ...tooltipProps },
-        React.createElement("div", { ...rest, "data-index": index, ref: thumbRef, style: {
+        React.createElement(Box, { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'
                     ? { left: `${lowPercent}%` }

package/esm/core/Slider/Track.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import { Box } from '../utils/index.js';
 function shouldDisplaySegment(segmentIndex, mode) {
     if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
         return true;
@@ -49,7 +50,7 @@ export const Track = (props) => {
                 ? 100.0 -
                     (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
                 : 100;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: {
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement(Box, { className: 'iui-slider-track', style: {
                     ...(orientation === 'horizontal'
                         ? {
                             left: `${lowPercent}%`,

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

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

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type StatusMessageProps = {
+declare type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
      * It will default to the `status` icon, if it's set.

package/esm/core/StatusMessage/StatusMessage.js

@@ -3,8 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { StatusIconMap, useTheme } from '../utils/index.js';
-import cx from 'classnames';
+import { Box, StatusIconMap } from '../utils/index.js';
 /**
  * Component to display icon and text below the `Combobox` component.
  * @example
@@ -12,20 +11,9 @@ import cx from 'classnames';
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 export const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
-    useTheme();
-    const StartIcon = () => {
-        var _a;
-        const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
-        if (!icon) {
-            return null;
-        }
-        return React.cloneElement(icon, {
-            className: cx('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
-            'aria-hidden': true,
-        });
-    };
+    const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
     return (React.createElement(React.Fragment, null,
-        React.createElement(StartIcon, null),
-        React.createElement("div", { className: 'iui-message' }, children)));
+        !!icon ? (React.createElement(Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)) : null,
+        React.createElement(Box, { className: 'iui-message' }, children)));
 };
 export default StatusMessage;