@keboola/design 11.6.1 → 11.9.0

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

@@ -1,17 +1,19 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-DnkrFYqY.js";
+import { Tooltip, TooltipProvider } from "./utils-BW4AE8VP.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
 import { ChevronDown, Search } from "./icons-Cek151jC.js";
-import { DropdownMenu } from "./DropdownMenu-CASr-jgl.js";
+import { DropdownMenu } from "./DropdownMenu-CgVwhDvl.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
 import { Separator } from "./internal/components/Separator.js";
+import { Sheet } from "./Sheet-OparjIi-.js";
 import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
 import { Collapsible } from "./Collapsible-BQXWEOBC.js";
+import { useThemeScopeContainer } from "./ThemeProvider-DAmNn9Sd.js";
 import { BrandLogo } from "./BrandLogo-CoKBk4MI.js";
-import { useElement } from "./useElement-DkF6esWL.js";
+import { useElement } from "./useElement-BK3AAiIf.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
@@ -140,14 +169,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 +195,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 +252,31 @@ 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 }) => {
+/**
+* What `setMode` becomes for a rail that is currently a sheet.
+*
+* - The collapse axis has nothing to act on there, and the call site's own `mode` prop is a
+*   stored desktop preference — `Sidebar.SearchInput` expands the rail on focus, which would
+*   otherwise overwrite a stored `collapsed` the first time someone searches on a phone.
+*/
+const ignoreModeChange = () => {};
+/** The width a side watches: its own when it named one, the default when it just opted in. */
+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 +287,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 +298,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 +315,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 +328,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 +345,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 +357,13 @@ const SidebarProvider = ({ children, defaultLeftMode = DEFAULT_SIDEBAR_MODE, lef
 			setIsDragging: setIsRightDragging
 		}
 	}), [
+		isLeftMobile,
+		isRightMobile,
+		openMobileSide,
+		toggleLeftMobile,
+		setLeftMobileOpen,
+		toggleRightMobile,
+		setRightMobileOpen,
 		leftState,
 		filledSide,
 		toggleLeftFill,
@@ -407,12 +486,39 @@ const SidebarMenuIcon = ({ ref, className, children, ...rest }) => /* @__PURE__
 	children
 });
 //#endregion
+//#region src/components/Sidebar/SidebarMenu/useDestinationDismiss.ts
+/**
+* The click handler a sidebar menu item runs: the caller's own, then the sheet's dismissal.
+*
+* - On a phone the rail is a sheet over the page, so a chosen destination has to dismiss it —
+*   otherwise the page it navigated to sits behind the overlay.
+* - Two kinds of click are not a destination:
+*   - Opening a popup. `DropdownMenu.Trigger` and `Sidebar.SubMenu` both hand their child an
+*     `aria-haspopup` / `aria-expanded`, and closing the sheet under their popup would take
+*     the popup with it.
+*   - Acting on the rail itself. `Sidebar.Trigger` marks its child `data-sidebar-trigger`; its
+*     own `toggle` runs after this handler, so dismissing here would hand `toggle` a closed
+*     sheet and it would open it straight back up.
+* - Above the breakpoint the caller's `onClick` is all that runs.
+*/
+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 +711,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 +725,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 +833,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 +868,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 +897,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 +987,4 @@ Sidebar.SubItem = SidebarMenuSubItem;
 //#endregion
 export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };
 
-//# sourceMappingURL=Sidebar-CTWsHZhF.js.map
+//# sourceMappingURL=Sidebar-CLEbBtNY.js.map