@espressif/dashboard-ui-components 1.0.0 → 1.1.0

package/dist/{chunk-QJVPE3FM.js → chunk-34PXJOCS.js}

@@ -1,9 +1,9 @@
 import { getStrictContext, Button, Avatar, AvatarImage, AvatarFallback, AvatarBadge, useControlledState, useIsMobile, Separator, Skeleton, useDataState, Collapsible, CollapsibleTrigger, CollapsibleContent } from './chunk-F5P6S7K2.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
-import { LoaderCircle, EyeOffIcon, EyeIcon, User, CheckIcon, CircleIcon, ChevronRightIcon, ArrowUpRightIcon, CopyIcon, XIcon, PanelLeftIcon, X, ChevronDown, ChevronRight } from 'lucide-react';
+import { LoaderCircle, EyeOffIcon, EyeIcon, User, CheckIcon, CircleIcon, ChevronRightIcon, ArrowUpRightIcon, CopyIcon, XIcon, PanelLeftIcon, X, ChevronDown, CircleDot, Circle, ChevronRight } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React6 from 'react';
-import React6__default, { useState, useMemo, useRef, useEffect } from 'react';
+import * as React from 'react';
+import React__default, { useState, useMemo, useRef, useEffect } from 'react';
 import { Slot as Slot$2, DropdownMenu as DropdownMenu$1, Dialog } from 'radix-ui';
 import { motion, LayoutGroup, AnimatePresence, isMotionComponent, useInView } from 'motion/react';
 import * as motion5 from 'motion/react-client';
@@ -65,9 +65,9 @@ var DEFAULT_BOUNDS_OFFSET = {
   width: 0,
   height: 0
 };
-var HighlightContext = React6.createContext(void 0);
+var HighlightContext = React.createContext(void 0);
 function useHighlight() {
-  const context = React6.useContext(HighlightContext);
+  const context = React.useContext(HighlightContext);
   if (!context) {
     throw new Error("useHighlight must be used within a HighlightProvider");
   }
@@ -94,8 +94,8 @@ function Highlight({
     exitDelay = 200,
     mode = "children"
   } = props;
-  const localRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => localRef.current);
+  const localRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => localRef.current);
   const parentProps = props;
   const propsBoundsOffset = parentProps?.boundsOffset;
   const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
@@ -105,7 +105,7 @@ function Highlight({
   const boundsOffsetHeight = boundsOffset.height ?? 0;
   const variant = parentProps?.variant;
   const lineHeight = parentProps?.lineHeight ?? 2;
-  const boundsOffsetRef = React6.useRef({
+  const boundsOffsetRef = React.useRef({
     top: boundsOffsetTop,
     left: boundsOffsetLeft,
     width: boundsOffsetWidth,
@@ -113,7 +113,7 @@ function Highlight({
     variant,
     lineHeight
   });
-  React6.useEffect(() => {
+  React.useEffect(() => {
     boundsOffsetRef.current = {
       top: boundsOffsetTop,
       left: boundsOffsetLeft,
@@ -130,11 +130,13 @@ function Highlight({
     variant,
     lineHeight
   ]);
-  const [activeValue, setActiveValue] = React6.useState(
+  const [activeValue, setActiveValue] = React.useState(
     value ?? defaultValue ?? null
   );
-  const [boundsState, setBoundsState] = React6.useState(null);
-  const [activeClassNameState, setActiveClassNameState] = React6.useState("");
+  const [boundsState, setBoundsState] = React.useState(
+    null
+  );
+  const [activeClassNameState, setActiveClassNameState] = React.useState("");
   const safeSetActiveValue = (id2) => {
     setActiveValue((prev) => {
       if (prev !== id2) {
@@ -144,9 +146,9 @@ function Highlight({
       return prev;
     });
   };
-  const safeSetBoundsRef = React6.useRef(void 0);
-  React6.useEffect(() => {
-    safeSetBoundsRef.current = (bounds) => {
+  const safeSetBoundsRef = React.useRef(void 0);
+  React.useEffect(() => {
+    safeSetBoundsRef.current = (bounds, opts) => {
       if (!localRef.current) return;
       const containerRect = localRef.current.getBoundingClientRect();
       const offset = boundsOffsetRef.current;
@@ -168,47 +170,62 @@ function Highlight({
         if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) {
           return prev;
         }
-        return newBounds;
+        return {
+          ...newBounds,
+          instant: prev ? opts?.instant ?? false : false
+        };
       });
     };
   });
-  const safeSetBounds = (bounds) => {
-    safeSetBoundsRef.current?.(bounds);
+  const safeSetBounds = (bounds, opts) => {
+    safeSetBoundsRef.current?.(bounds, opts);
   };
-  const clearBounds = React6.useCallback(() => {
+  const clearBounds = React.useCallback(() => {
     setBoundsState((prev) => prev === null ? prev : null);
   }, []);
-  React6.useEffect(() => {
+  React.useEffect(() => {
     if (value !== void 0) setActiveValue(value);
     else if (defaultValue !== void 0) setActiveValue(defaultValue);
   }, [value, defaultValue]);
-  const id = React6.useId();
-  React6.useEffect(() => {
-    if (mode !== "parent") return;
+  const id = React.useId();
+  const getActiveElement = React.useCallback(() => {
     const container = localRef.current;
-    if (!container) return;
-    const onScroll = () => {
-      if (!activeValue) return;
-      const activeEl = container.querySelector(
-        `[data-value="${activeValue}"][data-highlight="true"]`
-      );
+    if (mode !== "parent" || !activeValue || !container) return null;
+    return container.querySelector(
+      `[data-value="${activeValue}"][data-highlight="true"]`
+    );
+  }, [mode, activeValue]);
+  const measureActiveRef = React.useRef(void 0);
+  React.useEffect(() => {
+    measureActiveRef.current = (opts) => {
+      const activeEl = getActiveElement();
       if (activeEl)
-        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect(), opts);
     };
+  });
+  React.useEffect(() => {
+    if (mode !== "parent") return;
+    const container = localRef.current;
+    if (!container) return;
+    const onScroll = () => measureActiveRef.current?.();
     container.addEventListener("scroll", onScroll, { passive: true });
     return () => container.removeEventListener("scroll", onScroll);
-  }, [mode, activeValue]);
-  React6.useLayoutEffect(() => {
-    if (mode !== "parent" || !activeValue) return;
+  }, [mode]);
+  React.useEffect(() => {
+    if (mode !== "parent") return;
     const container = localRef.current;
-    if (!container) return;
-    const raf = requestAnimationFrame(() => {
-      const activeEl = container.querySelector(
-        `[data-value="${activeValue}"][data-highlight="true"]`
-      );
-      if (activeEl)
-        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
-    });
+    if (!container || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(
+      () => measureActiveRef.current?.({ instant: true })
+    );
+    observer.observe(container);
+    const activeEl = getActiveElement();
+    if (activeEl) observer.observe(activeEl);
+    return () => observer.disconnect();
+  }, [mode, getActiveElement]);
+  React.useLayoutEffect(() => {
+    if (mode !== "parent" || !activeValue) return;
+    const raf = requestAnimationFrame(() => measureActiveRef.current?.());
     return () => cancelAnimationFrame(raf);
   }, [mode, activeValue]);
   const render = (children2) => {
@@ -246,7 +263,7 @@ function Highlight({
                     delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3
                   }
                 },
-                transition,
+                transition: boundsState.instant ? { duration: 0 } : transition,
                 style: { position: "absolute", zIndex: 0, ...style },
                 className: cn(className, activeClassNameState)
               }
@@ -281,7 +298,7 @@ function Highlight({
         forceUpdateBounds: props?.forceUpdateBounds
       },
       children: enabled ? controlledItems ? render(children) : render(
-        React6.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
+        React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
       ) : children
     }
   );
@@ -313,7 +330,7 @@ function HighlightItem({
   forceUpdateBounds,
   ...props
 }) {
-  const itemId = React6.useId();
+  const itemId = React.useId();
   const {
     activeValue,
     setActiveValue,
@@ -338,12 +355,12 @@ function HighlightItem({
   const isActive = activeValue === childValue;
   const isDisabled = disabled === void 0 ? contextDisabled : disabled;
   const itemTransition = transition ?? contextTransition;
-  const localRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => localRef.current);
-  const refCallback = React6.useCallback((node) => {
+  const localRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => localRef.current);
+  const refCallback = React.useCallback((node) => {
     localRef.current = node;
   }, []);
-  React6.useEffect(() => {
+  React.useEffect(() => {
     if (mode !== "parent") return;
     let rafId;
     let previousBounds = null;
@@ -377,7 +394,7 @@ function HighlightItem({
     forceUpdateBounds,
     contextForceUpdateBounds
   ]);
-  if (!React6.isValidElement(children)) return children;
+  if (!React.isValidElement(children)) return children;
   const dataAttributes = {
     "data-active": isActive ? "true" : "false",
     "aria-selected": isActive,
@@ -406,7 +423,7 @@ function HighlightItem({
   } : {};
   if (asChild) {
     if (mode === "children") {
-      return React6.cloneElement(
+      return React.cloneElement(
         element,
         {
           key: childValue,
@@ -458,7 +475,7 @@ function HighlightItem({
         ] })
       );
     }
-    return React6.cloneElement(element, {
+    return React.cloneElement(element, {
       ref: refCallback,
       ...getNonOverridingDataAttributes(element, {
         ...dataAttributes,
@@ -502,7 +519,7 @@ function HighlightItem({
             ...dataAttributes
           }
         ) }),
-        React6.cloneElement(element, {
+        React.cloneElement(element, {
           style: { position: "relative", zIndex: 1 },
           className: element.props.className,
           ...getNonOverridingDataAttributes(element, {
@@ -523,7 +540,7 @@ function DropdownMenu(props) {
     defaultValue: props?.defaultOpen,
     onChange: props?.onOpenChange
   });
-  const [highlightedValue, setHighlightedValue] = React6.useState(
+  const [highlightedValue, setHighlightedValue] = React.useState(
     null
   );
   return /* @__PURE__ */ jsx(
@@ -1122,7 +1139,7 @@ var sizeStyles = {
   lg: "text-base py-2 px-3"
 };
 function isListItem(item) {
-  return typeof item === "object" && item !== null && !React6__default.isValidElement(item) && "id" in item && "label" in item && typeof item.id === "string" && typeof item.label === "string";
+  return typeof item === "object" && item !== null && !React__default.isValidElement(item) && "id" in item && "label" in item && typeof item.id === "string" && typeof item.label === "string";
 }
 function getItemStyles(item) {
   const color = item.color || "default";
@@ -1324,7 +1341,7 @@ function List({
   const shouldShowSeparators = showSeparators && items.length > 1;
   const isDropdown = role === "dropdown-list";
   const ItemComponent = isDropdown ? DropdownListItem : StandardListItem;
-  const Wrapper = isDropdown ? React6__default.Fragment : ({ children }) => /* @__PURE__ */ jsx(
+  const Wrapper = isDropdown ? React__default.Fragment : ({ children }) => /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(LIST_CLASS_NAMES.container, "flex flex-col", className),
@@ -1343,7 +1360,7 @@ function List({
       !isDropdown && "px-2.5 py-1.5",
       group.labelClassName
     );
-    return /* @__PURE__ */ jsxs(React6__default.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
       group.label && (isDropdown ? /* @__PURE__ */ jsx(DropdownMenuLabel2, { className: labelClassName, children: labelContent }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: labelContent })),
       group.items.map((item, index) => {
         if (isListItem(item)) {
@@ -1423,11 +1440,11 @@ function Slot({
   ...props
 }) {
   const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
-  const Base = React6.useMemo(
+  const Base = React.useMemo(
     () => isAlreadyMotion ? children.type : motion.create(children.type),
     [isAlreadyMotion, children.type]
   );
-  if (!React6.isValidElement(children)) return null;
+  if (!React.isValidElement(children)) return null;
   const { ref: childRef, ...childProps } = children.props;
   const mergedProps = mergeProps(childProps, props);
   return /* @__PURE__ */ jsx(Base, { ...mergedProps, ref: mergeRefs(childRef, ref) });
@@ -1455,12 +1472,12 @@ function TooltipProvider({
   closeDelay = 300,
   transition = { type: "spring", stiffness: 300, damping: 35 }
 }) {
-  const globalId = React6.useId();
-  const [currentTooltip, setCurrentTooltip] = React6.useState(null);
-  const timeoutRef = React6.useRef(null);
-  const lastCloseTimeRef = React6.useRef(0);
-  const referenceElRef = React6.useRef(null);
-  const showTooltip = React6.useCallback(
+  const globalId = React.useId();
+  const [currentTooltip, setCurrentTooltip] = React.useState(null);
+  const timeoutRef = React.useRef(null);
+  const lastCloseTimeRef = React.useRef(0);
+  const referenceElRef = React.useRef(null);
+  const showTooltip = React.useCallback(
     (data) => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
       if (currentTooltip !== null) {
@@ -1476,22 +1493,22 @@ function TooltipProvider({
     },
     [openDelay, closeDelay, currentTooltip]
   );
-  const hideTooltip = React6.useCallback(() => {
+  const hideTooltip = React.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = window.setTimeout(() => {
       setCurrentTooltip(null);
       lastCloseTimeRef.current = Date.now();
     }, closeDelay);
   }, [closeDelay]);
-  const hideImmediate = React6.useCallback(() => {
+  const hideImmediate = React.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setCurrentTooltip(null);
     lastCloseTimeRef.current = Date.now();
   }, []);
-  const setReferenceEl = React6.useCallback((el) => {
+  const setReferenceEl = React.useCallback((el) => {
     referenceElRef.current = el;
   }, []);
-  React6.useEffect(() => {
+  React.useEffect(() => {
     const onKeyDown = (e) => {
       if (e.key === "Escape") hideImmediate();
     };
@@ -1535,7 +1552,7 @@ function TooltipArrow({
   const { side, align, open } = useRenderedTooltip();
   const { context, arrowRef } = useFloatingContext();
   const { transition, globalId } = useGlobalTooltip();
-  React6.useImperativeHandle(ref, () => arrowRef.current);
+  React.useImperativeHandle(ref, () => arrowRef.current);
   const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];
   return /* @__PURE__ */ jsx(
     MotionTooltipArrow,
@@ -1558,8 +1575,8 @@ function TooltipPortal(props) {
 }
 function TooltipOverlay() {
   const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip();
-  const [rendered, setRendered] = React6.useState({ data: null, open: false });
-  const arrowRef = React6.useRef(null);
+  const [rendered, setRendered] = React.useState({ data: null, open: false });
+  const arrowRef = React.useRef(null);
   const side = rendered.data?.side ?? "top";
   const align = rendered.data?.align ?? "center";
   const { refs, x, y, strategy, context, update } = useFloating({
@@ -1575,14 +1592,14 @@ function TooltipOverlay() {
       arrow({ element: arrowRef })
     ]
   });
-  React6.useEffect(() => {
+  React.useEffect(() => {
     if (currentTooltip) {
       setRendered({ data: currentTooltip, open: true });
     } else {
       setRendered((p) => p.data ? { ...p, open: false } : p);
     }
   }, [currentTooltip]);
-  React6.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (referenceElRef.current) {
       refs.setReference(referenceElRef.current);
       update();
@@ -1661,9 +1678,9 @@ function Tooltip({
   align = "center",
   alignOffset = 0
 }) {
-  const id = React6.useId();
-  const [props, setProps] = React6.useState({});
-  const [asChild, setAsChild] = React6.useState(false);
+  const id = React.useId();
+  const [props, setProps] = React.useState({});
+  const [asChild, setAsChild] = React.useState(false);
   return /* @__PURE__ */ jsx(
     LocalTooltipProvider,
     {
@@ -1695,16 +1712,16 @@ function shallowEqualWithoutChildren(a, b) {
 }
 function TooltipContent({ asChild = false, ...props }) {
   const { setProps, setAsChild } = useTooltip();
-  const lastPropsRef = React6.useRef(
+  const lastPropsRef = React.useRef(
     void 0
   );
-  React6.useEffect(() => {
+  React.useEffect(() => {
     if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
       lastPropsRef.current = props;
       setProps(props);
     }
   }, [props, setProps]);
-  React6.useEffect(() => {
+  React.useEffect(() => {
     setAsChild(asChild);
   }, [asChild, setAsChild]);
   return null;
@@ -1735,10 +1752,10 @@ function TooltipTrigger({
     currentTooltip,
     setReferenceEl
   } = useGlobalTooltip();
-  const triggerRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => triggerRef.current);
-  const suppressNextFocusRef = React6.useRef(false);
-  const handleOpen = React6.useCallback(() => {
+  const triggerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => triggerRef.current);
+  const suppressNextFocusRef = React.useRef(false);
+  const handleOpen = React.useCallback(() => {
     if (!triggerRef.current) return;
     setReferenceEl(triggerRef.current);
     const rect = triggerRef.current.getBoundingClientRect();
@@ -1763,7 +1780,7 @@ function TooltipTrigger({
     alignOffset,
     id
   ]);
-  const handlePointerDown = React6.useCallback(
+  const handlePointerDown = React.useCallback(
     (e) => {
       onPointerDown?.(e);
       if (currentTooltip?.id === id) {
@@ -1776,21 +1793,21 @@ function TooltipTrigger({
     },
     [onPointerDown, currentTooltip?.id, id, hideImmediate]
   );
-  const handleMouseEnter = React6.useCallback(
+  const handleMouseEnter = React.useCallback(
     (e) => {
       onMouseEnter?.(e);
       handleOpen();
     },
     [handleOpen, onMouseEnter]
   );
-  const handleMouseLeave = React6.useCallback(
+  const handleMouseLeave = React.useCallback(
     (e) => {
       onMouseLeave?.(e);
       hideTooltip();
     },
     [hideTooltip, onMouseLeave]
   );
-  const handleFocus = React6.useCallback(
+  const handleFocus = React.useCallback(
     (e) => {
       onFocus?.(e);
       if (suppressNextFocusRef.current) return;
@@ -1798,7 +1815,7 @@ function TooltipTrigger({
     },
     [handleOpen, onFocus]
   );
-  const handleBlur = React6.useCallback(
+  const handleBlur = React.useCallback(
     (e) => {
       onBlur?.(e);
       hideTooltip();
@@ -1963,8 +1980,8 @@ var presetFocusVisibleRingColors = {
   mist: "focus-visible:ring-mist-border"
 };
 function ProgressBarOverlay() {
-  const [progress, setProgress] = React6.useState(10);
-  React6.useEffect(() => {
+  const [progress, setProgress] = React.useState(10);
+  React.useEffect(() => {
     if (progress >= 90) return;
     const timeout = setTimeout(() => {
       const increment = Math.random() * 15 + 5;
@@ -1983,7 +2000,7 @@ function ProgressBarOverlay() {
   );
 }
 var iconAnimateClasses = "transition-transform duration-200";
-var Button2 = React6.forwardRef(
+var Button2 = React.forwardRef(
   ({
     children,
     color = "primary",
@@ -2091,7 +2108,7 @@ var buttonVariants2 = cva(
     }
   }
 );
-var Button3 = React6.forwardRef(
+var Button3 = React.forwardRef(
   ({ className, variant, size, asChild = false, type, ...props }, ref) => {
     const Comp = asChild ? Slot$1 : "button";
     return /* @__PURE__ */ jsx(
@@ -2106,7 +2123,7 @@ var Button3 = React6.forwardRef(
   }
 );
 Button3.displayName = "Button";
-var CraftButtonContext = React6.createContext({});
+var CraftButtonContext = React.createContext({});
 function CraftButtonLabel({ children, className }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -2120,7 +2137,7 @@ function CraftButtonLabel({ children, className }) {
   );
 }
 function CraftButtonIcon({ children, className }) {
-  const { size } = React6.useContext(CraftButtonContext);
+  const { size } = React.useContext(CraftButtonContext);
   const iconSize = size === "lg" ? "size-6" : size === "sm" ? "size-4" : "size-5";
   return /* @__PURE__ */ jsxs("span", { className: cn("relative z-1", iconSize, className), children: [
     /* @__PURE__ */ jsx(
@@ -2222,7 +2239,7 @@ function CopyButton({
     value: copied,
     onChange: onCopiedChange
   });
-  const handleCopy = React6.useCallback(
+  const handleCopy = React.useCallback(
     (e) => {
       onClick?.(e);
       if (copied) return;
@@ -2264,7 +2281,7 @@ function CopyButton({
     }
   );
 }
-var ScrollArea = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -2278,7 +2295,7 @@ var ScrollArea = React6.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React6.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -2325,7 +2342,7 @@ var sizeClasses2 = {
   default: "h-10 px-3 py-2 text-base md:text-sm",
   lg: "h-12 px-4 text-lg"
 };
-var Input = React6.forwardRef(
+var Input = React.forwardRef(
   ({
     className,
     type,
@@ -2353,15 +2370,15 @@ var Input = React6.forwardRef(
     placeholder,
     ...restProps
   }, ref) => {
-    const autoId = React6.useId();
+    const autoId = React.useId();
     const inputId = id || autoId;
-    const [charCount, setCharCount] = React6.useState(() => {
+    const [charCount, setCharCount] = React.useState(() => {
       if (charLimit === void 0) return 0;
       if (typeof value === "string") return value.length;
       if (typeof defaultValue === "string") return defaultValue.length;
       return 0;
     });
-    React6.useEffect(() => {
+    React.useEffect(() => {
       if (charLimit !== void 0 && typeof value === "string") {
         setCharCount(value.length);
       }
@@ -2396,6 +2413,18 @@ var Input = React6.forwardRef(
       onChange?.(e);
     };
     const effectivePlaceholder = floatingLabel ? " " : placeholder;
+    const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
+    const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
+    const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
+    const hasAddOn = startAddOnNode != null || endAddOnNode != null;
+    const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
+    const helperStartId = `${inputId}-helper-start`;
+    const helperEndId = `${inputId}-helper-end`;
+    const describedBy = [
+      errorContent && `${inputId}-error`,
+      startHelperContent && !errorContent && helperStartId,
+      endHelperContent && !errorContent && helperEndId
+    ].filter(Boolean).join(" ") || void 0;
     const inputClasses = cn(
       "flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 read-only:bg-muted z-10",
       floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses2[effectiveSize],
@@ -2404,11 +2433,13 @@ var Input = React6.forwardRef(
       startIcon && "ps-9",
       endIcon && "pe-9",
       charLimit !== void 0 && !endIcon && "pe-14",
-      startAddOnContent && "-ms-px rounded-s-none shadow-none",
-      endAddOnContent && "-me-px rounded-e-none shadow-none",
-      startAddOn && "rounded-s-none shadow-none",
-      endAddOn && "rounded-e-none shadow-none",
-      floatingLabel && "peer placeholder:text-transparent",
+      charLimit !== void 0 && endIcon && "pe-20",
+      startAddOnNode != null && "rounded-s-none shadow-none",
+      endAddOnNode != null && "rounded-e-none shadow-none",
+      // `peer` is a marker only; the overlay decorators are later siblings and
+      // rely on it for `peer-disabled:` / `peer-placeholder-shown:` variants.
+      "peer",
+      floatingLabel && "placeholder:text-transparent",
       className
     );
     const inputElement = /* @__PURE__ */ jsx(
@@ -2420,7 +2451,7 @@ var Input = React6.forwardRef(
         className: inputClasses,
         required,
         "aria-invalid": hasError || void 0,
-        "aria-describedby": errorContent ? `${inputId}-error` : startHelperContent || endHelperContent ? `${inputId}-helper` : void 0,
+        "aria-describedby": describedBy,
         onChange: handleChange,
         value,
         defaultValue,
@@ -2429,28 +2460,18 @@ var Input = React6.forwardRef(
         ...restProps
       }
     );
-    let inputContainer;
-    if (startAddOn || endAddOn) {
-      inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
-        startAddOn && /* @__PURE__ */ jsx("span", { className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOn }),
-        inputElement,
-        endAddOn && /* @__PURE__ */ jsx("span", { className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOn })
-      ] });
-    } else if (startAddOnContent || endAddOnContent) {
-      inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
-        startAddOnContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOnContent }),
-        inputElement,
-        endAddOnContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOnContent })
-      ] });
-    } else if (startIcon || endIcon || charLimit !== void 0 || floatingLabel) {
-      inputContainer = /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+    let inputContainer = inputElement;
+    if (hasOverlay) {
+      inputContainer = /* @__PURE__ */ jsxs("div", { className: "group relative min-w-0 flex-1", children: [
         inputElement,
         startIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50", children: startIcon }),
-        endIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50", children: endIcon }),
-        charLimit !== void 0 && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums text-muted-foreground peer-disabled:opacity-50", children: [
-          charCount,
-          "/",
-          charLimit
+        (endIcon || charLimit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center gap-2 pe-3 text-muted-foreground/80 peer-disabled:opacity-50", children: [
+          charLimit !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+            charCount,
+            "/",
+            charLimit
+          ] }),
+          endIcon
         ] }),
         floatingLabel && label && /* @__PURE__ */ jsxs(
           "label",
@@ -2464,8 +2485,13 @@ var Input = React6.forwardRef(
           }
         )
       ] });
-    } else {
-      inputContainer = inputElement;
+    }
+    if (hasAddOn) {
+      inputContainer = /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg", children: [
+        startAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: startAddOnNode }),
+        inputContainer,
+        endAddOnNode != null && /* @__PURE__ */ jsx("span", { className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground", children: endAddOnNode })
+      ] });
     }
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
       label && !floatingLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -2478,18 +2504,11 @@ var Input = React6.forwardRef(
       !label && hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent }),
       inputContainer,
       errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
-      startHelperContent && !errorContent && /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: `${inputId}-helper`,
-          className: "text-sm text-muted-foreground",
-          children: startHelperContent
-        }
-      ),
+      startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
       endHelperContent && !errorContent && /* @__PURE__ */ jsx(
         "div",
         {
-          id: `${inputId}-helper`,
+          id: helperEndId,
           className: "text-sm text-end text-muted-foreground",
           children: endHelperContent
         }
@@ -2498,7 +2517,7 @@ var Input = React6.forwardRef(
   }
 );
 Input.displayName = "Input";
-var InputPassword = React6.forwardRef(
+var InputPassword = React.forwardRef(
   ({ className, ...props }, ref) => {
     const [isVisible, setIsVisible] = useState(false);
     return /* @__PURE__ */ jsx(
@@ -2621,8 +2640,8 @@ function SheetTitle(props) {
 function SheetDescription(props) {
   return /* @__PURE__ */ jsx(Dialog.Description, { "data-slot": "sheet-description", ...props });
 }
-var SheetFloatingContext = React6.createContext(false);
-var SheetDismissContext = React6.createContext({
+var SheetFloatingContext = React.createContext(false);
+var SheetDismissContext = React.createContext({
   closeOnEscape: true,
   closeOnOutsideClick: true
 });
@@ -2632,7 +2651,7 @@ function Sheet2({
   closeOnOutsideClick = true,
   ...props
 }) {
-  const dismissBehavior = React6.useMemo(
+  const dismissBehavior = React.useMemo(
     () => ({ closeOnEscape, closeOnOutsideClick }),
     [closeOnEscape, closeOnOutsideClick]
   );
@@ -2662,8 +2681,8 @@ function SheetContent2({
   onPointerDownOutside,
   ...props
 }) {
-  const floating = React6.useContext(SheetFloatingContext);
-  const { closeOnEscape, closeOnOutsideClick } = React6.useContext(SheetDismissContext);
+  const floating = React.useContext(SheetFloatingContext);
+  const { closeOnEscape, closeOnOutsideClick } = React.useContext(SheetDismissContext);
   const closeClassName = "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none";
   if (floating) {
     return /* @__PURE__ */ jsxs(SheetPortal, { children: [
@@ -2787,10 +2806,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React6.useState(false);
-  const [_open, _setOpen] = React6.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const [_open, _setOpen] = React.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React6.useCallback(
+  const setOpen = React.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -2802,10 +2821,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React6.useCallback(() => {
+  const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React6.useEffect(() => {
+  React.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -2816,7 +2835,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React6.useMemo(
+  const contextValue = React.useMemo(
     () => ({
       state,
       open,
@@ -3308,7 +3327,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React6.useMemo(() => {
+  const width = React.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -3398,41 +3417,31 @@ function SidebarMenuSubButton({
 function isSidebarGroup(entry) {
   return "items" in entry;
 }
+
+// src/utils/path-match.ts
+function isPathPrefixOf(prefix, fullPath) {
+  if (prefix === fullPath) return true;
+  return fullPath.startsWith(prefix) && (prefix.endsWith("/") || fullPath[prefix.length] === "/");
+}
 var sidebarGroupClassName = "py-0 px-2";
+var rowIconClass = "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
+var rowFontStyle = {
+  fontSize: "var(--espd-sidebar-item-font-size, 0.875rem)",
+  lineHeight: "1.25rem"
+};
+var flyoutGroupLabelStyle = {
+  fontSize: "var(--espd-sidebar-flyout-group-label-font-size, 0.875rem)",
+  lineHeight: "1.25rem"
+};
 function ItemIcon({
   icon: Icon,
-  label,
-  className = "h-4 w-4"
+  active,
+  className
 }) {
   if (Icon) return /* @__PURE__ */ jsx(Icon, { className });
-  return /* @__PURE__ */ jsx(
-    Avatar2,
-    {
-      name: label,
-      size: "sm",
-      className: "shrink-0 !h-4 !w-4 bg-sidebar-foreground/15 text-sidebar-foreground"
-    }
-  );
+  if (active) return /* @__PURE__ */ jsx(CircleDot, { className });
+  return /* @__PURE__ */ jsx(Circle, { className: cn("opacity-50", className) });
 }
-function GroupIconEl({
-  icon: Icon,
-  label,
-  className = "h-4 w-4 shrink-0"
-}) {
-  if (Icon) return /* @__PURE__ */ jsx(Icon, { className });
-  return /* @__PURE__ */ jsx(
-    Avatar2,
-    {
-      name: label,
-      size: "sm",
-      className: "shrink-0 !h-4 !w-4 bg-sidebar-foreground/15 text-sidebar-foreground"
-    }
-  );
-}
-var sidebarItemFontStyle = { fontSize: "var(--espd-sidebar-item-font-size, 0.875rem)" };
-var flyoutGroupLabelStyle = {
-  fontSize: "var(--espd-sidebar-flyout-group-label-font-size, 1rem)"
-};
 function GroupMenuItems({
   group,
   isSelected,
@@ -3443,10 +3452,14 @@ function GroupMenuItems({
     /* @__PURE__ */ jsxs(
       DropdownMenuLabel2,
       {
-        className: "flex items-center gap-2 px-3 py-2 font-normal text-muted-foreground",
+        className: cn(
+          "flex items-center gap-2 px-3 py-2 font-normal text-muted-foreground",
+          // DropdownMenuLabel, unlike DropdownMenuItem, ships no svg sizing of its own.
+          rowIconClass
+        ),
         style: flyoutGroupLabelStyle,
         children: [
-          group.icon ? /* @__PURE__ */ jsx(GroupIconEl, { icon: group.icon, label: group.label, className: "h-4 w-4 shrink-0 text-foreground" }) : null,
+          group.icon ? /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon, className: "text-foreground" }) : null,
           /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label })
         ]
       }
@@ -3454,8 +3467,8 @@ function GroupMenuItems({
     /* @__PURE__ */ jsx(DropdownMenuSeparator2, {}),
     group.items.map((item) => {
       const active = isSelected(item.path);
-      return /* @__PURE__ */ jsx(DropdownMenuItem2, { className: active ? "bg-accent" : "", style: sidebarItemFontStyle, children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, className: "flex items-center gap-2 cursor-pointer w-full", children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: onItemClick, children: [
-        /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, label: item.label }),
+      return /* @__PURE__ */ jsx(DropdownMenuItem2, { className: active ? "bg-accent" : "", style: rowFontStyle, children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, className: "flex items-center gap-2 cursor-pointer w-full", children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: onItemClick, children: [
+        /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
         /* @__PURE__ */ jsx("span", { className: active ? "font-semibold" : "font-medium", children: item.label })
       ] }) }) }, item.id);
     })
@@ -3468,7 +3481,7 @@ function CollapsedSidebarGroup({
 }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: "w-auto", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu2, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "sm", tooltip: group.label, children: /* @__PURE__ */ jsx(GroupIconEl, { icon: group.icon, label: group.label, className: "h-5 w-5 shrink-0" }) }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "sm", tooltip: group.label, className: rowIconClass, children: /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }) }) }),
     /* @__PURE__ */ jsx(
       DropdownMenuContent2,
       {
@@ -3490,7 +3503,14 @@ function CollapsedSidebarGroup({
     )
   ] }) }) }) });
 }
-var groupHeaderClass = "flex flex-1 items-center gap-2 rounded-md p-2 h-7 font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer";
+var groupHeaderClass = cn(
+  // No `flex-1`: this button is a column flex item, so growing made it take its
+  // content height (36px) and render taller than the `h-7` item rows below it.
+  // `w-full` keeps the full-width hit area, `overflow-hidden` makes the label truncate.
+  "flex w-full items-center gap-2 rounded-md p-2 h-7 overflow-hidden font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer",
+  // Sizes both the group icon and the expand/collapse chevron.
+  rowIconClass
+);
 function ExpandedSidebarGroup({
   group,
   isGroupOpen,
@@ -3498,12 +3518,12 @@ function ExpandedSidebarGroup({
   renderMenuItem
 }) {
   return /* @__PURE__ */ jsx(Collapsible, { open: isGroupOpen, onOpenChange: onToggle, children: /* @__PURE__ */ jsxs(SidebarGroup, { className: sidebarGroupClassName, children: [
-    /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: groupHeaderClass, style: sidebarItemFontStyle, children: [
-      /* @__PURE__ */ jsx(GroupIconEl, { icon: group.icon, label: group.label }),
+    /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: groupHeaderClass, style: rowFontStyle, children: [
+      /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }),
       /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label }),
-      isGroupOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 transition-transform" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-3.5 w-3.5 shrink-0 transition-transform" })
+      isGroupOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto transition-transform" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform" })
     ] }) }),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "pl-3", children: group.items.map((item) => renderMenuItem(item)) }) }) })
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "pl-6 pt-1", children: group.items.map((item) => renderMenuItem(item)) }) }) })
   ] }) });
 }
 function TopLevelLinkRow({
@@ -3546,32 +3566,52 @@ function Sidebar2({
     });
   };
   const isSelected = (path) => {
-    return currentPath.startsWith(path);
+    return isPathPrefixOf(path, currentPath);
   };
   const renderMenuItem = (item) => {
-    const Icon = item.icon;
     const EndActionIcon = item.endAction?.icon;
     const active = isSelected(item.path);
     return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
-      /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: active, size: "sm", tooltip: item.label, children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: closeMobileSidebar, children: [
-        Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(
-          Avatar2,
-          {
-            name: item.label,
-            size: "sm",
-            className: "shrink-0 !h-4 !w-4 bg-sidebar-foreground/15 text-sidebar-foreground"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `whitespace-nowrap max-w-[168px] truncate text-sidebar-foreground ${active ? "font-semibold" : "font-medium"}`,
-            style: sidebarItemFontStyle,
-            children: item.label
-          }
-        )
-      ] }) }) }),
-      item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip3, { content: item.endAction.tooltip, side: "right", sideOffset: 8, children: /* @__PURE__ */ jsx(SidebarMenuAction, { asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { to: item.endAction.path, children: /* @__PURE__ */ jsx("span", { className: "contents", onClick: closeMobileSidebar, children: /* @__PURE__ */ jsx(EndActionIcon, {}) }) }) }) })
+      /* @__PURE__ */ jsx(
+        SidebarMenuButton,
+        {
+          asChild: true,
+          isActive: active,
+          size: "sm",
+          tooltip: item.label,
+          className: cn(
+            rowIconClass,
+            // Selected-row fill spelled out here rather than left to the primitive's
+            // `data-[active=true]:bg-sidebar-accent`: that rule needs `data-active` on the
+            // rendered element, and `asChild` hands the data attributes to the app's
+            // LinkComponent, which need not forward them. `className` is the one prop every
+            // LinkComponent takes, so it is the only reliable channel. `isActive` above
+            // still sets `data-active` for apps that do forward it, and for test selectors.
+            active && "bg-sidebar-accent text-sidebar-accent-foreground",
+            // Reserve room for the endAction. The primitive does this with
+            // `:has([data-sidebar=menu-action])`, which cannot fire here: `asChild` hands
+            // its data attributes to the app's LinkComponent, which need not forward them.
+            item.endAction && "pr-8"
+          ),
+          children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: closeMobileSidebar, children: [
+            /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "whitespace-nowrap max-w-[168px] truncate",
+                  // Set on the label, so it has to restate the row's colour: a plain
+                  // `text-sidebar-foreground` here would beat the parent's accent colour.
+                  active ? "font-semibold text-sidebar-accent-foreground" : "font-medium text-sidebar-foreground"
+                ),
+                style: rowFontStyle,
+                children: item.label
+              }
+            )
+          ] }) })
+        }
+      ),
+      item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip3, { content: item.endAction.tooltip, side: "right", sideOffset: 8, children: /* @__PURE__ */ jsx(SidebarMenuAction, { asChild: true, className: cn(rowIconClass, "right-1.5"), children: /* @__PURE__ */ jsx(LinkComponent, { to: item.endAction.path, children: /* @__PURE__ */ jsx("span", { className: "contents", onClick: closeMobileSidebar, children: /* @__PURE__ */ jsx(EndActionIcon, {}) }) }) }) })
     ] }, item.id);
   };
   const renderGroup = (group) => {
@@ -3664,7 +3704,7 @@ function renderIconSlot(icon) {
   if (icon == null) return null;
   return /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: icon });
 }
-var Link = React6.forwardRef(
+var Link = React.forwardRef(
   function Link2({
     to,
     params,
@@ -3881,8 +3921,8 @@ function HighlightText({
   transition = { duration: 2, ease: "easeInOut" },
   ...props
 }) {
-  const localRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => localRef.current);
+  const localRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => localRef.current);
   const inViewResult = useInView(localRef, {
     once: inViewOnce,
     margin: inViewMargin
@@ -4007,4 +4047,4 @@ function parseTextMarkup(text) {
   return parts;
 }
 
-export { Avatar2 as Avatar, Button2 as Button, CopyButton, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut2 as DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, GlitchText, GradientText, Highlight, HighlightItem, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet2 as Sheet, SheetClose2 as SheetClose, SheetContent2 as SheetContent, SheetDescription2 as SheetDescription, SheetFooter2 as SheetFooter, SheetHeader2 as SheetHeader, SheetTitle2 as SheetTitle, SheetTrigger2 as SheetTrigger, ShimmeringText, Sidebar, Sidebar2, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slot, Tooltip2 as Tooltip, Tooltip3 as Tooltip2, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, inputLabelClassName, isSidebarGroup, parseTextMarkup, useSidebar };
+export { Avatar2 as Avatar, Button2 as Button, CopyButton, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut2 as DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, GlitchText, GradientText, Highlight, HighlightItem, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet2 as Sheet, SheetClose2 as SheetClose, SheetContent2 as SheetContent, SheetDescription2 as SheetDescription, SheetFooter2 as SheetFooter, SheetHeader2 as SheetHeader, SheetTitle2 as SheetTitle, SheetTrigger2 as SheetTrigger, ShimmeringText, Sidebar, Sidebar2, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slot, Tooltip2 as Tooltip, Tooltip3 as Tooltip2, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants3 as buttonVariants, inputLabelClassName, isPathPrefixOf, isSidebarGroup, parseTextMarkup, useSidebar };