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

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.

package/esm/core/Header/HeaderLogo.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/header.css';
 /**
  * Header Title section
  * @example

package/esm/core/InformationPanel/InformationPanel.d.ts

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

package/esm/core/InformationPanel/InformationPanel.js

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
 export declare type InformationPanelBodyProps = {
     /**
      * Content of the InformationPanelBody.

package/esm/core/InformationPanel/InformationPanelBody.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/information-panel.css';
 /**
  * Body of the `InformationPanel` containing the main content.
  */

package/esm/core/InformationPanel/InformationPanelContent.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
 export declare type InformationPanelContentProps = {
     /**
      * If set to 'inline', the label/input pairs will be shown on the same line.

package/esm/core/InformationPanel/InformationPanelContent.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/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/esm/core/InformationPanel/InformationPanelHeader.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
 export declare type InformationPanelHeaderProps = {
     /**
      * Callback fired when close icon is clicked.

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -29,6 +29,7 @@ import cx from 'classnames';
 import { IconButton } from '../Buttons';
 import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/information-panel.css';
 export declare type InformationPanelWrapperProps = {
     children?: React.ReactNode;
 } & Omit<CommonProps, 'title'>;

package/esm/core/InformationPanel/InformationPanelWrapper.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/information-panel.css';
 /**
  * InformationPanelWrapper should contain the `InformationPanel`
  * and the component over which the panel will overlay.

package/esm/core/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type InputProps = {
     /**
      * Set focus on input element.

package/esm/core/Input/Input.js

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

package/esm/core/InputGroup/InputGroup.d.ts

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

package/esm/core/InputGroup/InputGroup.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Group Checkbox/Radio components together
  * @example

package/esm/core/Label/Label.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/inputs.css';
 declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
     /**
      * What element should the label be rendered as?

package/esm/core/Label/Label.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/inputs.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/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { InputProps } from '../Input/Input';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type LabeledInputProps = {
     /**
      * Label of the input.

package/esm/core/LabeledInput/LabeledInput.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Input } from '../Input/Input';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Basic labeled input component
  * @example

package/esm/core/LabeledSelect/LabeledSelect.d.ts

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

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Select } from '../Select';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Labeled select component to select value from options.
  * @example

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextareaProps } from '../Textarea/Textarea';
 import { LabeledInputProps } from '../LabeledInput';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
 import { Textarea } from '../Textarea';
+import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/esm/core/Menu/Menu.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuProps = {
     /**
      * ARIA role. For menu use 'menu', for select use 'listbox'.

package/esm/core/Menu/Menu.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, useMergedRefs, getFocusableElements, } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuDividerProps = Omit<CommonProps, 'title'>;
 /**
  * Divider between menu items. Should be used inside `Menu`.

package/esm/core/Menu/MenuDivider.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/menu.css';
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuExtraContentProps = {
     children: React.ReactNode;
 } & Omit<CommonProps, 'title'>;

package/esm/core/Menu/MenuExtraContent.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/menu.css';
 /**
  * Component that allows to have any additional content inside `Menu`.
  * @example

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuItemProps = {
     /**
      * Item is selected.

package/esm/core/Menu/MenuItem.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, Popover, useMergedRefs } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 import SvgCaretRightSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretRightSmall';
 import { Menu } from './Menu';
 /**

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 export declare type MenuItemSkeletonProps = {
     /**
      * Flag whether to show skeleton for sub-label.

package/esm/core/Menu/MenuItemSkeleton.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme, VisuallyHidden } from '../utils';
+import '@itwin/itwinui-css/css/menu.css';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */

package/esm/core/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
 import { DialogMainProps } from '../Dialog';
 export declare type ModalProps = {
     /**

package/esm/core/Modal/Modal.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { useTheme, getContainer, getDocument } from '../utils';
+import '@itwin/itwinui-css/css/dialog.css';
 import { Dialog } from '../Dialog';
 /**
  * Modal component which can wrap any content.

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

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

package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.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/progress-indicator.css';
 /**
  * Shows progress on a linear bar
  * @example

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

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

package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -29,6 +29,7 @@ import Negative from '@itwin/itwinui-icons-react/cjs/icons/ImportantSmall';
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../../utils';
+import '@itwin/itwinui-css/css/progress-indicator.css';
 /**
  * Circular Progress Indicator
  * @example

package/esm/core/Radio/Radio.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type RadioProps = {
     /**
      * Label of the radio.

package/esm/core/Radio/Radio.js

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

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileProps = {
     /**
      * Icon to be used.

package/esm/core/RadioTiles/RadioTile.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/radio-tile.css';
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { InputGroupProps } from '../InputGroup';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { InputGroup } from '../InputGroup';
+import '@itwin/itwinui-css/css/inputs.css';
 import { useTheme } from '../utils';
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PopoverProps, CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.

package/esm/core/Select/Select.js

@@ -29,6 +29,7 @@ import cx from 'classnames';
 import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
 import { useTheme, useOverflow, } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SelectTag from './SelectTag';
 var isMultipleEnabled = function (variable, multiple) {

package/esm/core/Select/SelectTag.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
 export declare type SelectTagProps = {
     /**
      * Text inside the tag.

package/esm/core/Select/SelectTag.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/inputs.css';
 /**
  * Tag for showing selected value in `Select`.
  * @private

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.

package/esm/core/SideNavigation/SideNavigation.js

@@ -30,6 +30,7 @@ import { useTheme, WithCSSTransition } from '../utils';
 import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import { IconButton } from '../Buttons';
 import { Tooltip } from '../Tooltip';
+import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Left side navigation menu component.
  * @example

package/esm/core/SideNavigation/SidenavButton.d.ts

@@ -1,5 +1,6 @@
 import { PolymorphicForwardRefComponent } from '../utils';
 import { ButtonProps } from '../Buttons';
+import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,

package/esm/core/SideNavigation/SidenavButton.js

@@ -28,6 +28,7 @@ import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
 import { Button } from '../Buttons';
+import '@itwin/itwinui-css/css/side-navigation.css';
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.

package/esm/core/SideNavigation/SidenavSubmenu.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavSubmenuProps = {
     /**
      * Content of the submenu.

package/esm/core/SideNavigation/SidenavSubmenu.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/side-navigation.css';
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example

package/esm/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/side-navigation.css';
 export declare type SidenavSubmenuHeaderProps = {
     /**
      * Content of the submenu header (e.g. label)

package/esm/core/SideNavigation/SidenavSubmenuHeader.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/side-navigation.css';
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/skip-to-content.css';
 export declare type SkipToContentLinkProps = {
     /**
      * The id of the main content that the link directs to. Don't forget the #!

package/esm/core/SkipToContentLink/SkipToContentLink.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/skip-to-content.css';
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
  * Provides a shortcut to the main content of the page without navigating through the header, etc.

package/esm/core/Slider/Slider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/slider.css';
 import { TooltipProps } from '../Tooltip';
 /**
  * Determines which segments are shown with color.

package/esm/core/Slider/Slider.js

@@ -36,6 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme, getBoundedValue, useEventListener, } from '../utils';
+import '@itwin/itwinui-css/css/slider.css';
 import { Track } from './Track';
 import { Thumb } from './Thumb';
 var getPercentageOfRectangle = function (rect, pointerX, pointerY, orientation) {

package/esm/core/Surface/Surface.d.ts

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

package/esm/core/Surface/Surface.js

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