@itwin/itwinui-react 1.48.0 → 1.48.2-dev.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### [1.48.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.48.0...v1.48.1) (2022-10-24)
+
+### Fixes
+
+* **Modal:** Apply z-index on dialog wrapper ([#892](https://www.github.com/iTwin/iTwinUI-react/issues/892)) ([0637b54](https://www.github.com/iTwin/iTwinUI-react/commit/0637b54769f14b48075460d94cf64937f90a9ee3))
+
 ## [1.48.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.47.1...v1.48.0) (2022-10-18)
 
 ### Fixes

package/cjs/core/Alert/Alert.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/alert.css';
 export declare type AlertProps = {
     /**
      * Type of the alert.

package/cjs/core/Alert/Alert.js

@@ -34,7 +34,6 @@ var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/alert.css");
 var IconButton_1 = require("../Buttons/IconButton");
 /**
  * A small box to quickly grab user attention and communicate a brief message

package/cjs/core/Backdrop/Backdrop.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/backdrop.css';
 export declare type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.

package/cjs/core/Backdrop/Backdrop.js

@@ -33,7 +33,6 @@ exports.Backdrop = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/backdrop.css");
 exports.Backdrop = react_1.default.forwardRef(function (props, ref) {
     var _a = props.isVisible, isVisible = _a === void 0 ? true : _a, className = props.className, rest = __rest(props, ["isVisible", "className"]);
     (0, utils_1.useTheme)();

package/cjs/core/Badge/Badge.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { CommonProps, SoftBackgrounds } from '../utils';
-import '@itwin/itwinui-css/css/badge.css';
 export declare type BadgeProps = {
     /**
      * Background color of the badge.

package/cjs/core/Badge/Badge.js

@@ -33,7 +33,6 @@ exports.Badge = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/badge.css");
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/cjs/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 export declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -34,7 +34,6 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
-require("@itwin/itwinui-css/css/breadcrumbs.css");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -33,7 +33,6 @@ exports.ButtonGroup = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.

package/cjs/core/Buttons/Button/Button.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils';
-import '@itwin/itwinui-css/css/button.css';
 declare type ButtonOwnProps = {
     /**
      * Modify size of the button.

package/cjs/core/Buttons/Button/Button.js

@@ -33,7 +33,6 @@ exports.Button = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Generic button component
  * @example

package/cjs/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ButtonProps } from '../Button';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -37,7 +37,6 @@ var DropdownMenu_1 = require("../../DropdownMenu");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../../utils");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Button that opens a DropdownMenu.
  * @example

package/cjs/core/Buttons/IconButton/IconButton.d.ts

@@ -1,6 +1,5 @@
 import { ButtonProps } from '../Button';
 import { PolymorphicForwardRefComponent } from '../../utils';
-import '@itwin/itwinui-css/css/button.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -33,7 +33,6 @@ exports.IconButton = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../../utils");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Icon button
  * @example

package/cjs/core/Buttons/SplitButton/SplitButton.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { ButtonProps } from '../Button';
 import { Placement } from 'tippy.js';
 import { PolymorphicForwardRefComponent } from '../../utils';
-import '@itwin/itwinui-css/css/button.css';
 export declare type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -38,7 +38,6 @@ var DropdownMenu_1 = require("../../DropdownMenu");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
 var utils_1 = require("../../utils");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Split button component with a DropdownMenu.
  *

package/cjs/core/Carousel/Carousel.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
 export declare type CarouselProps = {
     /**
      * Index of the currently shown slide.

package/cjs/core/Carousel/Carousel.js

@@ -33,7 +33,6 @@ exports.Carousel = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/carousel.css");
 var CarouselContext_1 = require("./CarouselContext");
 var CarouselSlider_1 = require("./CarouselSlider");
 var CarouselSlide_1 = require("./CarouselSlide");

package/cjs/core/Carousel/CarouselDotsList.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/cjs/core/Carousel/CarouselDotsList.js

@@ -35,7 +35,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var CarouselContext_1 = require("./CarouselContext");
 var utils_1 = require("../utils");
 var CarouselDot_1 = require("./CarouselDot");
-require("@itwin/itwinui-css/css/carousel.css");
 /**
  * The `CarouselDots` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/cjs/core/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
 export declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.

package/cjs/core/Checkbox/Checkbox.js

@@ -34,7 +34,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var ProgressIndicators_1 = require("../ProgressIndicators");
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Simple input checkbox
  * @example

package/cjs/core/ColorPicker/ColorBuilder.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorBuilderProps = Omit<CommonProps, 'title'>;
 /**
  * `ColorBuilder` consists of two parts:

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -34,7 +34,6 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
 var Slider_1 = require("../Slider");
-require("@itwin/itwinui-css/css/color-picker.css");
 var ColorPickerContext_1 = require("./ColorPickerContext");
 var getVerticalPercentageOfRectangle = function (rect, pointer) {
     var position = (0, utils_1.getBoundedValue)(pointer, rect.top, rect.bottom);

package/cjs/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -37,7 +37,6 @@ var Input_1 = require("../Input");
 var utils_1 = require("../utils");
 var ColorPickerContext_1 = require("./ColorPickerContext");
 var Swap_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Swap"));
-require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
  * It also allows switching between the specified formats using a swap button.

package/cjs/core/ColorPicker/ColorPalette.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ColorType, ColorValue, CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**
      * Label shown above the palette.

package/cjs/core/ColorPicker/ColorPalette.js

@@ -36,7 +36,6 @@ var utils_1 = require("../utils");
 var ColorPicker_1 = require("./ColorPicker");
 var ColorSwatch_1 = require("./ColorSwatch");
 var ColorPickerContext_1 = require("./ColorPickerContext");
-require("@itwin/itwinui-css/css/color-picker.css");
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example

package/cjs/core/ColorPicker/ColorPicker.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { CommonProps, ColorType, ColorValue } from '../utils';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;
 export declare type ColorPickerProps = {

package/cjs/core/ColorPicker/ColorPicker.js

@@ -31,7 +31,6 @@ exports.ColorPicker = exports.getColorValue = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-require("@itwin/itwinui-css/css/color-picker.css");
 var utils_1 = require("../utils");
 var classnames_1 = __importDefault(require("classnames"));
 var ColorPickerContext_1 = require("./ColorPickerContext");

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue, ColorType } from '../utils';
 export declare type ColorSwatchProps = {
     /**

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -32,7 +32,6 @@ exports.ColorSwatch = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/color-picker.css");
 var utils_1 = require("../utils");
 var ColorPicker_1 = require("./ColorPicker");
 /**

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import '@itwin/itwinui-css/css/date-picker.css';
 import { TimePickerProps } from '../TimePicker';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.

package/cjs/core/DatePicker/DatePicker.js

@@ -37,7 +37,6 @@ var ChevronRightDouble_1 = __importDefault(require("@itwin/itwinui-icons-react/c
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/date-picker.css");
 var IconButton_1 = require("../Buttons/IconButton");
 var TimePicker_1 = require("../TimePicker");
 var isSameDay = function (a, b) {

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import { DialogContextProps } from './DialogContext';
 export declare type DialogProps = {
     /**

package/cjs/core/Dialog/Dialog.js

@@ -32,7 +32,6 @@ exports.Dialog = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/dialog.css");
 var DialogTitleBar_1 = require("./DialogTitleBar");
 var DialogContent_1 = require("./DialogContent");
 var DialogBackdrop_1 = require("./DialogBackdrop");

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogButtonBarProps = {
     /**
      * Buttons in the dialog bar.

package/cjs/core/Dialog/DialogButtonBar.js

@@ -33,7 +33,6 @@ exports.DialogButtonBar = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-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,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogContentProps = {
     /**
      * Main content in the `Dialog`.

package/cjs/core/Dialog/DialogContent.js

@@ -33,7 +33,6 @@ exports.DialogContent = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-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/DialogMain.d.ts

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

package/cjs/core/Dialog/DialogMain.js

@@ -33,7 +33,6 @@ exports.DialogMain = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/dialog.css");
 var DialogContext_1 = require("./DialogContext");
 var react_transition_group_1 = require("react-transition-group");
 var DialogDragContext_1 = require("./DialogDragContext");

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import { DialogContextProps } from './DialogContext';
 export declare type DialogTitleBarProps = {
     /**

package/cjs/core/Dialog/DialogTitleBar.js

@@ -35,7 +35,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
 var Buttons_1 = require("../Buttons");
-require("@itwin/itwinui-css/css/dialog.css");
 var DialogContext_1 = require("./DialogContext");
 var DialogTitleBarTitle_1 = require("./DialogTitleBarTitle");
 var DialogDragContext_1 = require("./DialogDragContext");

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogTitleBarTitleProps = {
     /**
      * Dialog title content.

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -33,7 +33,6 @@ exports.DialogTitleBarTitle = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/ErrorPage/ErrorPage.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/non-ideal-state.css';
 export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
 export declare type ErrorTypeTranslations = {
     badGateway: string;

package/cjs/core/ErrorPage/ErrorPage.js

@@ -43,7 +43,6 @@ var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Buttons/Button");
 var utils_1 = require("../utils");
 var classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/non-ideal-state.css");
 /**
  * A stylized display to communicate common http errors.
  * @example

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/expandable-block.css';
 export declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -34,7 +34,6 @@ var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/ico
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/expandable-block.css");
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/fieldset.css';
 export declare type FieldsetProps = {
     /**
      * The caption or title for the fieldset.

package/cjs/core/Fieldset/Fieldset.js

@@ -33,7 +33,6 @@ exports.Fieldset = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var 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 React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/file-upload.css';
 export declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.
@@ -45,6 +44,11 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     title?: string | undefined;
     id?: string | undefined;
 } & {
+    /**
+     * Content shown over `children` when file is being dragged onto the component.
+     * Should always be used when drag content differs from `children` being wrapped.
+     * Can be skipped if wrapping `FileUploadTemplate`.
+     */
     style?: React.CSSProperties | undefined;
 } & import("../utils").ClassNameProps & React.RefAttributes<HTMLDivElement>>;
 export default FileUpload;

package/cjs/core/FileUpload/FileUpload.js

@@ -33,7 +33,6 @@ exports.FileUpload = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-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/FileUploadTemplate.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/file-upload.css';
 export declare type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -10,7 +10,6 @@ exports.FileUploadTemplate = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/file-upload.css");
 var Upload_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Upload"));
 /**
  * Default template to be used with the `FileUpload` wrapper component.

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

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

package/cjs/core/Footer/Footer.js

@@ -42,7 +42,6 @@ exports.Footer = exports.defaultFooterElements = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/footer.css");
 var FooterItem_1 = require("./FooterItem");
 var FooterSeparator_1 = require("./FooterSeparator");
 var FooterList_1 = require("./FooterList");

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/footer.css';
 export declare type FooterItemProps = React.ComponentPropsWithRef<'li'>;
 /**
  * Footer item. Recommended to use inside `Footer.List`.

package/cjs/core/Footer/FooterItem.js

@@ -33,7 +33,6 @@ exports.FooterItem = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/footer.css';
 export declare type FooterListProps = React.ComponentPropsWithRef<'ul'>;
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.

package/cjs/core/Footer/FooterList.js

@@ -33,7 +33,6 @@ exports.FooterList = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/footer.css';
 export declare type FooterSeparatorProps = Omit<React.ComponentPropsWithRef<'li'>, 'children'>;
 /**
  * Footer separator. Recommended to use inside `Footer.List`.

package/cjs/core/Footer/FooterSeparator.js

@@ -33,7 +33,6 @@ exports.FooterSeparator = void 0;
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
 var classnames_1 = __importDefault(require("classnames"));
-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 React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/header.css';
 export declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.

package/cjs/core/Header/Header.js

@@ -35,7 +35,6 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var Buttons_1 = require("../Buttons");
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/header.css");
 var DropdownMenu_1 = require("../DropdownMenu");
 var defaultTranslations = {
     moreOptions: 'More options',

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/header.css';
 export declare type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -42,7 +42,6 @@ exports.HeaderBreadcrumbs = void 0;
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/header.css");
 /**
  * Header breadcrumbs, adds chevron between each provided items.
  * @example