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

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

@@ -1,13 +1,6 @@
 import * as React from 'react';
-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 = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type FileUploadCardProps = {
     /**
      * Files to pass (only needed when passing a custom action)
      */
@@ -27,7 +20,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 +45,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/cjs/core/FileUpload/FileUploadCard.js

@@ -36,7 +36,6 @@ const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
 const FileEmptyCard_js_1 = require("./FileEmptyCard.js");
 const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
-require("@itwin/itwinui-css/css/file-upload.css");
 const toBytes = (bytes) => {
     const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
     let i = 0;
@@ -49,23 +48,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: (0, classnames_1.default)('iui-file-card-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgDocument, null)));
+// ----------------------------------------------------------------------------
+// FileUploadCard.Icon component
+const FileUploadCardIcon = index_js_1.polymorphic.span('iui-file-card-icon', {
+    children: React.createElement(index_js_1.SvgDocument, null),
 });
 FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
-const FileUploadCardInfo = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-file-card-text', className), ref: ref, ...rest }, children));
-});
+// ----------------------------------------------------------------------------
+// FileUploadCard.Info component
+const FileUploadCardInfo = index_js_1.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 } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
     const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('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 } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
@@ -75,20 +78,23 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     if (files.length > 2) {
         description += ', and ' + (files.length - 2) + ' others';
     }
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('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: (0, classnames_1.default)('iui-file-card-action', className), ref: ref, ...rest }, children));
-});
+// ----------------------------------------------------------------------------
+// FileUploadCard.Action component
+const FileUploadCardAction = index_js_1.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 } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
     return (React.createElement(Anchor_js_1.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 } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
@@ -117,6 +123,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_js_1.FileEmptyCard, null), input, ...rest } = props;
+    const [internalFiles, setInternalFiles] = React.useState();
+    const uid = (0, index_js_1.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(exports.FileUploadCardContext.Provider, { value: {
+            files,
+            onFilesChange,
+            setInternalFiles,
+            inputId,
+            setInputId,
+        } },
+        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+            React.createElement(exports.FileUploadCard.Icon, null),
+            React.createElement(exports.FileUploadCard.Info, null,
+                React.createElement(exports.FileUploadCard.Title, null),
+                React.createElement(exports.FileUploadCard.Description, null)),
+            React.createElement(exports.FileUploadCard.Action, null,
+                React.createElement(exports.FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(exports.FileUploadCard.Input, null)));
+});
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.
  * @example
@@ -141,28 +169,7 @@ FileUploadCardInput.displayName = 'FileUploadCard.Input';
  *   </FileUploadCard.Action>
  * </FileUploadCard>
  */
-exports.FileUploadCard = Object.assign(React.forwardRef((props, ref) => {
-    var _a;
-    const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard_js_1.FileEmptyCard, null), input, ...rest } = props;
-    const [internalFiles, setInternalFiles] = React.useState();
-    const uid = (0, index_js_1.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(exports.FileUploadCardContext.Provider, { value: {
-            files,
-            onFilesChange,
-            setInternalFiles,
-            inputId,
-            setInputId,
-        } },
-        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement("div", { className: (0, classnames_1.default)('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
-            React.createElement(exports.FileUploadCard.Icon, null),
-            React.createElement(exports.FileUploadCard.Info, null,
-                React.createElement(exports.FileUploadCard.Title, null),
-                React.createElement(exports.FileUploadCard.Description, null)),
-            React.createElement(exports.FileUploadCard.Action, null,
-                React.createElement(exports.FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(exports.FileUploadCard.Input, null)));
-}), {
+exports.FileUploadCard = Object.assign(FileUploadCardComponent, {
     Icon: FileUploadCardIcon,
     Info: FileUploadCardInfo,
     Title: FileUploadCardTitle,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/file-upload.css';
-export declare type FileUploadTemplateProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.
      */
@@ -30,12 +30,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/cjs/core/FileUpload/FileUploadTemplate.js

@@ -34,7 +34,6 @@ exports.FileUploadTemplate = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/file-upload.css");
 const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
 /**
  * Default template to be used with the `FileUpload` wrapper component.
@@ -42,17 +41,15 @@ const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
  * @example
  * <FileUploadTemplate onChange={(e) => console.log(e.target.files)} />
  */
-const FileUploadTemplate = (props) => {
+exports.FileUploadTemplate = React.forwardRef((props, ref) => {
     const { onChange, acceptMultiple = true, acceptType, label = 'Choose a file', subtitle = 'or drag & drop it here.', children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-file-upload-template', className), ...rest },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload-template', className), ref: ref, ...rest },
         React.createElement(index_js_1.SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
-        React.createElement("div", { className: 'iui-template-text' },
+        React.createElement(index_js_1.Box, { className: 'iui-template-text' },
             React.createElement(Anchor_js_1.Anchor, { as: 'label' },
-                React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
+                React.createElement(index_js_1.Box, { as: 'input', className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
                 label),
             React.createElement("div", null, subtitle),
             children)));
-};
-exports.FileUploadTemplate = FileUploadTemplate;
+});
 exports.default = exports.FileUploadTemplate;

package/cjs/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/cjs/core/Footer/Footer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import type { StylingProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
+import type { CommonProps } from '../utils/index.js';
 export declare type TitleTranslations = {
     termsOfService: string;
     privacy: string;
@@ -8,7 +7,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 +23,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 +53,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/cjs/core/Footer/Footer.js

@@ -34,7 +34,6 @@ exports.Footer = exports.defaultFooterElements = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/footer.css");
 const FooterItem_js_1 = require("./FooterItem.js");
 const FooterSeparator_js_1 = require("./FooterSeparator.js");
 const FooterList_js_1 = require("./FooterList.js");
@@ -91,7 +90,6 @@ exports.defaultFooterElements = [
  */
 exports.Footer = Object.assign((props) => {
     const { children, customElements, translatedTitles, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const titles = { ...footerTranslations, ...translatedTitles };
     const translatedElements = exports.defaultFooterElements.map((element) => {
         if (element.key && titles.hasOwnProperty(element.key)) {
@@ -110,7 +108,7 @@ exports.Footer = Object.assign((props) => {
                 ? customElements(translatedElements)
                 : [...translatedElements, ...customElements];
     }
-    return (React.createElement("footer", { className: (0, classnames_1.default)('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList_js_1.FooterList, null, elements.map((element, index) => {
+    return (React.createElement(index_js_1.Box, { as: 'footer', className: (0, classnames_1.default)('iui-legal-footer', className), ...rest }, children ? (children) : (React.createElement(FooterList_js_1.FooterList, null, elements.map((element, index) => {
         return (React.createElement(React.Fragment, { key: element.key || `${element.title}-${index}` },
             index > 0 && React.createElement(FooterSeparator_js_1.FooterSeparator, null),
             React.createElement(FooterItem_js_1.FooterItem, null, element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title))));

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

@@ -1,8 +1,5 @@
-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;

package/cjs/core/Footer/FooterItem.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.FooterItem = 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 index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */
-const FooterItem = (props) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("li", { className: (0, classnames_1.default)('iui-legal-footer-item', className), ...rest }, children));
-};
-exports.FooterItem = FooterItem;
+exports.FooterItem = index_js_1.polymorphic.li('iui-legal-footer-item');
 exports.default = exports.FooterItem;

package/cjs/core/Footer/FooterList.d.ts

@@ -1,8 +1,5 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/footer.css';
-export declare type FooterListProps = React.ComponentPropsWithRef<'ul'>;
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */
-export declare const FooterList: (props: FooterListProps) => JSX.Element;
+export declare const FooterList: import("../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>;
 export default FooterList;

package/cjs/core/Footer/FooterList.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.FooterList = 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 index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */
-const FooterList = (props) => {
-    const { className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("ul", { className: (0, classnames_1.default)('iui-legal-footer-list', className), ...rest }, children));
-};
-exports.FooterList = FooterList;
+exports.FooterList = index_js_1.polymorphic.ul('iui-legal-footer-list');
 exports.default = exports.FooterList;

package/cjs/core/Footer/FooterSeparator.d.ts

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

package/cjs/core/Footer/FooterSeparator.js

@@ -1,47 +1,15 @@
 "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.FooterSeparator = 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 index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */
-const FooterSeparator = (props) => {
-    const { className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("li", { className: (0, classnames_1.default)('iui-legal-footer-separator', className), "aria-hidden": true, ...rest }));
-};
-exports.FooterSeparator = FooterSeparator;
+exports.FooterSeparator = index_js_1.polymorphic.li('iui-legal-footer-separator', {
+    'aria-hidden': true,
+});
 exports.default = exports.FooterSeparator;

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

@@ -1,4 +1,4 @@
 export { Footer, defaultFooterElements } from './Footer.js';
-export type { FooterElement, FooterProps, TitleTranslations, } from './Footer.js';
+export type { FooterElement, TitleTranslations } from './Footer.js';
 declare const _default: "./Footer";
 export default _default;

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

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
-export declare type HeaderTranslations = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.
      */
     moreOptions: string;
 };
-export declare type HeaderProps = {
+declare type HeaderProps = {
     /**
      * Application logo.
      * (expects `HeaderLogo`)
@@ -83,7 +82,7 @@ export declare type HeaderProps = {
      * Provide localized strings.
      */
     translatedStrings?: HeaderTranslations;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Application header
  * @example
@@ -111,5 +110,5 @@ export declare type HeaderProps = {
  *  isSlim
  * />
  */
-export declare const Header: (props: HeaderProps) => JSX.Element;
+export declare const Header: PolymorphicForwardRefComponent<"header", HeaderProps>;
 export default Header;

package/cjs/core/Header/Header.js

@@ -35,7 +35,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/header.css");
 const index_js_3 = require("../DropdownMenu/index.js");
 const defaultTranslations = {
     moreOptions: 'More options',
@@ -67,22 +66,20 @@ const defaultTranslations = {
  *  isSlim
  * />
  */
-const Header = (props) => {
+exports.Header = React.forwardRef((props, forwardedRef) => {
     const { appLogo, breadcrumbs, isSlim = false, actions, userIcon, menuItems, translatedStrings, className, children, ...rest } = props;
-    (0, index_js_2.useTheme)();
     const headerTranslations = { ...defaultTranslations, ...translatedStrings };
-    return (React.createElement("header", { className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ...rest },
-        React.createElement("div", { className: 'iui-page-header-left' },
+    return (React.createElement(index_js_2.Box, { as: 'header', className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
+        React.createElement(index_js_2.Box, { className: 'iui-page-header-left' },
             appLogo,
-            breadcrumbs && React.createElement("div", { className: 'iui-page-header-divider' }),
+            breadcrumbs && React.createElement(index_js_2.Box, { className: 'iui-page-header-divider' }),
             breadcrumbs),
-        children && React.createElement("div", { className: 'iui-page-header-center' }, children),
-        React.createElement("div", { className: 'iui-page-header-right' },
+        children && React.createElement(index_js_2.Box, { className: 'iui-page-header-center' }, children),
+        React.createElement(index_js_2.Box, { className: 'iui-page-header-right' },
             actions,
             userIcon,
             menuItems && (React.createElement(index_js_3.DropdownMenu, { menuItems: menuItems },
                 React.createElement(index_js_1.IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
                     React.createElement(index_js_2.SvgMoreVertical, { "aria-hidden": true })))))));
-};
-exports.Header = Header;
+});
 exports.default = exports.Header;

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

@@ -1,6 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/index.js';
-export declare type HeaderBasicButtonProps = ButtonProps;
-declare type HeaderBasicButtonComponent = PolymorphicForwardRefComponent<'button', HeaderBasicButtonProps>;
-export declare const HeaderBasicButton: HeaderBasicButtonComponent;
+import type { ButtonProps } from '../Buttons/Button/Button.js';
+export declare const HeaderBasicButton: PolymorphicForwardRefComponent<"button", ButtonProps>;
 export default HeaderBasicButton;