@formant/ava-react
Version:
React components of AVA.
67 lines • 3.96 kB
JavaScript
import styled from "styled-components";
import { Info } from "lucide-react";
var Card = styled.div.withConfig({
displayName: "Card",
componentId: "ava-react-d63f__sc-empco7-0"
})(["background-color:282f45;border-radius:8px;"]);
var CardHeader = styled.div.withConfig({
displayName: "CardHeader",
componentId: "ava-react-d63f__sc-empco7-1"
})(["padding:0.5rem 0.5rem 0.25rem;white-space:nowrap;"]);
var HeaderContainer = styled.div.withConfig({
displayName: "HeaderContainer",
componentId: "ava-react-d63f__sc-empco7-2"
})(["display:flex;align-items:center;justify-content:space-between;"]);
var TitleContainer = styled.div.withConfig({
displayName: "TitleContainer",
componentId: "ava-react-d63f__sc-empco7-3"
})([""]);
var CardTitle = styled.h2.withConfig({
displayName: "CardTitle",
componentId: "ava-react-d63f__sc-empco7-4"
})(["font-size:1.25rem;font-weight:600;color:var(--color-text-primary);margin:0;display:flex;align-items:center;"]);
var CardDescription = styled.p.withConfig({
displayName: "CardDescription",
componentId: "ava-react-d63f__sc-empco7-5"
})(["margin-top:0.25rem;font-size:0.875rem;color:var(--color-text-secondary);"]);
var Badge = styled.span.withConfig({
displayName: "Badge",
componentId: "ava-react-d63f__sc-empco7-6"
})(["display:inline-flex;align-items:center;background-color:var(--color-severity-critical);color:white;font-size:0.75rem;font-weight:500;padding:0.125rem 0.5rem;border-radius:9999px;margin-left:0.75rem;margin-right:0.75rem;"]);
var CardContent = styled.div.withConfig({
displayName: "CardContent",
componentId: "ava-react-d63f__sc-empco7-7"
})(["padding:0 1.25rem 1.25rem;"]);
var Alert = styled.div.withConfig({
displayName: "Alert",
componentId: "ava-react-d63f__sc-empco7-8"
})(["display:flex;flex-direction:column;background-color:var(--formant-steel-01);border:2px solid var(--color-border-primary);border-radius:6px;padding:0.75rem;margin-bottom:1rem;"]);
var AlertTitleRow = styled.div.withConfig({
displayName: "AlertTitleRow",
componentId: "ava-react-d63f__sc-empco7-9"
})(["display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem;"]);
var AlertTitle = styled.h3.withConfig({
displayName: "AlertTitle",
componentId: "ava-react-d63f__sc-empco7-10"
})(["font-size:0.875rem;font-weight:500;margin:0;color:var(--color-text-primary);"]);
var AlertDescription = styled.p.withConfig({
displayName: "AlertDescription",
componentId: "ava-react-d63f__sc-empco7-11"
})(["font-size:0.75rem;margin:0;padding-left:1.25rem;color:var(--color-text-primary);"]);
var Highlight = styled.span.withConfig({
displayName: "Highlight",
componentId: "ava-react-d63f__sc-empco7-12"
})(["font-weight:600;"]);
var TooltipContainer = styled.div.withConfig({
displayName: "TooltipContainer",
componentId: "ava-react-d63f__sc-empco7-13"
})(["position:relative;display:inline-block;"]);
var TooltipIcon = styled(Info).withConfig({
displayName: "TooltipIcon",
componentId: "ava-react-d63f__sc-empco7-14"
})(["width:1.25rem;height:1.25rem;color:var(--formant-steel-01);cursor:help;"]);
var TooltipContent = styled.div.withConfig({
displayName: "TooltipContent",
componentId: "ava-react-d63f__sc-empco7-15"
})(["position:absolute;top:100%;right:-5px;max-width:22rem;white-space:nowrap;padding:0.5rem;background-color:var(--color-background-surface);color:var(--color-text-primary);border-radius:4px;font-size:0.75rem;z-index:10;opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s;", ":hover &{opacity:1;visibility:visible;}&::before{content:'';position:absolute;top:-6px;right:10px;border-width:0 6px 6px 6px;border-style:solid;border-color:transparent transparent var(--color-background-surface) transparent;}"], TooltipContainer);
export { Card, CardHeader, HeaderContainer, TitleContainer, CardTitle, CardDescription, Badge, CardContent, Alert, AlertTitleRow, AlertTitle, AlertDescription, Highlight, TooltipContainer, TooltipIcon, TooltipContent };