@momo-kits/native-kits 0.114.2-beta.1 → 0.114.2-beta.10

package/compose/build.gradle.kts

@@ -41,6 +41,7 @@ kotlin {
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
                 implementation(libs.jetbrains.serialization.json)
+                implementation(libs.kotlinx.datetime)
             }
         }
         val androidMain by getting {

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

@@ -54,5 +54,4 @@ fun AnimationSearchInput(
             }
         }
     }
-
 }

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

@@ -163,7 +163,7 @@ fun FloatingButton(
                         Text(
                             text ?: "",
                             color = Color.White,
-                            style = Typography.actionDefault
+                            style = Typography.actionDefaultBold
                         )
                     }
                 }

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

@@ -161,7 +161,6 @@ fun Header(
                         },
                         contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
                     ) {
-
                         HeaderTitle(
                             title = title,
                             color = tintIconColor,

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

@@ -38,7 +38,7 @@ fun HeaderBackground(
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
 
     val opacityAni by animateFloatAsState(
-        targetValue = (1 - (scrollState / HEADER_HEIGHT*1f)).coerceIn(0f, 1f),
+        targetValue = (1 - (scrollState / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
     )
 
     val backgroundColor by animateColorAsState(

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

@@ -88,8 +88,32 @@ fun HeaderRight(
     }
 }
 
+private fun getNavigationButtonConfig(
+    headerRight: HeaderRightData? = null,
+    isFavorite: Boolean = false,
+    onPressShortcut: () -> Unit,
+    onPressMore: () -> Unit
+): NavigationButtonConfig {
+    val totalTools = headerRight?.tools?.sumOf { it.items.size } ?: 0
+    var icon = if (isFavorite) "pin_star_checked" else "pin_star"
+    var onClickHandler = onPressShortcut
+    if (totalTools > 1 || headerRight?.useMore == true) {
+        icon = "navigation_more_icon"
+        onClickHandler = onPressMore
+    } else if (totalTools == 1 && !headerRight?.tools.isNullOrEmpty()) {
+        val singleTool = headerRight?.tools?.first()?.items?.firstOrNull()
+        if (singleTool != null) {
+            icon = singleTool.icon
+            onClickHandler = {
+                headerRight.toolCallback?.invoke(singleTool.key)
+            }
+        }
+    }
+    return NavigationButtonConfig(icon, onClickHandler)
+}
+
 @Composable
-fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
+private fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
     var isFavorite by remember { mutableStateOf(false) }
     val isLoading by remember { mutableStateOf(false) }
     val api = PlatformApi.current as? ComposeApi
@@ -148,34 +172,8 @@ fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
         }
     }
 
-    fun getNavigationButtonConfig(
-        tools: List<ToolGroup>? = emptyList(),
-        useMore: Boolean? = false,
-        isFavorite: Boolean = false,
-        onPressShortcut: () -> Unit,
-        onPressMore: () -> Unit
-    ): NavigationButtonConfig {
-        val totalTools = tools?.sumOf { it.items.size } ?: 0
-        var icon = if (isFavorite) "pin_star_checked" else "pin_star"
-        var onClickHandler = onPressShortcut
-        if (totalTools > 1 || useMore == true) {
-            icon = "navigation_more_icon"
-            onClickHandler = onPressMore
-        } else if (totalTools == 1 && !tools.isNullOrEmpty()) {
-            val singleTool = tools.first().items.firstOrNull()
-            if (singleTool != null) {
-                icon = singleTool.icon
-                onClickHandler = {
-                    headerRight?.toolCallback?.invoke(singleTool.key)
-                }
-            }
-        }
-        return NavigationButtonConfig(icon, onClickHandler)
-    }
-
     val navButtonConfig = getNavigationButtonConfig(
-        headerRight?.tools,
-        headerRight?.useMore,
+        headerRight,
         isFavorite,
         ::onPressShortcut,
         ::onPressMore
@@ -188,7 +186,7 @@ fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
     val toolkitWidth = if (context !== null) 65.dp else 28.dp
 
     var isShowShortcut = headerRight?.useShortcut == true
-    //backup case context null of more icon
+
     if (headerRight?.useMore == true && context == null) {
         isShowShortcut = false
     }
@@ -264,7 +262,7 @@ fun NavigationButton(
         ) {
             Icon(
                 source = icon,
-                size = 16.dp
+                size = 20.dp
             )
         }
 

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

@@ -19,7 +19,7 @@ fun HeaderTitle(
         modifier = Modifier.then(modifier).zIndex(1f),
         text = title,
         textAlign = textAlign,
-        style = Typography.actionS,
+        style = Typography.actionSBold,
         color = color,
         maxLines = 1
     )

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

@@ -9,7 +9,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
-import kotlinx.serialization.Serializable
 import vn.momo.kits.components.TrustBannerData
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -27,20 +26,41 @@ interface ComposeApi {
 }
 
 class Navigator {
-    fun push(content: @Composable () -> Unit) {}
-    fun present(content: @Composable () -> Unit) {}
-    fun reset(content: @Composable () -> Unit) {}
-    fun pop() {}
-    fun replace(content: @Composable () -> Unit) {}
-    fun popToTop() {}
+    fun push(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun present(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun reset(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun pop() {
+        //implement
+    }
+
+    fun replace(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun popToTop() {
+        //implement
+    }
+
     fun showModal(
         onClose: () -> Unit = {},
         canBackgroundClose: Boolean = true,
         content: @Composable () -> Unit,
     ) {
+        //implement
     }
 
-    fun showBottomSheet(content: @Composable () -> Unit) {}
+    fun showBottomSheet(content: @Composable () -> Unit) {
+        //implement
+    }
 }
 
 data class MiniAppContext(
@@ -69,6 +89,10 @@ val AppConfig = staticCompositionLocalOf<KitConfig?> {
     null
 }
 
+val AppLanguage = staticCompositionLocalOf<String?> {
+    null
+}
+
 data class KitConfig(
     val trustBanner: TrustBannerData? = null,
     val headerBar: String? = null,
@@ -82,6 +106,7 @@ fun ApplicationContainer(
     statusBarHeight: Dp? = AppStatusBar.current,
     applicationContext: MiniAppContext? = null,
     config: KitConfig? = null,
+    language: String? = null,
     content: @Composable () -> Unit,
 ) {
     var appTheme by remember { mutableStateOf(theme) }
@@ -110,7 +135,8 @@ fun ApplicationContainer(
         AppNavigator provides Navigator(),
         AppStatusBar provides appStatusBarHeight,
         ApplicationContext provides applicationContext,
-        AppConfig provides config
+        AppConfig provides config,
+        AppLanguage provides language
     ) {
         content()
     }

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

@@ -87,7 +87,7 @@ fun Screen(
     val bottomPadding = min(indicator, 21.dp)
 
     val opacity by animateFloatAsState(
-        targetValue = ((scrollState.value / HEADER_HEIGHT*1f)).coerceIn(0f, 1f),
+        targetValue = ((scrollState.value / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
     )
 
     val headerAnimated =

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

@@ -42,18 +42,21 @@ fun useHeaderSearchAnimation(
     )
 
     val animatedTranslateX by animateFloatAsState(
-        targetValue = (scrollState / HEADER_HEIGHT*1f).coerceIn(0f, 1f) * (leftPosition.value - 12) + 12,
+        targetValue = (scrollState / HEADER_HEIGHT * 1f).coerceIn(
+            0f,
+            1f
+        ) * (leftPosition.value - 12) + 12,
     )
 
     val animatedWidth by animateFloatAsState(
-        targetValue = (scrollState / HEADER_HEIGHT*1f).coerceIn(
+        targetValue = (scrollState / HEADER_HEIGHT * 1f).coerceIn(
             0f,
             1f
         ) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
     )
 
     val animatedTranslateY by animateFloatAsState(
-        targetValue = (1 - (scrollState / HEADER_HEIGHT* 1f).coerceIn(0f, 1f)) * HEADER_HEIGHT
+        targetValue = (1 - (scrollState / HEADER_HEIGHT * 1f).coerceIn(0f, 1f)) * HEADER_HEIGHT
     )
     return HeaderAnimations(
         opacity = opacityAni,

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

@@ -20,7 +20,6 @@ import vn.momo.kits.const.Typography
 import vn.momo.kits.const.scaleSize
 
 
-
 @Composable
 fun Badge(label: String = "Label", backgroundColor: Color? = null) {
     val primaryColors = listOf(
@@ -72,7 +71,7 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null) {
         Text(
             text = formatTitle(label),
             color = Colors.black_01,
-            style = Typography.actionXxs
+            style = Typography.actionXxsBold
         )
     }
 }

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

@@ -74,10 +74,10 @@ enum class Size(val value: ButtonSpecs) {
 
 fun getStyle(size: Size): TextStyle {
     return when (size.name) {
-        Size.LARGE.name -> Typography.actionDefault
-        Size.MEDIUM.name -> Typography.actionS
-        Size.SMALL.name -> Typography.actionXs
-        else -> Typography.actionDefault
+        Size.LARGE.name -> Typography.actionDefaultBold
+        Size.MEDIUM.name -> Typography.actionSBold
+        Size.SMALL.name -> Typography.actionXsBold
+        else -> Typography.actionDefaultBold
     }
 }
 

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

@@ -3,15 +3,12 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -68,7 +65,7 @@ fun CheckBox(
         if (title.isNotEmpty()) {
             Spacer(Modifier.size(Spacing.S))
             Text(
-                style = Typography.descriptionDefault,
+                style = Typography.descriptionDefaultRegular,
                 text = title,
             )
         }

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

@@ -27,7 +27,7 @@ fun Icon(
     } else {
         Icons[source] ?: ""
     }
-    Box(modifier = modifier.size(size).semantics {contentDescription = "img|$icon"}) {
+    Box(modifier = modifier.size(size).semantics { contentDescription = "img|$icon" }) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
             model = icon,

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

@@ -3,13 +3,10 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip

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

@@ -47,7 +47,7 @@ fun Image(
         )
     }
 
-    Box(modifier = modifier.semantics {contentDescription = "img|$source"}) {
+    Box(modifier = modifier.semantics { contentDescription = "img|$source" }) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
             model = source,
@@ -67,6 +67,7 @@ fun Image(
                 color = AppTheme.current.colors.text.disable,
                 modifier = modifier
             )
+
             ImageState.Success -> {}
         }
     }

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

@@ -20,7 +20,7 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 
 enum class InformationState {
-    DEFAULT ,
+    DEFAULT,
     WARNING,
     ERROR
 }
@@ -31,12 +31,12 @@ fun Information(
     description: String = "Description",
     state: InformationState = InformationState.DEFAULT,
     image: String? = null,
-    onPressCTA: (()-> Unit)? = null,
+    onPressAction: (() -> Unit)? = null,
     showIcon: Boolean = true,
-    CTA: String? = null,
+    action: String? = null,
     showIconClose: Boolean = true,
-    onPressClose: (()->Unit)? = null,
-){
+    onPressClose: (() -> Unit)? = null,
+) {
     var borderColor = Colors.blue_07
     var backgroundColor = Colors.blue_10
     var color = Colors.blue_03
@@ -46,45 +46,64 @@ fun Information(
         borderColor = Colors.yellow_06
         backgroundColor = Colors.yellow_09
         color = Colors.orange_03
-        iconSource = "24_notifications_alert_triangle";
+        iconSource = "24_notifications_alert_triangle"
     }
 
     if (state === InformationState.ERROR) {
         borderColor = Colors.red_07
         backgroundColor = Colors.red_10
         color = Colors.red_03
-        iconSource = "24_notifications_alert_octagon";
+        iconSource = "24_notifications_alert_octagon"
     }
 
-    Column(modifier = Modifier.border(
-        width = 0.5.dp,
-        shape = RoundedCornerShape(Radius.S),
-        color = borderColor
-    ).background(color = backgroundColor)
-        .padding(Spacing.M)
+    Column(
+        modifier = Modifier.border(
+            width = 0.5.dp,
+            shape = RoundedCornerShape(Radius.S),
+            color = borderColor
+        ).background(color = backgroundColor)
+            .padding(Spacing.M)
     ) {
         Row {
             if (image != null) {
-                Image(source = image, modifier = Modifier.padding(end = Spacing.S).width(40.dp).height(40.dp).clip(
-                    RoundedCornerShape(Radius.S)
-                ))
+                Image(
+                    source = image,
+                    modifier = Modifier.padding(end = Spacing.S).width(40.dp).height(40.dp).clip(
+                        RoundedCornerShape(Radius.S)
+                    )
+                )
             }
             if (image == null && showIcon) {
-                Icon(source = iconSource, size = 16.dp, color = color, modifier = Modifier.padding(end = Spacing.S))
+                Icon(
+                    source = iconSource,
+                    size = 16.dp,
+                    color = color,
+                    modifier = Modifier.padding(end = Spacing.S)
+                )
             }
             Column(modifier = Modifier.weight(1f)) {
                 if (title != null) {
-                    Text(title, style = Typography.labelDefault)
+                    Text(title, style = Typography.labelDefaultMedium)
                 }
-                Text(description, style = Typography.descriptionS)
+                Text(description, style = Typography.descriptionDefaultRegular)
             }
             if (onPressClose != null && showIconClose) {
-                Icon(source = "navigation_close", size = 16.dp, modifier = Modifier.clickable(onClick = onPressClose))
+                Icon(
+                    source = "navigation_close",
+                    size = 16.dp,
+                    modifier = Modifier.clickable(onClick = onPressClose)
+                )
             }
         }
-        if (CTA != null && onPressCTA != null) {
+        if (action != null && onPressAction != null) {
             Row(modifier = Modifier.padding(top = Spacing.S)) {
-                Text(CTA, modifier = Modifier.weight(1f).clickable(onClick = onPressCTA), textAlign = TextAlign.End, style = Typography.actionXs, color = color)
+                Text(
+                    action,
+                    modifier = Modifier.weight(1f).clickable(onClick = onPressAction),
+                    textAlign = TextAlign.End,
+                    style = Typography.actionXsBold,
+                    color = color
+                )
             }
         }
     }

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

@@ -21,7 +21,6 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -37,7 +36,6 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
-import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -144,7 +142,7 @@ fun ErrorView(errorMessage: String, errorSpacing: Boolean, hintText: String) {
             )
             Text(
                 errorMessage.ifEmpty { hintTextDefault },
-                style = Typography.descriptionS,
+                style = Typography.descriptionDefaultRegular,
                 modifier = Modifier.padding(start = Spacing.XS),
                 color = color,
             )
@@ -156,7 +154,7 @@ fun ErrorView(errorMessage: String, errorSpacing: Boolean, hintText: String) {
 
 @Composable
 fun Input(
-    text: String = "",
+    text: MutableState<String> = remember { mutableStateOf("") },
     floatingValue: String = "",
     floatingValueColor: Color = AppTheme.current.colors.text.hint,
     floatingIcon: String = "",
@@ -183,11 +181,6 @@ fun Input(
     keyboardType: KeyboardType = KeyboardType.Text,
     modifier: Modifier = Modifier,
 ) {
-    // Handling state based on the `BasicTextField` concept
-    var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = text)) }
-    val textFieldValue = textFieldValueState.copy(text = text)
-    var lastTextValue by remember(text) { mutableStateOf(text) }
-
     var isFocused by remember { mutableStateOf(false) }
     var passHidden by remember { mutableStateOf(false) }
     var isBlurred = false
@@ -212,14 +205,14 @@ fun Input(
 
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
-    Column(modifier = Modifier.
-    setAutomationId(testId)
+    Column(
+        modifier = modifier.setAutomationId(testId)
     ) {
         BasicTextField(
-            value = text,
             enabled = !disabled,
             readOnly = readOnly,
             singleLine = true,
+            value = text.value,
             textStyle = TextStyle(
                 color = textColor,
                 fontSize = 16.sp,
@@ -236,15 +229,7 @@ fun Input(
                 if (!it.isFocused && isBlurred) onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            onValueChange = { newValue ->
-                textFieldValueState.copy(text = newValue)
-                val stringChangedSinceLastInvocation = lastTextValue != newValue
-                lastTextValue = newValue
-
-                if (stringChangedSinceLastInvocation) {
-                    onChangeText(newValue)
-                }
-            },
+            onValueChange = onChangeText,
             decorationBox = { innerTextField ->
                 // Floating Icon
                 if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
@@ -261,13 +246,13 @@ fun Input(
                         ) {
                             Text(
                                 floatingValue,
-                                style = Typography.labelS,
+                                style = Typography.labelSMedium,
                                 color = floatingTitleColor
                             )
                             if (required) {
                                 Text(
                                     "*",
-                                    style = Typography.labelS,
+                                    style = Typography.labelSMedium,
                                     color = AppTheme.current.colors.error.primary,
                                 )
                             }
@@ -306,7 +291,7 @@ fun Input(
                             )
                         }
                         Box(Modifier.weight(1f)) {
-                            if (textFieldValue.text.isEmpty()) {
+                            if (text.value.isEmpty()) {
                                 Text(
                                     text = placeholder,
                                     style = TextStyle(
@@ -319,7 +304,7 @@ fun Input(
                             }
                             innerTextField()
                         }
-                        if (isFocused && textFieldValue.text.isNotEmpty()) {
+                        if (isFocused && text.value.isNotEmpty()) {
                             Row {
                                 Spacer(Modifier.width(Spacing.XS))
                                 Icon(
@@ -327,10 +312,7 @@ fun Input(
                                     size = 16.dp,
                                     color = AppTheme.current.colors.text.hint,
                                     modifier = Modifier.clickable(
-                                        onClick = {
-                                            onChangeText("")
-                                            textFieldValueState = TextFieldValue(text = "")
-                                        },
+                                        onClick = { text.value = "" },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
                                     )
@@ -338,16 +320,22 @@ fun Input(
                             }
                         }
                         if (secureTextEntry && passHidden) {
-                            val hidePassword = { onRightIconPressed(); passHidden = !passHidden}
-                            RenderRightIcon(loading, "24_security_eye_open", iconTintColor,
-                                hidePassword)
+                            val hidePassword = { onRightIconPressed(); passHidden = !passHidden }
+                            RenderRightIcon(
+                                loading, "24_security_eye_open", iconTintColor,
+                                hidePassword
+                            )
                         } else if (secureTextEntry && !passHidden) {
-                            val showPassword = { onRightIconPressed(); passHidden = !passHidden}
-                            RenderRightIcon(loading, "24_security_eye_off", iconTintColor,
-                                showPassword)
+                            val showPassword = { onRightIconPressed(); passHidden = !passHidden }
+                            RenderRightIcon(
+                                loading, "24_security_eye_off", iconTintColor,
+                                showPassword
+                            )
                         } else {
-                            RenderRightIcon(loading, icon, iconTintColor,
-                                onRightIconPressed)
+                            RenderRightIcon(
+                                loading, icon, iconTintColor,
+                                onRightIconPressed
+                            )
                         }
                     }
                 }

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

@@ -94,13 +94,13 @@ fun InputDropDown(
                     ) {
                         Text(
                             floatingValue,
-                            style = Typography.labelS,
+                            style = Typography.labelSMedium,
                             color = floatingTitleColor
                         )
                         if (required) {
                             Text(
                                 "*",
-                                style = Typography.labelS,
+                                style = Typography.labelSMedium,
                                 color = AppTheme.current.colors.error.primary,
                             )
                         }