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

package/cjs/core/Dialog/DialogButtonBar.js

@@ -6,7 +6,6 @@ exports.DialogButtonBar = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogContent.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogContent.js

@@ -6,7 +6,6 @@ exports.DialogContent = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogContext.d.ts

@@ -61,10 +61,25 @@ export declare type DialogContextProps = {
      * @default 'viewport'
      */
     relativeTo?: 'container' | 'viewport';
+    /**
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     * Recommended to set to true when for modal dialogs that use `relativeTo='viewport'`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default false
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Dialog root ref. For internal use.
      */
     dialogRootRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Determines the positioning of Dialog on page.
+     */
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 export declare const DialogContext: React.Context<DialogContextProps | undefined>;
 export declare const useDialogContext: () => DialogContextProps;

package/cjs/core/Dialog/DialogMain.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
     /**

package/cjs/core/Dialog/DialogMain.js

@@ -34,7 +34,6 @@ exports.DialogMain = 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/dialog.css");
 const DialogContext_js_1 = require("./DialogContext.js");
 const react_transition_group_1 = require("react-transition-group");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");
@@ -61,7 +60,7 @@ const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDr
  */
 exports.DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, ...rest } = props;
+    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
@@ -75,8 +74,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     }, [isOpen]);
     // Prevents document from scrolling when the dialog is open.
     React.useEffect(() => {
-        var _a;
-        const ownerDocument = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument;
+        const ownerDocument = dialogRef.current?.ownerDocument;
         // If there is no `ownerDocument` or `preventDocumentScroll` is false or
         // document body originally has `overflow: hidden` (possibly from other/parent dialog), then do nothing.
         if (!ownerDocument ||
@@ -103,7 +101,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
         if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
             onClose(event);
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
     };
     const { onPointerDown, transform } = (0, useDragAndDrop_js_1.default)(dialogRef, dialogContext.dialogRootRef, isDraggable);
     const handlePointerDown = React.useCallback((event) => {
@@ -113,23 +111,19 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
     (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        var _a;
         if (!isDraggable || !isOpen) {
             return;
         }
-        const rect = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const rect = dialogRef.current?.getBoundingClientRect();
         const [translateX, translateY] = (0, index_js_1.getTranslateValues)(dialogRef.current);
-        setStyle((oldStyle) => {
-            var _a, _b;
-            return ({
-                ...oldStyle,
-                width: rect === null || rect === void 0 ? void 0 : rect.width,
-                height: rect === null || rect === void 0 ? void 0 : rect.height,
-                left: (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft,
-                top: (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop,
-                transform: `translate(${translateX}px,${translateY}px)`,
-            });
-        });
+        setStyle((oldStyle) => ({
+            ...oldStyle,
+            width: rect?.width,
+            height: rect?.height,
+            left: dialogRef.current?.offsetLeft,
+            top: dialogRef.current?.offsetTop,
+            transform: `translate(${translateX}px,${translateY}px)`,
+        }));
     }, [isDraggable, isOpen]);
     const setResizeStyle = React.useCallback((newStyle) => {
         setStyle((oldStyle) => ({
@@ -142,7 +136,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
             overflow: 'unset',
             ...style,
@@ -161,15 +155,14 @@ exports.DialogMain = React.forwardRef((props, ref) => {
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
-            var _a, _b;
-            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
-            setFocus && ((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true }));
+            previousFocusedElement.current = dialogRef.current?.ownerDocument
+                .activeElement;
+            setFocus && dialogRef.current?.focus({ preventScroll: true });
         }, 
         // Brings back focus to the previously focused element when closed
         onExit: () => {
-            var _a, _b, _c;
-            if ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement)) {
-                (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+            if (dialogRef.current?.contains(dialogRef.current?.ownerDocument.activeElement)) {
+                previousFocusedElement.current?.focus();
             }
         }, unmountOnExit: true, nodeRef: dialogRef },
         React.createElement(DialogDragContext_js_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 declare type DialogTitleBarProps = {
     /**

package/cjs/core/Dialog/DialogTitleBar.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Buttons/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogContext_js_1 = require("./DialogContext.js");
 const DialogTitleBarTitle_js_1 = require("./DialogTitleBarTitle.js");
 const DialogDragContext_js_1 = require("./DialogDragContext.js");

package/cjs/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -6,7 +6,6 @@ exports.DialogTitleBarTitle = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -52,29 +52,27 @@ const index_js_2 = require("../Menu/index.js");
  */
 const DropdownMenu = (props) => {
     const { menuItems, children, className, style, role = 'menu', visible, placement = 'bottom-start', onShow, onHide, trigger, id, ...rest } = props;
-    const [isVisible, setIsVisible] = React.useState(visible !== null && visible !== void 0 ? visible : false);
+    const [isVisible, setIsVisible] = React.useState(visible ?? false);
     React.useEffect(() => {
-        setIsVisible(visible !== null && visible !== void 0 ? visible : false);
+        setIsVisible(visible ?? false);
     }, [visible]);
     const open = React.useCallback(() => setIsVisible(true), []);
     const close = React.useCallback(() => setIsVisible(false), []);
     const targetRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
         setIsVisible(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+        onShow?.(instance);
     }, [onShow]);
     const onHideHandler = React.useCallback((instance) => {
-        var _a;
         setIsVisible(false);
-        (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+        targetRef.current?.focus();
+        onHide?.(instance);
     }, [onHide]);
     return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
         onClick: (args) => {
-            var _a, _b;
             trigger === undefined && (isVisible ? close() : open());
-            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+            children.props.onClick?.(args);
         },
     })));
 };

package/cjs/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
 declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.
@@ -44,6 +43,11 @@ declare type ExpandableBlockProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
+    /**
+     * Disables ExpandableBlock.
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * Container that allows content to be hidden behind a brief title and a caption.

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -34,7 +34,6 @@ exports.ExpandableBlock = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/expandable-block.css");
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -45,18 +44,21 @@ require("@itwin/itwinui-css/css/expandable-block.css");
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
 exports.ExpandableBlock = React.forwardRef((props, ref) => {
-    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', ...rest } = props;
-    const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && index_js_1.StatusIconMap[status]());
+    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
+    const icon = endIcon ?? (status && index_js_1.StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         setExpanded(isExpanded);
     }, [isExpanded]);
     const handleToggle = () => {
+        if (disabled) {
+            return;
+        }
         setExpanded(!expanded);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
+        onToggle?.(!expanded);
     };
     const onKeyDown = (event) => {
-        if (event.altKey) {
+        if (event.altKey || disabled) {
             return;
         }
         if (event.key === 'Enter' ||
@@ -71,7 +73,7 @@ exports.ExpandableBlock = React.forwardRef((props, ref) => {
             'iui-small': size === 'small',
             'iui-borderless': styleType === 'borderless',
         }, className), style: style, ref: ref, ...rest },
-        React.createElement(index_js_1.Box, { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
+        React.createElement(index_js_1.Box, { role: 'button', "aria-expanded": expanded, className: 'iui-header', "aria-disabled": disabled, tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(index_js_1.SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
             React.createElement(index_js_1.Box, { as: 'span', className: 'iui-expandable-block-label' },
                 React.createElement(index_js_1.Box, { className: 'iui-title' }, title),

package/cjs/core/Fieldset/Fieldset.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/fieldset.css';
 declare type FieldsetProps = {
     /**
      * The caption or title for the fieldset.

package/cjs/core/Fieldset/Fieldset.js

@@ -34,7 +34,6 @@ exports.Fieldset = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/fieldset.css");
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -47,7 +47,7 @@ const FileEmptyCardText = index_js_1.polymorphic.span('iui-file-card-empty-actio
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(exports.FileEmptyCard.Icon, null),
         React.createElement(exports.FileEmptyCard.Text, null,
             React.createElement(FileUploadCard_js_1.default.InputLabel, null, "Choose a file"),

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.

package/cjs/core/FileUpload/FileUpload.js

@@ -34,7 +34,6 @@ exports.FileUpload = 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");
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -52,31 +51,28 @@ exports.FileUpload = React.forwardRef((props, ref) => {
         e.stopPropagation();
     };
     const onDragEnterHandler = (e) => {
-        var _a, _b, _c;
         e.preventDefault();
         e.stopPropagation();
         // only set active if a file is dragged over
-        if (!isDragActive && ((_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.kind) === 'file') {
+        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
             setIsDragActive(true);
         }
     };
     const onDragLeaveHandler = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         // only set inactive if secondary target is outside the component
         if (isDragActive &&
-            !((_a = fileUploadRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            !fileUploadRef.current?.contains(e.relatedTarget)) {
             setIsDragActive(false);
         }
     };
     const onDropHandler = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         if (isDragActive) {
             setIsDragActive(false);
-            onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
+            onFileDropped(e.dataTransfer?.files);
         }
     };
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadCardProps = {
     /**
      * Files to pass (only needed when passing a custom action)

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;
@@ -65,7 +64,7 @@ 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(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));
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-file-card-title', className), ref: ref, ...rest }, children ?? title));
 });
 FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 // ----------------------------------------------------------------------------
@@ -79,7 +78,7 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     if (files.length > 2) {
         description += ', and ' + (files.length - 2) + ' others';
     }
-    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));
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-file-card-description', className), ref: ref, ...rest }, children ?? description));
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 // ----------------------------------------------------------------------------
@@ -100,8 +99,7 @@ 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);
     const setNativeFilesRef = React.useCallback((node) => {
-        var _a;
-        if (!node || !((_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.DataTransfer)) {
+        if (!node || !(0, index_js_1.getWindow)()?.DataTransfer) {
             return;
         }
         const dataTransfer = new DataTransfer();
@@ -116,21 +114,20 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         }
     }, [id, inputId, setInputId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.VisuallyHidden, { as: 'input', type: 'file', onChange: (0, index_js_1.mergeEventHandlers)(onChange, (e) => {
+        React.createElement(index_js_1.VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: (0, index_js_1.mergeEventHandlers)(onChange, (e) => {
                 const _files = Array.from(e.currentTarget.files || []);
-                onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
+                onFilesChange?.(_files);
                 setInternalFiles(_files);
-            }), ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
+            }), ref: refs, id: id ?? inputId, ...rest }),
         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 : [];
+    const files = filesProp ?? internalFiles ?? [];
     return (React.createElement(exports.FileUploadCardContext.Provider, { value: {
             files,
             onFilesChange,
@@ -138,13 +135,14 @@ const FileUploadCardComponent = React.forwardRef((props, ref) => {
             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,
+        files?.length ? (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card', className), ref: ref, ...rest }, 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)));
+                React.createElement(exports.FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard),
+        input ?? React.createElement(exports.FileUploadCard.Input, null)));
 });
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.

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.

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 export declare type TitleTranslations = {
     termsOfService: string;
     privacy: string;

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");

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/cjs/core/Footer/FooterItem.js

@@ -6,7 +6,6 @@ exports.FooterItem = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/cjs/core/Footer/FooterList.js

@@ -6,7 +6,6 @@ exports.FooterList = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */

package/cjs/core/Footer/FooterSeparator.js

@@ -6,7 +6,6 @@ exports.FooterSeparator = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.

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',

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 declare type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -34,7 +34,6 @@ exports.HeaderBreadcrumbs = 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/header.css");
 /**
  * Header breadcrumbs, adds chevron between each provided items.
  * @example

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Buttons/Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
 declare type HeaderButtonProps = {
     /**

package/cjs/core/Header/HeaderButton.js

@@ -30,7 +30,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderButton = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/header.css");
 const HeaderSplitButton_js_1 = require("./HeaderSplitButton.js");
 const HeaderDropdownButton_js_1 = require("./HeaderDropdownButton.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/header.css';
 declare type HeaderLogoOwnProps = {
     /**
      * Logo shown before the main content.

package/cjs/core/Header/HeaderLogo.js

@@ -34,7 +34,6 @@ exports.HeaderLogo = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/header.css");
 /**
  * Header Title section
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/information-panel.css';
 declare type InformationPanelProps = {
     /**
      * Is the panel open?