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

package/esm/core/Tag/Tag.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 declare type TagProps = {
     /**
      * Callback function that handles click on close icon.

package/esm/core/Tag/Tag.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgCloseSmall, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 import { IconButton } from '../Buttons/index.js';
 /**
  * Tag for showing categories, filters etc.

package/esm/core/Tag/TagContainer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 declare type TagContainerProps = {
     /**
      * Tags inside the container.

package/esm/core/Tag/TagContainer.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tag.css';
 /**
  * TagContainer for grouping tags.
  * @example

package/esm/core/Textarea/Textarea.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 export declare type TextareaProps = {
     /**
      * Set focus on textarea element.

package/esm/core/Textarea/Textarea.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic textarea component
  * @example

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
 export declare type ThemeOptions = {
     /**
      * Whether to apply high-contrast versions of light and dark themes.

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -6,8 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useMediaQuery, useMergedRefs, useIsThemeAlreadySet, Box, } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
-import '@itwin/itwinui-css/css/global.css';
-import '@itwin/itwinui-variables/index.css';
 /**
  * This component provides global styles and applies theme to the entire tree
  * that it is wrapping around. The `theme` prop is optional and defaults to the

package/esm/core/Tile/Tile.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tile.css';
 /**
  * Polymorphic Tile action component. Recommended to be used in a "name" of `Tile`.
  * Renders `a` element by default.

package/esm/core/Tile/Tile.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { StatusIconMap, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tile.css';
 import { DropdownMenu } from '../DropdownMenu/index.js';
 import { IconButton } from '../Buttons/index.js';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
@@ -67,9 +66,7 @@ export const Tile = Object.assign(React.forwardRef((props, forwardedRef) => {
             thumbnail && (React.createElement(Box, { className: 'iui-tile-thumbnail' },
                 typeof thumbnail === 'string' ? (React.createElement(Box, { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: `url(${thumbnail})` } })) : thumbnail && thumbnail.type === 'img' ? (React.cloneElement(thumbnail, {
                     className: 'iui-tile-thumbnail-picture',
-                })) : React.isValidElement(thumbnail) ? (React.cloneElement(thumbnail, {
-                    className: cx('iui-thumbnail-icon', thumbnail.props.className),
-                })) : (thumbnail),
+                })) : (React.createElement(Box, { as: 'span', className: 'iui-thumbnail-icon' }, thumbnail)),
                 leftIcon &&
                     React.cloneElement(leftIcon, {
                         className: 'iui-tile-thumbnail-type-indicator',

package/esm/core/TimePicker/TimePicker.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/time-picker.css';
 export declare type MeridiemType = 'AM' | 'PM';
 export declare type Precision = 'hours' | 'minutes' | 'seconds';
 export declare type TimePickerProps = {

package/esm/core/TimePicker/TimePicker.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/time-picker.css';
 const isSameHour = (date1, date2, meridiem) => {
     const adjustedHours = meridiem
         ? formatHourFrom12(date1.getHours(), meridiem)

package/esm/core/Toast/Toast.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toast.css';
 export declare type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
 export declare type ToastProps = {
     /**

package/esm/core/Toast/Toast.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import { Transition } from 'react-transition-group';
 import cx from 'classnames';
 import { getWindow, StatusIconMap, SvgCloseSmall, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toast.css';
 import { IconButton } from '../Buttons/index.js';
 const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches; };
 /**

package/esm/core/Toast/ToastWrapper.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/toast.css';
 import * as React from 'react';
 import type { ToastProps } from './Toast.js';
 import type { ToasterSettings } from './Toaster.js';

package/esm/core/Toast/ToastWrapper.js

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import '@itwin/itwinui-css/css/toast.css';
 import * as React from 'react';
 import cx from 'classnames';
 import Toast from './Toast.js';

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 declare type ToggleSwitchProps = {
     /**
      * Label for the toggle switch.

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 /**
  * A switch for turning on and off.
  * @example
@@ -34,13 +33,12 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
     const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
-    const WrapperComponent = label ? 'label' : 'div';
     React.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement(WrapperComponent, { className: cx('iui-toggle-switch-wrapper', {
+    return (React.createElement(Box, { as: label ? 'label' : 'div', className: cx('iui-toggle-switch-wrapper', {
             'iui-disabled': disabled,
             'iui-label-on-right': label && labelPosition === 'right',
             'iui-label-on-left': label && labelPosition === 'left',

package/esm/core/Tooltip/Tooltip.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps, PopoverProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type TooltipProps = {
     /**
      * Content of the tooltip.

package/esm/core/Tooltip/Tooltip.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Popover, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tooltip.css';
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
  * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).

package/esm/core/TransferList/TransferList.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ListItem } from '../List/index.js';
+declare type TransferListListboxWrapperOwnProps = {};
+declare type TransferListItemOwnProps = {
+    /**
+     * Callback fired when the the active state changes.
+     */
+    onActiveChange?: (value: boolean) => void;
+} & React.ComponentProps<typeof ListItem>;
+declare type TransferListListboxLabelOwnProps = {
+    /**
+     * Text label that is wrapped by `TransferList.ListboxLabel`
+     */
+    children?: string;
+};
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+export declare const TransferList: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}> & {
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: PolymorphicForwardRefComponent<"div", TransferListListboxWrapperOwnProps>;
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    }, "as"> & {
+        as?: "ul" | undefined;
+    }>;
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: PolymorphicForwardRefComponent<"li", TransferListItemOwnProps>;
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: PolymorphicForwardRefComponent<"div", TransferListListboxLabelOwnProps>;
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements, {}>;
+};
+export declare const TransferListContext: React.Context<{
+    /**
+     * Id to set to label and set 'aria-labelledby' prop of the listbox
+     */
+    labelId?: string | undefined;
+    /**
+     * Callback that's fired when labelId is changed
+     */
+    setLabelId: (labelId: string) => void;
+} | undefined>;
+export default TransferList;

package/esm/core/TransferList/TransferList.js

@@ -0,0 +1,142 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { getFocusableElements, useMergedRefs, useId, useSafeContext, Box, polymorphic, } from '../utils/index.js';
+import { List, ListItem } from '../List/index.js';
+// ----------------------------------------------------------------------------
+// TransferListComponent
+const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+TransferListComponent.displayName = 'TransferList';
+const TransferListListboxWrapper = React.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    const uid = useId();
+    const [labelId, setLabelId] = React.useState(uid);
+    return (React.createElement(Box, { as: 'div', className: cx('iui-transfer-list-listbox-wrapper', className), ref: ref, ...rest },
+        React.createElement(TransferListContext.Provider, { value: { labelId, setLabelId } }, children)));
+});
+TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+const TransferListListbox = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const { labelId } = useSafeContext(TransferListContext);
+    const [focusedIndex, setFocusedIndex] = React.useState();
+    const listRef = React.useRef(null);
+    const refs = useMergedRefs(listRef, ref);
+    const getFocusableNodes = React.useCallback(() => {
+        const focusableItems = getFocusableElements(listRef.current);
+        // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
+    }, []);
+    React.useEffect(() => {
+        var _a;
+        const items = getFocusableNodes();
+        if (focusedIndex != null) {
+            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+    }, [focusedIndex, getFocusableNodes]);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        const items = getFocusableNodes();
+        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+            return;
+        }
+        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    return (React.createElement(List, { className: cx('iui-transfer-list-listbox', className), onKeyDown: onKeyDown, role: 'listbox', "aria-multiselectable": true, "aria-labelledby": labelId, tabIndex: 0, ref: refs, ...rest }, children));
+});
+TransferListListbox.displayName = 'TransferList.Listbox';
+const TransferListItem = React.forwardRef((props, ref) => {
+    const { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
+    const onClickEvents = () => actionable && onActiveChange && onActiveChange(!active);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'Spacebar') {
+            !disabled && onClickEvents();
+            event.preventDefault();
+        }
+    };
+    return (React.createElement(ListItem, { ref: ref, onClick: onClickEvents, onKeyDown: onKeyDown, active: active, actionable: actionable, tabIndex: -1, role: 'option', "aria-disabled": disabled ? 'true' : undefined, "aria-selected": active ? 'true' : undefined, disabled: disabled, ...rest }, children));
+});
+TransferListItem.displayName = 'TransferList.Item';
+const TransferListListboxLabel = React.forwardRef((props, ref) => {
+    const { children, className, id, ...rest } = props;
+    const { labelId, setLabelId } = useSafeContext(TransferListContext);
+    React.useEffect(() => {
+        if (id && id !== labelId) {
+            setLabelId(id);
+        }
+    }, [id, labelId, setLabelId]);
+    return (React.createElement(Box, { as: 'div', className: cx('iui-transfer-list-listbox-label', className), id: labelId, ref: ref, ...rest }, children));
+});
+TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+// ----------------------------------------------------------------------------
+// TransferList.Toolbar component
+const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+    role: 'toolbar',
+});
+TransferListToolbar.displayName = 'TransferList.Toolbar';
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+export const TransferList = Object.assign(TransferListComponent, {
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: TransferListListboxWrapper,
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: TransferListListbox,
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: TransferListItem,
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: TransferListListboxLabel,
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: TransferListToolbar,
+});
+export const TransferListContext = React.createContext(undefined);
+export default TransferList;

package/esm/core/TransferList/index.d.ts

@@ -0,0 +1,3 @@
+export { TransferList } from './TransferList.js';
+declare const _default: "./TransferList";
+export default _default;

package/esm/core/TransferList/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { TransferList } from './TransferList.js';
+export default './TransferList';

package/esm/core/Tree/Tree.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 export declare type NodeData<T> = {
     /**
      * Array of the child nodes contained in the node.

package/esm/core/Tree/Tree.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { getFocusableElements, useVirtualization, mergeRefs, Box, polymorphic, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 import cx from 'classnames';
 import { TreeContext } from './TreeContext.js';
 /**

package/esm/core/Tree/TreeNode.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 declare type TreeNodeProps = {
     /**
      * Unique id of the node.

package/esm/core/Tree/TreeNode.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { getFocusableElements, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander.js';
 import { useTreeContext } from './TreeContext.js';

package/esm/core/Tree/TreeNodeExpander.d.ts

@@ -1,6 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
-import '@itwin/itwinui-css/css/tree.css';
 declare type TreeNodeExpanderProps = {
     isExpanded?: boolean;
 } & IconButtonProps;

package/esm/core/Tree/TreeNodeExpander.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgChevronRight } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 export const TreeNodeExpander = React.forwardRef((props, ref) => {
     const { isExpanded, ...rest } = props;
     return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ref: ref, ...rest },

package/esm/core/Typography/Anchor/Anchor.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/anchor.css';
 /**
  * A consistently styled anchor component.
  *

package/esm/core/Typography/Anchor/Anchor.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/anchor.css';
 /**
  * A consistently styled anchor component.
  *

package/esm/core/Typography/Blockquote/Blockquote.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/blockquote.css';
 declare type BlockquoteProps = {
     /**
      * Optional footer for any attribution/source.

package/esm/core/Typography/Blockquote/Blockquote.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/blockquote.css';
 /**
  * Basic blockquote component
  * @example

package/esm/core/Typography/Code/Code.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/code.css';
 /**
  * Inline code element.
  * @example

package/esm/core/Typography/Code/Code.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/code.css';
 /**
  * Inline code element.
  * @example

package/esm/core/Typography/Kbd/Kbd.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/esm/core/Typography/Kbd/Kbd.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.
  */

package/esm/core/Typography/Text/Text.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 declare type TextProps = {
     /**
      * Which typography variant/size should be used for the styling?

package/esm/core/Typography/Text/Text.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
  * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns

package/esm/core/index.d.ts

@@ -22,6 +22,7 @@ export { Footer, defaultFooterElements } from './Footer/index.js';
 export type { FooterElement, TitleTranslations } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
+export { TransferList } from './TransferList/index.js';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';

package/esm/core/index.js

@@ -24,6 +24,7 @@ export { FileUpload, FileUploadTemplate, FileUploadCard, FileEmptyCard, } from '
 export { Footer, defaultFooterElements } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
+export { TransferList } from './TransferList/index.js';
 export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';

package/esm/core/utils/components/Divider.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
 declare type DividerProps = {
     /**

package/esm/core/utils/components/Divider.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 import { Box } from './Box.js';
 /**
  * Shows a divider

package/esm/core/utils/components/Flex.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
 import type { PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).

package/esm/core/utils/components/Flex.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 import { Box } from './Box.js';
 const sizeTokens = [
     '3xs',

package/esm/core/utils/components/Icon.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { AnyString } from '../types.js';
-import '@itwin/itwinui-css/css/utils.css';
 import type { PolymorphicForwardRefComponent } from '../props.js';
 export declare type IconProps = {
     /**

package/esm/core/utils/components/Icon.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 import { Box } from './Box.js';
 const getSizeValue = (size) => {
     switch (size) {

package/esm/core/utils/components/InputContainer.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
 export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;
     label?: React.ReactNode;