@udecode/react-utils 49.0.15 → 52.0.0

package/dist/index.js

@@ -1,397 +1,312 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+import { Slot } from "@radix-ui/react-slot";
+import React from "react";
+import ReactDOM from "react-dom";
+import { isDefined } from "@udecode/utils";
+import { clsx } from "clsx";
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Box: () => Box,
-  CAN_USE_DOM: () => CAN_USE_DOM,
-  DEFAULT_IGNORE_CLASS: () => DEFAULT_IGNORE_CLASS,
-  MemoizedChildren: () => MemoizedChildren,
-  PortalBody: () => PortalBody,
-  Text: () => Text,
-  composeEventHandlers: () => composeEventHandlers,
-  composeRefs: () => composeRefs,
-  createPrimitiveComponent: () => createPrimitiveComponent,
-  createPrimitiveElement: () => createPrimitiveElement,
-  createSlotComponent: () => createSlotComponent,
-  useComposedRef: () => useComposedRef,
-  useEffectOnce: () => useEffectOnce,
-  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
-  useMemoOnce: () => useMemoOnce,
-  useMemoizedSelector: () => useMemoizedSelector,
-  useOnClickOutside: () => useOnClickOutside,
-  useStableFn: () => useStableFn,
-  useStableMemo: () => useStableMemo,
-  withProviders: () => withProviders,
-  withRef: () => withRef
+//#region src/createSlotComponent.tsx
+const createSlotComponent = (element) => React.forwardRef(({ as, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : as || element;
+	return /* @__PURE__ */ React.createElement(Comp, {
+		ref,
+		...props
+	});
 });
-module.exports = __toCommonJS(index_exports);
 
-// src/createSlotComponent.tsx
-var import_react = __toESM(require("react"));
-var import_react_slot = require("@radix-ui/react-slot");
-var createSlotComponent = (element) => import_react.default.forwardRef(({ as, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? import_react_slot.Slot : as || element;
-  return /* @__PURE__ */ import_react.default.createElement(Comp, { ref, ...props });
-});
+//#endregion
+//#region src/Box.tsx
+const Box = createSlotComponent("div");
 
-// src/Box.tsx
-var Box = createSlotComponent("div");
+//#endregion
+//#region src/MemoizedChildren.tsx
+const MemoizedChildren = React.memo(({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children));
 
-// src/MemoizedChildren.tsx
-var import_react2 = __toESM(require("react"));
-var MemoizedChildren = import_react2.default.memo(
-  ({ children }) => {
-    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, children);
-  }
-);
-
-// src/PortalBody.tsx
-var import_react3 = __toESM(require("react"));
-var import_react_dom = __toESM(require("react-dom"));
-var PortalBody = ({
-  children,
-  element
-}) => {
-  const container = element || typeof window !== "undefined" ? document.body : void 0;
-  if (!container) return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, children);
-  return import_react_dom.default.createPortal(children, element || document.body);
+//#endregion
+//#region src/PortalBody.tsx
+const PortalBody = ({ children, element }) => {
+	if (!(element || typeof window !== "undefined" ? document.body : void 0)) return children;
+	return ReactDOM.createPortal(children, element || document.body);
 };
 
-// src/Text.tsx
-var Text = createSlotComponent("span");
+//#endregion
+//#region src/Text.tsx
+const Text = createSlotComponent("span");
 
-// src/composeEventHandlers.ts
-var composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
-  originalEventHandler?.(event);
-  if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-    return ourEventHandler?.(event);
-  }
+//#endregion
+//#region src/composeEventHandlers.ts
+/** @see https://github.com/radix-ui/primitives/blob/b324ec2d7ddf13a2a115cb5b11478e24d2f45b87/packages/core/primitive/src/primitive.tsx#L1 */
+const composeEventHandlers = (originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) => (event) => {
+	originalEventHandler?.(event);
+	if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler?.(event);
 };
 
-// src/createPrimitiveComponent.tsx
-var import_react5 = __toESM(require("react"));
-var import_utils = require("@udecode/utils");
-var import_clsx = require("clsx");
-
-// src/useComposedRef.ts
-var import_react4 = __toESM(require("react"));
-var setRef = (ref, value) => {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
+//#endregion
+//#region src/useComposedRef.ts
+/**
+* Set a given ref to a given value This utility takes care of different types
+* of refs: callback refs and React.RefObject(s)
+*/
+const setRef = (ref, value) => {
+	if (typeof ref === "function") return ref(value);
+	if (ref !== null && ref !== void 0) ref.current = value;
 };
-var composeRefs = (...refs) => (node) => {
-  const cleanups = [];
-  refs.forEach((ref) => {
-    const cleanup = setRef(ref, node);
-    if (typeof cleanup === "function") {
-      cleanups.push(cleanup);
-    }
-  });
-  if (cleanups.length > 0) {
-    return () => {
-      cleanups.forEach((cleanup) => cleanup?.());
-    };
-  }
+/**
+* A utility to compose multiple refs together Accepts callback refs and
+* React.RefObject(s)
+*/
+const composeRefs = (...refs) => (node) => {
+	const cleanups = [];
+	refs.forEach((ref) => {
+		const cleanup = setRef(ref, node);
+		if (typeof cleanup === "function") cleanups.push(cleanup);
+	});
+	if (cleanups.length > 0) return () => {
+		for (const cleanup of cleanups) cleanup?.();
+	};
 };
-var useComposedRef = (...refs) => {
-  return import_react4.default.useCallback(composeRefs(...refs), refs);
+/**
+* A custom hook that composes multiple refs Accepts callback refs and
+* React.RefObject(s)
+*/
+const useComposedRef = (...refs) => {
+	return React.useCallback(composeRefs(...refs), refs);
 };
 
-// src/createPrimitiveComponent.tsx
-var createPrimitiveComponent = (element) => {
-  const Comp = createSlotComponent(element);
-  return ({
-    propsHook,
-    stateHook
-  } = {}) => {
-    return import_react5.default.forwardRef(
-      ({
-        asChild,
-        className: classNameProp,
-        getClassName,
-        options,
-        state: stateProp,
-        ...props
-      }, ref) => {
-        const state = (0, import_utils.isDefined)(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
-        const {
-          hidden,
-          props: hookProps,
-          ref: hookRef
-        } = propsHook ? propsHook(state) : { hidden: false, props: {}, ref: null };
-        const _ref = useComposedRef(ref, hookRef);
-        const className = (0, import_utils.isDefined)(hookProps?.className) || (0, import_utils.isDefined)(classNameProp) ? (0, import_clsx.clsx)(hookProps?.className, classNameProp) : void 0;
-        const style = hookProps?.style || props.style ? { ...hookProps?.style, ...props.style } : void 0;
-        if (!asChild && hidden) return null;
-        return /* @__PURE__ */ import_react5.default.createElement(
-          Comp,
-          {
-            ref: _ref,
-            asChild,
-            ...hookProps,
-            className,
-            style,
-            ...props,
-            ...props.setProps?.(hookProps ?? {}) ?? {}
-          }
-        );
-      }
-    );
-  };
+//#endregion
+//#region src/createPrimitiveComponent.tsx
+/**
+* Primitive component factory. It uses hooks for managing state and props, and
+* forwards references to child components. Component props:
+*
+* - `asChild`: If true, the component will be rendered as a `Slot`
+*   {@link https://www.radix-ui.com/docs/primitives/utilities/slot}.
+* - `options`: Options passed to the state hook.
+* - `state`: Provide your state instead of using the state hook.
+* - `className`: Class name to be merged to the component.
+* - `style`: Style object to be merged to the component.
+* - `setProps`: Function to set props from the props hook.
+* - `...props`: Props to be passed to the component. Props hook return value:
+* - `ref`: Reference to be forwarded to the component.
+* - `props`: Props to be passed to the component.
+* - `hidden`: If true, the component will not be rendered.
+*
+* @example
+*   const MyButton = createPrimitiveComponent(Button)({
+*     stateHook: useButtonState,
+*     propsHook: useButton,
+*   });
+*
+* @param {React.ElementType} element The base component or native HTML element.
+* @returns {function} A primitive component.
+*/
+const createPrimitiveComponent = (element) => {
+	const Comp = createSlotComponent(element);
+	return ({ propsHook, stateHook } = {}) => React.forwardRef(({ asChild, className: classNameProp, getClassName, options, state: stateProp, ...props }, ref) => {
+		const state = isDefined(stateProp) ? stateProp : stateHook ? stateHook(options) : void 0;
+		const { hidden, props: hookProps, ref: hookRef } = propsHook ? propsHook(state) : {
+			hidden: false,
+			props: {},
+			ref: null
+		};
+		const _ref = useComposedRef(ref, hookRef);
+		const className = isDefined(hookProps?.className) || isDefined(classNameProp) ? clsx(hookProps?.className, classNameProp) : void 0;
+		const style = hookProps?.style || props.style ? {
+			...hookProps?.style,
+			...props.style
+		} : void 0;
+		if (!asChild && hidden) return null;
+		return /* @__PURE__ */ React.createElement(Comp, {
+			asChild,
+			ref: _ref,
+			...hookProps,
+			className,
+			style,
+			...props,
+			...props.setProps?.(hookProps ?? {}) ?? {}
+		});
+	});
 };
 
-// src/createPrimitiveElement.tsx
-var import_react6 = __toESM(require("react"));
+//#endregion
+//#region src/createPrimitiveElement.tsx
 function createPrimitiveElement(tag) {
-  return import_react6.default.forwardRef(
-    function CreateComponent(props, ref) {
-      return import_react6.default.createElement(tag, { ...props, ref });
-    }
-  );
+	return React.forwardRef(function CreateComponent(props, ref) {
+		return React.createElement(tag, {
+			...props,
+			ref
+		});
+	});
 }
 
-// src/useEffectOnce.ts
-var import_react7 = __toESM(require("react"));
+//#endregion
+//#region src/useEffectOnce.ts
 function useEffectOnce(effect, deps) {
-  const initialized = import_react7.default.useRef(false);
-  const prevDepsRef = import_react7.default.useRef(deps);
-  import_react7.default.useEffect(() => {
-    const depsChanged = deps.some((dep, i) => dep !== prevDepsRef.current[i]);
-    if (!initialized.current || depsChanged) {
-      initialized.current = true;
-      prevDepsRef.current = deps;
-      effect();
-    }
-  }, deps);
+	const initialized = React.useRef(false);
+	const prevDepsRef = React.useRef(deps);
+	React.useEffect(() => {
+		const depsChanged = deps.some((dep, i) => dep !== prevDepsRef.current[i]);
+		if (!initialized.current || depsChanged) {
+			initialized.current = true;
+			prevDepsRef.current = deps;
+			effect();
+		}
+	}, deps);
 }
 
-// src/useIsomorphicLayoutEffect.ts
-var import_react8 = __toESM(require("react"));
-var CAN_USE_DOM = typeof window !== "undefined" && window.document?.createElement !== void 0;
-var useIsomorphicLayoutEffect = CAN_USE_DOM ? import_react8.default.useLayoutEffect : import_react8.default.useEffect;
+//#endregion
+//#region src/useIsomorphicLayoutEffect.ts
+const CAN_USE_DOM = typeof window !== "undefined" && window.document?.createElement !== void 0;
+/**
+* Prevent warning on SSR by falling back to React.useEffect when DOM isn't
+* available
+*/
+const useIsomorphicLayoutEffect = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
 
-// src/useMemoOnce.ts
-var import_react9 = __toESM(require("react"));
-function useMemoOnce(factory, deps) {
-  const initialized = import_react9.default.useRef(false);
-  const prevDepsRef = import_react9.default.useRef(deps);
-  const memoizedValueRef = import_react9.default.useRef(void 0);
-  if (!initialized.current || deps.some((dep, i) => dep !== prevDepsRef.current[i])) {
-    initialized.current = true;
-    prevDepsRef.current = deps;
-    memoizedValueRef.current = factory();
-  }
-  return memoizedValueRef.current;
-}
-
-// src/useMemoizedSelector.ts
-var import_react10 = __toESM(require("react"));
+//#endregion
+//#region src/useMemoizedSelector.ts
+/**
+* Re-render only when the selector result changes.
+*
+* @param selector A function that derives a value from deps
+* @param deps Dependencies on which to run the selector
+* @param equalityFn Optional comparison function to detect changes in the
+*   derived value
+*/
 function useMemoizedSelector(selector, deps, equalityFn = (a, b) => a === b) {
-  const [memoizedValue, setMemoizedValue] = import_react10.default.useState(() => selector());
-  const previousValueRef = import_react10.default.useRef(memoizedValue);
-  import_react10.default.useEffect(() => {
-    const newValue = selector();
-    if (!equalityFn(previousValueRef.current, newValue)) {
-      setMemoizedValue(newValue);
-      previousValueRef.current = newValue;
-    }
-  }, deps);
-  return memoizedValue;
+	const [memoizedValue, setMemoizedValue] = React.useState(() => selector());
+	const previousValueRef = React.useRef(memoizedValue);
+	React.useEffect(() => {
+		const newValue = selector();
+		if (!equalityFn(previousValueRef.current, newValue)) {
+			setMemoizedValue(newValue);
+			previousValueRef.current = newValue;
+		}
+	}, deps);
+	return memoizedValue;
 }
 
-// src/useOnClickOutside.ts
-var import_react11 = __toESM(require("react"));
-var canUsePassiveEvents = () => {
-  if (typeof window === "undefined" || typeof window.addEventListener !== "function")
-    return false;
-  let passive = false;
-  const options = Object.defineProperty({}, "passive", {
-    get() {
-      passive = true;
-    }
-  });
-  const noop = () => null;
-  window.addEventListener("test", noop, options);
-  window.removeEventListener("test", noop, options);
-  return passive;
+//#endregion
+//#region src/useOnClickOutside.ts
+const canUsePassiveEvents = () => {
+	if (typeof window === "undefined" || typeof window.addEventListener !== "function") return false;
+	let passive = false;
+	const options = Object.defineProperty({}, "passive", { get() {
+		passive = true;
+	} });
+	const noop = () => null;
+	window.addEventListener("test", noop, options);
+	window.removeEventListener("test", noop, options);
+	return passive;
 };
-var DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
-var checkClass = (el, cl) => el.classList?.contains(cl);
-var hasIgnoreClass = (e, ignoreClass) => {
-  let el = e.target || e;
-  while (el) {
-    if (Array.isArray(ignoreClass)) {
-      if (ignoreClass.some((c) => checkClass(el, c))) return true;
-    } else if (checkClass(el, ignoreClass)) {
-      return true;
-    }
-    el = el.parentElement;
-  }
-  return false;
+const DEFAULT_IGNORE_CLASS = "ignore-onclickoutside";
+const checkClass = (el, cl) => el.classList?.contains(cl);
+const hasIgnoreClass = (e, ignoreClass) => {
+	let el = e.target || e;
+	while (el) {
+		if (Array.isArray(ignoreClass)) {
+			if (ignoreClass.some((c) => checkClass(el, c))) return true;
+		} else if (checkClass(el, ignoreClass)) return true;
+		el = el.parentElement;
+	}
+	return false;
 };
-var clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
-var getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
-var useOnClickOutside = (callback, {
-  detectIFrame = true,
-  disabled,
-  eventTypes = ["mousedown", "touchstart"],
-  excludeScrollbar,
-  ignoreClass = DEFAULT_IGNORE_CLASS,
-  refs: refsOpt
-} = {}) => {
-  const [refsState, setRefsState] = import_react11.default.useState([]);
-  const callbackRef = import_react11.default.useRef(callback);
-  callbackRef.current = callback;
-  const ref = import_react11.default.useCallback(
-    (el) => setRefsState((prevState) => [...prevState, { current: el }]),
-    []
-  );
-  import_react11.default.useEffect(
-    () => {
-      if (!refsOpt?.length && refsState.length === 0) return;
-      const getEls = () => {
-        const els = [];
-        (refsOpt || refsState).forEach(
-          ({ current }) => current && els.push(current)
-        );
-        return els;
-      };
-      const handler = (e) => {
-        if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target)))
-          callbackRef.current(e);
-      };
-      const blurHandler = (e) => (
-        // On firefox the iframe becomes document.activeElement in the next event loop
-        setTimeout(() => {
-          const { activeElement } = document;
-          if (activeElement?.tagName === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement))
-            callbackRef.current(e);
-        }, 0)
-      );
-      const removeEventListener = () => {
-        eventTypes.forEach(
-          (type) => document.removeEventListener(
-            type,
-            handler,
-            getEventOptions(type)
-          )
-        );
-        if (detectIFrame) window.removeEventListener("blur", blurHandler);
-      };
-      if (disabled) {
-        removeEventListener();
-        return;
-      }
-      eventTypes.forEach(
-        (type) => document.addEventListener(type, handler, getEventOptions(type))
-      );
-      if (detectIFrame) window.addEventListener("blur", blurHandler);
-      return () => removeEventListener();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      refsState,
-      ignoreClass,
-      excludeScrollbar,
-      disabled,
-      detectIFrame,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      JSON.stringify(eventTypes)
-    ]
-  );
-  return ref;
+const clickedOnScrollbar = (e) => document.documentElement.clientWidth <= e.clientX || document.documentElement.clientHeight <= e.clientY;
+const getEventOptions = (type) => type.includes("touch") && canUsePassiveEvents() ? { passive: true } : false;
+const useOnClickOutside = (callback, { detectIFrame = true, disabled, eventTypes = ["mousedown", "touchstart"], excludeScrollbar, ignoreClass = DEFAULT_IGNORE_CLASS, refs: refsOpt } = {}) => {
+	const [refsState, setRefsState] = React.useState([]);
+	const callbackRef = React.useRef(callback);
+	callbackRef.current = callback;
+	const ref = React.useCallback((el) => setRefsState((prevState) => [...prevState, { current: el }]), []);
+	React.useEffect(() => {
+		if (!refsOpt?.length && refsState.length === 0) return;
+		const getEls = () => {
+			const els = [];
+			for (const { current } of refsOpt || refsState) if (current) els.push(current);
+			return els;
+		};
+		const handler = (e) => {
+			if (!hasIgnoreClass(e, ignoreClass) && !(excludeScrollbar && clickedOnScrollbar(e)) && getEls().every((el) => !el.contains(e.target))) callbackRef.current(e);
+		};
+		const blurHandler = (e) => setTimeout(() => {
+			const { activeElement } = document;
+			if (activeElement?.tagName === "IFRAME" && !hasIgnoreClass(activeElement, ignoreClass) && !getEls().includes(activeElement)) callbackRef.current(e);
+		}, 0);
+		const removeEventListener = () => {
+			for (const type of eventTypes) document.removeEventListener(type, handler, getEventOptions(type));
+			if (detectIFrame) window.removeEventListener("blur", blurHandler);
+		};
+		if (disabled) {
+			removeEventListener();
+			return;
+		}
+		for (const type of eventTypes) document.addEventListener(type, handler, getEventOptions(type));
+		if (detectIFrame) window.addEventListener("blur", blurHandler);
+		return () => removeEventListener();
+	}, [
+		refsState,
+		ignoreClass,
+		excludeScrollbar,
+		disabled,
+		detectIFrame,
+		JSON.stringify(eventTypes)
+	]);
+	return ref;
 };
 
-// src/useStableFn.ts
-var import_react12 = __toESM(require("react"));
-var useStableFn = (fn, deps = []) => {
-  const fnRef = import_react12.default.useRef(fn);
-  fnRef.current = fn;
-  return import_react12.default.useCallback((...args) => fnRef.current(...args), deps);
+//#endregion
+//#region src/useStableFn.ts
+/**
+* Create a stable version of a function that can be used in dependency arrays
+* without causing hooks like useEffect to re-run if the function changes.
+* Calling the returned function always calls the most recent version of the
+* function that was passed to useStableFn.
+*
+* If you do want the function to be replaced when certain dependency values
+* change, include those values in the dependency array of useStableFn.
+*/
+const useStableFn = (fn, deps = []) => {
+	const fnRef = React.useRef(fn);
+	fnRef.current = fn;
+	return React.useCallback((...args) => fnRef.current(...args), deps);
 };
 
-// src/useStableMemo.ts
-var import_react13 = __toESM(require("react"));
-var useStableMemo = (producer, deps) => {
-  const [value, setValue] = import_react13.default.useState(producer);
-  import_react13.default.useLayoutEffect(() => {
-    setValue(producer);
-  }, deps);
-  return value;
+//#endregion
+//#region src/useStableMemo.ts
+const useStableMemo = (producer, deps) => {
+	const [value, setValue] = React.useState(producer);
+	React.useLayoutEffect(() => {
+		setValue(producer);
+	}, deps);
+	return value;
 };
 
-// src/withProviders.tsx
-var import_react14 = __toESM(require("react"));
-var withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight(
-  (acc, prov) => {
-    let Provider = prov;
-    if (Array.isArray(prov)) {
-      [Provider] = prov;
-      return /* @__PURE__ */ import_react14.default.createElement(Provider, { ...prov[1] }, acc);
-    }
-    return /* @__PURE__ */ import_react14.default.createElement(Provider, null, acc);
-  },
-  /* @__PURE__ */ import_react14.default.createElement(WrappedComponent, { ...props })
-);
+//#endregion
+//#region src/withProviders.tsx
+/** biome-ignore-all lint/correctness/useJsxKeyInIterable: biome */
+/**
+* Wrap a component into multiple providers. If there are any props that you
+* want a provider to receive, you can simply pass an array.
+*/
+const withProviders = (...providers) => (WrappedComponent) => (props) => providers.reduceRight((acc, prov) => {
+	let Provider = prov;
+	if (Array.isArray(prov)) {
+		[Provider] = prov;
+		return /* @__PURE__ */ React.createElement(Provider, prov[1], acc);
+	}
+	return /* @__PURE__ */ React.createElement(Provider, null, acc);
+}, /* @__PURE__ */ React.createElement(WrappedComponent, props));
 
-// src/withRef.tsx
-var import_react15 = __toESM(require("react"));
+//#endregion
+//#region src/withRef.tsx
+/**
+* Shorter alternative to `React.forwardRef`.
+*
+* @generic1 Component type or element type
+* @generic2 Extended prop types
+*/
 function withRef(renderFunction) {
-  return import_react15.default.forwardRef(renderFunction);
+	return React.forwardRef(renderFunction);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Box,
-  CAN_USE_DOM,
-  DEFAULT_IGNORE_CLASS,
-  MemoizedChildren,
-  PortalBody,
-  Text,
-  composeEventHandlers,
-  composeRefs,
-  createPrimitiveComponent,
-  createPrimitiveElement,
-  createSlotComponent,
-  useComposedRef,
-  useEffectOnce,
-  useIsomorphicLayoutEffect,
-  useMemoOnce,
-  useMemoizedSelector,
-  useOnClickOutside,
-  useStableFn,
-  useStableMemo,
-  withProviders,
-  withRef
-});
-//# sourceMappingURL=index.js.map
+
+//#endregion
+export { Box, CAN_USE_DOM, DEFAULT_IGNORE_CLASS, MemoizedChildren, PortalBody, Text, composeEventHandlers, composeRefs, createPrimitiveComponent, createPrimitiveElement, createSlotComponent, useComposedRef, useEffectOnce, useIsomorphicLayoutEffect, useMemoizedSelector, useOnClickOutside, useStableFn, useStableMemo, withProviders, withRef };