feat: add carrier media customization

src/widgets/ImageUploadCard/index.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, DragEvent } from "react";
+import React, { useRef, useState, DragEvent } from "react";
 import { Paper, Box, Typography, Button, Tooltip } from "@mui/material";
 import { X, Info, Plus } from "lucide-react";
-import { editSightStore } from "@shared";
+import { editSightStore, PreviewBackgroundToggle } from "@shared";
 import { toast } from "react-toastify";
 interface ImageUploadCardProps {
   title: string;
@@ -33,6 +33,7 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
   tooltipText,
 }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isPreviewBackgroundDark, setIsPreviewBackgroundDark] = useState(false);
   const { setFileToUpload } = editSightStore;
 
   const handleZoneClick = () => {
@@ -124,9 +125,21 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
           borderRadius: 1,
           mb: 1,
           cursor: imageUrl ? "pointer" : "default",
+          backgroundColor: imageUrl
+            ? isPreviewBackgroundDark
+              ? "#000"
+              : "#fff"
+            : "transparent",
+          transition: "background-color 150ms ease",
         }}
         onClick={onImageClick}
       >
+        {imageUrl && (
+          <PreviewBackgroundToggle
+            dark={isPreviewBackgroundDark}
+            onToggle={() => setIsPreviewBackgroundDark((value) => !value)}
+          />
+        )}
         {imageUrl && (
           <button
             className="absolute top-2 right-2"