update the code to use a blur transformation instead of a modifier

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/PaywallBackground.kt

@@ -4,9 +4,6 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.BlurredEdgeTreatment
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.blur
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -18,6 +15,10 @@ import com.revenuecat.purchases.ui.revenuecatui.extensions.defaultBackgroundPlac
 
 @Composable
 internal fun BoxScope.PaywallBackground(templateConfiguration: TemplateConfiguration) {
+    val transformation = if (templateConfiguration.configuration.blurredBackgroundImage)
+        BlurTransformation(radius = BackgroundUIConstants.blurSize, scale = BackgroundUIConstants.blurScale)
+    else null
+
     val modifier = Modifier
         .matchParentSize()
         .conditional(templateConfiguration.configuration.blurredBackgroundImage) {
@@ -39,13 +40,16 @@ internal fun BoxScope.PaywallBackground(templateConfiguration: TemplateConfigura
                 urlString = it.toString(),
                 modifier = modifier,
                 contentScale = BackgroundUIConstants.contentScale,
+                transformation = transformation,
+                alpha = BackgroundUIConstants.blurAlpha
             )
         }
     }
 }
 
 private object BackgroundUIConstants {
-    val blurSize = 40.dp
+    // todo: make this adapt to different pixel densities
+    const val blurSize = 40
     const val blurAlpha = 0.7f
     val contentScale = ContentScale.Crop
 }

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/RemoteImage.kt

@@ -1,5 +1,6 @@
 package com.revenuecat.purchases.ui.revenuecatui.composables
 
+import BlurTransformation
 import android.content.Context
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
@@ -11,6 +12,7 @@ import coil.compose.AsyncImage
 import coil.compose.AsyncImagePainter
 import coil.disk.DiskCache
 import coil.request.ImageRequest
+import coil.transform.Transformation
 import com.revenuecat.purchases.ui.revenuecatui.UIConstant
 import com.revenuecat.purchases.ui.revenuecatui.helpers.Logger
 
@@ -20,16 +22,25 @@ internal fun RemoteImage(
     modifier: Modifier = Modifier,
     contentScale: ContentScale = ContentScale.Fit,
     contentDescription: String? = null,
+    transformation: Transformation? = null,
+    alpha: Float = 1f
 ) {
-    AsyncImage(
-        model = ImageRequest.Builder(LocalContext.current)
-            .data(urlString)
-            .crossfade(durationMillis = UIConstant.defaultAnimationDurationMillis)
-            .build(),
+
+    val requestBuilder = ImageRequest.Builder(LocalContext.current)
+        .data(urlString)
+        .crossfade(durationMillis = UIConstant.defaultAnimationDurationMillis)
+
+    transformation?.let {
+        requestBuilder.transformations(listOf(it))
+    }
+
+    return AsyncImage(
+        model = requestBuilder.build(),
         contentDescription = contentDescription,
         imageLoader = LocalContext.current.getRevenueCatUIImageLoader(),
         modifier = modifier,
         contentScale = contentScale,
+        alpha = alpha,
         onState = {
             when (it) {
                 is AsyncImagePainter.State.Error -> {
@@ -41,6 +52,7 @@ internal fun RemoteImage(
     )
 }
 
+
 private const val MAX_CACHE_SIZE_BYTES = 25 * 1024 * 1024L // 25 MB
 
 @Composable