@momo-kits/native-kits 0.167.1-sizescale.2-debug → 0.300.1-debug

package/CLAUDE.md

@@ -7,7 +7,7 @@ Guidance for working in this repo. Keep it accurate — update it when structure
 `momo-native-kits` — MoMo's design-system / UI-kit as a **Kotlin Multiplatform + Compose Multiplatform** library, published for Android (AAR/Maven) and iOS (static framework + CocoaPods). It is the Compose port of the React Native `momo-kits`. Consumed by mini-apps embedded in the host MoMo app.
 
 - Artifact: `vn.momo.kits:kits` (version in `gradle.properties`). NPM mirror: `@momo-kits/native-kits`.
-- Targets: `androidTarget` (JVM 17, compile/min/target SDK 36/24/36), `iosArm64`, `iosSimulatorArm64` (framework `baseName = "kits"`, `isStatic = true`).
+- Targets: AGP KMP `android` target (JVM 17, compile/min SDK 37/24; AGP 9.2.1, Gradle 9.5.0), `iosArm64`, `iosSimulatorArm64` (framework `baseName = "kits"`, `isStatic = true`).
 - Kotlin 2.3.10, Compose MP 1.10.3.
 
 ## Modules
@@ -26,11 +26,11 @@ Guidance for working in this repo. Keep it accurate — update it when structure
 
 ## Build & verify
 
-No unit-test suite is configured. Validate changes by compiling the relevant target(s); use the sample app for visual checks.
+Run `./gradlew :compose:testAndroidHostTest` for the request ownership tests in `commonTest`. Compile the relevant Android/iOS targets and use the sample app for visual checks.
 
 ```bash
 ./gradlew :compose:compileCommonMainKotlinMetadata        # validate commonMain (fast, do this first)
-./gradlew :compose:compileDebugKotlinAndroid              # Android target
+./gradlew :compose:compileAndroidMain              # Android target
 ./gradlew :compose:linkDebugFrameworkIosSimulatorArm64    # iOS framework (slow)
 ./gradlew :sample:androidApp:installDebug                 # run demo on device/emulator
 ```
@@ -43,7 +43,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - **Configuration flows via CompositionLocals**, not params. Public ones: `AppTheme`, `AppStatusBar`, `AppNavigationBar` (`const/Theme.kt`); `ApplicationContext`, `AppConfig`, `AppLanguage`, `LocalLocalize` (`application/`); `LocalNavigator`, `LocalMaxApi` (`navigation/`). Read with `X.current`.
 - **Design-system config** (`trustBanner`, `headerBar`, `headerGradient`): the host seeds `KitDesignSystemConfig.update(...)` once (same pattern as `KitFontScale`); `NavigationContainer` provides it as `LocalDesignSystemConfig` (param `designSystemConfig` → parent → global) and applies `headerBar` as the header image when the theme has none.
 - **Platform code** goes through `expect`/`actual` in `platform/` — never reference Android/iOS APIs from `commonMain` directly.
-- **Native bridge:** `IMaxApi` (`vn.momo.maxapi`, exposed as `LocalMaxApi`) is the host-app bridge (dismiss, tracking, device info, language).
+- **Native bridge:** typed `IMaxApi` from NativeMaxApi `0.3.1` (`vn.momo.maxapi`, exposed as `LocalMaxApi`) is the host-app bridge. Toolkit uses `ToolkitOptions` to preserve custom groups and system-tool policy; pending callbacks are cancelled when their composition is disposed. Containers borrow the host client and must not close it.
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
 - **iOS swipe-back:** the host owns the only edge-pan recogniser and replays it through `HostBackGestureBridge` (`navigation/HostBackGestureBridge.kt`; the kit framework is never exported, so the host reaches it through its own Koin-provided facade): `checkCanPop` / `canPopInner` / `pop` route the back into the kit stack, `started` / `progressed` / `completed` / `cancelled` seek the NavHost transition, `shouldUseFloatingArrowBack` is set by bottom tabs. `NavigationContainer` attaches itself automatically (`AttachHostBackGesture`, iOS only, detached by identity on dispose) — hosts need no wrapper and no `setNavigator`. `maxApi` is a required parameter of `NavigationContainer` — every container, nested or root, is handed its host bridge explicitly.
 

package/README.md

@@ -53,7 +53,7 @@ ComposeKit là bộ UI Kit đa nền tảng phục vụ Mini App/SDK của MoMo.
 ---
 
 ### Yêu cầu môi trường
-- JDK 17+, Gradle 8, Android Studio Hedgehog+ với Android SDK (compileSdk xem `libs.versions.toml`).
+- JDK 17+ và Android SDK (compileSdk xem `libs.versions.toml`); wrapper Gradle `9.5.0`, AGP `9.2.1`.
 - Kotlin Multiplatform plugin + Compose Multiplatform (JetBrains 1.6.1+).
 - Xcode 15, CocoaPods 1.12+ để build `iosApp` hoặc publish Pod.
 - Truy cập mạng nội bộ GitLab Packages nếu cần publish/consume Maven repo `https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven`.
@@ -174,4 +174,12 @@ fun SuccessState() {
 ```
 
 - `shared/build.gradle.kts` đã bật `coreLibraryDesugaringEnabled` để tương thích `compottie-dot`/`compottie-network` với `minSdk = 24`.
-- Nếu animation dùng asset/font nội bộ, kết hợp `compottie-resources` (`rememberResourcesAssetsManager`, `rememberResourcesFontManager`) để trỏ về `composeResources`.
+- Nếu animation dùng asset/font nội bộ, kết hợp `compottie-resources` (`rememberResourcesAssetsManager`, `rememberResourcesFontManager`) để trỏ về `composeResources`.
+### NativeMaxApi 0.3.1
+
+Compose dùng typed `vn.momo.maxapi.IMaxApi` do host truyền vào `NavigationContainer`.
+Toolkit dùng overload `showToolkit(ToolkitOptions, callback)` để giữ nhóm tool tùy chỉnh,
+nhãn đa ngôn ngữ, icon, badge và `useSystemTools`. Callback trả `actionKey`; request đang chờ
+được hủy khi composition bị gỡ. Kits không đóng client do host sở hữu.
+
+Chạy `./gradlew :compose:testAndroidHostTest` để kiểm tra hủy request và callback đến muộn.

package/build.gradle.kts

@@ -2,7 +2,9 @@ plugins {
     // this is necessary to avoid the plugins to be loaded multiple times
     // in each subproject's classloader
     alias(libs.plugins.android.application) apply false
-    alias(libs.plugins.android.library) apply false
+    // AI-GENERATED START: use the AGP 9 Kotlin Multiplatform Android library target
+    alias(libs.plugins.android.kotlin.multiplatform.library) apply false
+    // AI-GENERATED END: use the AGP 9 Kotlin Multiplatform Android library target
     alias(libs.plugins.compose) apply false
     alias(libs.plugins.kotlin.compose.compiler) apply false
     alias(libs.plugins.jetbrains.kotlin.multiplatform) apply false

package/compose/build.gradle.kts

@@ -4,7 +4,9 @@ import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
 plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
-    alias(libs.plugins.android.library)
+    // AI-GENERATED START: use the AGP 9 Kotlin Multiplatform Android library target
+    alias(libs.plugins.android.kotlin.multiplatform.library)
+    // AI-GENERATED END: use the AGP 9 Kotlin Multiplatform Android library target
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
 //         alias(libs.plugins.vanniktech.mavenPublish)
@@ -22,12 +24,18 @@ val gitlabUser: String = findProperty("gitlab.user") as String? ?: ""
 val gitlabKey: String = findProperty("gitlab.password") as String? ?: ""
 
 kotlin {
-    androidTarget {
+    // AI-GENERATED START: configure the AGP 9 Android target and host tests
+    android {
+        namespace = "vn.momo.kits.kits"
+        compileSdk = 35
+        minSdk = 24
+        androidResources.enable = true
+        withHostTest {}
         compilerOptions {
             jvmTarget.set(JvmTarget.JVM_17)
         }
-        publishLibraryVariants("release")
     }
+    // AI-GENERATED END: configure the AGP 9 Android target and host tests
 
     val fwName = gitlabArtifactId
     val iosTargets = listOf(iosArm64(), iosSimulatorArm64())
@@ -40,7 +48,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-sizescale.2-debug"
+        version = "0.300.1-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -86,24 +94,14 @@ kotlin {
         iosMain.dependencies {
             implementation(libs.ktor.client.darwin)
         }
+        // AI-GENERATED START: verify toolkit request ownership
+        commonTest.dependencies {
+            implementation(kotlin("test"))
+        }
+        // AI-GENERATED END: verify toolkit request ownership
     }
 }
 
-android {
-    namespace = "vn.momo.kits.kits"
-    compileSdk = 35
-    compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_17
-        targetCompatibility = JavaVersion.VERSION_17
-    }
-    defaultConfig {
-        minSdk = 24
-    }
-}
-
-dependencies {
-}
-
 repositories {
     google {
         mavenContent {
@@ -153,8 +151,9 @@ compose {
 //     configure(
 //         KotlinMultiplatform(
 //             javadocJar = JavadocJar.Empty(),
+//             // AI-GENERATED START: the AGP KMP target publishes a single Android variant
 //             sourcesJar = true,
-//             androidVariantsToPublish = listOf("release")
+//             // AI-GENERATED END: the AGP KMP target publishes a single Android variant
 //         )
 //     )
 // 

package/compose/build.gradle.kts.backup

@@ -4,7 +4,9 @@ import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
 plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
-    alias(libs.plugins.android.library)
+    // AI-GENERATED START: use the AGP 9 Kotlin Multiplatform Android library target
+    alias(libs.plugins.android.kotlin.multiplatform.library)
+    // AI-GENERATED END: use the AGP 9 Kotlin Multiplatform Android library target
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
     alias(libs.plugins.vanniktech.mavenPublish)
@@ -22,12 +24,18 @@ val gitlabUser: String = findProperty("gitlab.user") as String? ?: ""
 val gitlabKey: String = findProperty("gitlab.password") as String? ?: ""
 
 kotlin {
-    androidTarget {
+    // AI-GENERATED START: configure the AGP 9 Android target and host tests
+    android {
+        namespace = "$gitlabGroup.$gitlabArtifactId"
+        compileSdk = libs.versions.android.compileSdk.get().toInt()
+        minSdk = libs.versions.android.minSdk.get().toInt()
+        androidResources.enable = true
+        withHostTest {}
         compilerOptions {
             jvmTarget.set(JvmTarget.JVM_17)
         }
-        publishLibraryVariants("release")
     }
+    // AI-GENERATED END: configure the AGP 9 Android target and host tests
 
     val fwName = gitlabArtifactId
     val iosTargets = listOf(iosArm64(), iosSimulatorArm64())
@@ -86,24 +94,14 @@ kotlin {
         iosMain.dependencies {
             implementation(libs.ktor.client.darwin)
         }
+        // AI-GENERATED START: verify toolkit request ownership
+        commonTest.dependencies {
+            implementation(kotlin("test"))
+        }
+        // AI-GENERATED END: verify toolkit request ownership
     }
 }
 
-android {
-    namespace = "$gitlabGroup.$gitlabArtifactId"
-    compileSdk = libs.versions.android.compileSdk.get().toInt()
-    compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_17
-        targetCompatibility = JavaVersion.VERSION_17
-    }
-    defaultConfig {
-        minSdk = libs.versions.android.minSdk.get().toInt()
-    }
-}
-
-dependencies {
-}
-
 repositories {
     google {
         mavenContent {
@@ -153,8 +151,9 @@ mavenPublishing {
     configure(
         KotlinMultiplatform(
             javadocJar = JavadocJar.Empty(),
+            // AI-GENERATED START: the AGP KMP target publishes a single Android variant
             sourcesJar = true,
-            androidVariantsToPublish = listOf("release")
+            // AI-GENERATED END: the AGP KMP target publishes a single Android variant
         )
     )
 

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.167.1-sizescale.2-debug'
+    spec.version                  = '0.167.1-beta.4-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -30,7 +30,6 @@ import com.airbnb.lottie.compose.rememberLottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
-import vn.momo.kits.const.LocalSizeScale
 import vn.momo.kits.navigation.Navigator
 import vn.momo.kits.utils.readJson
 import androidx.activity.compose.BackHandler as AndroidBackHandler
@@ -40,10 +39,8 @@ actual fun getPlatformName(): String = "Android"
 @Composable
 actual fun getScreenDimensions(): ScreenDimension {
     val config = LocalConfiguration.current
-    // Logical dp: the container size scale enlarges every dp, so the screen spans fewer of them.
-    val sizeScale = LocalSizeScale.current
     return ScreenDimension(
-        (config.screenWidthDp / sizeScale).toInt(), (config.screenHeightDp / sizeScale).toInt()
+        config.screenWidthDp, config.screenHeightDp
     )
 }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/application/LiteScreen.kt

@@ -44,7 +44,7 @@ import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.navigation.component.HEADER_FONT_FAMILY
+import vn.momo.kits.navigation.component.headerFontFamily
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
@@ -362,7 +362,7 @@ private fun LiteScreenLayout(
                     text = title,
                     color = headerColor.tintIconColor,
                     style = titleStyle,
-                    fontFamily = HEADER_FONT_FAMILY,
+                    fontFamily = headerFontFamily,
                     modifier = titleModifier,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -7,6 +7,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.DeprecatedModifier
+import vn.momo.kits.platform.ProvideOsFontScale
 import vn.momo.kits.platform.getStatusBarHeight
 
 @Deprecated("Use IMaxApi instead", ReplaceWith("IMaxApi"))
@@ -91,10 +92,9 @@ fun ApplicationContainer(
         }
     }
 
-    // Insets are measured in real units; convert to the dp of the size-scaled container.
-    val appStatusBarHeight = (statusBarHeight ?: getStatusBarHeight()) / pendingSizeScale()
+    val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
 
-    ProvideKitScale {
+    ProvideOsFontScale {
     CompositionLocalProvider(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/WidgetContainer.kt

@@ -2,13 +2,18 @@ package vn.momo.kits.application
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
+// AI-GENERATED START: own the typed language request
+import androidx.compose.runtime.DisposableEffect
+// AI-GENERATED END: own the typed language request
 import androidx.compose.runtime.remember
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
 import vn.momo.kits.navigation.LocalMaxApi
-import vn.momo.kits.const.ProvideKitScale
+import vn.momo.kits.platform.ProvideOsFontScale
+// AI-GENERATED START: consume typed NativeMaxApi results
 import vn.momo.maxapi.IMaxApi
+import vn.momo.maxapi.runtime.ApiResult
+// AI-GENERATED END: consume typed NativeMaxApi results
 
 
 @Composable
@@ -27,17 +32,27 @@ fun WidgetContainer(
     val resolvedLocalize = localize ?: LocalLocalize.current
     val resolvedMaxApi = maxApi ?: LocalMaxApi.current
 
-    LaunchedEffect(resolvedMaxApi, localize) {
-        val api = resolvedMaxApi ?: return@LaunchedEffect
-        val target = localize ?: return@LaunchedEffect
-        runCatching {
-            api.getLanguage(callback = { data ->
-                if (parseLanguage(data) == Localize.EN) target.changeLanguage(Localize.EN)
-            })
+    // AI-GENERATED START: cancel language delivery when its composition owner changes
+    DisposableEffect(resolvedMaxApi, localize) {
+        val api = resolvedMaxApi
+        val target = localize
+        var active = true
+        val handle = runCatching {
+            api?.getLanguage { result ->
+                if (active && target != null && result is ApiResult.Success &&
+                    result.value.trim().lowercase().startsWith(Localize.EN)) {
+                    target.changeLanguage(Localize.EN)
+                }
+            }
+        }.getOrNull()
+        onDispose {
+            active = false
+            handle?.cancel()
         }
     }
+    // AI-GENERATED END: cancel language delivery when its composition owner changes
 
-    ProvideKitScale {
+    ProvideOsFontScale {
         CompositionLocalProvider(
             AppTheme provides resolvedTheme,
             LocalContext provides mergedContext,
@@ -48,9 +63,3 @@ fun WidgetContainer(
         }
     }
 }
-
-private fun parseLanguage(raw: Map<String, Any?>?): String? {
-    val code = (raw?.get("response") as? String)?.trim()?.lowercase()
-    if (code.isNullOrEmpty()) return null
-    return if (code.startsWith(Localize.EN)) Localize.EN else Localize.VI
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Icon.kt

@@ -19,6 +19,7 @@ import coil3.request.ImageRequest
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
+import vn.momo.kits.gifimage.GifImage
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.utils.Icons
 import vn.momo.kits.utils.noThemeIcons
@@ -59,18 +60,27 @@ fun Icon(
             }
             .semantics { contentDescription = contentDesc }
     ) {
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = ImageRequest.Builder(context)
-                .data(iconUrl)
-                .size(
-                    coil3.size.Dimension.Undefined,
-                    coil3.size.Dimension.Undefined
-                )
-                .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Fit,
-            colorFilter = colorFilter,
-        )
+        if (isGifUrl(iconUrl)) {
+            GifImage(
+                modifier = Modifier.matchParentSize(),
+                url = iconUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Fit,
+            )
+        } else {
+            AsyncImage(
+                modifier = Modifier.matchParentSize(),
+                model = ImageRequest.Builder(context)
+                    .data(iconUrl)
+                    .size(
+                        coil3.size.Dimension.Undefined,
+                        coil3.size.Dimension.Undefined
+                    )
+                    .build(),
+                contentDescription = null,
+                contentScale = ContentScale.Fit,
+                colorFilter = colorFilter,
+            )
+        }
     }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Image.kt

@@ -77,7 +77,7 @@ private fun getHostFromUrl(url: String): String? {
     }
 }
 
-private fun isGifUrl(url: String): Boolean {
+internal fun isGifUrl(url: String): Boolean {
     val path = url.substringBefore('#').substringBefore('?')
     return path.endsWith(".gif", ignoreCase = true)
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Slider.kt

@@ -26,9 +26,9 @@ import kotlin.math.roundToInt
 private val THUMB_SIZE         = 20.dp
 private val THUMB_BORDER       = 3.dp
 private val TRACK_HEIGHT       = 4.dp
-private val LABEL_PAD_H get()        = Spacing.XS
-private val LABEL_PAD_V get()        = Spacing.XXS
-private val LABEL_GAP get()          = Spacing.XS   // space between label and thumb top
+private val LABEL_PAD_H        = Spacing.XS
+private val LABEL_PAD_V        = Spacing.XXS
+private val LABEL_GAP          = Spacing.XS   // space between label and thumb top
 
 
 private fun clamp(value: Float, min: Float, max: Float): Float =

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Tooltip.kt

@@ -67,7 +67,7 @@ class TooltipState {
 fun rememberTooltipState(): TooltipState {
     return remember { TooltipState() }
 }
-private val TOOLTIP_OFFSET get() = Spacing.S
+private val TOOLTIP_OFFSET = Spacing.S
 private val ARROW_SIZE = 6.dp
 private class TooltipPositionProvider(
     private val placement: TooltipPlacement,

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Spacing.kt

@@ -1,20 +1,16 @@
 package vn.momo.kits.const
 
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-// Divided by KitSizeScale.rate: containers scale LocalDensity for sizes, spacing must stay unscaled.
-private fun spacing(value: Int): Dp = (value / KitSizeScale.rate).dp
-
 object Spacing {
-    val XXS: Dp get() = spacing(2)
-    val XS: Dp get() = spacing(4)
-    val S: Dp get() = spacing(8)
-    val M: Dp get() = spacing(12)
-    val L: Dp get() = spacing(16)
-    val XL: Dp get() = spacing(24)
-    val XXL: Dp get() = spacing(32)
-    val Size3XL: Dp get() = spacing(48)
-    val Size4XL: Dp get() = spacing(56)
-    val Size5XL: Dp get() = spacing(64)
-}
+    val XXS = 2.dp
+    val XS = 4.dp
+    val S = 8.dp
+    val M = 12.dp
+    val L = 16.dp
+    val XL = 24.dp
+    val XXL = 32.dp
+    val Size3XL = 48.dp
+    val Size4XL = 56.dp
+    val Size5XL = 64.dp
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -67,7 +67,7 @@ data class Theme(
         return !assets.headerBackground.isNullOrEmpty()
     }
 }
-val defaultTheme = Theme(
+private val lightBaseTheme = Theme(
     dark = false,
     colors = ColorScheme(
         primary = Colors.pink_03,
@@ -117,14 +117,14 @@ val defaultTheme = Theme(
             container = Colors.blue_08
         )
     ),
-    font = "MomoTrustSans",
+    font = "SFProText",
     assets = ThemeAssets(
         headerBackground = null
     )
 )
 
 
-val darkTheme = Theme(
+private val darkBaseTheme = Theme(
     dark = true,
     colors = ColorScheme(
         primary = Colors.pink_04,
@@ -174,13 +174,19 @@ val darkTheme = Theme(
             container = Colors.blue_08
         )
     ),
-    font = "MomoTrustSans",
+    font = "SFProText",
     assets = ThemeAssets(
         headerBackground = null
     )
 )
 
 
+val defaultTheme: Theme
+    get() = lightBaseTheme.copy(font = defaultFontFamily)
+
+val darkTheme: Theme
+    get() = darkBaseTheme.copy(font = defaultFontFamily)
+
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
 val AppStatusBar = staticCompositionLocalOf { 0.dp }

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -26,13 +26,11 @@ fun scaleSize(size: Float): Float {
         return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
     }
     val scaleSizeMaxRate: Float = MAX_FONT_SCALE
-    // Real screen width / OS font scale: undo the container size scale.
-    val sizeScale = LocalSizeScale.current
-    val deviceWidth = getScreenDimensions().width * sizeScale
+    val deviceWidth = getScreenDimensions().width
     val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
 
     val density = LocalDensity.current
-    val fontScale = density.fontScale * sizeScale
+    val fontScale = density.fontScale
 
     var fontSizeScaleDevice = size
     var fontSizeScaleOS = size
@@ -59,8 +57,7 @@ fun scaleSize(size: TextUnit): TextUnit {
     val density = LocalDensity.current
 
     val scaled = scaleSize(size.value)
-    // Real OS font scale (density.fontScale is divided by the size scale inside containers).
-    val spValue = scaled / (density.fontScale * LocalSizeScale.current)
+    val spValue = scaled / density.fontScale
 
     return TextUnit(value = spValue, type = TextUnitType.Sp)
 }
@@ -123,31 +120,17 @@ private val hostFontFiles: Map<String, String> = mapOf(
     )
 }
 
-/**
- * Font mặc định mới, chỉ áp cho user nằm trong whitelist design system ([KitDesignSystem]).
- * Ngoài whitelist thì quay về [LEGACY_DEFAULT_FONT_FAMILY] như trước.
- */
 private const val NEW_DEFAULT_FONT_FAMILY = "MomoTrustSans"
 private const val LEGACY_DEFAULT_FONT_FAMILY = "SFProText"
 
-/**
- * Font thuoc bo design system moi. MoMoTrustDisplay chi duoc header dung tu DS-791
- * (commit header title 5bfde6251); truoc do header lay font theo theme, nen ngoai
- * whitelist ca hai deu ha ve [LEGACY_DEFAULT_FONT_FAMILY].
- */
-private val newFontFamilies = setOf(NEW_DEFAULT_FONT_FAMILY, "MoMoTrustDisplay")
+internal val defaultFontFamily: String
+    get() = if (KitDesignSystem.isWhiteList) NEW_DEFAULT_FONT_FAMILY else LEGACY_DEFAULT_FONT_FAMILY
 
 @Composable
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val isWhiteList = KitDesignSystem.isWhiteList
-    val resolvedFamily =
-        if (fontFamily in newFontFamilies && !isWhiteList) {
-            LEGACY_DEFAULT_FONT_FAMILY
-        } else {
-            fontFamily
-        }
     val defaultFile = if (isWhiteList) NEW_DEFAULT_FONT_FILE else LEGACY_DEFAULT_FONT_FILE
-    val key = "$resolvedFamily-${fontWeight?.weight}"
+    val key = "$fontFamily-${fontWeight?.weight}"
     val fileName = hostFontFiles[key] ?: defaultFile
     return hostFontFamily(fileName)
         ?: hostFontFamily(defaultFile)

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -14,6 +15,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 import vn.momo.kits.const.AppTheme
@@ -21,30 +23,30 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 
 @Composable
-internal fun Card(
+@OptIn(ExperimentalLayoutApi::class)
+fun Card(
     useShadow: Boolean = false,
     backgroundImage: String? = null,
+    backgroundColor: Color? = null,
     contentPadding: PaddingValues = PaddingValues(Spacing.M),
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
-    val columns = 12
-    val gutter = 8.dp
+    val columns = gridColumns()
+    val gap = Spacing.S
     val shape = RoundedCornerShape(Radius.M)
-    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
-    if (useShadow) surface = surface.shadow(4.dp, shape)
-    surface = surface.clip(shape)
-    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    var surface = modifier.fillMaxWidth().padding(horizontal = Spacing.M)
+    if (useShadow) surface = surface.shadow(6.dp, shape)
+    surface = surface.clip(shape).background(backgroundColor ?: AppTheme.current.colors.background.surface)
     Box(modifier = surface) {
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
         BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
-            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
-            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+            CompositionLocalProvider(LocalGridContext provides gridContext(constraints.maxWidth, columns, gap)) {
                 FlowRow(
-                    horizontalArrangement = Arrangement.spacedBy(gutter),
-                    verticalArrangement = Arrangement.spacedBy(gutter),
+                    horizontalArrangement = Arrangement.spacedBy(gap),
+                    verticalArrangement = Arrangement.spacedBy(gap),
                 ) { content() }
             }
         }