@momo-kits/native-kits 0.114.2-beta.2 → 0.114.2-beta.20

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/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

@@ -29,21 +29,27 @@ class Navigator {
     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,

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,17 +3,15 @@ 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.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
@@ -30,8 +28,8 @@ fun CheckBox(
     title: String = "",
 ) {
     var borderColor = AppTheme.current.colors.text.default
-    var backgroundColor = AppTheme.current.colors.background.surface
-    val iconSource = if (indeterminate) "minus" else "ic_checked"
+    var backgroundColor = Color.Transparent
+    val iconSource = if (indeterminate) "navigation_minus" else "ic_checked"
 
     if (checked) {
         borderColor = AppTheme.current.colors.primary
@@ -39,7 +37,7 @@ fun CheckBox(
     }
     if (disabled) {
         borderColor = AppTheme.current.colors.border.disable
-        backgroundColor = AppTheme.current.colors.background.surface
+        backgroundColor = Color.Transparent
         if (checked) {
             borderColor = AppTheme.current.colors.background.tonal
             backgroundColor = AppTheme.current.colors.background.tonal
@@ -68,7 +66,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,
                             )
                         }

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

@@ -109,7 +109,7 @@ fun InputMoney(
 
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
-    Column(modifier =  Modifier.semantics {
+    Column(modifier = Modifier.semantics {
         contentDescription = floatingValue; testTag = testId
     }) {
         BasicTextField(
@@ -150,13 +150,13 @@ fun InputMoney(
                         ) {
                             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,
                                 )
                             }

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

@@ -42,8 +42,8 @@ import vn.momo.kits.const.scaleSize
 
 @Composable
 fun OTPCaret() {
-    val DURATION = 500
-    var backgroundColor = AppTheme.current.colors.primary
+    val duration = 500
+    val backgroundColor = AppTheme.current.colors.primary
 
     val infiniteTransition = rememberInfiniteTransition()
     val alpha by infiniteTransition.animateFloat(
@@ -51,8 +51,8 @@ fun OTPCaret() {
         targetValue = 0f,
         animationSpec = infiniteRepeatable(
             animation = tween(
-                durationMillis = DURATION,
-                delayMillis = DURATION,
+                durationMillis = duration,
+                delayMillis = duration,
                 easing = LinearEasing
             ),
             repeatMode = RepeatMode.Reverse
@@ -68,7 +68,7 @@ fun OTPCaret() {
         Text(
             text = "-",
             color = AppTheme.current.colors.text.hint,
-            style = Typography.descriptionDefault
+            style = Typography.descriptionDefaultRegular
         )
     }
 }
@@ -85,15 +85,14 @@ fun InputOTP(
     onFocus: () -> Unit = {},
     onBlur: () -> Unit = {},
     dataType: String = "number",
-    accessibilityLabel: String? = null,
     modifier: Modifier = Modifier
 ) {
-    val MAX_LENGTH = 10
+    val maxLength = 10
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
 
     val handleChangeText: (String) -> Unit = { text ->
-        if (text.length <= MAX_LENGTH &&
+        if (text.length <= maxLength &&
             (dataType != "number" || !text.any { !it.isDigit() }) &&
             (text.length < value.length || value.length < text.length)
         ) {
@@ -116,7 +115,7 @@ fun InputOTP(
                 if (!it.isFocused && isBlurred) onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            decorationBox = { innerTextField ->
+            decorationBox = { _ ->
                 Box {
                     if (floatingValue.isNotEmpty()) {
                         Box(
@@ -133,7 +132,7 @@ fun InputOTP(
                             ) {
                                 Text(
                                     floatingValue,
-                                    style = Typography.labelS,
+                                    style = Typography.labelSMedium,
                                     color = AppTheme.current.colors.text.hint
                                 )
                             }
@@ -164,7 +163,7 @@ fun InputOTP(
                                         val textColor =
                                             if (value.getOrNull(i) != null) AppTheme.current.colors.text.default else AppTheme.current.colors.text.hint
                                         val typo =
-                                            if (value.getOrNull(i) != null) Typography.titleS else Typography.descriptionDefault
+                                            if (value.getOrNull(i) != null) Typography.headerDefaultBold else Typography.descriptionDefaultRegular
                                         Text(
                                             text = value.getOrNull(i)?.toString() ?: "-",
                                             color = textColor,
@@ -182,7 +181,7 @@ fun InputOTP(
                                 } else {
                                     for (i in value.indices) {
                                         Text(
-                                            style = Typography.titleS,
+                                            style = Typography.headerDefaultBold,
                                             text = value[i].toString()
                                         )
                                         if (i != value.length - 1 || (isFocused && value.length != MAX_LENGTH)) {

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

@@ -223,7 +223,7 @@ fun InputSearch(
         if (inputSearchProps.showButtonText) {
             Text(
                 text = inputSearchProps.buttonText,
-                style = Typography.actionDefault,
+                style = Typography.actionDefaultBold,
                 color = AppTheme.current.colors.text.default,
                 modifier = Modifier.padding(start = Spacing.L).clickable(
                     interactionSource = remember { MutableInteractionSource() },

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

@@ -129,13 +129,13 @@ fun InputTextArea(
                         ) {
                             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,
                                 )
                             }
@@ -213,7 +213,7 @@ fun InputTextArea(
                         ) {
                             Text(
                                 "${text.value.length}/$maxLength",
-                                style = Typography.descriptionXs,
+                                style = Typography.descriptionXsRegular,
                                 color = AppTheme.current.colors.text.hint
                             )
                         }