@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/new/sidebar.es.js

@@ -0,0 +1,655 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { u as useMainSidebar, e as useMaybeSidebarState, h as MainSidebarNav, n as navItemClasses, i as MainSidebarRoot, j as MainSidebarNavLink, k as MainSidebarNavList, l as MainSidebarNavLabel, m as MainSidebarNavSection, o as MainSidebarNavSeparator, c as MainSidebarTrigger, b as MainSidebarProvider, a as MainSidebarMobileTrigger } from '../main-sidebar-D9QEbGX4.js';
+export { g as getIsLinkActive } from '../main-sidebar-D9QEbGX4.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { c as cn } from '../cn-C6s2yXwM.js';
+import React__default, { forwardRef, useState, useId } from 'react';
+import { ArrowLeftIcon, ChevronDownIcon, MoreHorizontalIcon } from 'lucide-react';
+import { K as Kbd } from '../kbd-H5Qu573u.js';
+import { z } from 'zod/v4';
+import { useLocalStorageState } from '../hooks/use-local-storage-state.es.js';
+
+function SidebarNewBrand({ logo, title, className, ...props }) {
+  const { state } = useMainSidebar();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-new-brand", className: cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
+    logo ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: logo }) : null,
+    state === "collapsed" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: title }) : /* @__PURE__ */ jsx("span", { className: "text-ui-md text-foreground truncate font-sans font-semibold tracking-tight", children: title })
+  ] });
+}
+
+const SidebarNewCommandHeader = forwardRef(
+  function SidebarNewCommandHeader2({ className, children, ...props }, ref) {
+    const { state } = useMainSidebar();
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        ref,
+        "data-slot": "sidebar-new-command-header",
+        "data-state": state,
+        className: cn(
+          "flex h-header-default shrink-0 items-center gap-1 overflow-hidden px-3",
+          state === "collapsed" && "[&_[data-slot=sidebar-new-search-trigger]]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+function SidebarNewFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("footer", { "data-slot": "sidebar-new-footer", className: cn("mt-auto shrink-0", className), ...props, children });
+}
+
+const SidebarNewFooterMeta = forwardRef(function SidebarNewFooterMeta2({ className, children, action, ...props }, ref) {
+  const { state } = useMainSidebar();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-new-footer-meta",
+      "data-state": state,
+      className: cn(
+        "grid min-h-10 grid-cols-[minmax(0,1fr)_auto_0fr] items-center border-t border-sidebar-divider px-2 py-1 text-ui-xs text-muted-foreground",
+        "transition-[grid-template-columns] duration-slow ease-out-custom motion-reduce:transition-none",
+        state === "collapsed" && "grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] px-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": state === "collapsed",
+            className: cn(
+              "min-w-0 truncate transition-opacity duration-normal ease-out-custom motion-reduce:transition-none",
+              state === "collapsed" && "opacity-0"
+            ),
+            children
+          }
+        ),
+        action,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+      ]
+    }
+  );
+});
+
+function SidebarNewHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-slot": "sidebar-new-header",
+      className: cn("flex h-header-default shrink-0 items-center gap-2 px-1", className),
+      ...props,
+      children
+    }
+  );
+}
+
+const NOISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+const CARD_HEIGHT = 76;
+const BLOOM_HEIGHT = 100;
+const BLOOM_HOLD_Y = 60;
+const BLOOM_HOLD_X = 22.5;
+const GRAIN_OPACITY = 0.18;
+const GRAIN_SIZE = 110;
+const FALLOFF_RAMP = [0, 0.08, 0.16, 0.25, 0.34, 0.44, 0.55, 0.66, 0.78, 0.89, 1];
+const TONES = {
+  neutral: { colorVar: "--foreground", peak: 0.08, grain: true, text: "text-muted-foreground" },
+  warning: {
+    colorVar: "--notice-warning",
+    peak: 0.16,
+    grain: false,
+    text: "text-notice-warning-fg"
+  },
+  danger: {
+    colorVar: "--notice-destructive",
+    peak: 0.16,
+    grain: false,
+    text: "text-notice-destructive-fg"
+  }
+};
+function cubicFalloff(position) {
+  const inverse = 1 - position;
+  return inverse * inverse * inverse;
+}
+function easedBloom(colorVar, peak) {
+  const stops = FALLOFF_RAMP.map((position) => {
+    const alpha = (peak * cubicFalloff(position) * 100).toFixed(2);
+    return `color-mix(in oklch, var(${colorVar}) ${alpha}%, transparent) ${(position * 100).toFixed(0)}%`;
+  });
+  return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+function easedMask(direction, hold) {
+  const stops = FALLOFF_RAMP.map((position) => {
+    const offset = (hold + (100 - hold) * position).toFixed(2);
+    return `rgb(0 0 0 / ${cubicFalloff(position).toFixed(3)}) ${offset}%`;
+  });
+  return `linear-gradient(${direction}, rgb(0 0 0 / 1) 0%, ${stops.join(", ")})`;
+}
+const BLOOM_MASK = `${easedMask("to bottom", BLOOM_HOLD_Y)}, ${easedMask("to right", BLOOM_HOLD_X)}`;
+function Bloom({ tone }) {
+  const current = TONES[tone];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "sidebar-new-meter-bloom",
+      className: "pointer-events-none absolute inset-x-0 top-0 -z-10",
+      style: {
+        height: BLOOM_HEIGHT,
+        backgroundImage: easedBloom(current.colorVar, current.peak),
+        maskImage: BLOOM_MASK,
+        maskComposite: "intersect"
+      },
+      children: current.grain ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: NOISE,
+            backgroundRepeat: "repeat",
+            backgroundSize: `${GRAIN_SIZE}px ${GRAIN_SIZE}px`,
+            opacity: GRAIN_OPACITY
+          }
+        }
+      ) : null
+    }
+  );
+}
+const SidebarNewMeter = forwardRef(function SidebarNewMeter2({
+  label,
+  value,
+  status,
+  tone = "neutral",
+  icon,
+  action,
+  href,
+  linkLabel,
+  LinkComponent: LinkProp,
+  state: stateProp,
+  className,
+  ...props
+}, ref) {
+  const ctx = useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
+  const isCollapsed = state === "collapsed";
+  const current = TONES[tone];
+  if (isCollapsed) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "sidebar-new-meter",
+        "data-tone": tone,
+        "data-state": state,
+        className: cn(
+          "relative isolate flex items-center justify-center overflow-hidden rounded-lg border border-border bg-background px-1 py-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Bloom, { tone }),
+          href ? /* @__PURE__ */ jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
+          /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-foreground pointer-events-none relative font-semibold tabular-nums", children: value })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-new-meter",
+      "data-tone": tone,
+      "data-state": state,
+      className: cn(
+        "relative isolate flex flex-col justify-center overflow-hidden rounded-lg border border-border bg-background px-3",
+        href && "transition-colors hover:bg-card",
+        className
+      ),
+      style: { height: CARD_HEIGHT },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Bloom, { tone }),
+        href ? /* @__PURE__ */ jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            tone === "neutral" ? null : icon,
+            /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-muted-foreground font-medium", children: label }),
+            action ? /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: action }) : null
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-ui-lg text-foreground mt-0.5 leading-tight font-semibold tabular-nums", children: value }),
+          status ? /* @__PURE__ */ jsx("div", { className: "text-ui-xs mt-1", children: /* @__PURE__ */ jsx("p", { className: cn("truncate", current.text), children: status }) }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+function SidebarNewNav({ children, className, ...props }) {
+  const isMobile = useMaybeSidebarState()?.isMobile ?? false;
+  return /* @__PURE__ */ jsx(
+    MainSidebarNav,
+    {
+      className: cn(
+        "-mr-1.5",
+        "[&_[data-orientation=vertical]]:w-1 [&_[data-orientation=vertical]]:p-0",
+        "[&_[data-orientation=vertical][data-has-overflow-y]]:opacity-100",
+        isMobile && "[&_a]:min-h-11 [&_a]:touch-manipulation [&_button]:min-h-11 [&_button]:touch-manipulation",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "pr-1.5", children })
+    }
+  );
+}
+
+function SidebarNewNavHeader({
+  children,
+  className,
+  state: stateProp,
+  href,
+  isActive,
+  LinkComponent: LinkProp,
+  ...props
+}) {
+  const context = useMaybeSidebarState();
+  const state = stateProp ?? context?.state ?? "default";
+  const showTitle = state === "default";
+  const Link = LinkProp ?? context?.LinkComponent ?? "a";
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex min-h-7 min-w-0 items-center", className), children: showTitle ? /* @__PURE__ */ jsx(
+    "header",
+    {
+      ...props,
+      className: cn("max-w-full min-w-0 truncate pl-3 text-ui-sm font-medium", {
+        "text-foreground": isActive,
+        "text-muted-foreground": !isActive
+      }),
+      children: href ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          href,
+          className: cn("block min-w-0 truncate transition-colors duration-normal", {
+            "hover:text-foreground": !isActive,
+            "text-foreground": isActive
+          }),
+          children
+        }
+      ) : children
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("header", { ...props, children }) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-sidebar-divider mx-3 h-px flex-1" })
+  ] }) });
+}
+
+const SidebarNewNavStackContext = React__default.createContext(void 0);
+function useSidebarNewNavStack() {
+  const context = React__default.useContext(SidebarNewNavStackContext);
+  if (!context) throw new Error("SidebarNew.NavStack components must be used within SidebarNew.NavStack.");
+  return context;
+}
+
+function SidebarNewNavStackRoot({
+  value,
+  rootValue = "root",
+  onValueChange,
+  children,
+  className,
+  ...props
+}) {
+  function closeView(returnFocusRef) {
+    onValueChange(rootValue);
+    requestAnimationFrame(() => {
+      const target = returnFocusRef?.current;
+      if (target && !target.closest("[inert]")) target.focus();
+    });
+  }
+  return /* @__PURE__ */ jsx(SidebarNewNavStackContext.Provider, { value: { activeValue: value, rootValue, closeView }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-new-nav-stack",
+      "data-value": value,
+      className: cn("relative grid min-w-0 overflow-hidden", className),
+      ...props,
+      children
+    }
+  ) });
+}
+
+function sidebarNewNavStackPageClasses(active, page, className) {
+  return cn(
+    "col-start-1 row-start-1 min-w-0 transition-[opacity,translate] duration-normal ease-out-custom will-change-[opacity,translate] motion-reduce:transition-none",
+    active && "relative translate-x-0 opacity-100",
+    !active && "pointer-events-none absolute inset-0 opacity-0",
+    !active && page === "root" && "-translate-x-2",
+    !active && page === "view" && "translate-x-2",
+    className
+  );
+}
+
+function SidebarNewNavStackRootView({ children, className, ...props }) {
+  const { state } = useMainSidebar();
+  const { activeValue, rootValue } = useSidebarNewNavStack();
+  const active = state === "collapsed" || activeValue === rootValue;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "sidebar-new-nav-stack-root",
+      "aria-hidden": !active,
+      inert: !active,
+      className: sidebarNewNavStackPageClasses(active, "root", className),
+      children
+    }
+  );
+}
+
+function SidebarNewNavStackView({
+  value,
+  title,
+  backLabel = "Back to main navigation",
+  returnFocusRef,
+  onBack,
+  children,
+  className,
+  ...props
+}) {
+  const { state } = useMainSidebar();
+  const { activeValue, closeView } = useSidebarNewNavStack();
+  const active = state !== "collapsed" && activeValue === value;
+  const backRef = React__default.useRef(null);
+  const wasActiveRef = React__default.useRef(active);
+  React__default.useEffect(() => {
+    if (active && !wasActiveRef.current) backRef.current?.focus();
+    wasActiveRef.current = active;
+  }, [active]);
+  React__default.useEffect(() => {
+    if (!active) return;
+    function handleKeyDown(event) {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      closeView(returnFocusRef);
+      onBack?.();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [active, closeView, onBack, returnFocusRef]);
+  function handleBack() {
+    closeView(returnFocusRef);
+    onBack?.();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "sidebar-new-nav-stack-view",
+      "data-value": value,
+      "aria-hidden": !active,
+      inert: !active,
+      className: sidebarNewNavStackPageClasses(active, "view", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: backRef,
+            type: "button",
+            "aria-label": `${backLabel}: ${title}`,
+            onClick: handleBack,
+            className: cn(
+              navItemClasses(),
+              "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1 text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "justify-self-center", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-center", children: title }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+const SidebarNewNavStack = Object.assign(SidebarNewNavStackRoot, {
+  Root: SidebarNewNavStackRootView,
+  View: SidebarNewNavStackView
+});
+
+function SidebarNewRoot({
+  "aria-label": ariaLabel = "Sidebar",
+  mobileMode = "takeover",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsx(MainSidebarRoot, { mobileMode, ...props }) });
+}
+
+const SidebarNewSearchTrigger = forwardRef(
+  function SidebarNewSearchTrigger2({ className, children, shortcut, type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        "data-slot": "sidebar-new-search-trigger",
+        type,
+        className: cn(
+          "group inline-flex size-form-md shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent text-muted-foreground transition-colors hover:bg-sidebar-nav-hover hover:text-foreground",
+          "focus-visible:shadow-focus-ring focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
+          "[&_svg]:size-4 [&_svg]:shrink-0",
+          shortcut && "w-auto px-2",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          shortcut ? /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              size: "xs",
+              className: "border-border bg-surface-overlay-soft text-muted-foreground group-hover:text-foreground active:scale-100",
+              children: shortcut
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+
+function getSidebarNewLinkKey(link) {
+  return `${link.url}:${link.name}`;
+}
+function SidebarNewSectionLink({
+  link,
+  activeCandidates,
+  level = 0,
+  isActive,
+  onSelect
+}) {
+  const childLinks = link.children ?? [];
+  return /* @__PURE__ */ jsx(
+    MainSidebarNavLink,
+    {
+      link,
+      isActive: isActive?.(link, activeCandidates) ?? link.isActive,
+      level,
+      onClick: (event) => {
+        if (event.target instanceof Element && event.target.closest("li") !== event.currentTarget) return;
+        onSelect?.(link);
+      },
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsx(MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsx(
+        SidebarNewSectionLink,
+        {
+          link: child,
+          activeCandidates,
+          level: level + 1,
+          isActive,
+          onSelect
+        },
+        getSidebarNewLinkKey(child)
+      )) }) : null
+    }
+  );
+}
+
+function SidebarNewMoreLinks({
+  links,
+  activeCandidates,
+  isActive,
+  recentLinks,
+  recentCutoff,
+  onSelect
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const linkIsActive = (link) => isActive?.(link, activeCandidates) ?? link.isActive ?? false;
+  const surfacedLinks = links.length < 2 ? links : links.filter((link) => linkIsActive(link) || (recentLinks[`${link.url}:${link.name}`] ?? 0) >= recentCutoff);
+  const foldedLinks = links.filter((link) => !surfacedLinks.includes(link));
+  function renderLink(link) {
+    return /* @__PURE__ */ jsx(
+      SidebarNewSectionLink,
+      {
+        link,
+        activeCandidates,
+        isActive,
+        onSelect
+      },
+      `${link.url}:${link.name}`
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    surfacedLinks.map(renderLink),
+    foldedLinks.length > 0 ? /* @__PURE__ */ jsx(
+      MainSidebarNavLink,
+      {
+        link: { name: "More", url: "", icon: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) },
+        render: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More",
+            "aria-expanded": expanded,
+            onClick: () => setExpanded((current) => !current),
+            children: [
+              /* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(MainSidebarNavLabel, { children: "More" })
+            ]
+          }
+        ),
+        action: /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-3.5 transition-transform duration-normal ease-out-custom motion-reduce:transition-none",
+              expanded && "rotate-180"
+            )
+          }
+        )
+      }
+    ) : null,
+    expanded ? foldedLinks.map(renderLink) : null
+  ] });
+}
+
+const recentLinkRetentionMs = 7 * 24 * 60 * 60 * 1e3;
+const recentLinksSchema = z.record(z.string(), z.number());
+const defaultRecentItemsStorageKey = "mastra:sidebar-new:recent-more-items";
+function getLinkKey(link) {
+  return `${link.url}:${link.name}`;
+}
+function SidebarNewSections({
+  sections,
+  isActive,
+  className,
+  recentItemsStorageKey = defaultRecentItemsStorageKey
+}) {
+  const baseId = useId();
+  const [renderedAt] = useState(Date.now);
+  const [recentLinks, setRecentLinks] = useLocalStorageState({
+    initialKey: recentItemsStorageKey,
+    defaultValue: {},
+    schema: recentLinksSchema
+  });
+  const recentCutoff = renderedAt - recentLinkRetentionMs;
+  function rememberLink(link) {
+    setRecentLinks((current) => ({ ...current, [getLinkKey(link)]: Date.now() }));
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
+    const showSeparator = section.links.length > 0 && section.separator;
+    const headerId = section.title ? `${baseId}-${section.key}` : void 0;
+    const activeCandidates = [...section.links, ...section.moreLinks ?? []];
+    return /* @__PURE__ */ jsxs(
+      MainSidebarNavSection,
+      {
+        className,
+        "aria-labelledby": headerId,
+        "aria-label": !headerId ? section.key : void 0,
+        children: [
+          showSeparator ? /* @__PURE__ */ jsx(MainSidebarNavSeparator, { className: "[&:after]:border-sidebar-divider" }) : null,
+          section.title ? /* @__PURE__ */ jsx(SidebarNewNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
+          /* @__PURE__ */ jsxs(MainSidebarNavList, { children: [
+            section.links.map((link) => /* @__PURE__ */ jsx(
+              SidebarNewSectionLink,
+              {
+                link,
+                activeCandidates,
+                isActive
+              },
+              getLinkKey(link)
+            )),
+            section.moreLinks?.length ? /* @__PURE__ */ jsx(
+              SidebarNewMoreLinks,
+              {
+                links: section.moreLinks,
+                activeCandidates,
+                isActive,
+                recentLinks,
+                recentCutoff,
+                onSelect: rememberLink
+              }
+            ) : null
+          ] })
+        ]
+      },
+      section.key
+    );
+  }) });
+}
+
+function SidebarNewTrigger(props) {
+  const context = useMaybeSidebarState();
+  if (context?.isMobile) return null;
+  return /* @__PURE__ */ jsx(MainSidebarTrigger, { ...props });
+}
+
+const SidebarNew = Object.assign(SidebarNewRoot, {
+  Brand: SidebarNewBrand,
+  CommandHeader: SidebarNewCommandHeader,
+  Footer: SidebarNewFooter,
+  FooterMeta: SidebarNewFooterMeta,
+  Header: SidebarNewHeader,
+  Meter: SidebarNewMeter,
+  MobileTrigger: MainSidebarMobileTrigger,
+  Nav: SidebarNewNav,
+  NavHeader: SidebarNewNavHeader,
+  NavLabel: MainSidebarNavLabel,
+  NavLink: MainSidebarNavLink,
+  NavList: MainSidebarNavList,
+  NavSection: MainSidebarNavSection,
+  NavSeparator: MainSidebarNavSeparator,
+  NavStack: SidebarNewNavStack,
+  Provider: MainSidebarProvider,
+  SearchTrigger: SidebarNewSearchTrigger,
+  Sections: SidebarNewSections,
+  Trigger: SidebarNewTrigger
+});
+
+export { SidebarNew, SidebarNewBrand, SidebarNewCommandHeader, SidebarNewFooter, SidebarNewFooterMeta, SidebarNewHeader, SidebarNewMeter, SidebarNewNav, SidebarNewNavHeader, SidebarNewNavStack, MainSidebarProvider as SidebarNewProvider, SidebarNewRoot, SidebarNewSearchTrigger, SidebarNewSections, SidebarNewTrigger, navItemClasses, useMainSidebar as useSidebarNew };
+//# sourceMappingURL=sidebar.es.js.map