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

package/cjs/core/Select/SelectTag.js

@@ -34,16 +34,13 @@ exports.SelectTag = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/select.css");
 /**
  * Tag for showing selected value in `Select`.
  * @private
  */
-const SelectTag = (props) => {
+exports.SelectTag = React.forwardRef((props, forwardedRef) => {
     const { className, label, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-select-tag', className), ...rest },
-        React.createElement("span", { className: 'iui-select-tag-label' }, label)));
-};
-exports.SelectTag = SelectTag;
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-select-tag', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-select-tag-label' }, label)));
+});
 exports.default = exports.SelectTag;

package/cjs/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/cjs/core/Select/SelectTagContainer.js

@@ -39,10 +39,9 @@ const SelectTag_js_1 = __importDefault(require("./SelectTag.js"));
  */
 exports.SelectTagContainer = React.forwardRef((props, ref) => {
     const { tags, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [containerRef, visibleCount] = (0, index_js_1.useOverflow)(tags);
     const refs = (0, index_js_1.useMergedRefs)(ref, containerRef);
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-select-tag-container', className), ref: refs, ...rest },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('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_js_1.default, { label: `+${tags.length - visibleCount + 1} item(s)` })))));

package/cjs/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/cjs/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/cjs/core/SideNavigation/SideNavigation.js

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Buttons/index.js");
 const index_js_3 = require("../Tooltip/index.js");
-require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Left side navigation menu component.
  * @example
@@ -51,9 +50,8 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  *   ]}
  * />
  */
-const SideNavigation = (props) => {
+exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
     const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         _setIsExpanded(isExpanded);
@@ -63,17 +61,16 @@ const SideNavigation = (props) => {
             onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
         }, [onExpanderClick]) },
         React.createElement(index_js_1.SvgChevronRight, null)));
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-wrapper', className), ...rest },
-        React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation-wrapper', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('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(index_js_3.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(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
+            React.createElement(index_js_1.Box, { className: 'iui-sidenav-content' },
+                React.createElement(index_js_1.Box, { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
+                React.createElement(index_js_1.Box, { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
             expanderPlacement === 'bottom' && ExpandButton),
         submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
-};
-exports.SideNavigation = SideNavigation;
+});
 exports.default = exports.SideNavigation;

package/cjs/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/cjs/core/SideNavigation/SidenavButton.js

@@ -33,18 +33,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidenavButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Buttons/index.js");
-require("@itwin/itwinui-css/css/side-navigation.css");
+const index_js_1 = require("../Buttons/index.js");
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 exports.SidenavButton = React.forwardRef((props, ref) => {
     const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(index_js_2.Button, { className: (0, classnames_1.default)('iui-sidenav-button', {
-            'iui-submenu-open': isSubmenuOpen,
-        }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+    return (React.createElement(index_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
 });
 exports.default = exports.SidenavButton;

package/cjs/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/cjs/core/SideNavigation/SidenavSubmenu.js

@@ -34,7 +34,6 @@ exports.SidenavSubmenu = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example
@@ -45,8 +44,7 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 exports.SidenavSubmenu = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref, ...rest },
-        React.createElement("div", { className: 'iui-side-navigation-submenu-content' }, children)));
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-side-navigation-submenu-content' }, children)));
 });
 exports.default = exports.SidenavSubmenu;

package/cjs/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/cjs/core/SideNavigation/SidenavSubmenuHeader.js

@@ -34,7 +34,6 @@ exports.SidenavSubmenuHeader = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example
@@ -49,12 +48,10 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  *   <span>Documents</span>
  * </SidenavSubmenuHeader>
  */
-const SidenavSubmenuHeader = (props) => {
+exports.SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => {
     const { children, actions, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('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))));
-};
-exports.SidenavSubmenuHeader = SidenavSubmenuHeader;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation-submenu-header', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-side-navigation-submenu-header-label' }, children),
+        actions && (React.createElement(index_js_1.Box, { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
+});
 exports.default = exports.SidenavSubmenuHeader;

package/cjs/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/cjs/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/cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -34,7 +34,6 @@ exports.SkipToContentLink = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/skip-to-content.css");
 /**
  * `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.
@@ -45,7 +44,6 @@ require("@itwin/itwinui-css/css/skip-to-content.css");
  */
 exports.SkipToContentLink = React.forwardRef((props, ref) => {
     const { children = 'Skip to main content', className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("a", { ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className), ...rest }, children));
+    return (React.createElement(index_js_1.Box, { as: 'a', ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className), ...rest }, children));
 });
 exports.default = exports.SkipToContentLink;

package/cjs/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/cjs/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/cjs/core/Slider/Slider.js

@@ -34,7 +34,6 @@ exports.Slider = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/slider.css");
 const Track_js_1 = require("./Track.js");
 const Thumb_js_1 = require("./Thumb.js");
 const getPercentageOfRectangle = (rect, pointerX, pointerY, orientation) => {
@@ -107,7 +106,6 @@ exports.Slider = React.forwardRef((props, ref) => {
     React.useEffect(() => {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
-    (0, index_js_1.useTheme)();
     const containerRef = React.useRef(null);
     React.useEffect(() => {
         if (containerRef.current && setFocus) {
@@ -232,7 +230,7 @@ exports.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(index_js_1.Box, { className: 'iui-slider-ticks' }, tickLabels.map((label, index) => (React.createElement(index_js_1.Box, { as: 'span', key: index, className: 'iui-slider-tick' }, label)))));
         }
         return tickLabels;
     }, [tickLabels]);
@@ -247,12 +245,12 @@ exports.Slider = React.forwardRef((props, ref) => {
                 : formatNumberValue(val, step, getNumDecimalPlaces),
         };
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement("div", { ref: ref, className: (0, classnames_1.default)('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: (0, classnames_1.default)('iui-slider-container', {
+    return (React.createElement(index_js_1.Box, { ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', `iui-slider-${orientation}`, { 'iui-disabled': disabled }, className), ...rest },
+        minValueLabel && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-slider-min' }, minValueLabel)),
+        React.createElement(index_js_1.Box, { ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
             }), onPointerDown: handlePointerDownOnSlider, ...railContainerProps },
-            React.createElement("div", { className: 'iui-slider-rail' }),
+            React.createElement(index_js_1.Box, { className: 'iui-slider-rail' }),
             currentValues.map((thumbValue, index) => {
                 var _a;
                 const [minVal, maxVal] = getAllowableThumbRange(index);
@@ -261,6 +259,6 @@ exports.Slider = React.forwardRef((props, ref) => {
             }),
             React.createElement(Track_js_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),
-        maxValueLabel && (React.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
+        maxValueLabel && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-slider-max' }, maxValueLabel))));
 });
 exports.default = exports.Slider;

package/cjs/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/cjs/core/Slider/Thumb.js

@@ -34,6 +34,7 @@ exports.Thumb = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../Tooltip/index.js");
+const index_js_2 = require("../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
@@ -86,7 +87,7 @@ const Thumb = (props) => {
     }, [adjustedValue, sliderMax, sliderMin]);
     const { style, className, ...rest } = thumbProps || {};
     return (React.createElement(index_js_1.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(index_js_2.Box, { ...rest, "data-index": index, ref: thumbRef, style: {
                 ...style,
                 ...(orientation === 'horizontal'
                     ? { left: `${lowPercent}%` }

package/cjs/core/Slider/Track.js

@@ -29,6 +29,7 @@ exports.Track = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 function shouldDisplaySegment(segmentIndex, mode) {
     if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) {
         return true;
@@ -75,7 +76,7 @@ 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(index_js_1.Box, { className: 'iui-slider-track', style: {
                     ...(orientation === 'horizontal'
                         ? {
                             left: `${lowPercent}%`,

package/cjs/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/cjs/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/cjs/core/StatusMessage/StatusMessage.js

@@ -22,9 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusMessage = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -33,7 +30,6 @@ exports.StatusMessage = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
 /**
  * Component to display icon and text below the `Combobox` component.
  * @example
@@ -41,21 +37,10 @@ const classnames_1 = __importDefault(require("classnames"));
  * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
  */
 const StatusMessage = ({ startIcon: userStartIcon, children, status, }) => {
-    (0, index_js_1.useTheme)();
-    const StartIcon = () => {
-        var _a;
-        const icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && index_js_1.StatusIconMap[status]());
-        if (!icon) {
-            return null;
-        }
-        return React.cloneElement(icon, {
-            className: (0, classnames_1.default)('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 && index_js_1.StatusIconMap[status]());
     return (React.createElement(React.Fragment, null,
-        React.createElement(StartIcon, null),
-        React.createElement("div", { className: 'iui-message' }, children)));
+        !!icon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-input-icon', "aria-hidden": true }, icon)) : null,
+        React.createElement(index_js_1.Box, { className: 'iui-message' }, children)));
 };
 exports.StatusMessage = StatusMessage;
 exports.default = exports.StatusMessage;