@box-kite/react 0.0.1 → 2.0.0

package/components/toaster.mjs

@@ -0,0 +1,295 @@
+"use client";
+import { a as e, t } from "../platform.mjs";
+import { t as n } from "../client.mjs";
+import { n as r } from "../effects.mjs";
+import i from "../box.mjs";
+import { t as a } from "../motion.mjs";
+import { useCallback as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
+import { useSyncExternalStore as f } from "use-sync-external-store/shim";
+//#region src/utils/toast/toastStore.ts
+var p = {
+	toasts: [],
+	overflow: 0
+}, m = 0;
+function h() {
+	return m += 1, `toast-${m}`;
+}
+function g(e) {
+	let t = [], n = p, r = e?.limit ?? 3, i = e?.duration ?? 5e3, a = !1, o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Map(), c = (e) => {
+		let t = s.get(e);
+		t?.handle && clearTimeout(t.handle), s.delete(e);
+	}, l = () => {
+		let e = 0;
+		t = t.map((t) => {
+			let n = !t.open || e++ < r;
+			return t.visible === n ? t : {
+				...t,
+				visible: n
+			};
+		}), n = {
+			toasts: t,
+			overflow: Math.max(0, e - r)
+		}, u(), o.forEach((e) => e());
+	};
+	function u() {
+		let e = /* @__PURE__ */ new Set();
+		for (let n of t) {
+			if (!n.open || !n.visible || !Number.isFinite(n.duration)) continue;
+			e.add(n.id);
+			let t = s.get(n.id) ?? {
+				handle: null,
+				remaining: n.duration,
+				startedAt: 0
+			};
+			s.set(n.id, t), !(a || t.handle) && (t.startedAt = Date.now(), t.handle = setTimeout(() => {
+				s.delete(n.id), f(n.id, "timeout");
+			}, t.remaining));
+		}
+		for (let t of [...s.keys()]) e.has(t) || c(t);
+	}
+	let d = (e, t) => t ?? (e === "loading" ? Infinity : i);
+	function f(e, n = "imperative") {
+		let r = [];
+		t = t.map((t) => !t.open || e !== void 0 && t.id !== e ? t : (r.push(t), c(t.id), {
+			...t,
+			open: !1
+		})), r.length && (l(), r.forEach((e) => e.onDismiss?.(n)));
+	}
+	function m(e, n, r) {
+		let i = !1;
+		t = t.map((t) => {
+			if (t.id !== e) return t;
+			i = !0, c(e);
+			let a = r?.kind ?? t.kind;
+			return {
+				...t,
+				...r,
+				id: e,
+				message: n,
+				kind: a,
+				duration: r?.duration ?? (r?.kind ? d(a) : t.duration),
+				open: !0
+			};
+		}), i && l();
+	}
+	function g(e, n) {
+		let r = n?.id ?? h();
+		if (n?.id && t.some((e) => e.id === r)) return m(r, e, n), r;
+		let i = n?.kind ?? "default";
+		return t = [...t, {
+			id: r,
+			kind: i,
+			message: e,
+			description: n?.description,
+			duration: d(i, n?.duration),
+			action: n?.action,
+			dismissible: n?.dismissible ?? !0,
+			onDismiss: n?.onDismiss,
+			open: !0,
+			visible: !1
+		}], l(), r;
+	}
+	return {
+		subscribe(e) {
+			return o.add(e), () => o.delete(e);
+		},
+		getSnapshot: () => n,
+		getServerSnapshot: () => p,
+		add: g,
+		update: m,
+		dismiss: f,
+		remove(e) {
+			let n = t.filter((t) => t.id !== e);
+			n.length !== t.length && (c(e), t = n, l());
+		},
+		setLimit(e) {
+			e !== r && (r = e, l());
+		},
+		setDefaultDuration(e) {
+			i = e;
+		},
+		pause() {
+			if (!a) {
+				a = !0;
+				for (let e of s.values()) e.handle && (clearTimeout(e.handle), e.handle = null, e.remaining = Math.max(0, e.remaining - (Date.now() - e.startedAt)));
+			}
+		},
+		resume() {
+			a && (a = !1, u());
+		},
+		reset() {
+			for (let e of [...s.keys()]) c(e);
+			t = [], n = p, o.forEach((e) => e());
+		}
+	};
+}
+//#endregion
+//#region src/components/toaster.tsx
+var _ = g(), v = (e) => (t, n) => _.add(t, {
+	...n,
+	kind: e
+}), y = Object.assign((e, t) => _.add(e, t), {
+	success: v("success"),
+	error: v("error"),
+	warning: v("warning"),
+	info: v("info"),
+	loading: v("loading"),
+	update: (e, t, n) => _.update(e, t, n),
+	dismiss: (e) => _.dismiss(e, "imperative"),
+	promise(e, t, n) {
+		let r = _.add(t.loading, {
+			...n,
+			id: n?.id,
+			kind: "loading"
+		}), i = (e, t) => typeof e == "function" ? e(t) : e;
+		return e.then((e) => _.update(r, i(t.success, e), { kind: "success" }), (e) => _.update(r, i(t.error, e), { kind: "error" })), e;
+	}
+}), b = {
+	"top-start": "topStart",
+	"top-center": "topCenter",
+	"top-end": "topEnd",
+	"bottom-start": "bottomStart",
+	"bottom-center": "bottomCenter",
+	"bottom-end": "bottomEnd"
+};
+function x(e, t) {
+	let n = t.toLowerCase().split("+"), r = n[n.length - 1], i = new Set(n.slice(0, -1));
+	return e.key.toLowerCase() === r && e.altKey === i.has("alt") && e.ctrlKey === i.has("ctrl") && e.shiftKey === i.has("shift") && e.metaKey === i.has("meta");
+}
+function S(e) {
+	let { toast: t, store: n, fromTop: o, closeLabel: s } = e, { mounted: c, ref: d, props: f } = a({ present: t.open });
+	if (r(() => {
+		c || n.remove(t.id);
+	}, [
+		c,
+		n,
+		t.id
+	]), !c) return null;
+	let p = t.action, m = () => {
+		p?.onClick(), p?.closeOnClick !== !1 && n.dismiss(t.id, "action");
+	};
+	return /* @__PURE__ */ u(i, {
+		ref: d,
+		component: "toaster.toast",
+		variant: {
+			[t.kind]: t.kind !== "default",
+			fromTop: o
+		},
+		props: {
+			...t.kind === "error" ? { role: "alert" } : {},
+			"data-toast-id": t.id,
+			...f
+		},
+		children: [
+			/* @__PURE__ */ l(i, {
+				component: "toaster.message",
+				children: t.message
+			}),
+			t.description !== void 0 && /* @__PURE__ */ l(i, {
+				component: "toaster.description",
+				children: t.description
+			}),
+			p && /* @__PURE__ */ l(i, {
+				tag: "button",
+				component: "toaster.action",
+				props: {
+					type: "button",
+					onClick: m
+				},
+				children: p.label
+			}),
+			t.dismissible && /* @__PURE__ */ l(i, {
+				tag: "button",
+				component: "toaster.close",
+				props: {
+					type: "button",
+					"aria-label": s,
+					onClick: () => n.dismiss(t.id, "close")
+				}
+			})
+		]
+	});
+}
+function C(a) {
+	let { position: p = "bottom-end", limit: m = 3, duration: h = 5e3, label: g = "Notifications", closeLabel: v = "Close", overflowLabel: y = (e) => `+${e} more`, hotkey: C = "F6", store: w = _, props: T, ...E } = a, D = f(w.subscribe, w.getSnapshot, w.getServerSnapshot), [O, k] = c(!0), A = n(!O), j = s(null), M = s(null), N = s({
+		hovered: !1,
+		focused: !1,
+		hidden: !1
+	}), P = o(() => {
+		let { hovered: e, focused: t, hidden: n } = N.current;
+		e || t || n ? w.pause() : w.resume();
+	}, [w]);
+	r(() => {
+		e() || k(!1);
+	}, []), r(() => w.setLimit(m), [w, m]), r(() => w.setDefaultDuration(h), [w, h]), r(() => {
+		let t = j.current;
+		!O || !e() || !t || !t.isConnected || t.matches(":popover-open") || t.showPopover();
+	}), r(() => {
+		let e = t();
+		if (!e) return;
+		let n = new AbortController();
+		return e.addEventListener("visibilitychange", () => {
+			N.current.hidden = e.hidden, P();
+		}, { signal: n.signal }), () => n.abort();
+	}, [P]), r(() => {
+		let e = t();
+		if (!C || !e) return;
+		let n = new AbortController();
+		return e.addEventListener("keydown", (t) => {
+			!x(t, C) || !j.current || (t.preventDefault(), M.current = e.activeElement, j.current.focus());
+		}, { signal: n.signal }), () => n.abort();
+	}, [C]);
+	let F = (e) => !!e && !!j.current?.contains(e), I = () => {
+		N.current.hovered = !0, P();
+	}, L = (e) => {
+		F(e.relatedTarget) || (N.current.hovered = !1, P());
+	}, R = (e) => {
+		N.current.focused = !0, P(), F(e.relatedTarget) || (M.current = e.relatedTarget);
+	}, z = (e) => {
+		F(e.relatedTarget) || (N.current.focused = !1, P());
+	}, B = (e) => {
+		if (e.key !== "Escape") return;
+		let t = (e.target.closest?.("[data-toast-id]"))?.getAttribute("data-toast-id");
+		t && w.dismiss(t, "close"), w.getSnapshot().toasts.some((e) => e.open) ? j.current?.focus() : M.current?.focus();
+	}, V = p.startsWith("top"), H = D.toasts.filter((e) => e.visible), U = V ? [...H].reverse() : H, W = D.overflow > 0 && /* @__PURE__ */ l(i, {
+		component: "toaster.overflow",
+		children: y(D.overflow)
+	}), G = /* @__PURE__ */ u(i, {
+		tag: "section",
+		ref: j,
+		component: "toaster",
+		...E,
+		variant: [E.variant, { [b[p]]: !0 }],
+		props: {
+			...O ? { popover: "manual" } : {},
+			"aria-live": "polite",
+			"aria-atomic": "false",
+			"aria-relevant": "additions text",
+			"aria-label": g,
+			tabIndex: -1,
+			...T,
+			onPointerOver: I,
+			onPointerOut: L,
+			onFocus: R,
+			onBlur: z,
+			onKeyDown: B
+		},
+		children: [
+			!V && W,
+			U.map((e) => /* @__PURE__ */ l(S, {
+				toast: e,
+				store: w,
+				fromTop: V,
+				closeLabel: v
+			}, e.id)),
+			V && W
+		]
+	});
+	return O ? G : A ? d(G, A) : null;
+}
+var w = C;
+w.displayName = "Toaster";
+//#endregion
+export { g as createToastStore, w as default, _ as defaultToastStore, y as toast };

package/components/tooltip.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("../identity.cjs"),n=require("./overlay.cjs"),r=require("./presence.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(o){let{content:s,children:c,open:l,defaultOpen:u=!1,onOpenChange:d,openDelay:f=300,closeDelay:p=150,side:m=`bottom`,align:h=`center`,offset:g=1,flip:_=!0,props:v,...y}=o,b=t.t(`tooltip`),x=y.id??b,[S,C]=e.i({value:l,defaultValue:u,onChange:d}),[w,T]=(0,i.useState)(null),E=(0,i.useRef)(null),D=(0,i.useRef)(void 0),O=(0,i.useRef)(!1),k=(0,i.useRef)(!1),A=(0,i.useRef)(!1),j=(0,i.useRef)(!1),M=(0,i.useCallback)(()=>{clearTimeout(D.current),D.current=void 0},[]),N=(0,i.useCallback)((e,t)=>{if(M(),e<=0){t();return}D.current=setTimeout(()=>{D.current=void 0,t()},e)},[M]),P=(0,i.useCallback)((e,t)=>{N(p,()=>{O.current||k.current||A.current||C(!1,{reason:e,event:t})})},[p,N,C]);e.r({enabled:S,outsidePointer:!1,inside:[E],onDismiss:(e,t)=>{M(),j.current=!0,C(!1,{reason:e,event:t})}}),(0,i.useEffect)(()=>M,[M]);let F=S&&s!=null,I=e.a(e=>{O.current=!0,!j.current&&N(f,()=>C(!0,{reason:`hover`,event:e}))}),L=e.a(e=>{O.current=!1,j.current=!1,P(`pointer-leave`,e)}),R=e.a(e=>{A.current=!0,M(),C(!0,{reason:`focus`,event:e})}),z=e.a(e=>{A.current=!1,j.current=!1,P(`blur`,e)}),B=e.a(()=>{k.current=!0,M()}),V=e.a(e=>{k.current=!1,P(`pointer-leave`,e)}),H=(0,i.useMemo)(()=>({ref:T,props:{"aria-describedby":F?x:void 0,onPointerEnter:I,onPointerLeave:L,onFocus:R,onBlur:z}}),[z,I,R,L,F,x]);return(0,a.jsxs)(a.Fragment,{children:[c(H),(0,a.jsx)(r.default,{present:F,children:e=>(0,a.jsx)(n.default,{ref:E,contentRef:e.ref,anchor:w,side:m,align:h,offset:g,flip:_,matchWidth:!1,component:`tooltip`,...y,variant:[y.variant,{closed:!e.present}],id:x,props:{role:`tooltip`,...e.props,...v,onPointerEnter:B,onPointerLeave:V},children:s})})]})}o.displayName=`Tooltip`,exports.default=o;

package/components/tooltip.d.ts

@@ -0,0 +1,98 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { AnchorAlign, AnchorSide } from '../utils/anchor/anchorUtils';
+/** Why the tooltip opened or closed — `onOpenChange` gets this alongside the event that did it. */
+export type TooltipReason = 'hover' | 'focus' | 'pointer-leave' | 'blur' | 'escape';
+/** The DOM attributes and handlers the trigger has to carry. */
+export interface TooltipTriggerAttributes {
+    'aria-describedby'?: string;
+    onPointerEnter(event: React.PointerEvent): void;
+    onPointerLeave(event: React.PointerEvent): void;
+    onFocus(event: React.FocusEvent): void;
+    onBlur(event: React.FocusEvent): void;
+}
+/**
+ * What the trigger has to carry: spread it onto the control itself, not a wrapper, because
+ * `aria-describedby` only means something on the element the user lands on. The `ref` is what the
+ * tooltip is positioned against, so it is not optional decoration (see `anchor` on `Overlay`).
+ *
+ * ```tsx
+ * {(trigger) => <Button {...trigger}>Delete</Button>}          // a Box component
+ * {(trigger) => <button ref={trigger.ref} {...trigger.props}>} // a plain element
+ * ```
+ */
+export interface TooltipTrigger {
+    ref: React.RefCallback<HTMLElement>;
+    props: TooltipTriggerAttributes;
+}
+type TooltipBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'children' | 'content' | 'open' | 'flip'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends TooltipBoxProps<TKey> {
+    /** The description itself. Nothing renders while this is empty. */
+    content?: React.ReactNode;
+    /** The trigger, handed the ref and props that wire it to the tooltip. */
+    children: (trigger: TooltipTrigger) => React.ReactNode;
+    /** Controlled open state. Leave it out and the tooltip owns it. */
+    open?: boolean;
+    /** Whether it starts open, when the tooltip owns its own state. */
+    defaultOpen?: boolean;
+    /** Fires with the new state and why it changed — `'hover'`, `'focus'`, `'pointer-leave'`, `'blur'`
+     * or `'escape'`. */
+    onOpenChange?: ChangeHandler<boolean, TooltipReason>;
+    /**
+     * How long the pointer has to rest on the trigger, in ms. Default 300 — sweeping across a toolbar should
+     * not light every control up. Focus ignores it: a keyboard user asked for the tooltip by arriving.
+     */
+    openDelay?: number;
+    /** The grace period after the pointer leaves, in ms. Default 150, so the pointer can reach the tooltip (WCAG 1.4.13). */
+    closeDelay?: number;
+    /**
+     * Which side of the trigger the bubble sits on — `top`/`bottom` are the block axis, `start`/`end` the
+     * inline one. Default `'bottom'`, and a side with no room flips to its opposite either way.
+     */
+    side?: AnchorSide;
+    /** Which of the trigger's edges to line the bubble up with along the other axis. Default `'center'`. */
+    align?: AnchorAlign;
+    /**
+     * The gap between trigger and bubble, on the ÷4 spacing scale. Default 1 — 4px, which is near enough
+     * for the pointer to cross without leaving the trigger (WCAG 1.4.13) and far enough to read as a layer.
+     */
+    offset?: number;
+    /** Whether a side with no room may be swapped for its opposite. Default `true`. */
+    flip?: boolean;
+}
+/**
+ * The APG tooltip: a description that appears on hover *and* on focus and stays until the user is done
+ * with it.
+ *
+ * ```tsx
+ * <Tooltip content="Deletes the row for good">{(trigger) => <Button {...trigger}>Delete</Button>}</Tooltip>
+ * ```
+ *
+ * The trigger is a render prop rather than a cloned child: cloning would have to guess where a child
+ * wants its DOM attributes (Box takes a `props` bag, a `<button>` takes them on top), and guessing wrong
+ * on `aria-describedby` costs the thing the pattern is for. The component owns `role="tooltip"`, the
+ * `aria-describedby`, and WCAG 1.4.13's three obligations — dismissible with Escape without moving focus,
+ * hoverable, and never closed on a timer. Focus never enters it: a focusable tooltip is a mislabelled dialog.
+ *
+ * @pattern https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ * @a11y `role="tooltip"` on the bubble and `aria-describedby` on the trigger, so the description is read
+ * as part of the control rather than as text that happens to be nearby.
+ * @a11y WCAG 1.4.13, all three parts: Escape dismisses it without moving focus, the pointer can travel
+ * onto the bubble and read it, and nothing hides it on a timer.
+ * @a11y The bubble is never in the tab order — a focusable tooltip is a dialog with the wrong role — and
+ * it renders nothing at all while `content` is empty.
+ * @keyboard Tab — Shows it as soon as the trigger has focus, ignoring `openDelay`: a keyboard user asked
+ * for it by arriving.
+ * @keyboard Escape — Hides it, leaving focus on the trigger. It stays hidden until the pointer or focus
+ * leaves and comes back.
+ * @keyboard Tab, again — Reaches the next control, and the tooltip closes behind it.
+ * @keyboard (Pointer) Resting on the trigger — Shows it after `openDelay`, 300 ms by default: sweeping
+ * across a toolbar should not light every control up.
+ * @keyboard (Pointer) Leaving the trigger — Hides it after `closeDelay`, 150 ms — unless the pointer
+ * lands on the tooltip itself.
+ * @keyboard (Pointer) Moving onto the tooltip — Keeps it open for as long as the pointer is there, so a
+ * long description can be read or selected.
+ */
+declare function Tooltip<TKey extends keyof ComponentsAndVariants = 'tooltip'>(props: Props<TKey>): import("react").JSX.Element;
+export default Tooltip;

package/components/tooltip.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { a as e, i as t, r as n } from "../behavior.mjs";
+import { t as r } from "../identity.mjs";
+import i from "./overlay.mjs";
+import a from "./presence.mjs";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/tooltip.tsx
+function m(m) {
+	let { content: h, children: g, open: _, defaultOpen: v = !1, onOpenChange: y, openDelay: b = 300, closeDelay: x = 150, side: S = "bottom", align: C = "center", offset: w = 1, flip: T = !0, props: E, ...D } = m, O = r("tooltip"), k = D.id ?? O, [A, j] = t({
+		value: _,
+		defaultValue: v,
+		onChange: y
+	}), [M, N] = u(null), P = l(null), F = l(void 0), I = l(!1), L = l(!1), R = l(!1), z = l(!1), B = o(() => {
+		clearTimeout(F.current), F.current = void 0;
+	}, []), V = o((e, t) => {
+		if (B(), e <= 0) {
+			t();
+			return;
+		}
+		F.current = setTimeout(() => {
+			F.current = void 0, t();
+		}, e);
+	}, [B]), H = o((e, t) => {
+		V(x, () => {
+			I.current || L.current || R.current || j(!1, {
+				reason: e,
+				event: t
+			});
+		});
+	}, [
+		x,
+		V,
+		j
+	]);
+	n({
+		enabled: A,
+		outsidePointer: !1,
+		inside: [P],
+		onDismiss: (e, t) => {
+			B(), z.current = !0, j(!1, {
+				reason: e,
+				event: t
+			});
+		}
+	}), s(() => B, [B]);
+	let U = A && h != null, W = e((e) => {
+		I.current = !0, !z.current && V(b, () => j(!0, {
+			reason: "hover",
+			event: e
+		}));
+	}), G = e((e) => {
+		I.current = !1, z.current = !1, H("pointer-leave", e);
+	}), K = e((e) => {
+		R.current = !0, B(), j(!0, {
+			reason: "focus",
+			event: e
+		});
+	}), q = e((e) => {
+		R.current = !1, z.current = !1, H("blur", e);
+	}), J = e(() => {
+		L.current = !0, B();
+	}), Y = e((e) => {
+		L.current = !1, H("pointer-leave", e);
+	}), X = c(() => ({
+		ref: N,
+		props: {
+			"aria-describedby": U ? k : void 0,
+			onPointerEnter: W,
+			onPointerLeave: G,
+			onFocus: K,
+			onBlur: q
+		}
+	}), [
+		q,
+		W,
+		K,
+		G,
+		U,
+		k
+	]);
+	return /* @__PURE__ */ p(d, { children: [g(X), /* @__PURE__ */ f(a, {
+		present: U,
+		children: (e) => /* @__PURE__ */ f(i, {
+			ref: P,
+			contentRef: e.ref,
+			anchor: M,
+			side: S,
+			align: C,
+			offset: w,
+			flip: T,
+			matchWidth: !1,
+			component: "tooltip",
+			...D,
+			variant: [D.variant, { closed: !e.present }],
+			id: k,
+			props: {
+				role: "tooltip",
+				...e.props,
+				...E,
+				onPointerEnter: J,
+				onPointerLeave: Y
+			},
+			children: h
+		})
+	})] });
+}
+m.displayName = "Tooltip";
+//#endregion
+export { m as default };

package/components/visuallyHidden.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);var i=.25;function a(e,t){return(0,n.jsx)(r.default,{ref:t,position:`absolute`,width:i,height:i,p:0,b:0,overflow:`hidden`,whiteSpace:`nowrap`,clipPath:`inset(50%)`,...e})}var o=(0,t.forwardRef)(a);o.displayName=`VisuallyHidden`,exports.default=o;

package/components/visuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export default _default;

package/components/visuallyHidden.mjs

@@ -0,0 +1,23 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@box-kite/react";
+//#region src/components/visuallyHidden.tsx
+var r = .25;
+function i(e, i) {
+	return /* @__PURE__ */ t(n, {
+		ref: i,
+		position: "absolute",
+		width: r,
+		height: r,
+		p: 0,
+		b: 0,
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		clipPath: "inset(50%)",
+		...e
+	});
+}
+var a = e(i);
+a.displayName = "VisuallyHidden";
+//#endregion
+export { a as default };