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

package/cjs/core/InformationPanel/InformationPanelContent.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/information-panel.css';
-export declare type InformationPanelContentProps = {
+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 +14,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 +38,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

@@ -58,10 +58,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,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/information-panel.css';
-export declare type InformationPanelHeaderProps = {
+declare type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.
      *
@@ -23,7 +23,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 +40,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

@@ -52,15 +52,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,4 @@
-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 +8,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,38 +1,10 @@
 "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");
 /**
@@ -44,10 +16,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';

package/cjs/core/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 export declare type InputProps = {
     /**
@@ -10,7 +10,7 @@ export declare type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+};
 /**
  * Basic input component
  * @example
@@ -18,15 +18,5 @@ export declare type InputProps = {
  * <Input disabled />
  * <Input size='small' />
  */
-export declare const Input: React.ForwardRefExoticComponent<{
-    /**
-     * Set focus on input element.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Modify size of the input.
-     */
-    size?: "small" | "large" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: PolymorphicForwardRefComponent<"input", InputProps>;
 export default Input;

package/cjs/core/Input/Input.js

@@ -44,7 +44,6 @@ require("@itwin/itwinui-css/css/input.css");
  */
 exports.Input = React.forwardRef((props, ref) => {
     const { setFocus = false, size, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const inputRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(inputRef, ref);
     React.useEffect(() => {
@@ -52,6 +51,6 @@ exports.Input = React.forwardRef((props, ref) => {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("input", { className: (0, classnames_1.default)('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
+    return (React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-input', className), "data-iui-size": size, ref: refs, ...rest }));
 });
 exports.default = exports.Input;

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

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

package/cjs/core/InputGroup/InputGroup.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/utils.css';
-export declare type InputGroupProps = {
+declare type InputGroupProps = {
     /**
      * Label of the group.
      */
@@ -37,7 +37,7 @@ export declare type InputGroupProps = {
      * Child inputs inside group.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -53,5 +53,5 @@ export declare type InputGroupProps = {
  *  <Radio />
  * </InputGroup>
  */
-export declare const InputGroup: (props: InputGroupProps) => JSX.Element;
+export declare const InputGroup: PolymorphicForwardRefComponent<"div", InputGroupProps>;
 export default InputGroup;

package/cjs/core/InputGroup/InputGroup.js

@@ -46,9 +46,8 @@ require("@itwin/itwinui-css/css/utils.css");
  *  <Radio />
  * </InputGroup>
  */
-const InputGroup = (props) => {
-    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, className, style, required = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
+exports.InputGroup = React.forwardRef((props, forwardedRef) => {
+    const { children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, ...rest } = props;
     const icon = () => {
         if (svgIcon) {
             return React.cloneElement(svgIcon, { 'aria-hidden': true });
@@ -60,8 +59,7 @@ const InputGroup = (props) => {
         }
         return undefined;
     };
-    return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', className: className, style: style, ...rest },
-        React.createElement("div", { className: 'iui-input-group' }, children)));
-};
-exports.InputGroup = InputGroup;
+    return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { className: 'iui-input-group' }, children)));
+});
 exports.default = exports.InputGroup;

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

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

package/cjs/core/Label/Label.d.ts

@@ -1,11 +1,6 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/utils.css';
-declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
-    /**
-     * What element should the label be rendered as?
-     * @default 'label'
-     */
-    as?: T;
+declare type LabelOwnProps = {
     /**
      * Set the display style of the label.
      *   - 'block' - default, no extra spacing (label and input will be on separate lines)
@@ -19,7 +14,6 @@ declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
      */
     required?: boolean;
 };
-export declare type LabelProps<T extends React.ElementType = 'label'> = LabelOwnProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof LabelOwnProps<T>>;
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.
@@ -27,5 +21,5 @@ export declare type LabelProps<T extends React.ElementType = 'label'> = LabelOwn
  * <Label htmlFor='name-input'>Name</Label>
  * <Input id='name-input' />
  */
-export declare const Label: <T extends React.ElementType<any> = "label">(props: LabelProps<T>) => JSX.Element;
+export declare const Label: PolymorphicForwardRefComponent<"label", LabelOwnProps>;
 export default Label;

package/cjs/core/Label/Label.js

@@ -42,13 +42,11 @@ require("@itwin/itwinui-css/css/utils.css");
  * <Label htmlFor='name-input'>Name</Label>
  * <Input id='name-input' />
  */
-const Label = (props) => {
-    const { as: Element = 'label', displayStyle = 'block', required, className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-input-label', {
+exports.Label = React.forwardRef((props, forwardedRef) => {
+    const { displayStyle = 'block', required, className, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-input-label', {
             'iui-inline': displayStyle === 'inline',
             'iui-required': required,
-        }, className), ...rest }, children));
-};
-exports.Label = Label;
+        }, className), ref: forwardedRef, ...rest }, children));
+});
 exports.default = exports.Label;

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

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

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { InputProps } from '../Input/Input.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledInputProps = {
     /**
@@ -52,50 +53,5 @@ export declare type LabeledInputProps = {
  * <LabeledInput status='positive' label='Positive' />
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
-export declare const LabeledInput: React.ForwardRefExoticComponent<{
-    /**
-     * Label of the input.
-     */
-    label?: React.ReactNode;
-    /**
-     * Message below the input. Does not apply to 'inline' input.
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of the input.
-     */
-    status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Custom svg icon. Will override status icon if specified.
-     */
-    svgIcon?: JSX.Element | undefined;
-    /**
-     * Custom CSS class name for the input element.
-     */
-    inputClassName?: string | undefined;
-    /**
-     * Custom CSS Style for the input element.
-     */
-    inputStyle?: React.CSSProperties | undefined;
-    /**
-     * Set display style of label.
-     * Supported values:
-     * - 'default' - label appears above input.
-     * - 'inline' - appears in the same line as input.
-     * @default 'default'
-     */
-    displayStyle?: "inline" | "default" | undefined;
-    /**
-     * Set display style of icon.
-     * Supported values:
-     * - 'block' - icon appears below input.
-     * - 'inline' - icon appears inside input (at the end).
-     *
-     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
-     */
-    iconDisplayStyle?: "inline" | "block" | undefined;
-} & {
-    setFocus?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const LabeledInput: PolymorphicForwardRefComponent<"input", LabeledInputProps>;
 export default LabeledInput;

package/cjs/core/LabeledInput/LabeledInput.js

@@ -43,7 +43,6 @@ require("@itwin/itwinui-css/css/input.css");
 exports.LabeledInput = React.forwardRef((props, ref) => {
     const uid = (0, index_js_1.useId)();
     const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, id = uid, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && index_js_1.StatusIconMap[status]());
     return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(Input_js_1.Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));

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

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

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SelectProps } from '../Select/Select.js';
-import type { LabeledInputProps } from '../LabeledInput/index.js';
+import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledSelectProps<T> = {
     /**

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -67,7 +67,6 @@ require("@itwin/itwinui-css/css/input.css");
  */
 const LabeledSelect = (props) => {
     const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, selectClassName, selectStyle, required = false, triggerProps, ...rest } = props;
-    (0, index_js_2.useTheme)();
     const labelId = `${(0, index_js_2.useId)()}-label`;
     const icon = () => {
         if (svgIcon) {

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

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

package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TextareaProps } from '../Textarea/Textarea.js';
-import type { LabeledInputProps } from '../LabeledInput/index.js';
+import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import '@itwin/itwinui-css/css/input.css';
-export declare type LabeledTextareaProps = {
+declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.
      */
@@ -45,28 +46,5 @@ export declare type LabeledTextareaProps = {
  *  status='negative'
  * />
  */
-export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
-    /**
-     * Label for the textarea.
-     */
-    label: React.ReactNode;
-    /**
-     * Message below the textarea. Does not apply to 'inline' textarea.
-     */
-    message?: React.ReactNode;
-    /**
-     * Status of text area.
-     */
-    status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Custom class name for textarea.
-     */
-    textareaClassName?: string | undefined;
-    /**
-     * Custom style for textarea.
-     */
-    textareaStyle?: React.CSSProperties | undefined;
-} & Pick<LabeledInputProps, "displayStyle" | "svgIcon" | "iconDisplayStyle"> & {
-    setFocus?: boolean | undefined;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const LabeledTextarea: PolymorphicForwardRefComponent<"textarea", LabeledTextareaProps>;
 export default LabeledTextarea;

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -56,7 +56,6 @@ require("@itwin/itwinui-css/css/input.css");
 exports.LabeledTextarea = React.forwardRef((props, ref) => {
     const uid = (0, index_js_1.useId)();
     const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, id = uid, ...textareaProps } = props;
-    (0, index_js_1.useTheme)();
     const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && index_js_1.StatusIconMap[status]());
     return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(index_js_2.Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));

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

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

package/cjs/core/List/List.d.ts

@@ -1,6 +1,2 @@
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-export declare const List: PolymorphicForwardRefComponent<"ul", ListOwnProps>;
-declare type ListOwnProps = {};
-export declare type ListProps = PolymorphicComponentProps<'ul', ListOwnProps>;
-export {};
+export declare const List: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;

package/cjs/core/List/List.js

@@ -1,42 +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.List = 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 React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/menu.css");
-exports.List = React.forwardRef((props, ref) => {
-    const { as: Element = 'ul', className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-list', className), ref: ref, role: 'list', ...rest }));
-});
+exports.List = index_js_1.polymorphic.ul('iui-list', { role: 'list' });
+exports.List.displayName = 'List';

package/cjs/core/List/ListItem.d.ts

@@ -1,6 +1,7 @@
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
+/// <reference types="react" />
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/menu.css';
-declare type ListItemOwnProps = {
+export declare type ListItemOwnProps = {
     /**
      * Size of the ListItem. Can be explicitly specified to be 'large',
      * but if a description is included in addition to the label, then
@@ -28,9 +29,6 @@ declare type ListItemOwnProps = {
      */
     focused?: boolean;
 };
-declare type ListItemIconOwnProps = {};
-declare type ListItemContentOwnProps = {};
-declare type ListItemDescriptionOwnProps = {};
 /**
  * A generic ListItem component that can be used simply for displaying data, or as a base
  * for the list items in a more complex component (e.g. a custom Select).
@@ -48,7 +46,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
     /**
      * Icon to be placed at the beginning or end of the ListItem.
      */
-    Icon: PolymorphicForwardRefComponent<"div", ListItemIconOwnProps>;
+    Icon: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Wrapper for the main content of the ListItem.
      *
@@ -57,7 +55,7 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *   and push the icon to the end
      * - When using `ListItem.Description`.
      */
-    Content: PolymorphicForwardRefComponent<"div", ListItemContentOwnProps>;
+    Content: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
     /**
      * Description to be used in addition to the main label of the ListItem.
      * Should be used as a child of `ListItem.Content`.
@@ -70,10 +68,5 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      *  </ListItem.Content>
      * </ListItem>
      */
-    Description: PolymorphicForwardRefComponent<"div", ListItemDescriptionOwnProps>;
+    Description: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
 };
-export declare type ListItemProps = PolymorphicComponentProps<'li', ListItemOwnProps>;
-export declare type ListItemIconProps = PolymorphicComponentProps<'li', ListItemIconOwnProps>;
-export declare type ListItemContentProps = PolymorphicComponentProps<'li', ListItemContentOwnProps>;
-export declare type ListItemDescriptionProps = PolymorphicComponentProps<'li', ListItemDescriptionOwnProps>;
-export {};