// BuiltByRedBit — small "built by [logo]" credit pinned below the sign-in card.
//
// Ported from deliverable/report-viewer/components/BuiltByRedBit.jsx. The label
// types in like a typewriter on first mount, then the logo transitions in via
// one of three variants:
// "fade" — logo fades + slides up
// "wipe" — logo unmasks left-to-right via clip-path
// "fill" — inlined wordmark starts grey, then a red layer fills L→R on top
//
// Differences from the report-viewer original:
// - Config comes from optional props instead of window.REPORT_MANIFEST.
// - Default animation is "fill" (the variant the portal uses).
// - The fade/wipe variants reference assets/logos/redbit-logo-red.svg (the
// portal's logo file); fill uses inlined paths and is self-contained.
const { useState, useEffect } = React;
// Inlined wordmark used only by the "fill" variant. Source paths come from the
// `LightDark_Logo` group in assets/logos/redbit-logo-red.svg — the only group
// with positive Y coordinates that renders inside the SVG viewBox. We render
// the wordmark twice: a grey base layer and a red overlay whose clip-path is
// animated by .hb-builtby-fill-overlay in auth.css.
function RedBitWordmarkInline({ className }) {
const wordmarkPaths = [
"M1452.09,668.92l-67.64,0.11l-156.33-212.6v212.6h-52.31V252.84l154.11,1.69c29.61,0,53.89,11.24,72.84,33.75c18.91,22.49,28.39,48.54,28.39,78.17c0,15.75-2.73,30.36-8.15,43.86c-5.44,13.51-14.33,25.86-26.69,37.12c-13.85,11.26-29.02,19.32-45.5,24.19l-55.06-0.11L1452.09,668.92z M1337.78,302.89c-4.89-1.85-10.05-3.47-15.49-4.78c-5.43-1.31-10.38-1.95-14.9-1.95h-79.29v139.47h92.79c18,0,31.97-6.27,41.9-18.84c9.94-12.56,14.9-27.85,14.9-45.84c0-14.99-3.38-28.68-10.12-41.04C1360.84,317.53,1350.89,308.52,1337.78,302.89z",
"M1958.66,669.02h-226.09V252.84h226.09v44.99h-176.03V421h176.03v42.75h-176.03v160.29h176.03V669.02z",
"M2504.18,645.97c-14.62,7.13-29.23,12.75-43.85,16.86c-14.64,4.14-29.07,6.19-43.32,6.19h-157.47V252.84h177.15c52.88,5.25,94.69,28.59,125.43,70.03c30.74,41.43,46.11,88.76,46.11,142.01c0,39.36-8.62,75.18-25.86,107.41C2565.12,604.53,2539.07,629.11,2504.18,645.97z M2553.1,433.94c-2.98-32.62-15.64-61.49-37.94-86.6c-22.31-25.13-49.6-41.24-81.82-48.39h-124.87v325.09h107.43c42.36,0,76.1-16.86,101.21-50.61c25.12-33.75,37.69-72.18,37.69-115.3C2554.81,449.89,2554.25,441.83,2553.1,433.94z",
"M3081.22,409.41c-10.87,19.02-27.19,31.69-48.92,38.02c25.1,4.91,44.71,17.29,58.76,37.23c14.06,19.91,21.1,42.46,21.1,67.65c0,18.8-3.66,36.27-10.97,52.43c-7.32,16.18-18.28,29.9-32.89,41.17c-9,5.63-18.94,10.42-29.82,14.37c-10.87,3.96-21.94,6.85-33.17,8.74h-149.04V252.84l129.36,1.69c29.99,0,55.67,10.82,77.04,32.45c21.36,21.59,32.06,46.39,32.06,74.33C3094.72,377.72,3090.22,393.76,3081.22,409.41z M3042.41,350.83c-4.13-17.48-13.4-30.97-27.84-40.46c-14.43-9.47-31.02-14.21-49.78-14.21h-60.74v139.47h77.61c19.49-2.97,34.68-10.8,45.56-23.43c10.87-12.64,16.31-28.27,16.31-46.86c0-2.24-0.2-4.84-0.56-7.81C3042.6,354.56,3042.41,352.34,3042.41,350.83z M3031.17,491.47c-6.76-4.54-14.26-8.22-22.5-11.1c-8.26-2.83-16.33-4.25-24.19-4.25h-80.43v153.54l90.54-1.14c20.25-2.65,36.19-11.17,47.81-25.59c11.62-14.39,17.44-31.26,17.44-50.62c0-12.11-2.34-23.29-7.03-33.53C3048.12,508.53,3040.91,499.44,3031.17,491.47z",
"M3560.38,669.02h-48.92V252.84h48.92V669.02z",
"M4244.26,296.71h-119.78v372.31h-51.75V296.71h-119.79v-43.87h291.32V296.71z",
];
const markPolygons = [
"243,553.06 370.23,626.5 370.23,479.62 243,406.16",
"562.15,406.16 434.93,479.61 434.93,626.51 562.15,553.06",
"529.8,350.13 402.59,276.68 275.35,350.13 402.58,423.57",
];
const markBody = "M402.46,67.43L61.62,264.17V657.7l340.83,196.74L743.2,657.7V264.17L402.46,67.43z M678.49,620.33l-248.53,143.5v-59.81l-27.54,15.9L375.2,704.2v59.78L126.33,620.33V356.08l51.81,29.91v-54.54l17.46-10.08l-51.81-29.91l258.67-149.3L648.12,284l-49.59,31.09l28.33,16.36v42.24l51.63-32.37V620.33z";
const greyFill = "#8D99AE";
const redFill = "#CD2027";
const whiteFill = "#FFFFFF";
return (
);
}
function BuiltByRedBit(props) {
const cfg = props || {};
if (cfg.enabled === false) return null;
const label = typeof cfg.label === "string" ? cfg.label : "built by";
const href = typeof cfg.href === "string" ? cfg.href : "https://www.redbitdev.com";
const anim = ["fade", "wipe", "fill"].includes(cfg.animation) ? cfg.animation : "fill";
const typeMs = Number.isFinite(cfg.typeDurationMs) ? cfg.typeDurationMs : 680;
const reduced = typeof window.matchMedia === "function" &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const [typed, setTyped] = useState(reduced ? label : "");
const [caretOn, setCaretOn] = useState(!reduced);
useEffect(() => {
if (reduced) return;
const perChar = Math.max(20, Math.floor(typeMs / Math.max(label.length, 1)));
let i = 0;
const id = setInterval(() => {
i += 1;
setTyped(label.slice(0, i));
if (i >= label.length) {
clearInterval(id);
setTimeout(() => setCaretOn(false), 220);
}
}, perChar);
return () => clearInterval(id);
// run once per page load — intentionally no deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const style = { "--hb-builtby-type-ms": `${typeMs}ms` };
return (
{typed}
{anim === "fill" ? (
) : (
)}
);
}
window.BuiltByRedBitAuth = BuiltByRedBit;
)}
);
}
window.BuiltByRedBitAuth = BuiltByRedBit;