@formant/ava-react/lib/InsightCard/Title/customStyled.js

React components of AVA.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/InsightCard/Title/customStyled.tsx
var customStyled_exports = {};
__export(customStyled_exports, {
  Alert: () => Alert,
  AlertDescription: () => AlertDescription,
  AlertTitle: () => AlertTitle,
  AlertTitleRow: () => AlertTitleRow,
  Badge: () => Badge,
  Card: () => Card,
  CardContent: () => CardContent,
  CardDescription: () => CardDescription,
  CardHeader: () => CardHeader,
  CardTitle: () => CardTitle,
  HeaderContainer: () => HeaderContainer,
  Highlight: () => Highlight,
  TitleContainer: () => TitleContainer,
  TooltipContainer: () => TooltipContainer,
  TooltipContent: () => TooltipContent,
  TooltipIcon: () => TooltipIcon
});
module.exports = __toCommonJS(customStyled_exports);
var import_styled_components = __toESM(require("styled-components"));
var import_lucide_react = require("lucide-react");
var Card = import_styled_components.default.div`
  background-color: 282f45;
  border-radius: 8px;
`;
var CardHeader = import_styled_components.default.div`
  padding: 0.5rem 0.5rem  0.25rem;
  white-space:nowrap;
`;
var HeaderContainer = import_styled_components.default.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
var TitleContainer = import_styled_components.default.div``;
var CardTitle = import_styled_components.default.h2`
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
`;
var CardDescription = import_styled_components.default.p`
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
`;
var Badge = import_styled_components.default.span`
  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 = import_styled_components.default.div`
  padding: 0 1.25rem 1.25rem;
`;
var Alert = import_styled_components.default.div`
  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 = import_styled_components.default.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
`;
var AlertTitle = import_styled_components.default.h3`
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
  color: var(--color-text-primary);
`;
var AlertDescription = import_styled_components.default.p`
  font-size: 0.75rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text-primary);
`;
var Highlight = import_styled_components.default.span`
  font-weight: 600;
`;
var TooltipContainer = import_styled_components.default.div`
  position: relative;
  display: inline-block;
`;
var TooltipIcon = (0, import_styled_components.default)(import_lucide_react.Info)`
  width: 1.25rem;
  height: 1.25rem;
  color: var(--formant-steel-01);
  cursor: help;
`;
var TooltipContent = import_styled_components.default.div`
  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;
  
  ${TooltipContainer}: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;
  }
`;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Alert,
  AlertDescription,
  AlertTitle,
  AlertTitleRow,
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  HeaderContainer,
  Highlight,
  TitleContainer,
  TooltipContainer,
  TooltipContent,
  TooltipIcon
});