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

package/esm/core/Backdrop/Backdrop.d.ts

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

package/esm/core/Backdrop/Backdrop.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/backdrop.css';
 export var Backdrop = React.forwardRef(function (props, ref) {
     var _a = props.isVisible, isVisible = _a === void 0 ? true : _a, className = props.className, rest = __rest(props, ["isVisible", "className"]);
     useTheme();

package/esm/core/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
 /// <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/esm/core/Badge/Badge.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, getWindow, isSoftBackground, SoftBackgrounds, } from '../utils';
+import '@itwin/itwinui-css/css/badge.css';
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,6 @@
 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/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -28,6 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { useTheme, useMergedRefs, useOverflow } from '../utils';
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import '@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/esm/core/ButtonGroup/ButtonGroup.d.ts

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

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, useOverflow, useMergedRefs } from '../utils';
+import '@itwin/itwinui-css/css/button.css';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.

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

@@ -1,5 +1,6 @@
 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/esm/core/Buttons/Button/Button.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme, } from '../../utils';
+import '@itwin/itwinui-css/css/button.css';
 /**
  * Generic button component
  * @example

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

@@ -1,5 +1,6 @@
 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/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -31,6 +31,7 @@ import { DropdownMenu } from '../../DropdownMenu';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
 import { useTheme, useMergedRefs } from '../../utils';
+import '@itwin/itwinui-css/css/button.css';
 /**
  * Button that opens a DropdownMenu.
  * @example

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

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

package/esm/core/Buttons/IconButton/IconButton.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
+import '@itwin/itwinui-css/css/button.css';
 /**
  * Icon button
  * @example

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

@@ -2,6 +2,7 @@ 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/esm/core/Buttons/SplitButton/SplitButton.js

@@ -32,6 +32,7 @@ import { DropdownMenu } from '../../DropdownMenu';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
 import { useTheme } from '../../utils';
+import '@itwin/itwinui-css/css/button.css';
 /**
  * Split button component with a DropdownMenu.
  *

package/esm/core/Carousel/Carousel.d.ts

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

package/esm/core/Carousel/Carousel.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { getRandomValue, useMergedRefs, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/carousel.css';
 import { CarouselContext } from './CarouselContext';
 import { CarouselSlider } from './CarouselSlider';
 import { CarouselSlide } from './CarouselSlide';

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

@@ -1,4 +1,5 @@
 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/esm/core/Carousel/CarouselDotsList.js

@@ -29,6 +29,7 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext';
 import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, useTheme, } from '../utils';
 import { CarouselDot } from './CarouselDot';
+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/esm/core/Checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 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/esm/core/Checkbox/Checkbox.js

@@ -28,6 +28,7 @@ import cx from 'classnames';
 import React from 'react';
 import { ProgressRadial } from '../ProgressIndicators';
 import { useMergedRefs, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Simple input checkbox
  * @example

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

@@ -1,5 +1,6 @@
 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/esm/core/ColorPicker/ColorBuilder.js

@@ -28,6 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { ColorValue, getBoundedValue, getWindow, useEventListener, useMergedRefs, useTheme, } from '../utils';
 import { Slider } from '../Slider';
+import '@itwin/itwinui-css/css/color-picker.css';
 import { useColorPickerContext } from './ColorPickerContext';
 var getVerticalPercentageOfRectangle = function (rect, pointer) {
     var position = getBoundedValue(pointer, rect.top, rect.bottom);

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

@@ -1,5 +1,6 @@
 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/esm/core/ColorPicker/ColorInputPanel.js

@@ -31,6 +31,7 @@ import { Input } from '../Input';
 import { ColorValue, InputContainer, useTheme } from '../utils';
 import { useColorPickerContext } from './ColorPickerContext';
 import SvgSwap from '@itwin/itwinui-icons-react/cjs/icons/Swap';
+import '@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/esm/core/ColorPicker/ColorPalette.d.ts

@@ -1,5 +1,6 @@
 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/esm/core/ColorPicker/ColorPalette.js

@@ -30,6 +30,7 @@ import { getFocusableElements, useMergedRefs, useTheme, } from '../utils';
 import { getColorValue } from './ColorPicker';
 import { ColorSwatch } from './ColorSwatch';
 import { useColorPickerContext } from './ColorPickerContext';
+import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,5 @@
 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/esm/core/ColorPicker/ColorPicker.js

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import '@itwin/itwinui-css/css/color-picker.css';
 import { useTheme, ColorValue, getTabbableElements, } from '../utils';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext';

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

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

package/esm/core/ColorPicker/ColorSwatch.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/color-picker.css';
 import { useTheme, getWindow } from '../utils';
 import { getColorValue } from './ColorPicker';
 /**

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,4 +1,5 @@
 /// <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/esm/core/DatePicker/DatePicker.js

@@ -31,6 +31,7 @@ import SvgChevronRightDouble from '@itwin/itwinui-icons-react/cjs/icons/ChevronR
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton';
 import { TimePicker } from '../TimePicker';
 var isSameDay = function (a, b) {

package/esm/core/Dialog/Dialog.d.ts

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

package/esm/core/Dialog/Dialog.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/dialog.css';
 import { DialogTitleBar } from './DialogTitleBar';
 import { DialogContent } from './DialogContent';
 import { DialogBackdrop } from './DialogBackdrop';

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

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

package/esm/core/Dialog/DialogButtonBar.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/dialog.css';
 export declare type DialogContentProps = {
     /**
      * Main content in the `Dialog`.

package/esm/core/Dialog/DialogContent.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

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

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

package/esm/core/Dialog/DialogMain.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { FocusTrap, getTranslateValues, useLatestRef, Resizer, useMergedRefs, useTheme, } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext';

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

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

package/esm/core/Dialog/DialogTitleBar.js

@@ -29,6 +29,7 @@ import cx from 'classnames';
 import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
 import { useTheme } from '../utils';
 import { IconButton } from '../Buttons';
+import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle';
 import { useDialogDragContext } from './DialogDragContext';

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

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

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/ErrorPage/ErrorPage.d.ts

@@ -1,5 +1,6 @@
 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/esm/core/ErrorPage/ErrorPage.js

@@ -37,6 +37,7 @@ import React from 'react';
 import { Button } from '../Buttons/Button';
 import { useTheme } from '../utils';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/non-ideal-state.css';
 /**
  * A stylized display to communicate common http errors.
  * @example

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,5 +1,6 @@
 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/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -28,6 +28,7 @@ import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import cx from 'classnames';
 import React from 'react';
 import { useTheme, StatusIconMap, WithCSSTransition, } from '../utils';
+import '@itwin/itwinui-css/css/expandable-block.css';
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example

package/esm/core/Fieldset/Fieldset.d.ts

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

package/esm/core/Fieldset/Fieldset.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { useTheme } from '../utils';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/fieldset.css';
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example

package/esm/core/FileUpload/FileUpload.d.ts

@@ -1,5 +1,6 @@
 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.
@@ -44,11 +45,6 @@ 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/esm/core/FileUpload/FileUpload.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, useMergedRefs } from '../utils';
+import '@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/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -1,4 +1,5 @@
 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/esm/core/FileUpload/FileUploadTemplate.js

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/file-upload.css';
 import SvgUpload from '@itwin/itwinui-icons-react/cjs/icons/Upload';
 /**
  * Default template to be used with the `FileUpload` wrapper component.

package/esm/core/Footer/Footer.d.ts

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

package/esm/core/Footer/Footer.js

@@ -36,6 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/footer.css';
 import { FooterItem } from './FooterItem';
 import { FooterSeparator } from './FooterSeparator';
 import { FooterList } from './FooterList';

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

@@ -1,4 +1,5 @@
 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/esm/core/Footer/FooterItem.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { useTheme } from '../utils';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

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

@@ -1,4 +1,5 @@
 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/esm/core/Footer/FooterList.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { useTheme } from '../utils';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

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

@@ -1,4 +1,5 @@
 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/esm/core/Footer/FooterSeparator.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { useTheme } from '../utils';
 import cx from 'classnames';
+import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */

package/esm/core/Header/Header.d.ts

@@ -1,5 +1,6 @@
 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/esm/core/Header/Header.js

@@ -29,6 +29,7 @@ import cx from 'classnames';
 import React from 'react';
 import { IconButton } from '../Buttons';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/header.css';
 import { DropdownMenu } from '../DropdownMenu';
 var defaultTranslations = {
     moreOptions: 'More options',

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

@@ -1,4 +1,5 @@
 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/esm/core/Header/HeaderBreadcrumbs.js

@@ -36,6 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import React from 'react';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/header.css';
 /**
  * Header breadcrumbs, adds chevron between each provided items.
  * @example

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ButtonProps, DropdownButtonProps } from '../Buttons';
 import { PolymorphicForwardRefComponent } from '../utils';
+import '@itwin/itwinui-css/css/header.css';
 export declare type HeaderButtonProps = {
     /**
      * Main label of the header button.

package/esm/core/Header/HeaderButton.js

@@ -28,6 +28,7 @@ import cx from 'classnames';
 import React from 'react';
 import { Button, DropdownButton, SplitButton, } from '../Buttons';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/header.css';
 var isSplitButton = function (props) {
     return !!props.menuItems && !!props.onClick;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/header.css';
 export declare type HeaderLogoProps = {
     /**
      * Logo shown before the main content.