goji-search 1.0.0

package/dist/goji-search/components/elements/message-list.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useId } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { ExternalLink, User, X, Maximize2, Minimize2 } from "lucide-react";
+export function MessageList({ messages, isStreaming, aiAvatarSrc = '', onClose, onExpand, size = 'l', }) {
+    const messagesEndRef = useRef(null);
+    const [hoverTopExpand, setHoverTopExpand] = useState(false);
+    const [hoverTopClose, setHoverTopClose] = useState(false);
+    const idBase = useId();
+    const xTooltipId = `${idBase}-x-tip`;
+    const expandTooltipId = `${idBase}-expand-tip`;
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messages]);
+    const lastMessage = messages[messages.length - 1];
+    const showThinkingDots = isStreaming && (!lastMessage || lastMessage.role !== "assistant" || !lastMessage.content);
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            flex: 1,
+            overflowY: "auto",
+            marginTop: "0",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.75rem",
+            padding: "0.5rem",
+            borderRadius: "0.75rem",
+            backgroundColor: "rgba(255, 255, 255, 0.08)",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+        }, className: "custom-scrollbar", children: [_jsxs("div", { style: { display: 'flex', gap: '0.5rem', zIndex: 20, justifyContent: 'flex-end', paddingTop: '0' }, children: [onExpand && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: onExpand, onMouseEnter: () => setHoverTopExpand(true), onMouseLeave: () => setHoverTopExpand(false), "aria-label": size === 'xl' ? 'Restore' : 'Expand', "aria-describedby": hoverTopExpand ? expandTooltipId : undefined, style: {
+                                    borderRadius: '1.3rem',
+                                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                                    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+                                    padding: '0.375rem',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    color: 'rgba(0, 0, 0, 0.75)',
+                                    transition: 'all 0.15s',
+                                    cursor: 'pointer',
+                                    outline: 'none',
+                                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.2)',
+                                }, children: size === 'xl' ? _jsx(Minimize2, { style: { width: '0.9rem', height: '0.9rem' } }) : _jsx(Maximize2, { style: { width: '0.9rem', height: '0.9rem' } }) }), _jsx("span", { id: expandTooltipId, role: "tooltip", style: {
+                                    position: 'absolute',
+                                    top: 'calc(100% + 0.4rem)',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    whiteSpace: 'nowrap',
+                                    background: 'rgba(0,0,0,0.9)',
+                                    color: '#fff',
+                                    padding: '4px 6px',
+                                    borderRadius: '1.3rem',
+                                    fontSize: '0.55rem',
+                                    boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
+                                    opacity: hoverTopExpand ? 1 : 0,
+                                    pointerEvents: 'none',
+                                    transition: 'opacity 120ms ease-in-out',
+                                    zIndex: 30,
+                                }, children: size === 'xl' ? 'Restore' : 'Expand' })] })), onClose && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: onClose, onMouseEnter: () => setHoverTopClose(true), onMouseLeave: () => setHoverTopClose(false), "aria-label": "Close", "aria-describedby": hoverTopClose ? xTooltipId : undefined, style: {
+                                    borderRadius: '1.3rem',
+                                    border: '1px solid rgba(255, 255, 255, 0.3)',
+                                    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+                                    padding: '0.375rem',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    color: 'rgba(0, 0, 0, 0.75)',
+                                    transition: 'all 0.15s',
+                                    cursor: 'pointer',
+                                    outline: 'none',
+                                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.2)',
+                                }, children: _jsx(X, { style: { width: '0.9rem', height: '0.9rem' } }) }), _jsx("span", { id: xTooltipId, role: "tooltip", style: {
+                                    position: 'absolute',
+                                    top: 'calc(100% + 0.4rem)',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    whiteSpace: 'nowrap',
+                                    background: 'rgba(0,0,0,0.9)',
+                                    color: '#fff',
+                                    padding: '4px 6px',
+                                    borderRadius: '1.3rem',
+                                    fontSize: '0.55rem',
+                                    boxShadow: '0 6px 18px rgba(0,0,0,0.35)',
+                                    opacity: hoverTopClose ? 1 : 0,
+                                    pointerEvents: 'none',
+                                    transition: 'opacity 120ms ease-in-out',
+                                    zIndex: 30,
+                                }, children: "Close" })] }))] }), messages.map((message, index) => (_jsxs("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: message.role === "user" ? "flex-end" : "flex-start",
+                    animation: "fadeIn 0.3s ease-in",
+                    gap: "0.375rem",
+                }, children: [_jsx("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.5rem",
+                            flexDirection: message.role === "user" ? "row-reverse" : "row"
+                        }, children: _jsx("div", { style: {
+                                width: "1.75rem",
+                                height: "1.75rem",
+                                borderRadius: message.role === "user" ? "50%" : "0.75rem",
+                                backgroundColor: message.role === "user" ? "rgba(255, 255, 255, 0.15)" : "rgba(114, 126, 237, 0.15)",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontSize: "0.75rem",
+                                color: "rgb(114, 126, 237)",
+                                border: message.role === "user"
+                                    ? "1px solid rgba(114, 126, 237, 0.3)"
+                                    : "1px dashed rgba(114, 126, 237, 0.3)",
+                                boxShadow: message.role === "user" ? "0 2px 4px rgba(0,0,0,0.05)" : "none",
+                            }, children: message.role === "user" ? (_jsx(User, { size: 16, color: "rgb(114, 126, 237)" })) : (aiAvatarSrc ? (_jsx("img", { src: aiAvatarSrc, alt: "AI Avatar", style: {
+                                    width: "100%",
+                                    height: "100%",
+                                    borderRadius: "inherit",
+                                    objectFit: "cover"
+                                } })) : (_jsx("div", { style: {
+                                    width: "100%",
+                                    height: "100%",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    fontSize: "0.75rem",
+                                    color: "rgb(114, 126, 237)"
+                                }, children: "AI" }))) }) }), _jsxs("div", { style: {
+                            maxWidth: "85%",
+                            padding: message.role === "user" ? "0.275rem 0.75rem" : "0.5rem 0",
+                            borderRadius: message.role === "user" ? "1rem" : "0",
+                            fontSize: "0.875rem",
+                            marginLeft: message.role === "user" ? "0" : "1rem",
+                            marginRight: message.role === "user" ? "1rem" : "0",
+                            lineHeight: "1.6",
+                            backgroundColor: message.role === "user" ? "rgb(114, 126, 237)" : "transparent",
+                            color: message.role === "user" ? "white" : "rgba(0, 0, 0, 0.85)",
+                            border: message.role === "user" ? "1px solid rgba(255, 255, 255, 0.25)" : "none",
+                        }, children: [message.role === "user" ? (_jsx("p", { style: { margin: 0, whiteSpace: "pre-wrap" }, children: message.content })) : (_jsx("div", { className: "markdown-content", style: {
+                                    fontSize: "0.875rem",
+                                    lineHeight: "1.7",
+                                    color: "rgba(0, 0, 0, 0.85)",
+                                }, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content }) })), message.role === "assistant" && message.sources && message.sources.length > 0 && (_jsxs("div", { style: {
+                                    marginTop: "1rem",
+                                    paddingTop: "0.75rem",
+                                    borderTop: "1px solid rgba(0, 0, 0, 0.1)",
+                                }, children: [_jsx("p", { style: {
+                                            fontSize: "0.65rem",
+                                            fontWeight: 600,
+                                            textTransform: "uppercase",
+                                            letterSpacing: "0.05em",
+                                            color: "rgba(0, 0, 0, 0.5)",
+                                            marginBottom: "0.5rem",
+                                        }, children: "Sources" }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: message.sources.map((source) => (_jsxs("a", { href: source.url, target: "_blank", rel: "noopener noreferrer", style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: "0.5rem",
+                                                fontSize: "0.75rem",
+                                                color: "rgba(0, 0, 0, 0.7)",
+                                                textDecoration: "none",
+                                                transition: "color 0.2s",
+                                            }, onMouseEnter: (e) => {
+                                                e.currentTarget.style.color = "rgba(0, 0, 0, 0.9)";
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.color = "rgba(0, 0, 0, 0.7)";
+                                            }, children: [_jsxs("span", { style: {
+                                                        backgroundColor: "rgba(0, 0, 0, 0.1)",
+                                                        padding: "0.125rem 0.375rem",
+                                                        borderRadius: "0.375rem",
+                                                        fontSize: "0.65rem",
+                                                        fontWeight: 600,
+                                                    }, children: ["#", source.index] }), _jsx("span", { style: { flex: 1, wordBreak: "break-all" }, children: source.url }), _jsx(ExternalLink, { style: { width: "0.875rem", height: "0.875rem", opacity: 0.6 } })] }, source.index))) })] }))] })] }, index))), showThinkingDots && (_jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: _jsxs("div", { style: {
+                        padding: "0.75rem 0.6rem",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        gap: "0.375rem",
+                    }, children: [_jsx("span", { style: {
+                                width: "0.5rem",
+                                height: "0.5rem",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                                animation: "pulse 1.4s ease-in-out infinite",
+                            } }), _jsx("span", { style: {
+                                width: "0.5rem",
+                                height: "0.5rem",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                                animation: "pulse 1.4s ease-in-out 0.2s infinite",
+                            } }), _jsx("span", { style: {
+                                width: "0.5rem",
+                                height: "0.5rem",
+                                borderRadius: "50%",
+                                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                                animation: "pulse 1.4s ease-in-out 0.4s infinite",
+                            } })] }) })), _jsx("div", { ref: messagesEndRef }), _jsx("style", { children: `
+        .markdown-content p {
+          margin: 0 0 0.75rem 0;
+        }
+        .markdown-content p:last-child {
+          margin-bottom: 0;
+        }
+        .markdown-content h1,
+        .markdown-content h2,
+        .markdown-content h3,
+        .markdown-content h4 {
+          margin: 1rem 0 0.5rem 0;
+          font-weight: 600;
+          color: rgba(0, 0, 0, 0.9);
+        }
+        .markdown-content h1 {
+          font-size: 1.25rem;
+        }
+        .markdown-content h2 {
+          font-size: 1.125rem;
+        }
+        .markdown-content h3 {
+          font-size: 1rem;
+        }
+        .markdown-content ul,
+        .markdown-content ol {
+          margin: 0.5rem 0;
+          padding-left: 1.5rem;
+        }
+        .markdown-content li {
+          margin: 0.25rem 0;
+        }
+        .markdown-content code {
+          background-color: rgba(0, 0, 0, 0.08);
+          padding: 0.125rem 0.375rem;
+          border-radius: 0.25rem;
+          font-size: 0.8125rem;
+          font-family: ui-monospace, monospace;
+        }
+        .markdown-content pre {
+          background-color: rgba(0, 0, 0, 0.08);
+          padding: 0.75rem;
+          border-radius: 0.5rem;
+          overflow-x: auto;
+          margin: 0.75rem 0;
+        }
+        .markdown-content pre code {
+          background-color: transparent;
+          padding: 0;
+        }
+        .markdown-content a {
+          color: rgb(114, 126, 237);
+          text-decoration: underline;
+        }
+        .markdown-content a:hover {
+          color: rgb(94, 106, 217);
+        }
+        .markdown-content blockquote {
+          border-left: 3px solid rgba(0, 0, 0, 0.2);
+          padding-left: 1rem;
+          margin: 0.75rem 0;
+          color: rgba(0, 0, 0, 0.7);
+        }
+        .markdown-content strong {
+          font-weight: 600;
+          color: rgba(0, 0, 0, 0.9);
+        }
+        .markdown-content table {
+          border-collapse: collapse;
+          width: 100%;
+          margin: 0.75rem 0;
+        }
+        .markdown-content th,
+        .markdown-content td {
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          padding: 0.5rem;
+          text-align: left;
+        }
+        .markdown-content th {
+          background-color: rgba(0, 0, 0, 0.05);
+          font-weight: 600;
+        }
+        .custom-scrollbar {
+          scrollbar-width: thin;
+          scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.08);
+        }
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 0.5rem;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.08);
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background-color: rgba(0, 0, 0, 0.5);
+          border-radius: 0.25rem;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background-color: rgba(0, 0, 0, 0.7);
+        }
+      ` })] }));
+}

package/dist/goji-search/components/elements/search-input.d.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+interface SearchInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    placeholder: string;
+    size: "xs" | "s" | "m" | "l" | "xl";
+    inputRef: React.RefObject<HTMLInputElement>;
+    inspirationQuestions: string[];
+    onInspirationClick: (question: string) => void;
+    sparkleRef: React.RefObject<HTMLDivElement>;
+}
+export declare function SearchInput({ value, onChange, onFocus, onBlur, placeholder, size, inputRef, inspirationQuestions, onInspirationClick, sparkleRef, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/goji-search/components/elements/search-input.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+import { useEffect, useState } from "react";
+import { InspirationMenu } from "./inspiration-menu";
+export function SearchInput({ value, onChange, onFocus, onBlur, placeholder, size, inputRef, inspirationQuestions, onInspirationClick, sparkleRef, }) {
+    const [showInspirationMenu, setShowInspirationMenu] = useState(false);
+    const [isSparkleHovered, setIsSparkleHovered] = useState(false);
+    const [typewriterText, setTypewriterText] = useState("");
+    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+    const [isTyping, setIsTyping] = useState(true);
+    const [charIndex, setCharIndex] = useState(0);
+    useEffect(() => {
+        if (size !== "s" || value || inspirationQuestions.length === 0) {
+            return;
+        }
+        const currentQuestion = inspirationQuestions[currentQuestionIndex];
+        const typingSpeed = 40; // ms per character when typing
+        const deletingSpeed = 20; // ms per character when deleting
+        const pauseAfterTyping = 2000; // pause when fully typed
+        const pauseAfterDeleting = 500; // pause before typing next question
+        const timer = setTimeout(() => {
+            if (isTyping) {
+                // Typing phase
+                if (charIndex < currentQuestion.length) {
+                    setTypewriterText(currentQuestion.slice(0, charIndex + 1));
+                    setCharIndex(charIndex + 1);
+                }
+                else {
+                    // Finished typing, pause then start deleting
+                    setTimeout(() => {
+                        setIsTyping(false);
+                    }, pauseAfterTyping);
+                }
+            }
+            else {
+                // Deleting phase
+                if (charIndex > 0) {
+                    setTypewriterText(currentQuestion.slice(0, charIndex - 1));
+                    setCharIndex(charIndex - 1);
+                }
+                else {
+                    // Finished deleting, move to next question
+                    setTimeout(() => {
+                        setCurrentQuestionIndex((currentQuestionIndex + 1) % inspirationQuestions.length);
+                        setIsTyping(true);
+                    }, pauseAfterDeleting);
+                }
+            }
+        }, isTyping ? typingSpeed : deletingSpeed);
+        return () => clearTimeout(timer);
+    }, [size, value, inspirationQuestions, currentQuestionIndex, isTyping, charIndex]);
+    const handleSparkleClick = () => {
+        setShowInspirationMenu(!showInspirationMenu);
+    };
+    const handleQuestionClick = (question) => {
+        onInspirationClick(question);
+        setShowInspirationMenu(false);
+    };
+    const displayPlaceholder = size === "s" && !value ? typewriterText : placeholder;
+    return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { ref: sparkleRef, onClick: handleSparkleClick, onMouseEnter: () => setIsSparkleHovered(true), onMouseLeave: () => setIsSparkleHovered(false), style: {
+                    position: "absolute",
+                    left: "0.75rem",
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    cursor: "pointer",
+                    zIndex: 10,
+                }, children: [_jsx(Sparkles, { style: {
+                            width: size === "s" ? "0.875rem" : "1rem",
+                            height: size === "s" ? "0.875rem" : "1rem",
+                            color: "rgba(0, 0, 0, 0.6)",
+                            transition: "all 0.3s ease",
+                        } }), showInspirationMenu && (_jsx(InspirationMenu, { questions: inspirationQuestions, onQuestionClick: handleQuestionClick, onClose: () => setShowInspirationMenu(false) }))] }), _jsx("input", { ref: inputRef, type: "text", value: value, onChange: onChange, onFocus: onFocus, className: "sparkle-input", onBlur: onBlur, placeholder: displayPlaceholder, style: {
+                    width: "100%",
+                    borderRadius: "1.3rem",
+                    border: "1px solid rgba(255, 255, 255, 0.25)",
+                    backgroundColor: "rgba(255, 255, 255, 0.3)",
+                    padding: size === "s" ? "0.375rem 0.5rem 0.375rem 2rem" : "0.5rem 0.75rem 0.5rem 2.25rem",
+                    fontSize: size === "s" ? "0.8125rem" : "0.875rem",
+                    color: "rgba(0, 0, 0, 0.85)",
+                    backdropFilter: "blur(20px) saturate(180%)",
+                    WebkitBackdropFilter: "blur(20px) saturate(180%)",
+                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                    outline: "none",
+                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.4)",
+                } }), _jsx("style", { children: `
+  input::placeholder {
+    color: rgba(0, 0, 0, 0.75);
+  }
+` })] }));
+}

package/dist/goji-search/components/elements/suggested-questions.d.ts

@@ -0,0 +1,6 @@
+interface SuggestedQuestionsProps {
+    questions: string[];
+    onQuestionClick: (question: string) => void;
+}
+export declare function SuggestedQuestions({ questions, onQuestionClick }: SuggestedQuestionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/goji-search/components/elements/suggested-questions.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SuggestedQuestions({ questions, onQuestionClick }) {
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem",
+            padding: "0.625rem",
+            borderRadius: "0.75rem",
+            backgroundColor: "rgba(255, 255, 255, 0.08)",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+            animation: "slideUp 0.3s ease-out",
+        }, children: [_jsx("div", { style: {
+                    fontSize: "0.6875rem",
+                    fontWeight: 600,
+                    color: "rgba(0, 0, 0, 0.5)",
+                    marginBottom: "0.125rem",
+                    letterSpacing: "0.05em",
+                    textTransform: "capitalize",
+                }, children: "suggested" }), _jsx("div", { style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "0.375rem",
+                }, children: questions.map((question, index) => (_jsx("button", { type: "button", onClick: () => onQuestionClick(question), style: {
+                        padding: "0.5rem 0.75rem",
+                        borderRadius: "1.3rem",
+                        border: "1px solid rgba(255, 255, 255, 0.25)",
+                        backgroundColor: "rgba(255, 255, 255, 0.2)",
+                        color: "rgba(0, 0, 0, 0.75)",
+                        fontSize: "0.75rem",
+                        textAlign: "left",
+                        cursor: "pointer",
+                        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                        backdropFilter: "blur(20px) saturate(180%)",
+                        WebkitBackdropFilter: "blur(20px) saturate(180%)",
+                        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+                        outline: "none",
+                        lineHeight: "1.3",
+                    }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = "rgba(0, 122, 255, 0.15)";
+                        e.currentTarget.style.borderColor = "rgba(0, 122, 255, 0.3)";
+                        e.currentTarget.style.transform = "translateY(-1px)";
+                        e.currentTarget.style.boxShadow =
+                            "0 3px 8px rgba(0, 122, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4)";
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+                        e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.25)";
+                        e.currentTarget.style.transform = "translateY(0)";
+                        e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
+                    }, onFocus: (e) => {
+                        e.currentTarget.style.boxShadow = "0 0 0 2px rgba(0, 122, 255, 0.3)";
+                    }, onBlur: (e) => {
+                        e.currentTarget.style.boxShadow = "0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
+                    }, children: question }, index))) })] }));
+}

package/dist/goji-search/components/goji-search-component.d.ts

@@ -0,0 +1,2 @@
+import "./goji-search.css";
+export declare function GojiSearchComponent(): import("react/jsx-runtime").JSX.Element;