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

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 3.0.0-dev.2
+
+### Major Changes
+
+- [#1300](https://github.com/iTwin/iTwinUI/pull/1300): `modalRootId` and `ownerDocument` props have been removed from `Modal`, in favor of the new `portal` prop (also available in `Dialog`).
+- [#1247](https://github.com/iTwin/iTwinUI/pull/1247): Alert composition has been updated such that it is now made up of customizable subcomponents, thus removing the `onClose`, `clickableText`, and `clickableTextProps` props from `Alert`.
+- [#1346](https://github.com/iTwin/iTwinUI/pull/1346): The build now targets `es2020` instead of `es2018`.
+
+### Patch Changes
+
+- [#1347](https://github.com/iTwin/iTwinUI/pull/1347): Fixed an issue where ThemeProvider warning was always logged even when using ThemeProvider.
+
+## 3.0.0-dev.1
+
+### Major Changes
+
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variable` have been removed. This means `@itwin/itwinui-react` will bring its own stylesheet.
+- [#1322](https://github.com/iTwin/iTwinUI/pull/1322): All css imports within components have been removed. `@itwin/itwinui-react/styles.css` must now be manually imported at the entrypoint.
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): All elements have had their class names changed to prevent conflict with older versions. It is strongly recommended to switch these internal classes with your own classes or data attributes.
+
+### Minor Changes
+
+- [#1321](https://github.com/iTwin/iTwinUI/pull/1321): Added `disabled` prop to ExpandableBlock component. When activated, it triggers the "disabled" CSS styling for the ExpandableBlock and disables user interaction with it.
+- [#1073](https://github.com/iTwin/iTwinUI/pull/1073): Added new `TransferList` component which is used to move one or more items between lists. Added the following subcomponents: `TransferList.ListWrapper`, `TransferList.ListboxWrapper`, `TransferList.ListboxLabel`, `TransferList.Listbox`, `TransferList.Item`, and `TransferList.Toolbar`
+- [#1323](https://github.com/iTwin/iTwinUI/pull/1323): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
+
 ## 3.0.0-dev.0
 
 ### Major Changes
@@ -21,6 +47,18 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.11.6
+
+### Patch Changes
+
+- [#1341](https://github.com/iTwin/iTwinUI/pull/1341): Table: fixed action column header content alignment when using globalFilterValue.
+
+## 2.11.5
+
+### Patch Changes
+
+- [#1329](https://github.com/iTwin/iTwinUI/pull/1329): Fixed an issue where the visually hidden `FileUploadCard.Input` was inadvertently showing when focused.
+
 ## 2.11.4
 
 ### Patch Changes

package/README.md

@@ -39,43 +39,49 @@ yarn add @itwin/itwinui-react
 
 ---
 
-## Usage
+## Setup
 
-Import the component you want and start using it!
+Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
 
 ```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const App = () => (
-  <Button>Hello!</Button>
-);
+import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <ThemeProvider>
+        {/* Your components go here. */}
+      </ThemeProvider>
+    </>
+  );
+}
 ```
 
-Yes, that's really all you need as you can see in this live interactive demo:
-
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+ThemeProvider has a `theme` prop which accepts one of the following values:
+  - `light` (default)
+  - `dark`
+  - `os` (respects the color scheme of the operating system)
+  - `inherit`
 
 ---
 
-## Theming
+## Usage
 
-By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
-  - `light` (default)
-  - `dark`
-  - `os` (which respects the color scheme of the operating system)
+After setting up ThemeProvider and styles, import the component you want and start using it!
 
 ```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
-const App = () => (
-  <>
-    <ThemeProvider theme='dark'>
-      {/* Your components go here. */}
-    </ThemeProvider>
-  </>
+const Page = () => (
+  <Button>Hello!</Button>
 );
 ```
 
+Check out this template for a live interactive demo:
+
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+
 ---
 
 ## FAQ

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

@@ -1,48 +1,66 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/alert.css';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type AlertProps = {
+declare type AlertOwnProps = {
     /**
      * Type of the alert.
      * @default 'informational'
      */
     type?: 'positive' | 'warning' | 'negative' | 'informational';
-    /**
-     * Text for the link you want to provide.
-     */
-    clickableText?: React.ReactNode;
-    /**
-     * Props for the clickable text. Used for providing `href` and other attributes.
-     */
-    clickableTextProps?: React.ComponentPropsWithRef<'a'>;
-    /**
-     * Action handler for close.
-     */
-    onClose?: () => void;
     /**
      * Stick the alert to the top.
      * @default false
      */
     isSticky?: boolean;
-    /**
-     * Alert message text.
-     */
-    children: React.ReactNode;
 };
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>This is a basic alert.</Alert>
- * <Alert type='positive'>This is a positive alert.</Alert>
- * <Alert type='warning'>This is a warning alert.</Alert>
- * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert
- *  type='positive'
- *  clickableText="I am a clickable text"
- *  clickableTextProps={{ href: 'https://www.example.com' }}
- * >
- *   This is a positive alert with a clickable text
+ * <Alert>
+ *  <Alert.Message>This is an alert.</Alert.Message>
+ * </Alert>
+ * @example
+ * <Alert type='informational'>
+ *  <Alert.Icon />
+ *  <Alert.Message>This is an informational alert.</Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}} />
+ * </Alert>
+ * @example
+ * <Alert type='positive'>
+ *  <Alert.Icon>
+ *    <SvgSmileyHappy />
+ *  </Alert.Icon>
+ *  <Alert.Message>
+ *    This is an alert.
+ *    <Alert.Action>This is clickable text.</Alert.Action>
+ *  </Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}}>
+ *    <SvgCollapse />
+ *  </Alert.CloseButton>
  * </Alert>
  */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertProps>;
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps> & {
+    /**
+     * 	Alert icon subcomponent
+     */
+    Icon: PolymorphicForwardRefComponent<"span", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+    }, "as" | "fill" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
+        fill?: "default" | "positive" | "warning" | "negative" | import("../utils/types.js").AnyString | "informational" | undefined;
+    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+        as?: "span" | undefined;
+    }>;
+    /**
+     * 	Alert message subcomponent
+     */
+    Message: PolymorphicForwardRefComponent<"span", {}>;
+    /**
+     * 	Alert action subcomponent for the link you want to provide.
+     */
+    Action: PolymorphicForwardRefComponent<"a", {}>;
+    /**
+     * 	Alert close button subcomponent
+     */
+    CloseButton: PolymorphicForwardRefComponent<"button", {}>;
+};
 export default Alert;

package/cjs/core/Alert/Alert.js

@@ -33,33 +33,84 @@ exports.Alert = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
-require("@itwin/itwinui-css/css/alert.css");
 const index_js_1 = require("../utils/index.js");
+const index_js_2 = require("../Buttons/index.js");
+const AlertContext = React.createContext(undefined);
+const AlertComponent = React.forwardRef((props, ref) => {
+    const { children, className, type = 'informational', isSticky = false, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
+        React.createElement(AlertContext.Provider, { value: { type } }, children)));
+});
+AlertComponent.displayName = 'Alert';
+// ----------------------------------------------------------------------------
+// Alert.Icon component
+const AlertIcon = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { type } = (0, index_js_1.useSafeContext)(AlertContext);
+    const StatusIcon = index_js_1.StatusIconMap[type];
+    return (React.createElement(index_js_1.Icon, { fill: type, ref: ref, ...rest }, children ?? React.createElement(StatusIcon, null)));
+});
+AlertIcon.displayName = 'Alert.Icon';
+// ----------------------------------------------------------------------------
+// Alert.Message component
+const AlertMessage = index_js_1.polymorphic.span('iui-alert-message');
+AlertMessage.displayName = 'Alert.Message';
+// ----------------------------------------------------------------------------
+// Alert.Action component
+const AlertAction = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: (!!props.href ? 'a' : 'button'), className: (0, classnames_1.default)('iui-alert-link', className), ref: ref, ...rest }, children));
+});
+AlertAction.displayName = 'Alert.Action';
+// ----------------------------------------------------------------------------
+// Alert.CloseButton component
+const AlertCloseButton = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    return (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'Close', ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgCloseSmall, null)));
+});
+AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>This is a basic alert.</Alert>
- * <Alert type='positive'>This is a positive alert.</Alert>
- * <Alert type='warning'>This is a warning alert.</Alert>
- * <Alert type='negative'>This is a negative alert.</Alert>
- * <Alert
- *  type='positive'
- *  clickableText="I am a clickable text"
- *  clickableTextProps={{ href: 'https://www.example.com' }}
- * >
- *   This is a positive alert with a clickable text
+ * <Alert>
+ *  <Alert.Message>This is an alert.</Alert.Message>
+ * </Alert>
+ * @example
+ * <Alert type='informational'>
+ *  <Alert.Icon />
+ *  <Alert.Message>This is an informational alert.</Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}} />
+ * </Alert>
+ * @example
+ * <Alert type='positive'>
+ *  <Alert.Icon>
+ *    <SvgSmileyHappy />
+ *  </Alert.Icon>
+ *  <Alert.Message>
+ *    This is an alert.
+ *    <Alert.Action>This is clickable text.</Alert.Action>
+ *  </Alert.Message>
+ *  <Alert.CloseButton onClick={() => {}}>
+ *    <SvgCollapse />
+ *  </Alert.CloseButton>
  * </Alert>
  */
-exports.Alert = React.forwardRef((props, ref) => {
-    const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, isSticky = false, ...rest } = props;
-    const StatusIcon = index_js_1.StatusIconMap[type];
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
-        React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
-        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-alert-message' },
-            children,
-            clickableText && (React.createElement(index_js_1.Box, { as: 'a', ...clickableTextProps, className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
-        onClose && (React.createElement(index_js_1.Box, { as: 'button', onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
-            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-alert-button-icon', "aria-hidden": true },
-                React.createElement(index_js_1.SvgCloseSmall, null))))));
+exports.Alert = Object.assign(AlertComponent, {
+    /**
+     * 	Alert icon subcomponent
+     */
+    Icon: AlertIcon,
+    /**
+     * 	Alert message subcomponent
+     */
+    Message: AlertMessage,
+    /**
+     * 	Alert action subcomponent for the link you want to provide.
+     */
+    Action: AlertAction,
+    /**
+     * 	Alert close button subcomponent
+     */
+    CloseButton: AlertCloseButton,
 });
 exports.default = exports.Alert;

package/cjs/core/Avatar/Avatar.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 declare type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;

package/cjs/core/Avatar/Avatar.js

@@ -34,7 +34,6 @@ exports.UserIcon = exports.Avatar = exports.defaultStatusTitles = 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/avatar.css");
 exports.defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',
@@ -60,7 +59,7 @@ exports.Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
     const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
     return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ref: ref, ...rest },
-        !image && (React.createElement(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+        !image && (React.createElement(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, abbreviation?.substring(0, 2))),
         image,
         React.createElement(index_js_1.Box, { as: 'span', className: 'iui-stroke' }),
         status && (React.createElement(index_js_1.Box, { as: 'span', title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {

package/cjs/core/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
 declare type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -34,7 +34,6 @@ exports.UserIconGroup = exports.AvatarGroup = 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/avatar.css");
 /**
  * Group Avatars together.
  *
@@ -80,7 +79,7 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
         childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
         childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
             getAvatarList(maxIcons),
-            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
+            React.createElement(index_js_1.Box, { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps?.className) },
                 React.createElement(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, childrenLength <= maxLength
                     ? `${childrenLength - maxIcons}`
                     : `${maxLength}+`),

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

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

package/cjs/core/Backdrop/Backdrop.js

@@ -34,7 +34,6 @@ exports.Backdrop = 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/backdrop.css");
 exports.Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));

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

@@ -1,6 +1,5 @@
 import { SoftBackgrounds } from '../utils/index.js';
 import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/badge.css';
 declare type BadgeProps = {
     /**
      * Background color of the badge.

package/cjs/core/Badge/Badge.js

@@ -34,7 +34,6 @@ exports.Badge = 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/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 * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -34,7 +34,6 @@ exports.Breadcrumbs = 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/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.
@@ -83,12 +82,11 @@ exports.Breadcrumbs = React.forwardRef((props, ref) => {
             }))));
 });
 const ListItem = ({ item, isActive, }) => {
-    var _a;
     return (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
         ? React.cloneElement(item, {
-            'aria-current': ((_a = item.props['aria-current']) !== null && _a !== void 0 ? _a : isActive) ? 'location' : undefined,
+            'aria-current': item.props['aria-current'] ?? isActive ? 'location' : undefined,
         })
         : item));
 };
-const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(index_js_1.SvgChevronRight, null)));
+const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(index_js_1.SvgChevronRight, null)));
 exports.default = exports.Breadcrumbs;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -34,7 +34,6 @@ exports.ButtonGroup = 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/button.css");
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -65,10 +64,7 @@ require("@itwin/itwinui-css/css/button.css");
  */
 exports.ButtonGroup = React.forwardRef((props, ref) => {
     const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const items = React.useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)) === null || _a === void 0 ? void 0 : _a.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
-    }, [children]);
+    const items = React.useMemo(() => React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)?.filter(Boolean) ?? [], [children]);
     const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
     const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonProps = {
     /**
      * Modify size of the button.

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

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

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

@@ -2,7 +2,6 @@
 import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

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

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../Button/index.js");
 const index_js_2 = require("../../DropdownMenu/index.js");
 const index_js_3 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -58,14 +57,12 @@ exports.DropdownButton = React.forwardRef((props, ref) => {
         }
     }, [children, size, styleType]);
     return (React.createElement(index_js_2.DropdownMenu, { menuItems: menuItems, ...dropdownMenuProps, onShow: (i) => {
-            var _a;
             setIsMenuOpen(true);
-            (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+            dropdownMenuProps?.onShow?.(i);
         }, onHide: (i) => {
-            var _a;
             setIsMenuOpen(false);
-            (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
-        }, style: { minWidth: menuWidth, ...dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.style } },
+            dropdownMenuProps?.onHide?.(i);
+        }, style: { minWidth: menuWidth, ...dropdownMenuProps?.style } },
         React.createElement(index_js_1.Button, { className: (0, classnames_1.default)('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(index_js_3.SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(index_js_3.SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
 });
 exports.default = exports.DropdownButton;

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.

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

@@ -34,8 +34,6 @@ exports.IconButton = 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/button.css");
-require("@itwin/itwinui-css/css/tooltip.css");
 /**
  * Icon button
  * @example

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

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

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

@@ -37,7 +37,6 @@ const index_js_1 = require("../Button/index.js");
 const index_js_2 = require("../IconButton/index.js");
 const index_js_3 = require("../../DropdownMenu/index.js");
 const index_js_4 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Split button component with a DropdownMenu.
  *

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselProps = {
     /**
      * Index of the currently shown slide.
@@ -39,7 +38,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
         } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
@@ -47,7 +46,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
+        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
         } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {