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

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

@@ -1,4 +1,3 @@
-var _a;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -6,7 +5,7 @@ var _a;
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks/index.js';
-const unstable_batchedUpdates = (_a = ReactDOM.unstable_batchedUpdates) !== null && _a !== void 0 ? _a : ((cb) => void cb());
+const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates ?? ((cb) => void cb());
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
         return ownerDocument.body;
@@ -23,8 +22,7 @@ const getElementStyle = (element, prop) => {
     return getComputedStyle(element, null).getPropertyValue(prop);
 };
 const getElementHeight = (element) => {
-    var _a;
-    return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+    return element?.getBoundingClientRect().height ?? 0;
 };
 const getElementHeightWithMargins = (element) => {
     if (!element) {
@@ -109,10 +107,8 @@ export const useVirtualization = (props) => {
     // Used to mark when scroll container has height (updated by resize observer)
     // because before that calculations are not right
     const [isMounted, setIsMounted] = React.useState(false);
-    const getScrollableContainer = () => {
-        var _a, _b;
-        return (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
-    };
+    const getScrollableContainer = () => scrollContainer.current ??
+        parentRef.current?.ownerDocument.scrollingElement;
     const visibleChildren = React.useMemo(() => {
         const arr = [];
         const endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
@@ -122,18 +118,18 @@ export const useVirtualization = (props) => {
         return arr;
     }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
     const updateChildHeight = React.useCallback(() => {
-        var _a, _b, _c, _d, _e, _f;
         if (!parentRef.current || !visibleChildren.length) {
             return;
         }
         const firstChild = parentRef.current.children.item(0);
         const secondChild = parentRef.current.children.item(1);
         const lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
-        const firstChildHeight = Number((_b = (_a = getElementHeightWithMargins(firstChild)) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : 0);
+        const firstChildHeight = Number(getElementHeightWithMargins(firstChild)?.toFixed(2) ?? 0);
         childHeight.current = {
             first: firstChildHeight,
-            middle: Number((_d = (_c = getElementHeightWithMargins(secondChild)) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : firstChildHeight),
-            last: Number((_f = (_e = getElementHeightWithMargins(lastChild)) === null || _e === void 0 ? void 0 : _e.toFixed(2)) !== null && _f !== void 0 ? _f : firstChildHeight),
+            middle: Number(getElementHeightWithMargins(secondChild)?.toFixed(2) ??
+                firstChildHeight),
+            last: Number(getElementHeightWithMargins(lastChild)?.toFixed(2) ?? firstChildHeight),
         };
     }, [visibleChildren.length]);
     const onResize = React.useCallback(({ height }) => {
@@ -151,14 +147,13 @@ export const useVirtualization = (props) => {
     // Find scrollable parent
     // Needed only on init
     useIsomorphicLayoutEffect(() => {
-        var _a;
-        const scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        const scrollableParent = getScrollableParent(parentRef.current, parentRef.current?.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
     useIsomorphicLayoutEffect(() => {
-        return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        return () => resizeObserver?.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
     useIsomorphicLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
@@ -185,23 +180,21 @@ export const useVirtualization = (props) => {
         updateVirtualScroll();
     }, [updateVirtualScroll]);
     const removeScrollListener = React.useCallback(() => {
-        var _a, _b;
         if (!onScrollRef.current) {
             return;
         }
         !scrollContainer.current ||
-            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)
-            ? (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener('scroll', onScrollRef.current)
+            scrollContainer.current === parentRef.current?.ownerDocument.body
+            ? parentRef.current?.ownerDocument.removeEventListener('scroll', onScrollRef.current)
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
     useIsomorphicLayoutEffect(() => {
-        var _a, _b;
         removeScrollListener();
         onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
-            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)) {
-            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', onScroll);
+            scrollContainer.current === parentRef.current?.ownerDocument.body) {
+            parentRef.current?.ownerDocument.addEventListener('scroll', onScroll);
         }
         else {
             scrollContainer.current.addEventListener('scroll', onScroll);

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

@@ -11,12 +11,12 @@ import styles from '../../../styles.js';
  * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
  */
 export const getContainer = (containerId, ownerDocument = getDocument()) => {
-    var _a, _b;
-    let container = (_a = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.getElementById(containerId)) !== null && _a !== void 0 ? _a : undefined;
+    let container = ownerDocument?.getElementById(containerId) ?? undefined;
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');
         container.setAttribute('id', containerId);
-        const root = (_b = ownerDocument.querySelector(`.${styles['iui-root']}`)) !== null && _b !== void 0 ? _b : ownerDocument.body;
+        const root = ownerDocument.querySelector(`.${styles['iui-root']}`) ??
+            ownerDocument.body;
         root.appendChild(container);
     }
     return container;
@@ -41,8 +41,8 @@ export const getWindow = () => {
  */
 export const mergeEventHandlers = (...callbacks) => (event) => {
     for (const cb of callbacks) {
-        cb === null || cb === void 0 ? void 0 : cb(event);
-        if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
+        cb?.(event);
+        if (event?.defaultPrevented) {
             return;
         }
     }

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

@@ -11,7 +11,7 @@ const _base = (defaultElement) => {
         const Comp = React.forwardRef(({ as = defaultElement, ...props }, ref) => {
             const Element = as || 'div'; // eslint-disable-line
             useGlobals();
-            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: getScopedClassName(cx(className, attrs === null || attrs === void 0 ? void 0 : attrs.className, props.className)) }));
+            return (React.createElement(Element, { ref: ref, ...attrs, ...props, className: getScopedClassName(cx(className, attrs?.className, props.className)) }));
         });
         Comp.displayName = getDisplayNameFromClass(className);
         return Comp;

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

@@ -6,4 +6,4 @@ import { getWindow } from './dom.js';
 /**
  * Returns true if the :has selector is supported in the browser
  */
-export const supportsHas = () => { var _a, _b, _c; return (_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'selector(:has(+ *))'); };
+export const supportsHas = () => getWindow()?.CSS?.supports?.('selector(:has(+ *))');

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

@@ -9,6 +9,5 @@ export * from './useMediaQuery.js';
 export * from './useSafeContext.js';
 export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
-export * from './useIsThemeAlreadySet.js';
 export * from './useIsClient.js';
 export * from './useId.js';

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

@@ -13,6 +13,5 @@ export * from './useMediaQuery.js';
 export * from './useSafeContext.js';
 export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
-export * from './useIsThemeAlreadySet.js';
 export * from './useIsClient.js';
 export * from './useId.js';

package/esm/core/utils/hooks/useContainerWidth.js

@@ -31,7 +31,7 @@ export const useContainerWidth = (watchResizes = true) => {
     const updateWidth = React.useCallback(({ width }) => setContentWidth(width), []);
     const [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
     if (!watchResizes) {
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        resizeObserver?.disconnect();
     }
     const refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
     return [refs, contentWidth];

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -7,13 +7,12 @@ import { getTranslateValues, getWindow } from '../functions/index.js';
 import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
 const getContainerRect = (containerRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const containerRect = containerRef?.current?.getBoundingClientRect();
     return {
-        top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
-        right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
-        bottom: (_h = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.innerHeight) !== null && _h !== void 0 ? _h : 0,
-        left: (_j = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _j !== void 0 ? _j : 0,
+        top: containerRect?.top ?? 0,
+        right: containerRect?.right ?? getWindow()?.innerWidth ?? 0,
+        bottom: containerRect?.bottom ?? getWindow()?.innerHeight ?? 0,
+        left: containerRect?.left ?? 0,
     };
 };
 /**
@@ -31,11 +30,10 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
     const translateY = React.useRef();
     const containerRectRef = React.useRef(getContainerRect(containerRef));
     const adjustTransform = React.useCallback(() => {
-        var _a;
         if (!elementRef.current || !enabled) {
             return;
         }
-        const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const { top, right, bottom, left } = elementRef.current?.getBoundingClientRect();
         let [newTranslateX, newTranslateY] = getTranslateValues(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {
@@ -55,10 +53,10 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
     }, [containerRef, elementRef, enabled]);
     const [resizeRef, resizeObserver] = useResizeObserver(adjustTransform);
-    resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
+    resizeRef(containerRef?.current);
     React.useEffect(() => {
         return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            resizeObserver?.disconnect();
         };
     }, [resizeObserver]);
     useEventListener('resize', () => {

package/esm/core/utils/hooks/useEventListener.js

@@ -25,7 +25,7 @@ export const useEventListener = (eventName, handler, element) => {
         if (!element) {
             return;
         }
-        const eventListener = (event) => { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
+        const eventListener = (event) => savedHandler.current?.(event);
         element.addEventListener(eventName, eventListener);
         return () => {
             element.removeEventListener(eventName, eventListener);

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

@@ -1,8 +1,15 @@
+import * as React from 'react';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
-export declare const useGlobals: () => void;
+export declare const useGlobals: () => {
+    theme?: import("../../index.js").ThemeType | undefined;
+    themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
+    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+} | undefined;
 /** Shows console error if ThemeProvider is not used */
-export declare const useThemeProviderWarning: () => void;
+export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/esm/core/utils/hooks/useGlobals.js

@@ -9,24 +9,26 @@ let isDev = false;
 try {
     isDev = process.env.NODE_ENV !== 'production';
 }
-catch (_a) { }
+catch { }
 const didLogWarning = {
     fontSize: false,
     themeProvider: false,
 };
 /**
  * Hook used in every component for any shared setup and side effects.
+ * Returns the nearest ThemeContext.
  *
  * @private
  */
 export const useGlobals = () => {
-    useThemeProviderWarning();
+    const themeContext = React.useContext(ThemeContext);
+    useThemeProviderWarning(themeContext);
     useRootFontSizeWarning();
+    return themeContext;
 };
 // ----------------------------------------------------------------------------
 /** Shows console error if ThemeProvider is not used */
-export const useThemeProviderWarning = () => {
-    const themeContext = React.useContext(ThemeContext);
+export const useThemeProviderWarning = (themeContext) => {
     React.useEffect(() => {
         if (isDev && !didLogWarning.themeProvider && !themeContext) {
             console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');

package/esm/core/utils/hooks/useId.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.
  *--------------------------------------------------------------------------------------------*/
-var _a;
 import * as React from 'react';
 import { getRandomValue } from '../functions/numbers.js';
 /**
@@ -16,4 +15,4 @@ export const useId = () => {
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));
+const useUniqueValue = _React.useId ?? (() => getRandomValue(10));

package/esm/core/utils/hooks/useIntersection.js

@@ -20,10 +20,9 @@ export const useIntersection = (onIntersect, options = {}, once = true) => {
     const { root, rootMargin, threshold } = options;
     const cleanupRef = React.useRef(() => { });
     const setRef = React.useCallback((node) => {
-        var _a, _b;
-        (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        cleanupRef.current?.();
         cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
-        if (!node || !((_b = getWindow()) === null || _b === void 0 ? void 0 : _b.IntersectionObserver)) {
+        if (!node || !getWindow()?.IntersectionObserver) {
             return;
         }
         const observer = new IntersectionObserver(([entry], obs) => {

package/esm/core/utils/hooks/useMediaQuery.js

@@ -8,27 +8,25 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 export const useMediaQuery = (queryString) => {
     const [matches, setMatches] = React.useState();
     useIsomorphicLayoutEffect(() => {
-        var _a, _b, _c;
-        const mediaQueryList = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        const mediaQueryList = getWindow()?.matchMedia?.(queryString);
         const handleChange = ({ matches }) => setMatches(matches);
         if (mediaQueryList != undefined) {
             setMatches(mediaQueryList.matches);
             try {
                 mediaQueryList.addEventListener('change', handleChange);
             }
-            catch (_d) {
+            catch {
                 // Safari 13 fallback
-                (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
+                mediaQueryList.addListener?.(handleChange);
             }
         }
         return () => {
-            var _a;
             try {
-                mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);
+                mediaQueryList?.removeEventListener('change', handleChange);
             }
-            catch (_b) {
+            catch {
                 // Safari 13 fallback
-                (_a = mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeListener) === null || _a === void 0 ? void 0 : _a.call(mediaQueryList, handleChange);
+                mediaQueryList?.removeListener?.(handleChange);
             }
         };
     }, [queryString]);

package/esm/core/utils/hooks/useOverflow.js

@@ -49,9 +49,8 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
     }, [containerSize, disabled, items]);
     const mergedRefs = useMergedRefs(containerRef, resizeRef);
     useIsomorphicLayoutEffect(() => {
-        var _a;
         if (!containerRef.current || disabled) {
-            (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            resizeObserverRef.current?.disconnect();
             return;
         }
         const dimension = orientation === 'horizontal' ? 'Width' : 'Height';

package/esm/core/utils/hooks/useResizeObserver.js

@@ -19,14 +19,13 @@ import { getWindow } from '../functions/dom.js';
 export const useResizeObserver = (onResize) => {
     const resizeObserver = React.useRef();
     const elementRef = React.useCallback((element) => {
-        var _a, _b, _c;
-        if (!((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
+        if (!getWindow()?.ResizeObserver) {
             return;
         }
-        (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();
+        resizeObserver.current?.disconnect();
         if (element) {
             resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
-            (_c = resizeObserver.current) === null || _c === void 0 ? void 0 : _c.observe(element);
+            resizeObserver.current?.observe(element);
         }
     }, [onResize]);
     return [elementRef, resizeObserver.current];

package/esm/styles.js

@@ -5,10 +5,8 @@ const styles = {
   "iui-root-background": "_iui3-root-background",
   "iui-alert": "_iui3-alert",
   "iui-alert-link": "_iui3-alert-link",
-  "iui-alert-button": "_iui3-alert-button",
-  "iui-alert-icon": "_iui3-alert-icon",
+  "iui-button": "_iui3-button",
   "iui-alert-message": "_iui3-alert-message",
-  "iui-alert-button-icon": "_iui3-alert-button-icon",
   "iui-anchor": "_iui3-anchor",
   "iui-anchor-external": "_iui3-anchor-external",
   "iui-avatar": "_iui3-avatar",
@@ -37,7 +35,6 @@ const styles = {
   "iui-breadcrumbs-list": "_iui3-breadcrumbs-list",
   "iui-breadcrumbs-item": "_iui3-breadcrumbs-item",
   "iui-breadcrumbs-item-overrides": "_iui3-breadcrumbs-item-overrides",
-  "iui-button": "_iui3-button",
   "iui-breadcrumbs-text": "_iui3-breadcrumbs-text",
   "iui-breadcrumbs-button": "_iui3-breadcrumbs-button",
   "iui-breadcrumbs-separator": "_iui3-breadcrumbs-separator",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.0-dev.1",
+  "version": "3.0.0-dev.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -82,7 +82,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@itwin/itwinui-css": "^2.0.0-dev.1",
+    "@itwin/itwinui-css": "^2.0.0-dev.2",
     "@itwin/itwinui-variables": "2.1.0-dev.0",
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.3.21",

package/styles.css

@@ -353,7 +353,7 @@
 :where(._iui3-root,._iui3-root *)::-webkit-scrollbar-thumb:hover{background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-3))}
 :where(._iui3-root,._iui3-root *)::-webkit-scrollbar-track,:where(._iui3-root,._iui3-root *)::-webkit-scrollbar-corner{background-color:#0000}
 :where(._iui3-root,._iui3-root *),:where(._iui3-root,._iui3-root *):before,:where(._iui3-root,._iui3-root *):after{box-sizing:border-box}
-._iui3-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);align-items:center;margin:0;padding:0;display:flex}
+._iui3-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);padding:0;align-items:center;margin:0;padding-inline-start:var(--iui-size-m);padding-inline-end:var(--iui-size-xs);display:flex}
 ._iui3-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}
 ._iui3-alert:where([data-iui-status=informational])::selection,._iui3-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=informational]) ._iui3-alert-link{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}
@@ -361,7 +361,7 @@
 @supports not selector(*:focus-visible){._iui3-alert:where([data-iui-status=informational]) ._iui3-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}
 ._iui3-alert:where([data-iui-status=informational]) ._iui3-alert-link::selection,._iui3-alert:where([data-iui-status=informational]) ._iui3-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=informational]) ._iui3-alert-link:hover{color:var(--iui-color-text-informational-hover)}
-._iui3-alert:where([data-iui-status=informational]) ._iui3-alert-button:focus{outline-color:var(--iui-color-text-informational)}
+._iui3-alert:where([data-iui-status=informational]) ._iui3-button:focus{outline-color:var(--iui-color-text-informational)}
 ._iui3-alert:where([data-iui-status=positive]){--_iui-alert-border-color:var(--iui-color-border-positive);--_iui-alert-icon-color:var(--iui-color-icon-positive)}
 ._iui3-alert:where([data-iui-status=positive])::selection,._iui3-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=positive]) ._iui3-alert-link{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}
@@ -369,7 +369,7 @@
 @supports not selector(*:focus-visible){._iui3-alert:where([data-iui-status=positive]) ._iui3-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}
 ._iui3-alert:where([data-iui-status=positive]) ._iui3-alert-link::selection,._iui3-alert:where([data-iui-status=positive]) ._iui3-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=positive]) ._iui3-alert-link:hover{color:var(--iui-color-text-positive-hover)}
-._iui3-alert:where([data-iui-status=positive]) ._iui3-alert-button:focus{outline-color:var(--iui-color-text-positive)}
+._iui3-alert:where([data-iui-status=positive]) ._iui3-button:focus{outline-color:var(--iui-color-text-positive)}
 ._iui3-alert:where([data-iui-status=warning]){--_iui-alert-border-color:var(--iui-color-border-warning);--_iui-alert-icon-color:var(--iui-color-icon-warning)}
 ._iui3-alert:where([data-iui-status=warning])::selection,._iui3-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=warning]) ._iui3-alert-link{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}
@@ -377,7 +377,7 @@
 @supports not selector(*:focus-visible){._iui3-alert:where([data-iui-status=warning]) ._iui3-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}
 ._iui3-alert:where([data-iui-status=warning]) ._iui3-alert-link::selection,._iui3-alert:where([data-iui-status=warning]) ._iui3-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=warning]) ._iui3-alert-link:hover{color:var(--iui-color-text-warning-hover)}
-._iui3-alert:where([data-iui-status=warning]) ._iui3-alert-button:focus{outline-color:var(--iui-color-text-warning)}
+._iui3-alert:where([data-iui-status=warning]) ._iui3-button:focus{outline-color:var(--iui-color-text-warning)}
 ._iui3-alert:where([data-iui-status=negative]){--_iui-alert-border-color:var(--iui-color-border-negative);--_iui-alert-icon-color:var(--iui-color-icon-negative)}
 ._iui3-alert:where([data-iui-status=negative])::selection,._iui3-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=negative]) ._iui3-alert-link{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}
@@ -385,21 +385,17 @@
 @supports not selector(*:focus-visible){._iui3-alert:where([data-iui-status=negative]) ._iui3-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}
 ._iui3-alert:where([data-iui-status=negative]) ._iui3-alert-link::selection,._iui3-alert:where([data-iui-status=negative]) ._iui3-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}
 ._iui3-alert:where([data-iui-status=negative]) ._iui3-alert-link:hover{color:var(--iui-color-text-negative-hover)}
-._iui3-alert:where([data-iui-status=negative]) ._iui3-alert-button:focus{outline-color:var(--iui-color-text-negative)}
+._iui3-alert:where([data-iui-status=negative]) ._iui3-button:focus{outline-color:var(--iui-color-text-negative)}
 ._iui3-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}
-._iui3-alert-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-left:var(--iui-size-m);fill:var(--_iui-alert-icon-color,var(--iui-color-icon-muted));flex-shrink:0;display:flex}
-@media (forced-colors:active){._iui3-alert-icon{fill:CanvasText}}
-._iui3-alert-message{margin:var(--iui-size-s)var(--iui-size-m);word-break:normal;overflow-wrap:anywhere}
-._iui3-alert-link{border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}
-._iui3-alert-link:hover{text-decoration:none}
-._iui3-alert-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);margin:0 0 0 auto;margin-right:var(--iui-size-xs);flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}
-._iui3-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}
-@supports not selector(*:focus-visible){._iui3-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}
-._iui3-alert-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}
-._iui3-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}
-._iui3-alert-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}
-._iui3-alert-button-icon{display:inline-flex}
-._iui3-alert-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}
+._iui3-alert-message{margin:var(--iui-size-s)var(--iui-size-m);word-break:normal;overflow-wrap:anywhere;flex:999}
+._iui3-alert-link{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}
+._iui3-alert-link:where(button){font:inherit;background:0 0;border:none;padding:0}
+._iui3-alert-link:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}
+@supports not selector(*:focus-visible){._iui3-alert-link:focus{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}}
+._iui3-alert-link:hover{color:var(--iui-color-text-accent-hover);text-decoration:underline}
+@media (prefers-contrast:more){._iui3-alert-link{text-decoration:underline}._iui3-alert-link:hover{text-decoration:none}}
+:is([data-iui-contrast=high] ._iui3-alert-link){text-decoration:underline}
+:is([data-iui-contrast=high] ._iui3-alert-link):hover,._iui3-alert-link:hover{text-decoration:none}
 ._iui3-anchor{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;text-decoration:none}
 ._iui3-anchor:where(button){font:inherit;background:0 0;border:none;padding:0}
 ._iui3-anchor:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}
@@ -601,6 +597,7 @@
 ._iui3-carousel-navigation-right{justify-content:flex-end}
 ._iui3-checkbox-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}
 ._iui3-checkbox-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}
+._iui3-checkbox-wrapper>._iui3-checkbox-label,._iui3-checkbox-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}
 ._iui3-checkbox-wrapper>._iui3-checkbox-label svg,._iui3-checkbox-wrapper>._iui3-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}
 ._iui3-checkbox-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}
 ._iui3-checkbox-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}
@@ -935,7 +932,7 @@
 ._iui3-information-body-content._iui3-inline{row-gap:var(--iui-size-s);grid-template-columns:auto 1fr;align-items:center}
 ._iui3-information-body-content._iui3-inline ._iui3-input-label{margin:0 var(--iui-size-m)0 0;text-align:end;justify-self:end}
 ._iui3-information-body-content._iui3-inline ._iui3-input-label._iui3-required{margin-right:calc(var(--iui-size-2xs)*1.5 - 1px)}
-._iui3-input{--_iui-input-background-color:var(--iui-color-background);--_iui-input-border-color:var(--iui-color-border-foreground);--_iui-input-text-color:var(--iui-color-text);vertical-align:baseline;width:100%;font-family:inherit;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);border-radius:var(--iui-border-radius-1);-webkit-appearance:none;appearance:none;min-height:var(--_iui-input-min-height);padding:0;padding-block:var(--_iui-input-padding-block);padding-inline:var(--iui-size-s);color:var(--_iui-input-text-color);background-color:var(--_iui-input-background-color);border:none;border:1px solid var(--_iui-input-border-color);transition:border-color var(--iui-duration-1)ease-out;--_iui-input-padding-block:var(--iui-size-2xs);--_iui-input-min-height:var(--iui-component-height);margin:0}
+._iui3-input{--_iui-input-background-color:var(--iui-color-background);--_iui-input-border-color:var(--iui-color-border-foreground);--_iui-input-text-color:var(--iui-color-text);vertical-align:baseline;width:100%;font-family:inherit;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);border-radius:var(--iui-border-radius-1);-webkit-appearance:none;appearance:none;min-height:var(--_iui-input-min-height);padding:0;padding-block:var(--_iui-input-padding-block);padding-inline:var(--iui-size-s);color:var(--_iui-input-text-color);background-color:var(--_iui-input-background-color);border:none;border:1px solid var(--_iui-input-border-color);transition:border-color var(--iui-duration-1)ease-out;--_iui-input-padding-block:var(--iui-size-2xs);--_iui-input-min-height:var(--iui-component-height);margin:0}
 ._iui3-input:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
 @supports not selector(*:focus-visible){._iui3-input:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}
 ._iui3-input::placeholder{--_iui-input-text-color:var(--iui-color-text-disabled);-webkit-user-select:none;user-select:none;color:var(--_iui-input-text-color)}
@@ -1166,6 +1163,7 @@
 ._iui3-progress-indicator-overlay ._iui3-overlay-exiting{animation:_iui3-closeAnimation var(--iui-duration-1)linear}
 ._iui3-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}
 ._iui3-radio-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}
+._iui3-radio-wrapper>._iui3-checkbox-label,._iui3-radio-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}
 ._iui3-radio-wrapper>._iui3-checkbox-label svg,._iui3-radio-wrapper>._iui3-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}
 ._iui3-radio-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}
 ._iui3-radio-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}
@@ -1229,7 +1227,7 @@
 ._iui3-expandable-searchbox:where([data-iui-expanded=true]){width:100%;border-color:var(--_iui-input-border-color)}
 ._iui3-search-icon{margin:0 var(--iui-size-s)}
 ._iui3-search-icon:is(:first-child){margin:0 var(--_iui-flex-input-icon-margin,10px)}
-._iui3-select-button{width:100%;border-radius:var(--iui-border-radius-1);min-height:var(--_iui-select-min-height);padding-block:var(--_iui-select-padding-block);padding-inline:var(--iui-size-s);gap:var(--iui-size-xs);transition:border-color var(--iui-duration-1)ease-out;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);background-color:var(--iui-color-background);border:1px solid var(--iui-color-border-foreground);--_iui-select-padding-block:var(--iui-size-2xs);--_iui-select-min-height:var(--iui-component-height);align-items:center;display:flex;position:relative;overflow:hidden}
+._iui3-select-button{width:100%;border-radius:var(--iui-border-radius-1);min-height:var(--_iui-select-min-height);padding-block:var(--_iui-select-padding-block);padding-inline:var(--iui-size-s);gap:var(--iui-size-xs);transition:border-color var(--iui-duration-1)ease-out;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);background-color:var(--iui-color-background);border:1px solid var(--iui-color-border-foreground);line-height:var(--iui-size-l);--_iui-select-padding-block:var(--iui-size-2xs);--_iui-select-min-height:var(--iui-component-height);align-items:center;display:flex;position:relative;overflow:hidden}
 ._iui3-select-button:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
 @supports not selector(*:focus-visible){._iui3-select-button:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}
 ._iui3-select-button._iui3-disabled{background-color:var(--iui-color-background-disabled);border-color:var(--iui-color-border-disabled);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-disabled);cursor:not-allowed}

package/cjs/core/utils/hooks/useIsThemeAlreadySet.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-/**
- * Hook that returns a boolean ref which is true if either:
- * - There is a parent `ThemeProvider` in the tree, or
- * - The <body> element has data-iui-theme attribute
- */
-export declare const useIsThemeAlreadySet: (ownerDocument?: Document | undefined) => React.MutableRefObject<boolean>;

package/cjs/core/utils/hooks/useIsThemeAlreadySet.js

@@ -1,54 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsThemeAlreadySet = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
-const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
-const index_js_1 = require("../functions/index.js");
-/**
- * Hook that returns a boolean ref which is true if either:
- * - There is a parent `ThemeProvider` in the tree, or
- * - The <body> element has data-iui-theme attribute
- */
-const useIsThemeAlreadySet = (ownerDocument = (0, index_js_1.getDocument)()) => {
-    const parentContext = React.useContext(ThemeContext_js_1.ThemeContext);
-    const isThemeAlreadySet = React.useRef(!!parentContext || !!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.dataset.iuiTheme));
-    (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
-        if (parentContext ||
-            (ownerDocument && !!ownerDocument.body.dataset.iuiTheme)) {
-            isThemeAlreadySet.current = true;
-        }
-        return () => {
-            isThemeAlreadySet.current = false;
-        };
-    }, [parentContext, ownerDocument]);
-    return isThemeAlreadySet;
-};
-exports.useIsThemeAlreadySet = useIsThemeAlreadySet;

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-/**
- * Hook that returns a boolean ref which is true if either:
- * - There is a parent `ThemeProvider` in the tree, or
- * - The <body> element has data-iui-theme attribute
- */
-export declare const useIsThemeAlreadySet: (ownerDocument?: Document | undefined) => React.MutableRefObject<boolean>;