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

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme, StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, } from '../utils/index.js';
+import { StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, Box, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/expandable-block.css';
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
@@ -15,9 +15,8 @@ import '@itwin/itwinui-css/css/expandable-block.css';
  * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
-export const ExpandableBlock = (props) => {
+export const ExpandableBlock = React.forwardRef((props, ref) => {
     const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', ...rest } = props;
-    useTheme();
     const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
@@ -37,20 +36,20 @@ export const ExpandableBlock = (props) => {
             handleToggle();
         }
     };
-    return (React.createElement("div", { className: cx('iui-expandable-block', {
+    return (React.createElement(Box, { className: cx('iui-expandable-block', {
             'iui-with-caption': !!caption,
             'iui-expanded': expanded,
             'iui-small': size === 'small',
             'iui-borderless': styleType === 'borderless',
-        }, className), style: style, ...rest },
-        React.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
+        }, className), style: style, ref: ref, ...rest },
+        React.createElement(Box, { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
-            React.createElement("span", { className: 'iui-expandable-block-label' },
-                React.createElement("div", { className: 'iui-title' }, title),
-                caption && React.createElement("div", { className: 'iui-caption' }, caption)),
+            React.createElement(Box, { as: 'span', className: 'iui-expandable-block-label' },
+                React.createElement(Box, { className: 'iui-title' }, title),
+                caption && React.createElement(Box, { className: 'iui-caption' }, caption)),
             icon && React.createElement(Icon, { fill: status }, icon)),
         React.createElement(WithCSSTransition, { in: expanded },
-            React.createElement("div", { className: 'iui-expandable-content' },
+            React.createElement(Box, { className: 'iui-expandable-content' },
                 React.createElement("div", null, children)))));
-};
+});
 export default ExpandableBlock;

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

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

package/esm/core/Fieldset/Fieldset.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/fieldset.css';
-export declare type FieldsetProps = {
+declare type FieldsetProps = {
     /**
      * The caption or title for the fieldset.
      */
     legend?: React.ReactNode;
-} & React.ComponentPropsWithoutRef<'fieldset'>;
+};
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example
@@ -17,5 +18,5 @@ export declare type FieldsetProps = {
  *   </InputGroup>
  * </Fieldset>
  */
-export declare const Fieldset: (props: FieldsetProps) => JSX.Element;
+export declare const Fieldset: PolymorphicForwardRefComponent<"fieldset", FieldsetProps>;
 export default Fieldset;

package/esm/core/Fieldset/Fieldset.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import cx from 'classnames';
 import '@itwin/itwinui-css/css/fieldset.css';
 /**
@@ -17,15 +17,14 @@ import '@itwin/itwinui-css/css/fieldset.css';
  *   </InputGroup>
  * </Fieldset>
  */
-export const Fieldset = (props) => {
+export const Fieldset = React.forwardRef((props, ref) => {
     const { children, className, disabled, legend, ...rest } = props;
-    useTheme();
-    return (React.createElement("fieldset", { className: cx('iui-fieldset', className), disabled: disabled, ...rest },
+    return (React.createElement(Box, { as: 'fieldset', className: cx('iui-fieldset', className), disabled: disabled, ref: ref, ...rest },
         legend && React.createElement("legend", null, legend),
         disabled
             ? React.Children.map(children, (child) => React.isValidElement(child)
                 ? React.cloneElement(child, { disabled: true })
                 : child)
             : children));
-};
+});
 export default Fieldset;

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

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

package/esm/core/FileUpload/FileEmptyCard.d.ts

@@ -1,7 +1,4 @@
-import * as React from 'react';
-export declare type FileEmptyCardIconProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileEmptyCardTextProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileEmptyCardProps = React.ComponentPropsWithoutRef<'div'>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
  * @example
@@ -18,12 +15,8 @@ export declare type FileEmptyCardProps = React.ComponentPropsWithoutRef<'div'>;
  *   </FileEmptyCard.Text>
  * </FileEmptyCard>
  */
-export declare const FileEmptyCard: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>> & {
-    Icon: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
-    Text: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export declare const FileEmptyCard: PolymorphicForwardRefComponent<"div", {}> & {
+    Icon: PolymorphicForwardRefComponent<"span", {}>;
+    Text: PolymorphicForwardRefComponent<"span", {}>;
 };
 export default FileEmptyCard;

package/esm/core/FileUpload/FileEmptyCard.js

@@ -3,16 +3,26 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgUpload } from '../utils/index.js';
+import { Box, polymorphic, SvgUpload } from '../utils/index.js';
 import cx from 'classnames';
 import FileUploadCard from './FileUploadCard.js';
-const FileEmptyCardIcon = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("span", { className: cx('iui-file-card-empty-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgUpload, null)));
+// ----------------------------------------------------------------------------
+// FileEmptyCard.Icon component
+const FileEmptyCardIcon = polymorphic.span('iui-file-card-empty-icon', {
+    children: React.createElement(SvgUpload, null),
 });
-const FileEmptyCardText = React.forwardRef((props, ref) => {
+// ----------------------------------------------------------------------------
+// FileEmptyCard.Text component
+const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
+// ----------------------------------------------------------------------------
+// FileEmptyCard component
+const FileEmptyCardComponent = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    return (React.createElement("span", { className: cx('iui-file-card-empty-action', className), ref: ref, ...rest }, children));
+    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement(FileEmptyCard.Icon, null),
+        React.createElement(FileEmptyCard.Text, null,
+            React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),
+            React.createElement("div", null, "to upload."))))));
 });
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
@@ -30,14 +40,7 @@ const FileEmptyCardText = React.forwardRef((props, ref) => {
  *   </FileEmptyCard.Text>
  * </FileEmptyCard>
  */
-export const FileEmptyCard = Object.assign(React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("div", { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
-        React.createElement(FileEmptyCard.Icon, null),
-        React.createElement(FileEmptyCard.Text, null,
-            React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),
-            React.createElement("div", null, "to upload."))))));
-}), {
+export const FileEmptyCard = Object.assign(FileEmptyCardComponent, {
     Icon: FileEmptyCardIcon,
     Text: FileEmptyCardText,
 });

package/esm/core/FileUpload/FileUpload.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/file-upload.css';
-export declare type FileUploadProps = {
+declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.
      * Should always be used when drag content differs from `children` being wrapped.
@@ -17,7 +17,7 @@ export declare type FileUploadProps = {
      * Either pass `FileUploadTemplate` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
-} & CommonProps;
+};
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -25,26 +25,5 @@ export declare type FileUploadProps = {
  * <FileUpload onFileDropped={console.log}><FileUploadTemplate /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
-export declare const FileUpload: React.ForwardRefExoticComponent<{
-    /**
-     * Content shown over `children` when file is being dragged onto the component.
-     * Should always be used when drag content differs from `children` being wrapped.
-     * Can be skipped if wrapping `FileUploadTemplate`.
-     */
-    dragContent?: React.ReactNode;
-    /**
-     * Callback fired when files are dropped onto the component.
-     */
-    onFileDropped: (files: FileList) => void;
-    /**
-     * Component to wrap `FileUpload` around.
-     * Either pass `FileUploadTemplate` (for default state) or a different component to wrap.
-     */
-    children: React.ReactNode;
-} & {
-    title?: string | undefined;
-    id?: string | undefined;
-} & {
-    style?: React.CSSProperties | undefined;
-} & import("../utils/props.js").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: PolymorphicForwardRefComponent<"div", FileUploadProps>;
 export default FileUpload;

package/esm/core/FileUpload/FileUpload.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useMergedRefs } from '../utils/index.js';
+import { Box, useMergedRefs } from '../utils/index.js';
 import '@itwin/itwinui-css/css/file-upload.css';
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
@@ -15,7 +15,6 @@ import '@itwin/itwinui-css/css/file-upload.css';
  */
 export const FileUpload = React.forwardRef((props, ref) => {
     const { dragContent, children, onFileDropped, className, ...rest } = props;
-    useTheme();
     const [isDragActive, setIsDragActive] = React.useState(false);
     const fileUploadRef = React.useRef(null);
     const refs = useMergedRefs(fileUploadRef, ref);
@@ -51,8 +50,8 @@ export const FileUpload = React.forwardRef((props, ref) => {
             onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
         }
     };
-    return (React.createElement("div", { className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
-        dragContent ? children : React.createElement("div", { className: 'iui-content' }, children),
-        dragContent && React.createElement("div", { className: 'iui-content' }, dragContent)));
+    return (React.createElement(Box, { className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
+        dragContent ? children : React.createElement(Box, { className: 'iui-content' }, children),
+        dragContent && React.createElement(Box, { className: 'iui-content' }, dragContent)));
 });
 export default FileUpload;

package/esm/core/FileUpload/FileUploadCard.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/file-upload.css';
-export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileUploadCardDescriptionProps = React.ComponentPropsWithRef<'span'>;
-export declare type FileUploadCardActionProps = React.ComponentPropsWithRef<'div'>;
-export declare type FileUploadCardInputLabelProps = React.ComponentPropsWithRef<'label'>;
-export declare type FileUploadCardInputProps = React.ComponentPropsWithRef<'input'>;
-export declare type FileUploadCardProps = {
+declare type FileUploadCardProps = {
     /**
      * Files to pass (only needed when passing a custom action)
      */
@@ -27,7 +21,7 @@ export declare type FileUploadCardProps = {
      * @default <FileUploadCard.Input />
      */
     input?: React.ReactNode;
-} & React.ComponentPropsWithoutRef<'div'>;
+};
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
  * @example
@@ -52,48 +46,14 @@ export declare type FileUploadCardProps = {
  *   </FileUploadCard.Action>
  * </FileUploadCard>
  */
-export declare const FileUploadCard: React.ForwardRefExoticComponent<{
-    /**
-     * Files to pass (only needed when passing a custom action)
-     */
-    files?: File[] | undefined;
-    /**
-     * Callback fired when files has changed (only needed passing custom action)
-     */
-    onFilesChange?: ((files: File[]) => void) | undefined;
-    /**
-     * Node that is shown when there is no file uploaded
-     * Either pass `FileEmptyCard` (for default state) or a different component to show
-     * @default <FileEmptyCard />
-     */
-    emptyCard?: React.ReactNode;
-    /**
-     * Input node
-     * @default <FileUploadCard.Input />
-     */
-    input?: React.ReactNode;
-} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>> & {
-    Icon: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
-    Info: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
-    Title: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
-    Description: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
-    Action: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-    }, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
-    InputLabel: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "key" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | React.RefObject<HTMLLabelElement> | null | undefined;
-    }, "key" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & React.RefAttributes<HTMLLabelElement>>;
-    Input: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-    }, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const FileUploadCard: PolymorphicForwardRefComponent<"div", FileUploadCardProps> & {
+    Icon: PolymorphicForwardRefComponent<"span", {}>;
+    Info: PolymorphicForwardRefComponent<"span", {}>;
+    Title: PolymorphicForwardRefComponent<"span", {}>;
+    Description: PolymorphicForwardRefComponent<"span", {}>;
+    Action: PolymorphicForwardRefComponent<"div", {}>;
+    InputLabel: PolymorphicForwardRefComponent<"label", {}>;
+    Input: PolymorphicForwardRefComponent<"input", {}>;
 };
 export default FileUploadCard;
 export declare const FileUploadCardContext: React.Context<{

package/esm/core/FileUpload/FileUploadCard.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, VisuallyHidden, } from '../utils/index.js';
+import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, polymorphic, Box, VisuallyHidden, } from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
@@ -20,23 +20,27 @@ const toDate = (dateNumber) => {
     const date = new Date(dateNumber);
     return date.toDateString() + ' ' + date.toLocaleTimeString();
 };
-const FileUploadCardIcon = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("span", { className: cx('iui-file-card-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgDocument, null)));
+// ----------------------------------------------------------------------------
+// FileUploadCard.Icon component
+const FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
+    children: React.createElement(SvgDocument, null),
 });
 FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
-const FileUploadCardInfo = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("span", { className: cx('iui-file-card-text', className), ref: ref, ...rest }, children));
-});
+// ----------------------------------------------------------------------------
+// FileUploadCard.Info component
+const FileUploadCardInfo = polymorphic.span('iui-file-card-text');
 FileUploadCardInfo.displayName = 'FileUploadCard.Info';
+// ----------------------------------------------------------------------------
+// FileUploadCard.Title component
 const FileUploadCardTitle = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = useSafeContext(FileUploadCardContext);
     const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
-    return (React.createElement("span", { className: cx('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
 });
 FileUploadCardTitle.displayName = 'FileUploadCard.Title';
+// ----------------------------------------------------------------------------
+// FileUploadCard.Description component
 const FileUploadCardDescription = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = useSafeContext(FileUploadCardContext);
@@ -46,20 +50,23 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     if (files.length > 2) {
         description += ', and ' + (files.length - 2) + ' others';
     }
-    return (React.createElement("span", { className: cx('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
-const FileUploadCardAction = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("div", { className: cx('iui-file-card-action', className), ref: ref, ...rest }, children));
-});
+// ----------------------------------------------------------------------------
+// FileUploadCard.Action component
+const FileUploadCardAction = polymorphic.div('iui-file-card-action');
 FileUploadCardAction.displayName = 'FileUploadCard.Action';
+// ----------------------------------------------------------------------------
+// FileUploadCard.InputLabel component
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
     const { children, ...rest } = props;
     const { inputId } = useSafeContext(FileUploadCardContext);
     return (React.createElement(Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
 });
 FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
+// ----------------------------------------------------------------------------
+// FileUploadCard.Input component
 const FileUploadCardInput = React.forwardRef((props, ref) => {
     const { children, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
@@ -88,6 +95,28 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         children));
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';
+const FileUploadCardComponent = React.forwardRef((props, ref) => {
+    var _a;
+    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
+    const [internalFiles, setInternalFiles] = React.useState();
+    const uid = useId();
+    const [inputId, setInputId] = React.useState(uid);
+    const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
+    return (React.createElement(FileUploadCardContext.Provider, { value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId,
+        } },
+        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+            React.createElement(FileUploadCard.Icon, null),
+            React.createElement(FileUploadCard.Info, null,
+                React.createElement(FileUploadCard.Title, null),
+                React.createElement(FileUploadCard.Description, null)),
+            React.createElement(FileUploadCard.Action, null,
+                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(FileUploadCard.Input, null)));
+});
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
  * @example
@@ -112,28 +141,7 @@ FileUploadCardInput.displayName = 'FileUploadCard.Input';
  *   </FileUploadCard.Action>
  * </FileUploadCard>
  */
-export const FileUploadCard = Object.assign(React.forwardRef((props, ref) => {
-    var _a;
-    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
-    const [internalFiles, setInternalFiles] = React.useState();
-    const uid = useId();
-    const [inputId, setInputId] = React.useState(uid);
-    const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
-    return (React.createElement(FileUploadCardContext.Provider, { value: {
-            files,
-            onFilesChange,
-            setInternalFiles,
-            inputId,
-            setInputId,
-        } },
-        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement("div", { className: cx('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
-            React.createElement(FileUploadCard.Icon, null),
-            React.createElement(FileUploadCard.Info, null,
-                React.createElement(FileUploadCard.Title, null),
-                React.createElement(FileUploadCard.Description, null)),
-            React.createElement(FileUploadCard.Action, null,
-                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(FileUploadCard.Input, null)));
-}), {
+export const FileUploadCard = Object.assign(FileUploadCardComponent, {
     Icon: FileUploadCardIcon,
     Info: FileUploadCardInfo,
     Title: FileUploadCardTitle,

package/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/file-upload.css';
-export declare type FileUploadTemplateProps = {
+declare type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.
      */
@@ -30,12 +31,12 @@ export declare type FileUploadTemplateProps = {
      * Optional children appended to the template.
      */
     children?: React.ReactNode;
-} & React.ComponentProps<'div'>;
+};
 /**
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
  * @example
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
-export declare const FileUploadTemplate: (props: FileUploadTemplateProps) => JSX.Element;
+export declare const FileUploadTemplate: PolymorphicForwardRefComponent<"div", FileUploadTemplateProps>;
 export default FileUploadTemplate;

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, SvgUpload } from '../utils/index.js';
+import { SvgUpload, Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/file-upload.css';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
 /**
@@ -13,16 +13,15 @@ import { Anchor } from '../Typography/Anchor/Anchor.js';
  * @example
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
-export const FileUploadTemplate = (props) => {
+export const FileUploadTemplate = React.forwardRef((props, ref) => {
     const { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-file-upload-template', className), ...rest },
+    return (React.createElement(Box, { className: cx('iui-file-upload-template', className), ref: ref, ...rest },
         React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
-        React.createElement("div", { className: 'iui-template-text' },
+        React.createElement(Box, { className: 'iui-template-text' },
             React.createElement(Anchor, { as: 'label' },
-                React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
+                React.createElement(Box, { as: 'input', className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
                 label),
             React.createElement("div", null, subtitle),
             children)));
-};
+});
 export default FileUploadTemplate;

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

@@ -1,10 +1,6 @@
 export { FileUpload } from './FileUpload.js';
-export type { FileUploadProps } from './FileUpload.js';
 declare const _default: "./FileUpload";
 export default _default;
 export { FileUploadTemplate } from './FileUploadTemplate.js';
-export type { FileUploadTemplateProps } from './FileUploadTemplate.js';
 export { FileUploadCard } from './FileUploadCard.js';
-export type { FileUploadCardProps, FileUploadCardIconProps, FileUploadCardInfoProps, FileUploadCardTitleProps, FileUploadCardDescriptionProps, FileUploadCardActionProps, FileUploadCardInputLabelProps, FileUploadCardInputProps, } from './FileUploadCard.js';
 export { FileEmptyCard } from './FileEmptyCard.js';
-export type { FileEmptyCardProps, FileEmptyCardIconProps, FileEmptyCardTextProps, } from './FileEmptyCard.js';

package/esm/core/Footer/Footer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StylingProps } from '../utils/index.js';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/footer.css';
 export declare type TitleTranslations = {
     termsOfService: string;
@@ -8,7 +8,7 @@ export declare type TitleTranslations = {
     cookies: string;
     legalNotices: string;
 };
-export declare type FooterProps = {
+declare type FooterProps = {
     /**
      * Customize footer elements.
      * Providing a `FooterElement[]` will append the custom elements to the end of the default elements.
@@ -24,7 +24,7 @@ export declare type FooterProps = {
      * Use `defaultFooterElements` to get the default footer elements.
      */
     children?: React.ReactNode;
-} & StylingProps;
+} & CommonProps;
 export declare type FooterElement = {
     /**
      * Title of the footer element.
@@ -54,12 +54,8 @@ export declare const defaultFooterElements: FooterElement[];
  * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export declare const Footer: ((props: FooterProps) => JSX.Element) & {
-    List: (props: Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
-        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
-    }) => JSX.Element;
-    Item: (props: Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
-        ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-    }) => JSX.Element;
-    Separator: (props: import("./FooterSeparator.js").FooterSeparatorProps) => JSX.Element;
+    List: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
+    Item: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+    Separator: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
 };
 export default Footer;

package/esm/core/Footer/Footer.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import '@itwin/itwinui-css/css/footer.css';
 import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
@@ -62,7 +62,6 @@ export const defaultFooterElements = [
  */
 export const Footer = Object.assign((props) => {
     const { children, customElements, translatedTitles, className, ...rest } = props;
-    useTheme();
     const titles = { ...footerTranslations, ...translatedTitles };
     const translatedElements = defaultFooterElements.map((element) => {
         if (element.key && titles.hasOwnProperty(element.key)) {
@@ -81,7 +80,7 @@ export const Footer = Object.assign((props) => {
                 ? customElements(translatedElements)
                 : [...translatedElements, ...customElements];
     }
-    return (React.createElement("footer", { className: cx('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList, null, elements.map((element, index) => {
+    return (React.createElement(Box, { as: 'footer', className: cx('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList, null, elements.map((element, index) => {
         return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
             index > 0 && React.createElement(FooterSeparator, null),
             React.createElement(FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));

package/esm/core/Footer/FooterItem.d.ts

@@ -1,8 +1,6 @@
-import * as React from 'react';
 import '@itwin/itwinui-css/css/footer.css';
-export declare type FooterItemProps = React.ComponentPropsWithRef<'li'>;
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */
-export declare const FooterItem: (props: FooterItemProps) => JSX.Element;
+export declare const FooterItem: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
 export default FooterItem;