@keboola/design 11.6.1 → 12.0.0

package/dist/{Sidebar-CTWsHZhF.js → Sidebar-Ds0E6PbR.js}

@@ -1,17 +1,19 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-DnkrFYqY.js";
+import { Tooltip, TooltipProvider } from "./utils-Bd28bWgm.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
-import { ChevronDown, Search } from "./icons-Cek151jC.js";
-import { DropdownMenu } from "./DropdownMenu-CASr-jgl.js";
+import { ChevronDown, Search } from "./icons-wcA70iQx.js";
+import { DropdownMenu } from "./DropdownMenu-gRM-A8qU.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
 import { Separator } from "./internal/components/Separator.js";
-import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
+import { Sheet } from "./Sheet-C-yXk5Da.js";
+import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
+import { useElement } from "./useElement-D-RjrGa4.js";
 import { Collapsible } from "./Collapsible-BQXWEOBC.js";
-import { BrandLogo } from "./BrandLogo-CoKBk4MI.js";
-import { useElement } from "./useElement-DkF6esWL.js";
+import { useThemeScopeContainer } from "./ThemeProvider-DXsxFg1U.js";
+import { BrandLogo } from "./BrandLogo-CKpVSZb6.js";
 import { useScrollbarPosition } from "./internal/hooks/useScrollbarPosition.js";
 import { Root, Slot, Slottable } from "@radix-ui/react-slot";
-import { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sidebar/SidebarProvider/useTransitionPresence.ts
 const FALLBACK_TIMEOUT_MS = 500;
@@ -79,20 +81,47 @@ const SidebarContent = ({ ref, className, children, contentRef }) => {
 	});
 };
 //#endregion
+//#region src/hooks/useMediaQuery.ts
+/**
+* Whether a CSS media query currently matches, re-rendering when it flips.
+*
+* - `false` wherever `matchMedia` is absent (SSR, a stubbed test environment), so the
+*   caller renders its desktop branch rather than crashing.
+* - The subscription is the query's own `change` event — no resize listener, no polling.
+*/
+const useMediaQuery = (query) => {
+	const subscribe = useCallback((onStoreChange) => {
+		const list = globalThis.matchMedia?.(query);
+		list?.addEventListener?.("change", onStoreChange);
+		return () => list?.removeEventListener?.("change", onStoreChange);
+	}, [query]);
+	const getSnapshot = useCallback(() => globalThis.matchMedia?.(query).matches ?? false, [query]);
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
+};
+//#endregion
 //#region src/components/Sidebar/utils.ts
 const SidebarWidthInPx = {
 	MIN_DEFAULT: 256,
 	COLLAPSED_ICON: 52,
 	FLOATING_VARIANT_PADDING: 8
 };
+/**
+* The query a rail watches to know whether it is a sheet.
+*
+* - `max-width`, so it is exclusive of the breakpoint itself — the width passed in is the
+*   first one at which the rail is a column again.
+* - Per side, because the width at which a rail stops fitting is the rail's own: a 320px
+*   panel beside a capped reading column runs out of room long before a navigation rail does.
+*/
+const sidebarMobileMediaQuery = (breakpointPx) => `(max-width: ${breakpointPx - .02}px)`;
 const floatingSideCount = {
 	"sided-floating": 1,
 	floating: 2,
 	inset: 0,
 	none: 0
 };
-const calcEffectiveWidths = ({ variant, width: customWidth, collapsible, state, mode }) => {
-	if (variant === "none") return {
+const calcEffectiveWidths = ({ variant, width: customWidth, collapsible, state, mode, isMobile = false }) => {
+	if (variant === "none" || isMobile) return {
 		sidebar: 0,
 		gap: 0,
 		fill: 0
@@ -125,11 +154,7 @@ const calcEffectiveWidths = ({ variant, width: customWidth, collapsible, state,
 //#endregion
 //#region src/components/Sidebar/SidebarProvider/context.ts
 const SidebarContext = createContext(null);
-/**
-* The sidebar if there is one, `null` otherwise — for code that ENHANCES a page when the app shell is
-* around it (borrowing width, collapsing a panel) and must still render without one, in a test, a
-* story, or an embedded surface. Anything that genuinely requires a sidebar keeps `useSidebar`.
-*/
+/** `useSidebar` that returns `null` outside a `SidebarProvider` instead of throwing. */
 const useOptionalSidebar = (side = "left") => use(SidebarContext)?.[side] ?? null;
 const useSidebar = (side = "left") => {
 	const context = use(SidebarContext);
@@ -140,14 +165,16 @@ const useSidebar = (side = "left") => {
 //#region src/components/Sidebar/SidebarProvider/useHoverTracking.ts
 const PORTAL_OPEN_SELECTORS_STRING = ["[aria-haspopup=\"menu\"][aria-expanded=true]", "[aria-haspopup=\"dialog\"][aria-expanded=true]"].join(",");
 const useHoverTracking = (sidebarElement) => {
-	const [isHovered, setIsHovered] = useState(false);
+	const [hoveredElement, setHoveredElement] = useState(null);
 	const isLockedRef = useRef(false);
+	if (hoveredElement !== null && hoveredElement !== sidebarElement) setHoveredElement(null);
+	const isHovered = hoveredElement !== null;
 	useEffect(() => {
 		if (!sidebarElement) return;
-		const handleMouseEnter = () => setIsHovered(true);
+		const handleMouseEnter = () => setHoveredElement(sidebarElement);
 		const handleMouseLeave = () => {
 			if (isLockedRef.current) return;
-			setIsHovered(false);
+			setHoveredElement(null);
 		};
 		sidebarElement.addEventListener("mouseenter", handleMouseEnter);
 		sidebarElement.addEventListener("mouseleave", handleMouseLeave);
@@ -164,7 +191,7 @@ const useHoverTracking = (sidebarElement) => {
 			isLockedRef.current = hasOpenPortal;
 			if (hasOpenPortal) return;
 			animationFrameId = requestAnimationFrame(() => {
-				setIsHovered(sidebarElement.matches(":hover"));
+				setHoveredElement(sidebarElement.matches(":hover") ? sidebarElement : null);
 			});
 		});
 		isLockedRef.current = sidebarElement.querySelector(PORTAL_OPEN_SELECTORS_STRING) !== null;
@@ -221,14 +248,25 @@ const useSidebarState = ({ defaultMode, mode: modeProp, onModeChange }) => {
 const DEFAULT_SIDEBAR_VARIANT = "none";
 const DEFAULT_SIDEBAR_MODE = "expanded";
 const DEFAULT_SIDEBAR_COLLAPSIBLE = "off-canvas";
-const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, leftMode, onLeftModeChange, defaultRightMode = DEFAULT_SIDEBAR_MODE, rightMode, onRightModeChange, leftCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE, leftVariant = DEFAULT_SIDEBAR_VARIANT, leftWidth, rightCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE, rightVariant = DEFAULT_SIDEBAR_VARIANT, rightWidth, onLeftWidthChange, onRightWidthChange, defaultFilledSide = null }) => {
+/** A sheet's `setMode`: no-op, so `Sidebar.SearchInput` focus keeps a desktop `collapsed`. */
+const ignoreModeChange = () => {};
+/** The side's own breakpoint, or the default for `true`. */
+const mobileBreakpointOf = (mobileSheet) => typeof mobileSheet === "number" ? mobileSheet : 768;
+const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, leftMode, onLeftModeChange, defaultRightMode = DEFAULT_SIDEBAR_MODE, rightMode, onRightModeChange, leftMobileSheet = false, rightMobileSheet = false, leftCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE, leftVariant = DEFAULT_SIDEBAR_VARIANT, leftWidth, rightCollapsible = DEFAULT_SIDEBAR_COLLAPSIBLE, rightVariant = DEFAULT_SIDEBAR_VARIANT, rightWidth, onLeftWidthChange, onRightWidthChange, defaultFilledSide = null }) => {
+	const isLeftNarrow = useMediaQuery(sidebarMobileMediaQuery(mobileBreakpointOf(leftMobileSheet)));
+	const isRightNarrow = useMediaQuery(sidebarMobileMediaQuery(mobileBreakpointOf(rightMobileSheet)));
+	const isLeftMobile = isLeftNarrow && leftMobileSheet !== false && leftVariant !== "none";
+	const isRightMobile = isRightNarrow && rightMobileSheet !== false && rightVariant !== "none";
 	const [filledSide, setFilledSide] = useState(defaultFilledSide);
+	const [openMobileSide, setOpenMobileSide] = useState(null);
 	const [isLeftDragging, setIsLeftDragging] = useState(false);
 	const [isRightDragging, setIsRightDragging] = useState(false);
 	const [leftDragWidth, setLeftDragWidth] = useState(null);
 	const [rightDragWidth, setRightDragWidth] = useState(null);
 	if (leftDragWidth !== null && leftWidth === leftDragWidth) setLeftDragWidth(null);
 	if (rightDragWidth !== null && rightWidth === rightDragWidth) setRightDragWidth(null);
+	if (openMobileSide === "left" && !isLeftMobile) setOpenMobileSide(null);
+	if (openMobileSide === "right" && !isRightMobile) setOpenMobileSide(null);
 	const leftState = useSidebarState({
 		defaultMode: defaultLeftMode,
 		mode: leftMode,
@@ -239,6 +277,10 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 		mode: rightMode,
 		onModeChange: onRightModeChange
 	});
+	const toggleLeftMobile = useCallback(() => setOpenMobileSide((prev) => prev === "left" ? null : "left"), []);
+	const toggleRightMobile = useCallback(() => setOpenMobileSide((prev) => prev === "right" ? null : "right"), []);
+	const setLeftMobileOpen = useCallback((open) => setOpenMobileSide((prev) => open ? "left" : prev === "left" ? null : prev), []);
+	const setRightMobileOpen = useCallback((open) => setOpenMobileSide((prev) => open ? "right" : prev === "right" ? null : prev), []);
 	const toggleLeftFill = useCallback(() => setFilledSide((prev) => prev === "left" ? null : "left"), []);
 	const toggleRightFill = useCallback(() => setFilledSide((prev) => prev === "right" ? null : "right"), []);
 	const setLeftFill = useCallback((fill) => setFilledSide((prev) => fill ? "left" : prev === "left" ? null : prev), []);
@@ -246,6 +288,15 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 	const value = useMemo(() => ({
 		left: {
 			...leftState,
+			...isLeftMobile ? {
+				mode: "expanded",
+				state: "expanded",
+				toggle: toggleLeftMobile,
+				setMode: ignoreModeChange
+			} : null,
+			isMobile: isLeftMobile,
+			isMobileOpen: openMobileSide === "left",
+			setMobileOpen: setLeftMobileOpen,
 			isFill: filledSide === "left",
 			toggleFill: toggleLeftFill,
 			setFill: setLeftFill,
@@ -254,7 +305,8 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 				width: leftDragWidth ?? leftWidth,
 				collapsible: leftCollapsible,
 				state: leftState.state,
-				mode: leftState.mode
+				mode: leftState.mode,
+				isMobile: isLeftMobile
 			}),
 			collapsible: leftCollapsible,
 			variant: leftVariant,
@@ -266,6 +318,15 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 		},
 		right: {
 			...rightState,
+			...isRightMobile ? {
+				mode: "expanded",
+				state: "expanded",
+				toggle: toggleRightMobile,
+				setMode: ignoreModeChange
+			} : null,
+			isMobile: isRightMobile,
+			isMobileOpen: openMobileSide === "right",
+			setMobileOpen: setRightMobileOpen,
 			isFill: filledSide === "right",
 			toggleFill: toggleRightFill,
 			setFill: setRightFill,
@@ -274,7 +335,8 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 				width: rightDragWidth ?? rightWidth,
 				collapsible: rightCollapsible,
 				state: rightState.state,
-				mode: rightState.mode
+				mode: rightState.mode,
+				isMobile: isRightMobile
 			}),
 			collapsible: rightCollapsible,
 			variant: rightVariant,
@@ -285,6 +347,13 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 			setIsDragging: setIsRightDragging
 		}
 	}), [
+		isLeftMobile,
+		isRightMobile,
+		openMobileSide,
+		toggleLeftMobile,
+		setLeftMobileOpen,
+		toggleRightMobile,
+		setRightMobileOpen,
 		leftState,
 		filledSide,
 		toggleLeftFill,
@@ -407,12 +476,32 @@ const SidebarMenuIcon = ({ ref, className, children, ...rest }) => /* @__PURE__
 	children
 });
 //#endregion
+//#region src/components/Sidebar/SidebarMenu/useDestinationDismiss.ts
+/**
+* A menu item's click handler: the caller's own, then (on a phone) dismissing the sheet.
+*
+* - Not a destination, so no dismissal:
+*   - A popup opener (`aria-haspopup` / `aria-expanded`) — closing would take the popup too.
+*   - `data-sidebar-trigger` — its `toggle` runs after this and would reopen the sheet.
+*/
+const useDestinationDismiss = (props, onClick) => {
+	const { side } = useSidebarInstance();
+	const { isMobile, setMobileOpen } = useSidebar(side);
+	const isDestination = props["aria-haspopup"] === void 0 && props["aria-expanded"] === void 0 && props["data-sidebar-trigger"] === void 0;
+	return (event) => {
+		onClick?.(event);
+		if (isMobile && isDestination) setMobileOpen(false);
+	};
+};
+//#endregion
 //#region src/components/Sidebar/SidebarMenu/SidebarMenuButton.tsx
-const SidebarMenuButton = ({ ref, "aria-selected": selected, className, children, asChild = false, icon, tooltip, ...props }) => {
+const SidebarMenuButton = ({ ref, "aria-selected": selected, className, children, asChild = false, icon, tooltip, onClick, ...props }) => {
 	const Component = asChild ? Root : "button";
 	const { state, mode, side } = useSidebarInstance();
+	const handleClick = useDestinationDismiss(props, onClick);
 	const button = /* @__PURE__ */ jsxs(Component, {
 		...props,
+		onClick: handleClick,
 		ref,
 		"data-slot": "sidebar-menu-button",
 		...asChild ? {} : { type: "button" },
@@ -605,8 +694,9 @@ const SidebarMenuSub = ({ children, icon, isActive = false, label, defaultOpen =
 };
 //#endregion
 //#region src/components/Sidebar/SidebarMenu/SidebarMenuSubItem.tsx
-const SidebarMenuSubItem = ({ ref, className, asChild = false, children, disabled, "aria-current": ariaCurrent, ...props }) => {
+const SidebarMenuSubItem = ({ ref, className, asChild = false, children, disabled, onClick, "aria-current": ariaCurrent, ...props }) => {
 	const { mode } = useSidebarInstance();
+	const handleClick = useDestinationDismiss(props, onClick);
 	if (mode === "collapsed" || mode === "expand-on-hover") return /* @__PURE__ */ jsx(DropdownMenu.Item, {
 		"aria-current": ariaCurrent,
 		asChild,
@@ -618,6 +708,7 @@ const SidebarMenuSubItem = ({ ref, className, asChild = false, children, disable
 		className: "tw:group/sidebar-menu-sub-item tw:relative",
 		children: /* @__PURE__ */ jsx(asChild ? Root : "button", {
 			...props,
+			onClick: handleClick,
 			ref,
 			"aria-current": ariaCurrent,
 			"data-slot": "sidebar-menu-sub-button",
@@ -725,22 +816,26 @@ const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separa
 //#endregion
 //#region src/components/Sidebar/SidebarTrigger.tsx
 const SidebarTrigger = ({ side = "left", onClick, hideWhenCollapsed = false, className, ...rest }) => {
-	const { toggle } = useSidebar(side);
+	const { toggle, state, isMobile, isMobileOpen } = useSidebar(side);
 	const handleOnClick = (event) => {
 		toggle();
 		onClick?.(event);
 	};
 	return /* @__PURE__ */ jsx(Slot, {
 		...rest,
+		"aria-expanded": isMobile ? isMobileOpen : state === "expanded",
+		...isMobile ? { "aria-haspopup": "dialog" } : null,
+		"data-sidebar-trigger": "",
 		onClick: handleOnClick,
 		className: cn({ "tw:group-data-[state=collapsed]/sidebar:hidden": hideWhenCollapsed }, className)
 	});
 };
 //#endregion
 //#region src/components/Sidebar/Sidebar.tsx
-const Sidebar = ({ children, className, id, side = "left", style, container = false, keepMounted, mountAfterEnter, resizable = false, ...rest }) => {
+const Sidebar = ({ children, className, id, side = "left", style, container = false, keepMounted, mountAfterEnter, resizable = false, mobileTitle, ...rest }) => {
 	const oppositeSide = side === "left" ? "right" : "left";
-	const { setSidebarElement, state, mode, isFill, widths, collapsible, variant, isDragging } = useSidebar(side);
+	const { setSidebarElement, state, mode, isFill, widths, collapsible, variant, isDragging, isMobile, isMobileOpen, setMobileOpen } = useSidebar(side);
+	const themeScopeContainer = useThemeScopeContainer();
 	const { isMounted, completeUnmount } = useTransitionPresence({
 		mounted: collapsible !== "off-canvas" || mode !== "collapsed",
 		keepMounted,
@@ -756,6 +851,23 @@ const Sidebar = ({ children, className, id, side = "left", style, container = fa
 		mode,
 		side
 	]);
+	const focusOriginRef = useRef(null);
+	useEffect(() => {
+		if (!isMobile || isMobileOpen) return;
+		const remember = (event) => {
+			if (event.target instanceof HTMLElement) focusOriginRef.current = event.target;
+		};
+		document.addEventListener("focusin", remember);
+		return () => document.removeEventListener("focusin", remember);
+	}, [isMobile, isMobileOpen]);
+	const wasSheetUpRef = useRef(false);
+	useEffect(() => {
+		const wasSheetUp = wasSheetUpRef.current;
+		wasSheetUpRef.current = isMobile && isMobileOpen;
+		if (!wasSheetUp || isMobile) return;
+		const origin = focusOriginRef.current;
+		if (origin?.isConnected) origin.focus();
+	}, [isMobile, isMobileOpen]);
 	const handleTransitionEnd = (event) => {
 		if (event.target !== event.currentTarget) return;
 		completeUnmount();
@@ -768,18 +880,54 @@ const Sidebar = ({ children, className, id, side = "left", style, container = fa
 		"--opposite-sidebar-width": `${oppositeWidths.fill}px`
 	};
 	if (variant === "none") return null;
+	const railAttributes = {
+		"data-state": state,
+		"data-side": side,
+		"data-mode": mode,
+		"data-collapsible": collapsible,
+		"data-variant": variant,
+		"data-fill": isFill
+	};
+	if (isMobile) return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SidebarInstanceContext, {
+		value: sidebarInstanceContextValue,
+		children: /* @__PURE__ */ jsx(Sheet, {
+			open: isMobileOpen,
+			onOpenChange: setMobileOpen,
+			children: /* @__PURE__ */ jsxs(Sheet.Content, {
+				side,
+				container: themeScopeContainer ?? void 0,
+				className: "tw:w-[min(20rem,85vw)] tw:bg-sidebar tw:text-sidebar-foreground tw:p-0",
+				onCloseAutoFocus: (event) => {
+					const origin = focusOriginRef.current;
+					if (!origin?.isConnected) return;
+					event.preventDefault();
+					origin.focus();
+				},
+				children: [/* @__PURE__ */ jsx(Sheet.Title, {
+					visuallyHidden: true,
+					children: mobileTitle ?? (side === "left" ? "Navigation" : "Side panel")
+				}), /* @__PURE__ */ jsx("div", {
+					...rest,
+					...railAttributes,
+					id,
+					style,
+					className: cn("tw:flex tw:min-h-0 tw:flex-1 tw:flex-col", { "tw:group/sidebar tw:peer/sidebar": !container }, className),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "sidebar",
+						className: cn("tw:bg-sidebar", "tw:relative", "tw:flex", "tw:flex-col", "tw:size-full", "tw:overflow-hidden", "tw:border-sidebar-border", "tw:group-[]/sidebar:pt-2"),
+						children
+					})
+				})]
+			})
+		})
+	}) });
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SidebarInstanceContext, {
 		value: sidebarInstanceContextValue,
 		children: /* @__PURE__ */ jsxs("div", {
 			...rest,
+			...railAttributes,
 			id,
 			ref: setSidebarElement,
-			"data-state": state,
-			"data-side": side,
-			"data-mode": mode,
-			"data-collapsible": collapsible,
-			"data-variant": variant,
-			"data-fill": isFill,
 			style: styles,
 			className: cn("tailwindcss-preflight", "tw:flex", "tw:relative", mode === "expand-on-hover" ? "tw:z-[51]" : "tw:z-50", { "tw:group/sidebar tw:peer/sidebar": !container }, "tw:[&>[data-slot=gap]]:w-(--sidebar-width-gap)", "tw:[&[data-side=right]>[data-slot=gap]]:rotate-180", "tw:[&>[data-slot=sidebar-wrapper]]:w-(--sidebar-width)", "tw:[&[data-side=left]>[data-slot=sidebar-wrapper]]:left-0", "tw:[&[data-side=right]>[data-slot=sidebar-wrapper]]:right-0", "tw:[&[data-state=collapsed][data-collapsible=off-canvas][data-side=left]>[data-slot=sidebar-wrapper]]:-translate-x-full", "tw:[&[data-state=collapsed][data-collapsible=off-canvas][data-side=right]>[data-slot=sidebar-wrapper]]:translate-x-full", "tw:[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]]:pt-(--sidebar-floating-padding)", "tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]]:pr-(--sidebar-floating-padding)", "tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]]:pl-(--sidebar-floating-padding)", "tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]]:p-(--sidebar-floating-padding)", "tw:[&[data-fill=true]>[data-slot=sidebar-wrapper]]:!w-[calc(100svw-var(--opposite-sidebar-width))]", "tw:[&[data-fill=true][data-variant=floating]>[data-slot=sidebar-wrapper]]:!p-(--sidebar-floating-padding)", "tw:[&[data-fill=true][data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!rounded-tr-xl", "tw:[&[data-fill=true][data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:!rounded-tl-xl", "tw:[&[data-variant=inset][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-r", "tw:[&[data-variant=inset][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-l", "tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:shadow", "tw:[&[data-variant=floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-xl", "tw:[&[data-variant=sided-floating]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:shadow", "tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-tr-xl", "tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:rounded-tl-xl", "tw:[&[data-variant=sided-floating][data-side=left]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-r", "tw:[&[data-variant=sided-floating][data-side=right]>[data-slot=sidebar-wrapper]>[data-slot=sidebar]]:border-l", isDragging ? "tw:transition-none" : "tw:transition-[width,translate,transform] tw:duration-(--sidebar-motion-duration) tw:ease-(--sidebar-motion-easing) tw:motion-reduce:transition-none"),
 			children: [/* @__PURE__ */ jsx("div", {
@@ -822,4 +970,4 @@ Sidebar.SubItem = SidebarMenuSubItem;
 //#endregion
 export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };
 
-//# sourceMappingURL=Sidebar-CTWsHZhF.js.map
+//# sourceMappingURL=Sidebar-Ds0E6PbR.js.map