beez-ui 0.5.3 → 0.5.5

package/dist/components/dropdown-menu.js

@@ -2,11 +2,13 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DropdownMenu(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -15,18 +17,36 @@ function DropdownMenu(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Root, {
 			"data-slot": "dropdown-menu",
-			...props
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
-	return t1;
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "dropdown-menu",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function DropdownMenuPortal(t0) {
 	const $ = _c(4);
@@ -76,7 +96,7 @@ function DropdownMenuTrigger(t0) {
 }
 /** Sizes action menus by their content instead of narrowing them to an icon trigger. */
 function DropdownMenuContent(t0) {
-	const $ = _c(12);
+	const $ = _c(15);
 	let className;
 	let props;
 	let t1;
@@ -96,32 +116,53 @@ function DropdownMenuContent(t0) {
 	}
 	const align = t1 === undefined ? "start" : t1;
 	const sideOffset = t2 === undefined ? 4 : t2;
-	let t3;
+	const t3 = props.forceMount;
+	let t4;
 	if ($[5] !== className) {
-		t3 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
+		t4 = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=closed]:overflow-hidden relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
 		$[5] = className;
-		$[6] = t3;
-	} else {
-		t3 = $[6];
-	}
-	let t4;
-	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
-			"data-slot": "dropdown-menu-content",
-			sideOffset,
-			align,
-			className: t3,
-			...props
-		}) });
+		$[6] = t4;
+	} else {
+		t4 = $[6];
+	}
+	let t5;
+	if ($[7] !== align || $[8] !== props || $[9] !== sideOffset || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "dropdown-menu-content",
+				sideOffset,
+				align,
+				className: t4,
+				...props
+			})
+		});
 		$[7] = align;
 		$[8] = props;
 		$[9] = sideOffset;
-		$[10] = t3;
-		$[11] = t4;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	let t6;
+	if ($[12] !== props.forceMount || $[13] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "dropdown-menu",
+				forceMount: t3,
+				children: t5
+			})
+		});
+		$[12] = props.forceMount;
+		$[13] = t5;
+		$[14] = t6;
 	} else {
-		t4 = $[11];
+		t6 = $[14];
 	}
-	return t4;
+	return t6;
 }
 function DropdownMenuGroup(t0) {
 	const $ = _c(4);
@@ -469,7 +510,7 @@ function DropdownMenuShortcut(t0) {
 	return t2;
 }
 function DropdownMenuSub(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -478,18 +519,36 @@ function DropdownMenuSub(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Sub, {
 			"data-slot": "dropdown-menu-sub",
-			...props
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
-	return t1;
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "dropdown-sub",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 /**
 * Renders a compact trigger for a nested menu.
@@ -555,7 +614,7 @@ function DropdownMenuSubTrigger(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function DropdownMenuSubContent(t0) {
-	const $ = _c(8);
+	const $ = _c(11);
 	let className;
 	let props;
 	if ($[0] !== t0) {
@@ -567,27 +626,45 @@ function DropdownMenuSubContent(t0) {
 		className = $[1];
 		props = $[2];
 	}
-	let t1;
+	const t1 = props.forceMount;
+	let t2;
 	if ($[3] !== className) {
-		t1 = cn("z-50 min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
+		t2 = cn("z-50 min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-destructive/10!", className);
 		$[3] = className;
-		$[4] = t1;
+		$[4] = t2;
 	} else {
-		t1 = $[4];
+		t2 = $[4];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
-			"data-slot": "dropdown-menu-sub-content",
-			className: t1,
-			...props
+	let t3;
+	if ($[5] !== props || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
+				forceMount: true,
+				"data-slot": "dropdown-menu-sub-content",
+				className: t2,
+				...props
+			})
 		});
 		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[6] = t2;
+		$[7] = t3;
 	} else {
-		t2 = $[7];
+		t3 = $[7];
 	}
-	return t2;
+	let t4;
+	if ($[8] !== props.forceMount || $[9] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(MotionPresence, {
+			scope: "dropdown-sub",
+			forceMount: t1,
+			children: t3
+		});
+		$[8] = props.forceMount;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	return t4;
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };

package/dist/components/filter-query-bar.js

@@ -317,7 +317,7 @@ function renderHighlightedQuery(value, ranges) {
 * La navegación es virtual: el foco real nunca abandona el input.
 */
 export function FilterQueryBar(t0) {
-	const $ = _c(97);
+	const $ = _c(98);
 	const { configs, value, onValueChange, placeholder: t1, ariaLabel: t2, className, onFocusChange, trailingAction } = t0;
 	const placeholder = t1 === undefined ? DEFAULT_PLACEHOLDER : t1;
 	const ariaLabel = t2 === undefined ? DEFAULT_ARIA_LABEL : t2;
@@ -754,10 +754,21 @@ export function FilterQueryBar(t0) {
 	} else {
 		t33 = $[76];
 	}
-	const t34 = suggestions.some(_temp3) ? VALUE_GROUP_LABEL : KEY_GROUP_LABEL;
-	let t35;
-	if ($[77] !== activeIndex || $[78] !== applySuggestion || $[79] !== instanceId || $[80] !== suggestions) {
-		t35 = suggestions.map((suggestion_1, index) => {
+	let t34;
+	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+		t34 = (event_2) => {
+			if (event_2.target === inputRef.current) {
+				event_2.preventDefault();
+			}
+		};
+		$[77] = t34;
+	} else {
+		t34 = $[77];
+	}
+	const t35 = suggestions.some(_temp3) ? VALUE_GROUP_LABEL : KEY_GROUP_LABEL;
+	let t36;
+	if ($[78] !== activeIndex || $[79] !== applySuggestion || $[80] !== instanceId || $[81] !== suggestions) {
+		t36 = suggestions.map((suggestion_1, index) => {
 			const SuggestionIcon = suggestion_1.icon;
 			const showSeparator = index > 0 && suggestions[index - 1].group !== suggestion_1.group;
 			return /* @__PURE__ */ _jsxs(React.Fragment, { children: [showSeparator ? /* @__PURE__ */ _jsx("li", {
@@ -768,8 +779,9 @@ export function FilterQueryBar(t0) {
 				"aria-selected": index === activeIndex,
 				className: cn("flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm", index === activeIndex ? "bg-accent text-accent-foreground" : "text-foreground"),
 				id: `${instanceId}-${suggestion_1.id}`,
-				onMouseDown: (event_3) => {
-					event_3.preventDefault();
+				onPointerMove: () => setActiveIndex(index),
+				onMouseDown: (event_4) => {
+					event_4.preventDefault();
 					applySuggestion(suggestion_1);
 				},
 				role: "option",
@@ -782,85 +794,86 @@ export function FilterQueryBar(t0) {
 				})]
 			})] }, suggestion_1.id);
 		});
-		$[77] = activeIndex;
-		$[78] = applySuggestion;
-		$[79] = instanceId;
-		$[80] = suggestions;
-		$[81] = t35;
+		$[78] = activeIndex;
+		$[79] = applySuggestion;
+		$[80] = instanceId;
+		$[81] = suggestions;
+		$[82] = t36;
 	} else {
-		t35 = $[81];
+		t36 = $[82];
 	}
-	let t36;
-	if ($[82] !== listboxId || $[83] !== t34 || $[84] !== t35) {
-		t36 = /* @__PURE__ */ _jsx(PopoverContent, {
+	let t37;
+	if ($[83] !== listboxId || $[84] !== t35 || $[85] !== t36) {
+		t37 = /* @__PURE__ */ _jsx(PopoverContent, {
 			align: "start",
 			className: "w-[250px] max-h-[280px] gap-0 overflow-y-auto p-1",
 			onCloseAutoFocus: _temp,
+			onInteractOutside: t34,
 			onOpenAutoFocus: _temp2,
 			children: /* @__PURE__ */ _jsx("ul", {
-				"aria-label": t34,
+				"aria-label": t35,
 				className: "grid gap-0.5",
 				id: listboxId,
 				role: "listbox",
-				children: t35
+				children: t36
 			})
 		});
-		$[82] = listboxId;
-		$[83] = t34;
+		$[83] = listboxId;
 		$[84] = t35;
 		$[85] = t36;
+		$[86] = t37;
 	} else {
-		t36 = $[85];
+		t37 = $[86];
 	}
-	let t37;
-	if ($[86] !== isPopoverOpen || $[87] !== t33 || $[88] !== t36) {
-		t37 = /* @__PURE__ */ _jsxs(Popover, {
+	let t38;
+	if ($[87] !== isPopoverOpen || $[88] !== t33 || $[89] !== t37) {
+		t38 = /* @__PURE__ */ _jsxs(Popover, {
 			onOpenChange: setIsOpen,
 			open: isPopoverOpen,
-			children: [t33, t36]
+			children: [t33, t37]
 		});
-		$[86] = isPopoverOpen;
-		$[87] = t33;
-		$[88] = t36;
+		$[87] = isPopoverOpen;
+		$[88] = t33;
 		$[89] = t37;
+		$[90] = t38;
 	} else {
-		t37 = $[89];
+		t38 = $[90];
 	}
-	const t38 = isPopoverOpen ? `${suggestions.length} sugerencias disponibles` : "";
-	const t39 = invalidTokenCount > 0 ? ` ${invalidTokenCount} filtros no aplicados` : "";
-	let t40;
-	if ($[90] !== t38 || $[91] !== t39) {
-		t40 = /* @__PURE__ */ _jsxs("span", {
+	const t39 = isPopoverOpen ? `${suggestions.length} sugerencias disponibles` : "";
+	const t40 = invalidTokenCount > 0 ? ` ${invalidTokenCount} filtros no aplicados` : "";
+	let t41;
+	if ($[91] !== t39 || $[92] !== t40) {
+		t41 = /* @__PURE__ */ _jsxs("span", {
 			"aria-live": "polite",
 			className: "sr-only",
-			children: [t38, t39]
+			children: [t39, t40]
 		});
-		$[90] = t38;
 		$[91] = t39;
 		$[92] = t40;
+		$[93] = t41;
 	} else {
-		t40 = $[92];
+		t41 = $[93];
 	}
-	let t41;
-	if ($[93] !== t17 || $[94] !== t37 || $[95] !== t40) {
-		t41 = /* @__PURE__ */ _jsxs("div", {
+	let t42;
+	if ($[94] !== t17 || $[95] !== t38 || $[96] !== t41) {
+		t42 = /* @__PURE__ */ _jsxs("div", {
 			className: t17,
-			children: [t37, t40]
+			children: [t38, t41]
 		});
-		$[93] = t17;
-		$[94] = t37;
-		$[95] = t40;
+		$[94] = t17;
+		$[95] = t38;
 		$[96] = t41;
+		$[97] = t42;
 	} else {
-		t41 = $[96];
+		t42 = $[97];
 	}
-	return t41;
+	return t42;
 }
 function _temp3(suggestion_0) {
 	return suggestion_0.group === "value";
 }
-function _temp2(event_2) {
-	return event_2.preventDefault();
+function _temp2(event_3) {
+	return event_3.preventDefault();
 }
 function _temp(event_1) {
 	return event_1.preventDefault();

package/dist/components/form.js

@@ -3,6 +3,7 @@ import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Slot } from "radix-ui";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { Label } from "./label.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -148,9 +149,12 @@ function FormItem(t0) {
 	}
 	let t4;
 	if ($[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(FormItemContext.Provider, {
-			value: t1,
-			children: t3
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx(FormItemContext.Provider, {
+				value: t1,
+				children: t3
+			})
 		});
 		$[10] = t1;
 		$[11] = t3;
@@ -301,12 +305,15 @@ function FormMessage(t0) {
 	}
 	let t2;
 	if ($[5] !== body || $[6] !== formMessageId || $[7] !== props || $[8] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("p", {
-			"data-slot": "form-message",
-			id: formMessageId,
-			className: t1,
-			...props,
-			children: body
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "fade",
+			children: /* @__PURE__ */ _jsx("p", {
+				"data-slot": "form-message",
+				id: formMessageId,
+				className: t1,
+				...props,
+				children: body
+			})
 		});
 		$[5] = body;
 		$[6] = formMessageId;

package/dist/components/highlighter.js

@@ -1,10 +1,11 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { annotate } from "rough-notation";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Highlighter(t0) {
-	const $ = _c(17);
+	const $ = _c(18);
 	const { children, action: t1, color: t2, strokeWidth: t3, animationDuration: t4, iterations: t5, padding: t6, multiline: t7, isView: t8 } = t0;
 	const action = t1 === undefined ? "highlight" : t1;
 	const color = t2 === undefined ? "#ffd1dc" : t2;
@@ -14,6 +15,7 @@ export function Highlighter(t0) {
 	const padding = t6 === undefined ? 2 : t6;
 	const multiline = t7 === undefined ? true : t7;
 	const isView = t8 === undefined ? false : t8;
+	const shouldReduceMotion = usePrefersReducedMotion();
 	const elementRef = useRef(null);
 	const annotationRef = useRef(null);
 	let t9;
@@ -60,7 +62,7 @@ export function Highlighter(t0) {
 	const shouldShow = !isView || isInView;
 	let t12;
 	let t13;
-	if ($[5] !== action || $[6] !== animationDuration || $[7] !== color || $[8] !== iterations || $[9] !== multiline || $[10] !== padding || $[11] !== shouldShow || $[12] !== strokeWidth) {
+	if ($[5] !== action || $[6] !== animationDuration || $[7] !== color || $[8] !== iterations || $[9] !== multiline || $[10] !== padding || $[11] !== shouldReduceMotion || $[12] !== shouldShow || $[13] !== strokeWidth) {
 		t12 = () => {
 			const element_0 = elementRef.current;
 			let resizeObserver = null;
@@ -71,6 +73,7 @@ export function Highlighter(t0) {
 					color,
 					strokeWidth,
 					animationDuration,
+					animate: !shouldReduceMotion,
 					iterations,
 					padding,
 					multiline
@@ -107,6 +110,7 @@ export function Highlighter(t0) {
 		};
 		t13 = [
 			shouldShow,
+			shouldReduceMotion,
 			action,
 			color,
 			strokeWidth,
@@ -121,26 +125,28 @@ export function Highlighter(t0) {
 		$[8] = iterations;
 		$[9] = multiline;
 		$[10] = padding;
-		$[11] = shouldShow;
-		$[12] = strokeWidth;
-		$[13] = t12;
-		$[14] = t13;
+		$[11] = shouldReduceMotion;
+		$[12] = shouldShow;
+		$[13] = strokeWidth;
+		$[14] = t12;
+		$[15] = t13;
 	} else {
-		t12 = $[13];
-		t13 = $[14];
+		t12 = $[14];
+		t13 = $[15];
 	}
 	useEffect(t12, t13);
 	let t14;
-	if ($[15] !== children) {
+	if ($[16] !== children) {
 		t14 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "highlighter",
 			ref: elementRef,
 			className: "relative inline-block bg-transparent",
 			children
 		});
-		$[15] = children;
-		$[16] = t14;
+		$[16] = children;
+		$[17] = t14;
 	} else {
-		t14 = $[16];
+		t14 = $[17];
 	}
 	return t14;
 }