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

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 { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
     const icon = endIcon !== null && endIcon !== void 0 ? 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);
     };
     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/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.

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;
@@ -116,7 +115,7 @@ 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);
                 setInternalFiles(_files);

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?

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).

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

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

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.
  */

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

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 = {
     /**

package/cjs/core/Modal/Modal.js

@@ -34,7 +34,6 @@ exports.Modal = void 0;
 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");
 /**
  * Modal component which can wrap any content.

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.