@provex/components 1.2.4 → 1.3.0-rc.20260419202236.6109d69

package/dist/index.js

@@ -1,1223 +0,0 @@
-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