function MainComponent() { const [gradientType, setGradientType] = useState("linear-lr"); const [selectedSize, setSelectedSize] = useState("landscape"); const [selectedPreset, setSelectedPreset] = useState("custom"); const [selectedQuality, setSelectedQuality] = useState("high"); const [backgroundType, setBackgroundType] = useState("white"); const [colorStops, setColorStops] = useState([ { color: "#FF0000", position: 0, opacity: 100 }, { color: "#0000FF", position: 100, opacity: 100 } ]); const presets = { sunset: [ { color: "#FF8C00", position: 0, opacity: 100 }, { color: "#8B0000", position: 100, opacity: 100 } ], ocean: [ { color: "#87CEEB", position: 0, opacity: 100 }, { color: "#000080", position: 100, opacity: 100 } ], forest: [ { color: "#90EE90", position: 0, opacity: 100 }, { color: "#006400", position: 100, opacity: 100 } ], midnight: [ { color: "#000033", position: 0, opacity: 100 }, { color: "#000000", position: 100, opacity: 100 } ], roseGold: [ { color: "#FFB6C1", position: 0, opacity: 100 }, { color: "#FFD700", position: 100, opacity: 100 } ], lavender: [ { color: "#E6E6FA", position: 0, opacity: 100 }, { color: "#FFFFFF", position: 100, opacity: 100 } ], fire: [ { color: "#FF0000", position: 0, opacity: 100 }, { color: "#FFA500", position: 100, opacity: 100 } ], mint: [ { color: "#98FF98", position: 0, opacity: 100 }, { color: "#00FFFF", position: 100, opacity: 100 } ], cottonCandy: [ { color: "#FFB6C1", position: 0, opacity: 100 }, { color: "#87CEEB", position: 100, opacity: 100 } ], silver: [ { color: "#E8E8E8", position: 0, opacity: 100 }, { color: "#808080", position: 100, opacity: 100 } ], desert: [ { color: "#F4A460", position: 0, opacity: 100 }, { color: "#FF8C00", position: 100, opacity: 100 } ], aurora: [ { color: "#00FF00", position: 0, opacity: 100 }, { color: "#800080", position: 100, opacity: 100 } ], twilight: [ { color: "#000080", position: 0, opacity: 100 }, { color: "#800080", position: 100, opacity: 100 } ], neon: [ { color: "#FF69B4", position: 0, opacity: 100 }, { color: "#00FFFF", position: 100, opacity: 100 } ], summer: [ { color: "#FFD700", position: 0, opacity: 100 }, { color: "#FF69B4", position: 100, opacity: 100 } ], candy: [ { color: "#FF69B4", position: 0, opacity: 100 }, { color: "#800080", position: 100, opacity: 100 } ], citrus: [ { color: "#FFD700", position: 0, opacity: 100 }, { color: "#32CD32", position: 100, opacity: 100 } ], peach: [ { color: "#FFB6C1", position: 0, opacity: 100 }, { color: "#FFFDD0", position: 100, opacity: 100 } ], sky: [ { color: "#87CEEB", position: 0, opacity: 100 }, { color: "#FFFFFF", position: 100, opacity: 100 } ], dawn: [ { color: "#FFB6C1", position: 0, opacity: 100 }, { color: "#FFFACD", position: 100, opacity: 100 } ], electric: [ { color: "#0000FF", position: 0, opacity: 100 }, { color: "#800080", position: 100, opacity: 100 } ], rainbow: [ { color: "#FF0000", position: 0, opacity: 100 }, { color: "#FFA500", position: 50, opacity: 100 }, { color: "#FFFF00", position: 100, opacity: 100 } ], goldenHour: [ { color: "#FFA500", position: 0, opacity: 100 }, { color: "#FFB6C1", position: 100, opacity: 100 } ] }; const convertPositionToDegrees = useCallback((position)=>{ return Math.round(position / 100 * 360); }, []); const convertDegreesToPosition = useCallback((degrees)=>{ return Math.round(degrees / 360 * 100); }, []); const updateColorStop = useCallback((index, updates)=>{ setColorStops((prev)=>prev.map((stop, i)=>i === index ? { ...stop, ...updates } : stop)); }, []); const addColorStop = useCallback(()=>{ if (colorStops.length < 7) { const newPosition = Math.floor(Math.random() * 100); const newColor = "#" + Math.floor(Math.random() * 16777215).toString(16); setColorStops((prev)=>[ ...prev, { color: newColor, position: newPosition, opacity: 100 } ]); } }, [ colorStops.length ]); const removeColorStop = useCallback((index)=>{ setColorStops((prev)=>prev.filter((_, i)=>i !== index)); }, []); const distributeEvenly = useCallback(()=>{ const step = 100 / (colorStops.length - 1); setColorStops((prev)=>prev.map((stop, index)=>({ ...stop, position: Math.round(index * step) }))); }, [ colorStops.length ]); const reverseColors = useCallback(()=>{ setColorStops((prev)=>[ ...prev ].reverse()); }, []); const applyPreset = useCallback((presetName)=>{ if (presetName === "custom") return; setColorStops(presets[presetName]); setSelectedPreset(presetName); }, []); const getGradientStyle = useCallback(()=>{ const sortedStops = [ ...colorStops ].sort((a, b)=>a.position - b.position); const stopsString = sortedStops.map((stop)=>{ const position = gradientType === "conic" ? `${convertPositionToDegrees(stop.position)}deg` : `${stop.position}%`; const rgba = `${stop.color}${Math.round(stop.opacity * 2.55).toString(16).padStart(2, "0")}`; return `${rgba} ${position}`; }).join(", "); const gradientStyles = { "linear-lr": `linear-gradient(to right, ${stopsString})`, "linear-tb": `linear-gradient(to bottom, ${stopsString})`, radial: `radial-gradient(circle at center, ${stopsString})`, conic: `conic-gradient(from 0deg at center, ${stopsString})`, diagonal: `linear-gradient(45deg, ${stopsString})` }; return gradientStyles[gradientType]; }, [ gradientType, colorStops, convertPositionToDegrees ]); const downloadGradient = useCallback(async ()=>{ const canvas = document.createElement("canvas"); const dimensions = { landscape: { width: 1920, height: 1080 }, portrait: { width: 1080, height: 1920 }, square: { width: 1080, height: 1080 } }; const quality = { high: 1, medium: 0.75, low: 0.5 }; const finalDimensions = { width: dimensions[selectedSize].width * quality[selectedQuality], height: dimensions[selectedSize].height * quality[selectedQuality] }; canvas.width = finalDimensions.width; canvas.height = finalDimensions.height; const ctx = canvas.getContext("2d"); let gradient; if (gradientType === "linear-lr") { gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); } else if (gradientType === "linear-tb") { gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); } else if (gradientType === "radial") { gradient = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2); } else if (gradientType === "conic") { gradient = ctx.createConicGradient(0, canvas.width / 2, canvas.height / 2); } else { gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); } const sortedStops = [ ...colorStops ].sort((a, b)=>a.position - b.position); sortedStops.forEach((stop)=>{ const opacity = stop.opacity / 100; gradient.addColorStop(stop.position / 100, `${stop.color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`); }); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); const link = document.createElement("a"); link.download = `gradient-${selectedSize}-${selectedQuality}.png`; link.href = canvas.toDataURL(); link.click(); }, [ gradientType, colorStops, selectedSize, selectedQuality ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 239, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row min-h-screen", __source: { fileName: "", lineNumber: 240, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[40%] p-6 bg-white overflow-y-auto", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, "Canvas Size"), /*#__PURE__*/ React.createElement("select", { value: selectedSize, onChange: (e)=>setSelectedSize(e.target.value), className: "w-full p-2 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "landscape", __source: { fileName: "", lineNumber: 252, columnNumber: 17 }, __self: this }, "Landscape (1920×1080px)"), /*#__PURE__*/ React.createElement("option", { value: "portrait", __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this }, "Portrait (1080×1920px)"), /*#__PURE__*/ React.createElement("option", { value: "square", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, "Square (1080×1080px)"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 257, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, "Gradient Type"), /*#__PURE__*/ React.createElement("select", { value: gradientType, onChange: (e)=>setGradientType(e.target.value), className: "w-full p-2 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "linear-lr", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this }, "Linear (Left → Right)"), /*#__PURE__*/ React.createElement("option", { value: "linear-tb", __source: { fileName: "", lineNumber: 267, columnNumber: 17 }, __self: this }, "Linear (Top → Bottom)"), /*#__PURE__*/ React.createElement("option", { value: "radial", __source: { fileName: "", lineNumber: 268, columnNumber: 17 }, __self: this }, "Radial"), /*#__PURE__*/ React.createElement("option", { value: "conic", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, "Conic"), /*#__PURE__*/ React.createElement("option", { value: "diagonal", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, "Diagonal"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 273, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, "Presets"), /*#__PURE__*/ React.createElement("select", { value: selectedPreset, onChange: (e)=>applyPreset(e.target.value), className: "w-full p-2 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this }, "Custom"), /*#__PURE__*/ React.createElement("option", { value: "sunset", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, "Sunset (Orange → Purple)"), /*#__PURE__*/ React.createElement("option", { value: "ocean", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, "Ocean (Light Blue → Dark Blue)"), /*#__PURE__*/ React.createElement("option", { value: "forest", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, "Forest (Light Green → Dark Green)"), /*#__PURE__*/ React.createElement("option", { value: "midnight", __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, "Midnight (Deep Blue → Black)"), /*#__PURE__*/ React.createElement("option", { value: "roseGold", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this }, "Rose Gold (Pink → Gold)"), /*#__PURE__*/ React.createElement("option", { value: "lavender", __source: { fileName: "", lineNumber: 288, columnNumber: 17 }, __self: this }, "Lavender (Light Purple → White)"), /*#__PURE__*/ React.createElement("option", { value: "fire", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, "Fire (Red → Orange)"), /*#__PURE__*/ React.createElement("option", { value: "mint", __source: { fileName: "", lineNumber: 290, columnNumber: 17 }, __self: this }, "Mint (Light Green → Cyan)"), /*#__PURE__*/ React.createElement("option", { value: "cottonCandy", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }, "Cotton Candy (Pink → Light Blue)"), /*#__PURE__*/ React.createElement("option", { value: "silver", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, "Silver (Light Gray → Dark Gray)"), /*#__PURE__*/ React.createElement("option", { value: "desert", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, "Desert (Sand → Orange)"), /*#__PURE__*/ React.createElement("option", { value: "aurora", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, "Aurora (Green → Purple)"), /*#__PURE__*/ React.createElement("option", { value: "twilight", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, "Twilight (Dark Blue → Purple)"), /*#__PURE__*/ React.createElement("option", { value: "neon", __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, "Neon (Hot Pink → Electric Blue)"), /*#__PURE__*/ React.createElement("option", { value: "summer", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, "Summer (Yellow → Pink)"), /*#__PURE__*/ React.createElement("option", { value: "candy", __source: { fileName: "", lineNumber: 298, columnNumber: 17 }, __self: this }, "Candy (Pink → Purple)"), /*#__PURE__*/ React.createElement("option", { value: "citrus", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, "Citrus (Yellow → Green)"), /*#__PURE__*/ React.createElement("option", { value: "peach", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, "Peach (Light Pink → Cream)"), /*#__PURE__*/ React.createElement("option", { value: "sky", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, "Sky (Light Blue → White)"), /*#__PURE__*/ React.createElement("option", { value: "dawn", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, "Dawn (Pink → Light Yellow)"), /*#__PURE__*/ React.createElement("option", { value: "electric", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, "Electric (Blue → Purple)"), /*#__PURE__*/ React.createElement("option", { value: "rainbow", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, "Rainbow (Red → Orange → Yellow)"), /*#__PURE__*/ React.createElement("option", { value: "goldenHour", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, "Golden Hour (Orange → Pink)"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, "Color Stops"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: distributeEvenly, className: "p-2 rounded-lg bg-gray-50 hover:bg-gray-100", title: "Distribute Evenly", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-equals", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: reverseColors, className: "p-2 rounded-lg bg-gray-50 hover:bg-gray-100", title: "Reverse Colors", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exchange-alt", __source: { fileName: "", lineNumber: 327, columnNumber: 21 }, __self: this })), colorStops.length < 7 && /*#__PURE__*/ React.createElement("button", { onClick: addColorStop, className: "p-2 rounded-lg bg-gray-50 hover:bg-gray-100", title: "Add Color Stop", __source: { fileName: "", lineNumber: 330, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 335, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this }, colorStops.map((stop, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative space-y-2", __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "group relative", __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", value: stop.color, onChange: (e)=>updateColorStop(index, { color: e.target.value }), className: "w-[40px] h-[40px] rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 344, columnNumber: 23 }, __self: this }), colorStops.length > 2 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeColorStop(index), className: "absolute -top-2 -right-2 bg-white rounded-full w-5 h-5 items-center justify-center hidden group-hover:flex shadow-sm", __source: { fileName: "", lineNumber: 353, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 357, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: gradientType === "conic" ? "360" : "100", value: gradientType === "conic" ? convertPositionToDegrees(stop.position) : stop.position, onChange: (e)=>{ const value = parseInt(e.target.value); updateColorStop(index, { position: gradientType === "conic" ? convertDegreesToPosition(value) : value }); }, className: "w-[100px]", __source: { fileName: "", lineNumber: 361, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "100", value: stop.opacity, onChange: (e)=>updateColorStop(index, { opacity: parseInt(e.target.value) }), className: "w-[100px]", __source: { fileName: "", lineNumber: 381, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 393, columnNumber: 21 }, __self: this }, "Opacity: ", stop.opacity, "%"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 401, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 402, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 403, columnNumber: 17 }, __self: this }, "Export Quality"), /*#__PURE__*/ React.createElement("select", { value: selectedQuality, onChange: (e)=>setSelectedQuality(e.target.value), className: "w-full p-2 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 406, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "high", __source: { fileName: "", lineNumber: 411, columnNumber: 19 }, __self: this }, "High Quality"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }, "Medium Quality"), /*#__PURE__*/ React.createElement("option", { value: "low", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }, "Low Quality"))), /*#__PURE__*/ React.createElement("button", { onClick: downloadGradient, className: "w-full py-2 px-4 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors text-sm font-medium", __source: { fileName: "", lineNumber: 416, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 420, columnNumber: 17 }, __self: this }), " Download PNG")))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[60%] p-6 flex flex-col items-center justify-center bg-gray-50", __source: { fileName: "", lineNumber: 426, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl space-y-4", __source: { fileName: "", lineNumber: 427, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 428, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setBackgroundType("white"), className: `p-2 rounded ${backgroundType === "white" ? "bg-gray-200" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 429, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-square text-white", __source: { fileName: "", lineNumber: 435, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setBackgroundType("black"), className: `p-2 rounded ${backgroundType === "black" ? "bg-gray-200" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 437, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-square text-black", __source: { fileName: "", lineNumber: 443, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setBackgroundType("checkered"), className: `p-2 rounded ${backgroundType === "checkered" ? "bg-gray-200" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chess-board", __source: { fileName: "", lineNumber: 451, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative w-full overflow-hidden rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 454, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full", style: { paddingBottom: selectedSize === "landscape" ? "56.25%" : selectedSize === "portrait" ? "177.78%" : "100%" }, __source: { fileName: "", lineNumber: 455, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", style: { background: backgroundType === "checkered" ? `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkIBIwEqmOYVQh3pAiNnj+AwC9DA38UaMzUQAAAABJRU5ErkJggg==') repeat,${getGradientStyle()}` : getGradientStyle(), backgroundColor: backgroundType === "black" ? "#000" : "#fff" }, __source: { fileName: "", lineNumber: 466, columnNumber: 17 }, __self: this }))))))); }