@xsolla/xui-b2b-sidebar 0.147.1

package/web/index.mjs

@@ -0,0 +1,1783 @@
+// src/Sidebar.tsx
+import styled2 from "styled-components";
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
+
+// src/SidebarContext.tsx
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  useCallback
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var DefaultLink = ({
+  to,
+  external,
+  target,
+  className,
+  children,
+  dataId,
+  onClick
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href: to,
+    className,
+    target: external ? target ?? "_blank" : target ?? void 0,
+    rel: external ? "noopener noreferrer" : void 0,
+    "data-id": dataId,
+    onClick,
+    children
+  }
+);
+var SidebarContext = createContext({
+  collapsed: false,
+  onCollapsedChange: () => {
+  },
+  pathname: "",
+  LinkComponent: DefaultLink,
+  expandedId: null,
+  onExpandedIdChange: () => {
+  }
+});
+var SidebarProvider = ({
+  collapsed: collapsedProp,
+  onCollapsedChange,
+  pathname = "",
+  linkComponent,
+  children
+}) => {
+  const [internalCollapsed, setInternalCollapsed] = useState(false);
+  const [expandedId, setExpandedId] = useState(null);
+  const collapsed = collapsedProp ?? internalCollapsed;
+  const handleCollapsedChange = useCallback(
+    (next) => {
+      if (collapsedProp === void 0) setInternalCollapsed(next);
+      onCollapsedChange?.(next);
+    },
+    [collapsedProp, onCollapsedChange]
+  );
+  const onExpandedIdChange = useCallback((id) => {
+    setExpandedId(id);
+  }, []);
+  const value = useMemo(
+    () => ({
+      collapsed,
+      onCollapsedChange: handleCollapsedChange,
+      pathname,
+      LinkComponent: linkComponent || DefaultLink,
+      expandedId,
+      onExpandedIdChange
+    }),
+    [
+      collapsed,
+      handleCollapsedChange,
+      pathname,
+      linkComponent,
+      expandedId,
+      onExpandedIdChange
+    ]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+};
+var useSidebar = () => useContext(SidebarContext);
+
+// src/SidebarCollapsed.tsx
+import {
+  useCallback as useCallback2,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState as useState2
+} from "react";
+import { createPortal } from "react-dom";
+import styled from "styled-components";
+import { useResolvedTheme } from "@xsolla/xui-core";
+import { Typography } from "@xsolla/xui-typography";
+import { ChatTwoMessages } from "@xsolla/xui-icons-base";
+
+// src/HideSidebarIcon.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var HideSidebarIcon = ({
+  flipped
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    style: flipped ? { transform: "rotate(180deg)" } : void 0,
+    children: [
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M10.1519 3.75L10.9674 4.60262L7.33825 8.39704H15.75V9.60296H7.33825L10.9674 13.3974L10.1519 14.25L5.33446 9.21318C5.22185 9.09544 5.22185 8.90456 5.33446 8.78682L10.1519 3.75Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx2("path", { d: "M2.25 3.75H3.75V15H2.25V3.75Z", fill: "currentColor" })
+    ]
+  }
+);
+
+// src/SidebarCollapsed.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var POPOVER_GAP_PX = 12;
+var POPOVER_VIEWPORT_PADDING_PX = 8;
+var POPOVER_CLOSE_DELAY_MS = 150;
+var POPOVER_ITEM_BASE_CLASS = "xui-sb-popover-item";
+var POPOVER_ITEM_ACTIVE_CLASS = "xui-sb-popover-item--active";
+var Outer = styled.div`
+  display: flex;
+  width: ${(p) => p.$width}px;
+  height: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+  background: ${(p) => p.$bg};
+  border-radius: ${(p) => p.$radius}px;
+
+  a {
+    text-decoration: none;
+  }
+`;
+var MainScroll = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  padding: ${(p) => p.$padding}px 0;
+  min-height: 0;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+`;
+var IconBtn = styled.button`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: ${(p) => p.$radius}px;
+  background: ${(p) => p.$active ? p.$hoverBg : "transparent"};
+  color: ${(p) => p.$active ? p.$hoverColor : p.$color};
+  cursor: pointer;
+  padding: 0;
+  font: inherit;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+
+  ${(p) => p.$active && `
+    background-color: ${p.$activeBg};
+    outline: 1px solid ${p.$activeOutline};
+    outline-offset: -1px;
+  `}
+
+  &:hover {
+    background-color: ${(p) => p.$hoverBg};
+    color: ${(p) => p.$hoverColor};
+  }
+
+  &:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: -${(p) => p.$focusOutlineWidth}px;
+  }
+
+  & > span {
+    display: flex;
+    width: ${(p) => p.$iconSize}px;
+    height: ${(p) => p.$iconSize}px;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: ${(p) => p.$iconSize}px;
+      height: ${(p) => p.$iconSize}px;
+    }
+  }
+`;
+var Spacer = styled.div`
+  height: 16px;
+  flex-shrink: 0;
+`;
+var FixedBottom = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: ${(p) => p.$padding}px 0;
+  flex-shrink: 0;
+`;
+var Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: ${(p) => p.$padding}px 0;
+  border-top: 1px solid ${(p) => p.$borderColor};
+  flex-shrink: 0;
+`;
+var CollapsedChat = styled.button`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${(p) => p.$border};
+  border-radius: ${(p) => p.$radius}px;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$color};
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+  font: inherit;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var CollapsedToggle = styled.button`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${(p) => p.$borderColor};
+  border-radius: ${(p) => p.$radius}px;
+  background: transparent;
+  cursor: pointer;
+  color: ${(p) => p.$color};
+  padding: 0;
+  font: inherit;
+
+  &:hover {
+    background: ${(p) => p.$hoverBg};
+  }
+
+  &:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: ${(p) => p.$iconSize}px;
+    height: ${(p) => p.$iconSize}px;
+  }
+`;
+var ChatBadge = styled.span`
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  background: ${(p) => p.$color};
+  border-radius: 999px;
+`;
+var PopoverContainer = styled.div`
+  position: fixed;
+  z-index: ${(p) => p.$zIndex};
+  min-width: ${(p) => p.$minWidth}px;
+  max-width: ${(p) => p.$maxWidth}px;
+`;
+var PopoverInner = styled.div`
+  min-height: ${(p) => p.$itemHeight}px;
+  padding: ${(p) => p.$padding}px;
+  background: ${(p) => p.$bg};
+  border-radius: ${(p) => p.$radius}px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  box-shadow: ${(p) => p.$shadow};
+`;
+var PopoverTitle = styled.div`
+  display: flex;
+  height: 20px;
+  align-items: center;
+  padding: 0 ${(p) => p.$padding}px;
+  overflow: hidden;
+`;
+var PopoverDivider = styled.div`
+  height: 1px;
+  align-self: stretch;
+  background: ${(p) => p.$color};
+`;
+var PopoverItems = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  & > .${POPOVER_ITEM_BASE_CLASS} {
+    display: flex;
+    max-height: ${(p) => p.$itemHeight}px;
+    align-items: center;
+    padding: 12px ${(p) => p.$padding}px;
+    border-radius: ${(p) => p.$radius}px;
+    color: ${(p) => p.$colorIdle};
+    font-weight: 400;
+    cursor: pointer;
+    transition: background-color 0.15s ease-in-out;
+    text-decoration: none;
+  }
+
+  & > .${POPOVER_ITEM_BASE_CLASS}:hover {
+    background-color: ${(p) => p.$hoverBg};
+  }
+
+  & > .${POPOVER_ITEM_BASE_CLASS}:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: -${(p) => p.$focusOutlineWidth}px;
+  }
+
+  & > .${POPOVER_ITEM_ACTIVE_CLASS} {
+    background-color: ${(p) => p.$activeBg};
+    color: ${(p) => p.$colorActive};
+    outline: 1px solid ${(p) => p.$activeOutline};
+    outline-offset: -1px;
+    font-weight: 500;
+  }
+`;
+var SinglePopoverPanel = styled.div`
+  padding: 4px;
+  background: ${(p) => p.$bg};
+  border-radius: ${(p) => p.$radius}px;
+  display: inline-flex;
+  flex-direction: column;
+  box-shadow: ${(p) => p.$shadow};
+`;
+var SingleLinkWrap = styled.div`
+  display: contents;
+
+  & > a,
+  & > * {
+    display: inline-flex;
+    max-height: ${(p) => p.$itemHeight}px;
+    align-items: center;
+    padding: 0 ${(p) => p.$padding}px;
+    border-radius: ${(p) => p.$radius}px;
+    color: ${(p) => p.$color};
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+`;
+var isChildActive = (item, pathname) => {
+  if (!item.children || !pathname) {
+    return false;
+  }
+  const pathWithoutMerchant = pathname.replace(/^\/\d+/, "");
+  return item.children.some((child) => {
+    if (typeof child.to !== "string") {
+      return false;
+    }
+    return child.exact ? pathWithoutMerchant === child.to : pathWithoutMerchant === child.to || pathWithoutMerchant.startsWith(`${child.to}/`);
+  });
+};
+var CollapsedIconItem = ({ item, onPopoverOpen, onPopoverClose, pathname, sizing, colors }) => {
+  const ref = useRef(null);
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const isActive = hasChildren && isChildActive(item, pathname);
+  const openPopover = useCallback2(() => {
+    if (ref.current) {
+      onPopoverOpen(item, ref.current.getBoundingClientRect());
+    }
+  }, [item, onPopoverOpen]);
+  const isSimpleActive = !hasChildren && (() => {
+    if (!item.to || !pathname) {
+      return false;
+    }
+    const pathWithoutMerchant = pathname.replace(/^\/\d+/, "");
+    return item.exact ? pathWithoutMerchant === item.to : pathWithoutMerchant === item.to || pathWithoutMerchant.startsWith(`${item.to}/`);
+  })();
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openPopover();
+    } else if (e.key === "Escape") {
+      onPopoverClose();
+    }
+  };
+  if (!item.icon) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    IconBtn,
+    {
+      ref,
+      type: "button",
+      onMouseEnter: openPopover,
+      onMouseLeave: onPopoverClose,
+      onFocus: openPopover,
+      onBlur: onPopoverClose,
+      onKeyDown: handleKeyDown,
+      "data-id": item.dataId,
+      "aria-haspopup": hasChildren ? "menu" : "false",
+      $size: sizing.itemHeight,
+      $radius: sizing.radius,
+      $iconSize: sizing.iconSize,
+      $color: colors.content.tertiary,
+      $hoverBg: colors.overlay.mono,
+      $hoverColor: colors.content.primary,
+      $activeBg: colors.overlay.mono,
+      $activeOutline: colors.border.secondary,
+      $focusOutline: colors.border.brand,
+      $focusOutlineWidth: sizing.focusOutlineWidth,
+      $active: isActive || isSimpleActive,
+      children: /* @__PURE__ */ jsx3("span", { children: item.icon })
+    }
+  );
+};
+var CollapsedPopover = ({
+  item,
+  triggerRect,
+  onClose,
+  onMouseEnter,
+  onMouseLeave,
+  sizing,
+  colors
+}) => {
+  const { LinkComponent } = useSidebar();
+  const popoverRef = useRef(null);
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const [position, setPosition] = useState2({
+    top: triggerRect.top,
+    left: triggerRect.right + POPOVER_GAP_PX
+  });
+  useLayoutEffect(() => {
+    if (!popoverRef.current) {
+      return;
+    }
+    const rect = popoverRef.current.getBoundingClientRect();
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+    const idealTop = hasChildren ? triggerRect.top : triggerCenterY - rect.height / 2;
+    const maxTop = Math.max(
+      POPOVER_VIEWPORT_PADDING_PX,
+      window.innerHeight - rect.height - POPOVER_VIEWPORT_PADDING_PX
+    );
+    const top = Math.max(
+      POPOVER_VIEWPORT_PADDING_PX,
+      Math.min(idealTop, maxTop)
+    );
+    const left = Math.min(
+      triggerRect.right + POPOVER_GAP_PX,
+      window.innerWidth - rect.width - POPOVER_VIEWPORT_PADDING_PX
+    );
+    if (top !== position.top || left !== position.left) {
+      setPosition({ top, left });
+    }
+  }, [
+    triggerRect.top,
+    triggerRect.right,
+    triggerRect.height,
+    hasChildren,
+    item.dataId,
+    position.top,
+    position.left
+  ]);
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsx3(
+      PopoverContainer,
+      {
+        ref: popoverRef,
+        style: { top: position.top, left: position.left, minWidth: "auto" },
+        onMouseEnter,
+        onMouseLeave,
+        $minWidth: 0,
+        $maxWidth: sizing.popoverMaxWidth,
+        $zIndex: sizing.popoverZIndex,
+        children: /* @__PURE__ */ jsx3(
+          SinglePopoverPanel,
+          {
+            $padding: sizing.padding,
+            $itemHeight: sizing.itemHeight,
+            $radius: sizing.radius,
+            $bg: colors.layer.float,
+            $shadow: sizing.popoverShadow,
+            children: /* @__PURE__ */ jsx3(
+              SingleLinkWrap,
+              {
+                $itemHeight: sizing.itemHeight,
+                $padding: sizing.padding,
+                $radius: sizing.radius,
+                $color: colors.content.primary,
+                children: /* @__PURE__ */ jsx3(
+                  LinkComponent,
+                  {
+                    to: item.to,
+                    exact: item.exact,
+                    external: item.external,
+                    target: item.target,
+                    dataId: item.dataId,
+                    onClick: onClose,
+                    children: /* @__PURE__ */ jsx3(Typography, { variant: "bodySm", color: "primary", children: item.label })
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    PopoverContainer,
+    {
+      ref: popoverRef,
+      role: "menu",
+      style: { top: position.top, left: position.left },
+      onMouseEnter,
+      onMouseLeave,
+      $minWidth: sizing.popoverMinWidth,
+      $maxWidth: sizing.popoverMaxWidth,
+      $zIndex: sizing.popoverZIndex,
+      children: /* @__PURE__ */ jsxs2(
+        PopoverInner,
+        {
+          $itemHeight: sizing.itemHeight,
+          $padding: sizing.padding,
+          $radius: sizing.radius,
+          $bg: colors.layer.float,
+          $shadow: sizing.popoverShadow,
+          children: [
+            /* @__PURE__ */ jsx3(PopoverTitle, { $padding: sizing.padding, children: /* @__PURE__ */ jsx3(Typography, { variant: "bodyXs", color: "primary", children: item.label }) }),
+            /* @__PURE__ */ jsx3(PopoverDivider, { $color: colors.border.secondary }),
+            /* @__PURE__ */ jsx3(
+              PopoverItems,
+              {
+                $itemHeight: sizing.itemHeight,
+                $padding: sizing.padding,
+                $radius: sizing.radius,
+                $colorIdle: colors.content.tertiary,
+                $colorActive: colors.content.primary,
+                $hoverBg: colors.overlay.mono,
+                $activeBg: colors.overlay.mono,
+                $activeOutline: colors.border.secondary,
+                $focusOutline: colors.border.brand,
+                $focusOutlineWidth: sizing.focusOutlineWidth,
+                children: (item.children || []).map((child, i) => /* @__PURE__ */ jsx3(
+                  LinkComponent,
+                  {
+                    to: child.to,
+                    exact: child.exact,
+                    external: child.external,
+                    target: child.target,
+                    className: POPOVER_ITEM_BASE_CLASS,
+                    activeClassName: POPOVER_ITEM_ACTIVE_CLASS,
+                    dataId: child.dataId,
+                    onClick: onClose,
+                    children: /* @__PURE__ */ jsx3(Typography, { variant: "bodySm", color: "inherit", children: child.label })
+                  },
+                  child.dataId || (typeof child.to === "string" ? child.to : `child-${i}`)
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var SidebarCollapsed = ({
+  items,
+  toolItems = [],
+  bottomItems = [],
+  onToggleCollapse,
+  onChatClick,
+  showChat = true,
+  chatBadge = false
+}) => {
+  const { pathname } = useSidebar();
+  const { theme } = useResolvedTheme();
+  const sizing = theme.sizing.sidebar();
+  const colors = theme.colors;
+  const [popover, setPopover] = useState2(null);
+  const closeTimerRef = useRef(null);
+  const cancelCloseTimer = useCallback2(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const startCloseTimer = useCallback2(() => {
+    cancelCloseTimer();
+    closeTimerRef.current = setTimeout(() => {
+      setPopover(null);
+    }, POPOVER_CLOSE_DELAY_MS);
+  }, [cancelCloseTimer]);
+  useEffect(() => () => cancelCloseTimer(), [cancelCloseTimer]);
+  const handlePopoverOpen = useCallback2(
+    (item, rect) => {
+      cancelCloseTimer();
+      setPopover({ item, triggerRect: rect });
+    },
+    [cancelCloseTimer]
+  );
+  return /* @__PURE__ */ jsxs2(
+    Outer,
+    {
+      $width: sizing.widthCollapsed,
+      $radius: sizing.radius,
+      $bg: colors.background.secondary,
+      children: [
+        /* @__PURE__ */ jsxs2(MainScroll, { $padding: sizing.padding, children: [
+          items.map((item, i) => /* @__PURE__ */ jsx3(
+            CollapsedIconItem,
+            {
+              item,
+              onPopoverOpen: handlePopoverOpen,
+              onPopoverClose: startCloseTimer,
+              pathname,
+              sizing,
+              colors
+            },
+            item.dataId || `item-${i}`
+          )),
+          toolItems.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(Spacer, {}),
+            toolItems.map((item, i) => /* @__PURE__ */ jsx3(
+              CollapsedIconItem,
+              {
+                item,
+                onPopoverOpen: handlePopoverOpen,
+                onPopoverClose: startCloseTimer,
+                pathname,
+                sizing,
+                colors
+              },
+              item.dataId || `tool-${i}`
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          FixedBottom,
+          {
+            $padding: sizing.padding,
+            $borderColor: colors.border.secondary,
+            children: bottomItems.map((item, i) => /* @__PURE__ */ jsx3(
+              CollapsedIconItem,
+              {
+                item,
+                onPopoverOpen: handlePopoverOpen,
+                onPopoverClose: startCloseTimer,
+                pathname,
+                sizing,
+                colors
+              },
+              item.dataId || `bottom-${i}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Footer, { $padding: sizing.padding, $borderColor: colors.border.secondary, children: [
+          showChat && /* @__PURE__ */ jsxs2(
+            CollapsedChat,
+            {
+              onClick: onChatClick,
+              type: "button",
+              "aria-label": "Open chat",
+              $size: sizing.itemHeight,
+              $radius: sizing.radius,
+              $bg: colors.control.brand.primary.bg,
+              $border: colors.control.brand.primary.border,
+              $color: colors.content.static.dark,
+              $focusOutline: colors.border.brand,
+              $focusOutlineWidth: sizing.focusOutlineWidth,
+              children: [
+                /* @__PURE__ */ jsx3(ChatTwoMessages, { size: 16, variant: "line" }),
+                chatBadge && /* @__PURE__ */ jsx3(
+                  ChatBadge,
+                  {
+                    $size: sizing.chatBadgeSize,
+                    $color: colors.background.alert.primary
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            CollapsedToggle,
+            {
+              onClick: onToggleCollapse,
+              type: "button",
+              "aria-label": "Expand sidebar",
+              "aria-pressed": true,
+              $size: sizing.itemHeight,
+              $radius: sizing.radius,
+              $iconSize: sizing.iconSize,
+              $borderColor: colors.border.secondary,
+              $hoverBg: colors.overlay.mono,
+              $color: colors.content.tertiary,
+              $focusOutline: colors.border.brand,
+              $focusOutlineWidth: sizing.focusOutlineWidth,
+              children: /* @__PURE__ */ jsx3(HideSidebarIcon, { flipped: true })
+            }
+          )
+        ] }),
+        popover && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsx3(
+            CollapsedPopover,
+            {
+              item: popover.item,
+              triggerRect: popover.triggerRect,
+              onClose: () => setPopover(null),
+              onMouseEnter: cancelCloseTimer,
+              onMouseLeave: startCloseTimer,
+              sizing,
+              colors
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+
+// src/Sidebar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Outer2 = styled2.div`
+  width: ${(p) => p.$width}px;
+  height: 100%;
+  max-height: 100%;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  border-radius: ${(p) => p.$radius}px;
+  background: ${(p) => p.$bg};
+  transition: width ${(p) => p.$transition};
+
+  a {
+    text-decoration: none;
+  }
+`;
+var ExpandedPane = styled2.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${(p) => p.$width}px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: ${(p) => p.$hidden ? 0 : 1};
+  pointer-events: ${(p) => p.$hidden ? "none" : "auto"};
+  transition: ${(p) => p.$hidden ? p.$fadeOut : p.$fadeIn};
+`;
+var CollapsedPane = styled2.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${(p) => p.$width}px;
+  height: 100%;
+  opacity: ${(p) => p.$hidden ? 0 : 1};
+  pointer-events: ${(p) => p.$hidden ? "none" : "auto"};
+  transition: ${(p) => p.$hidden ? p.$fadeOut : p.$fadeIn};
+
+  & > div {
+    background: transparent;
+    border-radius: 0;
+  }
+`;
+var Sidebar = ({
+  collapsedItems = [],
+  collapsedToolItems = [],
+  collapsedBottomItems = [],
+  showChat = true,
+  onChatClick,
+  chatBadge = false,
+  children
+}) => {
+  const { collapsed, onCollapsedChange } = useSidebar();
+  const { theme } = useResolvedTheme2();
+  const sizing = theme.sizing.sidebar();
+  return /* @__PURE__ */ jsxs3(
+    Outer2,
+    {
+      role: "navigation",
+      "aria-label": "Sidebar navigation",
+      $expanded: sizing.widthExpanded,
+      $collapsed: sizing.widthCollapsed,
+      $width: collapsed ? sizing.widthCollapsed : sizing.widthExpanded,
+      $radius: sizing.radius,
+      $bg: theme.colors.background.secondary,
+      $transition: sizing.transitionWidth,
+      children: [
+        /* @__PURE__ */ jsx4(
+          ExpandedPane,
+          {
+            "aria-hidden": collapsed,
+            $width: sizing.widthExpanded,
+            $hidden: collapsed,
+            $fadeIn: sizing.transitionFadeIn,
+            $fadeOut: sizing.transitionFadeOut,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          CollapsedPane,
+          {
+            "aria-hidden": !collapsed,
+            $width: sizing.widthCollapsed,
+            $hidden: !collapsed,
+            $fadeIn: sizing.transitionFadeIn,
+            $fadeOut: sizing.transitionFadeOut,
+            children: /* @__PURE__ */ jsx4(
+              SidebarCollapsed,
+              {
+                items: collapsedItems,
+                toolItems: collapsedToolItems,
+                bottomItems: collapsedBottomItems,
+                onToggleCollapse: () => onCollapsedChange(!collapsed),
+                showChat,
+                onChatClick,
+                chatBadge
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/SidebarContent.tsx
+import styled3 from "styled-components";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ScrollableArea = styled3.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.$padding}px;
+  padding-bottom: 0;
+  overflow: hidden auto;
+  min-height: 0;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: ${(p) => p.$thumbColor};
+    border-radius: 2px;
+    visibility: hidden;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    visibility: visible;
+  }
+`;
+var SidebarContent = ({
+  children
+}) => {
+  const { theme } = useResolvedTheme3();
+  const sizing = theme.sizing.sidebar();
+  return /* @__PURE__ */ jsx5(
+    ScrollableArea,
+    {
+      $padding: sizing.padding,
+      $thumbColor: theme.colors.content.tertiary,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-web/src/Box.tsx
+import React4 from "react";
+import styled4 from "styled-components";
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+import React3 from "react";
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React3.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React3.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled4(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React4.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx6(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx6(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/SidebarFooter.tsx
+import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SidebarFooter = ({
+  children
+}) => {
+  const { theme } = useResolvedTheme4();
+  const sizing = theme.sizing.sidebar();
+  return /* @__PURE__ */ jsx7(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "flex-end",
+      justifyContent: "space-between",
+      padding: sizing.padding,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.border.secondary,
+      flexShrink: 0,
+      children
+    }
+  );
+};
+
+// src/SidebarTrigger.tsx
+import styled5 from "styled-components";
+import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ToggleButton = styled5.button`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${(p) => p.$borderColor};
+  border-radius: ${(p) => p.$radius}px;
+  background: transparent;
+  backdrop-filter: blur(30px);
+  cursor: pointer;
+  color: ${(p) => p.$color};
+  padding: 0;
+  font: inherit;
+
+  &:hover {
+    background: ${(p) => p.$hoverBg};
+  }
+
+  &:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: ${(p) => p.$iconSize}px;
+    height: ${(p) => p.$iconSize}px;
+  }
+`;
+var SidebarTrigger = () => {
+  const { collapsed, onCollapsedChange } = useSidebar();
+  const { theme } = useResolvedTheme5();
+  const sizing = theme.sizing.sidebar();
+  return /* @__PURE__ */ jsx8(
+    ToggleButton,
+    {
+      type: "button",
+      onClick: () => onCollapsedChange(!collapsed),
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      "aria-pressed": collapsed,
+      $size: sizing.itemHeight,
+      $radius: sizing.radius,
+      $iconSize: sizing.iconSize,
+      $borderColor: theme.colors.border.secondary,
+      $hoverBg: theme.colors.overlay.mono,
+      $color: theme.colors.content.tertiary,
+      $focusOutline: theme.colors.border.brand,
+      $focusOutlineWidth: sizing.focusOutlineWidth,
+      children: /* @__PURE__ */ jsx8(HideSidebarIcon, { flipped: collapsed })
+    }
+  );
+};
+
+// src/SidebarGroup.tsx
+import { useResolvedTheme as useResolvedTheme6 } from "@xsolla/xui-core";
+import { Typography as Typography2 } from "@xsolla/xui-typography";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var SidebarGroup = ({
+  label,
+  dataId,
+  children
+}) => {
+  const { theme } = useResolvedTheme6();
+  const sizing = theme.sizing.sidebar();
+  return /* @__PURE__ */ jsxs4(
+    Box,
+    {
+      flexDirection: "column",
+      "data-id": dataId,
+      role: label ? "group" : void 0,
+      "aria-label": label,
+      children: [
+        label && /* @__PURE__ */ jsx9(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            height: sizing.sectionLabelHeight,
+            paddingHorizontal: sizing.padding,
+            marginTop: sizing.padding,
+            children: /* @__PURE__ */ jsx9(Typography2, { variant: "bodyXs", color: "secondary", children: label })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+// src/SidebarMenu.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var SidebarMenu = ({
+  children
+}) => /* @__PURE__ */ jsx10(Box, { flexDirection: "column", alignItems: "stretch", children });
+
+// src/SidebarMenuItem.tsx
+import styled6 from "styled-components";
+import { useResolvedTheme as useResolvedTheme7 } from "@xsolla/xui-core";
+import { Typography as Typography3 } from "@xsolla/xui-typography";
+import { Tooltip } from "@xsolla/xui-tooltip";
+import { OpenIn } from "@xsolla/xui-icons-base";
+
+// src/constants.ts
+var ITEM_BASE_CLASS = "xui-sb-item";
+var ITEM_ACTIVE_CLASS = "xui-sb-item--active";
+
+// src/SidebarMenuItem.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOOLTIP_TRUNCATE_LENGTH = 20;
+var ItemWrapper = styled6.div`
+  display: contents;
+
+  & > .${ITEM_BASE_CLASS} {
+    display: flex;
+    height: ${(p) => p.$multiLine ? "auto" : `${p.$itemHeight}px`};
+    max-height: ${(p) => p.$multiLine ? "none" : `${p.$itemHeight}px`};
+    width: 100%;
+    box-sizing: border-box;
+    align-items: ${(p) => p.$multiLine ? "flex-start" : "center"};
+    gap: 8px;
+    padding: 0 ${(p) => p.$padding}px;
+    border-radius: ${(p) => p.$radius}px;
+    color: ${(p) => p.$colorIdle};
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 18px;
+    overflow: hidden;
+    transition:
+      background-color 0.15s ease-in-out,
+      color 0.15s ease-in-out;
+    white-space: ${(p) => p.$multiLine ? "normal" : "nowrap"};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  & > .${ITEM_BASE_CLASS}:hover {
+    background-color: ${(p) => p.$hoverBg};
+  }
+
+  & > .${ITEM_BASE_CLASS}:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: -${(p) => p.$focusOutlineWidth}px;
+  }
+
+  & > .${ITEM_ACTIVE_CLASS} {
+    background-color: ${(p) => p.$activeBg};
+    outline: 1px solid ${(p) => p.$activeOutline};
+    outline-offset: -1px;
+    color: ${(p) => p.$colorActive};
+    font-weight: 500;
+  }
+`;
+var IconBox = styled6.div`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+
+  svg {
+    width: ${(p) => p.$pin ? "12px" : `${p.$size}px`};
+    height: ${(p) => p.$pin ? "12px" : `${p.$size}px`};
+  }
+`;
+var LabelBox = styled6.span`
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  height: 20px;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var BadgeDot = styled6.span`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  background: ${(p) => p.$color};
+  border-radius: 999px;
+`;
+var BetaTag = styled6.span`
+  padding: 2px 6px;
+  border-radius: ${(p) => p.$radius}px;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$color};
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 14px;
+  flex-shrink: 0;
+`;
+var ExternalIconBox = styled6.span`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: ${(p) => p.$color};
+`;
+var SidebarMenuItem = ({
+  to,
+  label,
+  icon,
+  exact,
+  external,
+  hasExternalIcon,
+  target,
+  onClick,
+  dataId,
+  isActive,
+  isPinned,
+  showBadge,
+  hasTooltip,
+  beta,
+  multiLine,
+  extra,
+  isNested = false
+}) => {
+  const { LinkComponent } = useSidebar();
+  const { theme } = useResolvedTheme7();
+  const sizing = theme.sizing.sidebar();
+  const shouldTruncate = Boolean(hasTooltip) && typeof label === "string" && label.length > TOOLTIP_TRUNCATE_LENGTH;
+  const displayLabel = shouldTruncate ? /* @__PURE__ */ jsx11(Tooltip, { content: label, placement: "right", size: "md", children: /* @__PURE__ */ jsx11("span", { children: `${label.slice(0, TOOLTIP_TRUNCATE_LENGTH)}\u2026` }) }) : label;
+  return /* @__PURE__ */ jsx11(
+    ItemWrapper,
+    {
+      $itemHeight: sizing.itemHeight,
+      $iconSize: sizing.iconSize,
+      $padding: sizing.padding,
+      $radius: sizing.radius,
+      $colorIdle: theme.colors.content.tertiary,
+      $colorActive: theme.colors.content.primary,
+      $hoverBg: theme.colors.overlay.mono,
+      $activeBg: theme.colors.overlay.mono,
+      $activeOutline: theme.colors.border.secondary,
+      $focusOutline: theme.colors.border.brand,
+      $focusOutlineWidth: sizing.focusOutlineWidth,
+      $multiLine: multiLine,
+      children: /* @__PURE__ */ jsxs5(
+        LinkComponent,
+        {
+          to,
+          exact,
+          external,
+          target,
+          onClick,
+          isActive,
+          className: ITEM_BASE_CLASS,
+          activeClassName: ITEM_ACTIVE_CLASS,
+          dataId,
+          children: [
+            icon && !isNested && /* @__PURE__ */ jsx11(IconBox, { $size: sizing.iconSize, $pin: isPinned, children: icon }),
+            extra,
+            /* @__PURE__ */ jsxs5(LabelBox, { children: [
+              /* @__PURE__ */ jsx11(
+                Typography3,
+                {
+                  variant: isNested ? "bodySm" : "bodySmAccent",
+                  color: "inherit",
+                  noWrap: !multiLine,
+                  children: displayLabel
+                }
+              ),
+              showBadge && /* @__PURE__ */ jsx11(
+                BadgeDot,
+                {
+                  $size: sizing.itemBadgeSize,
+                  $color: theme.colors.background.alert.primary
+                }
+              )
+            ] }),
+            beta && /* @__PURE__ */ jsx11(
+              BetaTag,
+              {
+                $bg: theme.colors.overlay.mono,
+                $color: theme.colors.content.tertiary,
+                $radius: sizing.radius,
+                children: "Beta"
+              }
+            ),
+            external && hasExternalIcon && /* @__PURE__ */ jsx11(
+              ExternalIconBox,
+              {
+                $size: sizing.externalIconSize,
+                $color: theme.colors.content.secondary,
+                children: /* @__PURE__ */ jsx11(OpenIn, { size: 18, variant: "line" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/SidebarMenuCollapsible.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import styled7 from "styled-components";
+import { useResolvedTheme as useResolvedTheme8 } from "@xsolla/xui-core";
+import { Typography as Typography4 } from "@xsolla/xui-typography";
+import { ChevronRight, ChevronUp } from "@xsolla/xui-icons-base";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var HeaderButton = styled7.button`
+  display: flex;
+  height: ${(p) => p.$itemHeight}px;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 8px;
+  padding: 0 ${(p) => p.$padding}px;
+  border: 0;
+  border-radius: ${(p) => p.$radius}px;
+  background: transparent;
+  color: ${(p) => p.$color};
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  font-family: inherit;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: ${(p) => p.$hoverBg};
+  }
+
+  &:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: -${(p) => p.$focusOutlineWidth}px;
+  }
+`;
+var ExpandRegion = styled7.div`
+  display: grid;
+  grid-template-rows: ${(p) => p.$expanded ? "1fr" : "0fr"};
+  transition: ${(p) => p.$transition};
+
+  & > div {
+    overflow: hidden;
+  }
+
+  & .${ITEM_BASE_CLASS} {
+    position: relative;
+    padding: 0 ${(p) => p.$padding}px 0 ${(p) => p.$nestedPaddingLeft}px;
+    font-weight: 400;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: ${(p) => p.$railLeft}px;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background: ${(p) => p.$railColor};
+      transform: translateX(-50%);
+    }
+  }
+
+  & .${ITEM_ACTIVE_CLASS} {
+    font-weight: 500;
+    color: ${(p) => p.$colorActive};
+    background-color: ${(p) => p.$activeBg};
+    outline: 1px solid ${(p) => p.$activeOutline};
+    outline-offset: -1px;
+  }
+`;
+var IconBox2 = styled7.div`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+
+  svg {
+    width: ${(p) => p.$size}px;
+    height: ${(p) => p.$size}px;
+  }
+`;
+var LabelBox2 = styled7.span`
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  height: 20px;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var ChevronBox = styled7.span`
+  display: flex;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: inherit;
+
+  svg {
+    width: ${(p) => p.$size}px;
+    height: ${(p) => p.$size}px;
+  }
+`;
+var computeRouteMatch = (pathname, matchPaths) => {
+  if (matchPaths.length === 0) {
+    return false;
+  }
+  const pathWithoutMerchant = pathname.replace(/^\/\d+/, "");
+  return matchPaths.some((p) => {
+    if (p === "/") return pathWithoutMerchant === "/";
+    return pathWithoutMerchant === p || pathWithoutMerchant.startsWith(`${p}/`);
+  });
+};
+var SidebarMenuCollapsible = ({
+  icon,
+  label,
+  dataId,
+  matchPaths = [],
+  children
+}) => {
+  const { pathname, expandedId, onExpandedIdChange } = useSidebar();
+  const { theme } = useResolvedTheme8();
+  const sizing = theme.sizing.sidebar();
+  const idRef = useRef2();
+  if (!idRef.current) {
+    idRef.current = dataId || `sb-collapsible-${Math.random().toString(36).slice(2, 10)}`;
+  }
+  const collapsibleId = idRef.current;
+  const contentId = `sidebar-collapsible-${collapsibleId}`;
+  const matchKey = matchPaths.join("|");
+  const isRouteMatch = useMemo2(
+    () => computeRouteMatch(pathname, matchPaths),
+    [pathname, matchKey, matchPaths]
+  );
+  const prevMatchRef = useRef2(isRouteMatch);
+  useEffect2(() => {
+    if (prevMatchRef.current !== isRouteMatch) {
+      prevMatchRef.current = isRouteMatch;
+      if (isRouteMatch) {
+        onExpandedIdChange(collapsibleId);
+      }
+    }
+  }, [isRouteMatch, collapsibleId, onExpandedIdChange]);
+  const mountRef = useRef2(true);
+  useEffect2(() => {
+    if (mountRef.current && isRouteMatch) {
+      onExpandedIdChange(collapsibleId);
+      mountRef.current = false;
+    }
+  }, [isRouteMatch, collapsibleId, onExpandedIdChange]);
+  const isExpanded = expandedId === collapsibleId;
+  const handleToggle = () => {
+    onExpandedIdChange(isExpanded ? null : collapsibleId);
+  };
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6(
+      HeaderButton,
+      {
+        type: "button",
+        onClick: handleToggle,
+        "data-id": dataId,
+        "aria-expanded": isExpanded,
+        "aria-controls": contentId,
+        $itemHeight: sizing.itemHeight,
+        $padding: sizing.padding,
+        $radius: sizing.radius,
+        $color: theme.colors.content.tertiary,
+        $hoverBg: theme.colors.control.mono.secondary.bgHover,
+        $focusOutline: theme.colors.border.brand,
+        $focusOutlineWidth: sizing.focusOutlineWidth,
+        children: [
+          icon && /* @__PURE__ */ jsx12(IconBox2, { $size: sizing.iconSize, children: icon }),
+          /* @__PURE__ */ jsx12(LabelBox2, { children: /* @__PURE__ */ jsx12(Typography4, { variant: "bodySmAccent", color: "inherit", noWrap: true, children: label }) }),
+          /* @__PURE__ */ jsx12(ChevronBox, { $size: sizing.chevronSize, children: isExpanded ? /* @__PURE__ */ jsx12(ChevronUp, { size: 14, variant: "solid" }) : /* @__PURE__ */ jsx12(ChevronRight, { size: 14, variant: "solid" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      ExpandRegion,
+      {
+        id: contentId,
+        role: "region",
+        $expanded: isExpanded,
+        $transition: sizing.transitionRows,
+        $padding: sizing.padding,
+        $nestedPaddingLeft: sizing.nestedItemPaddingLeft,
+        $railLeft: sizing.nestedItemRailLeft,
+        $railColor: theme.colors.border.secondary,
+        $colorActive: theme.colors.content.primary,
+        $activeBg: theme.colors.overlay.mono,
+        $activeOutline: theme.colors.border.secondary,
+        children: /* @__PURE__ */ jsx12("div", { children })
+      }
+    )
+  ] });
+};
+
+// src/SidebarMenuSub.tsx
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
+var SidebarMenuSub = ({
+  children
+}) => /* @__PURE__ */ jsx13(Fragment3, { children });
+
+// src/SidebarChatButton.tsx
+import styled8 from "styled-components";
+import { useResolvedTheme as useResolvedTheme9 } from "@xsolla/xui-core";
+import { Typography as Typography5 } from "@xsolla/xui-typography";
+import { ChatTwoMessages as ChatTwoMessages2 } from "@xsolla/xui-icons-base";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var ChatButton = styled8.button`
+  display: flex;
+  height: ${(p) => p.$height}px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 ${(p) => p.$padding}px;
+  border: 1px solid ${(p) => p.$border};
+  border-radius: ${(p) => p.$radius}px;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$color};
+  cursor: pointer;
+  font: inherit;
+  position: relative;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:focus-visible {
+    outline: ${(p) => p.$focusOutlineWidth}px solid ${(p) => p.$focusOutline};
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+var Badge = styled8.span`
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  background: ${(p) => p.$color};
+  border-radius: 999px;
+`;
+var SidebarChatButton = ({
+  onClick,
+  badge
+}) => {
+  const { theme } = useResolvedTheme9();
+  const sizing = theme.sizing.sidebar();
+  return /* @__PURE__ */ jsxs7(
+    ChatButton,
+    {
+      onClick,
+      type: "button",
+      $height: sizing.itemHeight,
+      $padding: sizing.padding,
+      $radius: sizing.radius,
+      $bg: theme.colors.control.brand.primary.bg,
+      $border: theme.colors.control.brand.primary.border,
+      $color: theme.colors.content.static.dark,
+      $focusOutline: theme.colors.border.brand,
+      $focusOutlineWidth: sizing.focusOutlineWidth,
+      children: [
+        /* @__PURE__ */ jsx14(ChatTwoMessages2, { size: 16, variant: "line" }),
+        /* @__PURE__ */ jsx14(Typography5, { variant: "bodySmAccent", color: "inherit", children: "Chat" }),
+        badge && /* @__PURE__ */ jsx14(
+          Badge,
+          {
+            $size: sizing.chatBadgeSize,
+            $color: theme.colors.background.alert.primary
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Sidebar,
+  SidebarChatButton,
+  SidebarCollapsed,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuCollapsible,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar
+};
+//# sourceMappingURL=index.mjs.map