@itwin/itwinui-react 1.20.0 → 1.21.0

package/cjs/core/Tabs/Tabs.js

@@ -32,12 +32,9 @@ exports.VerticalTabs = exports.HorizontalTabs = exports.Tabs = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tabs.css");
-var useResizeObserver_1 = require("../utils/hooks/useResizeObserver");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
 var Tab_1 = require("./Tab");
-var common_1 = require("../utils/common");
 /**
  * Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  * @example
@@ -64,23 +61,23 @@ var common_1 = require("../utils/common");
  */
 var Tabs = function (props) {
     var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var tablistRef = react_1.default.useRef(null);
     var _e = react_1.default.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _e[0], setTabsWidth = _e[1];
     var updateTabsWidth = react_1.default.useCallback(function (_a) {
         var width = _a.width;
         return setTabsWidth(width);
     }, []);
-    var tablistSizeRef = (0, useResizeObserver_1.useResizeObserver)(updateTabsWidth)[0];
-    var refs = (0, useMergedRefs_1.useMergedRefs)(tablistRef, tablistSizeRef);
+    var tablistSizeRef = (0, utils_1.useResizeObserver)(updateTabsWidth)[0];
+    var refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
     var _f = react_1.default.useState(function () {
         return activeIndex != null
-            ? (0, common_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
+            ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
             : 0;
     }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
     react_1.default.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
-            setCurrentActiveIndex((0, common_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
+            setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     var _g = react_1.default.useState({}), stripeStyle = _g[0], setStripeStyle = _g[1];

package/cjs/core/Tag/Tag.d.ts

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

package/cjs/core/Tag/Tag.js

@@ -33,7 +33,7 @@ exports.Tag = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tag.css");
 var Buttons_1 = require("../Buttons");
 /**
@@ -44,7 +44,7 @@ var Buttons_1 = require("../Buttons");
  */
 var Tag = function (props) {
     var className = props.className, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, onRemove = props.onRemove, rest = __rest(props, ["className", "variant", "children", "onRemove"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-tag', { 'iui-basic': variant === 'basic' }, className) }, rest),
         react_1.default.createElement("span", { className: 'iui-label' }, children),
         onRemove && (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', onClick: onRemove, "aria-label": 'Delete tag' },

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/tag.css';
-import { CommonProps } from '../utils/props';
 export declare type TagContainerProps = {
     /**
      * Tags inside the container.

package/cjs/core/Tag/TagContainer.js

@@ -32,7 +32,7 @@ exports.TagContainer = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tag.css");
 /**
  * TagContainer for grouping tags.
@@ -43,7 +43,7 @@ require("@itwin/itwinui-css/css/tag.css");
 var TagContainer = function (props) {
     var _a;
     var className = props.className, children = props.children, overflow = props.overflow, _b = props.background, background = _b === void 0 ? 'none' : _b, rest = __rest(props, ["className", "children", "overflow", "background"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tag-container', (_a = {},
             _a["iui-" + overflow] = !!overflow,
             _a['iui-visible'] = background !== 'none',

package/cjs/core/Textarea/Textarea.js

@@ -32,8 +32,7 @@ exports.Textarea = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Basic textarea component
@@ -43,9 +42,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.Textarea = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.rows, rows = _a === void 0 ? 3 : _a, _b = props.setFocus, setFocus = _b === void 0 ? false : _b, rest = __rest(props, ["className", "rows", "setFocus"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var textAreaRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, textAreaRef);
+    var refs = (0, utils_1.useMergedRefs)(ref, textAreaRef);
     react_1.default.useEffect(function () {
         if (textAreaRef.current && setFocus) {
             textAreaRef.current.focus();

package/cjs/core/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeOptions, ThemeType } from '../utils/hooks/useTheme';
+import { ThemeOptions, ThemeType } from '../utils';
 export declare type ThemeProviderProps = {
     /**
      * Theme to be applied. If not set, light theme will be used.

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -9,13 +9,13 @@ exports.ThemeProvider = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 /**
  * Component providing global styles that are required for all components and allows changing theme.
  */
 var ThemeProvider = function (props) {
     var theme = props.theme, children = props.children, themeOptions = props.themeOptions;
-    (0, useTheme_1.useTheme)(theme, themeOptions);
+    (0, utils_1.useTheme)(theme, themeOptions);
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 };
 exports.ThemeProvider = ThemeProvider;

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/tile.css';
-import { CommonProps } from '../utils/props';
 export declare type TileProps = {
     /**
      * Name or title of the tile.
@@ -39,7 +39,7 @@ export declare type TileProps = {
      *  thumbnail={<SvgImodelHollow />}
      * />
      */
-    thumbnail: string | React.ReactNode;
+    thumbnail?: string | React.ReactNode;
     /**
      * `Badge` shown on the bottom right of thumbnail.
      */

package/cjs/core/Tile/Tile.js

@@ -35,7 +35,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
 var More_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/More"));
 var New_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/New"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tile.css");
 var DropdownMenu_1 = require("../DropdownMenu");
 var Buttons_1 = require("../Buttons");
@@ -58,12 +58,12 @@ var Buttons_1 = require("../Buttons");
  */
 var Tile = function (props) {
     var className = props.className, name = props.name, description = props.description, metadata = props.metadata, thumbnail = props.thumbnail, buttons = props.buttons, leftIcon = props.leftIcon, rightIcon = props.rightIcon, badge = props.badge, isNew = props.isNew, isSelected = props.isSelected, moreOptions = props.moreOptions, _a = props.variant, variant = _a === void 0 ? 'default' : _a, children = props.children, rest = __rest(props, ["className", "name", "description", "metadata", "thumbnail", "buttons", "leftIcon", "rightIcon", "badge", "isNew", "isSelected", "moreOptions", "variant", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _b = react_1.default.useState(false), isMenuVisible = _b[0], setIsMenuVisible = _b[1];
     var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
-        react_1.default.createElement("div", { className: 'iui-thumbnail' },
+        thumbnail && (react_1.default.createElement("div", { className: 'iui-thumbnail' },
             typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
                 className: 'iui-picture',
             })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
@@ -77,7 +77,7 @@ var Tile = function (props) {
                 react_1.default.cloneElement(rightIcon, {
                     className: 'iui-small iui-quick-action',
                 }),
-            badge && react_1.default.createElement("div", { className: 'iui-badge-container' }, badge)),
+            badge && react_1.default.createElement("div", { className: 'iui-badge-container' }, badge))),
         react_1.default.createElement("div", { className: 'iui-content' },
             react_1.default.createElement("div", { className: 'iui-name' },
                 isSelected && (react_1.default.createElement(Checkmark_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),

package/cjs/core/TimePicker/TimePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { StylingProps } from '../utils';
 import '@itwin/itwinui-css/css/time-picker.css';
-import { StylingProps } from '../utils/props';
 export declare type MeridiemType = 'AM' | 'PM';
 export declare type TimePickerProps = {
     /**

package/cjs/core/TimePicker/TimePicker.js

@@ -32,7 +32,7 @@ exports.TimePicker = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/time-picker.css");
 var isSameHour = function (date1, date2, meridiem) {
     var adjustedHours = meridiem
@@ -72,7 +72,7 @@ var TimePicker = function (props) {
     } : _h, _j = props.secondRenderer, secondRenderer = _j === void 0 ? function (date) {
         return date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 });
     } : _j, _k = props.meridiemRenderer, meridiemRenderer = _k === void 0 ? function (meridiem) { return meridiem; } : _k, className = props.className, rest = __rest(props, ["date", "onChange", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep", "setFocusHour", "hourRenderer", "minuteRenderer", "secondRenderer", "meridiemRenderer", "className"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _l = react_1.default.useState(date), selectedTime = _l[0], setSelectedTime = _l[1];
     var _m = react_1.default.useState(selectedTime !== null && selectedTime !== void 0 ? selectedTime : new Date()), focusedTime = _m[0], setFocusedTime = _m[1];
     var _o = react_1.default.useState(use12Hours ? ((focusedTime === null || focusedTime === void 0 ? void 0 : focusedTime.getHours()) > 11 ? 'PM' : 'AM') : undefined), meridiem = _o[0], setMeridiem = _o[1];

package/cjs/core/Toast/Toast.d.ts

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

package/cjs/core/Toast/Toast.js

@@ -34,10 +34,9 @@ var react_1 = __importDefault(require("react"));
 var react_transition_group_1 = require("react-transition-group");
 var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/toast-notification.css");
 var Buttons_1 = require("../Buttons");
-var common_1 = require("../utils/common");
 /**
  * Generic Toast Notification Component
  * @example
@@ -48,7 +47,7 @@ var common_1 = require("../utils/common");
  */
 var Toast = function (props) {
     var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, isVisible = props.isVisible, link = props.link, _b = props.duration, duration = _b === void 0 ? 7000 : _b, hasCloseButton = props.hasCloseButton, onRemove = props.onRemove, animateOutTo = props.animateOutTo, placementPosition = props.placementPosition;
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var closeTimeout = react_1.default.useRef(0);
     var _c = react_1.default.useState(isVisible), visible = _c[0], setVisible = _c[1];
     var _d = react_1.default.useState(0), height = _d[0], setHeight = _d[1];
@@ -86,7 +85,7 @@ var Toast = function (props) {
         setVisible(false);
     };
     var setCloseTimeout = function (timeout) {
-        var definedWindow = (0, common_1.getWindow)();
+        var definedWindow = (0, utils_1.getWindow)();
         if (!definedWindow) {
             return;
         }
@@ -96,7 +95,7 @@ var Toast = function (props) {
     };
     var clearCloseTimeout = function () {
         var _a;
-        (_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
+        (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
     };
     var onRef = function (ref) {
         if (ref) {
@@ -140,7 +139,7 @@ exports.Toast = Toast;
  */
 var ToastPresentation = function (props) {
     var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, link = props.link, hasCloseButton = props.hasCloseButton, onClose = props.onClose, className = props.className, rest = __rest(props, ["content", "category", "type", "link", "hasCloseButton", "onClose", "className"]);
-    var StatusIcon = common_1.StatusIconMap[category];
+    var StatusIcon = utils_1.StatusIconMap[category];
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-toast iui-" + category, className) }, rest),
         react_1.default.createElement("div", { className: 'iui-status-area' }, react_1.default.createElement(StatusIcon, { className: 'iui-icon' })),
         react_1.default.createElement("div", { className: 'iui-message' }, content),

package/cjs/core/Toast/Toaster.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-var common_1 = require("../utils/common");
+var utils_1 = require("../utils");
 var ToastWrapper_1 = require("./ToastWrapper");
 var TOASTS_CONTAINER_ID = 'iui-toasts-container';
 var Toaster = /** @class */ (function () {
@@ -83,7 +83,7 @@ var Toaster = /** @class */ (function () {
         this.updateView();
     };
     Toaster.prototype.updateView = function () {
-        var container = (0, common_1.getContainer)(TOASTS_CONTAINER_ID);
+        var container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
         if (!container) {
             return;
         }

package/cjs/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -47,7 +47,7 @@ export declare const ToggleSwitch: React.ForwardRefExoticComponent<{
      * Position of the label.
      * @default 'right'
      */
-    labelPosition?: "left" | "right" | undefined;
+    labelPosition?: "right" | "left" | undefined;
     /**
      * Set focus on toggle.
      * @default false

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -32,8 +32,7 @@ exports.ToggleSwitch = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/toggle-switch.css");
 /**
  * A switch for turning on and off.
@@ -55,9 +54,9 @@ require("@itwin/itwinui-css/css/toggle-switch.css");
  */
 exports.ToggleSwitch = react_1.default.forwardRef(function (props, ref) {
     var _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.labelPosition, labelPosition = _b === void 0 ? 'right' : _b, icon = props.icon, label = props.label, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, className = props.className, style = props.style, rest = __rest(props, ["disabled", "labelPosition", "icon", "label", "setFocus", "className", "style"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();

package/cjs/core/Tooltip/Tooltip.d.ts

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

package/cjs/core/Tooltip/Tooltip.js

@@ -32,9 +32,8 @@ exports.Tooltip = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/tooltip.css");
-var Popover_1 = require("../utils/Popover");
 /**
  * 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).
@@ -48,8 +47,8 @@ var Popover_1 = require("../utils/Popover");
  */
 var Tooltip = function (props) {
     var content = props.content, children = props.children, className = props.className, style = props.style, visible = props.visible, ref = props.ref, id = props.id, rest = __rest(props, ["content", "children", "className", "style", "visible", "ref", "id"]);
-    (0, useTheme_1.useTheme)();
-    return (react_1.default.createElement(Popover_1.Popover, __assign({ visible: visible, interactive: false, content: react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref }, rest), children && react_1.default.cloneElement(children, { title: undefined })));
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(utils_1.Popover, __assign({ visible: visible, interactive: false, content: react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref }, rest), children && react_1.default.cloneElement(children, { title: undefined })));
 };
 exports.Tooltip = Tooltip;
 exports.default = exports.Tooltip;

package/cjs/core/Typography/Blockquote/Blockquote.js

@@ -32,7 +32,7 @@ exports.Blockquote = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/blockquote.css");
 /**
  * Basic blockquote component
@@ -44,7 +44,7 @@ require("@itwin/itwinui-css/css/blockquote.css");
  */
 exports.Blockquote = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, footer = props.footer, rest = __rest(props, ["className", "children", "footer"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("blockquote", __assign({ className: (0, classnames_1.default)('iui-blockquote', className), ref: ref }, rest),
         children,
         footer && react_1.default.createElement("footer", null, footer)));

package/cjs/core/Typography/Body/Body.js

@@ -32,7 +32,7 @@ exports.Body = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * Body text, renders a paragraph element
@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Body = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, _b = props.isSkeleton, isSkeleton = _b === void 0 ? false : _b, rest = __rest(props, ["className", "isMuted", "isSkeleton"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("p", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-block', 'iui-text-spacing', {
             'iui-text-muted': isMuted,
             'iui-skeleton': isSkeleton,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/code.css';
 export declare type CodeProps = {
     /**

package/cjs/core/Typography/Code/Code.js

@@ -32,7 +32,7 @@ exports.Code = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/code.css");
 /**
  * Inline code element.
@@ -41,7 +41,7 @@ require("@itwin/itwinui-css/css/code.css");
  */
 var Code = function (props) {
     var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("code", __assign({ className: (0, classnames_1.default)('iui-code', className) }, rest), children));
 };
 exports.Code = Code;

package/cjs/core/Typography/Headline/Headline.js

@@ -32,7 +32,7 @@ exports.Headline = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * The biggest title on the page, renders a h1 element
@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Headline = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("h1", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-headline', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Headline;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/keyboard.css';
 /**
  * Some predefined strings for common keyboard keys.

package/cjs/core/Typography/Kbd/Kbd.js

@@ -32,7 +32,7 @@ exports.Kbd = exports.KbdKeys = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/keyboard.css");
 /**
  * Some predefined strings for common keyboard keys.
@@ -60,7 +60,7 @@ exports.KbdKeys = {
  */
 var Kbd = function (props) {
     var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("kbd", __assign({ className: (0, classnames_1.default)('iui-keyboard', className) }, rest), children));
 };
 exports.Kbd = Kbd;

package/cjs/core/Typography/Leading/Leading.js

@@ -32,7 +32,7 @@ exports.Leading = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * The third biggest title on the page, renders a h3 element
@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Leading = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("h3", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-leading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Leading;

package/cjs/core/Typography/Small/Small.js

@@ -32,7 +32,7 @@ exports.Small = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * Small text, renders a paragraph element
@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Small = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("p", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-small', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Small;

package/cjs/core/Typography/Subheading/Subheading.js

@@ -32,7 +32,7 @@ exports.Subheading = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * The third biggest title on the page, renders a h3 element
@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Subheading = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("h3", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-subheading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Subheading;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../../utils/props';
+import { CommonProps } from '../../utils';
 import '@itwin/itwinui-css/css/text.css';
 declare type TextOwnProps<T extends React.ElementType | React.ComponentType = 'div'> = {
     /**

package/cjs/core/Typography/Text/Text.js

@@ -32,7 +32,7 @@ exports.Text = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * Polymorphic typography component to render any kind of text as any kind of element.
@@ -47,7 +47,7 @@ require("@itwin/itwinui-css/css/text.css");
 var Text = function (props) {
     var _a;
     var _b = props.variant, variant = _b === void 0 ? 'body' : _b, _c = props.as, Element = _c === void 0 ? 'div' : _c, className = props.className, _d = props.isMuted, isMuted = _d === void 0 ? false : _d, _e = props.isSkeleton, isSkeleton = _e === void 0 ? false : _e, rest = __rest(props, ["variant", "as", "className", "isMuted", "isSkeleton"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)((_a = {},
             _a["iui-text-" + variant] = variant !== 'body',
             _a['iui-text-block'] = variant === 'body',

package/cjs/core/Typography/Title/Title.js

@@ -32,7 +32,7 @@ exports.Title = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/text.css");
 /**
  * The second biggest title on the page, renders a h2 element
@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Title = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("h2", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-title', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Title;

package/cjs/core/UserIcon/UserIcon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/user-icon.css';
 export declare type UserIconStatus = 'online' | 'busy' | 'away' | 'offline';
 export declare type StatusTitles = {

package/cjs/core/UserIcon/UserIcon.js

@@ -35,7 +35,7 @@ var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/
 var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/user-icon.css");
 exports.defaultStatusTitles = {
     away: 'Away',
@@ -61,7 +61,7 @@ exports.defaultStatusTitles = {
 var UserIcon = function (props) {
     var _a, _b;
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
     var iconMap = {
         away: react_1.default.createElement(Away_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),