"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const designSystem = require("@choiceform/design-system");
const MessageMermaidDiagramTv = designSystem.tcv({
  slots: {
    root: "bg-background flex flex-col",
    header: "border-b px-6 py-4",
    title: "text-heading-display",
    container: "flex flex-col",
    toolbar: "bg-muted/30 flex items-center justify-between border-b px-4 py-2",
    toolbarLeft: "flex items-center gap-2",
    toolbarRight: "flex items-center gap-1",
    label: "text-body-small-strong",
    sublabel: "text-muted-foreground text-xs",
    button: "text-muted-foreground hover:bg-muted hover:text-foreground rounded p-1.5 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
    content: "relative flex-1",
    diagram: "flex h-full w-full items-center justify-center overflow-auto p-8",
    code: "bg-muted/30 overflow-auto p-4 font-mono text-body-small",
    loading: "bg-background/80 absolute inset-0 flex items-center justify-center backdrop-blur-sm",
    error: "text-destructive p-8 text-center"
  },
  variants: {
    variant: {
      default: {
        root: "rounded-lg border"
      },
      ghost: {
        root: "",
        container: "rounded-lg border"
      }
    },
    size: {
      sm: {
        root: "max-h-[400px]",
        diagram: "p-4"
      },
      md: {
        root: "max-h-[600px]",
        diagram: "p-8"
      },
      lg: {
        root: "max-h-[800px]",
        diagram: "p-12"
      }
    }
  },
  defaultVariants: {
    variant: "default",
    size: "md"
  }
});
exports.MessageMermaidDiagramTv = MessageMermaidDiagramTv;
//# sourceMappingURL=tv.cjs.map
