analytica-frontend-lib/dist/ActivityCardQuestionPreview/index.mjs.map

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

{"version":3,"sources":["../../src/components/ActivityCardQuestionPreview/ActivityCardQuestionPreview.tsx","../../src/components/Accordation/Accordation.tsx","../../src/components/Card/Card.tsx","../../src/utils/utils.ts","../../src/components/Button/Button.tsx","../../src/components/Badge/Badge.tsx","../../src/components/Text/Text.tsx","../../src/components/ProgressBar/ProgressBar.tsx","../../src/components/IconRender/IconRender.tsx","../../src/assets/icons/subjects/ChatPT.tsx","../../src/assets/icons/subjects/ChatEN.tsx","../../src/assets/icons/subjects/ChatES.tsx","../../src/components/CheckBox/CheckBox.tsx","../../src/components/CheckBox/CheckboxList.tsx","../../src/components/Radio/Radio.tsx","../../src/components/Alternative/Alternative.tsx","../../src/types/questionTypes.ts","../../src/components/MultipleChoice/MultipleChoice.tsx","../../src/utils/questionRenderer.ts"],"sourcesContent":["import { useMemo, useState, type ReactNode } from 'react';\nimport { CardAccordation } from '../Accordation/Accordation';\nimport {\n  IconRender,\n  Text,\n  getSubjectColorWithOpacity,\n  Badge,\n} from '../../index';\nimport { QUESTION_TYPE } from '../Quiz/useQuizStore';\nimport { questionTypeLabels } from '../../types/questionTypes';\nimport { cn } from '../../utils/utils';\nimport { AlternativesList, type Alternative } from '../Alternative/Alternative';\nimport { MultipleChoiceList } from '../MultipleChoice/MultipleChoice';\nimport { CheckCircle, XCircle } from 'phosphor-react';\nimport {\n  renderFromMap,\n  type QuestionRendererMap,\n} from '../../utils/questionRenderer';\n\ninterface ActivityCardQuestionPreviewProps {\n  subjectName?: string;\n  subjectColor?: string;\n  iconName?: string;\n  isDark?: boolean;\n  questionType?: QUESTION_TYPE;\n  /**\n   * Optional label override when questionType is not provided.\n   */\n  questionTypeLabel?: string;\n  enunciado?: string;\n  question?: {\n    options: { id: string; option: string }[];\n    correctOptionIds?: string[];\n  };\n  defaultExpanded?: boolean;\n  value?: string;\n  className?: string;\n  children?: ReactNode;\n  position?: number;\n}\n\nconst QuestionHeader = ({\n  badgeColor,\n  iconName,\n  subjectName,\n  resolvedQuestionTypeLabel,\n  position,\n}: {\n  badgeColor: string;\n  iconName?: string;\n  subjectName?: string;\n  resolvedQuestionTypeLabel?: string;\n  position?: number;\n}) => (\n  <div className=\"flex flex-row gap-2 text-text-650\">\n    <div className=\"py-1 px-2 flex flex-row items-center gap-1\">\n      <span\n        className=\"size-4 rounded-sm flex items-center justify-center shrink-0 text-text-950\"\n        style={{\n          backgroundColor: badgeColor,\n        }}\n      >\n        <IconRender\n          iconName={iconName ?? 'Book'}\n          size={14}\n          color=\"currentColor\"\n        />\n      </span>\n      <Text size=\"sm\">{subjectName ?? 'Assunto não informado'}</Text>\n    </div>\n\n    {typeof position === 'number' && (\n      <div className=\"py-1 px-2 flex flex-row items-center gap-1\">\n        <Text size=\"sm\" className=\"text-text-700\">\n          #{position}\n        </Text>\n      </div>\n    )}\n\n    <div className=\"py-1 px-2 flex flex-row items-center gap-1\">\n      <Text size=\"sm\" className=\"\">\n        {resolvedQuestionTypeLabel ?? 'Tipo de questão'}\n      </Text>\n    </div>\n  </div>\n);\n\nexport const ActivityCardQuestionPreview = ({\n  subjectName = 'Assunto não informado',\n  subjectColor = '#000000',\n  iconName = 'Book',\n  isDark = false,\n  questionType,\n  questionTypeLabel,\n  enunciado = 'Enunciado não informado',\n  question,\n  defaultExpanded = false,\n  value,\n  className,\n  children,\n  position,\n}: ActivityCardQuestionPreviewProps) => {\n  const badgeColor =\n    getSubjectColorWithOpacity(subjectColor, isDark) ?? subjectColor;\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const correctOptionIds = question?.correctOptionIds || [];\n\n  const resolvedQuestionTypeLabel =\n    questionType && questionTypeLabels[questionType]\n      ? questionTypeLabels[questionType]\n      : questionTypeLabel || 'Tipo de questão';\n  const safeSubjectName: string = subjectName ?? 'Assunto não informado';\n  const safeIconName: string = iconName ?? 'Book';\n  const safeResolvedLabel: string =\n    resolvedQuestionTypeLabel ?? 'Tipo de questão';\n\n  const alternatives = useMemo<Alternative[]>(() => {\n    if (!question?.options || questionType !== QUESTION_TYPE.ALTERNATIVA)\n      return [];\n\n    return question.options.map((option) => {\n      const isCorrect = correctOptionIds.includes(option.id);\n      return {\n        value: option.id,\n        label: option.option,\n        status: isCorrect ? ('correct' as const) : undefined,\n        disabled: !isCorrect,\n      };\n    });\n  }, [question, questionType, correctOptionIds]);\n\n  const multipleChoices = useMemo(() => {\n    if (!question?.options || questionType !== QUESTION_TYPE.MULTIPLA_ESCOLHA)\n      return [];\n\n    return question.options.map((option) => {\n      const isCorrect = correctOptionIds.includes(option.id);\n      return {\n        value: option.id,\n        label: option.option,\n        status: isCorrect ? ('correct' as const) : undefined,\n        disabled: !isCorrect,\n      };\n    });\n  }, [question, questionType, correctOptionIds]);\n\n  const renderAlternative = () => {\n    if (alternatives.length === 0) return null;\n    return (\n      <div className=\"mt-4\">\n        <AlternativesList\n          alternatives={alternatives}\n          mode=\"readonly\"\n          layout=\"compact\"\n          selectedValue={correctOptionIds[0]}\n          name={`preview-alternatives-${value ?? subjectName}`}\n        />\n      </div>\n    );\n  };\n\n  const renderMultipleChoice = () => {\n    if (multipleChoices.length === 0) return null;\n    return (\n      <div className=\"mt-4\">\n        <MultipleChoiceList\n          choices={multipleChoices}\n          mode=\"readonly\"\n          selectedValues={correctOptionIds}\n          name={`preview-multiple-${value ?? subjectName}`}\n        />\n      </div>\n    );\n  };\n\n  const renderTrueOrFalse = () => {\n    if (!question?.options || question.options.length === 0) return null;\n    return (\n      <div className=\"mt-4\">\n        <div className=\"flex flex-col gap-3.5\">\n          {question.options.map((option, index) => {\n            const isCorrect = correctOptionIds.includes(option.id);\n            const correctAnswer = isCorrect ? 'Verdadeiro' : 'Falso';\n\n            return (\n              <section key={option.id} className=\"flex flex-col gap-2\">\n                <div\n                  className={cn(\n                    'flex flex-row justify-between items-center gap-2 p-2 rounded-md border',\n                    isCorrect\n                      ? 'bg-success-background border-success-300'\n                      : 'bg-error-background border-error-300'\n                  )}\n                >\n                  <Text size=\"sm\" className=\"text-text-900\">\n                    {String.fromCodePoint(97 + index)\n                      .concat(') ')\n                      .concat(option.option)}\n                  </Text>\n\n                  <div className=\"flex flex-row items-center gap-2 flex-shrink-0\">\n                    <Text size=\"sm\" className=\"text-text-700\">\n                      Resposta correta: {correctAnswer}\n                    </Text>\n                    <Badge\n                      variant=\"solid\"\n                      action={isCorrect ? 'success' : 'error'}\n                      iconLeft={isCorrect ? <CheckCircle /> : <XCircle />}\n                    >\n                      {isCorrect ? 'Resposta correta' : 'Resposta incorreta'}\n                    </Badge>\n                  </div>\n                </div>\n              </section>\n            );\n          })}\n        </div>\n      </div>\n    );\n  };\n\n  const renderDissertative = () => {\n    return (\n      <div className=\"mt-4 px-2 py-4\">\n        <Text size=\"sm\" className=\"text-text-600 italic\">\n          Resposta do aluno\n        </Text>\n      </div>\n    );\n  };\n\n  const renderConnectDots = () => null;\n  const renderFill = () => null;\n  const renderImage = () => null;\n\n  const questionRenderers: QuestionRendererMap = {\n    [QUESTION_TYPE.ALTERNATIVA]: renderAlternative,\n    [QUESTION_TYPE.MULTIPLA_ESCOLHA]: renderMultipleChoice,\n    [QUESTION_TYPE.DISSERTATIVA]: renderDissertative,\n    [QUESTION_TYPE.VERDADEIRO_FALSO]: renderTrueOrFalse,\n    [QUESTION_TYPE.LIGAR_PONTOS]: renderConnectDots,\n    [QUESTION_TYPE.PREENCHER]: renderFill,\n    [QUESTION_TYPE.IMAGEM]: renderImage,\n  };\n\n  return (\n    <div\n      className=\"w-full\"\n      data-position={position}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={isExpanded}\n      onClick={() => {\n        if (isExpanded) {\n          setIsExpanded(false);\n        }\n      }}\n      onMouseDown={(event) => {\n        // Allow drag to start if inside a draggable container; otherwise avoid focus outline\n        const draggableAncestor = (event.target as HTMLElement).closest(\n          '[data-draggable=\"true\"]'\n        );\n        if (!draggableAncestor) {\n          event.preventDefault();\n        }\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          if (isExpanded) {\n            setIsExpanded(false);\n          }\n        }\n      }}\n    >\n      {/* Hidden drag preview with header + truncated enunciado (closed state) */}\n      <div\n        data-drag-preview=\"true\"\n        className=\"fixed -left-[9999px] -top-[9999px] pointer-events-none z-[9999] w-[440px]\"\n      >\n        <div className=\"w-full rounded-lg border border-border-200 bg-background\">\n          <div className=\"w-full min-w-0 flex flex-col gap-2 py-2\">\n            <QuestionHeader\n              badgeColor={badgeColor}\n              iconName={safeIconName}\n              subjectName={safeSubjectName}\n              resolvedQuestionTypeLabel={safeResolvedLabel}\n              position={position}\n            />\n\n            <Text\n              size=\"md\"\n              weight=\"medium\"\n              className=\"text-text-950 truncate px-3\"\n            >\n              {enunciado}\n            </Text>\n          </div>\n        </div>\n      </div>\n\n      <CardAccordation\n        className={cn(\n          'w-full rounded-lg border border-border-200 bg-background',\n          className\n        )}\n        expanded={isExpanded}\n        onToggleExpanded={setIsExpanded}\n        defaultExpanded={defaultExpanded}\n        value={value}\n        trigger={\n          <div className=\"w-full min-w-0 flex flex-col gap-2 py-2\">\n            <QuestionHeader\n              badgeColor={badgeColor}\n              iconName={safeIconName}\n              subjectName={safeSubjectName}\n              resolvedQuestionTypeLabel={safeResolvedLabel}\n              position={position}\n            />\n\n            {!isExpanded && (\n              <Text\n                size=\"md\"\n                weight=\"medium\"\n                className=\"text-text-950 truncate px-3\"\n              >\n                {enunciado}\n              </Text>\n            )}\n          </div>\n        }\n      >\n        <Text\n          size=\"md\"\n          weight=\"medium\"\n          className=\"text-text-950 break-words whitespace-pre-wrap\"\n        >\n          {enunciado}\n        </Text>\n        {renderFromMap(questionRenderers, questionType)}\n        {children}\n      </CardAccordation>\n    </div>\n  );\n};\n\nexport type { ActivityCardQuestionPreviewProps };\n","import {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useId,\n  useState,\n  useEffect,\n} from 'react';\nimport { CardBase } from '../Card/Card';\nimport { CaretRight } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\ninterface CardAccordationProps extends HTMLAttributes<HTMLDivElement> {\n  trigger: ReactNode;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  expanded?: boolean;\n  onToggleExpanded?: (isExpanded: boolean) => void;\n  value?: string;\n  disabled?: boolean;\n  /** Additional class for the trigger button */\n  triggerClassName?: string;\n  /** Additional class for the content wrapper */\n  contentClassName?: string;\n}\n\nconst CardAccordation = forwardRef<HTMLDivElement, CardAccordationProps>(\n  (\n    {\n      trigger,\n      children,\n      className,\n      defaultExpanded = false,\n      expanded: controlledExpanded,\n      onToggleExpanded,\n      value,\n      disabled = false,\n      triggerClassName,\n      contentClassName,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n    const generatedId = useId();\n\n    // Use value as ID base for better semantics, fallback to generated ID\n    const contentId = value ? `accordion-content-${value}` : generatedId;\n    const headerId = value\n      ? `accordion-header-${value}`\n      : `${generatedId}-header`;\n\n    // Determine if component is controlled\n    const isControlled = controlledExpanded !== undefined;\n    const isExpanded = isControlled ? controlledExpanded : internalExpanded;\n\n    // Sync internal state when controlled value changes\n    useEffect(() => {\n      if (isControlled) {\n        setInternalExpanded(controlledExpanded);\n      }\n    }, [isControlled, controlledExpanded]);\n\n    const handleToggle = () => {\n      if (disabled) return;\n\n      const newExpanded = !isExpanded;\n\n      if (!isControlled) {\n        setInternalExpanded(newExpanded);\n      }\n\n      onToggleExpanded?.(newExpanded);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleToggle();\n      }\n    };\n\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"vertical\"\n        padding=\"none\"\n        minHeight=\"none\"\n        className={cn('overflow-hidden', className)}\n        {...props}\n      >\n        {/* Clickable header */}\n        <button\n          id={headerId}\n          type=\"button\"\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n          disabled={disabled}\n          className={cn(\n            'w-full cursor-pointer not-aria-expanded:rounded-xl aria-expanded:rounded-t-xl flex items-center justify-between gap-3 text-left transition-colors duration-200 focus:outline-none focus:border-2 focus:border-primary-950 focus:ring-inset px-2',\n            disabled && 'cursor-not-allowed text-text-400',\n            triggerClassName\n          )}\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-disabled={disabled}\n          data-value={value}\n        >\n          {trigger}\n\n          <CaretRight\n            size={20}\n            className={cn(\n              'transition-transform duration-200 flex-shrink-0',\n              disabled ? 'text-gray-400' : 'text-text-700',\n              isExpanded ? 'rotate-90' : 'rotate-0'\n            )}\n            data-testid=\"accordion-caret\"\n          />\n        </button>\n\n        {/* Expandable content */}\n        <section\n          id={contentId}\n          aria-labelledby={headerId}\n          aria-hidden={!isExpanded}\n          className={cn(\n            'transition-all duration-300 ease-in-out overflow-hidden',\n            isExpanded ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'\n          )}\n          data-testid=\"accordion-content\"\n          data-value={value}\n        >\n          <div className={cn('p-4 pt-0', contentClassName)}>{children}</div>\n        </section>\n      </CardBase>\n    );\n  }\n);\n\nCardAccordation.displayName = 'CardAccordation';\n\nexport { CardAccordation };\nexport type { CardAccordationProps };\n","import {\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  useState,\n  useRef,\n  MouseEvent,\n  ChangeEvent,\n  KeyboardEvent,\n  Ref,\n  useEffect,\n} from 'react';\nimport Button from '../Button/Button';\nimport Badge from '../Badge/Badge';\nimport ProgressBar from '../ProgressBar/ProgressBar';\nimport {\n  CaretRight,\n  ChatCircleText,\n  CheckCircle,\n  Clock,\n  DotsThreeVertical,\n  Play,\n  SpeakerHigh,\n  SpeakerLow,\n  SpeakerSimpleX,\n  XCircle,\n} from 'phosphor-react';\nimport Text from '../Text/Text';\nimport { cn } from '../../utils/utils';\nimport IconRender from '../IconRender/IconRender';\n\n// Componente base reutilizável para todos os cards\ninterface CardBaseProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  variant?: 'default' | 'compact' | 'minimal';\n  layout?: 'horizontal' | 'vertical';\n  padding?: 'none' | 'small' | 'medium' | 'large';\n  minHeight?: 'none' | 'small' | 'medium' | 'large';\n  cursor?: 'default' | 'pointer';\n}\n\nconst CARD_BASE_CLASSES = {\n  default: 'w-full bg-background border border-border-50 rounded-xl',\n  compact: 'w-full bg-background border border-border-50 rounded-lg',\n  minimal: 'w-full bg-background border border-border-100 rounded-md',\n};\n\nconst CARD_PADDING_CLASSES = {\n  none: '',\n  small: 'p-2',\n  medium: 'p-4',\n  large: 'p-6',\n};\n\nconst CARD_MIN_HEIGHT_CLASSES = {\n  none: '',\n  small: 'min-h-16',\n  medium: 'min-h-20',\n  large: 'min-h-24',\n};\n\nconst CARD_LAYOUT_CLASSES = {\n  horizontal: 'flex flex-row',\n  vertical: 'flex flex-col',\n};\n\nconst CARD_CURSOR_CLASSES = {\n  default: '',\n  pointer: 'cursor-pointer',\n};\n\nconst CardBase = forwardRef<HTMLDivElement, CardBaseProps>(\n  (\n    {\n      children,\n      variant = 'default',\n      layout = 'horizontal',\n      padding = 'medium',\n      minHeight = 'medium',\n      cursor = 'default',\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    const baseClasses = CARD_BASE_CLASSES[variant];\n    const paddingClasses = CARD_PADDING_CLASSES[padding];\n    const minHeightClasses = CARD_MIN_HEIGHT_CLASSES[minHeight];\n    const layoutClasses = CARD_LAYOUT_CLASSES[layout];\n    const cursorClasses = CARD_CURSOR_CLASSES[cursor];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          baseClasses,\n          paddingClasses,\n          minHeightClasses,\n          layoutClasses,\n          cursorClasses,\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\ninterface CardActivitiesResultsProps extends HTMLAttributes<HTMLDivElement> {\n  icon: ReactNode;\n  title: string;\n  subTitle: string;\n  header: string;\n  description?: string;\n  extended?: boolean;\n  action?: 'warning' | 'success' | 'error' | 'info';\n}\n\nconst ACTION_CARD_CLASSES = {\n  warning: 'bg-warning-background',\n  success: 'bg-success-200',\n  error: 'bg-error-100',\n  info: 'bg-info-background',\n};\n\nconst ACTION_ICON_CLASSES = {\n  warning: 'bg-warning-300 text-text',\n  success: 'bg-indicator-positive text-text-950',\n  error: 'bg-indicator-negative text-text',\n  info: 'bg-info-500 text-text',\n};\n\nconst ACTION_SUBTITLE_CLASSES = {\n  warning: 'text-warning-600',\n  success: 'text-success-700',\n  error: 'text-error-700',\n  info: 'text-info-700',\n};\n\nconst ACTION_HEADER_CLASSES = {\n  warning: 'text-warning-300',\n  success: 'text-success-300',\n  error: 'text-error-300',\n  info: 'text-info-300',\n};\n\nconst CardActivitiesResults = forwardRef<\n  HTMLDivElement,\n  CardActivitiesResultsProps\n>(\n  (\n    {\n      icon,\n      title,\n      subTitle,\n      header,\n      extended = false,\n      action = 'success',\n      description,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const actionCardClasses = ACTION_CARD_CLASSES[action];\n    const actionIconClasses = ACTION_ICON_CLASSES[action];\n    const actionSubTitleClasses = ACTION_SUBTITLE_CLASSES[action];\n    const actionHeaderClasses = ACTION_HEADER_CLASSES[action];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'w-full flex flex-col border border-border-50  bg-background rounded-xl',\n          className\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            'flex flex-col gap-1 items-center justify-center p-4',\n            actionCardClasses,\n            extended ? 'rounded-t-xl' : 'rounded-xl'\n          )}\n        >\n          <span\n            className={cn(\n              'size-7.5 rounded-full flex items-center justify-center',\n              actionIconClasses\n            )}\n          >\n            {icon}\n          </span>\n\n          <Text\n            size=\"2xs\"\n            weight=\"medium\"\n            className=\"text-text-800 uppercase truncate\"\n          >\n            {title}\n          </Text>\n\n          <p\n            className={cn('text-lg font-bold truncate', actionSubTitleClasses)}\n          >\n            {subTitle}\n          </p>\n        </div>\n\n        {extended && (\n          <div className=\"flex flex-col items-center gap-2.5 pb-9.5 pt-2.5\">\n            <p\n              className={cn(\n                'text-2xs font-medium uppercase truncate',\n                actionHeaderClasses\n              )}\n            >\n              {header}\n            </p>\n            <Badge size=\"large\" action=\"info\">\n              {description}\n            </Badge>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\ninterface CardQuestionProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  state?: 'done' | 'undone';\n  onClickButton?: (valueButton?: unknown) => void;\n  valueButton?: unknown;\n}\n\nconst CardQuestions = forwardRef<HTMLDivElement, CardQuestionProps>(\n  (\n    {\n      header,\n      state = 'undone',\n      className,\n      onClickButton,\n      valueButton,\n      ...props\n    },\n    ref\n  ) => {\n    const isDone = state === 'done';\n    const stateLabel = isDone ? 'Realizado' : 'Não Realizado';\n    const buttonLabel = isDone ? 'Ver Resultado' : 'Responder';\n\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"medium\"\n        minHeight=\"medium\"\n        className={cn('justify-between gap-4', className)}\n        {...props}\n      >\n        <section className=\"flex flex-col gap-1 flex-1 min-w-0\">\n          <p className=\"font-bold text-xs text-text-950 truncate\">{header}</p>\n\n          <div className=\"flex flex-row gap-6 items-center\">\n            <Badge\n              size=\"medium\"\n              variant=\"solid\"\n              action={isDone ? 'success' : 'error'}\n            >\n              {stateLabel}\n            </Badge>\n          </div>\n        </section>\n\n        <span className=\"flex-shrink-0\">\n          <Button\n            size=\"extra-small\"\n            onClick={() => onClickButton?.(valueButton)}\n            className=\"min-w-fit\"\n          >\n            {buttonLabel}\n          </Button>\n        </span>\n      </CardBase>\n    );\n  }\n);\n\ninterface CardProgressProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  subhead?: string;\n  initialDate?: string;\n  endDate?: string;\n  progress?: number;\n  direction?: 'horizontal' | 'vertical';\n  icon: ReactNode;\n  color?: string;\n  progressVariant?: 'blue' | 'green';\n  showDates?: boolean;\n}\n\nconst CardProgress = forwardRef<HTMLDivElement, CardProgressProps>(\n  (\n    {\n      header,\n      subhead,\n      initialDate,\n      endDate,\n      progress = 0,\n      direction = 'horizontal',\n      icon,\n      color = '#B7DFFF',\n      progressVariant = 'blue',\n      showDates = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const isHorizontal = direction === 'horizontal';\n    const contentComponent = {\n      horizontal: (\n        <>\n          {showDates && (\n            <div className=\"flex flex-row gap-6 items-center\">\n              {initialDate && (\n                <span className=\"flex flex-row gap-1 items-center text-2xs\">\n                  <p className=\"text-text-800 font-semibold\">Início</p>\n                  <p className=\"text-text-600\">{initialDate}</p>\n                </span>\n              )}\n              {endDate && (\n                <span className=\"flex flex-row gap-1 items-center text-2xs\">\n                  <p className=\"text-text-800 font-semibold\">Fim</p>\n                  <p className=\"text-text-600\">{endDate}</p>\n                </span>\n              )}\n            </div>\n          )}\n          <span className=\"grid grid-cols-[1fr_auto] items-center gap-2\">\n            <ProgressBar\n              size=\"small\"\n              value={progress}\n              variant={progressVariant}\n              data-testid=\"progress-bar\"\n            />\n\n            <Text\n              size=\"xs\"\n              weight=\"medium\"\n              className={cn(\n                'text-text-950 leading-none tracking-normal text-center flex-none'\n              )}\n            >\n              {Math.round(progress)}%\n            </Text>\n          </span>\n        </>\n      ),\n      vertical: <p className=\"text-sm text-text-800\">{subhead}</p>,\n    };\n\n    return (\n      <CardBase\n        ref={ref}\n        layout={isHorizontal ? 'horizontal' : 'vertical'}\n        padding=\"none\"\n        minHeight=\"medium\"\n        cursor=\"pointer\"\n        className={cn(isHorizontal ? 'h-20' : '', className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            'flex justify-center items-center [&>svg]:size-6 text-text-950',\n            isHorizontal\n              ? 'min-w-[80px] min-h-[80px] rounded-l-xl'\n              : 'min-h-[50px] w-full rounded-t-xl',\n            !color.startsWith('#') ? `${color}` : ''\n          )}\n          style={color.startsWith('#') ? { backgroundColor: color } : undefined}\n          data-testid=\"icon-container\"\n        >\n          {icon}\n        </div>\n\n        <div\n          className={cn(\n            'p-4 flex flex-col justify-between w-full h-full',\n            !isHorizontal && 'gap-4'\n          )}\n        >\n          <Text size=\"sm\" weight=\"bold\" className=\"text-text-950 truncate\">\n            {header}\n          </Text>\n          {contentComponent[direction]}\n        </div>\n      </CardBase>\n    );\n  }\n);\n\ninterface CardTopicProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  subHead?: string[];\n  progress: number;\n  showPercentage?: boolean;\n  progressVariant?: 'blue' | 'green';\n}\n\nconst CardTopic = forwardRef<HTMLDivElement, CardTopicProps>(\n  (\n    {\n      header,\n      subHead,\n      progress,\n      showPercentage = false,\n      progressVariant = 'blue',\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"vertical\"\n        padding=\"small\"\n        minHeight=\"medium\"\n        cursor=\"pointer\"\n        className={cn('justify-center gap-2  py-2 px-4', className)}\n        {...props}\n      >\n        {subHead && (\n          <span className=\"text-text-600 text-2xs flex flex-row gap-1\">\n            {subHead.map((text, index) => (\n              <Fragment key={`${text} - ${index}`}>\n                <p>{text}</p>\n                {index < subHead.length - 1 && <p>•</p>}\n              </Fragment>\n            ))}\n          </span>\n        )}\n\n        <p className=\"text-sm text-text-950 font-bold truncate\">{header}</p>\n\n        <span className=\"grid grid-cols-[1fr_auto] items-center gap-2\">\n          <ProgressBar\n            size=\"small\"\n            value={progress}\n            variant={progressVariant}\n            data-testid=\"progress-bar\"\n          />\n          {showPercentage && (\n            <Text\n              size=\"xs\"\n              weight=\"medium\"\n              className={cn(\n                'text-text-950 leading-none tracking-normal text-center flex-none'\n              )}\n            >\n              {Math.round(progress)}%\n            </Text>\n          )}\n        </span>\n      </CardBase>\n    );\n  }\n);\n\ninterface CardPerformanceProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  description?: string;\n  progress?: number;\n  labelProgress?: string;\n  actionVariant?: 'button' | 'caret';\n  progressVariant?: 'blue' | 'green';\n  onClickButton?: (valueButton?: unknown) => void;\n  valueButton?: unknown;\n}\n\nconst CardPerformance = forwardRef<HTMLDivElement, CardPerformanceProps>(\n  (\n    {\n      header,\n      progress,\n      description = 'Sem dados ainda! Você ainda não fez um questionário neste assunto.',\n      actionVariant = 'button',\n      progressVariant = 'blue',\n      labelProgress = '',\n      className = '',\n      onClickButton,\n      valueButton,\n      ...props\n    },\n    ref\n  ) => {\n    const hasProgress = progress !== undefined;\n\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"medium\"\n        minHeight=\"none\"\n        className={cn(\n          actionVariant == 'caret' ? 'cursor-pointer' : '',\n          className\n        )}\n        onClick={() => actionVariant == 'caret' && onClickButton?.(valueButton)}\n        {...props}\n      >\n        <div className=\"w-full flex flex-col justify-between gap-2\">\n          <div className=\"flex flex-row justify-between items-center gap-2\">\n            <p className=\"text-lg font-bold text-text-950 truncate flex-1 min-w-0\">\n              {header}\n            </p>\n            {actionVariant === 'button' && (\n              <Button\n                variant=\"outline\"\n                size=\"extra-small\"\n                onClick={() => onClickButton?.(valueButton)}\n                className=\"min-w-fit flex-shrink-0\"\n              >\n                Ver Aula\n              </Button>\n            )}\n          </div>\n\n          <div className=\"w-full\">\n            {hasProgress ? (\n              <ProgressBar\n                value={progress}\n                label={`${progress}% ${labelProgress}`}\n                variant={progressVariant}\n              />\n            ) : (\n              <p className=\"text-xs text-text-600 truncate\">{description}</p>\n            )}\n          </div>\n        </div>\n\n        {actionVariant == 'caret' && (\n          <CaretRight\n            className=\"size-4.5 text-text-800 cursor-pointer\"\n            data-testid=\"caret-icon\"\n          />\n        )}\n      </CardBase>\n    );\n  }\n);\n\ninterface CardResultsProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  icon: string;\n  correct_answers: number;\n  incorrect_answers: number;\n  direction?: 'row' | 'col';\n  color?: string;\n}\n\nconst CardResults = forwardRef<HTMLDivElement, CardResultsProps>(\n  (\n    {\n      header,\n      correct_answers,\n      incorrect_answers,\n      icon,\n      direction = 'col',\n      color = '#B7DFFF',\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const isRow = direction == 'row';\n\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"none\"\n        minHeight=\"medium\"\n        className={cn('items-stretch cursor-pointer pr-4', className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            'flex justify-center items-center [&>svg]:size-8 text-text-950 min-w-20 max-w-20 min-h-full rounded-l-xl'\n          )}\n          style={{\n            backgroundColor: color,\n          }}\n        >\n          <IconRender iconName={icon} color=\"currentColor\" size={20} />\n        </div>\n\n        <div className=\"w-full flex flex-row justify-between items-center\">\n          <div\n            className={cn(\n              'p-4 flex flex-wrap justify-between w-full h-full',\n              isRow ? 'flex-row items-center gap-2' : 'flex-col'\n            )}\n          >\n            <p className=\"text-sm font-bold text-text-950 flex-1\">{header}</p>\n            <span className=\"flex flex-wrap flex-row gap-1 items-center\">\n              <Badge\n                action=\"success\"\n                variant=\"solid\"\n                size=\"large\"\n                iconLeft={<CheckCircle />}\n              >\n                {correct_answers} Corretas\n              </Badge>\n\n              <Badge\n                action=\"error\"\n                variant=\"solid\"\n                size=\"large\"\n                iconLeft={<XCircle />}\n              >\n                {incorrect_answers} Incorretas\n              </Badge>\n            </span>\n          </div>\n\n          <CaretRight className=\"min-w-6 min-h-6 text-text-800\" />\n        </div>\n      </CardBase>\n    );\n  }\n);\n\ninterface CardStatusProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  status?: 'correct' | 'incorrect' | 'unanswered' | 'pending';\n  label?: string;\n}\n\nconst CardStatus = forwardRef<HTMLDivElement, CardStatusProps>(\n  ({ header, className, status, label, ...props }, ref) => {\n    const getLabelBadge = (status: CardStatusProps['status']) => {\n      switch (status) {\n        case 'correct':\n          return 'Correta';\n        case 'incorrect':\n          return 'Incorreta';\n        case 'unanswered':\n          return 'Em branco';\n        case 'pending':\n          return 'Avaliação pendente';\n        default:\n          return 'Em branco';\n      }\n    };\n\n    const getIconBadge = (status: CardStatusProps['status']) => {\n      switch (status) {\n        case 'correct':\n          return <CheckCircle />;\n        case 'incorrect':\n          return <XCircle />;\n        case 'pending':\n          return <Clock />;\n        default:\n          return <XCircle />;\n      }\n    };\n\n    const getActionBadge = (status: CardStatusProps['status']) => {\n      switch (status) {\n        case 'correct':\n          return 'success';\n        case 'incorrect':\n          return 'error';\n        case 'pending':\n          return 'info';\n        default:\n          return 'info';\n      }\n    };\n\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"medium\"\n        minHeight=\"medium\"\n        className={cn('items-center cursor-pointer', className)}\n        {...props}\n      >\n        <div className=\"flex justify-between w-full h-full flex-row items-center gap-2\">\n          <p className=\"text-sm font-bold text-text-950 truncate flex-1 min-w-0\">\n            {header}\n          </p>\n          <span className=\"flex flex-row gap-1 items-center flex-shrink-0\">\n            {status && (\n              <Badge\n                action={getActionBadge(status)}\n                variant=\"solid\"\n                size=\"medium\"\n                iconLeft={getIconBadge(status)}\n              >\n                {getLabelBadge(status)}\n              </Badge>\n            )}\n            {label && <p className=\"text-sm text-text-800\">{label}</p>}\n          </span>\n          <CaretRight className=\"min-w-6 min-h-6 text-text-800 cursor-pointer flex-shrink-0 ml-2\" />\n        </div>\n      </CardBase>\n    );\n  }\n);\n\ninterface CardSettingsProps extends HTMLAttributes<HTMLDivElement> {\n  icon: ReactNode;\n  header: string;\n}\n\nconst CardSettings = forwardRef<HTMLDivElement, CardSettingsProps>(\n  ({ header, className, icon, ...props }, ref) => {\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"small\"\n        minHeight=\"none\"\n        className={cn(\n          'border-none items-center gap-2 text-text-700',\n          className\n        )}\n        {...props}\n      >\n        <span className=\"[&>svg]:size-6\">{icon}</span>\n\n        <p className=\"w-full text-sm truncate\">{header}</p>\n\n        <CaretRight size={24} className=\"cursor-pointer\" />\n      </CardBase>\n    );\n  }\n);\n\ninterface CardSupportProps extends HTMLAttributes<HTMLDivElement> {\n  header: string;\n  direction?: 'row' | 'col';\n  children: ReactNode;\n}\n\nconst CardSupport = forwardRef<HTMLDivElement, CardSupportProps>(\n  ({ header, className, direction = 'col', children, ...props }, ref) => {\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"medium\"\n        minHeight=\"none\"\n        className={cn(\n          'border-none items-center gap-2 text-text-700',\n          className\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            'w-full flex',\n            direction == 'col' ? 'flex-col' : 'flex-row items-center'\n          )}\n        >\n          <span className=\"w-full min-w-0\">\n            <p className=\"text-sm text-text-950 font-bold truncate\">{header}</p>\n          </span>\n          <span className=\"flex flex-row gap-1\">{children}</span>\n        </div>\n\n        <CaretRight className=\"text-text-800 cursor-pointer\" size={24} />\n      </CardBase>\n    );\n  }\n);\n\ninterface CardForumProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {\n  title: string;\n  content: string;\n  comments: number;\n  date: string;\n  hour: string;\n  onClickComments?: (value?: T) => void;\n  valueComments?: T;\n  onClickProfile?: (profile?: T) => void;\n  valueProfile?: T;\n}\n\nconst CardForum = forwardRef<HTMLDivElement, CardForumProps>(\n  (\n    {\n      title,\n      content,\n      comments,\n      onClickComments,\n      valueComments,\n      onClickProfile,\n      valueProfile,\n      className = '',\n      date,\n      hour,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"medium\"\n        minHeight=\"none\"\n        variant=\"minimal\"\n        className={cn('w-auto h-auto gap-3', className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Ver perfil\"\n          onClick={() => onClickProfile?.(valueProfile)}\n          className=\"min-w-8 h-8 rounded-full bg-background-950\"\n        />\n\n        <div className=\"flex flex-col gap-2 flex-1 min-w-0\">\n          <div className=\"flex flex-row gap-1 items-center flex-wrap\">\n            <p className=\"text-xs font-semibold text-primary-700 truncate\">\n              {title}\n            </p>\n            <p className=\"text-xs text-text-600\">\n              • {date} • {hour}\n            </p>\n          </div>\n\n          <p className=\"text-text-950 text-sm line-clamp-2 truncate\">\n            {content}\n          </p>\n\n          <button\n            type=\"button\"\n            aria-label=\"Ver comentários\"\n            onClick={() => onClickComments?.(valueComments)}\n            className=\"text-text-600 flex flex-row gap-2 items-center\"\n          >\n            <ChatCircleText aria-hidden=\"true\" size={16} />\n            <p className=\"text-xs\">{comments} respostas</p>\n          </button>\n        </div>\n      </CardBase>\n    );\n  }\n);\n\ninterface CardAudioProps extends HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  title?: string;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onEnded?: () => void;\n  onAudioTimeUpdate?: (currentTime: number, duration: number) => void;\n  loop?: boolean;\n  preload?: 'none' | 'metadata' | 'auto';\n  tracks?: Array<{\n    kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';\n    src: string;\n    srcLang: string;\n    label: string;\n    default?: boolean;\n  }>;\n}\n\nconst CardAudio = forwardRef<HTMLDivElement, CardAudioProps>(\n  (\n    {\n      src,\n      title,\n      onPlay,\n      onPause,\n      onEnded,\n      onAudioTimeUpdate,\n      loop = false,\n      preload = 'metadata',\n      tracks,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [currentTime, setCurrentTime] = useState(0);\n    const [duration, setDuration] = useState(0);\n    const [volume, setVolume] = useState(1);\n    const [showVolumeControl, setShowVolumeControl] = useState(false);\n    const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n    const [playbackRate, setPlaybackRate] = useState(1);\n    const audioRef = useRef<HTMLAudioElement>(null);\n    const volumeControlRef = useRef<HTMLDivElement>(null);\n    const speedMenuRef = useRef<HTMLDivElement>(null);\n\n    const formatTime = (time: number) => {\n      const minutes = Math.floor(time / 60);\n      const seconds = Math.floor(time % 60);\n      return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n    };\n\n    const handlePlayPause = () => {\n      if (isPlaying) {\n        audioRef.current?.pause();\n        setIsPlaying(false);\n        onPause?.();\n      } else {\n        audioRef.current?.play();\n        setIsPlaying(true);\n        onPlay?.();\n      }\n    };\n\n    const handleTimeUpdate = () => {\n      const current = audioRef.current?.currentTime ?? 0;\n      const total = audioRef.current?.duration ?? 0;\n\n      setCurrentTime(current);\n      setDuration(total);\n      onAudioTimeUpdate?.(current, total);\n    };\n\n    const handleLoadedMetadata = () => {\n      setDuration(audioRef.current?.duration ?? 0);\n    };\n\n    const handleEnded = () => {\n      setIsPlaying(false);\n      setCurrentTime(0);\n      onEnded?.();\n    };\n\n    const handleProgressClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const clickX = e.clientX - rect.left;\n      const width = rect.width;\n      const percentage = clickX / width;\n      const newTime = percentage * duration;\n\n      if (audioRef.current) {\n        audioRef.current.currentTime = newTime;\n      }\n      setCurrentTime(newTime);\n    };\n\n    const handleVolumeChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const newVolume = parseFloat(e.target.value);\n      setVolume(newVolume);\n      if (audioRef.current) {\n        audioRef.current.volume = newVolume;\n      }\n    };\n\n    const toggleVolumeControl = () => {\n      setShowVolumeControl(!showVolumeControl);\n      setShowSpeedMenu(false);\n    };\n\n    const toggleSpeedMenu = () => {\n      setShowSpeedMenu(!showSpeedMenu);\n      setShowVolumeControl(false);\n    };\n\n    const handleSpeedChange = (speed: number) => {\n      setPlaybackRate(speed);\n      if (audioRef.current) {\n        audioRef.current.playbackRate = speed;\n      }\n      setShowSpeedMenu(false);\n    };\n\n    const getVolumeIcon = () => {\n      if (volume === 0) {\n        return <SpeakerSimpleX size={24} />;\n      }\n      if (volume < 0.5) {\n        return <SpeakerLow size={24} />;\n      }\n      return <SpeakerHigh size={24} />;\n    };\n\n    useEffect(() => {\n      const handleClickOutside = (event: Event) => {\n        if (\n          volumeControlRef.current &&\n          !volumeControlRef.current.contains(event.target as Node)\n        ) {\n          setShowVolumeControl(false);\n        }\n        if (\n          speedMenuRef.current &&\n          !speedMenuRef.current.contains(event.target as Node)\n        ) {\n          setShowSpeedMenu(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n      };\n    }, []);\n\n    return (\n      <CardBase\n        ref={ref}\n        layout=\"horizontal\"\n        padding=\"medium\"\n        minHeight=\"none\"\n        className={cn(\n          'flex flex-row w-auto h-14 items-center gap-2',\n          className\n        )}\n        {...props}\n      >\n        {/* Audio element */}\n        <audio\n          ref={audioRef}\n          src={src}\n          loop={loop}\n          preload={preload}\n          onTimeUpdate={handleTimeUpdate}\n          onLoadedMetadata={handleLoadedMetadata}\n          onEnded={handleEnded}\n          data-testid=\"audio-element\"\n          aria-label={title}\n        >\n          {tracks ? (\n            tracks.map((track) => (\n              <track\n                key={track.src}\n                kind={track.kind}\n                src={track.src}\n                srcLang={track.srcLang}\n                label={track.label}\n                default={track.default}\n              />\n            ))\n          ) : (\n            <track\n              kind=\"captions\"\n              src=\"data:text/vtt;base64,\"\n              srcLang=\"pt\"\n              label=\"Sem legendas disponíveis\"\n            />\n          )}\n        </audio>\n\n        {/* Play/Pause Button */}\n        <button\n          type=\"button\"\n          onClick={handlePlayPause}\n          disabled={!src}\n          className=\"cursor-pointer text-text-950 hover:text-primary-600 disabled:text-text-400 disabled:cursor-not-allowed\"\n          aria-label={isPlaying ? 'Pausar' : 'Reproduzir'}\n        >\n          {isPlaying ? (\n            <div className=\"w-6 h-6 flex items-center justify-center\">\n              <div className=\"flex gap-0.5\">\n                <div className=\"w-1 h-4 bg-current rounded-sm\"></div>\n                <div className=\"w-1 h-4 bg-current rounded-sm\"></div>\n              </div>\n            </div>\n          ) : (\n            <Play size={24} />\n          )}\n        </button>\n\n        {/* Current Time */}\n        <p className=\"text-text-800 text-md font-medium min-w-[2.5rem]\">\n          {formatTime(currentTime)}\n        </p>\n\n        {/* Progress Bar */}\n        <div className=\"flex-1 relative\" data-testid=\"progress-bar\">\n          <button\n            type=\"button\"\n            className=\"w-full h-2 bg-border-100 rounded-full cursor-pointer\"\n            onClick={handleProgressClick}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                handleProgressClick(\n                  e as unknown as MouseEvent<HTMLButtonElement>\n                );\n              }\n            }}\n            aria-label=\"Barra de progresso do áudio\"\n          >\n            <div\n              className=\"h-full bg-primary-600 rounded-full transition-all duration-100\"\n              style={{\n                width:\n                  duration > 0 ? `${(currentTime / duration) * 100}%` : '0%',\n              }}\n            />\n          </button>\n        </div>\n\n        {/* Duration */}\n        <p className=\"text-text-800 text-md font-medium min-w-[2.5rem]\">\n          {formatTime(duration)}\n        </p>\n\n        {/* Volume Control */}\n        <div className=\"relative h-6\" ref={volumeControlRef}>\n          <button\n            type=\"button\"\n            onClick={toggleVolumeControl}\n            className=\"cursor-pointer text-text-950 hover:text-primary-600\"\n            aria-label=\"Controle de volume\"\n          >\n            <div className=\"w-6 h-6 flex items-center justify-center\">\n              {getVolumeIcon()}\n            </div>\n          </button>\n\n          {showVolumeControl && (\n            <button\n              type=\"button\"\n              className=\"absolute bottom-full right-0 mb-2 p-2 bg-background border border-border-100 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500\"\n              onKeyDown={(e) => {\n                if (e.key === 'Escape') {\n                  setShowVolumeControl(false);\n                }\n              }}\n            >\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.1\"\n                value={volume}\n                onChange={handleVolumeChange}\n                onKeyDown={(e) => {\n                  if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {\n                    e.preventDefault();\n                    const newVolume = Math.min(\n                      1,\n                      Math.round((volume + 0.1) * 10) / 10\n                    );\n                    setVolume(newVolume);\n                    if (audioRef.current) audioRef.current.volume = newVolume;\n                  } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {\n                    e.preventDefault();\n                    const newVolume = Math.max(\n                      0,\n                      Math.round((volume - 0.1) * 10) / 10\n                    );\n                    setVolume(newVolume);\n                    if (audioRef.current) audioRef.current.volume = newVolume;\n                  }\n                }}\n                className=\"w-20 h-2 bg-border-100 rounded-lg appearance-none cursor-pointer\"\n                style={{\n                  background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${volume * 100}%, #e5e7eb ${volume * 100}%, #e5e7eb 100%)`,\n                }}\n                aria-label=\"Volume\"\n                aria-valuenow={Math.round(volume * 100)}\n                aria-valuemin={0}\n                aria-valuemax={100}\n              />\n            </button>\n          )}\n        </div>\n\n        {/* Menu Button */}\n        <div className=\"relative h-6\" ref={speedMenuRef}>\n          <button\n            type=\"button\"\n            onClick={toggleSpeedMenu}\n            className=\"cursor-pointer text-text-950 hover:text-primary-600\"\n            aria-label=\"Opções de velocidade\"\n          >\n            <DotsThreeVertical size={24} />\n          </button>\n\n          {showSpeedMenu && (\n