@mks2508/mks-ui 0.6.7 → 0.7.0

package/dist/react-ui/blocks/Sidebar/SidebarToggle.js

@@ -0,0 +1,119 @@
+"use client";
+
+import { SIDEBAR_ARIA_LABELS, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_TAILWIND_CLASSES } from "./Sidebar.constants.js";
+import { useSidebarContext } from "./hooks/useSidebarContext.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Sidebar/SidebarToggle.tsx
+/**
+* Icono de chevron SVG inline (default toggle icon)
+*/
+function DefaultToggleIcon({ collapseMode }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "toggle-icon w-3 h-3 text-zinc-400",
+		fill: "none",
+		stroke: "currentColor",
+		viewBox: "0 0 24 24",
+		children: collapseMode === "hide" ? /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: 2,
+			d: "M9 5l7 7-7 7"
+		}) : /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: 2,
+			d: "M15 19l-7-7 7-7"
+		})
+	});
+}
+/**
+* Componente de botón toggle del Sidebar
+*
+* @description
+* Botón que controla el estado abierto/cerrado del sidebar.
+* Renderiza un `<label>` por defecto que controla un checkbox oculto,
+* permitiendo gestionar el estado con CSS puro (:checked selector).
+*
+* Características:
+* - Soporta render props para acceso al estado (open, active)
+* - Renderiza icono de chevron por defecto (customizable)
+* - Aplica data attributes para styling CSS
+* - Accesibilidad completa (aria-label, aria-expanded)
+* - Soporta prop `as` para usar elemento/componente custom
+*
+* @example
+* ```tsx
+* // Uso básico con icono por defecto
+* <SidebarToggle />
+* ```
+*
+* @example
+* ```tsx
+* // Con render props para estado
+* <SidebarToggle>
+*   {({ open, active }) => (
+*     <div className={cn(active && 'bg-blue-500')}>
+*       {open ? <CloseIcon /> : <MenuIcon />}
+*     </div>
+*   )}
+* </SidebarToggle>
+* ```
+*
+* @example
+* ```tsx
+* // Con icono custom
+* <SidebarToggle className="bg-zinc-800">
+*   <CustomChevronIcon />
+* </SidebarToggle>
+* ```
+*
+* @example
+* ```tsx
+* // Como botón real (sin checkbox)
+* <SidebarToggle as="button" onClick={() => setOpen(!open)}>
+*   Toggle
+* </SidebarToggle>
+* ```
+*/
+const SidebarToggle = forwardRef(function SidebarToggle({ children, iconLibrary, className = "", style, "aria-label": ariaLabel, as, ...props }, ref) {
+	const { open, setOpen, toggleId, collapseMode } = useSidebarContext();
+	const isRenderProp = typeof children === "function";
+	const toggleState = {
+		active: open,
+		open
+	};
+	const Component = as || "label";
+	const commonProps = {
+		className: `${SIDEBAR_TAILWIND_CLASSES.toggleButton} ${SIDEBAR_TAILWIND_CLASSES.toggleButtonWrapper} bg-zinc-800 border border-zinc-700 hover:bg-zinc-700 ${className}`,
+		style,
+		"aria-label": ariaLabel || SIDEBAR_ARIA_LABELS.toggleSidebar,
+		[SIDEBAR_DATA_ATTRIBUTES.ACTIVE]: open,
+		...props
+	};
+	if (!as || as === "label") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		id: toggleId,
+		className: SIDEBAR_TAILWIND_CLASSES.srOnly,
+		checked: open,
+		onChange: (e) => setOpen(e.target.checked),
+		"aria-label": ariaLabel || SIDEBAR_ARIA_LABELS.toggleSidebar
+	}), /* @__PURE__ */ jsx("label", {
+		ref,
+		htmlFor: toggleId,
+		...commonProps,
+		children: isRenderProp ? children(toggleState) : children ? children : /* @__PURE__ */ jsx(DefaultToggleIcon, { collapseMode })
+	})] });
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		onClick: () => setOpen(!open),
+		"aria-expanded": open,
+		role: "button",
+		...commonProps,
+		children: isRenderProp ? children(toggleState) : children ? children : /* @__PURE__ */ jsx(DefaultToggleIcon, { collapseMode })
+	});
+});
+
+//#endregion
+export { SidebarToggle };

package/dist/react-ui/blocks/Sidebar/SidebarTooltip.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import React from "react";
+import '@/react-ui/blocks/Sidebar/animations/tooltip-keyframes.css';
+export interface SidebarTooltipProps {
+    /** Contenido del tooltip */
+    children: ReactNode;
+    /** Título opcional del tooltip */
+    title?: string;
+    /** Modo debug para visualizar safety triangle y layers */
+    debug?: boolean;
+    /** Handler llamado cuando el mouse sale del tooltip */
+    onMouseLeave?: () => void;
+}
+export declare const SidebarTooltip: React.MemoExoticComponent<({ children, title, debug, onMouseLeave, }: SidebarTooltipProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=SidebarTooltip.d.ts.map

package/dist/react-ui/blocks/Sidebar/SidebarTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTooltip.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Sidebar/SidebarTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,4DAA4D,CAAA;AAYnE,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAED,eAAO,MAAM,cAAc,wEAKxB,mBAAmB,6CAwNpB,CAAA"}

package/dist/react-ui/blocks/Sidebar/SidebarTooltip.js

@@ -0,0 +1,177 @@
+"use client";
+
+import { cn } from "../../lib/utils.js";
+import "./animations/tooltip-keyframes.js";
+import React, { cloneElement, isValidElement, memo, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Sidebar/SidebarTooltip.tsx
+/**
+* Helper: Extraer key única de un child (usa href del SidebarSubLink)
+*/
+function getChildKey(child, index) {
+	if (child.key) return String(child.key);
+	if (child.props?.href) return child.props.href;
+	return `item-${index}`;
+}
+const SidebarTooltip = memo(function SidebarTooltip({ children, title, debug = false, onMouseLeave }) {
+	const tooltipRef = useRef(null);
+	const contentGridRef = useRef(null);
+	const previousChildrenKeysRef = useRef(/* @__PURE__ */ new Set());
+	const previousTitleRef = useRef(void 0);
+	const isFirstRenderRef = useRef(true);
+	const [isTransitioning, setIsTransitioning] = useState(false);
+	const currentChildrenKeys = useMemo(() => {
+		const keys = /* @__PURE__ */ new Set();
+		const processChildren = (c) => {
+			if (Array.isArray(c)) c.forEach((child, index) => {
+				if (isValidElement(child)) keys.add(getChildKey(child, index));
+			});
+			else if (isValidElement(c)) keys.add(getChildKey(c, 0));
+		};
+		processChildren(children);
+		return keys;
+	}, [children]);
+	const titleChanged = previousTitleRef.current !== void 0 && previousTitleRef.current !== title;
+	const processedChildren = useMemo(() => {
+		const prevKeys = previousChildrenKeysRef.current;
+		const isFirstRender = isFirstRenderRef.current;
+		const processChild = (child, index) => {
+			if (!isValidElement(child)) return child;
+			const childKey = getChildKey(child, index);
+			const isNew = !prevKeys.has(childKey);
+			let animationState = "static";
+			if (isFirstRender) animationState = "entering";
+			else if (isNew) animationState = "entering";
+			return cloneElement(child, {
+				key: childKey,
+				animationOrder: index,
+				animationState
+			});
+		};
+		if (Array.isArray(children)) return children.map((child, index) => processChild(child, index));
+		return processChild(children, 0);
+	}, [children]);
+	useEffect(() => {
+		previousChildrenKeysRef.current = currentChildrenKeys;
+		previousTitleRef.current = title;
+		if (isFirstRenderRef.current) isFirstRenderRef.current = false;
+		if (titleChanged) {
+			setIsTransitioning(true);
+			const timer = setTimeout(() => setIsTransitioning(false), 250);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		currentChildrenKeys,
+		title,
+		titleChanged
+	]);
+	useEffect(() => {
+		if (!tooltipRef.current) return;
+		const animation = tooltipRef.current.animate([{
+			opacity: 0,
+			transform: "translateX(-5px) scale(0.98)"
+		}, {
+			opacity: 1,
+			transform: "translateX(0) scale(1)"
+		}], {
+			duration: 150,
+			easing: "ease-out",
+			fill: "forwards"
+		});
+		return () => {
+			animation.cancel();
+			if (tooltipRef.current) tooltipRef.current.style.opacity = "0";
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+          @keyframes activatePointerEvents {
+            to { pointer-events: all; }
+          }
+
+          .sidebar-tooltip::before {
+            content: '';
+            position: absolute;
+            right: 100%;
+            top: 0;
+            width: calc(var(--sidebar-tooltip-distance) + 0.25rem + 2px);
+            height: 100%;
+            clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 75%);
+            pointer-events: none;
+            animation: activatePointerEvents 0s 0.15s forwards;
+            z-index: -1;
+            scale: 1;
+            transition: scale 0s 0.2s;
+            ${debug ? `
+              background: repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 10px,
+                rgba(244, 114, 182, 0.15) 10px,
+                rgba(244, 114, 182, 0.15) 20px
+              );
+              border: 2px dashed rgb(244 114 182);
+            ` : ""}
+          }
+        ` } }),
+		debug && /* @__PURE__ */ jsx("div", {
+			className: "absolute text-[9px] text-pink-300 font-mono bg-black/70 px-1.5 py-0.5 rounded pointer-events-none z-50",
+			style: {
+				right: "calc(100% + 4px)",
+				top: "50%",
+				transform: "translateY(-50%)"
+			},
+			children: "SAFETY TRIANGLE"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			ref: tooltipRef,
+			className: "sidebar-tooltip min-w-56 opacity-0",
+			style: {
+				position: "absolute",
+				positionAnchor: "--sidebar-indicator",
+				left: "anchor(right)",
+				marginLeft: "calc(var(--sidebar-width) + var(--sidebar-tooltip-distance))",
+				top: "anchor(center)",
+				translate: "0 -50%",
+				zIndex: 50
+			},
+			onMouseLeave,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("sidebar-tooltip-inner overflow-hidden rounded-lg shadow-lg border border-border bg-card backdrop-blur-sm", debug && "ring-2 ring-cyan-400/50"),
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "absolute -left-1 -top-6 h-12 w-12 rounded-full bg-primary/10 blur-xl pointer-events-none z-0" }),
+					/* @__PURE__ */ jsx("div", { className: "absolute -right-1 -bottom-6 h-12 w-12 rounded-full bg-primary/10 blur-xl pointer-events-none z-0" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "sidebar-tooltip-content relative pointer-events-auto",
+						style: { zIndex: 10 },
+						children: [title && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center px-4 py-3 font-medium border-b border-border/50 text-foreground relative",
+							children: [/* @__PURE__ */ jsx("span", { children: title }), debug && /* @__PURE__ */ jsx("span", {
+								className: "ml-auto text-[8px] text-purple-400 font-mono space-x-1",
+								children: /* @__PURE__ */ jsx("span", { children: "GLASS" })
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							ref: contentGridRef,
+							className: "tooltip-content-grid",
+							"data-state": "open",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "tooltip-content-inner",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "max-h-[calc(100vh-200px)] overflow-y-auto py-2",
+									children: /* @__PURE__ */ jsx("div", {
+										className: "space-y-0.5 px-2",
+										children: processedChildren
+									})
+								})
+							})
+						})]
+					})
+				]
+			})
+		})
+	] });
+});
+
+//#endregion
+export { SidebarTooltip };

package/dist/react-ui/blocks/Sidebar/animations/tooltip.css

@@ -0,0 +1,330 @@
+/**
+ * Tooltip Transition Keyframes
+ *
+ * Sistema de animaciones CSS para transiciones de tooltip con:
+ * - Items staggered enter/exit
+ * - Grid-based height transitions
+ * - 3D title rotations
+ *
+ * Performance: GPU-accelerated (transform + opacity only)
+ */
+
+/* ============================================================================
+   ITEMS ANIMATIONS - Staggered Enter/Exit
+   ============================================================================ */
+
+@keyframes tooltip-item-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-item-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+}
+
+/**
+ * Item States con CSS Custom Properties
+ *
+ * Uso: <div style="--animation-order: 0" data-state="entering">
+ */
+.sidebar-sublink[data-state="entering"] {
+  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
+  animation-fill-mode: both;
+}
+
+.sidebar-sublink[data-state="leaving"] {
+  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
+  animation-delay: calc(var(--animation-order, 0) * 20ms);
+  animation-fill-mode: both;
+}
+
+/* ============================================================================
+   TITLE 3D ROTATIONS
+   ============================================================================ */
+
+/**
+ * Title Rotate Up (direction-aware)
+ * Usado cuando navegamos hacia arriba en el sidebar
+ */
+@keyframes tooltip-title-rotate-up {
+  from {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-title-enter-from-below {
+  from {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/**
+ * Title Rotate Down (direction-aware)
+ * Usado cuando navegamos hacia abajo en el sidebar
+ */
+@keyframes tooltip-title-rotate-down {
+  from {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-title-enter-from-above {
+  from {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/**
+ * Title States
+ */
+.tooltip-title[data-direction="up"][data-state="leaving"] {
+  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="up"][data-state="entering"] {
+  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="down"][data-state="leaving"] {
+  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="down"][data-state="entering"] {
+  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* ============================================================================
+   3D CUBE FACES (Enfoque A: Multi-cara)
+   ============================================================================ */
+
+/**
+ * Cubo 3D con 6 caras para títulos
+ *
+ * Estructura:
+ * .title-scene (perspective)
+ *   └─ .title-cube (preserve-3d)
+ *       ├─ .title-face--front
+ *       ├─ .title-face--back
+ *       ├─ .title-face--top
+ *       ├─ .title-face--bottom
+ *       ├─ .title-face--left
+ *       └─ .title-face--right
+ */
+
+.title-scene {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+}
+
+.title-cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* Empujar hacia atrás para evitar blur en texto */
+  transform: translateZ(-1rem);
+}
+
+.title-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 1rem;
+  font-weight: 500;
+}
+
+/* Posicionamiento de caras - Vertical rotation (rotateX) */
+.title-face--front {
+  transform: rotateX(0deg) translateZ(1rem);
+}
+
+.title-face--top {
+  transform: rotateX(90deg) translateZ(1rem);
+}
+
+.title-face--bottom {
+  transform: rotateX(-90deg) translateZ(1rem);
+}
+
+.title-face--back {
+  transform: rotateX(180deg) translateZ(1rem);
+}
+
+/* Estados del cubo - Direction-aware */
+.title-cube[data-face="front"] {
+  transform: translateZ(-1rem) rotateX(0deg);
+}
+
+.title-cube[data-face="top"] {
+  transform: translateZ(-1rem) rotateX(-90deg);
+}
+
+.title-cube[data-face="bottom"] {
+  transform: translateZ(-1rem) rotateX(90deg);
+}
+
+.title-cube[data-face="back"] {
+  transform: translateZ(-1rem) rotateX(180deg);
+}
+
+/* ============================================================================
+   GRID HEIGHT TRANSITION (Grid Trick)
+   ============================================================================ */
+
+/**
+ * Grid trick para height: auto transitions
+ *
+ * Técnica: grid-template-rows: 0fr → 1fr
+ * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
+ */
+
+.tooltip-content-grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 50ms; /* Empieza después del fade-out de items */
+}
+
+.tooltip-content-grid[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.tooltip-content-inner {
+  overflow: hidden;
+  min-height: 0; /* Crítico para que grid trick funcione */
+}
+
+/* ============================================================================
+   UTILITY CLASSES
+   ============================================================================ */
+
+/**
+ * Contenedor con perspective para títulos crossfade
+ */
+.tooltip-title-perspective {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+  overflow: hidden;
+}
+
+/**
+ * Disable animations durante hover rápido (opcional)
+ * Usar con cuidado: puede causar flickering
+ */
+.tooltip-no-animations * {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ============================================================================
+   DEBUG HELPERS
+   ============================================================================ */
+
+/**
+ * Visualización de estados en debug mode
+ */
+[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
+  content: attr(data-state);
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 8px;
+  background: rgba(255, 0, 0, 0.8);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
+  content: "dir:" attr(data-direction);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 8px;
+  background: rgba(0, 0, 255, 0.8);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* ============================================================================
+   PERFORMANCE OPTIMIZATIONS
+   ============================================================================ */
+
+/**
+ * GPU acceleration hints
+ */
+.sidebar-sublink[data-state],
+.tooltip-title[data-state],
+.title-cube {
+  will-change: transform, opacity;
+}
+
+/**
+ * Contain layout/paint/style para mejor performance
+ */
+.tooltip-content-grid {
+  contain: layout style paint;
+}
+
+/**
+ * Reduce motion para accesibilidad
+ */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-sublink[data-state],
+  .tooltip-title[data-state],
+  .title-cube,
+  .tooltip-content-grid {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+

package/dist/react-ui/blocks/Sidebar/components/FluidHoverIndicator.d.ts

@@ -0,0 +1,28 @@
+import type { RefObject } from 'react';
+/**
+ * FluidHoverIndicator Props
+ */
+export interface FluidHoverIndicatorProps {
+    /** Target element to track */
+    targetElement: HTMLElement | null;
+    /** Whether the indicator should be visible */
+    isVisible: boolean;
+    /** Optional className for customization */
+    className?: string;
+    /** Container ref for relative positioning (default: targetElement.parentElement) */
+    containerRef?: RefObject<HTMLElement>;
+}
+/**
+ * Fluid Hover Indicator Component
+ *
+ * A liquid drop-like hover indicator that uses spring physics
+ * and morphing to create organic, fluid motion between sidebar items.
+ *
+ * Features:
+ * - Spring physics with anticipation, stretch, overshoot, and settle
+ * - Morphing (scale, skew) based on movement direction
+ * - Pure CSS + Web Animations API (no Framer Motion)
+ * - GPU-accelerated with will-change and transform
+ */
+export declare function FluidHoverIndicator({ targetElement, isVisible, className, containerRef, }: FluidHoverIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FluidHoverIndicator.d.ts.map

package/dist/react-ui/blocks/Sidebar/components/FluidHoverIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluidHoverIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Sidebar/components/FluidHoverIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,8BAA8B;IAC9B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,8CAA8C;IAC9C,SAAS,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;CACtC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,SAAS,EACT,SAAc,EACd,YAAY,GACb,EAAE,wBAAwB,2CAsF1B"}