agency/.pnpm-store/v3/files/89/46d60ba1b538be7ca8d1504e6fce6bb22f3b6d5f4f6b6e0e7f1cc109099696eed33d36d9bf07ab9d4e67c1fa5b06a552556965609b8da2814f61f069dd9ec5

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getColorSVG, getMonoSVG, getWhiteSVG, getLightSVG, getFaviconSVG, getAnimatedSVG, getMenuBarSVG } from './logos.js';
import { MOTION_CSS } from './motion.js';
/**
 * React component for Hanzo logo
 *
 * @example
 * ```tsx
 * import { HanzoLogo } from '@hanzo/logo';
 *
 * <HanzoLogo size={64} />
 * <HanzoLogo variant="mono" size="2rem" />
 * <HanzoLogo variant="white" className="w-16 h-16" />
 * ```
 */
export const HanzoLogo = ({ variant = 'current', size = 64, className, style, animated = false, wordmark = 'Hanzo' }) => {
    if (animated) {
        return (_jsxs("span", { className: className, style: style, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: MOTION_CSS } }), _jsxs("span", { className: "hanzo-motion", children: [_jsx("span", { className: "hanzo-mark", style: { width: size, height: size }, dangerouslySetInnerHTML: { __html: getMenuBarSVG() } }), _jsx("span", { className: "hanzo-word", children: _jsx("span", { children: wordmark }) })] })] }));
    }
    let svg = '';
    switch (variant) {
        case 'mono':
            svg = getMonoSVG();
            break;
        case 'white':
            svg = getWhiteSVG();
            break;
        case 'light':
            svg = getLightSVG();
            break;
        case 'current':
            // Inherits the surrounding text colour, so an inline mark needs no filter
            // and no second asset per theme.
            svg = getMenuBarSVG();
            break;
        case 'favicon':
            svg = getFaviconSVG();
            break;
        case 'animated':
            svg = getAnimatedSVG();
            break;
        case 'color':
            svg = getColorSVG();
            break;
        default:
            svg = getMenuBarSVG();
    }
    const sizeStyle = typeof size === 'number'
        ? { width: size, height: size }
        : { width: size, height: size };
    return (_jsx("div", { className: className, style: { ...sizeStyle, ...style }, dangerouslySetInnerHTML: { __html: svg } }));
};
/**
 * Hanzo favicon component for <head>
 *
 * @example
 * ```tsx
 * import { HanzoFavicon } from '@hanzo/logo';
 *
 * // In your app's <head>
 * <HanzoFavicon />
 * ```
 */
export const HanzoFavicon = () => {
    const svg = getFaviconSVG();
    const dataUrl = `data:image/svg+xml,${encodeURIComponent(svg)}`;
    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "icon", type: "image/svg+xml", href: dataUrl }), _jsx("link", { rel: "apple-touch-icon", href: dataUrl })] }));
};