import { tcv } from "@choiceform/design-system";
const MessageAttachmentsTv = tcv({
  slots: {
    root: "flex flex-wrap gap-2",
    item: "group relative flex items-center justify-center overflow-hidden rounded-lg bg-white",
    image: "max-h-32 max-w-48 object-contain",
    imageOverlay: [
      "absolute inset-0 p-2 opacity-0 transition-opacity group-hover:opacity-100",
      "bg-gradient-to-t from-black/60 via-transparent to-transparent",
      "flex flex-col items-start justify-end"
    ],
    name: "w-full min-w-0 justify-start text-left",
    size: "text-body-small",
    fileIcon: [
      "flex w-full flex-1 items-center justify-center rounded-md p-1",
      "bg-secondary-background"
    ],
    fileContent: "text-default-foreground absolute right-2 bottom-2 left-2",
    loadingContainer: "bg-secondary-background absolute inset-0 flex flex-col items-center justify-center gap-2",
    errorText: "text-error-foreground text-body-small"
  },
  variants: {
    mode: {
      image: {
        name: "text-white",
        size: "text-white/80"
      },
      file: {
        item: "flex h-32 w-32 flex-col items-center justify-center px-2 pt-2 pb-12"
      }
    },
    isLoading: {
      true: {
        item: "aspect-square h-32"
      }
    },
    isError: {
      true: {
        item: "aspect-square h-32",
        image: "opacity-0"
      }
    },
    isSelected: {
      true: {
        item: "border-selected-boundary ring-accent-background ring-offset-default-background ring-1 ring-offset-1"
      },
      false: {
        item: "shadow-inset-border"
      }
    }
  },
  defaultVariants: {
    mode: "image",
    isLoading: false,
    isSelected: false
  }
});
export {
  MessageAttachmentsTv
};
//# sourceMappingURL=tv.js.map
