@provex/components 1.2.3

package/dist/index.js

@@ -0,0 +1,1223 @@
+import React, { forwardRef, useRef, useCallback, useEffect, useState, useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getCurrencyByContractId } from '@provex/utils/currencies';
+import { Icon } from '@iconify/react';
+
+// src/Card.tsx
+function Card(props) {
+  const { children, bg, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      bg: bg ?? "surface.card",
+      color: "text.primary",
+      boxShadow: "0 0 0 1px var(--chakra-colors-border-default)",
+      minW: 0,
+      mb: "1px",
+      ...rest,
+      children
+    }
+  );
+}
+function CardHorizontalRule(props) {
+  const { children, bg, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      bg: bg ?? "surface.card",
+      color: "text.primary",
+      borderTop: "1px solid",
+      borderBottom: "1px solid",
+      borderColor: "border.default",
+      minW: 0,
+      ...rest,
+      children
+    }
+  );
+}
+var CurrencyIcon = ({
+  currencyId,
+  size = 16,
+  useZoom = true
+}) => {
+  let currency = null;
+  try {
+    currency = getCurrencyByContractId(currencyId);
+  } catch (err) {
+    console.warn("Invalid currency ID:", currencyId, err);
+  }
+  if (!currency) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: size * 0.75,
+          fontWeight: 600,
+          color: "#888",
+          fontFamily: "monospace"
+        },
+        title: `Unknown currency: ${currencyId}`,
+        children: "?"
+      }
+    );
+  }
+  const zoom = useZoom ? currency.zoom ?? 1.5 : 1;
+  const objectFit = "cover";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: size,
+        height: size,
+        overflow: "hidden",
+        borderRadius: "100%"
+      },
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: currency.flag,
+          alt: currency.ticker,
+          title: `${currency.name} (${currency.ticker})`,
+          style: {
+            width: size,
+            height: size,
+            objectFit,
+            transform: `scale(${zoom})`,
+            transformOrigin: "center center"
+          }
+        }
+      )
+    }
+  );
+};
+function OverlappingStack({
+  items,
+  limit = 3,
+  overlap = 8,
+  itemSize = 24,
+  reverseZIndex = false
+}) {
+  const visibleItems = items.slice(0, limit);
+  const remainingCount = items.length - limit;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center"
+      },
+      children: [
+        visibleItems.map((item, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginLeft: index > 0 ? -overlap : 0,
+              // Only apply z-index when there's actual overlap (positive overlap value)
+              ...overlap > 0 ? { position: "relative", zIndex: reverseZIndex ? index + 1 : limit - index } : {},
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: itemSize,
+              minHeight: itemSize
+            },
+            children: item
+          },
+          index
+        )),
+        remainingCount > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              marginLeft: 4,
+              fontWeight: 600,
+              opacity: 0.7
+            },
+            children: [
+              "+",
+              remainingCount
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DepositIdentifier({
+  chainIcon,
+  localId,
+  itemSize = 20,
+  gap = 2,
+  textColor
+}) {
+  const idString = typeof localId === "bigint" ? localId.toString() : String(localId);
+  return /* @__PURE__ */ jsx(
+    OverlappingStack,
+    {
+      items: [
+        /* @__PURE__ */ jsx(React.Fragment, { children: chainIcon }, "chain"),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: "14px",
+              fontWeight: 500,
+              color: textColor
+            },
+            children: [
+              "#",
+              idString
+            ]
+          },
+          "id"
+        )
+      ],
+      overlap: -gap,
+      itemSize,
+      limit: 2
+    }
+  );
+}
+var FlagIcon = ({
+  flag,
+  alt = "Flag",
+  size = 32,
+  className = "",
+  borderColor = "#e5e7eb"
+}) => {
+  const handleError = (e) => {
+    const target = e.target;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      canvas.width = size;
+      canvas.height = size;
+      ctx.fillStyle = "#e0e0e0";
+      ctx.fillRect(0, 0, size, size);
+      ctx.fillStyle = "#666";
+      ctx.font = `${Math.floor(size * 0.3)}px Arial`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(alt.slice(0, 3), size / 2, size / 2);
+      target.src = canvas.toDataURL();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: flag,
+      alt,
+      className: `inline-block rounded-full ${className}`,
+      onError: handleError,
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor,
+        minWidth: `${size}px`,
+        minHeight: `${size}px`,
+        maxWidth: `${size}px`,
+        maxHeight: `${size}px`,
+        borderRadius: "50%",
+        objectFit: "cover",
+        objectPosition: "center",
+        flexShrink: 0,
+        display: "block"
+      }
+    }
+  );
+};
+function Popover({
+  isOpen,
+  onClose,
+  trigger,
+  children,
+  colors,
+  placement = "bottom-start",
+  width,
+  minWidth = 200,
+  fullWidth = false,
+  gap = 4
+}) {
+  const popoverRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [position, setPosition] = useState(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
+  useEffect(() => {
+    if (!isOpen || !triggerRef.current) return;
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      if (fullWidth) setTriggerWidth(rect.width);
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const popoverWidth = popoverRect.width || width || (fullWidth ? rect.width : minWidth);
+      const popoverHeight = popoverRect.height || 400;
+      let top = 0;
+      let left = 0;
+      if (placement.startsWith("bottom")) {
+        top = rect.bottom + gap;
+        if (top + popoverHeight > window.innerHeight - 8) {
+          top = rect.top - popoverHeight - gap;
+        }
+      } else {
+        top = rect.top - popoverHeight - gap;
+        if (top < 8) {
+          top = rect.bottom + gap;
+        }
+      }
+      if (placement.endsWith("start")) {
+        left = rect.left;
+        if (left + popoverWidth > window.innerWidth - 8) {
+          left = window.innerWidth - popoverWidth - 8;
+        }
+      } else {
+        left = rect.right - popoverWidth;
+        if (left < 8) {
+          left = 8;
+        }
+      }
+      left = Math.max(8, Math.min(left, window.innerWidth - popoverWidth - 8));
+      top = Math.max(8, Math.min(top, window.innerHeight - popoverHeight - 8));
+      setPosition({ top, left });
+    };
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen, placement, width, minWidth, fullWidth, gap]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isOutsidePopover = popoverRef.current && !popoverRef.current.contains(target);
+      const isOutsideTrigger = triggerRef.current && !triggerRef.current.contains(target);
+      if (isOutsidePopover && isOutsideTrigger) {
+        requestAnimationFrame(() => {
+          onClose();
+        });
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside, { capture: false });
+    }, 50);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside, { capture: false });
+    };
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: fullWidth ? "block" : "inline-block" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: triggerRef, children: trigger }),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: popoverRef,
+        style: {
+          position: "fixed",
+          zIndex: 1e3,
+          background: colors.bgCard,
+          border: "none",
+          boxShadow: `0 0 0 1px ${colors.border}, 0 4px 12px rgba(0, 0, 0, 0.15)`,
+          minWidth: fullWidth ? triggerWidth : minWidth,
+          overflow: "hidden",
+          ...width ? { width } : {},
+          ...position ? { top: position.top, left: position.left } : { opacity: 0 }
+        },
+        children
+      }
+    )
+  ] });
+}
+function PopoverHeader({ children, colors }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        padding: "12px 12px 0 12px",
+        marginBottom: 12,
+        color: colors.text
+      },
+      children
+    }
+  );
+}
+function PopoverSection({ children }) {
+  return /* @__PURE__ */ jsx("div", { children });
+}
+function PopoverFooter({ children }) {
+  return /* @__PURE__ */ jsx("div", { children });
+}
+var injectedDirections = /* @__PURE__ */ new Set();
+function injectScrollbarStyles(direction) {
+  if (typeof document === "undefined") return;
+  if (injectedDirections.has(direction)) return;
+  injectedDirections.add(direction);
+  const scrollClass = scrollbarClassName(direction);
+  const isHorizontal = direction === "horizontal" || direction === "both";
+  const isVertical = direction === "vertical" || direction === "both";
+  const css = `
+    .${scrollClass}::-webkit-scrollbar {
+      display: block;
+      ${isHorizontal ? "height: 8px;" : ""}
+      ${isVertical ? "width: 8px;" : ""}
+    }
+    .${scrollClass}::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 0;
+    }
+    .${scrollClass}::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 0;
+    }
+    .${scrollClass}::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.4);
+    }
+  `;
+  const style = document.createElement("style");
+  style.setAttribute("data-scroll-container", direction);
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+function scrollbarClassName(direction) {
+  return `scroll-container-${direction}`;
+}
+var ScrollContainer = forwardRef(
+  ({
+    children,
+    direction = "both",
+    height,
+    maxHeight,
+    width,
+    extendToEdges = false,
+    edgePadding = 16,
+    className = "",
+    style = {},
+    onScroll,
+    scrollPosition,
+    onScrollPositionChange,
+    scrollToEnd = false,
+    scrollbarPosition = "right"
+  }, ref) => {
+    const internalRef = useRef(null);
+    const scrollRef = ref || internalRef;
+    const isUpdatingScroll = useRef(false);
+    const hasScrolledToEnd = useRef(false);
+    const scrollClass = scrollbarClassName(direction);
+    const isHorizontal = direction === "horizontal" || direction === "both";
+    const isScrollbarLeft = scrollbarPosition === "left";
+    injectScrollbarStyles(direction);
+    const handleScroll = useCallback((e) => {
+      onScroll?.(e);
+      if (isUpdatingScroll.current) return;
+      if (onScrollPositionChange) {
+        const target = e.currentTarget;
+        if (isHorizontal) {
+          const maxScroll = target.scrollWidth - target.clientWidth;
+          if (maxScroll > 0) {
+            onScrollPositionChange(target.scrollLeft / maxScroll);
+          }
+        } else {
+          const maxScroll = target.scrollHeight - target.clientHeight;
+          if (maxScroll > 0) {
+            onScrollPositionChange(target.scrollTop / maxScroll);
+          }
+        }
+      }
+    }, [isHorizontal, onScroll, onScrollPositionChange]);
+    useEffect(() => {
+      if (scrollPosition === void 0) return;
+      const container = scrollRef.current;
+      if (!container) return;
+      if (isHorizontal) {
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        if (maxScroll > 0) {
+          const target = scrollPosition * maxScroll;
+          if (Math.abs(container.scrollLeft - target) > 1) {
+            isUpdatingScroll.current = true;
+            container.scrollLeft = target;
+            requestAnimationFrame(() => {
+              isUpdatingScroll.current = false;
+            });
+          }
+        }
+      } else {
+        const maxScroll = container.scrollHeight - container.clientHeight;
+        if (maxScroll > 0) {
+          const target = scrollPosition * maxScroll;
+          if (Math.abs(container.scrollTop - target) > 1) {
+            isUpdatingScroll.current = true;
+            container.scrollTop = target;
+            requestAnimationFrame(() => {
+              isUpdatingScroll.current = false;
+            });
+          }
+        }
+      }
+    }, [scrollPosition, isHorizontal, scrollRef]);
+    useEffect(() => {
+      if (!scrollToEnd || hasScrolledToEnd.current) return;
+      const container = scrollRef.current;
+      if (!container) return;
+      const timeoutId = setTimeout(() => {
+        if (isHorizontal) {
+          container.scrollLeft = container.scrollWidth;
+        } else {
+          container.scrollTop = container.scrollHeight;
+        }
+        hasScrolledToEnd.current = true;
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }, [scrollToEnd, isHorizontal, scrollRef, children]);
+    const defaultOverflowX = isHorizontal ? "auto" : "hidden";
+    const defaultOverflowY = direction === "vertical" || direction === "both" ? "auto" : "hidden";
+    const containerStyle = {
+      overflowX: style?.overflowX ?? defaultOverflowX,
+      overflowY: style?.overflowY ?? defaultOverflowY,
+      ...height !== void 0 ? { height } : {},
+      ...maxHeight !== void 0 ? { maxHeight } : {},
+      ...width !== void 0 ? { width } : {},
+      ...extendToEdges ? { margin: `-${edgePadding}px`, padding: edgePadding } : {},
+      ...isScrollbarLeft ? { direction: "rtl" } : {},
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: `${scrollClass} ${className}`.trim(),
+        style: containerStyle,
+        onScroll: handleScroll,
+        children: isScrollbarLeft ? /* @__PURE__ */ jsx("div", { style: { direction: "ltr", width: "100%", height: "100%" }, children }) : children
+      }
+    );
+  }
+);
+ScrollContainer.displayName = "ScrollContainer";
+var SIZES = {
+  sm: { triggerHeight: 32, optionHeight: 32, triggerPadding: "4px 8px", optionPadding: "0 12px", fontSize: 13, chevronSize: 14 },
+  md: { triggerHeight: 40, optionHeight: 40, triggerPadding: "8px 12px", optionPadding: "0 12px", fontSize: 14, chevronSize: 16 }
+};
+function MenuSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  isDisabled = false,
+  colors,
+  size = "md",
+  minWidth,
+  maxDropdownHeight = 240,
+  placement = "bottom-start",
+  renderTrigger
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const listRef = useRef(null);
+  const selectedOption = options.find((o) => o.value === value);
+  const s = SIZES[size];
+  const handleSelect = useCallback(
+    (optionValue) => {
+      onChange(optionValue);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+  const handleToggle = useCallback(() => {
+    if (isDisabled) return;
+    setIsOpen((prev) => {
+      if (!prev) {
+        const idx = options.findIndex((o) => o.value === value && !o.isDisabled);
+        setFocusedIndex(idx >= 0 ? idx : options.findIndex((o) => !o.isDisabled));
+      }
+      return !prev;
+    });
+  }, [isDisabled, options, value]);
+  const findNextEnabled = useCallback((from, direction) => {
+    let idx = from + direction;
+    while (idx >= 0 && idx < options.length) {
+      if (!options[idx]?.isDisabled) return idx;
+      idx += direction;
+    }
+    return from;
+  }, [options]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleToggle();
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => findNextEnabled(prev, 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => findNextEnabled(prev, -1));
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < options.length && !options[focusedIndex]?.isDisabled) {
+            handleSelect(options[focusedIndex].value);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          break;
+      }
+    },
+    [isOpen, focusedIndex, options, handleSelect, handleToggle, findNextEnabled]
+  );
+  useEffect(() => {
+    if (!isOpen || focusedIndex < 0 || !listRef.current) return;
+    const listbox = listRef.current.querySelector("[role=listbox]");
+    if (!listbox) return;
+    const items = listbox.children;
+    if (items[focusedIndex]) {
+      items[focusedIndex].scrollIntoView({ block: "nearest" });
+    }
+  }, [isOpen, focusedIndex]);
+  const triggerElement = renderTrigger ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      onClick: handleToggle,
+      onKeyDown: handleKeyDown,
+      style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+      children: renderTrigger({ selected: selectedOption, isOpen, isDisabled })
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleToggle,
+      onKeyDown: handleKeyDown,
+      disabled: isDisabled,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 8,
+        width: "100%",
+        minWidth,
+        padding: s.triggerPadding,
+        fontSize: s.fontSize,
+        fontWeight: 400,
+        fontFamily: "inherit",
+        border: "none",
+        borderRadius: 0,
+        boxShadow: `0 0 0 1px ${colors.border}`,
+        background: colors.bg,
+        color: selectedOption ? colors.text : colors.textMuted,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.5 : 1,
+        minHeight: s.triggerHeight
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              overflow: "hidden"
+            },
+            children: [
+              selectedOption?.icon,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: selectedOption?.label ?? placeholder
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "feather:chevron-down",
+            width: s.chevronSize,
+            height: s.chevronSize,
+            style: {
+              flexShrink: 0,
+              transition: "transform 0.2s",
+              transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      isOpen,
+      onClose: () => setIsOpen(false),
+      trigger: triggerElement,
+      colors,
+      minWidth,
+      fullWidth: !renderTrigger,
+      gap: 0,
+      placement,
+      children: /* @__PURE__ */ jsx(
+        ScrollContainer,
+        {
+          ref: listRef,
+          direction: "vertical",
+          maxHeight: maxDropdownHeight,
+          children: /* @__PURE__ */ jsx("div", { role: "listbox", onKeyDown: handleKeyDown, children: options.map((option, index) => {
+            const isSelected = option.value === value;
+            const isFocused = index === focusedIndex;
+            const optDisabled = option.isDisabled ?? false;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": optDisabled,
+                onClick: () => !optDisabled && handleSelect(option.value),
+                onMouseEnter: () => !optDisabled && setFocusedIndex(index),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  width: "100%",
+                  padding: s.optionPadding,
+                  minHeight: s.optionHeight,
+                  fontSize: s.fontSize,
+                  fontFamily: "inherit",
+                  border: "none",
+                  borderRadius: 0,
+                  background: isFocused && !optDisabled ? `${colors.border}40` : "transparent",
+                  color: optDisabled ? colors.textMuted : colors.text,
+                  cursor: optDisabled ? "not-allowed" : "pointer",
+                  fontWeight: isSelected ? 500 : 400,
+                  textAlign: "left",
+                  opacity: optDisabled ? 0.5 : 1
+                },
+                children: [
+                  option.icon,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        flex: 1
+                      },
+                      children: option.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { width: 14, flexShrink: 0, display: "flex", justifyContent: "center" }, children: isSelected && /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: "feather:check",
+                      width: 14,
+                      height: 14
+                    }
+                  ) })
+                ]
+              },
+              option.value
+            );
+          }) })
+        }
+      )
+    }
+  );
+}
+function MultiSelectFilter({
+  allItems,
+  selectedItems,
+  onSelectionChange,
+  itemStats,
+  renderIcon,
+  renderListIcon,
+  getLabel,
+  title,
+  colors,
+  placeholder: _placeholder,
+  buttonWidth = 112,
+  iconSize = 24,
+  iconLimit = 3,
+  iconOverlap = 8,
+  reverseZIndex = true,
+  getVolumeRank
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [localSelection, setLocalSelection] = useState(selectedItems);
+  const statsMap = useMemo(
+    () => new Map(itemStats.map((stat) => [stat.item, stat.count])),
+    [itemStats]
+  );
+  const sortedItems = useMemo(() => {
+    return Array.from(allItems).sort((a, b) => {
+      if (getVolumeRank) {
+        const rankA = getVolumeRank(a);
+        const rankB = getVolumeRank(b);
+        if (rankA !== rankB) {
+          return rankA - rankB;
+        }
+      }
+      const countA = statsMap.get(a) ?? 0;
+      const countB = statsMap.get(b) ?? 0;
+      if (countA !== countB) {
+        return countB - countA;
+      }
+      return getLabel(a).localeCompare(getLabel(b));
+    });
+  }, [allItems, getVolumeRank, statsMap, getLabel]);
+  const handleToggle = (item) => {
+    const newSelection = new Set(localSelection);
+    if (newSelection.has(item)) {
+      newSelection.delete(item);
+    } else {
+      newSelection.add(item);
+    }
+    setLocalSelection(newSelection);
+  };
+  const handleSelectAll = () => {
+    setLocalSelection(/* @__PURE__ */ new Set());
+  };
+  const handleSelectNone = () => {
+    setLocalSelection(/* @__PURE__ */ new Set());
+  };
+  const handleApply = () => {
+    onSelectionChange(localSelection);
+    setIsOpen(false);
+  };
+  const handleToggleOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    } else {
+      setLocalSelection(selectedItems);
+      setIsOpen(true);
+    }
+  };
+  const selectedCount = selectedItems.size;
+  const totalCount = allItems.size;
+  const isShowingAll = selectedCount === 0 || selectedCount === totalCount;
+  const hasFilter = selectedCount > 0 && selectedCount < totalCount;
+  const itemsToDisplay = useMemo(() => {
+    if (isShowingAll) {
+      return sortedItems;
+    }
+    return Array.from(selectedItems).sort((a, b) => {
+      if (getVolumeRank) {
+        const rankA = getVolumeRank(a);
+        const rankB = getVolumeRank(b);
+        if (rankA !== rankB) {
+          return rankA - rankB;
+        }
+      }
+      const countA = statsMap.get(a) ?? 0;
+      const countB = statsMap.get(b) ?? 0;
+      if (countA !== countB) {
+        return countB - countA;
+      }
+      return getLabel(a).localeCompare(getLabel(b));
+    });
+  }, [isShowingAll, sortedItems, selectedItems, getVolumeRank, statsMap, getLabel]);
+  const iconItems = itemsToDisplay.map((item) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: iconSize,
+        height: iconSize,
+        borderRadius: "50%",
+        boxShadow: `0 0 0 1px ${colors.border}`,
+        overflow: "hidden",
+        background: colors.bgCard,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: renderIcon(item)
+    },
+    item
+  ));
+  const triggerButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleToggleOpen,
+      style: {
+        padding: "8px 12px",
+        fontSize: 13,
+        fontWeight: 500,
+        border: `1px solid ${hasFilter ? "#3182ce" : colors.border}`,
+        background: hasFilter ? "#3182ce" : colors.bgCard,
+        color: hasFilter ? "#fff" : colors.text,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        minWidth: buttonWidth,
+        maxWidth: buttonWidth,
+        minHeight: 38,
+        maxHeight: 38,
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(
+        OverlappingStack,
+        {
+          items: iconItems,
+          limit: iconLimit,
+          overlap: iconOverlap,
+          itemSize: iconSize,
+          reverseZIndex
+        }
+      )
+    }
+  );
+  const listIconRenderer = renderListIcon ?? renderIcon;
+  return /* @__PURE__ */ jsxs(Popover, { isOpen, onClose: () => setIsOpen(false), trigger: triggerButton, colors, children: [
+    /* @__PURE__ */ jsx(PopoverHeader, { colors, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx("span", { children: title }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSelectAll,
+            style: {
+              padding: "2px 8px",
+              fontSize: 11,
+              border: "none",
+              background: "transparent",
+              color: colors.textMuted,
+              cursor: "pointer"
+            },
+            children: "All"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSelectNone,
+            style: {
+              padding: "2px 8px",
+              fontSize: 11,
+              border: "none",
+              background: "transparent",
+              color: colors.textMuted,
+              cursor: "pointer"
+            },
+            children: "None"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverSection, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { maxHeight: 300, overflowY: "auto", paddingBottom: 12 }, children: sortedItems.map((item) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "4px 12px",
+            cursor: "pointer",
+            fontSize: 13
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: localSelection.has(item),
+                  onChange: () => handleToggle(item),
+                  style: { cursor: "pointer" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: iconSize,
+                    height: iconSize,
+                    borderRadius: "50%",
+                    boxShadow: `0 0 0 1px ${colors.border}`,
+                    overflow: "hidden",
+                    background: colors.bgCard,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: listIconRenderer(item)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: getLabel(item) })
+            ] }),
+            statsMap.size > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 11,
+                  color: colors.textMuted,
+                  background: colors.bg,
+                  padding: "2px 6px"
+                },
+                children: statsMap.get(item) ?? 0
+              }
+            )
+          ]
+        },
+        item
+      )) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 12,
+            background: `linear-gradient(to bottom, transparent, ${colors.bgCard})`,
+            pointerEvents: "none"
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverFooter, { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleApply,
+        style: {
+          width: "100%",
+          padding: "8px 12px",
+          fontSize: 13,
+          fontWeight: 500,
+          border: "none",
+          background: "#3182ce",
+          color: "#fff",
+          cursor: "pointer",
+          minHeight: 38
+        },
+        children: "Apply"
+      }
+    ) })
+  ] });
+}
+var PaymentCurrencyCombo = ({
+  paymentMethodIcon,
+  currencyId,
+  size = 20,
+  colors
+}) => {
+  const badgeSize = size * 0.6;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
+        borderRadius: "100%",
+        height: size,
+        width: size,
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(CurrencyIcon, { currencyId, size })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 0,
+              right: 0,
+              width: badgeSize,
+              height: badgeSize,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: colors.bg,
+              borderRadius: 0
+            },
+            children: paymentMethodIcon
+          }
+        )
+      ]
+    }
+  );
+};
+function PaymentMethodIcon({
+  icon,
+  color = "#6b7280",
+  backgroundColor,
+  size = 16,
+  isUnknown = false,
+  tooltip
+}) {
+  const effectiveColor = isUnknown ? "#ef4444" : color;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        opacity: isUnknown ? 0.6 : 1,
+        position: "relative",
+        backgroundColor,
+        borderRadius: backgroundColor ? "4px" : void 0,
+        padding: backgroundColor ? "2px" : void 0,
+        boxSizing: "border-box"
+      },
+      title: tooltip,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon,
+            width: backgroundColor ? size - 4 : size,
+            height: backgroundColor ? size - 4 : size,
+            style: { color: effectiveColor }
+          }
+        ),
+        isUnknown && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              bottom: -2,
+              right: -2,
+              width: size * 0.35,
+              height: size * 0.35,
+              borderRadius: "50%",
+              background: "#ef4444",
+              border: "1px solid white"
+            },
+            title: "Unknown payment method"
+          }
+        )
+      ]
+    }
+  );
+}
+var DEFAULT_PAYMENT_ICON = "mdi:credit-card";
+var DEFAULT_PAYMENT_COLOR = "#6b7280";
+function Tooltip({ label, children, isDisabled, placement = "top", display = "inline-flex" }) {
+  const [visible, setVisible] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (isDisabled) setVisible(false);
+  }, [isDisabled]);
+  if (isDisabled) return /* @__PURE__ */ jsx(Fragment, { children });
+  const tipStyle = {
+    position: "absolute",
+    left: 0,
+    width: "max-content",
+    maxWidth: 280,
+    background: "rgba(0,0,0,0.82)",
+    color: "#fff",
+    fontSize: 11,
+    lineHeight: 1.4,
+    padding: "4px 8px",
+    whiteSpace: "normal",
+    zIndex: 9999,
+    pointerEvents: "none",
+    borderRadius: 2,
+    ...placement === "top" ? { bottom: "calc(100% + 5px)" } : { top: "calc(100% + 5px)" }
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      style: { position: "relative", display, alignItems: display === "inline-flex" ? "center" : void 0 },
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      children: [
+        children,
+        visible && /* @__PURE__ */ jsx("span", { style: tipStyle, children: label })
+      ]
+    }
+  );
+}
+function VersionBadge(props) {
+  const { version, colors, style } = props;
+  const bgColor = version === "v3" ? colors.bgV3 : colors.bgV2;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 4px",
+        fontSize: "10px",
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.25px",
+        borderRadius: "4px",
+        backgroundColor: bgColor,
+        color: colors.text,
+        ...style
+      },
+      children: version
+    }
+  );
+}
+
+export { Card, CardHorizontalRule, CurrencyIcon, DEFAULT_PAYMENT_COLOR, DEFAULT_PAYMENT_ICON, DepositIdentifier, FlagIcon, MenuSelect, MultiSelectFilter, OverlappingStack, PaymentCurrencyCombo, PaymentMethodIcon, Popover, PopoverFooter, PopoverHeader, PopoverSection, ScrollContainer, Tooltip, VersionBadge, injectScrollbarStyles, scrollbarClassName };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map