/* DLG UI kit · primitive components. All atoms — buttons, fields, badges, cards, seal, layout helpers. Exposed on window so other Babel scripts can use them. */ // ── Icons (Lucide outlines, inlined to avoid a CDN dependency at runtime) ── const Icon = ({ d, size = 18, stroke = 1.75, fill = "none", style }) => ( ); const Icons = { shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", award: "M12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8.5 14.5L7 22l5-3 5 3-1.5-7.5", file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M8 13h8 M8 17h6", check: "M20 6L9 17l-5-5", checkc: "M9 12l2 2 4-4 M12 22A10 10 0 1 0 12 2a10 10 0 0 0 0 20z", arrowR: "M5 12h14 M12 5l7 7-7 7", arrowL: "M19 12H5 M12 19l-7-7 7-7", download: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3", phone: "M22 16.92V21a1 1 0 0 1-1.1 1A19.9 19.9 0 0 1 2 4.1 1 1 0 0 1 3 3h4.09a1 1 0 0 1 1 .75l1.2 4.8a1 1 0 0 1-.27 1L8 11a16 16 0 0 0 6 6l1.45-1a1 1 0 0 1 1-.27l4.8 1.2a1 1 0 0 1 .75 1z", mail: "M3 7l9 6 9-6 M3 5h18v14H3z", pin: "M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", user: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", menu: "M3 6h18 M3 12h18 M3 18h18", search: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.3-4.3", cal: "M3 4h18v18H3z M16 2v4 M8 2v4 M3 10h18", info: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 8v4 M12 16h.01", chev: "M9 18l6-6-6-6", ext: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14L21 3", dot: "M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z", }; // ── Button ───────────────────────────────────────────────────────────────── const Button = ({ variant = "primary", size = "md", icon, iconRight, children, ...rest }) => { const cls = `dlg-btn dlg-btn--${variant} dlg-btn--${size}`; return ( ); }; // ── Eyebrow / SectionLabel ──────────────────────────────────────────────── const Eyebrow = ({ tone = "navy", children }) => (
{children}
); // ── Notice (left-bar callout) ───────────────────────────────────────────── const Notice = ({ tone = "info", title, children, meta }) => (
{title &&

{title}

} {children &&

{children}

} {meta &&
{meta}
}
); // ── Status badge / tier pill ────────────────────────────────────────────── const Badge = ({ tone = "neutral", children }) => ( {children} ); const TierPill = ({ tier }) => ( {tier} ); // ── Field group ─────────────────────────────────────────────────────────── const Field = ({ label, hint, error, required, children }) => (
{children} {(error || hint) &&
{error || hint}
}
); // ── Card surface ────────────────────────────────────────────────────────── const Card = ({ accent, padded = true, children, style }) => (
{children}
); // ── Decorative seal in copy ─────────────────────────────────────────────── const Seal = ({ size = 64, src = "../../assets/dlg-seal.svg", alt = "DLG" }) => ( {alt} ); // ── Inline crest "official" stamp (used in headers, footers) ────────────── const OfficialStamp = ({ children = "Akkreditierte Zertifizierungsstelle" }) => ( {children} ); // ── Statistic (used on hero + dashboard) ────────────────────────────────── const Stat = ({ value, label, hint }) => (
{value}
{label}
{hint &&
{hint}
}
); // ── Inline base stylesheet for components ───────────────────────────────── const ComponentStyles = () => ( ); Object.assign(window, { Icon, Icons, Button, Eyebrow, Notice, Badge, TierPill, Field, Card, Seal, OfficialStamp, Stat, ComponentStyles });