@xsolla/xui-context-menu 0.64.0-pr81.1768677662

package/web/index.mjs

@@ -0,0 +1,1854 @@
+// src/ContextMenu.tsx
+import React10, {
+  forwardRef as forwardRef9,
+  useState,
+  useRef as useRef5,
+  useEffect as useEffect5,
+  useCallback,
+  useMemo
+} from "react";
+
+// ../primitives-web/src/Box.tsx
+import React from "react";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var StyledBox = styled.div`
+  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"};
+
+  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 = React.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,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "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__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        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,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledText = styled2.span`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../primitives-web/src/Spinner.tsx
+import styled3, { keyframes } from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var StyledSpinner = styled3.div`
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  border: ${(props) => props.strokeWidth || 2}px solid
+    ${(props) => props.color || "currentColor"};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: ${rotate} 1s linear infinite;
+`;
+var Spinner = ({
+  role = "status",
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive = "polite",
+  "aria-describedby": ariaDescribedBy,
+  testID,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    StyledSpinner,
+    {
+      role,
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      "aria-describedby": ariaDescribedBy,
+      "data-testid": testID,
+      ...props
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-web/src/Icon.tsx
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledIcon = styled4.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  color: ${(props) => props.color || "currentColor"};
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+`;
+var Icon = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx4(StyledIcon, { ...props, children });
+};
+
+// ../primitives-web/src/Divider.tsx
+import styled5 from "styled-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledDivider = styled5.div`
+  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
+  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+
+  ${(props) => props.dashStroke && `
+    border-style: dashed;
+    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
+    border-width: 0;
+    ${props.vertical ? `
+      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
+      height: 100%;
+    ` : `
+      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+      width: 100%;
+    `}
+  `}
+`;
+
+// ../primitives-web/src/Input.tsx
+import { forwardRef } from "react";
+import styled6 from "styled-components";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StyledInput = styled6.input`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    ...rest
+  }, ref) => {
+    const handleChange = (e) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(e.target.value);
+      }
+    };
+    const inputValue = value !== void 0 ? value : "";
+    return /* @__PURE__ */ jsx6(
+      StyledInput,
+      {
+        ref,
+        id,
+        value: inputValue,
+        name,
+        placeholder,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        type: secureTextEntry ? "password" : type || "text",
+        inputMode,
+        autoComplete,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        "data-testid": dataTestId,
+        ...rest
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-web/src/TextArea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import styled7 from "styled-components";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var StyledTextArea = styled7.textarea`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+  resize: none;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var TextAreaPrimitive = forwardRef2(
+  ({
+    value,
+    placeholder,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows
+  }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      StyledTextArea,
+      {
+        ref,
+        value,
+        placeholder,
+        onChange: (e) => onChangeText?.(e.target.value),
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        rows
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// src/ContextMenu.tsx
+import { useDesignSystem as useDesignSystem7 } from "@xsolla/xui-core";
+import { Spinner as Spinner2 } from "@xsolla/xui-spinner";
+
+// src/ContextMenuContext.tsx
+import { createContext, useContext } from "react";
+var ContextMenuContext = createContext(void 0);
+var useContextMenu = () => {
+  const context = useContext(ContextMenuContext);
+  return context;
+};
+var useContextMenuRequired = () => {
+  const context = useContext(ContextMenuContext);
+  if (!context) {
+    throw new Error(
+      "useContextMenuRequired must be used within a ContextMenu component"
+    );
+  }
+  return context;
+};
+
+// src/ContextMenuItem.tsx
+import { forwardRef as forwardRef3, useEffect, useRef } from "react";
+import { useDesignSystem } from "@xsolla/xui-core";
+import { ArrowRight } from "@xsolla/xui-icons";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var ContextMenuItem = forwardRef3(
+  ({
+    children,
+    description,
+    icon,
+    trailing,
+    shortcut,
+    selected,
+    disabled,
+    active,
+    size: propSize,
+    hasSubmenu,
+    onPress,
+    "data-testid": testId = "context-menu-item"
+  }, ref) => {
+    const { theme } = useDesignSystem();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = useRef(null);
+    const brandColors = theme.colors.control.brand.primary;
+    const contentColors = theme.colors.content;
+    useEffect(() => {
+      if (context && !disabled) {
+        const id = typeof children === "string" ? children : String(Math.random());
+        context.registerItem(id);
+        return () => context.unregisterItem(id);
+      }
+    }, [context, disabled, children]);
+    const handlePress = () => {
+      if (disabled) return;
+      onPress?.();
+      if (context) {
+        context.onItemSelect({
+          id: typeof children === "string" ? children : "",
+          label: typeof children === "string" ? children : "",
+          variant: "default",
+          selected
+        });
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress();
+      }
+    };
+    const getBackgroundColor = () => {
+      if (selected) {
+        return brandColors.bg;
+      }
+      if (active) {
+        return theme.colors.control.input.bgHover;
+      }
+      return "transparent";
+    };
+    const getTextColor = () => {
+      if (disabled) {
+        return theme.colors.control.input.textDisable;
+      }
+      if (selected) {
+        return contentColors.on.brand;
+      }
+      return theme.colors.content.primary;
+    };
+    const getIconColor = () => {
+      if (disabled) {
+        return theme.colors.content.tertiary;
+      }
+      if (selected) {
+        return contentColors.on.brand;
+      }
+      return theme.colors.content.secondary;
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: ref || itemRef,
+        role: "menuitem",
+        "aria-disabled": disabled || void 0,
+        "aria-selected": selected || void 0,
+        tabIndex: disabled ? -1 : 0,
+        flexDirection: "row",
+        alignItems: description ? "flex-start" : "center",
+        gap: sizeStyles.gap,
+        paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+        paddingVertical: sizeStyles.itemPaddingVertical,
+        backgroundColor: getBackgroundColor(),
+        hoverStyle: !disabled && !selected ? {
+          backgroundColor: theme.colors.control.input.bgHover
+        } : void 0,
+        pressStyle: !disabled ? {
+          backgroundColor: selected ? brandColors.bgPress : theme.colors.control.input.bgDisable
+        } : void 0,
+        onPress: handlePress,
+        onKeyDown: handleKeyDown,
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          outline: "none"
+        },
+        "data-testid": testId,
+        children: [
+          icon && /* @__PURE__ */ jsx8(
+            Box,
+            {
+              width: sizeStyles.iconSize,
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: getIconColor(), children: icon })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx8(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx8(
+              Text,
+              {
+                color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] }),
+          shortcut && /* @__PURE__ */ jsx8(
+            Text,
+            {
+              color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
+              fontSize: sizeStyles.descriptionFontSize,
+              children: shortcut
+            }
+          ),
+          trailing,
+          hasSubmenu && /* @__PURE__ */ jsx8(
+            Icon,
+            {
+              size: sizeStyles.iconSize - 4,
+              color: selected ? contentColors.on.brand : theme.colors.content.secondary,
+              children: /* @__PURE__ */ jsx8(ArrowRight, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+
+// src/ContextMenuCheckboxItem.tsx
+import { forwardRef as forwardRef4, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { Check, Minus } from "@xsolla/xui-icons";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var checkboxSizeMap = {
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20
+};
+var checkIconSizeMap = {
+  s: 10,
+  m: 12,
+  l: 14,
+  xl: 16
+};
+var CheckboxIndicator = ({
+  checked,
+  indeterminate,
+  size,
+  disabled
+}) => {
+  const { theme } = useDesignSystem2();
+  const brandColors = theme.colors.control.brand.primary;
+  const faintColors = theme.colors.control.faint;
+  const contentColors = theme.colors.content;
+  const boxSize = checkboxSizeMap[size];
+  const iconSize = checkIconSizeMap[size];
+  const isActive = checked || indeterminate;
+  const getBgColor = () => {
+    if (disabled) {
+      return brandColors.bgDisable;
+    }
+    if (isActive) {
+      return brandColors.bg;
+    }
+    return faintColors.bg;
+  };
+  const getBorderColor = () => {
+    if (isActive && !disabled) {
+      return brandColors.bg;
+    }
+    return faintColors.border;
+  };
+  return /* @__PURE__ */ jsx9(
+    Box,
+    {
+      width: boxSize,
+      height: boxSize,
+      borderRadius: 4,
+      borderWidth: isActive ? 0 : 1,
+      borderColor: getBorderColor(),
+      backgroundColor: getBgColor(),
+      alignItems: "center",
+      justifyContent: "center",
+      children: indeterminate ? /* @__PURE__ */ jsx9(
+        Icon,
+        {
+          size: iconSize,
+          color: disabled ? contentColors.tertiary : contentColors.on.brand,
+          children: /* @__PURE__ */ jsx9(Minus, {})
+        }
+      ) : checked ? /* @__PURE__ */ jsx9(
+        Icon,
+        {
+          size: iconSize,
+          color: disabled ? contentColors.tertiary : contentColors.on.brand,
+          children: /* @__PURE__ */ jsx9(Check, {})
+        }
+      ) : null
+    }
+  );
+};
+var ContextMenuCheckboxItem = forwardRef4(
+  ({
+    children,
+    description,
+    leadingContent,
+    trailing,
+    checked = false,
+    indeterminate = false,
+    disabled,
+    size: propSize,
+    onCheckedChange,
+    onPress,
+    "data-testid": testId = "context-menu-checkbox-item"
+  }, ref) => {
+    const { theme } = useDesignSystem2();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = useRef2(null);
+    const contentColors = theme.colors.content;
+    useEffect2(() => {
+      if (context && !disabled) {
+        const id = typeof children === "string" ? children : String(Math.random());
+        context.registerItem(id);
+        return () => context.unregisterItem(id);
+      }
+    }, [context, disabled, children]);
+    const handlePress = () => {
+      if (disabled) return;
+      const newChecked = !checked;
+      onCheckedChange?.(newChecked);
+      onPress?.();
+      if (context) {
+        context.onItemSelect({
+          id: typeof children === "string" ? children : "",
+          label: typeof children === "string" ? children : "",
+          variant: "checkbox",
+          checked: newChecked
+        });
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress();
+      }
+    };
+    const getTextColor = () => {
+      if (disabled) {
+        return theme.colors.control.input.textDisable;
+      }
+      return theme.colors.control.input.text;
+    };
+    return /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        ref: ref || itemRef,
+        role: "menuitemcheckbox",
+        "aria-checked": indeterminate ? "mixed" : checked,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        flexDirection: "row",
+        alignItems: description ? "flex-start" : "center",
+        gap: sizeStyles.gap,
+        paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+        paddingVertical: sizeStyles.itemPaddingVertical,
+        backgroundColor: "transparent",
+        hoverStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgHover
+        } : void 0,
+        pressStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgDisable
+        } : void 0,
+        onPress: handlePress,
+        onKeyDown: handleKeyDown,
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          outline: "none"
+        },
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsx9(
+            Box,
+            {
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx9(
+                CheckboxIndicator,
+                {
+                  checked,
+                  indeterminate,
+                  size,
+                  disabled
+                }
+              )
+            }
+          ),
+          leadingContent && /* @__PURE__ */ jsx9(Box, { padding: 5, alignItems: "center", justifyContent: "center", children: leadingContent }),
+          /* @__PURE__ */ jsxs2(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx9(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx9(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] }),
+          trailing
+        ]
+      }
+    );
+  }
+);
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+
+// src/ContextMenuRadioGroup.tsx
+import { createContext as createContext2, useContext as useContext2, forwardRef as forwardRef5 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RadioGroupContext = createContext2(null);
+var useRadioGroup = () => useContext2(RadioGroupContext);
+var ContextMenuRadioGroup = forwardRef5(
+  ({
+    children,
+    value,
+    onValueChange,
+    "data-testid": testId = "context-menu-radio-group"
+  }, ref) => {
+    return /* @__PURE__ */ jsx10(RadioGroupContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx10(Box, { ref, role: "group", flexDirection: "column", "data-testid": testId, children }) });
+  }
+);
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+
+// src/ContextMenuRadioItem.tsx
+import { forwardRef as forwardRef6, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var radioSizeMap = {
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20
+};
+var radioDotSizeMap = {
+  s: 6,
+  m: 8,
+  l: 8,
+  xl: 10
+};
+var RadioIndicator = ({
+  checked,
+  size,
+  disabled
+}) => {
+  const { theme } = useDesignSystem3();
+  const brandColors = theme.colors.control.brand.primary;
+  const faintColors = theme.colors.control.faint;
+  const contentColors = theme.colors.content;
+  const outerSize = radioSizeMap[size];
+  const dotSize = radioDotSizeMap[size];
+  const getBgColor = () => {
+    if (disabled) {
+      return brandColors.bgDisable;
+    }
+    if (checked) {
+      return brandColors.bg;
+    }
+    return faintColors.bg;
+  };
+  const getBorderColor = () => {
+    if (checked && !disabled) {
+      return brandColors.bg;
+    }
+    return faintColors.border;
+  };
+  return /* @__PURE__ */ jsx11(
+    Box,
+    {
+      width: outerSize,
+      height: outerSize,
+      borderRadius: outerSize / 2,
+      borderWidth: checked ? 0 : 1,
+      borderColor: getBorderColor(),
+      backgroundColor: getBgColor(),
+      alignItems: "center",
+      justifyContent: "center",
+      children: checked && /* @__PURE__ */ jsx11(
+        Box,
+        {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: disabled ? contentColors.tertiary : contentColors.on.brand
+        }
+      )
+    }
+  );
+};
+var ContextMenuRadioItem = forwardRef6(
+  ({
+    children,
+    description,
+    value,
+    disabled,
+    size: propSize,
+    onPress,
+    "data-testid": testId = "context-menu-radio-item"
+  }, ref) => {
+    const { theme } = useDesignSystem3();
+    const context = useContextMenu();
+    const radioGroup = useRadioGroup();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const itemRef = useRef3(null);
+    const checked = radioGroup?.value === value;
+    useEffect3(() => {
+      if (context && !disabled) {
+        const id = typeof children === "string" ? children : String(Math.random());
+        context.registerItem(id);
+        return () => context.unregisterItem(id);
+      }
+    }, [context, disabled, children]);
+    const handlePress = () => {
+      if (disabled) return;
+      radioGroup?.onValueChange(value);
+      onPress?.();
+      if (context) {
+        context.onItemSelect({
+          id: typeof children === "string" ? children : "",
+          label: typeof children === "string" ? children : "",
+          variant: "radio",
+          checked: true
+        });
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handlePress();
+      }
+    };
+    const getTextColor = () => {
+      if (disabled) {
+        return theme.colors.control.input.textDisable;
+      }
+      return theme.colors.control.input.text;
+    };
+    return /* @__PURE__ */ jsxs3(
+      Box,
+      {
+        ref: ref || itemRef,
+        role: "menuitemradio",
+        "aria-checked": checked,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        flexDirection: "row",
+        alignItems: description ? "flex-start" : "center",
+        gap: sizeStyles.gap,
+        paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+        paddingVertical: sizeStyles.itemPaddingVertical,
+        backgroundColor: "transparent",
+        hoverStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgHover
+        } : void 0,
+        pressStyle: !disabled ? {
+          backgroundColor: theme.colors.control.input.bgDisable
+        } : void 0,
+        onPress: handlePress,
+        onKeyDown: handleKeyDown,
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          outline: "none"
+        },
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsx11(
+            Box,
+            {
+              marginTop: description ? 2 : 0,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx11(RadioIndicator, { checked, size, disabled })
+            }
+          ),
+          /* @__PURE__ */ jsxs3(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx11(
+              Text,
+              {
+                color: getTextColor(),
+                fontSize: sizeStyles.fontSize,
+                fontWeight: "400",
+                lineHeight: sizeStyles.fontSize + 2,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx11(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize,
+                lineHeight: sizeStyles.descriptionFontSize + 2,
+                children: description
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+
+// src/ContextMenuGroup.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var ContextMenuGroup = forwardRef7(
+  ({
+    label,
+    description,
+    children,
+    size: propSize,
+    "data-testid": testId = "context-menu-group"
+  }, ref) => {
+    const { theme } = useDesignSystem4();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    return /* @__PURE__ */ jsxs4(Box, { ref, role: "group", "aria-label": label, "data-testid": testId, children: [
+      label && /* @__PURE__ */ jsxs4(
+        Box,
+        {
+          paddingHorizontal: sizeStyles.itemPaddingHorizontal,
+          paddingVertical: sizeStyles.itemPaddingVertical,
+          children: [
+            /* @__PURE__ */ jsx12(
+              Text,
+              {
+                color: theme.colors.content.secondary,
+                fontSize: sizeStyles.descriptionFontSize,
+                fontWeight: "600",
+                style: { textTransform: "uppercase", letterSpacing: 0.5 },
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsx12(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: sizeStyles.descriptionFontSize - 2,
+                marginTop: 2,
+                children: description
+              }
+            )
+          ]
+        }
+      ),
+      children
+    ] });
+  }
+);
+ContextMenuGroup.displayName = "ContextMenuGroup";
+
+// src/ContextMenuSeparator.tsx
+import { useDesignSystem as useDesignSystem5 } from "@xsolla/xui-core";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ContextMenuSeparator = ({
+  size: propSize,
+  "data-testid": testId = "context-menu-separator"
+}) => {
+  const { theme } = useDesignSystem5();
+  const context = useContextMenu();
+  const size = propSize || context?.size || "m";
+  const sizeStyles = theme.sizing.contextMenu(size);
+  return /* @__PURE__ */ jsx13(
+    Box,
+    {
+      role: "separator",
+      marginVertical: sizeStyles.paddingVertical,
+      marginHorizontal: sizeStyles.itemPaddingHorizontal,
+      height: 1,
+      backgroundColor: theme.colors.border.secondary,
+      "data-testid": testId
+    }
+  );
+};
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+// src/ContextMenuSearch.tsx
+import React9, { forwardRef as forwardRef8, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useDesignSystem as useDesignSystem6 } from "@xsolla/xui-core";
+
+// ../icons-base/dist/web/index.mjs
+import styled8 from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx322 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx422 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx522 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx622 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx722 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx822 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx922 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx1022 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx1122 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
+var StyledIcon2 = styled8.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  color: ${(props) => props.$color};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var BaseIcon = ({
+  variant = "line",
+  size = 24,
+  color = "currentColor",
+  solidContent: solidContent114,
+  lineContent: lineContent114,
+  className,
+  style,
+  "data-testid": testId,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden
+}) => {
+  const svgContent = variant === "line" ? lineContent114 : solidContent114;
+  return /* @__PURE__ */ jsx14(
+    StyledIcon2,
+    {
+      $size: size,
+      $color: color,
+      className,
+      style,
+      "data-testid": testId,
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
+      dangerouslySetInnerHTML: { __html: svgContent }
+    }
+  );
+};
+var solidContent100 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var lineContent100 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var Search = (props) => /* @__PURE__ */ jsx101(BaseIcon, { ...props, solidContent: solidContent100, lineContent: lineContent100 });
+
+// src/ContextMenuSearch.tsx
+import { Divider } from "@xsolla/xui-divider";
+import { jsx as jsx115, jsxs as jsxs5 } from "react/jsx-runtime";
+var ContextMenuSearch = forwardRef8(
+  ({
+    value,
+    onChange,
+    onValueChange,
+    placeholder = "Search",
+    autoFocus = true,
+    size: propSize,
+    "data-testid": testId = "context-menu-search"
+  }, ref) => {
+    const { theme } = useDesignSystem6();
+    const context = useContextMenu();
+    const size = propSize || context?.size || "m";
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const inputRef = useRef4(null);
+    const inputColors = theme.colors.control.input;
+    React9.useImperativeHandle(
+      ref,
+      () => inputRef.current,
+      []
+    );
+    useEffect4(() => {
+      if (autoFocus && inputRef.current) {
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 0);
+      }
+    }, [autoFocus]);
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        context?.closeMenu();
+      }
+    };
+    return /* @__PURE__ */ jsxs5(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.searchGap,
+        paddingHorizontal: sizeStyles.searchPaddingHorizontal,
+        paddingVertical: sizeStyles.searchPaddingVertical,
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsxs5(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsx115(
+              Icon,
+              {
+                size: sizeStyles.searchIconSize,
+                color: inputColors.placeholder,
+                children: /* @__PURE__ */ jsx115(Search, {})
+              }
+            ),
+            /* @__PURE__ */ jsx115(Box, { flex: 1, children: /* @__PURE__ */ jsx115(
+              InputPrimitive,
+              {
+                ref: inputRef,
+                value,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                fontSize: sizeStyles.searchFontSize,
+                color: inputColors.text,
+                placeholderTextColor: inputColors.placeholder,
+                "aria-label": placeholder,
+                "data-testid": `${testId}__input`,
+                style: {
+                  lineHeight: `${sizeStyles.searchLineHeight}px`
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx115(Divider, {})
+        ]
+      }
+    );
+  }
+);
+ContextMenuSearch.displayName = "ContextMenuSearch";
+
+// src/ContextMenu.tsx
+import { jsx as jsx116, jsxs as jsxs6 } from "react/jsx-runtime";
+var ContextMenuRoot = forwardRef9(
+  ({
+    children,
+    list,
+    groups,
+    size = "m",
+    isOpen: propIsOpen,
+    onOpenChange,
+    position,
+    trigger,
+    width,
+    maxHeight = 300,
+    onSelect,
+    onCheckedChange,
+    closeOnSelect = true,
+    isLoading,
+    "aria-label": ariaLabel,
+    "data-testid": testId = "context-menu"
+  }, ref) => {
+    const { theme } = useDesignSystem7();
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const containerRef = useRef5(null);
+    const menuRef = useRef5(null);
+    const itemsRef = useRef5([]);
+    const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
+    const sizeStyles = theme.sizing.contextMenu(size);
+    const closeMenu = useCallback(() => {
+      if (propIsOpen === void 0) {
+        setInternalIsOpen(false);
+      }
+      onOpenChange?.(false);
+      setActiveIndex(-1);
+    }, [propIsOpen, onOpenChange]);
+    const toggleMenu = useCallback(() => {
+      const nextOpen = !isOpen;
+      if (propIsOpen === void 0) {
+        setInternalIsOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        setActiveIndex(-1);
+      }
+    }, [isOpen, propIsOpen, onOpenChange]);
+    useEffect5(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          closeMenu();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [isOpen, closeMenu]);
+    useEffect5(() => {
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          closeMenu();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("keydown", handleEscape);
+      }
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [isOpen, closeMenu]);
+    useEffect5(() => {
+      if (isOpen && menuRef.current) {
+        menuRef.current.focus();
+      }
+    }, [isOpen]);
+    useEffect5(() => {
+      if (!isOpen) {
+        itemsRef.current = [];
+      }
+    }, [isOpen]);
+    const registerItem = useCallback((id) => {
+      const index = itemsRef.current.indexOf(id);
+      if (index === -1) {
+        itemsRef.current.push(id);
+        return itemsRef.current.length - 1;
+      }
+      return index;
+    }, []);
+    const unregisterItem = useCallback((id) => {
+      const index = itemsRef.current.indexOf(id);
+      if (index !== -1) {
+        itemsRef.current.splice(index, 1);
+      }
+    }, []);
+    const onItemSelect = useCallback(
+      (item) => {
+        onSelect?.(item);
+        if (item.variant === "checkbox") {
+          onCheckedChange?.(item.id, !item.checked);
+        } else if (item.variant === "radio") {
+          onCheckedChange?.(item.id, true);
+          if (closeOnSelect) {
+            closeMenu();
+          }
+        } else if (closeOnSelect) {
+          closeMenu();
+        }
+      },
+      [onSelect, onCheckedChange, closeOnSelect, closeMenu]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        const itemCount = itemsRef.current.length;
+        if (itemCount === 0) return;
+        switch (event.key) {
+          case "ArrowDown":
+            event.preventDefault();
+            setActiveIndex((prev) => prev < itemCount - 1 ? prev + 1 : 0);
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            setActiveIndex((prev) => prev > 0 ? prev - 1 : itemCount - 1);
+            break;
+          case "Home":
+            event.preventDefault();
+            setActiveIndex(0);
+            break;
+          case "End":
+            event.preventDefault();
+            setActiveIndex(itemCount - 1);
+            break;
+          case "Enter":
+          case " ":
+            event.preventDefault();
+            break;
+          case "Tab":
+            closeMenu();
+            break;
+        }
+      },
+      [closeMenu]
+    );
+    const contextValue = useMemo(
+      () => ({
+        size,
+        closeMenu,
+        onItemSelect,
+        activeIndex,
+        setActiveIndex,
+        registerItem,
+        unregisterItem
+      }),
+      [size, closeMenu, onItemSelect, activeIndex, registerItem, unregisterItem]
+    );
+    const getPositionStyles = () => {
+      if (position) {
+        return {
+          position: "fixed",
+          left: position.x,
+          top: position.y
+        };
+      }
+      return {
+        position: "absolute",
+        top: "100%",
+        left: 0,
+        marginTop: 4
+      };
+    };
+    const renderItems = (itemsData) => {
+      return itemsData.map((item, index) => {
+        const commonProps = {
+          key: item.id || index,
+          disabled: item.disabled,
+          description: item.description,
+          "data-testid": `context-menu-item-${item.id || index}`
+        };
+        if (item.variant === "checkbox") {
+          return /* @__PURE__ */ jsx116(
+            ContextMenuCheckboxItem,
+            {
+              ...commonProps,
+              checked: item.checked,
+              onCheckedChange: (checked) => onCheckedChange?.(item.id, checked),
+              onPress: item.onPress,
+              children: item.label
+            }
+          );
+        }
+        if (item.variant === "radio") {
+          return /* @__PURE__ */ jsx116(
+            ContextMenuRadioItem,
+            {
+              ...commonProps,
+              value: item.id,
+              onPress: item.onPress,
+              children: item.label
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx116(
+          ContextMenuItem,
+          {
+            ...commonProps,
+            icon: item.icon,
+            selected: item.selected,
+            shortcut: item.trailing?.type === "shortcut" ? item.trailing.content : void 0,
+            trailing: item.trailing?.type !== "shortcut" && item.trailing?.type !== "none" ? item.trailing?.content : void 0,
+            hasSubmenu: item.children && item.children.length > 0,
+            onPress: item.onPress,
+            active: activeIndex === index,
+            children: item.label
+          }
+        );
+      });
+    };
+    const renderGroups = (groupsData) => {
+      return groupsData.map((group, groupIndex) => /* @__PURE__ */ jsxs6(React10.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ jsx116(ContextMenuSeparator, {}),
+        /* @__PURE__ */ jsx116(
+          ContextMenuGroup,
+          {
+            label: group.label,
+            description: group.description,
+            "data-testid": `context-menu-group-${group.id || groupIndex}`,
+            children: renderItems(group.items)
+          }
+        )
+      ] }, group.id || groupIndex));
+    };
+    const renderContent = () => {
+      if (isLoading) {
+        const brandColor = theme.colors.control.brand.primary.bg;
+        return /* @__PURE__ */ jsx116(
+          Box,
+          {
+            padding: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 60,
+            children: /* @__PURE__ */ jsx116(Spinner2, { size: "m", color: brandColor })
+          }
+        );
+      }
+      if (children) {
+        return children;
+      }
+      if (groups && groups.length > 0) {
+        return renderGroups(groups);
+      }
+      if (list && list.length > 0) {
+        return renderItems(list);
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsx116(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: position ? "static" : "relative",
+          width: trigger ? "fit-content" : void 0,
+          display: "inline-block"
+        },
+        "data-testid": testId,
+        children: [
+          trigger && /* @__PURE__ */ jsx116(
+            "div",
+            {
+              onClick: toggleMenu,
+              style: { cursor: "pointer" },
+              "data-testid": `${testId}-trigger`,
+              children: trigger
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx116(
+            Box,
+            {
+              ref: (node) => {
+                menuRef.current = node;
+                if (typeof ref === "function") {
+                  ref(node);
+                } else if (ref) {
+                  ref.current = node;
+                }
+              },
+              role: "menu",
+              "aria-label": ariaLabel,
+              backgroundColor: theme.colors.background.secondary,
+              borderColor: theme.colors.border.secondary,
+              borderWidth: 1,
+              borderRadius: theme.radius.button,
+              paddingVertical: sizeStyles.paddingVertical,
+              width,
+              minWidth: sizeStyles.minWidth,
+              style: {
+                ...getPositionStyles(),
+                zIndex: 1e3,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                maxHeight,
+                overflowY: "auto",
+                outline: "none"
+              },
+              tabIndex: -1,
+              onKeyDown: handleKeyDown,
+              "data-testid": `${testId}-content`,
+              children: renderContent()
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+ContextMenuRoot.displayName = "ContextMenu";
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  RadioGroup: ContextMenuRadioGroup,
+  RadioItem: ContextMenuRadioItem,
+  Group: ContextMenuGroup,
+  Separator: ContextMenuSeparator,
+  Search: ContextMenuSearch
+});
+
+// src/hooks/useContextMenuPosition.ts
+import { useState as useState2, useEffect as useEffect6 } from "react";
+var useContextMenuPosition = ({
+  position,
+  menuRef,
+  isOpen,
+  offset = 8
+}) => {
+  const [adjustedPosition, setAdjustedPosition] = useState2();
+  useEffect6(() => {
+    if (!isOpen || !position || !menuRef.current) {
+      setAdjustedPosition(void 0);
+      return;
+    }
+    const rafId = requestAnimationFrame(() => {
+      const menu = menuRef.current;
+      if (!menu) return;
+      const rect = menu.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let { x, y } = position;
+      let transformOriginX = "left";
+      let transformOriginY = "top";
+      if (x + rect.width > viewportWidth - offset) {
+        x = Math.max(offset, viewportWidth - rect.width - offset);
+        transformOriginX = "right";
+      }
+      if (x < offset) {
+        x = offset;
+        transformOriginX = "left";
+      }
+      if (y + rect.height > viewportHeight - offset) {
+        const aboveY = position.y - rect.height;
+        if (aboveY >= offset) {
+          y = aboveY;
+          transformOriginY = "bottom";
+        } else {
+          y = Math.max(offset, viewportHeight - rect.height - offset);
+          transformOriginY = "bottom";
+        }
+      }
+      if (y < offset) {
+        y = offset;
+        transformOriginY = "top";
+      }
+      setAdjustedPosition({
+        x,
+        y,
+        transformOrigin: `${transformOriginY} ${transformOriginX}`
+      });
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [isOpen, position, menuRef, offset]);
+  return adjustedPosition;
+};
+
+// src/hooks/useKeyboardNavigation.ts
+import { useCallback as useCallback2, useRef as useRef6, useEffect as useEffect7 } from "react";
+var useKeyboardNavigation = ({
+  isOpen,
+  itemCount,
+  activeIndex,
+  setActiveIndex,
+  onSelect,
+  onClose,
+  loop = true
+}) => {
+  const typeaheadBuffer = useRef6("");
+  const typeaheadTimeout = useRef6(null);
+  useEffect7(() => {
+    if (!isOpen) {
+      typeaheadBuffer.current = "";
+      if (typeaheadTimeout.current) {
+        clearTimeout(typeaheadTimeout.current);
+      }
+    }
+  }, [isOpen]);
+  const handleKeyDown = useCallback2(
+    (event) => {
+      if (!isOpen || itemCount === 0) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          if (loop) {
+            setActiveIndex(activeIndex < itemCount - 1 ? activeIndex + 1 : 0);
+          } else {
+            setActiveIndex(Math.min(activeIndex + 1, itemCount - 1));
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (loop) {
+            setActiveIndex(activeIndex > 0 ? activeIndex - 1 : itemCount - 1);
+          } else {
+            setActiveIndex(Math.max(activeIndex - 1, 0));
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          setActiveIndex(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setActiveIndex(itemCount - 1);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (activeIndex >= 0 && activeIndex < itemCount) {
+            onSelect(activeIndex);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          onClose();
+          break;
+        case "Tab":
+          onClose();
+          break;
+        default:
+          if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+            typeaheadBuffer.current += event.key.toLowerCase();
+            if (typeaheadTimeout.current) {
+              clearTimeout(typeaheadTimeout.current);
+            }
+            typeaheadTimeout.current = setTimeout(() => {
+              typeaheadBuffer.current = "";
+            }, 500);
+          }
+          break;
+      }
+    },
+    [isOpen, itemCount, activeIndex, setActiveIndex, onSelect, onClose, loop]
+  );
+  return { handleKeyDown };
+};
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSearch,
+  ContextMenuSeparator,
+  useContextMenu,
+  useContextMenuPosition,
+  useContextMenuRequired,
+  useKeyboardNavigation,
+  useRadioGroup
+};
+//# sourceMappingURL=index.mjs.map