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

package/cjs/core/Header/HeaderBasicButton.js

@@ -35,19 +35,12 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 exports.HeaderBasicButton = React.forwardRef((props, ref) => {
-    const { onClick, className, children, style, type = 'button', startIcon, endIcon, as: Element = 'button', styleType, size, ...rest } = props;
+    const { onClick, className, children, style, startIcon, endIcon, styleType, size, ...rest } = props;
     styleType; // To omit and prevent eslint error.
     size; // To omit and prevent eslint error.
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: type, style: style, ...rest },
-        startIcon &&
-            React.cloneElement(startIcon, {
-                className: startIcon.props.className,
-            }),
+    return (React.createElement(index_js_1.Box, { as: 'button', className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: 'button', style: style, ...rest },
+        startIcon,
         children,
-        endIcon &&
-            React.cloneElement(endIcon, {
-                className: endIcon.props.className,
-            })));
+        endIcon));
 });
 exports.default = exports.HeaderBasicButton;

package/cjs/core/Header/HeaderBreadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/header.css';
-export declare type HeaderBreadcrumbsProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.
      * (expects HeaderButton[])
@@ -22,5 +22,5 @@ export declare type HeaderBreadcrumbsProps = {
  *   ]}
  * />
  */
-export declare const HeaderBreadcrumbs: (props: HeaderBreadcrumbsProps) => JSX.Element;
+export declare const HeaderBreadcrumbs: PolymorphicForwardRefComponent<"nav", HeaderBreadcrumbsProps>;
 export default HeaderBreadcrumbs;

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -22,6 +22,9 @@ 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.HeaderBreadcrumbs = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -29,8 +32,8 @@ exports.HeaderBreadcrumbs = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/header.css");
 /**
  * Header breadcrumbs, adds chevron between each provided items.
  * @example
@@ -41,16 +44,14 @@ require("@itwin/itwinui-css/css/header.css");
  *   ]}
  * />
  */
-const HeaderBreadcrumbs = (props) => {
-    const { items, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("nav", { "aria-label": 'breadcrumbs', className: 'iui-header-breadcrumbs', ...rest },
-        React.createElement("ol", { className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+exports.HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
+    const { className, items, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
             ...previous,
             current,
-            index !== items.length - 1 && (React.createElement("li", { className: 'iui-breadcrumbs-separator', key: index },
+            index !== items.length - 1 && (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
                 React.createElement(index_js_1.SvgChevronRight, { key: `chevron${index}`, "aria-hidden": true, className: 'iui-chevron' }))),
         ], []))));
-};
-exports.HeaderBreadcrumbs = HeaderBreadcrumbs;
+});
 exports.default = exports.HeaderBreadcrumbs;

package/cjs/core/Header/HeaderButton.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Buttons/index.js';
+import type { ButtonProps } from '../Buttons/Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
-import type { HeaderDropdownButtonProps } from './HeaderDropdownButton.js';
-export declare type HeaderButtonProps = {
+import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+declare type HeaderButtonProps = {
     /**
      * Main label of the header button.
      */
@@ -17,8 +16,7 @@ export declare type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
-} & Partial<Pick<HeaderDropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
-declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', HeaderButtonProps>;
+} & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 /**
  * Header button that handles slim state of the `Header` it's in.
  * When in slim mode, will only display the name and reduce icon size.
@@ -29,5 +27,5 @@ declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', He
  * <HeaderButton name='Project C' startIcon={<img style={{ objectFit: 'cover' }} src='project.png' />} />
  * <HeaderButton name='Project D' isActive />
  */
-export declare const HeaderButton: HeaderButtonComponent;
+export declare const HeaderButton: PolymorphicForwardRefComponent<"button", HeaderButtonProps>;
 export default HeaderButton;

package/cjs/core/Header/HeaderButton.js

@@ -26,24 +26,13 @@ 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.HeaderButton = 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/header.css");
 const HeaderSplitButton_js_1 = require("./HeaderSplitButton.js");
 const HeaderDropdownButton_js_1 = require("./HeaderDropdownButton.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
-const isSplitButton = (props) => {
-    return !!props.menuItems && !!props.onClick;
-};
-const isDropdownButton = (props) => {
-    return !!props.menuItems;
-};
 /**
  * Header button that handles slim state of the `Header` it's in.
  * When in slim mode, will only display the name and reduce icon size.
@@ -55,24 +44,18 @@ const isDropdownButton = (props) => {
  * <HeaderButton name='Project D' isActive />
  */
 exports.HeaderButton = React.forwardRef((props, ref) => {
-    const { name, description, isActive = false, className, startIcon, menuItems, disabled, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { name, description, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
     const buttonProps = {
-        startIcon: React.isValidElement(startIcon)
-            ? React.cloneElement(startIcon, {
-                className: (0, classnames_1.default)('iui-header-breadcrumb-button-icon', startIcon.props.className),
-            })
-            : undefined,
-        className: className,
-        children: (React.createElement("span", { className: 'iui-header-breadcrumb-button-text' },
-            React.createElement("span", { className: 'iui-header-breadcrumb-button-text-label' }, name),
-            description && (React.createElement("span", { className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
+        startIcon: startIcon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-icon', "aria-hidden": true }, startIcon)) : null,
+        children: (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text' },
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-label' }, name),
+            description && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
         ref: ref,
         disabled: disabled,
         ...(!!menuItems && { menuItems }),
         ...rest,
-    };
-    const headerButton = isSplitButton(buttonProps) ? (React.createElement(HeaderSplitButton_js_1.HeaderSplitButton, { ...buttonProps })) : isDropdownButton(buttonProps) ? (React.createElement(HeaderDropdownButton_js_1.HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ...buttonProps }));
-    return (React.createElement("li", { className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
+    }; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const headerButton = !!props.menuItems && !!props.onClick ? (React.createElement(HeaderSplitButton_js_1.HeaderSplitButton, { ...buttonProps })) : !!props.menuItems ? (React.createElement(HeaderDropdownButton_js_1.HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ...buttonProps }));
+    return (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
 });
 exports.default = exports.HeaderButton;

package/cjs/core/Header/HeaderDropdownButton.d.ts

@@ -1,6 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/index.js';
-export declare type HeaderDropdownButtonProps = DropdownButtonProps;
-declare type HeaderDropdownButtonComponent = PolymorphicForwardRefComponent<'button', HeaderDropdownButtonProps>;
-export declare const HeaderDropdownButton: HeaderDropdownButtonComponent;
+import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+export declare const HeaderDropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
 export default HeaderDropdownButton;

package/cjs/core/Header/HeaderDropdownButton.js

@@ -38,7 +38,6 @@ const index_js_2 = require("../utils/index.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
 exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
     const { menuItems, className, children, ...rest } = props;
-    (0, index_js_2.useTheme)();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const buttonRef = React.useRef(null);

package/cjs/core/Header/HeaderLogo.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type HeaderLogoOwnProps = {
     /**
      * Logo shown before the main content.
@@ -12,7 +11,6 @@ declare type HeaderLogoOwnProps = {
      */
     onClick?: (e: unknown) => void;
 };
-export declare type HeaderLogoProps = PolymorphicComponentProps<'div', HeaderLogoOwnProps>;
 /**
  * Header Title section
  * @example

package/cjs/core/Header/HeaderLogo.js

@@ -34,7 +34,6 @@ exports.HeaderLogo = 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/header.css");
 /**
  * Header Title section
  * @example
@@ -44,17 +43,10 @@ require("@itwin/itwinui-css/css/header.css");
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
 exports.HeaderLogo = React.forwardRef((props, ref) => {
-    const { className, children, logo, onClick, as: Element = !!onClick ? 'button' : 'div', ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-header-brand', className), onClick: onClick, 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TS complains here but it's ok; it is an implementation detail
-        // @ts-ignore
-        ref: ref, ...rest },
-        React.isValidElement(logo)
-            ? React.cloneElement(logo, {
-                className: (0, classnames_1.default)('iui-header-brand-icon', logo.props.className),
-            })
-            : undefined,
-        children && React.createElement("span", { className: 'iui-header-brand-label' }, children)));
+    const { className, children, logo, onClick, as = (!!onClick ? 'button' : 'div'), // eslint-disable-line @typescript-eslint/no-explicit-any
+    ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-header-brand', className), as: as, type: as === 'button' ? 'button' : undefined, onClick: onClick, ref: ref, ...rest },
+        logo ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-brand-icon', "aria-hidden": true }, logo)) : null,
+        children && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-brand-label' }, children))));
 });
 exports.default = exports.HeaderLogo;

package/cjs/core/Header/HeaderSplitButton.d.ts

@@ -1,6 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { SplitButtonProps } from '../Buttons/index.js';
-export declare type HeaderSplitButtonProps = SplitButtonProps;
-declare type HeaderSplitButtonComponent = PolymorphicForwardRefComponent<'button', HeaderSplitButtonProps>;
-export declare const HeaderSplitButton: HeaderSplitButtonComponent;
+import type { SplitButtonProps } from '../Buttons/SplitButton/SplitButton.js';
+export declare const HeaderSplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;
 export default HeaderSplitButton;

package/cjs/core/Header/HeaderSplitButton.js

@@ -37,8 +37,7 @@ const index_js_1 = require("../DropdownMenu/index.js");
 const index_js_2 = require("../utils/index.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
 exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, className, menuPlacement = 'bottom-end', children, style, title, disabled, ...rest } = props;
-    (0, index_js_2.useTheme)();
+    const { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const ref = React.useRef(null);
@@ -47,9 +46,9 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children]);
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), style: style, title: title, ref: ref },
+    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), ref: ref },
         React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ref: forwardedRef, disabled: disabled, ...rest }, children),
         React.createElement(index_js_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement("button", { className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(index_js_2.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(index_js_2.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+            React.createElement(index_js_2.Box, { as: 'button', type: 'button', className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(index_js_2.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(index_js_2.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
 });
 exports.default = exports.HeaderSplitButton;

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

@@ -1,10 +1,6 @@
 export { Header } from './Header.js';
-export type { HeaderProps } from './Header.js';
 declare const _default: "./Header";
 export default _default;
 export { HeaderButton } from './HeaderButton.js';
-export type { HeaderButtonProps } from './HeaderButton.js';
 export { HeaderLogo } from './HeaderLogo.js';
-export type { HeaderLogoProps } from './HeaderLogo.js';
 export { HeaderBreadcrumbs } from './HeaderBreadcrumbs.js';
-export type { HeaderBreadcrumbsProps } from './HeaderBreadcrumbs.js';

package/cjs/core/InformationPanel/InformationPanel.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type InformationPanelProps = {
     /**
      * Is the panel open?
      * @default false
@@ -21,7 +20,7 @@ export declare type InformationPanelProps = {
      * Content of the panel.
      */
     children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -43,25 +42,5 @@ export declare type InformationPanelProps = {
  *   </InformationPanel>
  * </InformationPanelWrapper>
  */
-export declare const InformationPanel: React.ForwardRefExoticComponent<{
-    /**
-     * Is the panel open?
-     * @default false
-     */
-    isOpen?: boolean | undefined;
-    /**
-     * Orientation of the panel.
-     * @default 'vertical'
-     */
-    orientation?: "horizontal" | "vertical" | undefined;
-    /**
-     * Set to false to make the panel non-resizable.
-     * @default true
-     */
-    resizable?: boolean | undefined;
-    /**
-     * Content of the panel.
-     */
-    children?: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InformationPanel: PolymorphicForwardRefComponent<"div", InformationPanelProps>;
 export default InformationPanel;

package/cjs/core/InformationPanel/InformationPanel.js

@@ -34,7 +34,6 @@ exports.InformationPanel = 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/information-panel.css");
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -58,7 +57,6 @@ require("@itwin/itwinui-css/css/information-panel.css");
  */
 exports.InformationPanel = React.forwardRef((props, ref) => {
     const { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const infoPanelRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(ref, infoPanelRef);
     const startResize = (e) => {
@@ -89,13 +87,13 @@ exports.InformationPanel = React.forwardRef((props, ref) => {
             infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
         }
     }, [orientation]);
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-panel', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-information-panel', {
             'iui-right': orientation === 'vertical',
             'iui-bottom': orientation === 'horizontal',
             'iui-visible': isOpen,
         }, className), ref: refs, ...rest },
-        resizable && (React.createElement("div", { className: 'iui-resizer', onPointerDown: startResize },
-            React.createElement("div", { className: 'iui-resizer-bar' }))),
+        resizable && (React.createElement(index_js_1.Box, { className: 'iui-resizer', onPointerDown: startResize },
+            React.createElement(index_js_1.Box, { className: 'iui-resizer-bar' }))),
         children));
 });
 exports.default = exports.InformationPanel;

package/cjs/core/InformationPanel/InformationPanelBody.d.ts

@@ -1,14 +1,5 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelBodyProps = {
-    /**
-     * Content of the InformationPanelBody.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * Body of the `InformationPanel` containing the main content.
  */
-export declare const InformationPanelBody: (props: InformationPanelBodyProps) => JSX.Element;
+export declare const InformationPanelBody: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default InformationPanelBody;

package/cjs/core/InformationPanel/InformationPanelBody.js

@@ -1,47 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InformationPanelBody = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * Body of the `InformationPanel` containing the main content.
  */
-const InformationPanelBody = (props) => {
-    const { className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-body', className), ...rest }, children));
-};
-exports.InformationPanelBody = InformationPanelBody;
+exports.InformationPanelBody = index_js_1.polymorphic.div('iui-information-body');
 exports.default = exports.InformationPanelBody;

package/cjs/core/InformationPanel/InformationPanelContent.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelContentProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type InformationPanelContentProps = {
     /**
      * If set to 'inline', the label/input pairs will be shown on the same line.
      * The component handles the spacing and alignment automatically.
@@ -14,7 +13,7 @@ export declare type InformationPanelContentProps = {
      * Should ideally be pairs of `Label` and input components.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * The `InformationPanelContent` component should be used inside `InformationPanelBody`
  * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
@@ -38,5 +37,5 @@ export declare type InformationPanelContentProps = {
  *   <Input id='path-input' value='/Shared/Music/' />
  * </InformationPanelContent>
  */
-export declare const InformationPanelContent: (props: InformationPanelContentProps) => JSX.Element;
+export declare const InformationPanelContent: PolymorphicForwardRefComponent<"div", InformationPanelContentProps>;
 export default InformationPanelContent;

package/cjs/core/InformationPanel/InformationPanelContent.js

@@ -34,7 +34,6 @@ exports.InformationPanelContent = 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/information-panel.css");
 /**
  * The `InformationPanelContent` component should be used inside `InformationPanelBody`
  * to style rows of key/value pairs, where the key is ideally represented by a `Label` component
@@ -58,10 +57,8 @@ require("@itwin/itwinui-css/css/information-panel.css");
  *   <Input id='path-input' value='/Shared/Music/' />
  * </InformationPanelContent>
  */
-const InformationPanelContent = (props) => {
+exports.InformationPanelContent = React.forwardRef((props, forwardedRef) => {
     const { className, displayStyle = 'default', children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className), ...rest }, children));
-};
-exports.InformationPanelContent = InformationPanelContent;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-information-body-content', { 'iui-inline': displayStyle === 'inline' }, className), ref: forwardedRef, ...rest }, children));
+});
 exports.default = exports.InformationPanelContent;

package/cjs/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelHeaderProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.
      *
@@ -23,7 +22,7 @@ export declare type InformationPanelHeaderProps = {
      * Content of the panel header.
      */
     children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *
@@ -40,5 +39,5 @@ export declare type InformationPanelHeaderProps = {
  *   <Text variant='subheading'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
-export declare const InformationPanelHeader: (props: InformationPanelHeaderProps) => JSX.Element;
+export declare const InformationPanelHeader: PolymorphicForwardRefComponent<"div", InformationPanelHeaderProps>;
 export default InformationPanelHeader;

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *
@@ -52,15 +51,13 @@ require("@itwin/itwinui-css/css/information-panel.css");
  *   <Text variant='subheading'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
-const InformationPanelHeader = (props) => {
+exports.InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
     const { children, onClose, actions, className, ...rest } = props;
-    (0, index_js_2.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-header', className), ...rest },
-        React.createElement("span", { className: 'iui-information-header-label' }, children),
-        React.createElement("div", { className: 'iui-information-header-actions' },
+    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-information-header', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_2.Box, { as: 'span', className: 'iui-information-header-label' }, children),
+        React.createElement(index_js_2.Box, { className: 'iui-information-header-actions' },
             actions,
             onClose && (React.createElement(index_js_1.IconButton, { styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
                 React.createElement(index_js_2.SvgCloseSmall, { "aria-hidden": true }))))));
-};
-exports.InformationPanelHeader = InformationPanelHeader;
+});
 exports.default = exports.InformationPanelHeader;

package/cjs/core/InformationPanel/InformationPanelWrapper.d.ts

@@ -1,9 +1,3 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelWrapperProps = {
-    children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.
@@ -13,5 +7,5 @@ export declare type InformationPanelWrapperProps = {
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-export declare const InformationPanelWrapper: (props: InformationPanelWrapperProps) => JSX.Element;
+export declare const InformationPanelWrapper: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default InformationPanelWrapper;

package/cjs/core/InformationPanel/InformationPanelWrapper.js

@@ -1,40 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InformationPanelWrapper = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.
@@ -44,10 +15,5 @@ require("@itwin/itwinui-css/css/information-panel.css");
  *   <InformationPanel ... />
  * </InformationPanelWrapper>
  */
-const InformationPanelWrapper = (props) => {
-    const { className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-panel-wrapper', className), ...rest }, children));
-};
-exports.InformationPanelWrapper = InformationPanelWrapper;
+exports.InformationPanelWrapper = index_js_1.polymorphic.div('iui-information-panel-wrapper');
 exports.default = exports.InformationPanelWrapper;

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

@@ -1,12 +1,7 @@
 export { InformationPanel } from './InformationPanel.js';
-export type { InformationPanelProps } from './InformationPanel.js';
 declare const _default: "./InformationPanel";
 export default _default;
 export { InformationPanelWrapper } from './InformationPanelWrapper.js';
-export type { InformationPanelWrapperProps } from './InformationPanelWrapper.js';
 export { InformationPanelHeader } from './InformationPanelHeader.js';
-export type { InformationPanelHeaderProps } from './InformationPanelHeader.js';
 export { InformationPanelBody } from './InformationPanelBody.js';
-export type { InformationPanelBodyProps } from './InformationPanelBody.js';
 export { InformationPanelContent } from './InformationPanelContent.js';
-export type { InformationPanelContentProps } from './InformationPanelContent.js';