@itwin/itwinui-react 2.11.10 → 2.12.0

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -34,8 +34,7 @@ exports.ThemeContext = exports.ThemeProvider = 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/global.css");
-require("@itwin/itwinui-variables/index.css");
+const useStyles_js_1 = require("../utils/hooks/useStyles.js");
 /**
  * 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
@@ -64,19 +63,20 @@ require("@itwin/itwinui-variables/index.css");
  */
 exports.ThemeProvider = React.forwardRef((props, ref) => {
     var _a;
-    const { theme: themeProp, children, themeOptions, ...rest } = props;
+    const { theme: themeProp, children, themeOptions, includeCss = { withLayer: true }, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = (0, index_js_1.useMergedRefs)(rootRef, ref);
     const hasChildren = React.Children.count(children) > 0;
     const parentContext = React.useContext(exports.ThemeContext);
     const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
-    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef }), [theme, themeOptions]);
+    const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef, includeCss }), [theme, themeOptions, includeCss]);
     // if no children, then fallback to this wrapper component which calls useTheme
     if (!hasChildren) {
         return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
     }
     // now that we know there are children, we can render the root and provide the context value
     return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
+        includeCss ? (React.createElement(Styles, { includeCss: includeCss, document: () => { var _a; return (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument; } })) : null,
         React.createElement(exports.ThemeContext.Provider, { value: contextValue }, children)));
 });
 exports.default = exports.ThemeProvider;
@@ -99,3 +99,14 @@ const ThemeLogicWrapper = (props) => {
     (0, index_js_1.useTheme)(theme, themeOptions);
     return React.createElement(React.Fragment, null);
 };
+/**
+ * Wrapper around `useStyles` hook.
+ *
+ * Must be the first thing rendered by `ThemeProvider`, to ensure that its
+ * `useStyles` is called before any subsequent `useStyles` calls from child components.
+ */
+const Styles = (props) => {
+    const { includeCss, document } = props;
+    (0, useStyles_js_1.useStyles)({ includeCss, document });
+    return null;
+};

package/cjs/core/Tile/Tile.d.ts

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

package/cjs/core/Tile/Tile.js

@@ -34,7 +34,6 @@ exports.Tile = exports.TileAction = 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/tile.css");
 const index_js_2 = require("../DropdownMenu/index.js");
 const index_js_3 = require("../Buttons/index.js");
 const index_js_4 = require("../ProgressIndicators/index.js");

package/cjs/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/cjs/core/TimePicker/TimePicker.js

@@ -34,7 +34,6 @@ exports.TimePicker = 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/time-picker.css");
 const isSameHour = (date1, date2, meridiem) => {
     const adjustedHours = meridiem
         ? formatHourFrom12(date1.getHours(), meridiem)

package/cjs/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/cjs/core/Toast/Toast.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const react_transition_group_1 = require("react-transition-group");
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/toast.css");
 const index_js_2 = require("../Buttons/index.js");
 const isMotionOk = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, index_js_1.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/cjs/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/cjs/core/Toast/ToastWrapper.js

@@ -31,7 +31,6 @@ exports.ToastWrapper = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-require("@itwin/itwinui-css/css/toast.css");
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Toast_js_1 = __importDefault(require("./Toast.js"));

package/cjs/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/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -34,7 +34,6 @@ exports.ToggleSwitch = 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/toggle-switch.css");
 /**
  * A switch for turning on and off.
  * @example

package/cjs/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/cjs/core/Tooltip/Tooltip.js

@@ -34,7 +34,6 @@ exports.Tooltip = 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/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/cjs/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/cjs/core/Tree/Tree.js

@@ -33,7 +33,6 @@ exports.Tree = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tree.css");
 const classnames_1 = __importDefault(require("classnames"));
 const TreeContext_js_1 = require("./TreeContext.js");
 /**

package/cjs/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/cjs/core/Tree/TreeNode.js

@@ -33,7 +33,6 @@ exports.TreeNode = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/tree.css");
 const classnames_1 = __importDefault(require("classnames"));
 const TreeNodeExpander_js_1 = require("./TreeNodeExpander.js");
 const TreeContext_js_1 = require("./TreeContext.js");

package/cjs/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/cjs/core/Tree/TreeNodeExpander.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const index_js_2 = require("../Buttons/IconButton/index.js");
-require("@itwin/itwinui-css/css/tree.css");
 const TreeNodeExpander = (props) => {
     const { isExpanded, ...rest } = props;
     return (React.createElement(index_js_2.IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ...rest },

package/cjs/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/cjs/core/Typography/Anchor/Anchor.js

@@ -34,7 +34,6 @@ exports.Anchor = 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/anchor.css");
 /**
  * A consistently styled anchor component.
  *

package/cjs/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/cjs/core/Typography/Blockquote/Blockquote.js

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

package/cjs/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/cjs/core/Typography/Body/Body.js

@@ -34,7 +34,6 @@ exports.Body = 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/text.css");
 /**
  * @deprecated Since v2, use `Text` with variant 'body'.
  * @example

package/cjs/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/cjs/core/Typography/Code/Code.js

@@ -34,7 +34,6 @@ exports.Code = 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/code.css");
 /**
  * Inline code element.
  * @example

package/cjs/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/cjs/core/Typography/Headline/Headline.js

@@ -34,7 +34,6 @@ exports.Headline = 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/text.css");
 /**
  * @deprecated Since v2, use `Text` with variant 'headline'.
  * @example

package/cjs/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/cjs/core/Typography/Kbd/Kbd.js

@@ -34,7 +34,6 @@ exports.Kbd = exports.KbdKeys = 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/keyboard.css");
 /**
  * Some predefined strings for common keyboard keys.
  */

package/cjs/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/cjs/core/Typography/Leading/Leading.js

@@ -34,7 +34,6 @@ exports.Leading = 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/text.css");
 /**
  * @deprecated Since v2, use `Text` with variant 'leading'.
  * @example

package/cjs/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/cjs/core/Typography/Small/Small.js

@@ -34,7 +34,6 @@ exports.Small = 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/text.css");
 /**
  * @deprecated Since v2, use `Text` with variant 'small'.
  * @example

package/cjs/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/cjs/core/Typography/Subheading/Subheading.js

@@ -34,7 +34,6 @@ exports.Subheading = 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/text.css");
 /**
  * @deprecated Since v2, use `Text` with variant 'subheading'.
  * @example

package/cjs/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/cjs/core/Typography/Text/Text.js

@@ -34,7 +34,6 @@ exports.Text = 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/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/cjs/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/cjs/core/Typography/Title/Title.js

@@ -34,7 +34,6 @@ exports.Title = 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/text.css");
 /**
  * @deprecated Since v2, use `Text` with variant 'title'.
  * @example

package/cjs/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/cjs/core/utils/components/Divider.js

@@ -34,7 +34,6 @@ exports.Divider = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../hooks/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * Shows a divider
  */

package/cjs/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/cjs/core/utils/components/Flex.js

@@ -33,7 +33,7 @@ exports.Flex = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
+const useTheme_js_1 = require("../hooks/useTheme.js");
 const sizeTokens = [
     '3xs',
     '2xs',
@@ -55,6 +55,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;
+    (0, useTheme_js_1.useTheme)();
     return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex', className), style: {
             '--iui-flex-display': display,
             '--iui-flex-direction': flexDirection,

package/cjs/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/cjs/core/utils/components/Icon.js

@@ -33,7 +33,7 @@ exports.Icon = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
+const useTheme_js_1 = require("../hooks/useTheme.js");
 const getSizeValue = (size) => {
     switch (size) {
         case 'small':
@@ -62,6 +62,7 @@ const getSizeValue = (size) => {
  */
 exports.Icon = React.forwardRef((props, ref) => {
     const { size = 'medium', fill = 'default', className, ...rest } = props;
+    (0, useTheme_js_1.useTheme)();
     return (React.createElement("span", { className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
 });
 exports.default = exports.Icon;

package/cjs/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/cjs/core/utils/components/InputContainer.js

@@ -33,7 +33,6 @@ exports.InputContainer = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private

package/cjs/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/cjs/core/utils/components/InputFlexContainer.js

@@ -10,12 +10,13 @@ exports.InputFlexContainer = void 0;
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/input-container.css");
+const useTheme_js_1 = require("../hooks/useTheme.js");
 /**
  * Utility component for input container with display flex abilities.
  * @private
  */
 exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
     const { as: Element = 'div', isDisabled, status, children, className, style, ...rest } = props;
+    (0, useTheme_js_1.useTheme)();
     return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
 });

package/cjs/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/cjs/core/utils/components/LinkAction.js

@@ -33,7 +33,6 @@ exports.LinkBox = exports.LinkAction = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/cjs/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/cjs/core/utils/components/Popover.js

@@ -35,7 +35,6 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("@tippyjs/react"));
 const index_js_1 = require("../hooks/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 const ThemeProvider_js_1 = require("../../ThemeProvider/ThemeProvider.js");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)

package/cjs/core/utils/components/Resizer.js

@@ -117,15 +117,19 @@ const Resizer = (props) => {
                 }
                 case 'right': {
                     width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 case 'bottom-right': {
                     width = elementRef.current.style.width = `${initialWidth - diffX}px`;
                     height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 case 'bottom': {
                     height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 case 'bottom-left': {
@@ -144,6 +148,7 @@ const Resizer = (props) => {
                         break;
                     }
                     width = elementRef.current.style.width = `${newWidth}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
                     translateX = initialTranslateX - diffX;
                     elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;

package/cjs/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/cjs/core/utils/components/VisuallyHidden.js

@@ -34,7 +34,6 @@ exports.VisuallyHidden = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../hooks/index.js");
-require("@itwin/itwinui-css/css/utils.css");
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.

package/cjs/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[];