@rdna/radiants 0.1.1 → 0.1.3

package/dist/components/core/index.mjs

@@ -1,2475 +0,0 @@
-import { useClickOutside, useEscapeKey, useLockBodyScroll } from '../../chunk-SR2T7OEJ.mjs';
-import React14, { createContext, forwardRef, useState, useEffect, useCallback, useRef, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import Link from 'next/link';
-import { createPortal } from 'react-dom';
-
-var AccordionContext = createContext(null);
-var AccordionItemContext = createContext(null);
-function useAccordionContext() {
-  const context = useContext(AccordionContext);
-  if (!context) {
-    throw new Error("Accordion components must be used within an Accordion");
-  }
-  return context;
-}
-function useAccordionItemContext() {
-  const context = useContext(AccordionItemContext);
-  if (!context) {
-    throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");
-  }
-  return context;
-}
-function Accordion({
-  type = "single",
-  defaultValue,
-  value: controlledValue,
-  onValueChange,
-  className = "",
-  children
-}) {
-  const getInitialExpanded = () => {
-    const initial = controlledValue ?? defaultValue;
-    if (!initial) return /* @__PURE__ */ new Set();
-    return new Set(Array.isArray(initial) ? initial : [initial]);
-  };
-  const [expandedItems, setExpandedItems] = useState(getInitialExpanded);
-  useEffect(() => {
-    if (controlledValue !== void 0) {
-      setExpandedItems(new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue]));
-    }
-  }, [controlledValue]);
-  const toggleItem = useCallback((itemValue) => {
-    setExpandedItems((prev) => {
-      const next = new Set(prev);
-      if (next.has(itemValue)) {
-        next.delete(itemValue);
-      } else {
-        if (type === "single") {
-          next.clear();
-        }
-        next.add(itemValue);
-      }
-      if (onValueChange) {
-        const newValue = Array.from(next);
-        onValueChange(type === "single" ? newValue[0] ?? "" : newValue);
-      }
-      return next;
-    });
-  }, [type, onValueChange]);
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { type, expandedItems, toggleItem }, children: /* @__PURE__ */ jsx("div", { className: `space-y-0 ${className}`, children }) });
-}
-function AccordionItem({ value, className = "", children }) {
-  const { expandedItems } = useAccordionContext();
-  const isExpanded = expandedItems.has(value);
-  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { value, isExpanded }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `
-          border border-edge-primary
-          bg-surface-primary
-          -mt-px first:mt-0
-          ${className}
-        `.trim(),
-      "data-state": isExpanded ? "open" : "closed",
-      children
-    }
-  ) });
-}
-function AccordionTrigger({ className = "", children }) {
-  const { toggleItem } = useAccordionContext();
-  const { value, isExpanded } = useAccordionItemContext();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: () => toggleItem(value),
-      className: `
-        w-full flex items-center justify-between
-        px-4 py-3
-        font-joystix text-sm uppercase text-content-primary
-        bg-transparent
-        hover:bg-content-primary/5
-        transition-colors
-        cursor-pointer
-        ${className}
-      `.trim(),
-      "aria-expanded": isExpanded,
-      children: [
-        /* @__PURE__ */ jsx("span", { children }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "text-[1rem] font-mondwest select-none",
-            "aria-hidden": "true",
-            children: isExpanded ? "\u2212" : "+"
-          }
-        )
-      ]
-    }
-  );
-}
-function AccordionContent({ className = "", children }) {
-  const { isExpanded } = useAccordionItemContext();
-  const contentRef = useRef(null);
-  const [height, setHeight] = useState(void 0);
-  const [isAnimating, setIsAnimating] = useState(false);
-  useEffect(() => {
-    const content = contentRef.current;
-    if (!content) return;
-    if (isExpanded) {
-      const scrollHeight = content.scrollHeight;
-      setHeight(scrollHeight);
-      setIsAnimating(true);
-      const timer = setTimeout(() => {
-        setIsAnimating(false);
-        setHeight(void 0);
-      }, 200);
-      return () => clearTimeout(timer);
-    } else {
-      const scrollHeight = content.scrollHeight;
-      setHeight(scrollHeight);
-      setIsAnimating(true);
-      requestAnimationFrame(() => {
-        setHeight(0);
-      });
-      const timer = setTimeout(() => {
-        setIsAnimating(false);
-      }, 200);
-      return () => clearTimeout(timer);
-    }
-  }, [isExpanded]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: contentRef,
-      className: `
-        overflow-hidden
-        transition-[height] duration-200 ease-out
-        ${className}
-      `.trim(),
-      style: {
-        height: isAnimating ? height : isExpanded ? "auto" : 0
-      },
-      "aria-hidden": !isExpanded,
-      children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children })
-    }
-  );
-}
-var variantStyles = {
-  default: "bg-surface-primary border-edge-primary text-content-primary",
-  success: "bg-status-success/10 border-status-success text-content-primary",
-  warning: "bg-status-warning/10 border-status-warning text-content-primary",
-  error: "bg-status-error/10 border-status-error text-content-primary",
-  info: "bg-status-info/10 border-status-info text-content-primary"
-};
-function Alert({
-  variant = "default",
-  title,
-  children,
-  closable = false,
-  onClose,
-  icon,
-  closeIcon,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "alert",
-      className: `
-        p-4
-        border-2
-        rounded-sm
-        ${variantStyles[variant]}
-        ${className}
-      `.trim(),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 mt-0.5", children: icon }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsx("p", { className: "font-joystix text-xs uppercase mb-1", children: title }),
-          /* @__PURE__ */ jsx("div", { className: "font-mondwest text-base text-content-primary/80", children })
-        ] }),
-        closable && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "text-content-primary/50 hover:text-content-primary flex-shrink-0 -mt-1",
-            "aria-label": "Close",
-            children: closeIcon || /* @__PURE__ */ jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 16 16",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M12 4L4 12M4 4L12 12",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                )
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-}
-var baseStyles = `
-  inline-flex items-center justify-center
-  font-joystix uppercase
-  rounded-sm
-  whitespace-nowrap
-`;
-var sizeStyles = {
-  sm: "px-2 py-0.5 text-2xs",
-  md: "px-2.5 py-1 text-xs"
-};
-var variantStyles2 = {
-  default: "bg-surface-primary text-content-primary border border-edge-primary",
-  success: "bg-status-success text-content-primary border border-edge-primary",
-  warning: "bg-status-warning text-content-primary border border-edge-primary",
-  error: "bg-status-error text-content-primary border border-edge-primary",
-  info: "bg-status-info text-content-primary border border-edge-primary"
-};
-function Badge({
-  variant = "default",
-  size = "md",
-  children,
-  className = ""
-}) {
-  const classes = [
-    baseStyles,
-    sizeStyles[size],
-    variantStyles2[variant],
-    className
-  ].join(" ").replace(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx("span", { className: classes, children });
-}
-function Breadcrumbs({
-  items,
-  separator = "/",
-  className = ""
-}) {
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": "Breadcrumb",
-      className: `flex items-center gap-2 ${className}`.trim(),
-      children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2", children: items.map((item, index) => {
-        const isLast = index === items.length - 1;
-        return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
-          index > 0 && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "font-mondwest text-base text-content-primary/40",
-              "aria-hidden": "true",
-              children: separator
-            }
-          ),
-          item.href && !isLast ? /* @__PURE__ */ jsx(
-            Link,
-            {
-              href: item.href,
-              className: "font-mondwest text-base text-content-primary/60 hover:text-content-primary hover:underline transition-colors",
-              children: item.label
-            }
-          ) : /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `
-                    font-mondwest text-base
-                    ${isLast ? "text-content-primary font-semibold" : "text-content-primary/60"}
-                  `.trim(),
-              "aria-current": isLast ? "page" : void 0,
-              children: item.label
-            }
-          )
-        ] }, index);
-      }) })
-    }
-  );
-}
-var baseStyles2 = `
-  inline-flex items-center
-  font-heading uppercase
-  whitespace-nowrap
-  cursor-pointer select-none
-  border border-edge-primary
-  rounded-sm
-  shadow-btn
-  hover:-translate-y-0.5
-  hover:shadow-btn-hover
-  active:translate-y-0.5
-  active:shadow-none
-  disabled:opacity-50 disabled:cursor-not-allowed
-  disabled:hover:translate-y-0 disabled:hover:shadow-btn
-  focus:outline-none focus-visible:ring-2 focus-visible:ring-edge-focus focus-visible:ring-offset-1
-`;
-var sizeStyles2 = {
-  sm: "h-8 px-3 text-xs gap-3",
-  md: "h-8 px-3 text-xs gap-3",
-  lg: "h-8 px-3 text-sm gap-3"
-};
-var iconOnlySizeStyles = {
-  sm: "w-8 h-8 p-0",
-  md: "w-8 h-8 p-0",
-  lg: "w-8 h-8 p-0"
-};
-var variantStyles3 = {
-  primary: `
-    bg-action-primary text-content-primary
-    hover:bg-action-primary
-    active:bg-action-primary
-  `,
-  secondary: `
-    bg-surface-secondary text-content-inverted
-    hover:bg-surface-primary hover:text-content-primary
-    active:bg-action-primary active:text-content-primary
-  `,
-  outline: `
-    bg-transparent text-content-primary
-    shadow-none
-    hover:bg-content-primary/5 hover:!translate-y-0 hover:shadow-none
-    active:bg-action-primary active:!translate-y-0 active:shadow-none
-  `,
-  ghost: `
-    bg-transparent text-content-primary
-    border-transparent
-    shadow-none
-    hover:bg-transparent hover:border-edge-primary hover:text-content-primary hover:shadow-none hover:translate-y-0
-    active:bg-action-primary active:text-content-primary active:border-edge-primary active:translate-y-0
-  `
-};
-function getButtonClasses(variant, size, iconOnly, fullWidth, className, hasIcon) {
-  let justifyClass = "justify-start";
-  if (iconOnly) {
-    justifyClass = "justify-center";
-  } else if (fullWidth && hasIcon) {
-    justifyClass = "justify-between";
-  }
-  return [
-    baseStyles2,
-    iconOnly ? iconOnlySizeStyles[size] : sizeStyles2[size],
-    justifyClass,
-    variantStyles3[variant],
-    fullWidth ? "w-full" : "",
-    className
-  ].join(" ").replace(/\s+/g, " ").trim();
-}
-function Button(props) {
-  const {
-    variant = "primary",
-    size = "md",
-    fullWidth = false,
-    iconOnly = false,
-    icon,
-    loadingIndicator,
-    loading = false,
-    children,
-    className = "",
-    ...rest
-  } = props;
-  const hasIcon = Boolean(icon || iconOnly);
-  const showLoading = Boolean(loading && hasIcon && loadingIndicator);
-  const classes = getButtonClasses(variant, size, iconOnly, fullWidth, className, hasIcon);
-  const content = showLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    !iconOnly && children,
-    loadingIndicator
-  ] }) : icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    !iconOnly && children,
-    icon
-  ] }) : children;
-  if ("href" in props && props.href) {
-    const { href, asLink = true, target, ...linkRest } = rest;
-    if (asLink) {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          href,
-          target,
-          className: classes,
-          ...linkRest,
-          children: content
-        }
-      );
-    }
-    const linkButtonDisabled = showLoading || Boolean(linkRest.disabled);
-    const { disabled: _2, ...linkButtonRest } = linkRest;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: classes,
-        onClick: () => window.open(href, target || "_self"),
-        disabled: linkButtonDisabled,
-        ...linkButtonRest,
-        children: content
-      }
-    );
-  }
-  const buttonProps = rest;
-  const disabled = showLoading || Boolean(buttonProps.disabled);
-  const { disabled: _, ...buttonPropsWithoutDisabled } = buttonProps;
-  return /* @__PURE__ */ jsx("button", { className: classes, ...buttonPropsWithoutDisabled, disabled, children: content });
-}
-var baseStyles3 = `
-  border border-edge-primary
-  rounded-md
-  overflow-hidden
-`;
-var variantStyles4 = {
-  default: `
-    bg-surface-primary text-content-primary
-  `,
-  dark: `
-    bg-surface-secondary text-content-inverted
-  `,
-  raised: `
-    bg-surface-primary text-content-primary
-    shadow-card
-  `
-};
-function Card({
-  variant = "default",
-  children,
-  className = "",
-  noPadding = false
-}) {
-  const classes = [
-    baseStyles3,
-    variantStyles4[variant],
-    noPadding ? "" : "p-4",
-    className
-  ].join(" ").replace(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx("div", { className: classes, children });
-}
-function CardHeader({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-4 py-3 border-b border-edge-primary ${className}`, children });
-}
-function CardBody({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { className: `p-4 ${className}`, children });
-}
-function CardFooter({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-4 py-3 border-t border-edge-primary ${className}`, children });
-}
-function CheckmarkIcon({ className = "" }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M13.5 4.5L6 12L2.5 8.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
-var Checkbox = forwardRef(function Checkbox2({ label, className = "", disabled, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: `
-        inline-flex items-center gap-2 cursor-pointer
-        ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-        ${className}
-      `,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "checkbox",
-              disabled,
-              className: "peer sr-only",
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `
-            w-5 h-5
-            bg-surface-primary
-            border border-edge-primary
-            rounded-xs
-            peer-checked:bg-action-primary
-            peer-focus:ring-2 peer-focus:ring-edge-focus peer-focus:ring-offset-1
-            flex items-center justify-center
-          `
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-100 transition-opacity pointer-events-none", children: /* @__PURE__ */ jsx(CheckmarkIcon, { className: "text-content-primary" }) })
-        ] }),
-        label && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-base text-content-primary select-none", children: label })
-      ]
-    }
-  );
-});
-var Radio = forwardRef(function Radio2({ label, className = "", disabled, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: `
-        inline-flex items-center gap-2 cursor-pointer
-        ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-        ${className}
-      `,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "radio",
-              disabled,
-              className: "peer sr-only",
-              ...props
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `
-            w-5 h-5
-            bg-surface-primary
-            border border-edge-primary
-            rounded-full
-            peer-checked:bg-action-primary
-            peer-focus:ring-2 peer-focus:ring-edge-focus peer-focus:ring-offset-1
-            flex items-center justify-center
-          `
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-content-primary rounded-full opacity-0 peer-checked:opacity-100 pointer-events-none"
-            }
-          )
-        ] }),
-        label && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-base text-content-primary select-none", children: label })
-      ]
-    }
-  );
-});
-var ContextMenuContext = createContext(null);
-function useContextMenu() {
-  const context = useContext(ContextMenuContext);
-  if (!context) {
-    throw new Error("ContextMenu components must be used within a ContextMenu provider");
-  }
-  return context;
-}
-function ContextMenu({ children, className = "" }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const containerRef = useRef(null);
-  const open = (pos) => {
-    setPosition(pos);
-    setIsOpen(true);
-  };
-  const close = () => {
-    setIsOpen(false);
-  };
-  const handleContextMenu = (e) => {
-    e.preventDefault();
-    open({ x: e.clientX, y: e.clientY });
-  };
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        close();
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") close();
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [isOpen]);
-  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { isOpen, position, open, close }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      onContextMenu: handleContextMenu,
-      className,
-      children
-    }
-  ) });
-}
-function ContextMenuContent({ children, className = "" }) {
-  const { isOpen, position, close } = useContextMenu();
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `
-        fixed z-[1000]
-        min-w-[160px]
-        bg-surface-primary
-        border border-edge-primary
-        rounded-sm
-        shadow-[2px_2px_0_0_var(--color-edge-primary)]
-        py-1
-        ${className}
-      `,
-      style: {
-        left: position.x,
-        top: position.y
-      },
-      onClick: close,
-      children
-    }
-  );
-}
-function ContextMenuItem({
-  onClick,
-  disabled = false,
-  destructive = false,
-  icon,
-  children,
-  className = ""
-}) {
-  const { close } = useContextMenu();
-  const handleClick = () => {
-    if (!disabled && onClick) {
-      onClick();
-      close();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: handleClick,
-      disabled,
-      className: `
-        w-full flex items-center gap-2
-        px-3 py-1.5
-        font-mondwest text-base text-left
-        ${destructive ? "text-status-error" : "text-content-primary"}
-        ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-action-primary cursor-pointer"}
-        ${className}
-      `,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 flex items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { children })
-      ]
-    }
-  );
-}
-function ContextMenuSeparator({ className = "" }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `my-1 border-t border-edge-primary/20 ${className}`
-    }
-  );
-}
-function Divider({
-  orientation = "horizontal",
-  variant = "solid",
-  className = ""
-}) {
-  if (variant === "decorated") {
-    return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-4 ${className}`, children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 h-[2px] bg-edge-primary/20" }),
-      /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-action-primary border border-edge-primary rotate-45" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 h-[2px] bg-edge-primary/20" })
-    ] });
-  }
-  if (orientation === "horizontal") {
-    const borderStyle2 = variant === "dashed" ? "border-dashed" : "border-solid";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `w-full border-t border-edge-primary/20 ${borderStyle2} ${className}`,
-        role: "separator",
-        "aria-orientation": "horizontal"
-      }
-    );
-  }
-  const borderStyle = variant === "dashed" ? "border-dashed" : "border-solid";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `h-full border-l border-edge-primary/20 ${borderStyle} ${className}`,
-      role: "separator",
-      "aria-orientation": "vertical"
-    }
-  );
-}
-var DropdownContext = createContext(null);
-function useDropdownContext() {
-  const context = useContext(DropdownContext);
-  if (!context) {
-    throw new Error("DropdownMenu components must be used within a DropdownMenu");
-  }
-  return context;
-}
-function DropdownMenu({
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  position = "bottom-start",
-  children
-}) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const triggerRef = useRef(null);
-  const setOpen = useCallback((newOpen) => {
-    if (!isControlled) {
-      setInternalOpen(newOpen);
-    }
-    onOpenChange?.(newOpen);
-  }, [isControlled, onOpenChange]);
-  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { open, setOpen, triggerRef, position }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-block", children }) });
-}
-function DropdownMenuTrigger({ children, asChild }) {
-  const { open, setOpen, triggerRef } = useDropdownContext();
-  const handleClick = () => {
-    setOpen(!open);
-  };
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
-      onClick: handleClick,
-      ref: triggerRef
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      ref: triggerRef,
-      onClick: handleClick,
-      children
-    }
-  );
-}
-function DropdownMenuContent({ className = "", children }) {
-  const { open, setOpen, triggerRef, position } = useDropdownContext();
-  const contentRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const [coords, setCoords] = useState({ top: 0, left: 0 });
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (!open || !triggerRef.current || !contentRef.current) return;
-    const trigger = triggerRef.current.getBoundingClientRect();
-    const content = contentRef.current.getBoundingClientRect();
-    const gap = 4;
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "bottom-start":
-        top = trigger.bottom + gap;
-        left = trigger.left;
-        break;
-      case "bottom-end":
-        top = trigger.bottom + gap;
-        left = trigger.right - content.width;
-        break;
-      case "top-start":
-        top = trigger.top - content.height - gap;
-        left = trigger.left;
-        break;
-      case "top-end":
-        top = trigger.top - content.height - gap;
-        left = trigger.right - content.width;
-        break;
-    }
-    top = Math.max(8, Math.min(top, window.innerHeight - content.height - 8));
-    left = Math.max(8, Math.min(left, window.innerWidth - content.width - 8));
-    setCoords({ top, left });
-  }, [open, position, triggerRef]);
-  useClickOutside(open, [contentRef, triggerRef], () => setOpen(false));
-  useEscapeKey(open, () => setOpen(false));
-  if (!mounted || !open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: contentRef,
-        role: "menu",
-        className: `
-        fixed z-50
-        min-w-[8rem]
-        bg-surface-primary
-        border-2 border-edge-primary
-        rounded-sm
-        shadow-[2px_2px_0_0_var(--color-edge-primary)]
-        py-1
-        animate-fadeIn
-        ${className}
-      `.trim(),
-        style: { top: coords.top, left: coords.left },
-        children
-      }
-    ),
-    document.body
-  );
-}
-function DropdownMenuItem({
-  children,
-  onClick,
-  disabled = false,
-  destructive = false,
-  className = ""
-}) {
-  const { setOpen } = useDropdownContext();
-  const handleClick = () => {
-    if (disabled) return;
-    onClick?.();
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      role: "menuitem",
-      onClick: handleClick,
-      disabled,
-      className: `
-        w-full px-4 py-2
-        text-left
-        font-mondwest text-base
-        ${destructive ? "text-status-error" : "text-content-primary"}
-        ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-content-primary/5 cursor-pointer"}
-        transition-colors
-        ${className}
-      `.trim(),
-      children
-    }
-  );
-}
-function DropdownMenuSeparator({ className = "" }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "separator",
-      className: `h-px bg-edge-primary/20 my-1 ${className}`.trim()
-    }
-  );
-}
-function DropdownMenuLabel({ children, className = "" }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `
-        px-4 py-1
-        font-joystix text-2xs uppercase
-        text-content-primary/50
-        ${className}
-      `.trim(),
-      children
-    }
-  );
-}
-var baseStyles4 = `
-  font-sans
-  bg-surface-primary text-content-primary
-  border border-edge-primary
-  rounded-sm
-  placeholder:text-content-muted
-  focus:outline-none
-  focus:ring-2 focus:ring-edge-focus focus:ring-offset-0
-  disabled:opacity-50 disabled:cursor-not-allowed
-`;
-var sizeStyles3 = {
-  sm: "h-8 px-2 text-sm",
-  md: "h-10 px-3 text-base",
-  lg: "h-12 px-4 text-base"
-};
-var errorStyles = `
-  border-status-error
-  focus:ring-status-error
-`;
-var Input = forwardRef(function Input2({
-  size = "md",
-  error = false,
-  fullWidth = false,
-  iconName,
-  className = "",
-  ...props
-}, ref) {
-  const paddingLeft = iconName ? size === "sm" ? "pl-8" : size === "lg" ? "pl-12" : "pl-10" : "";
-  const classes = [
-    baseStyles4,
-    sizeStyles3[size],
-    error ? errorStyles : "",
-    fullWidth ? "w-full" : "",
-    paddingLeft,
-    className
-  ].join(" ").replace(/\s+/g, " ").trim();
-  const input = /* @__PURE__ */ jsx("input", { ref, className: classes, ...props });
-  if (iconName) {
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "text-content-muted",
-          "data-icon-slot": iconName,
-          style: {
-            width: size === "sm" ? 14 : size === "lg" ? 18 : 20,
-            height: size === "sm" ? 14 : size === "lg" ? 18 : 20
-          }
-        }
-      ) }),
-      input
-    ] });
-  }
-  return input;
-});
-var TextArea = forwardRef(function TextArea2({
-  error = false,
-  fullWidth = false,
-  className = "",
-  ...props
-}, ref) {
-  const classes = [
-    baseStyles4,
-    "px-3 py-2 text-base",
-    "resize-y min-h-24",
-    error ? errorStyles : "",
-    fullWidth ? "w-full" : "",
-    className
-  ].join(" ").replace(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...props });
-});
-function Label({ children, required, className = "", ...props }) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className,
-      ...props,
-      children: [
-        children,
-        required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-1", children: "*" })
-      ]
-    }
-  );
-}
-var sizeStyles4 = {
-  sm: "h-2",
-  md: "h-4",
-  lg: "h-6"
-};
-var variantStyles5 = {
-  default: "bg-action-primary",
-  success: "bg-status-success",
-  warning: "bg-surface-tertiary",
-  error: "bg-status-error"
-};
-function Progress({
-  value,
-  max = 100,
-  variant = "default",
-  size = "md",
-  showLabel = false,
-  className = ""
-}) {
-  const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `
-          w-full
-          bg-surface-primary
-          border border-edge-primary
-          rounded-sm
-          overflow-hidden
-          ${sizeStyles4[size]}
-        `,
-        role: "progressbar",
-        "aria-valuenow": value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `
-            h-full
-            ${variantStyles5[variant]}
-          `,
-            style: { width: `${percentage}%` }
-          }
-        )
-      }
-    ),
-    showLabel && /* @__PURE__ */ jsxs("div", { className: "mt-1 font-joystix text-2xs text-content-primary text-right", children: [
-      Math.round(percentage),
-      "%"
-    ] })
-  ] });
-}
-var LOADER_FRAMES = ["\uEE06", "\uEE07", "\uEE08", "\uEE09", "\uEE0A", "\uEE0B"];
-function Spinner({ size = 24, className = "", completed = false }) {
-  const [frameIndex, setFrameIndex] = React14.useState(0);
-  React14.useEffect(() => {
-    if (completed) {
-      setFrameIndex(0);
-      return;
-    }
-    const interval = setInterval(() => {
-      setFrameIndex((prev) => (prev + 1) % LOADER_FRAMES.length);
-    }, 150);
-    return () => clearInterval(interval);
-  }, [completed]);
-  const fontSize = size;
-  const displayChar = completed ? "\u2713" : LOADER_FRAMES[frameIndex];
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `inline-block flex items-center justify-center ${className}`,
-      style: {
-        width: size,
-        height: size,
-        fontSize,
-        fontFamily: "PixelCode, monospace",
-        lineHeight: 1
-      },
-      "aria-label": completed ? "Completed" : "Loading",
-      role: "status",
-      children: displayChar
-    }
-  );
-}
-function Select({
-  options,
-  value,
-  placeholder = "Select...",
-  onChange,
-  disabled = false,
-  error = false,
-  fullWidth = false,
-  className = ""
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef(null);
-  useEffect(() => {
-    function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const selectedOption = options.find((opt) => opt.value === value);
-  const handleSelect = (optionValue) => {
-    onChange?.(optionValue);
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: `relative ${fullWidth ? "w-full" : "w-fit"} ${className}`,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => !disabled && setIsOpen(!isOpen),
-            disabled,
-            className: `
-          flex items-center justify-between gap-2
-          w-full h-10 px-3
-          font-mondwest text-base
-          bg-surface-primary text-content-primary
-          border rounded-sm
-          ${error ? "border-status-error" : "border-edge-primary"}
-          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-          ${isOpen ? "shadow-[0_3px_0_0_var(--color-edge-primary)] -translate-y-0.5" : "shadow-[0_1px_0_0_var(--color-edge-primary)]"}
-        `,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-content-primary" : "text-content-primary/40", children: selectedOption?.label || placeholder }),
-              /* @__PURE__ */ jsx("span", { className: `text-content-primary ${isOpen ? "rotate-180" : ""}`, children: "\u25BC" })
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `
-            absolute z-50 top-full left-0 right-0 mt-1
-            bg-surface-primary
-            border border-edge-primary
-            rounded-sm
-            shadow-[2px_2px_0_0_var(--color-edge-primary)]
-            overflow-hidden
-          `,
-            children: options.map((option) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => !option.disabled && handleSelect(option.value),
-                disabled: option.disabled,
-                className: `
-                w-full px-3 py-2
-                font-mondwest text-base text-left
-                ${option.value === value ? "bg-action-primary text-content-primary" : "text-content-primary"}
-                ${option.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-action-primary cursor-pointer"}
-              `,
-                children: option.label
-              },
-              option.value
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
-var sizeStyles5 = {
-  sm: {
-    track: "h-1",
-    thumb: "w-3 h-3"
-  },
-  md: {
-    track: "h-2",
-    thumb: "w-4 h-4"
-  },
-  lg: {
-    track: "h-3",
-    thumb: "w-5 h-5"
-  }
-};
-function Slider({
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  size = "md",
-  disabled = false,
-  showValue = false,
-  label,
-  className = ""
-}) {
-  const trackRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const styles = sizeStyles5[size];
-  const percentage = (value - min) / (max - min) * 100;
-  const snapToStep = useCallback((val) => {
-    const stepped = Math.round((val - min) / step) * step + min;
-    return Math.max(min, Math.min(max, stepped));
-  }, [min, max, step]);
-  const getValueFromPosition = useCallback((clientX) => {
-    if (!trackRef.current) return value;
-    const rect = trackRef.current.getBoundingClientRect();
-    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-    const newValue = min + percent * (max - min);
-    return snapToStep(newValue);
-  }, [min, max, value, snapToStep]);
-  const handlePointerDown = useCallback((e) => {
-    if (disabled) return;
-    e.preventDefault();
-    setIsDragging(true);
-    const newValue = getValueFromPosition(e.clientX);
-    onChange(newValue);
-  }, [disabled, getValueFromPosition, onChange]);
-  useEffect(() => {
-    if (!isDragging) return;
-    const handlePointerMove = (e) => {
-      const newValue = getValueFromPosition(e.clientX);
-      onChange(newValue);
-    };
-    const handlePointerUp = () => {
-      setIsDragging(false);
-    };
-    document.addEventListener("pointermove", handlePointerMove);
-    document.addEventListener("pointerup", handlePointerUp);
-    return () => {
-      document.removeEventListener("pointermove", handlePointerMove);
-      document.removeEventListener("pointerup", handlePointerUp);
-    };
-  }, [isDragging, getValueFromPosition, onChange]);
-  const handleKeyDown = (e) => {
-    if (disabled) return;
-    let newValue = value;
-    switch (e.key) {
-      case "ArrowRight":
-      case "ArrowUp":
-        newValue = Math.min(max, value + step);
-        break;
-      case "ArrowLeft":
-      case "ArrowDown":
-        newValue = Math.max(min, value - step);
-        break;
-      case "Home":
-        newValue = min;
-        break;
-      case "End":
-        newValue = max;
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    onChange(newValue);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className}`.trim(), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      label && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-base text-content-primary", children: label }),
-      showValue && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-sm text-content-primary/60", children: value })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: trackRef,
-        role: "slider",
-        tabIndex: disabled ? -1 : 0,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": value,
-        "aria-disabled": disabled,
-        onPointerDown: handlePointerDown,
-        onKeyDown: handleKeyDown,
-        className: `
-          relative w-full
-          flex items-center
-          ${styles.track}
-          bg-edge-primary/10
-          border border-edge-primary
-          rounded-sm
-          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-          focus:outline-none focus:ring-2 focus:ring-edge-focus focus:ring-offset-2
-        `.trim(),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `
-            absolute top-0 left-0 h-full
-            bg-action-primary
-            rounded-sm
-            pointer-events-none
-          `.trim(),
-              style: { width: `${percentage}%` }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute top-0 bottom-0 flex items-center pointer-events-none",
-              style: { left: `calc(${percentage}% - ${parseInt(styles.thumb.split(" ")[0].replace("w-", "")) * 2}px)` },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `
-              ${styles.thumb}
-              bg-surface-muted
-              border border-edge-primary
-              rounded
-              ${isDragging ? "scale-110" : ""}
-              transition-transform
-              pointer-events-auto
-            `.trim()
-                }
-              )
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-var sizeStyles6 = {
-  sm: {
-    track: "w-8 h-4",
-    thumb: "w-3 h-3",
-    translate: "translate-x-4"
-  },
-  md: {
-    track: "w-10 h-5",
-    thumb: "w-4 h-4",
-    translate: "translate-x-5"
-  },
-  lg: {
-    track: "w-12 h-6",
-    thumb: "w-5 h-5",
-    translate: "translate-x-6"
-  }
-};
-function Switch({
-  checked,
-  onChange,
-  size = "md",
-  disabled = false,
-  label,
-  labelPosition = "right",
-  className = "",
-  id
-}) {
-  const styles = sizeStyles6[size];
-  const switchId = id || `switch-${Math.random().toString(36).slice(2)}`;
-  const handleClick = () => {
-    if (!disabled) {
-      onChange(!checked);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-  const switchElement = /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      id: switchId,
-      "aria-checked": checked,
-      disabled,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      className: `
-        relative inline-flex items-center
-        ${styles.track}
-        rounded-full
-        border border-edge-primary
-        transition-colors
-        ${checked ? "bg-action-primary" : "bg-edge-primary/10"}
-        ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-        focus:outline-none focus:ring-2 focus:ring-edge-focus focus:ring-offset-2
-      `.trim(),
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `
-          ${styles.thumb}
-          rounded-full
-          bg-surface-secondary
-          border border-edge-primary
-          transform transition-transform
-          ${checked ? styles.translate : "translate-x-0.5"}
-        `.trim(),
-          "aria-hidden": "true"
-        }
-      )
-    }
-  );
-  if (!label) {
-    return /* @__PURE__ */ jsx("div", { className, children: switchElement });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center gap-2 ${className}`.trim(), children: [
-    labelPosition === "left" && /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: switchId,
-        className: `
-            font-mondwest text-base text-content-primary
-            ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-          `.trim(),
-        children: label
-      }
-    ),
-    switchElement,
-    labelPosition === "right" && /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: switchId,
-        className: `
-            font-mondwest text-base text-content-primary
-            ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-          `.trim(),
-        children: label
-      }
-    )
-  ] });
-}
-var TabsContext = createContext(null);
-function useTabsContext() {
-  const context = useContext(TabsContext);
-  if (!context) {
-    throw new Error("Tab components must be used within a Tabs provider");
-  }
-  return context;
-}
-var triggerBaseStyles = `
-  flex items-center justify-center gap-2
-  px-4 py-2
-  font-joystix text-xs uppercase
-  cursor-pointer select-none
-  text-content-primary
-  transition-all duration-200 ease-out
-  relative
-  border border-edge-primary
-  rounded-sm
-  flex-1
-  shadow-none
-`;
-var pillStyles = {
-  inactive: `
-    bg-transparent text-content-primary
-    hover:bg-surface-secondary/5
-    hover:translate-y-0
-    hover:shadow-none
-  `,
-  active: `
-    bg-action-primary text-content-primary
-    hover:bg-action-primary
-    hover:translate-y-0
-    hover:shadow-none
-  `
-};
-var lineStyles = {
-  inactive: `
-    bg-transparent
-    hover:bg-surface-primary/50
-  `,
-  active: `
-    border-b-0
-    bg-surface-primary
-    border-t border-l border-r border-edge-primary
-    rounded-t-md
-    mb-0
-    relative
-    z-10
-  `
-};
-function Tabs({
-  defaultValue,
-  value,
-  onValueChange,
-  variant = "pill",
-  layout = "bottom-tabs",
-  children,
-  className = ""
-}) {
-  const [internalValue, setInternalValue] = useState(defaultValue || "");
-  const isControlled = value !== void 0;
-  const activeTab = isControlled ? value : internalValue;
-  const setActiveTab = (newValue) => {
-    if (isControlled) {
-      onValueChange?.(newValue);
-    } else {
-      setInternalValue(newValue);
-    }
-  };
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, setActiveTab, variant, layout }, children: /* @__PURE__ */ jsx("div", { className, children }) });
-}
-function TabList({ children, className = "" }) {
-  const { layout } = useTabsContext();
-  const shrinkClass = layout === "bottom-tabs" ? "shrink-0" : "";
-  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-between gap-4 px-2 py-2 bg-surface-primary border-t border-edge-primary ${shrinkClass} ${className}`, children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center overflow-x-auto w-full", children }) });
-}
-function TabTrigger({
-  value,
-  children,
-  icon,
-  className = ""
-}) {
-  const { activeTab, setActiveTab, variant } = useTabsContext();
-  const isActive = activeTab === value;
-  const variantStyle = variant === "pill" ? isActive ? pillStyles.active : pillStyles.inactive : isActive ? lineStyles.active : lineStyles.inactive;
-  const classes = [
-    triggerBaseStyles,
-    variantStyle,
-    className
-  ].join(" ").replace(/\s+/g, " ").trim();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "tab",
-      "aria-selected": isActive,
-      onClick: () => setActiveTab(value),
-      className: classes,
-      children: [
-        icon,
-        children
-      ]
-    }
-  );
-}
-function TabContent({
-  value,
-  children,
-  className = ""
-}) {
-  const { activeTab, variant } = useTabsContext();
-  if (activeTab !== value) {
-    return null;
-  }
-  const contentClasses = variant === "line" ? `bg-surface-primary border-r border-edge-primary ${className}` : className;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tabpanel",
-      className: contentClasses,
-      style: { height: "auto" },
-      children
-    }
-  );
-}
-var positionStyles = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-  left: "right-full top-1/2 -translate-y-1/2 mr-2",
-  right: "left-full top-1/2 -translate-y-1/2 ml-2"
-};
-var arrowStyles = {
-  top: "top-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-surface-secondary",
-  bottom: "bottom-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-surface-secondary",
-  left: "left-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-surface-secondary",
-  right: "right-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-surface-secondary"
-};
-var sizeStyles7 = {
-  sm: "text-xs",
-  md: "text-xs",
-  lg: "text-sm"
-};
-function Tooltip({
-  content,
-  position = "top",
-  delay = 0,
-  size = "md",
-  children,
-  className = ""
-}) {
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef(null);
-  const showTooltip = () => {
-    if (delay > 0) {
-      timeoutRef.current = setTimeout(() => setIsVisible(true), delay);
-    } else {
-      setIsVisible(true);
-    }
-  };
-  const hideTooltip = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsVisible(false);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `relative inline-flex ${className}`,
-      onMouseEnter: showTooltip,
-      onMouseLeave: hideTooltip,
-      onFocus: showTooltip,
-      onBlur: hideTooltip,
-      children: [
-        children,
-        isVisible && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `
-            absolute z-[1000]
-            px-2 py-1
-            bg-surface-secondary text-content-inverted
-            font-joystix uppercase
-            rounded-sm
-            whitespace-nowrap
-            pointer-events-none
-            ${sizeStyles7[size]}
-            ${positionStyles[position]}
-          `,
-            role: "tooltip",
-            children: [
-              content,
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `
-              absolute
-              border-4 border-solid
-              ${arrowStyles[position]}
-            `
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-var ToastContext = createContext(null);
-function useToast() {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
-}
-function ToastProvider({
-  children,
-  defaultDuration = 5e3,
-  renderIcon,
-  renderCloseIcon
-}) {
-  const [toasts, setToasts] = useState([]);
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  const addToast = useCallback((toast) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    const duration = toast.duration ?? defaultDuration;
-    setToasts((prev) => [...prev, { ...toast, id }]);
-    if (duration > 0) {
-      setTimeout(() => {
-        setToasts((prev) => prev.filter((t) => t.id !== id));
-      }, duration);
-    }
-    return id;
-  }, [defaultDuration]);
-  const removeToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
-    children,
-    mounted && createPortal(
-      /* @__PURE__ */ jsx(
-        ToastViewport,
-        {
-          toasts,
-          removeToast,
-          renderIcon,
-          renderCloseIcon
-        }
-      ),
-      document.body
-    )
-  ] });
-}
-function ToastViewport({ toasts, removeToast, renderIcon, renderCloseIcon }) {
-  if (toasts.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm w-full pointer-events-none",
-      "aria-live": "polite",
-      children: toasts.map((toast) => /* @__PURE__ */ jsx(
-        Toast,
-        {
-          toast,
-          onClose: () => removeToast(toast.id),
-          renderIcon,
-          renderCloseIcon
-        },
-        toast.id
-      ))
-    }
-  );
-}
-var variantStyles6 = {
-  default: "bg-surface-primary border-edge-primary",
-  success: "bg-status-success border-status-success",
-  warning: "bg-status-warning border-surface-tertiary",
-  error: "bg-status-error border-status-error",
-  info: "bg-status-info border-status-info"
-};
-function Toast({ toast, onClose, renderIcon, renderCloseIcon }) {
-  const variant = toast.variant || "default";
-  const displayIcon = toast.icon ?? (renderIcon ? renderIcon(variant) : null);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `
-        pointer-events-auto
-        p-4
-        border-2
-        rounded-sm
-        shadow-[2px_2px_0_0_var(--color-edge-primary)]
-        animate-slideIn
-        ${variantStyles6[variant]}
-      `.trim(),
-      role: "alert",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        displayIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: displayIcon }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-joystix text-xs uppercase text-content-primary", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsx("p", { className: "font-mondwest text-base text-content-primary/70 mt-1", children: toast.description })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "text-content-primary/50 hover:text-content-primary flex-shrink-0 -mt-1",
-            "aria-label": "Close",
-            children: renderCloseIcon ? renderCloseIcon() : /* @__PURE__ */ jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 16 16",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M12 4L4 12M4 4L12 12",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                )
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-}
-function HelpPanel({
-  isOpen,
-  onClose,
-  children,
-  title = "Help",
-  closeButton,
-  className = ""
-}) {
-  const panelRef = useRef(null);
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape" && isOpen) {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose]);
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target) && isOpen) {
-        onClose();
-      }
-    };
-    const timeoutId = setTimeout(() => {
-      document.addEventListener("mousedown", handleClickOutside);
-    }, 100);
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `
-        absolute inset-0 z-50
-        bg-surface-secondary/20
-        flex justify-center items-center
-      `,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          className: `
-          h-full w-full max-w-4xl
-          bg-surface-primary
-          border border-edge-primary
-          shadow-card-lg
-          flex flex-col
-          animate-slide-in-right
-          ${className}
-        `,
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-edge-primary", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-joystix text-xs text-content-primary uppercase", children: title }),
-              closeButton ? /* @__PURE__ */ jsx("span", { onClick: onClose, className: "cursor-pointer", children: closeButton }) : /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: onClose,
-                  className: "text-content-primary/50 hover:text-content-primary p-1",
-                  "aria-label": "Close help panel",
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 16 16",
-                      fill: "none",
-                      xmlns: "http://www.w3.org/2000/svg",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M12 4L4 12M4 4L12 12",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx("div", { className: "font-mondwest text-base text-content-primary space-y-4", children }) })
-          ]
-        }
-      )
-    }
-  );
-}
-var PopoverContext = createContext(null);
-function usePopoverContext() {
-  const context = useContext(PopoverContext);
-  if (!context) {
-    throw new Error("Popover components must be used within a Popover");
-  }
-  return context;
-}
-function Popover({
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  position = "bottom",
-  children
-}) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const triggerRef = useRef(null);
-  const setOpen = useCallback((newOpen) => {
-    if (!isControlled) {
-      setInternalOpen(newOpen);
-    }
-    onOpenChange?.(newOpen);
-  }, [isControlled, onOpenChange]);
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, position }, children });
-}
-function PopoverTrigger({ children, asChild }) {
-  const { open, setOpen, triggerRef } = usePopoverContext();
-  const handleClick = () => {
-    setOpen(!open);
-  };
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
-      onClick: handleClick,
-      ref: triggerRef
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      ref: triggerRef,
-      onClick: handleClick,
-      children
-    }
-  );
-}
-function PopoverContent({ className = "", children, align = "center" }) {
-  const { open, setOpen, triggerRef, position } = usePopoverContext();
-  const contentRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const [coords, setCoords] = useState({ top: 0, left: 0 });
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (!open || !triggerRef.current || !contentRef.current) return;
-    const trigger = triggerRef.current.getBoundingClientRect();
-    const content = contentRef.current.getBoundingClientRect();
-    const gap = 8;
-    let top = 0;
-    let left = 0;
-    switch (position) {
-      case "top":
-        top = trigger.top - content.height - gap;
-        left = trigger.left + (trigger.width - content.width) / 2;
-        break;
-      case "bottom":
-        top = trigger.bottom + gap;
-        left = trigger.left + (trigger.width - content.width) / 2;
-        break;
-      case "left":
-        top = trigger.top + (trigger.height - content.height) / 2;
-        left = trigger.left - content.width - gap;
-        break;
-      case "right":
-        top = trigger.top + (trigger.height - content.height) / 2;
-        left = trigger.right + gap;
-        break;
-    }
-    if (position === "top" || position === "bottom") {
-      if (align === "start") {
-        left = trigger.left;
-      } else if (align === "end") {
-        left = trigger.right - content.width;
-      }
-    }
-    top = Math.max(8, Math.min(top, window.innerHeight - content.height - 8));
-    left = Math.max(8, Math.min(left, window.innerWidth - content.width - 8));
-    setCoords({ top, left });
-  }, [open, position, align, triggerRef]);
-  useClickOutside(open, [contentRef, triggerRef], () => setOpen(false));
-  useEscapeKey(open, () => setOpen(false));
-  if (!mounted || !open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: `
-        fixed z-50
-        bg-surface-primary
-        border-2 border-edge-primary
-        rounded-sm
-        shadow-[2px_2px_0_0_var(--color-edge-primary)]
-        p-4
-        animate-fadeIn
-        ${className}
-      `.trim(),
-        style: { top: coords.top, left: coords.left },
-        children
-      }
-    ),
-    document.body
-  );
-}
-var SheetContext = createContext(null);
-function useSheetContext() {
-  const context = useContext(SheetContext);
-  if (!context) {
-    throw new Error("Sheet components must be used within a Sheet");
-  }
-  return context;
-}
-function Sheet({
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  side = "right",
-  children
-}) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = useCallback((newOpen) => {
-    if (!isControlled) {
-      setInternalOpen(newOpen);
-    }
-    onOpenChange?.(newOpen);
-  }, [isControlled, onOpenChange]);
-  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { open, setOpen, side }, children });
-}
-function SheetTrigger({ children, asChild }) {
-  const { setOpen } = useSheetContext();
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
-      onClick: () => setOpen(true)
-    });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(true), children });
-}
-var sideStyles = {
-  left: {
-    container: "inset-y-0 left-0 h-full w-80 max-w-[90vw]",
-    open: "translate-x-0",
-    closed: "-translate-x-full"
-  },
-  right: {
-    container: "inset-y-0 right-0 h-full w-80 max-w-[90vw]",
-    open: "translate-x-0",
-    closed: "translate-x-full"
-  },
-  top: {
-    container: "inset-x-0 top-0 w-full h-80 max-h-[90vh]",
-    open: "translate-y-0",
-    closed: "-translate-y-full"
-  },
-  bottom: {
-    container: "inset-x-0 bottom-0 w-full h-80 max-h-[90vh]",
-    open: "translate-y-0",
-    closed: "translate-y-full"
-  }
-};
-function SheetContent({ className = "", children }) {
-  const { open, setOpen, side } = useSheetContext();
-  const [mounted, setMounted] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-  const styles = sideStyles[side];
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setIsVisible(true);
-    } else {
-      const timer = setTimeout(() => {
-        setIsVisible(false);
-      }, 200);
-      return () => clearTimeout(timer);
-    }
-  }, [open]);
-  useEscapeKey(open, () => setOpen(false));
-  useLockBodyScroll(open);
-  if (!mounted || !isVisible) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `
-          absolute inset-0 bg-surface-secondary/50
-          transition-opacity duration-200
-          ${open ? "opacity-100" : "opacity-0"}
-        `.trim(),
-          onClick: () => setOpen(false),
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          className: `
-          fixed
-          ${styles.container}
-          bg-surface-primary
-          border-edge-primary
-          ${side === "left" ? "border-r-2" : ""}
-          ${side === "right" ? "border-l-2" : ""}
-          ${side === "top" ? "border-b-2" : ""}
-          ${side === "bottom" ? "border-t-2" : ""}
-          shadow-[4px_4px_0_0_var(--color-edge-primary)]
-          transform transition-transform duration-200 ease-out
-          ${open ? styles.open : styles.closed}
-          ${className}
-        `.trim(),
-          children
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-function SheetHeader({ className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-6 pt-6 pb-4 border-b border-edge-primary/20 ${className}`.trim(), children });
-}
-function SheetTitle({ className = "", children }) {
-  return /* @__PURE__ */ jsx("h2", { className: `font-joystix text-base uppercase text-content-primary ${className}`.trim(), children });
-}
-function SheetDescription({ className = "", children }) {
-  return /* @__PURE__ */ jsx("p", { className: `font-mondwest text-base text-content-primary/70 mt-2 ${className}`.trim(), children });
-}
-function SheetBody({ className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-6 py-4 flex-1 overflow-auto ${className}`.trim(), children });
-}
-function SheetFooter({ className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-6 pb-6 pt-4 border-t border-edge-primary/20 flex justify-end gap-2 ${className}`.trim(), children });
-}
-function SheetClose({ children, asChild }) {
-  const { setOpen } = useSheetContext();
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
-      onClick: () => setOpen(false)
-    });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), children });
-}
-var popoverStyles = `
-  absolute top-12 right-2 z-50 w-72
-  bg-surface-primary border-2 border-edge-primary rounded-sm shadow-lg
-`;
-var headerStyles = `
-  flex items-center justify-between px-3 py-2 border-b border-edge-primary/20
-`;
-var contentStyles = `
-  p-2 space-y-3 max-h-80 overflow-y-auto
-`;
-var categoryLabelStyles = `
-  font-heading text-xs uppercase text-content-secondary px-2 mb-1
-`;
-var footerStyles = `
-  px-3 py-2 border-t border-edge-primary/20 bg-content-primary/5
-`;
-function MockStatesPopover({
-  isOpen,
-  onClose,
-  mockStates,
-  activeMockState,
-  onSelectState,
-  categories,
-  title = "Mock States",
-  footerText = "Dev mode only",
-  className = ""
-}) {
-  if (!isOpen) return null;
-  const derivedCategories = categories ?? [...new Set(mockStates.map((s) => s.category))].map((cat) => ({
-    id: cat,
-    label: cat.charAt(0).toUpperCase() + cat.slice(1)
-  }));
-  const statesByCategory = derivedCategories.map((cat) => ({
-    category: cat,
-    states: mockStates.filter((s) => s.category === cat.id)
-  })).filter((group) => group.states.length > 0);
-  const renderStateButton = (def) => {
-    const isActive = activeMockState === def.id;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => onSelectState(def.id),
-        className: `
-          w-full text-left px-3 py-2 rounded-sm
-          flex items-center gap-2
-          transition-colors duration-150
-          ${isActive ? "bg-action-primary text-content-primary" : "hover:bg-content-primary/5 text-content-primary"}
-        `,
-        children: [
-          def.icon && /* @__PURE__ */ jsx("span", { className: "text-sm", children: def.icon }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("div", { className: "font-heading text-xs uppercase truncate", children: def.name }),
-            /* @__PURE__ */ jsx("div", { className: "font-body text-xs text-content-secondary truncate", children: def.description })
-          ] }),
-          isActive && /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" })
-        ]
-      },
-      def.id
-    );
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-40",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: `${popoverStyles} ${className}`.trim(), children: [
-      /* @__PURE__ */ jsxs("div", { className: headerStyles, children: [
-        /* @__PURE__ */ jsx("span", { className: "font-heading text-xs uppercase", children: title }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            iconOnly: true,
-            onClick: onClose,
-            "aria-label": "Close",
-            children: "\u2715"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: contentStyles, children: statesByCategory.map(({ category, states }) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: categoryLabelStyles, children: category.label }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: states.map(renderStateButton) })
-      ] }, category.id)) }),
-      footerText && /* @__PURE__ */ jsx("div", { className: footerStyles, children: /* @__PURE__ */ jsx("div", { className: "font-body text-xs text-content-secondary text-center", children: footerText }) })
-    ] })
-  ] });
-}
-var baseStyles5 = `
-  text-center
-`;
-var variantStyles7 = {
-  default: {
-    container: "p-4 bg-surface-primary border border-edge-primary rounded-md",
-    label: "font-mono text-xs text-content-primary/60 mb-2",
-    timer: "flex items-center justify-center gap-1",
-    segment: "flex flex-col items-center min-w-[3rem]",
-    value: "font-joystix text-2xl text-content-primary tabular-nums",
-    unit: "font-mono text-2xs text-content-primary/50 uppercase mt-0.5",
-    separator: "font-joystix text-xl text-content-primary/40 self-start mt-1"
-  },
-  compact: {
-    container: "px-3 py-2 bg-surface-primary border border-edge-primary rounded-sm",
-    label: "font-mono text-2xs text-content-primary/60 mb-1",
-    timer: "flex items-center justify-center gap-0.5",
-    segment: "flex flex-col items-center min-w-[2rem]",
-    value: "font-joystix text-sm text-content-primary tabular-nums",
-    unit: "font-mono text-2xs text-content-primary/50 uppercase",
-    separator: "font-joystix text-sm text-content-primary/40 self-start"
-  },
-  large: {
-    container: "p-6 bg-surface-primary border border-edge-primary rounded-md shadow-card",
-    label: "font-mono text-sm text-content-primary/60 mb-3",
-    timer: "flex items-center justify-center gap-2",
-    segment: "flex flex-col items-center min-w-[4rem] bg-surface-muted border border-edge-primary rounded-sm px-3 py-2",
-    value: "font-joystix text-3xl text-content-primary tabular-nums",
-    unit: "font-mono text-xs text-content-primary/50 uppercase mt-1",
-    separator: "font-joystix text-2xl text-content-primary/40 self-center"
-  }
-};
-function getTimeRemaining(endTime) {
-  const end = typeof endTime === "number" ? endTime : endTime.getTime();
-  const total = Math.max(0, end - Date.now());
-  const seconds = Math.floor(total / 1e3 % 60);
-  const minutes = Math.floor(total / 1e3 / 60 % 60);
-  const hours = Math.floor(total / (1e3 * 60 * 60) % 24);
-  const days = Math.floor(total / (1e3 * 60 * 60 * 24));
-  return { days, hours, minutes, seconds, total };
-}
-function getStatus(endTime, startTime) {
-  const now = Date.now();
-  const end = typeof endTime === "number" ? endTime : endTime.getTime();
-  const start = startTime ? typeof startTime === "number" ? startTime : startTime.getTime() : now;
-  if (now < start) return "upcoming";
-  if (now >= end) return "ended";
-  return "active";
-}
-function padZero(num) {
-  return num.toString().padStart(2, "0");
-}
-function CountdownTimer({
-  endTime,
-  startTime,
-  variant = "default",
-  label,
-  onComplete,
-  endedMessage = "Ended",
-  upcomingMessage = "Starting soon",
-  showDays = true,
-  className = ""
-}) {
-  const [timeRemaining, setTimeRemaining] = useState(
-    () => getTimeRemaining(endTime)
-  );
-  const [status, setStatus] = useState(
-    () => getStatus(endTime, startTime)
-  );
-  const updateTime = useCallback(() => {
-    const newTime = getTimeRemaining(endTime);
-    const newStatus = getStatus(endTime, startTime);
-    setTimeRemaining(newTime);
-    setStatus(newStatus);
-    if (newStatus === "ended" && onComplete) {
-      onComplete();
-    }
-  }, [endTime, startTime, onComplete]);
-  useEffect(() => {
-    updateTime();
-    if (status === "ended") return;
-    const interval = setInterval(updateTime, 1e3);
-    return () => clearInterval(interval);
-  }, [updateTime, status]);
-  const styles = variantStyles7[variant];
-  if (status === "ended") {
-    return /* @__PURE__ */ jsxs("div", { className: `${baseStyles5} ${styles.container} ${className}`, children: [
-      label && /* @__PURE__ */ jsx("p", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx("p", { className: `font-joystix ${variant === "large" ? "text-xl" : variant === "compact" ? "text-sm" : "text-lg"} text-content-primary/60`, children: endedMessage })
-    ] });
-  }
-  if (status === "upcoming" && startTime) {
-    const startRemaining = getTimeRemaining(startTime);
-    return /* @__PURE__ */ jsxs("div", { className: `${baseStyles5} ${styles.container} ${className}`, children: [
-      /* @__PURE__ */ jsx("p", { className: styles.label, children: "Starts in" }),
-      /* @__PURE__ */ jsxs("div", { className: styles.timer, children: [
-        showDays && startRemaining.days > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-            /* @__PURE__ */ jsx("span", { className: styles.value, children: startRemaining.days }),
-            /* @__PURE__ */ jsx("span", { className: styles.unit, children: "days" })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(startRemaining.hours) }),
-          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "hrs" })
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
-        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(startRemaining.minutes) }),
-          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "min" })
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
-        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(startRemaining.seconds) }),
-          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "sec" })
-        ] })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: `${baseStyles5} ${styles.container} ${className}`, children: [
-    label && /* @__PURE__ */ jsx("p", { className: styles.label, children: label }),
-    /* @__PURE__ */ jsxs("div", { className: styles.timer, children: [
-      showDays && timeRemaining.days > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.value, children: timeRemaining.days }),
-          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "days" })
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(timeRemaining.hours) }),
-        /* @__PURE__ */ jsx("span", { className: styles.unit, children: "hrs" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
-      /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(timeRemaining.minutes) }),
-        /* @__PURE__ */ jsx("span", { className: styles.unit, children: "min" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
-      /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(timeRemaining.seconds) }),
-        /* @__PURE__ */ jsx("span", { className: styles.unit, children: "sec" })
-      ] })
-    ] })
-  ] });
-}
-function formatAddress(address) {
-  if (!address) return "";
-  if (address.length <= 10) return address;
-  return `${address.slice(0, 4)}...${address.slice(-4)}`;
-}
-function Web3ActionBar({
-  isConnected,
-  walletAddress,
-  onConnect,
-  onDisconnect,
-  disconnectIcon,
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between gap-4 px-2 py-2 bg-surface-primary border-t border-edge-primary shrink-0 ${className}`.trim(), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center", children: !isConnected ? /* @__PURE__ */ jsx(Button, { onClick: onConnect, children: "Connect" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      walletAddress && /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-content-primary", children: formatAddress(walletAddress) }),
-      onDisconnect && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          iconOnly: true,
-          icon: disconnectIcon,
-          onClick: onDisconnect,
-          title: "Disconnect wallet"
-        }
-      )
-    ] }) }),
-    isConnected && children && /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center", children })
-  ] });
-}
-var DialogContext = createContext(null);
-function useDialogContext() {
-  const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error("Dialog components must be used within a Dialog");
-  }
-  return context;
-}
-function Dialog({
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  children
-}) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = useCallback((newOpen) => {
-    if (!isControlled) {
-      setInternalOpen(newOpen);
-    }
-    onOpenChange?.(newOpen);
-  }, [isControlled, onOpenChange]);
-  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { open, setOpen }, children });
-}
-function DialogTrigger({ children, asChild }) {
-  const { setOpen } = useDialogContext();
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
-      onClick: () => setOpen(true)
-    });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(true), children });
-}
-function DialogContent({ className = "", children }) {
-  const { open, setOpen } = useDialogContext();
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEscapeKey(open, () => setOpen(false));
-  useLockBodyScroll(open);
-  if (!mounted || !open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute inset-0 bg-surface-secondary/50 animate-fadeIn",
-          onClick: () => setOpen(false),
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          className: `
-          relative z-10
-          w-full max-w-lg mx-4
-          bg-surface-primary
-          border-2 border-edge-primary
-          rounded-sm
-          shadow-[4px_4px_0_0_var(--color-edge-primary)]
-          animate-scaleIn
-          ${className}
-        `.trim(),
-          children
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-function DialogHeader({ className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-6 pt-6 pb-4 border-b border-edge-primary/20 ${className}`.trim(), children });
-}
-function DialogTitle({ className = "", children }) {
-  return /* @__PURE__ */ jsx("h2", { className: `font-joystix text-base uppercase text-content-primary ${className}`.trim(), children });
-}
-function DialogDescription({ className = "", children }) {
-  return /* @__PURE__ */ jsx("p", { className: `font-mondwest text-base text-content-primary/70 mt-2 ${className}`.trim(), children });
-}
-function DialogBody({ className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-6 py-4 ${className}`.trim(), children });
-}
-function DialogFooter({ className = "", children }) {
-  return /* @__PURE__ */ jsx("div", { className: `px-6 pb-6 pt-4 border-t border-edge-primary/20 flex justify-end gap-2 ${className}`.trim(), children });
-}
-function DialogClose({ children, asChild }) {
-  const { setOpen } = useDialogContext();
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
-      onClick: () => setOpen(false)
-    });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), children });
-}
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Badge, Breadcrumbs, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, CountdownTimer, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, HelpPanel, Input, Label, MockStatesPopover, Popover, PopoverContent, PopoverTrigger, Progress, Radio, Select, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Slider, Spinner, Switch, TabContent, TabList, TabTrigger, Tabs, TextArea, ToastProvider, Tooltip, Web3ActionBar, useToast };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map