1  import { Slot } from "@radix-ui/react-slot";
  2  import { cva, VariantProps } from "class-variance-authority";
  3  import { cn } from "../Wallet/lib/utils";
  4  import * as React from "react";
  5  
  6  const boxVariants = cva("p-0 m-0 transition-colors", {
  7    variants: {
  8      color: {
  9        default: "text-foreground",
 10        primary: "text-primary",
 11        secondary: "text-secondary",
 12        error: "text-error",
 13        success: "text-success",
 14        warning: "text-warning",
 15        info: "text-info",
 16        muted: "text-gray-500",
 17      },
 18      hoverColor: {
 19        primary: "hover:text-primary-dark",
 20        secondary: "hover:text-secondary-dark",
 21        error: "hover:text-error-dark",
 22        success: "hover:text-success-dark",
 23        warning: "hover:text-warning-dark",
 24        info: "hover:text-info-dark",
 25        muted: "hover:text-gray-700",
 26      },
 27      bgColor: {
 28        primary: "bg-primary",
 29        secondary: "bg-secondary",
 30        error: "bg-error",
 31        success: "bg-success",
 32        warning: "bg-warning",
 33        info: "bg-info",
 34        muted: "bg-gray-400",
 35      },
 36      hoverBgColor: {
 37        primary: "hover:bg-primary/50",
 38        secondary: "hover:bg-secondary/50",
 39        error: "hover:bg-error/50",
 40        success: "hover:bg-success/50",
 41        warning: "hover:bg-warning/50",
 42        info: "hover:bg-info/50",
 43        muted: "hover:bg-gray-200",
 44      },
 45      hoverable: {
 46        true: "hover:text-foreground",
 47      },
 48    },
 49    defaultVariants: {
 50      color: "default",
 51    },
 52  });
 53  
 54  export interface BoxProps
 55    extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
 56      VariantProps<typeof boxVariants> {
 57    asChild?: boolean;
 58    hoverable?: boolean;
 59  }
 60  
 61  const Box = React.forwardRef<HTMLDivElement, BoxProps>(
 62    (
 63      {
 64        asChild,
 65        color,
 66        bgColor,
 67        hoverColor,
 68        hoverBgColor,
 69        hoverable,
 70        children,
 71        className,
 72        ...props
 73      },
 74      ref,
 75    ) => {
 76      const Comp = asChild ? Slot : "div";
 77  
 78      return (
 79        <Comp
 80          ref={ref}
 81          className={cn(
 82            boxVariants({
 83              color,
 84              bgColor,
 85              hoverColor,
 86              hoverBgColor,
 87              hoverable,
 88            }),
 89            className,
 90          )}
 91          {...props}
 92        >
 93          {children}
 94        </Comp>
 95      );
 96    },
 97  );
 98  
 99  Box.displayName = "Box";
100  
101  export { Box };