@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/Tabs/Tabs.js

@@ -24,7 +24,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _Icon = require('../Icon/Icon.js');
 const TabsWrapper = _react.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     children,
     orientation = 'horizontal',
@@ -36,14 +36,14 @@ const TabsWrapper = _react.forwardRef((props, ref) => {
     onValueChange,
     ...rest
   } = props;
-  const [activeValue, setActiveValue] = (0, _index.useControlledState)(
+  let [activeValue, setActiveValue] = (0, _index.useControlledState)(
     defaultValue,
     activeValueProp,
     onValueChange,
   );
-  const [stripeProperties, setStripeProperties] = _react.useState({});
-  const [hasSublabel, setHasSublabel] = _react.useState(false);
-  const idPrefix = (0, _index.useId)();
+  let [stripeProperties, setStripeProperties] = _react.useState({});
+  let [hasSublabel, setHasSublabel] = _react.useState(false);
+  let idPrefix = (0, _index.useId)();
   return _react.createElement(
     _index.Box,
     {
@@ -79,16 +79,15 @@ const TabsWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
-TabsWrapper.displayName = 'Tabs.Wrapper';
 const TabList = _react.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { type, hasSublabel, color } = (0, _index.useSafeContext)(TabsContext);
-  const isClient = (0, _index.useIsClient)();
-  const tablistRef = _react.useRef(null);
-  const [tablistSizeRef, tabsWidth] = (0, _index.useContainerWidth)(
-    type !== 'default',
+  let { className, children, ...rest } = props;
+  let { type, hasSublabel, color } = (0, _index.useSafeContext)(TabsContext);
+  let isClient = (0, _index.useIsClient)();
+  let tablistRef = _react.useRef(null);
+  let [tablistSizeRef, tabsWidth] = (0, _index.useContainerWidth)(
+    'default' !== type,
   );
-  const refs = (0, _index.useMergedRefs)(
+  let refs = (0, _index.useMergedRefs)(
     ref,
     tablistRef,
     tablistSizeRef,
@@ -101,9 +100,9 @@ const TabList = _react.forwardRef((props, ref) => {
         'iui-tabs',
         `iui-${type}`,
         {
-          'iui-green': color === 'green',
-          'iui-animated': type !== 'default' && isClient,
-          'iui-not-animated': type !== 'default' && !isClient,
+          'iui-green': 'green' === color,
+          'iui-animated': 'default' !== type && isClient,
+          'iui-not-animated': 'default' !== type && !isClient,
           'iui-large': hasSublabel,
         },
         className,
@@ -124,10 +123,9 @@ const TabList = _react.forwardRef((props, ref) => {
     ),
   );
 });
-TabList.displayName = 'Tabs.TabList';
 const Tab = _react.forwardRef((props, forwardedRef) => {
-  const { className, children, value, label, ...rest } = props;
-  const {
+  let { className, children, value, label, ...rest } = props;
+  let {
     orientation,
     activeValue,
     setActiveValue,
@@ -136,27 +134,26 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
     idPrefix,
     focusActivationMode,
   } = (0, _index.useSafeContext)(TabsContext);
-  const { tabsWidth, tablistRef } = (0, _index.useSafeContext)(TabListContext);
-  const tabRef = _react.useRef();
-  const isActive = activeValue === value;
-  const isActiveRef = (0, _index.useLatestRef)(isActive);
+  let { tabsWidth, tablistRef } = (0, _index.useSafeContext)(TabListContext);
+  let tabRef = _react.useRef();
+  let isActive = activeValue === value;
+  let isActiveRef = (0, _index.useLatestRef)(isActive);
   (0, _index.useLayoutEffect)(() => {
-    if (isActiveRef.current) {
+    if (isActiveRef.current)
       tabRef.current?.parentElement?.scrollTo({
-        [orientation === 'horizontal' ? 'left' : 'top']:
+        ['horizontal' === orientation ? 'left' : 'top']:
           tabRef.current?.[
-            orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'
+            'horizontal' === orientation ? 'offsetLeft' : 'offsetTop'
           ] - 4,
         behavior: 'instant',
       });
-    }
   }, [isActiveRef, orientation]);
   (0, _index.useLayoutEffect)(() => {
-    const updateStripe = () => {
-      const currentTabRect = tabRef.current?.getBoundingClientRect();
-      const tabslistRect = tablistRef.current?.getBoundingClientRect();
-      const tabsStripePosition =
-        currentTabRect != null && tabslistRect != null
+    let updateStripe = () => {
+      let currentTabRect = tabRef.current?.getBoundingClientRect();
+      let tabslistRect = tablistRef.current?.getBoundingClientRect();
+      let tabsStripePosition =
+        null != currentTabRect && null != tabslistRect
           ? {
               horizontal: currentTabRect.x - tabslistRect.x,
               vertical: currentTabRect.y - tabslistRect.y,
@@ -167,70 +164,55 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
             };
       setStripeProperties({
         '--iui-tabs-stripe-size':
-          orientation === 'horizontal'
+          'horizontal' === orientation
             ? `${currentTabRect?.width}px`
             : `${currentTabRect?.height}px`,
         '--iui-tabs-stripe-position':
-          orientation === 'horizontal'
+          'horizontal' === orientation
             ? `${tabsStripePosition.horizontal}px`
             : `${tabsStripePosition.vertical}px`,
       });
     };
-    if (type !== 'default' && isActive) {
-      updateStripe();
-    }
+    if ('default' !== type && isActive) updateStripe();
   }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
-  const onKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const allTabs = Array.from(
-      event.currentTarget.parentElement?.children ?? [],
-    );
-    const nextTab = tabRef.current?.nextElementSibling ?? allTabs.at(0);
-    const previousTab =
-      tabRef.current?.previousElementSibling ?? allTabs.at(-1);
+  let onKeyDown = (event) => {
+    if (event.altKey) return;
+    let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);
+    let nextTab = tabRef.current?.nextElementSibling ?? allTabs.at(0);
+    let previousTab = tabRef.current?.previousElementSibling ?? allTabs.at(-1);
     switch (event.key) {
-      case 'ArrowDown': {
-        if (orientation === 'vertical') {
+      case 'ArrowDown':
+        if ('vertical' === orientation) {
           nextTab?.focus();
           event.preventDefault();
         }
         break;
-      }
-      case 'ArrowRight': {
-        if (orientation === 'horizontal') {
+      case 'ArrowRight':
+        if ('horizontal' === orientation) {
           nextTab?.focus();
           event.preventDefault();
         }
         break;
-      }
-      case 'ArrowUp': {
-        if (orientation === 'vertical') {
+      case 'ArrowUp':
+        if ('vertical' === orientation) {
           previousTab?.focus();
           event.preventDefault();
         }
         break;
-      }
-      case 'ArrowLeft': {
-        if (orientation === 'horizontal') {
+      case 'ArrowLeft':
+        if ('horizontal' === orientation) {
           previousTab?.focus();
           event.preventDefault();
         }
         break;
-      }
       default:
         break;
     }
   };
-  const setInitialActiveRef = _react.useCallback(
+  let setInitialActiveRef = _react.useCallback(
     (element) => {
-      if (activeValue !== undefined) {
-        return;
-      }
-      if (element?.matches(':first-of-type')) {
-        setActiveValue(value);
-      }
+      if (void 0 !== activeValue) return;
+      if (element?.matches(':first-of-type')) setActiveValue(value);
     },
     [activeValue, setActiveValue, value],
   );
@@ -254,34 +236,26 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
           block: 'nearest',
           inline: 'nearest',
         });
-        if (focusActivationMode === 'auto' && !props.disabled) {
+        if ('auto' === focusActivationMode && !props.disabled)
           setActiveValue(value);
-        }
       }),
     },
     label ? _react.createElement(Tabs.TabLabel, null, label) : children,
   );
 });
-Tab.displayName = 'Tabs.Tab';
-const TabIcon = _react.forwardRef((props, ref) => {
-  return _react.createElement(_Icon.Icon, {
+const TabIcon = _react.forwardRef((props, ref) =>
+  _react.createElement(_Icon.Icon, {
     ...props,
     className: (0, _classnames.default)('iui-tab-icon', props?.className),
     ref: ref,
-  });
-});
-TabIcon.displayName = 'Tabs.TabIcon';
+  }),
+);
 const TabLabel = _index.polymorphic.span('iui-tab-label');
-TabLabel.displayName = 'Tabs.TabLabel';
 const TabDescription = _react.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { hasSublabel, setHasSublabel } = (0, _index.useSafeContext)(
-    TabsContext,
-  );
+  let { className, children, ...rest } = props;
+  let { hasSublabel, setHasSublabel } = (0, _index.useSafeContext)(TabsContext);
   (0, _index.useLayoutEffect)(() => {
-    if (!hasSublabel) {
-      setHasSublabel(true);
-    }
+    if (!hasSublabel) setHasSublabel(true);
   }, [hasSublabel, setHasSublabel]);
   return _react.createElement(
     _index.Box,
@@ -294,9 +268,8 @@ const TabDescription = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TabDescription.displayName = 'Tabs.TabDescription';
 const TabsActions = _react.forwardRef((props, ref) => {
-  const { wrapperProps, className, children, ...rest } = props;
+  let { wrapperProps, className, children, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {
@@ -317,17 +290,16 @@ const TabsActions = _react.forwardRef((props, ref) => {
     ),
   );
 });
-TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = _react.forwardRef((props, ref) => {
-  const { value, className, children, ...rest } = props;
-  const { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
+  let { value, className, children, ...rest } = props;
+  let { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
   return _react.createElement(
     _index.Box,
     {
       className: (0, _classnames.default)('iui-tabs-content', className),
       'aria-labelledby': `${idPrefix}-tab-${value.replaceAll(' ', '-')}`,
       role: 'tabpanel',
-      hidden: activeValue !== value ? true : undefined,
+      hidden: activeValue !== value || void 0,
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
@@ -335,17 +307,16 @@ const TabsPanel = _react.forwardRef((props, ref) => {
     children,
   );
 });
-TabsPanel.displayName = 'Tabs.Panel';
 const LegacyTabsComponent = _react.forwardRef((props, forwardedRef) => {
   let actions;
-  if (props.type !== 'pill' && props.actions) {
+  if ('pill' !== props.type && props.actions) {
     actions = props.actions;
     props = {
       ...props,
     };
     delete props.actions;
   }
-  const {
+  let {
     labels,
     onTabSelected,
     focusActivationMode,
@@ -357,7 +328,7 @@ const LegacyTabsComponent = _react.forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const [activeIndex, setActiveIndex] = (0, _index.useControlledState)(
+  let [activeIndex, setActiveIndex] = (0, _index.useControlledState)(
     0,
     activeIndexProp,
     onTabSelected,
@@ -379,7 +350,7 @@ const LegacyTabsComponent = _react.forwardRef((props, forwardedRef) => {
         ref: forwardedRef,
       },
       labels.map((label, index) => {
-        const tabValue = `${index}`;
+        let tabValue = `${index}`;
         return _react.isValidElement(label)
           ? _react.cloneElement(label, {
               value: tabValue,
@@ -403,9 +374,8 @@ const LegacyTabsComponent = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-LegacyTabsComponent.displayName = 'Tabs';
 const LegacyTab = _react.forwardRef((props, forwardedRef) => {
-  const { label, sublabel, startIcon, children, value, ...rest } = props;
+  let { label, sublabel, startIcon, children, value, ...rest } = props;
   return _react.createElement(
     _react.Fragment,
     null,
@@ -433,17 +403,15 @@ const Tabs = Object.assign(LegacyTabsComponent, {
   Actions: TabsActions,
   Panel: TabsPanel,
 });
-const TabsContext = _react.createContext(undefined);
-const TabListContext = _react.createContext(undefined);
-const useScrollbarGutter = () => {
-  return _react.useCallback((element) => {
+const TabsContext = _react.createContext(void 0);
+const TabListContext = _react.createContext(void 0);
+const useScrollbarGutter = () =>
+  _react.useCallback((element) => {
     if (element) {
       if (element.scrollHeight > element.clientHeight) {
         element.style.scrollbarGutter = 'stable';
-        if (!CSS.supports('scrollbar-gutter: stable')) {
+        if (!CSS.supports('scrollbar-gutter: stable'))
           element.style.overflowY = 'scroll';
-        }
       }
     }
   }, []);
-};

package/cjs/core/Tag/Tag.js

@@ -16,7 +16,7 @@ const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _LinkAction = require('../LinkAction/LinkAction.js');
 const Tag = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     className,
     variant = 'default',
     children,
@@ -26,32 +26,32 @@ const Tag = _react.forwardRef((props, forwardedRef) => {
     removeButtonProps,
     ...rest
   } = props;
-  const shouldUseLinkAction = !!onClick && !!onRemove;
+  let shouldUseLinkAction = !!onClick && !!onRemove;
   return _react.createElement(
     _index.Box,
     {
       as: shouldUseLinkAction
         ? _LinkAction.LinkBox
-        : !!onClick
+        : onClick
           ? _index.ButtonBase
           : 'span',
       className: (0, _classnames.default)(
         {
-          'iui-tag-basic': variant === 'basic',
-          'iui-tag': variant === 'default',
+          'iui-tag-basic': 'basic' === variant,
+          'iui-tag': 'default' === variant,
         },
         className,
       ),
       ref: forwardedRef,
-      onClick: !shouldUseLinkAction ? onClick : undefined,
+      onClick: shouldUseLinkAction ? void 0 : onClick,
       ...rest,
     },
-    variant === 'default'
+    'default' === variant
       ? _react.createElement(
           _index.Box,
           {
             as: shouldUseLinkAction ? _LinkAction.LinkAction : 'span',
-            onClick: shouldUseLinkAction ? onClick : undefined,
+            onClick: shouldUseLinkAction ? onClick : void 0,
             ...labelProps,
             className: (0, _classnames.default)(
               'iui-tag-label',

package/cjs/core/Tag/TagContainer.js

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const TagContainer = _react.forwardRef((props, forwardedRef) => {
-  const { className, children, overflow, background = 'none', ...rest } = props;
+  let { className, children, overflow, background = 'none', ...rest } = props;
   return _react.createElement(
     _index.Box,
     {
@@ -22,7 +22,7 @@ const TagContainer = _react.forwardRef((props, forwardedRef) => {
         'iui-tag-container',
         {
           [`iui-${overflow}`]: !!overflow,
-          'iui-visible': background !== 'none',
+          'iui-visible': 'none' !== background,
         },
         className,
       ),

package/cjs/core/Textarea/Textarea.js

@@ -11,11 +11,11 @@ Object.defineProperty(exports, 'Textarea', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _Input = require('../Input/Input.js');
-const Textarea = _react.forwardRef((props, forwardedRef) => {
-  return _react.createElement(_Input.Input, {
+const Textarea = _react.forwardRef((props, forwardedRef) =>
+  _react.createElement(_Input.Input, {
     as: 'textarea',
     rows: 3,
     ref: forwardedRef,
     ...props,
-  });
-});
+  }),
+);

package/cjs/core/ThemeProvider/ThemeContext.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, 'ThemeContext', {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const ThemeContext = _react.createContext(undefined);
+const ThemeContext = _react.createContext(void 0);

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -17,29 +17,31 @@ const _index = require('../../utils/index.js');
 const _ThemeContext = require('./ThemeContext.js');
 const _Toaster = require('../Toast/Toaster.js');
 const _jotai = require('jotai');
-const ownerDocumentAtom = (0, _jotai.atom)(undefined);
+const _meta = require('../../utils/meta.js');
+const versionWithoutDots = _meta.meta.version.replace(/\./g, '');
+const ownerDocumentAtom = (0, _jotai.atom)(void 0);
 const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
   var _themeOptions, _themeOptions1;
-  const {
+  let {
     theme: themeProp = 'inherit',
     children,
     themeOptions = {},
     portalContainer: portalContainerProp,
-    includeCss = themeProp === 'inherit',
+    includeCss = 'inherit' === themeProp,
     ...rest
   } = props;
-  const [rootElement, setRootElement] = _react.useState(null);
-  const parent = useParentThemeAndContext(rootElement);
-  const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
+  let [rootElement, setRootElement] = _react.useState(null);
+  let parent = useParentThemeAndContext(rootElement);
+  let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
   (_themeOptions = themeOptions).applyBackground ??
     (_themeOptions.applyBackground = !parent.theme);
   (_themeOptions1 = themeOptions).highContrast ??
     (_themeOptions1.highContrast =
-      themeProp === 'inherit' ? parent.highContrast : undefined);
-  const [portalContainerFromParent] = (0, _index.useScopedAtom)(
+      'inherit' === themeProp ? parent.highContrast : void 0);
+  let [portalContainerFromParent] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );
-  const contextValue = _react.useMemo(
+  let contextValue = _react.useMemo(
     () => ({
       theme,
       themeOptions,
@@ -70,14 +72,18 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
             {
               theme: theme,
               themeOptions: themeOptions,
-              ref: (0, _index.useMergedRefs)(forwardedRef, setRootElement),
+              ref: (0, _index.useMergedRefs)(
+                forwardedRef,
+                setRootElement,
+                useIuiDebugRef,
+              ),
               ...rest,
             },
             children,
             _react.createElement(PortalContainer, {
               portalContainerProp: portalContainerProp,
               portalContainerFromParent: portalContainerFromParent,
-              isInheritingTheme: themeProp === 'inherit',
+              isInheritingTheme: 'inherit' === themeProp,
             }),
           ),
         ),
@@ -85,24 +91,22 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ThemeProvider.displayName = 'ThemeProvider';
 const Root = _react.forwardRef((props, forwardedRef) => {
-  const { theme, children, themeOptions, className, ...rest } = props;
-  const prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
-  const prefersHighContrast = (0, _index.useMediaQuery)(
+  let { theme, children, themeOptions, className, ...rest } = props;
+  let prefersDark = (0, _index.useMediaQuery)('(prefers-color-scheme: dark)');
+  let prefersHighContrast = (0, _index.useMediaQuery)(
     '(prefers-contrast: more)',
   );
-  const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
-  const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
-  const shouldApplyBackground = themeOptions?.applyBackground;
-  const [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(
+  let shouldApplyDark = 'dark' === theme || ('os' === theme && prefersDark);
+  let shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
+  let shouldApplyBackground = themeOptions?.applyBackground;
+  let [ownerDocument, setOwnerDocument] = (0, _index.useScopedAtom)(
     ownerDocumentAtom,
   );
-  const findOwnerDocumentFromRef = _react.useCallback(
+  let findOwnerDocumentFromRef = _react.useCallback(
     (el) => {
-      if (el && el.ownerDocument !== ownerDocument) {
+      if (el && el.ownerDocument !== ownerDocument)
         setOwnerDocument(el.ownerDocument);
-      }
     },
     [ownerDocument, setOwnerDocument],
   );
@@ -125,30 +129,26 @@ const Root = _react.forwardRef((props, forwardedRef) => {
   );
 });
 const useParentThemeAndContext = (rootElement) => {
-  const parentContext = _react.useContext(_ThemeContext.ThemeContext);
-  const [parentThemeState, setParentTheme] = _react.useState(
+  let parentContext = _react.useContext(_ThemeContext.ThemeContext);
+  let [parentThemeState, setParentTheme] = _react.useState(
     parentContext?.theme,
   );
-  const [parentHighContrastState, setParentHighContrastState] = _react.useState(
+  let [parentHighContrastState, setParentHighContrastState] = _react.useState(
     parentContext?.themeOptions?.highContrast,
   );
-  const parentThemeRef = (0, _index.useLatestRef)(parentContext?.theme);
+  let parentThemeRef = (0, _index.useLatestRef)(parentContext?.theme);
   (0, _index.useLayoutEffect)(() => {
-    if (parentThemeRef.current) {
-      return;
-    }
-    const closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
-    if (!closestRoot) {
-      return;
-    }
-    const synchronizeTheme = () => {
+    if (parentThemeRef.current) return;
+    let closestRoot = rootElement?.parentElement?.closest('[data-iui-theme]');
+    if (!closestRoot) return;
+    let synchronizeTheme = () => {
       setParentTheme(closestRoot?.getAttribute('data-iui-theme'));
       setParentHighContrastState(
         closestRoot?.getAttribute('data-iui-contrast') === 'high',
       );
     };
     synchronizeTheme();
-    const observer = new MutationObserver(() => synchronizeTheme());
+    let observer = new MutationObserver(() => synchronizeTheme());
     observer.observe(closestRoot, {
       attributes: true,
       attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
@@ -166,26 +166,23 @@ const useParentThemeAndContext = (rootElement) => {
 };
 const PortalContainer = _react.memo(
   ({ portalContainerProp, portalContainerFromParent, isInheritingTheme }) => {
-    const [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
-    const setPortalContainer = (0, _index.useScopedSetAtom)(
+    let [ownerDocument] = (0, _index.useScopedAtom)(ownerDocumentAtom);
+    let setPortalContainer = (0, _index.useScopedSetAtom)(
       _index.portalContainerAtom,
     );
-    const id = (0, _index.useId)();
-    const isHydrated = (0, _index.useHydration)() === 'hydrated';
-    if (!isHydrated) {
-      return null;
-    }
-    if (portalContainerProp) {
+    let id = (0, _index.useId)();
+    let isHydrated = 'hydrated' === (0, _index.useHydration)();
+    if (!isHydrated) return null;
+    if (portalContainerProp)
       return _react.createElement(PortaledToaster, {
         target: portalContainerProp,
       });
-    }
     if (
       !isInheritingTheme ||
       !portalContainerFromParent ||
       (!!ownerDocument &&
         portalContainerFromParent.ownerDocument !== ownerDocument)
-    ) {
+    )
       return _react.createElement(
         'div',
         {
@@ -197,20 +194,17 @@ const PortalContainer = _react.memo(
         },
         _react.createElement(_Toaster.Toaster, null),
       );
-    }
     return _react.createElement(PortaledToaster, {
       target: portalContainerFromParent,
     });
   },
 );
 const PortaledToaster = ({ target }) => {
-  const [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
+  let [portalContainer, setPortalContainer] = (0, _index.useScopedAtom)(
     _index.portalContainerAtom,
   );
   _react.useEffect(() => {
-    if (target && target !== portalContainer) {
-      setPortalContainer(target);
-    }
+    if (target && target !== portalContainer) setPortalContainer(target);
   });
   return target
     ? _reactdom.createPortal(
@@ -221,12 +215,12 @@ const PortaledToaster = ({ target }) => {
 };
 const FallbackStyles = ({ root }) => {
   (0, _index.useLayoutEffect)(() => {
-    if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
-      return;
-    }
-    if (_index.isUnitTest) {
+    if (
+      'yes' ===
+      getComputedStyle(root).getPropertyValue(`--_iui-v${versionWithoutDots}`)
+    )
       return;
-    }
+    if (_index.isUnitTest) return;
     (async () => {
       try {
         await Promise.resolve().then(() =>
@@ -234,7 +228,7 @@ const FallbackStyles = ({ root }) => {
         );
       } catch (error) {
         console.log('Error loading styles.css locally', error);
-        const css = await (0, _index.importCss)(
+        let css = await (0, _index.importCss)(
           'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
         );
         document.adoptedStyleSheets = [
@@ -246,3 +240,13 @@ const FallbackStyles = ({ root }) => {
   }, [root]);
   return _react.createElement(_react.Fragment, null);
 };
+const useIuiDebugRef = () => {
+  var _globalThis;
+  let _globalThis1 = globalThis;
+  (_globalThis = _globalThis1).__iui ||
+    (_globalThis.__iui = {
+      versions: new Set(),
+    });
+  var version, version1;
+  _globalThis1.__iui.versions.add(JSON.stringify(_meta.meta));
+};