@acronis-platform/ui-react 4.0.0 → 5.0.0

package/dist/components/ui/sidebar-secondary/sidebar-secondary.js

@@ -1,650 +1,468 @@
-import { jsxs as v, Fragment as H, jsx as e } from "react/jsx-runtime";
-import * as t from "react";
-import { mergeProps as q } from "@base-ui/react/merge-props";
-import { useRender as G } from "@base-ui/react/use-render";
-import { Collapsible as X } from "@base-ui/react/collapsible";
-import { SquareArrowUpRightIcon as ae, ChevronDownIcon as J } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as te } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as f } from "../../../lib/utils.js";
-import { useDocDir as B } from "../../../lib/use-doc-dir.js";
-import { Tooltip as I, TooltipTrigger as O, TooltipContent as A } from "../tooltip/tooltip.js";
-function F(n, { enabled: a }) {
-  const [o, d] = t.useState(!1);
-  return t.useEffect(() => {
-    const i = n.current;
-    if (!a || !i) {
-      d(!1);
-      return;
-    }
-    const r = () => d(i.scrollWidth > i.clientWidth);
-    r();
-    const s = new ResizeObserver(r);
-    return s.observe(i), () => s.disconnect();
-  }, [n, a]), o;
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { useDocDir as n } from "../../../lib/use-doc-dir.js";
+import { Tooltip as r, TooltipContent as i, TooltipTrigger as a } from "../tooltip/tooltip.js";
+import * as o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronDownIcon as u, SquareArrowUpRightIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { Collapsible as f } from "@base-ui/react/collapsible";
+import { useRender as p } from "@base-ui/react/use-render";
+import { mergeProps as m } from "@base-ui/react/merge-props";
+//#region src/components/ui/sidebar-secondary/sidebar-secondary.tsx
+function h(e, { enabled: t }) {
+	let [n, r] = o.useState(!1);
+	return o.useEffect(() => {
+		let n = e.current;
+		if (!t || !n) {
+			r(!1);
+			return;
+		}
+		let i = () => r(n.scrollWidth > n.clientWidth);
+		i();
+		let a = new ResizeObserver(i);
+		return a.observe(n), () => a.disconnect();
+	}, [e, t]), n;
 }
-const E = 256, Q = E * 2, Y = /* @__PURE__ */ v(H, { children: [
-  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
-  " Drag",
-  /* @__PURE__ */ e("br", {}),
-  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Collapse:" }),
-  " Click",
-  /* @__PURE__ */ e("br", {}),
-  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Reset size:" }),
-  " Double click"
-] }), Z = /* @__PURE__ */ v(H, { children: [
-  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Resize:" }),
-  " Drag",
-  /* @__PURE__ */ e("br", {}),
-  /* @__PURE__ */ e("span", { className: "font-semibold", children: "Expand:" }),
-  " Click"
-] }), $ = t.createContext(null);
-function P() {
-  return t.useContext($) ?? {
-    expanded: !0,
-    toggleExpanded: () => {
-    },
-    resizable: !1,
-    width: E,
-    setWidth: () => {
-    },
-    minWidth: E,
-    maxWidth: Q,
-    defaultWidth: E,
-    headerLabel: void 0,
-    setHeaderLabel: () => {
-    },
-    selectedLabel: void 0,
-    setSelectedLabel: () => {
-    },
-    resizeAriaLabel: "Resize sidebar",
-    resizeTooltipExpanded: Y,
-    resizeTooltipCollapsed: Z
-  };
+var g = 256, _ = g * 2, v = /* @__PURE__ */ l(s, { children: [
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Resize:"
+	}),
+	" Drag",
+	/* @__PURE__ */ c("br", {}),
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Collapse:"
+	}),
+	" Click",
+	/* @__PURE__ */ c("br", {}),
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Reset size:"
+	}),
+	" Double click"
+] }), y = /* @__PURE__ */ l(s, { children: [
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Resize:"
+	}),
+	" Drag",
+	/* @__PURE__ */ c("br", {}),
+	/* @__PURE__ */ c("span", {
+		className: "font-semibold",
+		children: "Expand:"
+	}),
+	" Click"
+] }), b = o.createContext(null);
+function x() {
+	return o.useContext(b) ?? {
+		expanded: !0,
+		toggleExpanded: () => {},
+		resizable: !1,
+		width: g,
+		setWidth: () => {},
+		minWidth: g,
+		maxWidth: _,
+		defaultWidth: g,
+		headerLabel: void 0,
+		setHeaderLabel: () => {},
+		selectedLabel: void 0,
+		setSelectedLabel: () => {},
+		resizeAriaLabel: "Resize sidebar",
+		resizeTooltipExpanded: v,
+		resizeTooltipCollapsed: y
+	};
 }
-function ne(n, a, o) {
-  const [d, i] = t.useState(a), r = n !== void 0, s = r ? n : d, c = t.useCallback(
-    (l) => {
-      r || i(l), o == null || o(l);
-    },
-    [r, o]
-  );
-  return [s, c];
+function S(e, t, n) {
+	let [r, i] = o.useState(t), a = e !== void 0;
+	return [a ? e : r, o.useCallback((e) => {
+		a || i(e), n?.(e);
+	}, [a, n])];
 }
-function ie() {
-  const n = P(), { expanded: a, toggleExpanded: o, resizable: d } = n, i = B(), r = t.useRef(n);
-  r.current = n;
-  const s = t.useRef(!1), [c, l] = t.useState(!1), [p, g] = t.useState(!1), u = t.useRef(
-    null
-  );
-  if (t.useEffect(() => () => {
-    u.current && clearTimeout(u.current);
-  }, []), !d) return null;
-  const x = (b) => {
-    b.preventDefault();
-    const k = b.currentTarget;
-    k.setPointerCapture(b.pointerId), s.current = !1, g(!0), l(!1);
-    const y = k.closest("[data-state]");
-    if (!y) {
-      g(!1), k.releasePointerCapture(b.pointerId);
-      return;
-    }
-    y.style.transitionProperty = "none";
-    const N = getComputedStyle(y).direction === "rtl", R = y.getBoundingClientRect(), { minWidth: S, maxWidth: C } = r.current, w = S / 2, D = (M) => {
-      s.current = !0;
-      const W = N ? R.right - M.clientX : M.clientX - R.left, { expanded: K } = r.current;
-      K ? W < w ? r.current.toggleExpanded() : r.current.setWidth(
-        Math.min(Math.max(W, S), C)
-      ) : W > w && r.current.toggleExpanded();
-    }, L = () => {
-      g(!1), y && (y.style.transitionProperty = ""), window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", L);
-    };
-    window.addEventListener("pointermove", D), window.addEventListener("pointerup", L);
-  }, h = () => {
-    s.current || (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
-      o();
-    }, 250));
-  }, T = () => {
-    u.current && (clearTimeout(u.current), u.current = null), a || o(), r.current.setWidth(r.current.defaultWidth);
-  }, m = (b) => {
-    const {
-      minWidth: k,
-      maxWidth: y,
-      defaultWidth: N,
-      width: R,
-      setWidth: S,
-      expanded: C,
-      toggleExpanded: w
-    } = r.current, D = 16, L = i === "rtl" ? "ArrowLeft" : "ArrowRight", M = i === "rtl" ? "ArrowRight" : "ArrowLeft";
-    if (b.key === L && C)
-      b.preventDefault(), S(Math.min(R + D, y));
-    else if (b.key === L && !C)
-      b.preventDefault(), w();
-    else if (b.key === M && C) {
-      b.preventDefault();
-      const W = R - D;
-      W < k ? w() : S(W);
-    } else b.key === "Enter" || b.key === " " ? (b.preventDefault(), w()) : b.key === "Home" && (b.preventDefault(), C || w(), S(N));
-  };
-  return /* @__PURE__ */ v(I, { open: c, onOpenChange: (b) => {
-    p || l(b);
-  }, trackCursorAxis: "y", children: [
-    /* @__PURE__ */ e(
-      O,
-      {
-        render: /* @__PURE__ */ e(
-          "div",
-          {
-            role: "separator",
-            "aria-orientation": "vertical",
-            "aria-label": n.resizeAriaLabel,
-            className: f(
-              // 17px hit area, absolutely positioned on inline-end edge.
-              // The sidebar's own border-e provides the visible 1px line; its color
-              // changes via :has() on hover/active/focus-visible.
-              "absolute end-0 top-0 h-full w-[17px] ltr:translate-x-1/2 rtl:-translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10",
-              // On focus: 1px active-color line (after pseudo, CSS border for pixel-snap) + 3px box-shadow ring centered on it.
-              "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none",
-              "after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent",
-              "focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]"
-            ),
-            tabIndex: 0,
-            onKeyDown: m,
-            onPointerDown: x,
-            onClick: h,
-            onDoubleClick: T
-          }
-        )
-      }
-    ),
-    (a ? n.resizeTooltipExpanded : n.resizeTooltipCollapsed) != null && /* @__PURE__ */ e(A, { side: i === "rtl" ? "left" : "right", align: "center", children: a ? n.resizeTooltipExpanded : n.resizeTooltipCollapsed })
-  ] });
+function C() {
+	let t = x(), { expanded: s, toggleExpanded: u, resizable: d } = t, f = n(), p = o.useRef(t);
+	p.current = t;
+	let m = o.useRef(!1), [h, g] = o.useState(!1), [_, v] = o.useState(!1), y = o.useRef(null);
+	return o.useEffect(() => () => {
+		y.current && clearTimeout(y.current);
+	}, []), d ? /* @__PURE__ */ l(r, {
+		open: h,
+		onOpenChange: (e) => {
+			_ || g(e);
+		},
+		trackCursorAxis: "y",
+		children: [/* @__PURE__ */ c(a, { render: /* @__PURE__ */ c("div", {
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": t.resizeAriaLabel,
+			className: e("absolute end-0 top-0 h-full w-[17px] ltr:translate-x-1/2 rtl:-translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10", "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none", "after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent", "focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]"),
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				let { minWidth: t, maxWidth: n, defaultWidth: r, width: i, setWidth: a, expanded: o, toggleExpanded: s } = p.current, c = f === "rtl" ? "ArrowLeft" : "ArrowRight", l = f === "rtl" ? "ArrowRight" : "ArrowLeft";
+				if (e.key === c && o) e.preventDefault(), a(Math.min(i + 16, n));
+				else if (e.key === c && !o) e.preventDefault(), s();
+				else if (e.key === l && o) {
+					e.preventDefault();
+					let n = i - 16;
+					n < t ? s() : a(n);
+				} else e.key === "Enter" || e.key === " " ? (e.preventDefault(), s()) : e.key === "Home" && (e.preventDefault(), o || s(), a(r));
+			},
+			onPointerDown: (e) => {
+				e.preventDefault();
+				let t = e.currentTarget;
+				t.setPointerCapture(e.pointerId), m.current = !1, v(!0), g(!1);
+				let n = t.closest("[data-state]");
+				if (!n) {
+					v(!1), t.releasePointerCapture(e.pointerId);
+					return;
+				}
+				n.style.transitionProperty = "none";
+				let r = getComputedStyle(n).direction === "rtl", i = n.getBoundingClientRect(), { minWidth: a, maxWidth: o } = p.current, s = a / 2, c = (e) => {
+					m.current = !0;
+					let t = r ? i.right - e.clientX : e.clientX - i.left, { expanded: n } = p.current;
+					n ? t < s ? p.current.toggleExpanded() : p.current.setWidth(Math.min(Math.max(t, a), o)) : t > s && p.current.toggleExpanded();
+				}, l = () => {
+					v(!1), n && (n.style.transitionProperty = ""), window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l);
+				};
+				window.addEventListener("pointermove", c), window.addEventListener("pointerup", l);
+			},
+			onClick: () => {
+				m.current || (y.current && clearTimeout(y.current), y.current = setTimeout(() => {
+					u();
+				}, 250));
+			},
+			onDoubleClick: () => {
+				y.current &&= (clearTimeout(y.current), null), s || u(), p.current.setWidth(p.current.defaultWidth);
+			}
+		}) }), (s ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed) != null && /* @__PURE__ */ c(i, {
+			side: f === "rtl" ? "left" : "right",
+			align: "center",
+			children: s ? t.resizeTooltipExpanded : t.resizeTooltipCollapsed
+		})]
+	}) : null;
 }
-const oe = t.forwardRef(
-  ({
-    className: n,
-    expanded: a,
-    defaultExpanded: o = !0,
-    onExpandedChange: d,
-    resizable: i = !0,
-    width: r,
-    onWidthChange: s,
-    resizeAriaLabel: c = "Resize sidebar",
-    resizeTooltipExpanded: l = Y,
-    resizeTooltipCollapsed: p = Z,
-    "aria-label": g = "Section navigation",
-    render: u,
-    children: x,
-    ...h
-  }, T) => {
-    const [m, z] = ne(
-      a,
-      o,
-      d
-    ), [b, k] = t.useState(E), y = r !== void 0, N = y ? r : b, R = t.useCallback(
-      (U) => {
-        y || k(U), s == null || s(U);
-      },
-      [y, s]
-    ), [S, C] = t.useState(void 0), [w, D] = t.useState(void 0), L = t.useMemo(
-      () => ({
-        expanded: m,
-        toggleExpanded: () => z(!m),
-        resizable: i,
-        width: N,
-        setWidth: R,
-        minWidth: E,
-        maxWidth: Q,
-        defaultWidth: E,
-        headerLabel: S,
-        setHeaderLabel: C,
-        selectedLabel: w,
-        setSelectedLabel: D,
-        resizeAriaLabel: c,
-        resizeTooltipExpanded: l,
-        resizeTooltipCollapsed: p
-      }),
-      [
-        m,
-        z,
-        i,
-        N,
-        R,
-        S,
-        w,
-        c,
-        l,
-        p
-      ]
-    ), K = G({
-      render: u,
-      ref: T,
-      defaultTagName: "nav",
-      props: q(
-        {
-          "aria-label": g,
-          "data-state": m ? "expanded" : "collapsed",
-          style: i && m && (y || N !== E) ? { width: N } : void 0,
-          className: f(
-            "group/sidebar relative flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-e border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-inline-end-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]",
-            i && "transition-[width,border-color] has-[[role=separator]:hover]:[border-inline-end-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-end-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-end-color:var(--ui-resizable-border-color-active)]",
-            n
-          ),
-          children: /* @__PURE__ */ v(H, { children: [
-            /* @__PURE__ */ e(ee, {}),
-            x,
-            /* @__PURE__ */ e(ie, {})
-          ] })
-        },
-        h
-      )
-    });
-    return /* @__PURE__ */ e($.Provider, { value: L, children: K });
-  }
-);
-oe.displayName = "SidebarSecondary";
-const se = t.forwardRef(({ className: n, label: a, children: o, ...d }, i) => {
-  const { setHeaderLabel: r } = P(), s = a ?? o;
-  return t.useEffect(() => {
-    r(s);
-  }, [s, r]), /* @__PURE__ */ e(
-    "div",
-    {
-      ref: i,
-      className: f(
-        "hidden items-center shrink-0",
-        "group-data-[state=expanded]/sidebar:flex",
-        "px-[var(--ui-sidebar-secondary-global-container-header-padding-x)] py-[var(--ui-sidebar-secondary-global-container-header-padding-y)]",
-        n
-      ),
-      ...d,
-      children: /* @__PURE__ */ e("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: s })
-    }
-  );
+var w = o.forwardRef(({ className: t, expanded: n, defaultExpanded: r = !0, onExpandedChange: i, resizable: a = !0, width: u, onWidthChange: d, resizeAriaLabel: f = "Resize sidebar", resizeTooltipExpanded: h = v, resizeTooltipCollapsed: x = y, "aria-label": w = "Section navigation", render: T, children: E, ...O }, k) => {
+	let [A, j] = S(n, r, i), [M, N] = o.useState(g), P = u !== void 0, F = P ? u : M, I = o.useCallback((e) => {
+		P || N(e), d?.(e);
+	}, [P, d]), [L, R] = o.useState(void 0), [z, B] = o.useState(void 0), V = o.useMemo(() => ({
+		expanded: A,
+		toggleExpanded: () => j(!A),
+		resizable: a,
+		width: F,
+		setWidth: I,
+		minWidth: g,
+		maxWidth: _,
+		defaultWidth: g,
+		headerLabel: L,
+		setHeaderLabel: R,
+		selectedLabel: z,
+		setSelectedLabel: B,
+		resizeAriaLabel: f,
+		resizeTooltipExpanded: h,
+		resizeTooltipCollapsed: x
+	}), [
+		A,
+		j,
+		a,
+		F,
+		I,
+		L,
+		z,
+		f,
+		h,
+		x
+	]), H = p({
+		render: T,
+		ref: k,
+		defaultTagName: "nav",
+		props: m({
+			"aria-label": w,
+			"data-state": A ? "expanded" : "collapsed",
+			style: a && A && (P || F !== g) ? { width: F } : void 0,
+			className: e("group/sidebar relative flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-e border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-inline-end-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]", a && "transition-[width,border-color] has-[[role=separator]:hover]:[border-inline-end-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-end-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-end-color:var(--ui-resizable-border-color-active)]", t),
+			children: /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c(D, {}),
+				E,
+				/* @__PURE__ */ c(C, {})
+			] })
+		}, O)
+	});
+	return /* @__PURE__ */ c(b.Provider, {
+		value: V,
+		children: H
+	});
 });
-se.displayName = "SidebarSecondaryHeader";
-const le = t.forwardRef(({ className: n, ...a }, o) => (
-  // Expanded: the section list. Hidden in collapsed mode, where the
-  // CollapsedBreadcrumb sibling takes over.
-  /* @__PURE__ */ e(
-    "div",
-    {
-      ref: o,
-      className: f(
-        "flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
-        "hidden group-data-[state=expanded]/sidebar:flex",
-        n
-      ),
-      ...a
-    }
-  )
-));
-le.displayName = "SidebarSecondaryContent";
-const ee = t.forwardRef(({ className: n, parentLabel: a, currentLabel: o, separator: d, ...i }, r) => {
-  const { headerLabel: s, selectedLabel: c } = P(), l = a ?? s, p = o ?? c;
-  return (
-    // Shown only in collapsed mode — toggled by the same data-[state] selector so
-    // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:
-    // parent → separator → current page.
-    /* @__PURE__ */ v(
-      "div",
-      {
-        ref: r,
-        className: f(
-          "flex flex-1 flex-col items-center min-h-0",
-          "gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]",
-          "flex group-data-[state=expanded]/sidebar:hidden",
-          n
-        ),
-        ...i,
-        children: [
-          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] shrink-0 ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: l }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
-              children: d ?? /* @__PURE__ */ e(J, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ e("span", { className: "[writing-mode:vertical-rl] [direction:ltr] flex-1 min-h-0 overflow-hidden ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: p })
-        ]
-      }
-    )
-  );
+w.displayName = "SidebarSecondary";
+var T = o.forwardRef(({ className: t, label: n, children: r, ...i }, a) => {
+	let { setHeaderLabel: s } = x(), l = n ?? r;
+	return o.useEffect(() => {
+		s(l);
+	}, [l, s]), /* @__PURE__ */ c("div", {
+		ref: a,
+		className: e("hidden items-center shrink-0", "group-data-[state=expanded]/sidebar:flex", "px-[var(--ui-sidebar-secondary-global-container-header-padding-x)] py-[var(--ui-sidebar-secondary-global-container-header-padding-y)]", t),
+		...i,
+		children: /* @__PURE__ */ c("h2", {
+			className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]",
+			children: l
+		})
+	});
 });
-ee.displayName = "SidebarSecondaryCollapsedBreadcrumb";
-const de = t.forwardRef(({ className: n, ...a }, o) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: o,
-    className: f(
-      "flex flex-col shrink-0",
-      "border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]",
-      "py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
-      n
-    ),
-    ...a
-  }
-));
-de.displayName = "SidebarSecondaryFooter";
-const _ = t.createContext({
-  expandable: !1
-}), ce = {
-  expandable: !1
-}, ue = {
-  expandable: !0
-}, be = t.forwardRef(
-  ({
-    className: n,
-    expandable: a = !1,
-    open: o,
-    defaultOpen: d = !0,
-    onOpenChange: i,
-    children: r,
-    ...s
-  }, c) => {
-    const l = f(
-      "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
-      n
-    );
-    return a ? /* @__PURE__ */ e(_.Provider, { value: ue, children: /* @__PURE__ */ e(
-      X.Root,
-      {
-        ref: c,
-        open: o,
-        defaultOpen: d,
-        onOpenChange: i,
-        render: /* @__PURE__ */ e("div", { className: l }),
-        ...s,
-        children: r
-      }
-    ) }) : /* @__PURE__ */ e(_.Provider, { value: ce, children: /* @__PURE__ */ e("div", { ref: c, className: l, ...s, children: r }) });
-  }
-);
-be.displayName = "SidebarSecondarySection";
-const V = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", j = "min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] py-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", fe = t.forwardRef(({ className: n, actions: a, unreadRollup: o, children: d, ...i }, r) => {
-  const { expandable: s } = t.useContext(_), c = B(), l = t.useRef(null), p = t.useRef(null), g = F(p, { enabled: !0 }), u = (h) => {
-    l.current = h, typeof r == "function" ? r(h) : r && (r.current = h);
-  }, x = /* @__PURE__ */ v(I, { disabled: !g, children: [
-    /* @__PURE__ */ e(
-      O,
-      {
-        render: /* @__PURE__ */ e(
-          "span",
-          {
-            ref: p,
-            className: "min-w-0 flex-1 truncate"
-          }
-        ),
-        children: d
-      }
-    ),
-    /* @__PURE__ */ e(A, { anchor: l, side: c === "rtl" ? "left" : "right", children: d })
-  ] });
-  if (!s) {
-    const h = f(V, j, n);
-    return a == null ? /* @__PURE__ */ e(
-      "div",
-      {
-        ref: u,
-        className: f(
-          h,
-          "flex items-center"
-        ),
-        ...i,
-        children: x
-      }
-    ) : /* @__PURE__ */ v(
-      "div",
-      {
-        ref: u,
-        className: f(
-          h,
-          "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"
-        ),
-        ...i,
-        children: [
-          x,
-          /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ v(
-    "div",
-    {
-      ref: u,
-      className: f(
-        "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]",
-        j,
-        n
-      ),
-      ...i,
-      children: [
-        /* @__PURE__ */ v(
-          X.Trigger,
-          {
-            className: f(
-              "group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start cursor-pointer",
-              V,
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"
-            ),
-            children: [
-              /* @__PURE__ */ e(
-                J,
-                {
-                  size: 16,
-                  "aria-hidden": "true",
-                  className: "shrink-0 ltr:-rotate-90 rtl:rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]"
-                }
-              ),
-              x,
-              o != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden", children: o })
-            ]
-          }
-        ),
-        a != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: a })
-      ]
-    }
-  );
+T.displayName = "SidebarSecondaryHeader";
+var E = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
+	ref: r,
+	className: e("flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]", "hidden group-data-[state=expanded]/sidebar:flex", t),
+	...n
+}));
+E.displayName = "SidebarSecondaryContent";
+var D = o.forwardRef(({ className: t, parentLabel: n, currentLabel: r, separator: i, ...a }, o) => {
+	let { headerLabel: s, selectedLabel: d } = x(), f = n ?? s, p = r ?? d;
+	return /* @__PURE__ */ l("div", {
+		ref: o,
+		className: e("flex flex-1 flex-col items-center min-h-0", "gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]", "flex group-data-[state=expanded]/sidebar:hidden", t),
+		...a,
+		children: [
+			/* @__PURE__ */ c("span", {
+				className: "[writing-mode:vertical-rl] [direction:ltr] shrink-0 ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]",
+				children: f
+			}),
+			/* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
+				children: i ?? /* @__PURE__ */ c(u, { size: 16 })
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "[writing-mode:vertical-rl] [direction:ltr] flex-1 min-h-0 overflow-hidden ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]",
+				children: p
+			})
+		]
+	});
 });
-fe.displayName = "SidebarSecondarySectionLabel";
-const pe = t.forwardRef(({ className: n, ...a }, o) => {
-  const { expandable: d } = t.useContext(_), i = /* @__PURE__ */ e(
-    "ul",
-    {
-      ref: o,
-      className: f(
-        "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
-        n
-      ),
-      ...a
-    }
-  );
-  return d ? /* @__PURE__ */ e(X.Panel, { children: i }) : i;
+D.displayName = "SidebarSecondaryCollapsedBreadcrumb";
+var O = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
+	ref: r,
+	className: e("flex flex-col shrink-0", "border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]", "py-[var(--ui-sidebar-secondary-section-container-padding-y)]", t),
+	...n
+}));
+O.displayName = "SidebarSecondaryFooter";
+var k = o.createContext({ expandable: !1 }), A = { expandable: !1 }, j = { expandable: !0 }, M = o.forwardRef(({ className: t, expandable: n = !1, open: r, defaultOpen: i = !0, onOpenChange: a, children: o, ...s }, l) => {
+	let u = e("flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]", t);
+	return n ? /* @__PURE__ */ c(k.Provider, {
+		value: j,
+		children: /* @__PURE__ */ c(f.Root, {
+			ref: l,
+			open: r,
+			defaultOpen: i,
+			onOpenChange: a,
+			render: /* @__PURE__ */ c("div", { className: u }),
+			...s,
+			children: o
+		})
+	}) : /* @__PURE__ */ c(k.Provider, {
+		value: A,
+		children: /* @__PURE__ */ c("div", {
+			ref: l,
+			className: u,
+			...s,
+			children: o
+		})
+	});
 });
-pe.displayName = "SidebarSecondaryMenu";
-const me = "group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]", re = te(me, {
-  variants: {
-    variant: {
-      unselected: "bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]",
-      selected: "bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]"
-    }
-  },
-  defaultVariants: {
-    variant: "unselected"
-  }
-}), ve = t.forwardRef(
-  ({ className: n, selected: a = !1, icon: o, extras: d, render: i, children: r, ...s }, c) => {
-    const { expanded: l, setSelectedLabel: p } = P(), { expandable: g } = t.useContext(_), u = B(), x = t.useRef(null), h = t.useRef(null), T = F(h, { enabled: l });
-    t.useEffect(() => {
-      a && p(r);
-    }, [a, r, p]);
-    const m = G({
-      render: i,
-      ref: [c, x],
-      defaultTagName: "a",
-      props: q(
-        {
-          className: f(
-            re({
-              variant: a ? "selected" : "unselected"
-            }),
-            // Inside an expandable section, increase start padding so the
-            // label aligns with the section header text (after chevron + gap)
-            // while keeping the container full-width for hover/active fills.
-            g && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]",
-            n
-          ),
-          "aria-current": a ? "page" : void 0,
-          onKeyDown: (z) => {
-            z.key === " " && (z.preventDefault(), z.currentTarget.click());
-          },
-          children: /* @__PURE__ */ v(H, { children: [
-            o != null && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: o }),
-            /* @__PURE__ */ v(I, { disabled: !T, children: [
-              /* @__PURE__ */ e(
-                O,
-                {
-                  render: /* @__PURE__ */ e(
-                    "span",
-                    {
-                      ref: h,
-                      className: f(
-                        "flex-1 min-w-[60px] truncate text-start",
-                        !l && "sr-only"
-                      )
-                    }
-                  ),
-                  children: r
-                }
-              ),
-              /* @__PURE__ */ e(
-                A,
-                {
-                  anchor: x,
-                  side: u === "rtl" ? "left" : "right",
-                  children: r
-                }
-              )
-            ] }),
-            d
-          ] })
-        },
-        s
-      )
-    });
-    return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ v(I, { disabled: l, children: [
-      /* @__PURE__ */ e(O, { render: m }),
-      /* @__PURE__ */ e(A, { side: u === "rtl" ? "left" : "right", children: r })
-    ] }) });
-  }
-);
-ve.displayName = "SidebarSecondaryMenuItem";
-const he = t.forwardRef(({ className: n, variant: a, shortcut: o, tag: d, children: i, ...r }, s) => {
-  const { expanded: c } = P(), l = a === "tag" || a === "tag-externalLink", p = a === "externalLink" || a === "tag-externalLink", g = a === "shortcut";
-  return /* @__PURE__ */ v(
-    "span",
-    {
-      ref: s,
-      className: f(
-        "inline-flex items-center shrink-0 min-h-6 overflow-clip gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
-        !c && "hidden",
-        n
-      ),
-      ...r,
-      children: [
-        l && (d ?? i),
-        g && /* @__PURE__ */ e("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: o ?? i }),
-        p && /* @__PURE__ */ e(
-          ae,
-          {
-            size: 16,
-            className: "text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]"
-          }
-        )
-      ]
-    }
-  );
+M.displayName = "SidebarSecondarySection";
+var N = "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]", P = "min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] py-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]", F = o.forwardRef(({ className: t, actions: s, unreadRollup: d, children: p, ...m }, g) => {
+	let { expandable: _ } = o.useContext(k), v = n(), y = o.useRef(null), b = o.useRef(null), x = h(b, { enabled: !0 }), S = (e) => {
+		y.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+	}, C = /* @__PURE__ */ l(r, {
+		disabled: !x,
+		children: [/* @__PURE__ */ c(a, {
+			render: /* @__PURE__ */ c("span", {
+				ref: b,
+				className: "min-w-0 flex-1 truncate"
+			}),
+			children: p
+		}), /* @__PURE__ */ c(i, {
+			anchor: y,
+			side: v === "rtl" ? "left" : "right",
+			children: p
+		})]
+	});
+	if (!_) {
+		let n = e(N, P, t);
+		return s == null ? /* @__PURE__ */ c("div", {
+			ref: S,
+			className: e(n, "flex items-center"),
+			...m,
+			children: C
+		}) : /* @__PURE__ */ l("div", {
+			ref: S,
+			className: e(n, "flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]"),
+			...m,
+			children: [C, /* @__PURE__ */ c("span", {
+				className: "flex shrink-0 items-center",
+				children: s
+			})]
+		});
+	}
+	return /* @__PURE__ */ l("div", {
+		ref: S,
+		className: e("flex items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)]", P, t),
+		...m,
+		children: [/* @__PURE__ */ l(f.Trigger, {
+			className: e("group/section flex min-w-0 flex-1 items-center gap-[var(--ui-sidebar-secondary-section-container-header-gap)] text-start cursor-pointer", N, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset"),
+			children: [
+				/* @__PURE__ */ c(u, {
+					size: 16,
+					"aria-hidden": "true",
+					className: "shrink-0 ltr:-rotate-90 rtl:rotate-90 transition-transform group-data-[panel-open]/section:rotate-0 text-[var(--ui-sidebar-secondary-section-icon-arrow-color)]"
+				}),
+				C,
+				d != null && /* @__PURE__ */ c("span", {
+					className: "flex shrink-0 items-center group-data-[panel-open]/section:hidden",
+					children: d
+				})
+			]
+		}), s != null && /* @__PURE__ */ c("span", {
+			className: "flex shrink-0 items-center",
+			children: s
+		})]
+	});
 });
-he.displayName = "SidebarSecondaryMenuItemExtras";
-const ge = t.forwardRef(
-  ({
-    className: n,
-    icon: a,
-    expandTooltip: o = "Expand",
-    extras: d,
-    children: i,
-    onClick: r,
-    ...s
-  }, c) => {
-    const { expanded: l, toggleExpanded: p } = P(), g = B(), u = t.useRef(null), x = t.useRef(null), h = F(x, { enabled: l }), T = /* @__PURE__ */ v(
-      "button",
-      {
-        ref: (m) => {
-          u.current = m, typeof c == "function" ? c(m) : c && (c.current = m);
-        },
-        type: "button",
-        "aria-expanded": l,
-        className: f(
-          re({ variant: "unselected" }),
-          "text-start",
-          n
-        ),
-        onClick: (m) => {
-          r == null || r(m), m.defaultPrevented || p();
-        },
-        ...s,
-        children: [
-          a != null && /* @__PURE__ */ e(
-            "span",
-            {
-              className: f(
-                "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform",
-                l ? "rtl:rotate-180" : "ltr:rotate-180"
-              ),
-              children: a
-            }
-          ),
-          /* @__PURE__ */ v(I, { disabled: !h, children: [
-            /* @__PURE__ */ e(
-              O,
-              {
-                render: /* @__PURE__ */ e(
-                  "span",
-                  {
-                    ref: x,
-                    className: f("flex-1 min-w-[60px] truncate", !l && "sr-only")
-                  }
-                ),
-                children: i
-              }
-            ),
-            /* @__PURE__ */ e(A, { anchor: u, side: g === "rtl" ? "left" : "right", children: i })
-          ] }),
-          d
-        ]
-      }
-    );
-    return /* @__PURE__ */ e("li", { className: "contents", children: /* @__PURE__ */ v(I, { disabled: l, children: [
-      /* @__PURE__ */ e(O, { render: T }),
-      /* @__PURE__ */ e(A, { side: g === "rtl" ? "left" : "right", children: o })
-    ] }) });
-  }
-);
-ge.displayName = "SidebarSecondaryCollapseTrigger";
-export {
-  oe as SidebarSecondary,
-  ge as SidebarSecondaryCollapseTrigger,
-  ee as SidebarSecondaryCollapsedBreadcrumb,
-  le as SidebarSecondaryContent,
-  de as SidebarSecondaryFooter,
-  se as SidebarSecondaryHeader,
-  pe as SidebarSecondaryMenu,
-  ve as SidebarSecondaryMenuItem,
-  he as SidebarSecondaryMenuItemExtras,
-  be as SidebarSecondarySection,
-  fe as SidebarSecondarySectionLabel,
-  re as sidebarSecondaryMenuItemVariants
-};
-//# sourceMappingURL=sidebar-secondary.js.map
+F.displayName = "SidebarSecondarySectionLabel";
+var I = o.forwardRef(({ className: t, ...n }, r) => {
+	let { expandable: i } = o.useContext(k), a = /* @__PURE__ */ c("ul", {
+		ref: r,
+		className: e("flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", t),
+		...n
+	});
+	return i ? /* @__PURE__ */ c(f.Panel, { children: a }) : a;
+});
+I.displayName = "SidebarSecondaryMenu";
+var L = t("group/row flex w-full items-start gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]", {
+	variants: { variant: {
+		unselected: "bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]",
+		selected: "bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]"
+	} },
+	defaultVariants: { variant: "unselected" }
+}), R = o.forwardRef(({ className: t, selected: u = !1, icon: d, extras: f, render: g, children: _, ...v }, y) => {
+	let { expanded: b, setSelectedLabel: S } = x(), { expandable: C } = o.useContext(k), w = n(), T = o.useRef(null), E = o.useRef(null), D = h(E, { enabled: b });
+	o.useEffect(() => {
+		u && S(_);
+	}, [
+		u,
+		_,
+		S
+	]);
+	let O = p({
+		render: g,
+		ref: [y, T],
+		defaultTagName: "a",
+		props: m({
+			className: e(L({ variant: u ? "selected" : "unselected" }), C && "ps-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-section-container-header-gap)+16px)]", t),
+			"aria-current": u ? "page" : void 0,
+			onKeyDown: (e) => {
+				e.key === " " && (e.preventDefault(), e.currentTarget.click());
+			},
+			children: /* @__PURE__ */ l(s, { children: [
+				d != null && /* @__PURE__ */ c("span", {
+					className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]",
+					children: d
+				}),
+				/* @__PURE__ */ l(r, {
+					disabled: !D,
+					children: [/* @__PURE__ */ c(a, {
+						render: /* @__PURE__ */ c("span", {
+							ref: E,
+							className: e("flex-1 min-w-[60px] truncate text-start", !b && "sr-only")
+						}),
+						children: _
+					}), /* @__PURE__ */ c(i, {
+						anchor: T,
+						side: w === "rtl" ? "left" : "right",
+						children: _
+					})]
+				}),
+				f
+			] })
+		}, v)
+	});
+	return /* @__PURE__ */ c("li", {
+		className: "contents",
+		children: /* @__PURE__ */ l(r, {
+			disabled: b,
+			children: [/* @__PURE__ */ c(a, { render: O }), /* @__PURE__ */ c(i, {
+				side: w === "rtl" ? "left" : "right",
+				children: _
+			})]
+		})
+	});
+});
+R.displayName = "SidebarSecondaryMenuItem";
+var z = o.forwardRef(({ className: t, variant: n, shortcut: r, tag: i, children: a, ...o }, s) => {
+	let { expanded: u } = x(), f = n === "tag" || n === "tag-externalLink", p = n === "externalLink" || n === "tag-externalLink", m = n === "shortcut";
+	return /* @__PURE__ */ l("span", {
+		ref: s,
+		className: e("inline-flex items-center shrink-0 min-h-6 overflow-clip gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]", !u && "hidden", t),
+		...o,
+		children: [
+			f && (i ?? a),
+			m && /* @__PURE__ */ c("span", {
+				className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]",
+				children: r ?? a
+			}),
+			p && /* @__PURE__ */ c(d, {
+				size: 16,
+				className: "text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]"
+			})
+		]
+	});
+});
+z.displayName = "SidebarSecondaryMenuItemExtras";
+var B = o.forwardRef(({ className: t, icon: s, expandTooltip: u = "Expand", extras: d, children: f, onClick: p, ...m }, g) => {
+	let { expanded: _, toggleExpanded: v } = x(), y = n(), b = o.useRef(null), S = o.useRef(null), C = h(S, { enabled: _ }), w = /* @__PURE__ */ l("button", {
+		ref: (e) => {
+			b.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+		},
+		type: "button",
+		"aria-expanded": _,
+		className: e(L({ variant: "unselected" }), "text-start", t),
+		onClick: (e) => {
+			p?.(e), e.defaultPrevented || v();
+		},
+		...m,
+		children: [
+			s != null && /* @__PURE__ */ c("span", {
+				className: e("flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)] transition-transform", _ ? "rtl:rotate-180" : "ltr:rotate-180"),
+				children: s
+			}),
+			/* @__PURE__ */ l(r, {
+				disabled: !C,
+				children: [/* @__PURE__ */ c(a, {
+					render: /* @__PURE__ */ c("span", {
+						ref: S,
+						className: e("flex-1 min-w-[60px] truncate", !_ && "sr-only")
+					}),
+					children: f
+				}), /* @__PURE__ */ c(i, {
+					anchor: b,
+					side: y === "rtl" ? "left" : "right",
+					children: f
+				})]
+			}),
+			d
+		]
+	});
+	return /* @__PURE__ */ c("li", {
+		className: "contents",
+		children: /* @__PURE__ */ l(r, {
+			disabled: _,
+			children: [/* @__PURE__ */ c(a, { render: w }), /* @__PURE__ */ c(i, {
+				side: y === "rtl" ? "left" : "right",
+				children: u
+			})]
+		})
+	});
+});
+B.displayName = "SidebarSecondaryCollapseTrigger";
+//#endregion
+export { w as SidebarSecondary, B as SidebarSecondaryCollapseTrigger, D as SidebarSecondaryCollapsedBreadcrumb, E as SidebarSecondaryContent, O as SidebarSecondaryFooter, T as SidebarSecondaryHeader, I as SidebarSecondaryMenu, R as SidebarSecondaryMenuItem, z as SidebarSecondaryMenuItemExtras, M as SidebarSecondarySection, F as SidebarSecondarySectionLabel, L as sidebarSecondaryMenuItemVariants };
+
+//# sourceMappingURL=sidebar-secondary.js.map