karaoke-gen 0.105.4__py3-none-any.whl → 0.107.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/AIFeedbackModal.tsx

@@ -1,111 +0,0 @@
-import React, { useEffect, useRef } from "react";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (payload: { reviewerAction: string; finalText?: string; reasonCategory: string; reasonDetail?: string }) => void;
-  suggestion?: { text: string; reasoning?: string; confidence?: number };
-};
-
-export const AIFeedbackModal: React.FC<Props> = ({ isOpen, onClose, onSubmit, suggestion }) => {
-  const [reviewerAction, setAction] = React.useState("ACCEPT");
-  const [finalText, setFinalText] = React.useState("");
-  const [reasonCategory, setReason] = React.useState("AI_CORRECT");
-  const [reasonDetail, setDetail] = React.useState("");
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  // Handle Escape key to close modal
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, onClose]);
-
-  // Focus modal on open
-  useEffect(() => {
-    if (isOpen && modalRef.current) {
-      modalRef.current.focus();
-    }
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  // Dark theme colors matching karaoke-gen
-  const colors = {
-    background: '#1a1a1a',    // slate-800
-    text: '#f8fafc',          // slate-50
-    textSecondary: '#888888', // slate-400
-    border: '#2a2a2a',        // slate-700
-    inputBg: '#0f0f0f',       // slate-900
-  };
-
-  return (
-    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1300 }}>
-      <div
-        ref={modalRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="ai-feedback-title"
-        tabIndex={-1}
-        style={{ background: colors.background, padding: 16, width: 480, borderRadius: 8, border: `1px solid ${colors.border}`, color: colors.text, outline: 'none' }}
-      >
-        <h3 id="ai-feedback-title" style={{ color: colors.text, margin: 0 }}>AI Suggestion</h3>
-        <p style={{ marginTop: 8, color: colors.text }}>
-          {suggestion?.text ?? "No suggestion"}
-          {suggestion?.confidence != null ? ` (confidence ${Math.round((suggestion.confidence || 0) * 100)}%)` : null}
-        </p>
-        {suggestion?.reasoning ? <small style={{ color: colors.textSecondary }}>{suggestion.reasoning}</small> : null}
-
-        <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
-          <label htmlFor="ai-action-select" style={{ color: colors.text }}>Action</label>
-          <select id="ai-action-select" value={reviewerAction} onChange={(e) => setAction(e.target.value)} style={{ background: colors.inputBg, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 4, padding: '4px 8px' }}>
-            <option value="ACCEPT">Accept</option>
-            <option value="REJECT">Reject</option>
-            <option value="MODIFY">Modify</option>
-          </select>
-        </div>
-
-        {reviewerAction === "MODIFY" ? (
-          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 4 }}>
-            <label htmlFor="ai-final-text" style={{ color: colors.text }}>Final Text</label>
-            <input id="ai-final-text" value={finalText} onChange={(e) => setFinalText(e.target.value)} style={{ width: "100%", background: colors.inputBg, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 4, padding: '4px 8px', boxSizing: 'border-box' }} />
-          </div>
-        ) : null}
-
-        <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
-          <label htmlFor="ai-reason-select" style={{ color: colors.text }}>Reason</label>
-          <select id="ai-reason-select" value={reasonCategory} onChange={(e) => setReason(e.target.value)} style={{ background: colors.inputBg, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 4, padding: '4px 8px' }}>
-            <option value="AI_CORRECT">AI_CORRECT</option>
-            <option value="AI_INCORRECT">AI_INCORRECT</option>
-            <option value="AI_SUBOPTIMAL">AI_SUBOPTIMAL</option>
-            <option value="CONTEXT_NEEDED">CONTEXT_NEEDED</option>
-            <option value="SUBJECTIVE_PREFERENCE">SUBJECTIVE_PREFERENCE</option>
-          </select>
-        </div>
-
-        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 4 }}>
-          <label htmlFor="ai-details-textarea" style={{ color: colors.text }}>Details</label>
-          <textarea id="ai-details-textarea" value={reasonDetail} onChange={(e) => setDetail(e.target.value)} style={{ width: "100%", background: colors.inputBg, color: colors.text, border: `1px solid ${colors.border}`, borderRadius: 4, padding: '4px 8px', boxSizing: 'border-box' }} />
-        </div>
-
-        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 }}>
-          <button onClick={onClose} style={{ background: colors.border, color: colors.text, border: 'none', borderRadius: 4, padding: '6px 12px', cursor: 'pointer' }}>Cancel</button>
-          <button
-            onClick={() =>
-              onSubmit({ reviewerAction, finalText: finalText || undefined, reasonCategory, reasonDetail: reasonDetail || undefined })
-            }
-            style={{ background: '#ff7acc', color: '#fff', border: 'none', borderRadius: 4, padding: '6px 12px', cursor: 'pointer' }}
-          >
-            Submit
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AIFeedbackModal;

lyrics_transcriber/frontend/src/components/AddLyricsModal.tsx

@@ -1,114 +0,0 @@
-import { useState } from 'react'
-import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    TextField,
-    Box,
-    CircularProgress,
-    Typography
-} from '@mui/material'
-
-interface AddLyricsModalProps {
-    open: boolean
-    onClose: () => void
-    onSubmit: (source: string, lyrics: string) => Promise<void>
-    isSubmitting: boolean
-}
-
-export default function AddLyricsModal({
-    open,
-    onClose,
-    onSubmit,
-    isSubmitting
-}: AddLyricsModalProps) {
-    const [source, setSource] = useState('')
-    const [lyrics, setLyrics] = useState('')
-    const [error, setError] = useState<string | null>(null)
-
-    const handleSubmit = async () => {
-        if (!source.trim()) {
-            setError('Please enter a source name')
-            return
-        }
-        if (!lyrics.trim()) {
-            setError('Please enter lyrics text')
-            return
-        }
-
-        try {
-            await onSubmit(source.trim(), lyrics.trim())
-            // Reset form on success
-            setSource('')
-            setLyrics('')
-            setError(null)
-            onClose()
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to add lyrics')
-        }
-    }
-
-    const handleClose = () => {
-        // Don't allow closing if currently submitting
-        if (isSubmitting) return
-
-        setSource('')
-        setLyrics('')
-        setError(null)
-        onClose()
-    }
-
-    return (
-        <Dialog
-            open={open}
-            onClose={handleClose}
-            maxWidth="md"
-            fullWidth
-            disableEscapeKeyDown={isSubmitting}
-        >
-            <DialogTitle>Add Reference Lyrics</DialogTitle>
-            <DialogContent>
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
-                    {error && (
-                        <Typography color="error" variant="body2">
-                            {error}
-                        </Typography>
-                    )}
-                    <TextField
-                        label="Source Name"
-                        value={source}
-                        onChange={(e) => setSource(e.target.value)}
-                        disabled={isSubmitting}
-                        fullWidth
-                        placeholder="e.g., Official Lyrics, Album Booklet"
-                    />
-                    <TextField
-                        label="Lyrics"
-                        value={lyrics}
-                        onChange={(e) => setLyrics(e.target.value)}
-                        disabled={isSubmitting}
-                        fullWidth
-                        multiline
-                        rows={10}
-                        placeholder="Paste lyrics text here (one line per segment)"
-                    />
-                </Box>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={handleClose} disabled={isSubmitting}>
-                    Cancel
-                </Button>
-                <Button
-                    onClick={handleSubmit}
-                    variant="contained"
-                    disabled={isSubmitting}
-                    startIcon={isSubmitting ? <CircularProgress size={20} /> : undefined}
-                >
-                    {isSubmitting ? 'Adding...' : 'Add Lyrics'}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    )
-} 

lyrics_transcriber/frontend/src/components/AgenticCorrectionMetrics.tsx

@@ -1,204 +0,0 @@
-import { Paper, Box, Typography, Chip, Tooltip } from '@mui/material'
-import { WordCorrection } from '../types'
-import { useMemo } from 'react'
-
-interface GapCategoryMetric {
-    category: string
-    count: number
-    avgConfidence: number
-    corrections: WordCorrection[]
-}
-
-interface AgenticCorrectionMetricsProps {
-    corrections: WordCorrection[]
-    onCategoryClick?: (category: string) => void
-    onConfidenceFilterClick?: (filter: 'low' | 'high') => void
-}
-
-export default function AgenticCorrectionMetrics({
-    corrections,
-    onCategoryClick,
-    onConfidenceFilterClick
-}: AgenticCorrectionMetricsProps) {
-    
-    const metrics = useMemo(() => {
-        // Filter only agentic corrections
-        const agenticCorrections = corrections.filter(c => c.handler === 'AgenticCorrector')
-        
-        // Parse category from reason string (format: "reason [CATEGORY] (confidence: XX%)")
-        const categoryMap = new Map<string, GapCategoryMetric>()
-        
-        agenticCorrections.forEach(correction => {
-            const categoryMatch = correction.reason?.match(/\[([A-Z_]+)\]/)
-            const category = categoryMatch ? categoryMatch[1] : 'UNKNOWN'
-            
-            if (!categoryMap.has(category)) {
-                categoryMap.set(category, {
-                    category,
-                    count: 0,
-                    avgConfidence: 0,
-                    corrections: []
-                })
-            }
-            
-            const metric = categoryMap.get(category)!
-            metric.count++
-            metric.corrections.push(correction)
-        })
-        
-        // Calculate average confidence for each category
-        categoryMap.forEach((metric) => {
-            const totalConfidence = metric.corrections.reduce((sum, c) => sum + c.confidence, 0)
-            metric.avgConfidence = totalConfidence / metric.count
-        })
-        
-        // Convert to array and sort by count descending
-        const sortedMetrics = Array.from(categoryMap.values()).sort((a, b) => b.count - a.count)
-        
-        // Calculate overall stats
-        const totalCorrections = agenticCorrections.length
-        const avgConfidence = totalCorrections > 0
-            ? agenticCorrections.reduce((sum, c) => sum + c.confidence, 0) / totalCorrections
-            : 0
-        
-        const lowConfidenceCount = agenticCorrections.filter(c => c.confidence < 0.6).length
-        const highConfidenceCount = agenticCorrections.filter(c => c.confidence >= 0.8).length
-        
-        return {
-            categories: sortedMetrics,
-            totalCorrections,
-            avgConfidence,
-            lowConfidenceCount,
-            highConfidenceCount
-        }
-    }, [corrections])
-    
-    // Format category name for display
-    const formatCategory = (category: string): string => {
-        return category
-            .split('_')
-            .map(word => word.charAt(0) + word.slice(1).toLowerCase())
-            .join(' ')
-    }
-    
-    // Get emoji/icon for category
-    const getCategoryIcon = (category: string): string => {
-        const icons: Record<string, string> = {
-            'SOUND_ALIKE': '🎵',
-            'PUNCTUATION_ONLY': '✏️',
-            'BACKGROUND_VOCALS': '🎤',
-            'EXTRA_WORDS': '➕',
-            'REPEATED_SECTION': '🔁',
-            'COMPLEX_MULTI_ERROR': '🔧',
-            'AMBIGUOUS': '❓',
-            'NO_ERROR': '✅'
-        }
-        return icons[category] || '📝'
-    }
-    
-    return (
-        <Paper
-            sx={{
-                p: 0.8,
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column'
-            }}
-        >
-            <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5, fontSize: '0.7rem' }}>
-                Agentic AI Corrections
-            </Typography>
-            
-            {/* Overall stats */}
-            <Box sx={{ mb: 1 }}>
-                <Typography variant="body2" sx={{ fontSize: '0.75rem', mb: 0.3 }}>
-                    Total: <strong>{metrics.totalCorrections}</strong>
-                </Typography>
-                <Typography variant="body2" sx={{ fontSize: '0.75rem', mb: 0.5 }}>
-                    Avg Confidence: <strong>{(metrics.avgConfidence * 100).toFixed(0)}%</strong>
-                </Typography>
-                
-                {/* Quick filters */}
-                <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                    <Chip
-                        label={`Low (<60%): ${metrics.lowConfidenceCount}`}
-                        size="small"
-                        variant="outlined"
-                        color="warning"
-                        onClick={() => onConfidenceFilterClick?.('low')}
-                        sx={{ fontSize: '0.65rem', height: '20px', cursor: 'pointer' }}
-                    />
-                    <Chip
-                        label={`High (≥80%): ${metrics.highConfidenceCount}`}
-                        size="small"
-                        variant="outlined"
-                        color="success"
-                        onClick={() => onConfidenceFilterClick?.('high')}
-                        sx={{ fontSize: '0.65rem', height: '20px', cursor: 'pointer' }}
-                    />
-                </Box>
-            </Box>
-            
-            {/* Category breakdown */}
-            <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5, fontSize: '0.7rem' }}>
-                By Category
-            </Typography>
-            <Box sx={{ flex: 1, overflow: 'auto' }}>
-                {metrics.categories.map((metric) => (
-                    <Box
-                        key={metric.category}
-                        sx={{
-                            mb: 0.5,
-                            p: 0.5,
-                            borderRadius: 1,
-                            cursor: 'pointer',
-                            '&:hover': {
-                                bgcolor: 'action.hover'
-                            }
-                        }}
-                        onClick={() => onCategoryClick?.(metric.category)}
-                    >
-                        <Tooltip
-                            title={`${metric.count} correction${metric.count !== 1 ? 's' : ''} • Avg confidence: ${(metric.avgConfidence * 100).toFixed(0)}%`}
-                            placement="right"
-                        >
-                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                                    <span style={{ fontSize: '0.85rem' }}>{getCategoryIcon(metric.category)}</span>
-                                    <Typography variant="body2" sx={{ fontSize: '0.7rem' }}>
-                                        {formatCategory(metric.category)}
-                                    </Typography>
-                                </Box>
-                                <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
-                                    <Typography variant="body2" sx={{ fontSize: '0.65rem', color: 'text.secondary' }}>
-                                        {(metric.avgConfidence * 100).toFixed(0)}%
-                                    </Typography>
-                                    <Typography
-                                        variant="body2"
-                                        sx={{
-                                            fontSize: '0.7rem',
-                                            fontWeight: 600,
-                                            bgcolor: 'action.selected',
-                                            px: 0.5,
-                                            borderRadius: 0.5,
-                                            minWidth: '24px',
-                                            textAlign: 'center'
-                                        }}
-                                    >
-                                        {metric.count}
-                                    </Typography>
-                                </Box>
-                            </Box>
-                        </Tooltip>
-                    </Box>
-                ))}
-                {metrics.categories.length === 0 && (
-                    <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.7rem', fontStyle: 'italic' }}>
-                        No agentic corrections
-                    </Typography>
-                )}
-            </Box>
-        </Paper>
-    )
-}
-

lyrics_transcriber/frontend/src/components/AppHeader.tsx

@@ -1,65 +0,0 @@
-import { Box, IconButton, Tooltip, Typography, useTheme } from '@mui/material'
-import { Sun, Moon } from 'lucide-react'
-
-interface AppHeaderProps {
-    isDarkMode?: boolean
-    onToggleTheme?: () => void
-}
-
-export default function AppHeader({ isDarkMode = true, onToggleTheme }: AppHeaderProps) {
-    const theme = useTheme()
-
-    return (
-        <Box
-            component="header"
-            sx={{
-                borderBottom: `1px solid ${theme.palette.divider}`,
-                backgroundColor: theme.palette.background.paper,
-                backdropFilter: 'blur(8px)',
-                position: 'sticky',
-                top: 0,
-                zIndex: 1100,
-                px: 2,
-                py: 1.5,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }}
-        >
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                <img src="/nomad-karaoke-logo.svg" alt="Nomad Karaoke" style={{ height: 40 }} />
-                <Typography
-                    variant="h6"
-                    sx={{
-                        fontWeight: 'bold',
-                        color: theme.palette.text.primary,
-                        fontSize: '1.1rem',
-                        lineHeight: 1,
-                        m: 0,
-                    }}
-                >
-                    Lyrics Transcription Review
-                </Typography>
-            </Box>
-
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                {onToggleTheme && (
-                    <Tooltip title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}>
-                        <IconButton
-                            onClick={onToggleTheme}
-                            sx={{
-                                color: theme.palette.text.secondary,
-                                '&:hover': {
-                                    color: theme.palette.text.primary,
-                                    backgroundColor: theme.palette.action.hover,
-                                },
-                            }}
-                        >
-                            {isDarkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
-                        </IconButton>
-                    </Tooltip>
-                )}
-            </Box>
-        </Box>
-    )
-}

lyrics_transcriber/frontend/src/components/AudioPlayer.tsx

@@ -1,180 +0,0 @@
-import { Box, IconButton, Slider, Typography } from '@mui/material'
-import PlayArrowIcon from '@mui/icons-material/PlayArrow'
-import PauseIcon from '@mui/icons-material/Pause'
-import { useEffect, useRef, useState, useCallback } from 'react'
-import { ApiClient } from '../api'
-
-interface AudioPlayerProps {
-    apiClient: ApiClient | null,
-    onTimeUpdate?: (time: number) => void,
-    audioHash: string
-}
-
-export default function AudioPlayer({ apiClient, onTimeUpdate, audioHash }: AudioPlayerProps) {
-    const [isPlaying, setIsPlaying] = useState(false)
-    const [currentTime, setCurrentTime] = useState(0)
-    const [duration, setDuration] = useState(0)
-    const audioRef = useRef<HTMLAudioElement | null>(null)
-
-    useEffect(() => {
-        if (!apiClient) return
-
-        const audio = new Audio(apiClient.getAudioUrl(audioHash))
-        audioRef.current = audio
-
-        // Add requestAnimationFrame for smoother updates
-        let animationFrameId: number
-
-        const updateTime = () => {
-            const time = audio.currentTime
-            setCurrentTime(time)
-            onTimeUpdate?.(time)
-            animationFrameId = requestAnimationFrame(updateTime)
-        }
-
-        audio.addEventListener('play', () => {
-            setIsPlaying(true)
-            window.isAudioPlaying = true
-            updateTime()
-        })
-
-        audio.addEventListener('pause', () => {
-            setIsPlaying(false)
-            window.isAudioPlaying = false
-            cancelAnimationFrame(animationFrameId)
-        })
-
-        audio.addEventListener('ended', () => {
-            cancelAnimationFrame(animationFrameId)
-            setIsPlaying(false)
-            window.isAudioPlaying = false
-            setCurrentTime(0)
-        })
-
-        audio.addEventListener('loadedmetadata', () => {
-            setDuration(audio.duration)
-        })
-
-        return () => {
-            cancelAnimationFrame(animationFrameId)
-            audio.pause()
-            audio.src = ''
-            audioRef.current = null
-            window.isAudioPlaying = false
-        }
-    }, [apiClient, onTimeUpdate, audioHash])
-
-    const handlePlayPause = () => {
-        if (!audioRef.current) return
-
-        if (isPlaying) {
-            audioRef.current.pause()
-        } else {
-            audioRef.current.play()
-        }
-        setIsPlaying(!isPlaying)
-    }
-
-    const handleSeek = (_: Event, newValue: number | number[]) => {
-        if (!audioRef.current) return
-        const time = newValue as number
-        audioRef.current.currentTime = time
-        setCurrentTime(time)
-    }
-
-    const formatTime = (seconds: number) => {
-        const mins = Math.floor(seconds / 60)
-        const secs = Math.floor(seconds % 60)
-        return `${mins}:${secs.toString().padStart(2, '0')}`
-    }
-
-    // Add this method to expose seeking functionality
-    const seekAndPlay = (time: number) => {
-        if (!audioRef.current) return
-
-        audioRef.current.currentTime = time
-        setCurrentTime(time)
-        audioRef.current.play()
-        setIsPlaying(true)
-    }
-
-    const togglePlayback = useCallback(() => {
-        if (!audioRef.current) return
-
-        if (isPlaying) {
-            audioRef.current.pause()
-        } else {
-            audioRef.current.play()
-        }
-        setIsPlaying(!isPlaying)
-    }, [isPlaying])
-
-    // Expose methods and duration globally
-    useEffect(() => {
-        if (!apiClient) return
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const win = window as any
-        win.seekAndPlayAudio = seekAndPlay
-        win.toggleAudioPlayback = togglePlayback
-        win.getAudioDuration = () => duration
-
-        return () => {
-            delete win.seekAndPlayAudio
-            delete win.toggleAudioPlayback
-            delete win.getAudioDuration
-        }
-    }, [apiClient, togglePlayback, duration])
-
-    if (!apiClient) return null
-
-    return (
-        <Box sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.5,
-            backgroundColor: 'background.paper',
-            borderRadius: 1,
-            height: '32px',
-        }}>
-            <Typography variant="body2" color="text.secondary" sx={{ mr: 0.5, fontSize: '0.75rem' }}>
-                Playback:
-            </Typography>
-
-            <IconButton
-                onClick={handlePlayPause}
-                size="small"
-                sx={{ p: 0.5 }}
-            >
-                {isPlaying ? <PauseIcon fontSize="small" /> : <PlayArrowIcon fontSize="small" />}
-            </IconButton>
-
-            <Typography variant="body2" sx={{ minWidth: 32, fontSize: '0.75rem' }}>
-                {formatTime(currentTime)}
-            </Typography>
-
-            <Slider
-                value={currentTime}
-                min={0}
-                max={duration}
-                onChange={handleSeek}
-                size="small"
-                sx={{
-                    width: 150,
-                    mx: 0.5,
-                    '& .MuiSlider-thumb': {
-                        width: 10,
-                        height: 10,
-                    },
-                    '& .MuiSlider-rail, & .MuiSlider-track': {
-                        height: 3
-                    }
-                }}
-            />
-
-            <Typography variant="body2" sx={{ minWidth: 32, fontSize: '0.75rem' }}>
-                {formatTime(duration)}
-            </Typography>
-        </Box>
-    )
-}