@itwin/itwinui-react 2.11.11 → 2.12.1

package/esm/core/Tile/Tile.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { StatusIconMap, useTheme, SvgMore, SvgNew, SvgCheckmark, LinkAction, useSafeContext, supportsHas, } 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';

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { StylingProps } 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 { useTheme } 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 } 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,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 export 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, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/toggle-switch.css';
 /**
  * A switch for turning on and off.
  * @example

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 { useTheme, Popover } 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/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 { useTheme, getFocusableElements, useVirtualization, mergeRefs, } 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';
 export 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, useTheme } 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 @@
 /// <reference types="react" />
 import type { IconButtonProps } from '../Buttons/IconButton/index.js';
-import '@itwin/itwinui-css/css/tree.css';
 export 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 = (props) => {
     const { isExpanded, ...rest } = props;
     return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ...rest },

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/anchor.css';
 declare type AnchorOwnProps = Record<never, never>;
 export declare type AnchorProps<T extends React.ElementType = 'a'> = PolymorphicComponentProps<T, AnchorOwnProps>;
 /**

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

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme } 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,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/blockquote.css';
 export 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 { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/blockquote.css';
 /**
  * Basic blockquote component
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'body'.
  */

package/esm/core/Typography/Body/Body.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'body'.
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/code.css';
 export declare type CodeProps = {
     /**
      * A piece of inline code.

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

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/code.css';
 /**
  * Inline code element.
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type HeadlineProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Headline/Headline.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { CommonProps } 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 { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.
  */

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type LeadingProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Leading/Leading.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type SmallProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Small/Small.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'small'.
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type SubheadingProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Subheading/Subheading.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 declare type TextOwnProps = {
     /**
      * 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 { useTheme } 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/Typography/Title/Title.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/text.css';
 export declare type TitleProps = {
     /**
      * Set text to muted.

package/esm/core/Typography/Title/Title.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { useTheme } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/text.css';
 /**
  * @deprecated Since v2, use `Text` with variant 'title'.
  * @example

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/utils.css';
 export declare type DividerProps = {
     /**
      * Sets the orientation of the divider

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

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../hooks/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * 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 { PolymorphicComponentProps, 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,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
+import { useTheme } from '../hooks/useTheme.js';
 const sizeTokens = [
     '3xs',
     '2xs',
@@ -26,6 +26,7 @@ const getValueForToken = (token) => {
 // Main Flex component
 const FlexComponent = React.forwardRef((props, ref) => {
     const { as: Element = 'div', display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
+    useTheme();
     return (React.createElement(Element, { className: cx('iui-flex', className), style: {
             '--iui-flex-display': display,
             '--iui-flex-direction': flexDirection,

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';
 export declare type IconProps = {
     /**
      * Size of the svg.

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
+import { useTheme } from '../hooks/useTheme.js';
 const getSizeValue = (size) => {
     switch (size) {
         case 'small':
@@ -33,6 +33,7 @@ const getSizeValue = (size) => {
  */
 export const Icon = React.forwardRef((props, ref) => {
     const { size = 'medium', fill = 'default', className, ...rest } = props;
+    useTheme();
     return (React.createElement("span", { className: cx('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
 });
 export default Icon;

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;

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private

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

@@ -1,5 +1,4 @@
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/input-container.css';
 declare type InputFlexContainerOwnProps = {
     isDisabled?: boolean;
     status?: 'positive' | 'warning' | 'negative';

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

@@ -4,12 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/input-container.css';
+import { useTheme } from '../hooks/useTheme.js';
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 export const InputFlexContainer = React.forwardRef((props, ref) => {
     const { as: Element = 'div', isDisabled, status, children, className, style, ...rest } = props;
+    useTheme();
     return (React.createElement(Element, { className: cx('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
 });

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

@@ -1,5 +1,4 @@
 import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
-import '@itwin/itwinui-css/css/utils.css';
 declare type LinkActionOwnProps = {};
 declare type LinkBoxOwnProps = {};
 export declare type LinkActionProps = PolymorphicComponentProps<'a', LinkActionOwnProps>;

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/utils.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.
@@ -26,7 +25,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "children" | "theme" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import { useMergedRefs, useIsClient } from '../hooks/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 import { ThemeContext } from '../../ThemeProvider/ThemeProvider.js';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)

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

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

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

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../hooks/index.js';
-import '@itwin/itwinui-css/css/utils.css';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.

package/esm/core/utils/functions/dom.d.ts

@@ -22,3 +22,9 @@ export declare const getWindow: () => (Window & typeof globalThis) | undefined;
  * `defaultPrevented` is respected for each callback.
  */
 export declare const mergeEventHandlers: <E extends import("react").SyntheticEvent<Element, Event>>(...callbacks: (((event: E) => void) | undefined)[]) => (event: E) => void;
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];

package/esm/core/utils/functions/dom.js

@@ -46,3 +46,16 @@ export const mergeEventHandlers = (...callbacks) => (event) => {
         }
     }
 };
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
+ */
+export const getTranslateValues = (element) => {
+    if (!element) {
+        return [];
+    }
+    const transformValue = getComputedStyle(element).getPropertyValue('transform');
+    const matrix = new DOMMatrix(transformValue);
+    return [matrix.m41, matrix.m42];
+};

package/esm/core/utils/functions/index.d.ts

@@ -3,5 +3,4 @@ export * from './dom.js';
 export * from './colors.js';
 export * from './numbers.js';
 export * from './focusable.js';
-export * from './styles.js';
 export * from './supports.js';

package/esm/core/utils/functions/index.js

@@ -7,5 +7,4 @@ export * from './dom.js';
 export * from './colors.js';
 export * from './numbers.js';
 export * from './focusable.js';
-export * from './styles.js';
 export * from './supports.js';

package/esm/core/utils/hooks/useStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dynamically loads the iTwinUI styles as a constructed stylesheet,
+ * falling back to a regular `<style>` tag in `<head>`.
+ */
+export declare const useStyles: (options?: {
+    includeCss?: boolean | {
+        withLayer: boolean;
+    };
+    document?: () => Document | undefined;
+}) => void;