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

package/cjs/core/InformationPanel/InformationPanel.js

@@ -34,7 +34,6 @@ exports.InformationPanel = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -70,10 +69,7 @@ exports.InformationPanel = React.forwardRef((props, ref) => {
         e.preventDefault();
         e.stopPropagation();
         infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
-        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => {
-            var _a;
-            return (_a = infoPanelRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.removeEventListener('pointermove', onResize);
-        }, { once: true });
+        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => infoPanelRef.current?.ownerDocument.removeEventListener('pointermove', onResize), { once: true });
     };
     const onResize = React.useCallback((e) => {
         e.preventDefault();

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/cjs/core/InformationPanel/InformationPanelBody.js

@@ -6,7 +6,6 @@ exports.InformationPanelBody = 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/information-panel.css");
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/cjs/core/InformationPanel/InformationPanelContent.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 InformationPanelContentProps = {
     /**
      * If set to 'inline', the label/input pairs will be shown on the same line.

package/cjs/core/InformationPanel/InformationPanelContent.js

@@ -34,7 +34,6 @@ exports.InformationPanelContent = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * The `InformationPanelContent` component should be used inside `InformationPanelBody`
  * to style rows of key/value pairs, where the key is ideally represented by a `Label` component

package/cjs/core/InformationPanel/InformationPanelHeader.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 InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../Buttons/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *

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

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

package/cjs/core/InformationPanel/InformationPanelWrapper.js

@@ -6,7 +6,6 @@ exports.InformationPanelWrapper = 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/information-panel.css");
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type InputProps = {
     /**
      * Set focus on input element.

package/cjs/core/Input/Input.js

@@ -34,7 +34,6 @@ exports.Input = 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/input.css");
 /**
  * Basic input component
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type InputGroupProps = {
     /**
      * Label of the group.

package/cjs/core/InputGroup/InputGroup.js

@@ -30,7 +30,6 @@ exports.InputGroup = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * Group Checkbox/Radio components together
  * @example

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

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type LabelOwnProps = {
     /**
      * Set the display style of the label.

package/cjs/core/Label/Label.js

@@ -34,7 +34,6 @@ exports.Label = 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/utils.css");
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { InputProps } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledInputProps = {
     /**
      * Label of the input.

package/cjs/core/LabeledInput/LabeledInput.js

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

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

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

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -31,7 +31,6 @@ exports.LabeledSelect = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../Select/index.js");
 const index_js_2 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Labeled select component to select value from options.
  * @example

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TextareaProps } from '../Textarea/Textarea.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
-import '@itwin/itwinui-css/css/input.css';
 declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -31,7 +31,6 @@ exports.LabeledTextarea = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Textarea/index.js");
-require("@itwin/itwinui-css/css/input.css");
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -56,7 +55,7 @@ require("@itwin/itwinui-css/css/input.css");
 exports.LabeledTextarea = React.forwardRef((props, ref) => {
     const uid = (0, index_js_1.useId)();
     const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, id = uid, ...textareaProps } = props;
-    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && index_js_1.StatusIconMap[status]());
+    const icon = svgIcon ?? (status && index_js_1.StatusIconMap[status]());
     return (React.createElement(index_js_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(index_js_2.Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));
 });

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

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

package/cjs/core/List/List.js

@@ -6,6 +6,5 @@ exports.List = 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/menu.css");
 exports.List = index_js_1.polymorphic.ul('iui-list', { role: 'list' });
 exports.List.displayName = 'List';

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 export declare type ListItemOwnProps = {
     /**
      * Size of the ListItem. Can be explicitly specified to be 'large',

package/cjs/core/List/ListItem.js

@@ -34,7 +34,6 @@ exports.ListItem = 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/menu.css");
 const ListItemComponent = React.forwardRef((props, ref) => {
     const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
     return (React.createElement(index_js_1.Box, { as: 'li', className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));

package/cjs/core/Menu/Menu.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 declare type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.

package/cjs/core/Menu/Menu.js

@@ -34,7 +34,6 @@ exports.Menu = 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/menu.css");
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
@@ -49,10 +48,9 @@ exports.Menu = React.forwardRef((props, ref) => {
         return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
     }, []);
     React.useEffect(() => {
-        var _a;
         const items = getFocusableNodes();
         if (focusedIndex != null) {
-            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            items?.[focusedIndex]?.focus();
             return;
         }
         const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
@@ -65,10 +63,10 @@ exports.Menu = React.forwardRef((props, ref) => {
             return;
         }
         const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        if (!items?.length) {
             return;
         }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        const currentIndex = focusedIndex ?? 0;
         switch (event.key) {
             case 'ArrowDown': {
                 setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));

package/cjs/core/Menu/MenuDivider.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example

package/cjs/core/Menu/MenuDivider.js

@@ -6,7 +6,6 @@ exports.MenuDivider = 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/menu.css");
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example

package/cjs/core/Menu/MenuExtraContent.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example

package/cjs/core/Menu/MenuExtraContent.js

@@ -6,7 +6,6 @@ exports.MenuExtraContent = 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/menu.css");
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example

package/cjs/core/Menu/MenuItem.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 import type { ListItemOwnProps } from '../List/ListItem.js';
 export declare type MenuItemProps = {
     /**

package/cjs/core/Menu/MenuItem.js

@@ -30,7 +30,6 @@ exports.MenuItem = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/menu.css");
 const Menu_js_1 = require("./Menu.js");
 const ListItem_js_1 = require("../List/ListItem.js");
 /**
@@ -47,10 +46,9 @@ exports.MenuItem = React.forwardRef((props, ref) => {
     const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
     const subMenuRef = React.useRef(null);
     const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
-    const endIcon = endIconProp !== null && endIconProp !== void 0 ? endIconProp : badge;
+    const startIcon = startIconProp ?? icon;
+    const endIcon = endIconProp ?? badge;
     const onKeyDown = (event) => {
-        var _a;
         if (event.altKey) {
             return;
         }
@@ -58,7 +56,7 @@ exports.MenuItem = React.forwardRef((props, ref) => {
             case 'Enter':
             case ' ':
             case 'Spacebar': {
-                !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value));
+                !disabled && onClick?.(value);
                 event.preventDefault();
                 break;
             }
@@ -71,7 +69,7 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 break;
             }
             case 'ArrowLeft': {
-                (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                parentMenuItemRef?.current?.focus();
                 event.stopPropagation();
                 event.preventDefault();
                 break;
@@ -80,10 +78,9 @@ exports.MenuItem = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    const listItem = (React.createElement(ListItem_js_1.ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
-            var _a;
+    const listItem = (React.createElement(ListItem_js_1.ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && onClick?.(value), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
             if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                !subMenuRef.current?.contains(e.relatedTarget)) {
                 setIsSubmenuVisible(false);
             }
         }, ...rest },
@@ -96,10 +93,9 @@ exports.MenuItem = React.forwardRef((props, ref) => {
         endIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
         React.createElement(index_js_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
+                        !subMenuRef.current?.contains(e.relatedTarget) &&
+                        !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
                         setIsSubmenuVisible(false);
                 } },
                 React.createElement(Menu_js_1.Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));

package/cjs/core/Menu/MenuItemSkeleton.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/menu.css';
 declare type MenuItemSkeletonProps = {
     /**
      * Flag whether to show skeleton for sub-label.

package/cjs/core/Menu/MenuItemSkeleton.js

@@ -34,7 +34,6 @@ exports.MenuItemSkeleton = 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/menu.css");
 /**
  * Menu item that uses skeletons to indicate loading state.
  */

package/cjs/core/Modal/Modal.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 { DialogMainProps } from '../Dialog/DialogMain.js';
 declare type ModalProps = {
     /**
@@ -31,16 +30,15 @@ declare type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * Id of the root where the modal will be rendered in.
-     * @default 'iui-react-portal-container'
-     */
-    modalRootId?: string;
-    /**
-     * Document where the modal will be rendered.
-     * Can be specified to render in a different document (e.g. a popup window).
-     * @default document
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default true
      */
-    ownerDocument?: Document;
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Content of the modal.
      */

package/cjs/core/Modal/Modal.js

@@ -22,9 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -32,10 +29,7 @@ exports.Modal = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/dialog.css");
-const index_js_2 = require("../Dialog/index.js");
+const index_js_1 = require("../Dialog/index.js");
 /**
  * Modal component which can wrap any content.
  * @example
@@ -58,16 +52,11 @@ const index_js_2 = require("../Dialog/index.js");
  * </Modal>
  */
 exports.Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = (0, index_js_1.getDocument)(), ...rest } = props;
-    const [container, setContainer] = React.useState();
-    React.useEffect(() => {
-        setContainer((0, index_js_1.getContainer)(modalRootId, ownerDocument));
-        return () => setContainer(undefined);
-    }, [ownerDocument, modalRootId]);
-    return !!container ? (react_dom_1.default.createPortal(React.createElement(index_js_2.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
-        React.createElement(index_js_2.Dialog.Backdrop, null),
-        React.createElement(index_js_2.Dialog.Main, { "aria-modal": true, ...rest },
-            React.createElement(index_js_2.Dialog.TitleBar, { titleText: title }),
-            children)), container)) : (React.createElement(React.Fragment, null));
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
+    return (React.createElement(index_js_1.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
+        React.createElement(index_js_1.Dialog.Backdrop, null),
+        React.createElement(index_js_1.Dialog.Main, { "aria-modal": true, ...rest },
+            React.createElement(index_js_1.Dialog.TitleBar, { titleText: title }),
+            children)));
 });
 exports.default = exports.Modal;

package/cjs/core/NonIdealState/NonIdealState.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/non-ideal-state.css';
 declare type NonIdealStateProps = {
     /**
      * An svg component, preferably from @itwin/itwinui-illustrations-react.

package/cjs/core/NonIdealState/NonIdealState.js

@@ -34,7 +34,6 @@ exports.NonIdealState = 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/non-ideal-state.css");
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
  * Works well with svgs from @itwin/itwinui-illustrations-react.

package/cjs/core/NotificationMarker/NotificationMarker.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type NotificationMarkerProps = {
     /**
      * Content of the NotificationMarker.

package/cjs/core/NotificationMarker/NotificationMarker.js

@@ -34,7 +34,6 @@ exports.NotificationMarker = 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/utils.css");
 /**
  * A small notification circle to the top-right of the passed children prop.
  * This can be applied to almost anything but mostly intended for icons within buttons with `styleType = default / borderless`.

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 declare type ProgressLinearProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -34,7 +34,6 @@ exports.ProgressLinear = 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/progress-indicator.css");
 /**
  * Shows progress on a linear bar
  * @example

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/progress-indicator.css';
 declare type ProgressRadialProps = {
     /**
      * Progress percentage. Should be a number between 0 and 100.

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -34,7 +34,6 @@ exports.ProgressRadial = 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/progress-indicator.css");
 /**
  * Circular Progress Indicator
  * @example

package/cjs/core/Radio/Radio.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio.css';
 declare type RadioProps = {
     /**
      * Label of the radio.

package/cjs/core/Radio/Radio.js

@@ -34,7 +34,6 @@ exports.Radio = 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/radio.css");
 /**
  * Basic radio input component
  * @example

package/cjs/core/RadioTiles/RadioTile.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 declare type RadioTileProps = {
     /**
      * Icon to be used.

package/cjs/core/RadioTiles/RadioTile.js

@@ -34,7 +34,6 @@ exports.RadioTile = 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/radio-tile.css");
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example

package/cjs/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
-import '@itwin/itwinui-css/css/radio-tile.css';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -30,7 +30,6 @@ exports.RadioTileGroup = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../InputGroup/index.js");
-require("@itwin/itwinui-css/css/radio-tile.css");
 const index_js_2 = require("../utils/index.js");
 /**
  * RadioTileGroup component to group RadioTile components together

package/cjs/core/SearchBox/SearchBox.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
-import '@itwin/itwinui-css/css/searchbox.css';
 declare type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.