@xsolla/xui-context-menu 0.89.0 → 0.91.0

package/native/index.js

@@ -47,7 +47,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ContextMenu.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -250,41 +250,10 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
 };
 
-// ../primitives-native/src/Spinner.tsx
-var import_react_native3 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Spinner = ({
-  color,
-  size,
-  role,
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive,
-  testID
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_native3.View,
-    {
-      accessible: true,
-      accessibilityRole: role === "status" ? "none" : void 0,
-      accessibilityLabel: ariaLabel,
-      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
-      testID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native3.ActivityIndicator,
-        {
-          color,
-          size: typeof size === "number" ? size : "small"
-        }
-      )
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
 // ../primitives-native/src/Icon.tsx
 var import_react = __toESM(require("react"));
-var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Icon = ({ children, color, size }) => {
   const style = {
     width: typeof size === "number" ? size : void 0,
@@ -302,17 +271,13 @@ var Icon = ({ children, color, size }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, children: childrenWithProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
 };
 
-// ../primitives-native/src/Divider.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-
 // ../primitives-native/src/Input.tsx
 var import_react2 = require("react");
-var import_react_native6 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var keyboardTypeMap = {
   text: "default",
   number: "numeric",
@@ -385,8 +350,8 @@ var InputPrimitive = (0, import_react2.forwardRef)(
     };
     const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
     const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.TextInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.TextInput,
       {
         ref,
         value,
@@ -432,109 +397,19 @@ var InputPrimitive = (0, import_react2.forwardRef)(
 );
 InputPrimitive.displayName = "InputPrimitive";
 
-// ../primitives-native/src/TextArea.tsx
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        multiline: true,
-        numberOfLines: rows || 4,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlignVertical: "top",
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
-
 // src/ContextMenu.tsx
 var import_xui_core7 = require("@xsolla/xui-core");
 var import_xui_spinner = require("@xsolla/xui-spinner");
 
 // src/ContextMenuContext.tsx
-var import_react4 = require("react");
-var ContextMenuContext = (0, import_react4.createContext)(void 0);
+var import_react3 = require("react");
+var ContextMenuContext = (0, import_react3.createContext)(void 0);
 var useContextMenu = () => {
-  const context = (0, import_react4.useContext)(ContextMenuContext);
+  const context = (0, import_react3.useContext)(ContextMenuContext);
   return context;
 };
 var useContextMenuRequired = () => {
-  const context = (0, import_react4.useContext)(ContextMenuContext);
+  const context = (0, import_react3.useContext)(ContextMenuContext);
   if (!context) {
     throw new Error(
       "useContextMenuRequired must be used within a ContextMenu component"
@@ -544,11 +419,11 @@ var useContextMenuRequired = () => {
 };
 
 // src/ContextMenuItem.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_xui_core = require("@xsolla/xui-core");
 var import_xui_icons = require("@xsolla/xui-icons");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ContextMenuItem = (0, import_react5.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ContextMenuItem = (0, import_react4.forwardRef)(
   ({
     children,
     description,
@@ -567,10 +442,10 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const itemRef = (0, import_react5.useRef)(null);
+    const itemRef = (0, import_react4.useRef)(null);
     const brandColors = theme.colors.control.brand.primary;
     const contentColors = theme.colors.content;
-    (0, import_react5.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       if (context && !disabled) {
         const id = typeof children === "string" ? children : String(Math.random());
         context.registerItem(id);
@@ -623,7 +498,7 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
       }
       return theme.colors.content.secondary;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       Box,
       {
         ref: ref || itemRef,
@@ -652,18 +527,18 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
         },
         "data-testid": testId,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Box,
             {
               width: sizeStyles.iconSize,
               marginTop: description ? 2 : 0,
               alignItems: "center",
               justifyContent: "center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: getIconColor(), children: icon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: getIconColor(), children: icon })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Text,
               {
                 color: getTextColor(),
@@ -673,7 +548,7 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
                 children
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Text,
               {
                 color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
@@ -683,7 +558,7 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
               }
             )
           ] }),
-          shortcut && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Text,
             {
               color: selected ? contentColors.on.brand : theme.colors.content.tertiary,
@@ -692,12 +567,12 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
             }
           ),
           trailing,
-          hasSubmenu && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          hasSubmenu && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Icon,
             {
               size: sizeStyles.iconSize - 4,
               color: selected ? contentColors.on.brand : theme.colors.content.secondary,
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_xui_icons.ArrowRight, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_xui_icons.ArrowRight, {})
             }
           )
         ]
@@ -708,10 +583,10 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
 ContextMenuItem.displayName = "ContextMenuItem";
 
 // src/ContextMenuCheckboxItem.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_xui_icons2 = require("@xsolla/xui-icons");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var checkboxSizeMap = {
   sm: 14,
   md: 16,
@@ -752,7 +627,7 @@ var CheckboxIndicator = ({
     }
     return faintColors.border;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Box,
     {
       width: boxSize,
@@ -763,25 +638,25 @@ var CheckboxIndicator = ({
       backgroundColor: getBgColor(),
       alignItems: "center",
       justifyContent: "center",
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Icon,
         {
           size: iconSize,
           color: disabled ? contentColors.tertiary : contentColors.on.brand,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.Minus, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons2.Minus, {})
         }
-      ) : checked ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ) : checked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Icon,
         {
           size: iconSize,
           color: disabled ? contentColors.tertiary : contentColors.on.brand,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.Check, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons2.Check, {})
         }
       ) : null
     }
   );
 };
-var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
+var ContextMenuCheckboxItem = (0, import_react5.forwardRef)(
   ({
     children,
     description,
@@ -799,8 +674,8 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const itemRef = (0, import_react6.useRef)(null);
-    (0, import_react6.useEffect)(() => {
+    const itemRef = (0, import_react5.useRef)(null);
+    (0, import_react5.useEffect)(() => {
       if (context && !disabled) {
         const id = typeof children === "string" ? children : String(Math.random());
         context.registerItem(id);
@@ -834,7 +709,7 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
       }
       return theme.colors.control.input.text;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Box,
       {
         ref: ref || itemRef,
@@ -863,13 +738,13 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
         },
         "data-testid": testId,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Box,
             {
               marginTop: description ? 2 : 0,
               alignItems: "center",
               justifyContent: "center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 CheckboxIndicator,
                 {
                   checked,
@@ -880,9 +755,9 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
               )
             }
           ),
-          leadingContent && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { padding: 5, alignItems: "center", justifyContent: "center", children: leadingContent }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          leadingContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { padding: 5, alignItems: "center", justifyContent: "center", children: leadingContent }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Text,
               {
                 color: getTextColor(),
@@ -892,7 +767,7 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
                 children
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Text,
               {
                 color: theme.colors.content.tertiary,
@@ -911,26 +786,26 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
 ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
 
 // src/ContextMenuRadioGroup.tsx
-var import_react7 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react7.createContext)(null);
-var useRadioGroup = () => (0, import_react7.useContext)(RadioGroupContext);
-var ContextMenuRadioGroup = (0, import_react7.forwardRef)(
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react6.createContext)(null);
+var useRadioGroup = () => (0, import_react6.useContext)(RadioGroupContext);
+var ContextMenuRadioGroup = (0, import_react6.forwardRef)(
   ({
     children,
     value,
     onValueChange,
     "data-testid": testId = "context-menu-radio-group"
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadioGroupContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { ref, role: "group", flexDirection: "column", "data-testid": testId, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioGroupContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { ref, role: "group", flexDirection: "column", "data-testid": testId, children }) });
   }
 );
 ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
 
 // src/ContextMenuRadioItem.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var radioSizeMap = {
   sm: 14,
   md: 16,
@@ -969,7 +844,7 @@ var RadioIndicator = ({
     }
     return faintColors.border;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Box,
     {
       width: outerSize,
@@ -980,7 +855,7 @@ var RadioIndicator = ({
       backgroundColor: getBgColor(),
       alignItems: "center",
       justifyContent: "center",
-      children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Box,
         {
           width: dotSize,
@@ -992,7 +867,7 @@ var RadioIndicator = ({
     }
   );
 };
-var ContextMenuRadioItem = (0, import_react8.forwardRef)(
+var ContextMenuRadioItem = (0, import_react7.forwardRef)(
   ({
     children,
     description,
@@ -1007,9 +882,9 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
     const radioGroup = useRadioGroup();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const itemRef = (0, import_react8.useRef)(null);
+    const itemRef = (0, import_react7.useRef)(null);
     const checked = radioGroup?.value === value;
-    (0, import_react8.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (context && !disabled) {
         const id = typeof children === "string" ? children : String(Math.random());
         context.registerItem(id);
@@ -1042,7 +917,7 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
       }
       return theme.colors.control.input.text;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       Box,
       {
         ref: ref || itemRef,
@@ -1071,17 +946,17 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
         },
         "data-testid": testId,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Box,
             {
               marginTop: description ? 2 : 0,
               alignItems: "center",
               justifyContent: "center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadioIndicator, { checked, size, disabled })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioIndicator, { checked, size, disabled })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Text,
               {
                 color: getTextColor(),
@@ -1091,7 +966,7 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
                 children
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Text,
               {
                 color: theme.colors.content.tertiary,
@@ -1109,10 +984,10 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
 // src/ContextMenuGroup.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_xui_core4 = require("@xsolla/xui-core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ContextMenuGroup = (0, import_react9.forwardRef)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ContextMenuGroup = (0, import_react8.forwardRef)(
   ({
     label,
     description,
@@ -1124,14 +999,14 @@ var ContextMenuGroup = (0, import_react9.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { ref, role: "group", "aria-label": label, "data-testid": testId, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { ref, role: "group", "aria-label": label, "data-testid": testId, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         Box,
         {
           paddingHorizontal: sizeStyles.itemPaddingHorizontal,
           paddingVertical: sizeStyles.itemPaddingVertical,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Text,
               {
                 color: theme.colors.content.secondary,
@@ -1141,7 +1016,7 @@ var ContextMenuGroup = (0, import_react9.forwardRef)(
                 children: label
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Text,
               {
                 color: theme.colors.content.tertiary,
@@ -1161,7 +1036,7 @@ ContextMenuGroup.displayName = "ContextMenuGroup";
 
 // src/ContextMenuSeparator.tsx
 var import_xui_core5 = require("@xsolla/xui-core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ContextMenuSeparator = ({
   size: propSize,
   "data-testid": testId = "context-menu-separator"
@@ -1170,7 +1045,7 @@ var ContextMenuSeparator = ({
   const context = useContextMenu();
   const size = propSize || context?.size || "md";
   const sizeStyles = theme.sizing.contextMenu(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Box,
     {
       role: "separator",
@@ -1185,11 +1060,14 @@ var ContextMenuSeparator = ({
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 
 // src/ContextMenuSearch.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_xui_core6 = require("@xsolla/xui-core");
 
 // ../icons-base/dist/web/index.mjs
 var import_styled_components = __toESM(require("styled-components"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -1568,9 +1446,6 @@ var import_jsx_runtime388 = require("react/jsx-runtime");
 var import_jsx_runtime389 = require("react/jsx-runtime");
 var import_jsx_runtime390 = require("react/jsx-runtime");
 var import_jsx_runtime391 = require("react/jsx-runtime");
-var import_jsx_runtime392 = require("react/jsx-runtime");
-var import_jsx_runtime393 = require("react/jsx-runtime");
-var import_jsx_runtime394 = require("react/jsx-runtime");
 var StyledIcon = import_styled_components.default.div`
   display: inline-flex;
   align-items: center;
@@ -1598,7 +1473,7 @@ var BaseIcon = ({
 }) => {
   const svgContent = variant === "line" ? lineContent381 : solidContent381;
   const sizeValue = typeof size === "number" ? `${size}px` : size;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     StyledIcon,
     {
       $size: sizeValue,
@@ -1615,12 +1490,12 @@ var BaseIcon = ({
 };
 var solidContent367 = `<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 lineContent367 = `<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__ */ (0, import_jsx_runtime381.jsx)(BaseIcon, { ...props, solidContent: solidContent367, lineContent: lineContent367 });
+var Search = (props) => /* @__PURE__ */ (0, import_jsx_runtime378.jsx)(BaseIcon, { ...props, solidContent: solidContent367, lineContent: lineContent367 });
 
 // src/ContextMenuSearch.tsx
 var import_xui_divider = require("@xsolla/xui-divider");
-var import_jsx_runtime395 = require("react/jsx-runtime");
-var ContextMenuSearch = (0, import_react10.forwardRef)(
+var import_jsx_runtime392 = require("react/jsx-runtime");
+var ContextMenuSearch = (0, import_react9.forwardRef)(
   ({
     value,
     onChange,
@@ -1634,14 +1509,14 @@ var ContextMenuSearch = (0, import_react10.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const inputRef = (0, import_react10.useRef)(null);
+    const inputRef = (0, import_react9.useRef)(null);
     const inputColors = theme.colors.control.input;
-    import_react10.default.useImperativeHandle(
+    import_react9.default.useImperativeHandle(
       ref,
       () => inputRef.current,
       []
     );
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (autoFocus && inputRef.current) {
         setTimeout(() => {
           inputRef.current?.focus();
@@ -1658,7 +1533,7 @@ var ContextMenuSearch = (0, import_react10.forwardRef)(
         context?.closeMenu();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime392.jsxs)(
       Box,
       {
         flexDirection: "column",
@@ -1667,16 +1542,16 @@ var ContextMenuSearch = (0, import_react10.forwardRef)(
         paddingVertical: sizeStyles.searchPaddingVertical,
         "data-testid": testId,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime392.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
               Icon,
               {
                 size: sizeStyles.searchIconSize,
                 color: inputColors.placeholder,
-                children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Search, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Search, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
               InputPrimitive,
               {
                 ref: inputRef,
@@ -1695,7 +1570,7 @@ var ContextMenuSearch = (0, import_react10.forwardRef)(
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(import_xui_divider.Divider, {})
+          /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(import_xui_divider.Divider, {})
         ]
       }
     );
@@ -1704,8 +1579,8 @@ var ContextMenuSearch = (0, import_react10.forwardRef)(
 ContextMenuSearch.displayName = "ContextMenuSearch";
 
 // src/ContextMenu.tsx
-var import_jsx_runtime396 = require("react/jsx-runtime");
-var ContextMenuRoot = (0, import_react11.forwardRef)(
+var import_jsx_runtime393 = require("react/jsx-runtime");
+var ContextMenuRoot = (0, import_react10.forwardRef)(
   ({
     children,
     list,
@@ -1725,21 +1600,21 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
     "data-testid": testId = "context-menu"
   }, ref) => {
     const { theme } = (0, import_xui_core7.useDesignSystem)();
-    const [internalIsOpen, setInternalIsOpen] = (0, import_react11.useState)(false);
-    const [activeIndex, setActiveIndex] = (0, import_react11.useState)(-1);
-    const containerRef = (0, import_react11.useRef)(null);
-    const menuRef = (0, import_react11.useRef)(null);
-    const itemsRef = (0, import_react11.useRef)([]);
+    const [internalIsOpen, setInternalIsOpen] = (0, import_react10.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
+    const containerRef = (0, import_react10.useRef)(null);
+    const menuRef = (0, import_react10.useRef)(null);
+    const itemsRef = (0, import_react10.useRef)([]);
     const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
     const sizeStyles = theme.sizing.contextMenu(size);
-    const closeMenu = (0, import_react11.useCallback)(() => {
+    const closeMenu = (0, import_react10.useCallback)(() => {
       if (propIsOpen === void 0) {
         setInternalIsOpen(false);
       }
       onOpenChange?.(false);
       setActiveIndex(-1);
     }, [propIsOpen, onOpenChange]);
-    const toggleMenu = (0, import_react11.useCallback)(() => {
+    const toggleMenu = (0, import_react10.useCallback)(() => {
       const nextOpen = !isOpen;
       if (propIsOpen === void 0) {
         setInternalIsOpen(nextOpen);
@@ -1749,7 +1624,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         setActiveIndex(-1);
       }
     }, [isOpen, propIsOpen, onOpenChange]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
           closeMenu();
@@ -1762,7 +1637,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [isOpen, closeMenu]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       const handleEscape = (event) => {
         if (event.key === "Escape") {
           closeMenu();
@@ -1775,17 +1650,17 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         document.removeEventListener("keydown", handleEscape);
       };
     }, [isOpen, closeMenu]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (isOpen && menuRef.current) {
         menuRef.current.focus();
       }
     }, [isOpen]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (!isOpen) {
         itemsRef.current = [];
       }
     }, [isOpen]);
-    const registerItem = (0, import_react11.useCallback)((id) => {
+    const registerItem = (0, import_react10.useCallback)((id) => {
       const index = itemsRef.current.indexOf(id);
       if (index === -1) {
         itemsRef.current.push(id);
@@ -1793,13 +1668,13 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       }
       return index;
     }, []);
-    const unregisterItem = (0, import_react11.useCallback)((id) => {
+    const unregisterItem = (0, import_react10.useCallback)((id) => {
       const index = itemsRef.current.indexOf(id);
       if (index !== -1) {
         itemsRef.current.splice(index, 1);
       }
     }, []);
-    const onItemSelect = (0, import_react11.useCallback)(
+    const onItemSelect = (0, import_react10.useCallback)(
       (item) => {
         onSelect?.(item);
         if (item.variant === "checkbox") {
@@ -1815,7 +1690,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       },
       [onSelect, onCheckedChange, closeOnSelect, closeMenu]
     );
-    const handleKeyDown = (0, import_react11.useCallback)(
+    const handleKeyDown = (0, import_react10.useCallback)(
       (event) => {
         const itemCount = itemsRef.current.length;
         if (itemCount === 0) return;
@@ -1847,7 +1722,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       },
       [closeMenu]
     );
-    const contextValue = (0, import_react11.useMemo)(
+    const contextValue = (0, import_react10.useMemo)(
       () => ({
         size,
         closeMenu,
@@ -1883,7 +1758,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
           "data-testid": `context-menu-item-${item.id || index}`
         };
         if (item.variant === "checkbox") {
-          return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
             ContextMenuCheckboxItem,
             {
               ...commonProps,
@@ -1896,7 +1771,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
           );
         }
         if (item.variant === "radio") {
-          return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
             ContextMenuRadioItem,
             {
               ...commonProps,
@@ -1907,7 +1782,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
             itemKey
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
           ContextMenuItem,
           {
             ...commonProps,
@@ -1925,9 +1800,9 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       });
     };
     const renderGroups = (groupsData) => {
-      return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(import_react11.default.Fragment, { children: [
-        groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(ContextMenuSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+      return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(import_react10.default.Fragment, { children: [
+        groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(ContextMenuSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
           ContextMenuGroup,
           {
             label: group.label,
@@ -1941,14 +1816,14 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
     const renderContent = () => {
       if (isLoading) {
         const brandColor = theme.colors.control.brand.primary.bg;
-        return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
           Box,
           {
             padding: 16,
             alignItems: "center",
             justifyContent: "center",
             minHeight: 60,
-            children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(import_xui_spinner.Spinner, { size: "md", color: brandColor })
+            children: /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(import_xui_spinner.Spinner, { size: "md", color: brandColor })
           }
         );
       }
@@ -1963,7 +1838,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       }
       return null;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -1974,7 +1849,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         },
         "data-testid": testId,
         children: [
-          trigger && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+          trigger && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
             "div",
             {
               onClick: toggleMenu,
@@ -1983,7 +1858,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
               children: trigger
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
             Box,
             {
               ref: (node) => {
@@ -2034,15 +1909,15 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
 });
 
 // src/hooks/useContextMenuPosition.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 var useContextMenuPosition = ({
   position,
   menuRef,
   isOpen,
   offset = 8
 }) => {
-  const [adjustedPosition, setAdjustedPosition] = (0, import_react12.useState)();
-  (0, import_react12.useEffect)(() => {
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react11.useState)();
+  (0, import_react11.useEffect)(() => {
     if (!isOpen || !position || !menuRef.current) {
       setAdjustedPosition(void 0);
       return;
@@ -2090,7 +1965,7 @@ var useContextMenuPosition = ({
 };
 
 // src/hooks/useKeyboardNavigation.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 var useKeyboardNavigation = ({
   isOpen,
   itemCount,
@@ -2100,9 +1975,9 @@ var useKeyboardNavigation = ({
   onClose,
   loop = true
 }) => {
-  const typeaheadBuffer = (0, import_react13.useRef)("");
-  const typeaheadTimeout = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const typeaheadBuffer = (0, import_react12.useRef)("");
+  const typeaheadTimeout = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isOpen) {
       typeaheadBuffer.current = "";
       if (typeaheadTimeout.current) {
@@ -2110,7 +1985,7 @@ var useKeyboardNavigation = ({
       }
     }
   }, [isOpen]);
-  const handleKeyDown = (0, import_react13.useCallback)(
+  const handleKeyDown = (0, import_react12.useCallback)(
     (event) => {
       if (!isOpen || itemCount === 0) return;
       switch (event.key) {