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

package/cjs/core/Select/Select.js

@@ -98,7 +98,6 @@ const Select = (props) => {
     var _a;
     const uid = (0, index_js_2.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;
-    (0, index_js_2.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);
@@ -148,10 +147,12 @@ 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(index_js_1.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;
@@ -198,7 +199,7 @@ const Select = (props) => {
     const tagRenderer = React.useCallback((item) => {
         return React.createElement(SelectTag_js_1.default, { key: item.label, label: item.label });
     }, []);
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest },
+    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest },
         React.createElement(index_js_2.Popover, { content: React.createElement(index_js_1.Menu, { role: 'listbox', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: {
                     minWidth,
                     maxWidth: `min(${minWidth * 2}px, 90vw)`,
@@ -209,13 +210,13 @@ 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: (0, classnames_1.default)('iui-select-button', {
+            React.createElement(index_js_2.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: (0, classnames_1.default)('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(index_js_2.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: (0, classnames_1.default)('iui-end-icon', {
+        React.createElement(index_js_2.Box, { as: 'span', "aria-hidden": true, ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
                 'iui-open': isOpen,
@@ -225,16 +226,15 @@ const Select = (props) => {
 };
 exports.Select = Select;
 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: (0, classnames_1.default)(selectedItem.icon.props.className, 'iui-icon'),
-                }),
-            React.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
+            startIcon && (React.createElement(index_js_2.Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
+            React.createElement(index_js_2.Box, { as: 'span', className: 'iui-content' }, selectedItem.label)))));
 };
 const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
     const selectedItemsElements = React.useMemo(() => {
@@ -247,7 +247,7 @@ const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRendere
         selectedItems &&
             selectedItemsRenderer &&
             selectedItemsRenderer(selectedItems),
-        selectedItems && !selectedItemsRenderer && (React.createElement("span", { className: 'iui-content' },
+        selectedItems && !selectedItemsRenderer && (React.createElement(index_js_2.Box, { as: 'span', className: 'iui-content' },
             React.createElement(SelectTagContainer_js_1.default, { tags: selectedItemsElements })))));
 };
 exports.default = exports.Select;

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

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/select.css';
-export declare type SelectTagProps = {
+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;

package/cjs/core/Select/SelectTag.js

@@ -39,11 +39,9 @@ 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,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
-export declare type SideNavigationProps = {
+declare type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.
      * Recommended to use `SidenavButton` components.
@@ -49,7 +49,7 @@ export declare type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Left side navigation menu component.
  * @example
@@ -64,5 +64,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

@@ -51,9 +51,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 +62,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,7 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/index.js';
+import type { ButtonProps } from '../Buttons/Button/Button.js';
 import '@itwin/itwinui-css/css/side-navigation.css';
-export declare type SidenavButtonProps = {
+declare type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,
      * i.e. the current page corresponds to this button.
@@ -13,10 +13,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,8 +33,7 @@ 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");
+const index_js_1 = require("../Buttons/index.js");
 require("@itwin/itwinui-css/css/side-navigation.css");
 /**
  * Wrapper around Button to be used as SideNavigation items.
@@ -42,9 +41,6 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 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,5 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } 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'>;
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example
@@ -15,10 +8,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

@@ -45,8 +45,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,12 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } 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;
+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 +21,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

@@ -49,12 +49,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,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/skip-to-content.css';
-export declare type SkipToContentLinkProps = {
+declare type SkipToContentLinkProps = {
     /**
      * The id of the main content that the link directs to. Don't forget the #!
      */
@@ -10,7 +11,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 +20,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

@@ -45,7 +45,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,7 @@
 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 +101,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 +110,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

@@ -107,7 +107,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 +231,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 +246,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 +260,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/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.