@greatapps/common 1.1.694 → 1.1.697

package/src/components/widgets/ImageUpload/ImageCropModal.tsx

@@ -1,382 +1,392 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { useTranslations } from 'next-intl'
-import ReactCrop, {
-  type Crop,
-  centerCrop,
-  makeAspectCrop,
-} from 'react-image-crop'
-import 'react-image-crop/dist/ReactCrop.css'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../../ui/overlay/Dialog'
-import { Button } from '../../ui/buttons/Button'
-
-// CSS customizado para grid pontilhado fino e círculo
-const baseCropStyles = `
-  .custom-crop-area .ReactCrop__crop-selection {
-    border: 2px solid white !important;
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
-  }
-
-  /* Grid de 9 quadrados - linhas pontilhadas finas */
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {
-    position: absolute;
-    background: repeating-linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0.5) 0,
-      rgba(255, 255, 255, 0.5) 4px,
-      transparent 4px,
-      transparent 8px
-    );
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {
-    left: 0;
-    right: 0;
-    height: 1px;
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: repeating-linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0.5) 0,
-      rgba(255, 255, 255, 0.5) 4px,
-      transparent 4px,
-      transparent 8px
-    );
-  }
-
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }
-  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }
-
-  /* Círculo inscrito */
-  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {
-    position: absolute;
-    inset: 0;
-    border: 1px dashed rgba(255, 255, 255, 0.6);
-    border-radius: 50%;
-    pointer-events: none;
-  }
-
-  /* Ocultar handles das laterais (manter só os 4 cantos) */
-  .custom-crop-area .ReactCrop__drag-handle.ord-n,
-  .custom-crop-area .ReactCrop__drag-handle.ord-s,
-  .custom-crop-area .ReactCrop__drag-handle.ord-e,
-  .custom-crop-area .ReactCrop__drag-handle.ord-w {
-    display: none !important;
-  }
-
-  /* Estilizar handles dos cantos — indicador preto em L nos cantos */
-  .custom-crop-area .ReactCrop__drag-handle.ord-nw,
-  .custom-crop-area .ReactCrop__drag-handle.ord-ne,
-  .custom-crop-area .ReactCrop__drag-handle.ord-sw,
-  .custom-crop-area .ReactCrop__drag-handle.ord-se {
-    width: 20px;
-    height: 20px;
-    background: transparent !important;
-    border: none !important;
-  }
-
-  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after,
-  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after,
-  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after,
-  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {
-    content: '';
-    position: absolute;
-    width: 22px;
-    height: 22px;
-    border-color: white;
-    border-style: solid;
-    border-width: 0;
-  }
-
-  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after {
-    top: -2px; left: -2px;
-    border-top-width: 4px;
-    border-left-width: 4px;
-  }
-
-  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after {
-    top: -2px; right: -2px;
-    border-top-width: 4px;
-    border-right-width: 4px;
-  }
-
-  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after {
-    bottom: -2px; left: -2px;
-    border-bottom-width: 4px;
-    border-left-width: 4px;
-  }
-
-  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {
-    bottom: -2px; right: -2px;
-    border-bottom-width: 4px;
-    border-right-width: 4px;
-  }
-
-  /* Desabilitar drag da imagem de fundo */
-  .custom-crop-area img {
-    pointer-events: none;
-    user-select: none;
-    -webkit-user-drag: none;
-  }
-`
-
-interface ImageCropModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  imageSrc: string
-  aspectRatio: number
-  onConfirm: (image: HTMLImageElement, crop: Crop) => void
-  onCancel?: () => void
-  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void
-  showCircleGuide?: boolean
-  minWidth?: number
-  minHeight?: number
-  /**
-   * Nome do arquivo atual, usado na mensagem da variante "imagem muito pequena".
-   * Opcional — se ausente, a mensagem cai num texto genérico.
-   */
-  fileName?: string
-  /**
-   * Callback disparado quando o usuário clica em "Enviar outra" na variante
-   * "imagem muito pequena". Normalmente abre um file input. Se não for passado,
-   * o botão "Enviar outra" é escondido.
-   */
-  onSelectAnother?: () => void
-}
-
-type ImageStatus = 'loading' | 'too-small' | 'ok'
-
-export function ImageCropModal({
-  open,
-  onOpenChange,
-  imageSrc,
-  aspectRatio,
-  onConfirm,
-  onCancel,
-  onImageLoad: onImageLoadCallback,
-  showCircleGuide,
-  minWidth,
-  minHeight,
-  fileName,
-  onSelectAnother,
-}: ImageCropModalProps) {
-  const translate = useTranslations()
-  const imgRef = useRef<HTMLImageElement>(null)
-  const [crop, setCrop] = useState<Crop>()
-  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
-  const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')
-
-  // Ref pra callback externo — evita re-rodar o effect de preload toda vez que
-  // a identidade do callback muda.
-  const onImageLoadCallbackRef = useRef(onImageLoadCallback)
-  useEffect(() => {
-    onImageLoadCallbackRef.current = onImageLoadCallback
-  })
-
-  // Pre-carrega a imagem fora do DOM pra medir dimensões ANTES de montar
-  // o ReactCrop. Assim conseguimos decidir entre a variante de crop e a
-  // variante "imagem muito pequena" sem flash de UI.
-  useEffect(() => {
-    if (!open || !imageSrc) {
-      setImageStatus('loading')
-      return
-    }
-
-    setImageStatus('loading')
-    let cancelled = false
-
-    const img = new window.Image()
-    img.onload = () => {
-      if (cancelled) return
-      const { naturalWidth, naturalHeight } = img
-      setImageSize({ width: naturalWidth, height: naturalHeight })
-      onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)
-
-      const tooSmall =
-        (minWidth !== undefined && naturalWidth < minWidth) ||
-        (minHeight !== undefined && naturalHeight < minHeight)
-      setImageStatus(tooSmall ? 'too-small' : 'ok')
-    }
-    img.onerror = () => {
-      if (cancelled) return
-      setImageStatus('too-small')
-    }
-    img.src = imageSrc
-
-    return () => {
-      cancelled = true
-    }
-  }, [open, imageSrc, minWidth, minHeight])
-
-  // Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em
-  // cache vinda do preload, então carrega instantâneo.
-  const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const { naturalWidth, naturalHeight } = e.currentTarget
-    const initialCrop = centerCrop(
-      makeAspectCrop(
-        { unit: '%', width: 90 },
-        aspectRatio,
-        naturalWidth,
-        naturalHeight
-      ),
-      naturalWidth,
-      naturalHeight
-    )
-    setCrop(initialCrop)
-  }
-
-  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels
-  const minCropWidth = minWidth && imageSize.width > 0
-    ? Math.min((minWidth / imageSize.width) * 100, 100)
-    : undefined
-  const minCropHeight = minHeight && imageSize.height > 0
-    ? Math.min((minHeight / imageSize.height) * 100, 100)
-    : undefined
-
-  const handleConfirm = () => {
-    if (imgRef.current && crop) {
-      onConfirm(imgRef.current, crop)
-    }
-  }
-
-  const handleCancel = () => {
-    onCancel?.()
-    onOpenChange(false)
-  }
-
-  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)
-  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1
-
-  // Renderiza grid, círculo e bolinhas dentro da área de crop
-  const renderSelectionAddon = () => (
-    <>
-      {/* Grid de 9 quadrados com linhas pontilhadas */}
-      <div className="crop-grid">
-        <div className="crop-grid-line horizontal h1" />
-        <div className="crop-grid-line horizontal h2" />
-        <div className="crop-grid-line vertical v1" />
-        <div className="crop-grid-line vertical v2" />
-      </div>
-      {/* Círculo inscrito */}
-      {shouldShowCircle && <div className="crop-circle" />}
-    </>
-  )
-
-  const dimensionText =
-    minWidth !== undefined && minHeight !== undefined
-      ? `${minWidth}x${minHeight}px`
-      : null
-
-  const isTooSmall = imageStatus === 'too-small'
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <style>{baseCropStyles}</style>
-      <DialogContent
-        className={
-          isTooSmall
-            ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
-            : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
-        }
-        overlayClassName="z-[1002]!"
-      >
-        {isTooSmall ? (
-          <>
-            <DialogHeader className="p-5">
-              <DialogTitle className="text-center text-[16px]!">
-                {dimensionText
-                  ? translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })
-                  : translate('common.imageUpload.tooSmallTitleGeneric')}
-              </DialogTitle>
-            </DialogHeader>
-
-            <div className="px-5 pb-5">
-              <p className="paragraph-small-regular text-zinc-600 text-center">
-                {fileName && dimensionText
-                  ? translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })
-                  : fileName && !dimensionText
-                    ? translate('common.imageUpload.tooSmallBodyFileGeneric', { fileName })
-                    : !fileName && dimensionText
-                      ? translate('common.imageUpload.tooSmallBodyNoFileWithDimension', { dimensionText })
-                      : translate('common.imageUpload.tooSmallBodyNoFileGeneric')}
-              </p>
-            </div>
-
-            <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-              {onSelectAnother && <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>}
-              <Button variant="secondary" onClick={handleCancel}>
-                {translate('common.actions.cancel')}
-              </Button>
-            </DialogFooter>
-          </>
-        ) : (
-          <>
-            <DialogHeader className="p-5">
-              <DialogTitle className="text-center text-[16px]!">
-                {translate('common.imageUpload.cropTitle')}
-              </DialogTitle>
-            </DialogHeader>
-
-            <div className="flex flex-col gap-4 px-5 pb-5">
-              <div className="flex justify-center overflow-hidden rounded-lg min-h-[200px]">
-                {imageStatus === 'ok' && (
-                  <ReactCrop
-                    crop={crop}
-                    onChange={(c: Crop) => setCrop(c)}
-                    aspect={aspectRatio}
-                    className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
-                    keepSelection
-                    minWidth={minCropWidth}
-                    minHeight={minCropHeight}
-                    renderSelectionAddon={renderSelectionAddon}
-                  >
-                    <img
-                      ref={imgRef}
-                      src={imageSrc}
-                      alt={translate('common.imageUpload.cropAlt')}
-                      onLoad={onCropImgLoad}
-                      draggable={false}
-                      className="max-h-[50vh] object-contain select-none"
-                    />
-                  </ReactCrop>
-                )}
-              </div>
-
-              <p className="paragraph-small-regular text-zinc-500 text-center">
-                {translate('common.imageUpload.cropHint')}
-              </p>
-            </div>
-
-            <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-              <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>
-                {translate('common.actions.confirm')}
-              </Button>
-              <Button variant="secondary" onClick={handleCancel}>
-                {translate('common.actions.cancel')}
-              </Button>
-            </DialogFooter>
-          </>
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import ReactCrop, {
+  type Crop,
+  centerCrop,
+  makeAspectCrop,
+} from 'react-image-crop'
+import 'react-image-crop/dist/ReactCrop.css'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/overlay/Dialog'
+import { Button } from '../../ui/buttons/Button'
+
+// CSS customizado para grid pontilhado fino e círculo
+const baseCropStyles = `
+  .custom-crop-area .ReactCrop__crop-selection {
+    border: 2px solid white !important;
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
+  }
+
+  /* Grid de 9 quadrados - linhas pontilhadas finas */
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {
+    position: absolute;
+    background: repeating-linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0.5) 0,
+      rgba(255, 255, 255, 0.5) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {
+    left: 0;
+    right: 0;
+    height: 1px;
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: repeating-linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.5) 0,
+      rgba(255, 255, 255, 0.5) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }
+  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }
+
+  /* Círculo inscrito */
+  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {
+    position: absolute;
+    inset: 0;
+    border: 1px dashed rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  /* Ocultar handles das laterais (manter só os 4 cantos) */
+  .custom-crop-area .ReactCrop__drag-handle.ord-n,
+  .custom-crop-area .ReactCrop__drag-handle.ord-s,
+  .custom-crop-area .ReactCrop__drag-handle.ord-e,
+  .custom-crop-area .ReactCrop__drag-handle.ord-w {
+    display: none !important;
+  }
+
+  /* Estilizar handles dos cantos — indicador preto em L nos cantos */
+  .custom-crop-area .ReactCrop__drag-handle.ord-nw,
+  .custom-crop-area .ReactCrop__drag-handle.ord-ne,
+  .custom-crop-area .ReactCrop__drag-handle.ord-sw,
+  .custom-crop-area .ReactCrop__drag-handle.ord-se {
+    width: 20px;
+    height: 20px;
+    background: transparent !important;
+    border: none !important;
+  }
+
+  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after,
+  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after,
+  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after,
+  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {
+    content: '';
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    border-color: white;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after {
+    top: -2px; left: -2px;
+    border-top-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after {
+    top: -2px; right: -2px;
+    border-top-width: 4px;
+    border-right-width: 4px;
+  }
+
+  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after {
+    bottom: -2px; left: -2px;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
+  }
+
+  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {
+    bottom: -2px; right: -2px;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
+  }
+
+  /* Desabilitar drag da imagem de fundo */
+  .custom-crop-area img {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-drag: none;
+    /* Xadrez de transparência: fica atrás dos pixels da imagem, então só
+       aparece onde a imagem é transparente. Imagens opacas cobrem o padrão. */
+    background-color: #fff;
+    background-image:
+      linear-gradient(45deg, #ccc 25%, transparent 25%),
+      linear-gradient(-45deg, #ccc 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ccc 75%),
+      linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  }
+`
+
+interface ImageCropModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  imageSrc: string
+  aspectRatio: number
+  onConfirm: (image: HTMLImageElement, crop: Crop) => void
+  onCancel?: () => void
+  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void
+  showCircleGuide?: boolean
+  minWidth?: number
+  minHeight?: number
+  /**
+   * Nome do arquivo atual, usado na mensagem da variante "imagem muito pequena".
+   * Opcional — se ausente, a mensagem cai num texto genérico.
+   */
+  fileName?: string
+  /**
+   * Callback disparado quando o usuário clica em "Enviar outra" na variante
+   * "imagem muito pequena". Normalmente abre um file input. Se não for passado,
+   * o botão "Enviar outra" é escondido.
+   */
+  onSelectAnother?: () => void
+}
+
+type ImageStatus = 'loading' | 'too-small' | 'ok'
+
+export function ImageCropModal({
+  open,
+  onOpenChange,
+  imageSrc,
+  aspectRatio,
+  onConfirm,
+  onCancel,
+  onImageLoad: onImageLoadCallback,
+  showCircleGuide,
+  minWidth,
+  minHeight,
+  fileName,
+  onSelectAnother,
+}: ImageCropModalProps) {
+  const translate = useTranslations()
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [crop, setCrop] = useState<Crop>()
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
+  const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')
+
+  // Ref pra callback externo — evita re-rodar o effect de preload toda vez que
+  // a identidade do callback muda.
+  const onImageLoadCallbackRef = useRef(onImageLoadCallback)
+  useEffect(() => {
+    onImageLoadCallbackRef.current = onImageLoadCallback
+  })
+
+  // Pre-carrega a imagem fora do DOM pra medir dimensões ANTES de montar
+  // o ReactCrop. Assim conseguimos decidir entre a variante de crop e a
+  // variante "imagem muito pequena" sem flash de UI.
+  useEffect(() => {
+    if (!open || !imageSrc) {
+      setImageStatus('loading')
+      return
+    }
+
+    setImageStatus('loading')
+    let cancelled = false
+
+    const img = new window.Image()
+    img.onload = () => {
+      if (cancelled) return
+      const { naturalWidth, naturalHeight } = img
+      setImageSize({ width: naturalWidth, height: naturalHeight })
+      onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)
+
+      const tooSmall =
+        (minWidth !== undefined && naturalWidth < minWidth) ||
+        (minHeight !== undefined && naturalHeight < minHeight)
+      setImageStatus(tooSmall ? 'too-small' : 'ok')
+    }
+    img.onerror = () => {
+      if (cancelled) return
+      setImageStatus('too-small')
+    }
+    img.src = imageSrc
+
+    return () => {
+      cancelled = true
+    }
+  }, [open, imageSrc, minWidth, minHeight])
+
+  // Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em
+  // cache vinda do preload, então carrega instantâneo.
+  const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth, naturalHeight } = e.currentTarget
+    const initialCrop = centerCrop(
+      makeAspectCrop(
+        { unit: '%', width: 90 },
+        aspectRatio,
+        naturalWidth,
+        naturalHeight
+      ),
+      naturalWidth,
+      naturalHeight
+    )
+    setCrop(initialCrop)
+  }
+
+  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels
+  const minCropWidth = minWidth && imageSize.width > 0
+    ? Math.min((minWidth / imageSize.width) * 100, 100)
+    : undefined
+  const minCropHeight = minHeight && imageSize.height > 0
+    ? Math.min((minHeight / imageSize.height) * 100, 100)
+    : undefined
+
+  const handleConfirm = () => {
+    if (imgRef.current && crop) {
+      onConfirm(imgRef.current, crop)
+    }
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    onOpenChange(false)
+  }
+
+  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)
+  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1
+
+  // Renderiza grid, círculo e bolinhas dentro da área de crop
+  const renderSelectionAddon = () => (
+    <>
+      {/* Grid de 9 quadrados com linhas pontilhadas */}
+      <div className="crop-grid">
+        <div className="crop-grid-line horizontal h1" />
+        <div className="crop-grid-line horizontal h2" />
+        <div className="crop-grid-line vertical v1" />
+        <div className="crop-grid-line vertical v2" />
+      </div>
+      {/* Círculo inscrito */}
+      {shouldShowCircle && <div className="crop-circle" />}
+    </>
+  )
+
+  const dimensionText =
+    minWidth !== undefined && minHeight !== undefined
+      ? `${minWidth}x${minHeight}px`
+      : null
+
+  const isTooSmall = imageStatus === 'too-small'
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <style>{baseCropStyles}</style>
+      <DialogContent
+        className={
+          isTooSmall
+            ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
+            : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
+        }
+        overlayClassName="z-[1002]!"
+      >
+        {isTooSmall ? (
+          <>
+            <DialogHeader className="p-5">
+              <DialogTitle className="text-center text-[16px]!">
+                {dimensionText
+                  ? translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })
+                  : translate('common.imageUpload.tooSmallTitleGeneric')}
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="px-5 pb-5">
+              <p className="paragraph-small-regular text-zinc-600 text-center">
+                {fileName && dimensionText
+                  ? translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })
+                  : fileName && !dimensionText
+                    ? translate('common.imageUpload.tooSmallBodyFileGeneric', { fileName })
+                    : !fileName && dimensionText
+                      ? translate('common.imageUpload.tooSmallBodyNoFileWithDimension', { dimensionText })
+                      : translate('common.imageUpload.tooSmallBodyNoFileGeneric')}
+              </p>
+            </div>
+
+            <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+              {onSelectAnother && <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>}
+              <Button variant="secondary" onClick={handleCancel}>
+                {translate('common.actions.cancel')}
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader className="p-5">
+              <DialogTitle className="text-center text-[16px]!">
+                {translate('common.imageUpload.cropTitle')}
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-4 px-5 pb-5">
+              <div className="flex justify-center overflow-hidden rounded-lg min-h-[200px]">
+                {imageStatus === 'ok' && (
+                  <ReactCrop
+                    crop={crop}
+                    onChange={(c: Crop) => setCrop(c)}
+                    aspect={aspectRatio}
+                    className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
+                    keepSelection
+                    minWidth={minCropWidth}
+                    minHeight={minCropHeight}
+                    renderSelectionAddon={renderSelectionAddon}
+                  >
+                    <img
+                      ref={imgRef}
+                      src={imageSrc}
+                      alt={translate('common.imageUpload.cropAlt')}
+                      onLoad={onCropImgLoad}
+                      draggable={false}
+                      className="max-h-[50vh] object-contain select-none"
+                    />
+                  </ReactCrop>
+                )}
+              </div>
+
+              <p className="paragraph-small-regular text-zinc-500 text-center">
+                {translate('common.imageUpload.cropHint')}
+              </p>
+            </div>
+
+            <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+              <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>
+                {translate('common.actions.confirm')}
+              </Button>
+              <Button variant="secondary" onClick={handleCancel}>
+                {translate('common.actions.cancel')}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}