@jetbrains/ring-ui-built 8.0.0-beta.2 → 8.0.0-beta.4

package/components/global/intersection-observer-context.js

@@ -1,44 +1,57 @@
-import { c } from 'react-compiler-runtime';
-import { useState, useEffect, createContext, useContext } from 'react';
+import { c } from 'react/compiler-runtime';
+import { useState, useEffect, use, createContext } from 'react';
 
 /**
+ * @internal
+ */
+const noopIntersectionObserverHandle = {
+  observe: () => () => {}
+};
+/**
+ * Multiple components can share a single `IntersectionObserver` instance through this context.
+ *
  * Usage:
  *
  * ```tsx
- * <IntersectionObserverContext.Provider value={useIntersectionObserverHandle()}>
+ * <IntersectionObserverContext value={useIntersectionObserverHandle()}>
  *   <YourComponent />
- * </IntersectionObserverContext.Provider>
+ * </IntersectionObserverContext>
  *
  * function YourComponent() {
  *   // Contains the current isIntersecting value
  *   const isIntersecting = useIsIntersecting(elementRef);
- *   // Or, to get updates instead:
- *   useIsIntersectingListener(elementRef, newIsIntersecting => {
- *     // ...
+ *
+ *   // Or, to manually work with the IntersectionObserverHandle:
+ *   const handle = use(IntersectionObserverContext);
+ *   useEffect(() => {
+ *     return handle.observe(elementRef.current, isIntersecting => { ... })
  *   })
  * }
  * ```
  */
-const IntersectionObserverContext = /*#__PURE__*/createContext(null);
+const IntersectionObserverContext = /*#__PURE__*/createContext(noopIntersectionObserverHandle);
+/**
+ * Creates an IntersectionObserverHandle suitable for {@link IntersectionObserverContext}.
+ */
 function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
   const $ = c(6);
-  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+  if ($[0] !== "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35") {
     for (let $i = 0; $i < 6; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+    $[0] = "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35";
   }
-  const [handle, setHandle] = useState(null);
+  const [handle, setHandle] = useState(noopIntersectionObserverHandle);
   let t0;
   let t1;
   if ($[1] !== rootMargin || $[2] !== rootRef || $[3] !== scrollMargin) {
     t0 = () => {
       const root = rootRef?.current;
-      const elementToOnChange = new Map();
+      const callbacksByElement = new Map();
       const observer = new IntersectionObserver(entries => {
         for (const entry of entries) {
-          const onChange = elementToOnChange.get(entry.target);
-          onChange?.(entry.isIntersecting);
+          const callbacks = callbacksByElement.get(entry.target);
+          callbacks?.forEach(cb => cb(entry.isIntersecting));
         }
       }, {
         root,
@@ -46,18 +59,31 @@ function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
         scrollMargin: scrollMargin != null ? `${scrollMargin}px` : undefined
       });
       setHandle({
-        observe(element, onChange_0) {
-          elementToOnChange.set(element, onChange_0);
-          observer.observe(element);
+        observe(element, onChange) {
+          if (!callbacksByElement.has(element)) {
+            callbacksByElement.set(element, []);
+            observer.observe(element);
+          }
+          callbacksByElement.get(element).push(onChange);
           return () => {
-            elementToOnChange.delete(element);
-            observer.unobserve(element);
+            const callbacks_0 = callbacksByElement.get(element);
+            if (!callbacks_0) {
+              return;
+            }
+            const index = callbacks_0.indexOf(onChange);
+            if (index !== -1) {
+              callbacks_0.splice(index, 1);
+            }
+            if (!callbacks_0.length) {
+              callbacksByElement.delete(element);
+              observer.unobserve(element);
+            }
           };
         }
       });
       return () => {
         observer.disconnect();
-        setHandle(null);
+        setHandle(noopIntersectionObserverHandle);
       };
     };
     t1 = [rootRef, rootMargin, scrollMargin];
@@ -73,27 +99,30 @@ function useIntersectionObserverHandle(rootRef, rootMargin, scrollMargin) {
   useEffect(t0, t1);
   return handle;
 }
+/**
+ * Returns whether the referenced element is currently intersecting.
+ */
 function useIsIntersecting(elementRef) {
   const $ = c(5);
-  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
+  if ($[0] !== "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35") {
     for (let $i = 0; $i < 5; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
+    $[0] = "22e72f21c77e0579b51b95d0c9cf49c7e0027190e5186ad64aa7f2054bb7eb35";
   }
-  const handle = useContext(IntersectionObserverContext);
+  const handle = use(IntersectionObserverContext);
   const [isIntersecting, setIsIntersecting] = useState(false);
   let t0;
   let t1;
   if ($[1] !== elementRef || $[2] !== handle) {
     t0 = () => {
       const element = elementRef.current;
-      if (!element || !handle) {
+      if (!element) {
         return;
       }
       return handle.observe(element, setIsIntersecting);
     };
-    t1 = [handle, elementRef, setIsIntersecting];
+    t1 = [handle, elementRef];
     $[1] = elementRef;
     $[2] = handle;
     $[3] = t0;
@@ -105,36 +134,5 @@ function useIsIntersecting(elementRef) {
   useEffect(t0, t1);
   return isIntersecting;
 }
-function useIsIntersectingListener(elementRef, onChange) {
-  const $ = c(6);
-  if ($[0] !== "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429") {
-    for (let $i = 0; $i < 6; $i += 1) {
-      $[$i] = Symbol.for("react.memo_cache_sentinel");
-    }
-    $[0] = "499977ecd94e47a8c69d7083d0cd9908aa1ee1ef3ab3ce80135833f3d85e5429";
-  }
-  const handle = useContext(IntersectionObserverContext);
-  let t0;
-  let t1;
-  if ($[1] !== elementRef || $[2] !== handle || $[3] !== onChange) {
-    t0 = () => {
-      const element = elementRef.current;
-      if (!element || !handle) {
-        return;
-      }
-      return handle.observe(element, onChange);
-    };
-    t1 = [handle, elementRef, onChange];
-    $[1] = elementRef;
-    $[2] = handle;
-    $[3] = onChange;
-    $[4] = t0;
-    $[5] = t1;
-  } else {
-    t0 = $[4];
-    t1 = $[5];
-  }
-  useEffect(t0, t1);
-}
 
-export { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting, useIsIntersectingListener };
+export { IntersectionObserverContext, useIntersectionObserverHandle, useIsIntersecting };

package/components/global/is-within-interactive-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * If this function returns `false`, the event may be interpreted as a click
+ * or tap on a "empty space" rather than on an interactive element such as
+ * a button or a link.
+ */
+export declare function isWithinInteractiveElement(target: EventTarget | null): boolean;

package/components/global/is-within-interactive-element.js

@@ -0,0 +1,11 @@
+const interactiveSelector = ['a', 'button', 'details', 'input', 'label', 'option', 'select', 'summary', 'textarea', '[contenteditable]', '[role="button"]', '[role="checkbox"]', '[role="link"]', '[role="radio"]', '[role="switch"]', '[role="tab"]'].join();
+/**
+ * If this function returns `false`, the event may be interpreted as a click
+ * or tap on a "empty space" rather than on an interactive element such as
+ * a button or a link.
+ */
+function isWithinInteractiveElement(target) {
+  return target instanceof Element && target.closest(interactiveSelector) != null;
+}
+
+export { isWithinInteractiveElement };

package/components/global/is-within-navigable-element.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns whether the event target is within an element that is expected to
+ * handle keyboard navigation itself, so container-level keyboard shortcuts
+ * should generally be ignored.
+ */
+export declare function isWithinNavigableElement(target: EventTarget | null): boolean;

package/components/global/is-within-navigable-element.js

@@ -0,0 +1,11 @@
+const navigableSelector = ['input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="reset"]):not([type="submit"])', 'textarea', 'select', '[contenteditable]', '[role="combobox"]', '[role="grid"]', '[role="listbox"]', '[role="menu"]', '[role="menubar"]', '[role="radiogroup"]', '[role="searchbox"]', '[role="slider"]', '[role="spinbutton"]', '[role="tablist"]', '[role="textbox"]', '[role="tree"]', '[role="treegrid"]'].join();
+/**
+ * Returns whether the event target is within an element that is expected to
+ * handle keyboard navigation itself, so container-level keyboard shortcuts
+ * should generally be ignored.
+ */
+function isWithinNavigableElement(target) {
+  return target instanceof Element && target.closest(navigableSelector) != null;
+}
+
+export { isWithinNavigableElement };

package/components/global/parse-css-duration.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Parses a CSS duration string (e.g., "500ms", "2s") and returns the duration in milliseconds.
+ * Returns the `defaultVal` if the input string is not a valid CSS duration.
+ */
+export declare function parseCssDuration(duration: string, defaultVal?: number): number;

package/components/global/parse-css-duration.js

@@ -0,0 +1,14 @@
+/**
+ * Parses a CSS duration string (e.g., "500ms", "2s") and returns the duration in milliseconds.
+ * Returns the `defaultVal` if the input string is not a valid CSS duration.
+ */
+function parseCssDuration(duration, defaultVal = 0) {
+  const match = duration.match(/(\d+(\.\d+)?)(s|ms)/);
+  if (!match) return defaultVal;
+  const value = parseFloat(match[1]);
+  const unit = match[3];
+  // eslint-disable-next-line no-magic-numbers
+  return unit === 's' ? value * 1000 : value;
+}
+
+export { parseCssDuration };

package/components/global/rerender-hoc.d.ts

@@ -1,4 +1,4 @@
-import { Component, type PropsWithoutRef } from 'react';
+import { Component, type Ref, type PropsWithoutRef } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
@@ -7,4 +7,6 @@ export interface RerenderableComponentClass<P, S> {
 }
 export default function rerenderHOC<P extends {}, C extends Component<P, unknown>>(ComposedComponent: {
     new (props: P): C;
-}): import("react").ForwardRefExoticComponent<PropsWithoutRef<P> & import("react").RefAttributes<C>>;
+}): ({ ref, ...props }: PropsWithoutRef<P> & {
+    ref?: Ref<C>;
+}) => import("react").JSX.Element;

package/components/global/rerender-hoc.js

@@ -1,7 +1,7 @@
-import { c } from 'react-compiler-runtime';
-import { forwardRef, Component } from 'react';
+import { Component } from 'react';
 import { createComposedRef } from './compose-refs.js';
 import { jsx } from 'react/jsx-runtime';
+import 'react/compiler-runtime';
 import 'memoize-one';
 
 function rerenderHOC(ComposedComponent) {
@@ -19,28 +19,15 @@ function rerenderHOC(ComposedComponent) {
       });
     }
   }
-  return /*#__PURE__*/forwardRef(function RerendererForwardRef(props, ref) {
-    const $ = c(4);
-    if ($[0] !== "ac36aeaece54c7d00df3e23ff1d0deb675c0bc1bf4659806ffc7c8497029aeb7") {
-      for (let $i = 0; $i < 4; $i += 1) {
-        $[$i] = Symbol.for("react.memo_cache_sentinel");
-      }
-      $[0] = "ac36aeaece54c7d00df3e23ff1d0deb675c0bc1bf4659806ffc7c8497029aeb7";
-    }
-    let t0;
-    if ($[1] !== props || $[2] !== ref) {
-      t0 = /*#__PURE__*/jsx(Rerenderer, {
-        props: props,
-        forwardedRef: ref
-      });
-      $[1] = props;
-      $[2] = ref;
-      $[3] = t0;
-    } else {
-      t0 = $[3];
-    }
-    return t0;
-  });
+  return function RerendererForwardRef({
+    ref,
+    ...props
+  }) {
+    return /*#__PURE__*/jsx(Rerenderer, {
+      props: props,
+      forwardedRef: ref !== null && ref !== void 0 ? ref : null
+    });
+  };
 }
 
 export { rerenderHOC as default };

package/components/global/schedule-with-cleanup.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export declare function setTimeoutWithCleanup(callback: () => void, delay?: number): () => void;
+/**
+ * Schedules an animation frame and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export declare function requestAnimationFrameWithCleanup(callback: () => void): () => void;

package/components/global/schedule-with-cleanup.js

@@ -0,0 +1,36 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+function setTimeoutWithCleanup(callback, delay = 0) {
+  let timerId = window.setTimeout(() => {
+    callback();
+    timerId = null;
+  }, delay);
+  return () => {
+    if (timerId != null) {
+      window.clearTimeout(timerId);
+      timerId = null;
+    }
+  };
+}
+/**
+ * Schedules an animation frame and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+function requestAnimationFrameWithCleanup(callback) {
+  let rafId = requestAnimationFrame(() => {
+    callback();
+    rafId = null;
+  });
+  return () => {
+    if (rafId != null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+}
+
+export { requestAnimationFrameWithCleanup, setTimeoutWithCleanup };

package/components/{legacy-table/selection.d.ts → global/table-selection.d.ts}

@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T> {
+export default class TableSelection<T> {
     protected _rawData: readonly T[];
     protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;
@@ -28,19 +28,19 @@ export default class Selection<T> {
     constructor({ data, selected, focused, getKey, getChildren, isItemSelectable, }?: TableSelectionConfig<T>);
     protected _buildData(data: readonly T[] | null | undefined): Set<T>;
     protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
-    cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;
-    focus(value: T | null | undefined): Selection<T>;
-    moveUp(): Selection<T> | undefined;
-    moveDown(): Selection<T> | undefined;
-    moveStart(): Selection<T> | undefined;
-    moveEnd(): Selection<T> | undefined;
-    select(value?: T | null): Selection<T>;
-    deselect(value?: T | null): Selection<T>;
-    toggleSelection(value?: T | null): Selection<T>;
-    selectAll(): Selection<T>;
-    resetFocus(): Selection<T>;
-    resetSelection(): Selection<T>;
-    reset(): Selection<T>;
+    cloneWith({ data, selected, focused }: CloneWithConfig<T>): TableSelection<T>;
+    focus(value: T | null | undefined): TableSelection<T>;
+    moveUp(): TableSelection<T> | undefined;
+    moveDown(): TableSelection<T> | undefined;
+    moveStart(): TableSelection<T> | undefined;
+    moveEnd(): TableSelection<T> | undefined;
+    select(value?: T | null): TableSelection<T>;
+    deselect(value?: T | null): TableSelection<T>;
+    toggleSelection(value?: T | null): TableSelection<T>;
+    selectAll(): TableSelection<T>;
+    resetFocus(): TableSelection<T>;
+    resetSelection(): TableSelection<T>;
+    reset(): TableSelection<T>;
     isFocused(value: T | null): boolean;
     isSelected(value: T | null): boolean;
     getFocused(): T | null;

package/components/{legacy-table/selection.js → global/table-selection.js}

@@ -1,7 +1,7 @@
 /**
  * @deprecated SelectionItem is deprecated. Use your own item type and provide a `getKey` function instead if there is no `id` identifier in your item type.
  */
-let Selection$1 = class Selection {
+class TableSelection {
   _rawData;
   _getChildren;
   _data;
@@ -19,7 +19,7 @@ let Selection$1 = class Selection {
         return item.id;
       }
       // If there's no id provided on item and no getKey supplied, fail fast with a clear message
-      throw new Error('Selection: getKey is required when items have no "id" property');
+      throw new Error('TableSelection: getKey is required when items have no "id" property');
     },
     getChildren = () => [],
     isItemSelectable = () => true
@@ -185,6 +185,6 @@ let Selection$1 = class Selection {
     }
     return new Set();
   }
-};
+}
 
-export { Selection$1 as default };
+export { TableSelection as default };

package/components/global/theme.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement, type FunctionComponent } from 'react';
+import { type HTMLAttributes, type Ref, type ReactElement, type FunctionComponent } from 'react';
 declare enum Theme {
     AUTO = "auto",
     LIGHT = "light",
@@ -18,11 +18,12 @@ export interface WithThemeClassesProps {
 export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
 type WrapperType = FunctionComponent<HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+export interface ThemeProviderProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
     theme?: Theme;
     passToPopups?: boolean;
     WrapperComponent?: WrapperType;
     target?: HTMLElement;
 }
-export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLElement>>;
+export declare function ThemeProvider({ ref, ...props }: ThemeProviderProps): import("react").JSX.Element;
 export default Theme;

package/components/global/theme.js

@@ -1,5 +1,5 @@
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import 'react';
 import 'classnames';
-export { G as GLOBAL_DARK_CLASS_NAME, a as ThemeContext, b as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, e as useThemeClasses } from '../_helpers/theme.js';
+export { G as GLOBAL_DARK_CLASS_NAME, b as ThemeContext, a as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, e as useThemeClasses } from '../_helpers/theme.js';
 import 'react/jsx-runtime';

package/components/header/header-icon.js

@@ -9,7 +9,7 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';

package/components/header/header.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import classNames from 'classnames';
-import { T as Theme, b as ThemeProvider } from '../_helpers/theme.js';
+import { T as Theme, a as ThemeProvider } from '../_helpers/theme.js';
 import { s as styles } from '../_helpers/header.js';
 import { jsx } from 'react/jsx-runtime';
 export { default as Logo } from './logo.js';
@@ -10,7 +10,7 @@ export { default as Profile } from './profile.js';
 export { default as SmartProfile } from './smart-profile.js';
 export { default as Services } from './services.js';
 export { default as SmartServices } from './smart-services.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';

package/components/header/links.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import classNames from 'classnames';
 import ScrollableSection from '../scrollable-section/scrollable-section.js';
 import { s as styles } from '../_helpers/header.js';

package/components/header/logo.js

@@ -6,7 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Size } from '../icon/icon.constants.js';
 import 'util-deprecate';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 
 class Logo extends PureComponent {

package/components/header/profile.js

@@ -15,7 +15,7 @@ import '../global/url.js';
 import '../global/dom.js';
 import '../global/memoize.js';
 import '../avatar/fallback-avatar.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/get-uid.js';
 import '../_helpers/avatar-info.js';
 import '@jetbrains/icons/chevron-down';

package/components/header/services.js

@@ -10,7 +10,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import '../global/data-tests.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';

package/components/header/smart-profile.js

@@ -16,7 +16,7 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import '../loader-inline/loader-inline.js';
 import '../global/data-tests.js';

package/components/header/smart-services.js

@@ -9,7 +9,7 @@ import '../dropdown/dropdown.js';
 import '../global/data-tests.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';

package/components/heading/heading.js

@@ -1,8 +1,8 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { memo, useEffect } from 'react';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
-import { s as styles } from '../_helpers/heading.js';
+import { h as headingStyles } from '../_helpers/heading.js';
 import { jsx } from 'react/jsx-runtime';
 
 var Levels;
@@ -46,7 +46,7 @@ const HeadingMemo = /*#__PURE__*/memo(function Heading(t0) {
   const level = t1 === undefined ? Levels.H1 : t1;
   let t2;
   if ($[6] !== className) {
-    t2 = classNames(styles.heading, className);
+    t2 = classNames(headingStyles.heading, className);
     $[6] = className;
     $[7] = t2;
   } else {
@@ -183,7 +183,7 @@ const H4 = /*#__PURE__*/memo(function H4(t0) {
   let t1;
   if ($[5] !== bold || $[6] !== className) {
     t1 = classNames(className, {
-      [styles.bold]: bold
+      [headingStyles.bold]: bold
     });
     $[5] = bold;
     $[6] = className;

package/components/i18n/i18n-context.js

@@ -1,4 +1,4 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { translate, getTranslations, setTranslations } from './i18n.js';
@@ -10,11 +10,11 @@ const I18nContext = /*#__PURE__*/React.createContext({
 });
 const I18nContextHolder = t0 => {
   const $ = c(9);
-  if ($[0] !== "4fad998682170be27811243d88e42f31c504dd0399035c12efa95d91c74b2a8d") {
+  if ($[0] !== "a2018c2c34e104bb25f29b4f924dc1f30d92611151a999bc264d56ee3cdb5c56") {
     for (let $i = 0; $i < 9; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "4fad998682170be27811243d88e42f31c504dd0399035c12efa95d91c74b2a8d";
+    $[0] = "a2018c2c34e104bb25f29b4f924dc1f30d92611151a999bc264d56ee3cdb5c56";
   }
   const {
     children,
@@ -48,7 +48,7 @@ const I18nContextHolder = t0 => {
   }
   let t4;
   if ($[6] !== children || $[7] !== t3) {
-    t4 = /*#__PURE__*/jsx(I18nContext.Provider, {
+    t4 = /*#__PURE__*/jsx(I18nContext, {
       value: t3,
       children: children
     });

package/components/icon/icon-svg.js

@@ -1,4 +1,4 @@
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import 'react';
 import 'classnames';
 import '../global/memoize.js';

package/components/icon/icon.js

@@ -4,7 +4,7 @@ import deprecate from 'util-deprecate';
 import { Color, Size } from './icon.constants.js';
 import { s as styles, I as IconSVG } from '../_helpers/icon-svg.js';
 import { jsx } from 'react/jsx-runtime';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 
 const warnSize = deprecate(() => {}, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.

package/components/icon/index.js

@@ -4,6 +4,6 @@ import 'react';
 import 'classnames';
 import 'util-deprecate';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 import 'react/jsx-runtime';

package/components/input/input.d.ts

@@ -69,7 +69,7 @@ export declare class Input extends PureComponent<InputProps> {
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => () => void>;
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;