@xsolla/xui-b2b-sidebar 0.147.1

package/native/index.mjs

@@ -0,0 +1,1715 @@
+// 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-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx6(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx6(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// 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 styled4 from "styled-components";
+import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ToggleButton = styled4.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 styled5 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 = styled5.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 = styled5.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 = styled5.span`
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  height: 20px;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var BadgeDot = styled5.span`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  background: ${(p) => p.$color};
+  border-radius: 999px;
+`;
+var BetaTag = styled5.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 = styled5.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 styled6 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 = styled6.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 = styled6.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 = 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.$size}px;
+    height: ${(p) => p.$size}px;
+  }
+`;
+var LabelBox2 = styled6.span`
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  height: 20px;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var ChevronBox = 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: 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 styled7 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 = styled7.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 = styled7.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