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

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

@@ -2,24 +2,16 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
 
 @Composable
 fun Dot(active: Boolean = false, activeColor: Color, modifier: Modifier = Modifier) {

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

@@ -1,15 +1,12 @@
 package vn.momo.kits.components
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
@@ -31,7 +28,7 @@ fun PaginationNumber(
             modifier = Modifier.padding(horizontal = Spacing.S),
             text = "${1 + activeIndex}/$dataLength",
             color = Colors.black_01,
-            style = Typography.labelDefault
+            style = Typography.labelDefaultMedium
         )
     }
 }

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

@@ -1,25 +1,15 @@
 package vn.momo.kits.components
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
 
 @Composable
 fun PaginationWhiteDot(

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

@@ -27,8 +27,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
@@ -75,7 +73,7 @@ fun PopupNotify(
                     Text(
                         text = description,
                         onTextLayout = { layoutResult.value = it },
-                        style = Typography.paragraphDefault
+                        style = Typography.bodyDefaultRegular
                     )
                 }
             }
@@ -86,7 +84,7 @@ fun PopupNotify(
                 Text(
                     text = description,
                     onTextLayout = { layoutResult.value = it },
-                    style = Typography.paragraphDefault
+                    style = Typography.bodyDefaultRegular
                 )
             }
         }
@@ -96,8 +94,9 @@ fun PopupNotify(
         callback?.invoke()
     }
 
-    Box(Modifier.setAutomationId("popup_notify")
-        , contentAlignment = Alignment.TopEnd) {
+    Box(
+        Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
+    ) {
         Column(
             modifier = Modifier
                 .fillMaxWidth()
@@ -116,12 +115,17 @@ fun PopupNotify(
             )
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
-                Text(style = Typography.titleXs, maxLines = 2, text = title, modifier = Modifier.setAutomationId("title_popup_permission"))
+                Text(
+                    style = Typography.headerDefaultBold,
+                    maxLines = 2,
+                    text = title,
+                    modifier = Modifier.setAutomationId("title_popup_permission")
+                )
                 content(Modifier.padding(top = Spacing.S))
                 if (error.isNotEmpty()) {
                     Text(
                         text = error,
-                        style = Typography.descriptionXs,
+                        style = Typography.descriptionXsRegular,
                         color = AppTheme.current.colors.text.hint,
                         maxLines = 1,
                         modifier = Modifier.padding(top = Spacing.S)
@@ -143,7 +147,7 @@ fun PopupNotify(
             Modifier
                 .width(22.dp)
                 .height(22.dp)
-                .offset(x = -(4).dp, y = (-10).dp)
+                .offset(x = -(1).dp, y = (-11).dp)
                 .background(
                     color = AppTheme.current.colors.text.default,
                     shape = RoundedCornerShape(Radius.M)

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

@@ -57,7 +57,7 @@ fun Radio(
         )
         if (label.isNotEmpty()) {
             Text(
-                style = Typography.descriptionDefault,
+                style = Typography.descriptionDefaultRegular,
                 text = label,
             )
         }

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

@@ -3,16 +3,13 @@ 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.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 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/Tag.kt

@@ -79,7 +79,7 @@ fun Tag(
             Text(
                 text = label,
                 color = labelColor,
-                style = Typography.labelS
+                style = Typography.labelSMedium
             )
         }
     }

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

@@ -9,7 +9,6 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
-import vn.momo.kits.application.PlatformApi
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
@@ -20,7 +19,7 @@ import vn.momo.kits.modifier.setAutomationId
 fun Text(
     text: String,
     color: Color? = null,
-    style: TextStyle = Typography.paragraphDefault,
+    style: TextStyle = Typography.bodyDefaultRegular,
     textAlign: TextAlign? = TextAlign.Start,
     modifier: Modifier = Modifier,
     maxLines: Int = Int.MAX_VALUE,
@@ -34,7 +33,7 @@ fun Text(
     val font = getFontFamily(fontFamily, style.fontWeight)
 
     androidx.compose.material3.Text(
-        modifier = modifier.setAutomationId(accessibilityId?:text, text),
+        modifier = modifier.setAutomationId(accessibilityId ?: text, text),
         text = text,
         color = color ?: AppTheme.current.colors.text.default,
         style = style.copy(fontWeight = null),

package/compose/src/commonMain/kotlin/vn/momo/kits/components/{dateTimePicker → datetimepicker}/DateTimePicker.kt

@@ -1,4 +1,4 @@
-package vn.momo.kits.components.dateTimePicker
+package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
@@ -32,7 +32,7 @@ private fun onPickerChange(
     effectiveMinDate: LocalDateTime,
     effectiveMaxDate: LocalDateTime,
     onChange: (LocalDateTime) -> Unit
-){
+) {
     when (name) {
         "day" -> currentDate.day = value.toInt()
         "month" -> currentDate.month = value.toInt()
@@ -82,15 +82,15 @@ fun DateTimePicker(
     arrayLabelTime: List<String> = emptyList()
 ) {
     val now = remember { getCurrentDateTime() }
-    
+
     val minDateDefault = remember { createRelativeDate(-10) }
-    
+
     val maxDateDefault = remember { createRelativeDate(10) }
-    
+
     val effectiveSelectedValue = selectedValue ?: now
     val effectiveMinDate = minDate ?: minDateDefault
     val effectiveMaxDate = maxDate ?: maxDateDefault
-    
+
     val initialValue = remember {
         when {
             effectiveSelectedValue < effectiveMinDate -> effectiveMinDate
@@ -110,11 +110,11 @@ fun DateTimePicker(
             )
         )
     }
-    
+
     val pickerHeight = if (arrayLabelTime.isNotEmpty())
-        datePickerWithLabelsHeight else 
+        datePickerWithLabelsHeight else
         datePickerHeight
-    
+
     Row(
         modifier = modifier
             .fillMaxWidth()
@@ -132,7 +132,7 @@ fun DateTimePicker(
         )
         dateComponents.forEachIndexed { index, component ->
             val hasLabel = index < arrayLabelTime.size && arrayLabelTime[index].isNotEmpty()
-            
+
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
                 modifier = Modifier.weight(1f)
@@ -140,11 +140,11 @@ fun DateTimePicker(
                 if (hasLabel) {
                     Text(
                         text = arrayLabelTime[index],
-                        style = Typography.actionS,
+                        style = Typography.actionSBold,
                         modifier = Modifier.padding(bottom = Spacing.S)
                     )
                 }
-                
+
                 WheelPicker(
                     name = component.name,
                     data = component.data,
@@ -169,7 +169,7 @@ fun DateTimePicker(
                     }
                 )
             }
-            
+
             if (index < dateComponents.size - 1) {
                 Spacer(modifier = Modifier.width(Spacing.M))
             }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/{dateTimePicker → datetimepicker}/DateTimePickerTypes.kt

@@ -1,4 +1,4 @@
-package vn.momo.kits.components.dateTimePicker
+package vn.momo.kits.components.datetimepicker
 
 data class PickerData(
     var day: Int,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/{dateTimePicker → datetimepicker}/DateTimePickerUtils.kt

@@ -1,4 +1,4 @@
-package vn.momo.kits.components.dateTimePicker
+package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -16,10 +16,19 @@ import kotlinx.datetime.toLocalDateTime
  */
 fun formatLocalDateTime(dateTime: LocalDateTime, format: String = "yyyy-MM-dd HH:mm"): String {
     return when (format) {
-        "yyyy-MM-dd HH:mm" -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.dayOfMonth)} ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+        "yyyy-MM-dd HH:mm" -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${
+            paddingNum(
+                dateTime.dayOfMonth
+            )
+        } ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+
         "dd-MM-yyyy" -> "${paddingNum(dateTime.dayOfMonth)}-${paddingNum(dateTime.month.number)}-${dateTime.year}"
         "HH:mm" -> "${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
-        else -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.dayOfMonth)} ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
+        else -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.dayOfMonth)} ${
+            paddingNum(
+                dateTime.hour
+            )
+        }:${paddingNum(dateTime.minute)}"
     }
 }
 
@@ -150,13 +159,13 @@ fun getCurrentDateTime(): LocalDateTime {
 fun createRelativeDate(years: Int): LocalDateTime {
     val currentDateTime = getCurrentDateTime()
     val period = DatePeriod(years = if (years < 0) -years else years)
-    
+
     val adjustedDate = if (years < 0) {
         currentDateTime.date.minus(period)
     } else {
         currentDateTime.date.plus(period)
     }
-    
+
     return LocalDateTime(
         adjustedDate.year,
         adjustedDate.monthNumber,
@@ -182,9 +191,10 @@ internal fun getDateComponents(
         formatParts.size == 1 && formatParts[0] == "HH"
     }
 
-    val dayData = remember(currentDate.year, currentDate.month, effectiveMinDate, effectiveMaxDate) {
-        getDaysInMonth(currentDate.year, currentDate.month, effectiveMinDate, effectiveMaxDate)
-    }
+    val dayData =
+        remember(currentDate.year, currentDate.month, effectiveMinDate, effectiveMaxDate) {
+            getDaysInMonth(currentDate.year, currentDate.month, effectiveMinDate, effectiveMaxDate)
+        }
 
     val monthData = remember(currentDate.year, effectiveMinDate, effectiveMaxDate) {
         getMonths(effectiveMinDate, effectiveMaxDate, currentDate.year)
@@ -202,25 +212,26 @@ internal fun getDateComponents(
         getMinutes(minuteInterval)
     }
 
-    val dateComponents = remember(formatParts, dayData, monthData, yearData, hourData, minData, isOnlyHour) {
-        val components = mutableListOf<DateComponent>()
+    val dateComponents =
+        remember(formatParts, dayData, monthData, yearData, hourData, minData, isOnlyHour) {
+            val components = mutableListOf<DateComponent>()
 
-        formatParts.forEach { part ->
-            when (part) {
-                "DD" -> components.add(DateComponent("day", dayData))
-                "MM" -> components.add(DateComponent("month", monthData))
-                "YYYY" -> components.add(DateComponent("year", yearData))
-                "HH" -> components.add(DateComponent("hour", hourData))
-                "mm" -> components.add(DateComponent("minute", minData))
+            formatParts.forEach { part ->
+                when (part) {
+                    "DD" -> components.add(DateComponent("day", dayData))
+                    "MM" -> components.add(DateComponent("month", monthData))
+                    "YYYY" -> components.add(DateComponent("year", yearData))
+                    "HH" -> components.add(DateComponent("hour", hourData))
+                    "mm" -> components.add(DateComponent("minute", minData))
+                }
             }
-        }
 
-        if (isOnlyHour) {
-            components.add(DateComponent("timeMode", timeMode))
-        }
+            if (isOnlyHour) {
+                components.add(DateComponent("timeMode", timeMode))
+            }
 
-        components
-    }
+            components
+        }
 
     return dateComponents
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/{dateTimePicker → datetimepicker}/WheelPicker.kt

@@ -1,4 +1,4 @@
-package vn.momo.kits.components.dateTimePicker
+package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
@@ -194,7 +194,7 @@ fun WheelPickerItem(
     ) {
         Text(
             text = text,
-            style = Typography.actionS,
+            style = Typography.actionSBold,
             modifier = Modifier.scale(scale)
         )
     }

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

@@ -4,8 +4,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.sp
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
@@ -30,7 +30,14 @@ fun scaleSize(size: Float): Float {
 fun getFont(font: String): FontFamily {
     val fontResource = FontResource(
         "font:${font.substringBeforeLast(".")}",
-        setOf(ResourceItem(setOf(), "font/${font.substringBeforeLast(".")}.${font.substringAfterLast(".")}", -1, -1))
+        setOf(
+            ResourceItem(
+                setOf(),
+                "font/${font.substringBeforeLast(".")}.${font.substringAfterLast(".")}",
+                -1,
+                -1
+            )
+        )
     )
     return FontFamily(Font(fontResource))
 }

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

@@ -7,7 +7,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 
-data class GridContext (
+data class GridContext(
     val numberOfColumns: Number,
     val gutterSize: Number,
     val sizePerSpan: Number,
@@ -15,16 +15,21 @@ data class GridContext (
 )
 
 @Composable
-fun Item(heightSpan: Number = 1,
-         widthSpan: Number = 1,
-         content: @Composable() () -> Unit,
-         modifier: Modifier = Modifier,
-         grid: GridContext) {
+fun Item(
+    heightSpan: Number = 1,
+    widthSpan: Number = 1,
+    content: @Composable() () -> Unit,
+    modifier: Modifier = Modifier,
+    grid: GridContext
+) {
 
     val widthItem = grid.getSizeSpan(widthSpan)
     val heightItem = grid.getSizeSpan(heightSpan)
 
-    Box(modifier = modifier.width(width = Dp(widthItem.toFloat())).height(height = Dp(heightItem.toFloat()))) {
+    Box(
+        modifier = modifier.width(width = Dp(widthItem.toFloat()))
+            .height(height = Dp(heightItem.toFloat()))
+    ) {
         content()
     }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -11,7 +11,7 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import vn.momo.kits.platform.getPlatformName
 
-fun Modifier.setAutomationId(accessibilityId : String, label: String? = null) : Modifier {
+fun Modifier.setAutomationId(accessibilityId: String, label: String? = null): Modifier {
     return if (getPlatformName() == "Android") {
         semantics {
             contentDescription = accessibilityId

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt

@@ -2,7 +2,7 @@ package vn.momo.kits.modifier
 
 import androidx.compose.ui.Modifier
 
-fun Modifier.conditional(condition : Boolean, modifier : Modifier.() -> Modifier) : Modifier {
+fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
     return if (condition) {
         then(modifier(Modifier))
     } else {

package/ios/Application/Components.swift

@@ -138,12 +138,11 @@ public struct Header: View {
     
     public var body: some View {
         
-        let statusBarHeight = safeAreaTopInset()
         let tintIconColor = Colors.black17
         let backgroundButton = Colors.black01.opacity(0.6)
 
         if headerType != .none {
-                VStack(spacing: 0) {
+            VStack(spacing: 0) {
                     ZStack {
                         HStack {
                             if let goBack = goBack {
@@ -153,8 +152,7 @@ public struct Header: View {
                                         .background(Circle().fill(backgroundButton))
                                         .frame(width: 28, height: 28)
                                         .overlay(
-                                            Image(systemName: "arrow.backward")
-                                                .foregroundColor(.black)
+                                            Icon(source: "arrow-back", size: 20, color: Colors.black17)
                                         )
                                 }
                                 
@@ -167,14 +165,11 @@ public struct Header: View {
                             }
                         
                         }
-                        .frame(height: 52)
-                        .padding(.horizontal)
-                        
-                        
+                        .padding(.horizontal, 12)
                         
                         HStack {
                             if titlePosition == .left, goBack != nil {
-                                Spacer().frame(width: 40)
+                                Spacer().frame(width: 38)
                             }
                             
                             if inputSearchProps != nil {
@@ -201,20 +196,22 @@ public struct Header: View {
                                 }
                             } else {
                                 Text(title)
-                                    .font(.headline)
+                                    .font(Font.system(size: 17).weight(.bold))          .lineSpacing(22)
                                     .foregroundColor(tintIconColor)
-                                    .frame(maxWidth: titlePosition == .center ? .infinity : nil, alignment: titlePosition == .center ? .center : .leading)
+                                    .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
+                                    .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
+                                    .lineLimit(1)
+                                
                             }
                             Spacer()
                         }
-                        .frame(height: 52)
                         .padding(.horizontal)
                     }
                     .background(Color.clear)
                 }
-            }
+                .frame(height: 52)
         }
-    
+    }
 }
 
 

package/ios/Application/Screen.swift

@@ -34,7 +34,7 @@ public struct Screen<Content: View>: View {
         verticalAlignment: VerticalAlignment = .top,
         horizontalAlignment: HorizontalAlignment = .leading,
         title: String = "Stack",
-        titlePosition: TitlePosition = .center,
+        titlePosition: TitlePosition = .left,
         goBack: (() -> Void)? = nil,
         scrollable: Bool = true,
         onContentLayout: ((CGRect) -> Void)? = nil,
@@ -71,23 +71,25 @@ public struct Screen<Content: View>: View {
 
     public var body: some View {
         GeometryReader { geometry in
-            let safeAreaInsets = geometry.safeAreaInsets
-            let statusBarHeight = safeAreaInsets.top
+            let topInset = geometry.safeAreaInsets.top
             let keyboardHeight: CGFloat = 0
             let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
+            let height = geometry.size.height
+            let bottomInset = geometry.safeAreaInsets.bottom
+            let screenHeight = height + topInset + bottomInset
 
             ZStack {
                 (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
 
                 VStack(spacing: 0) {
-                    ZStack {
-                        if animatedHeader == nil {
-                            HeaderBackground(headerType: headerType, scrollState: scrollOffset)
-                        } else {
-                            Color.white.opacity(Double(min(scrollOffset / 114, 1)))
-                                .overlay(HeaderBackground(headerType: headerType, scrollState: scrollOffset))
-
-                        }
+                    ZStack(alignment: .top) {
+//                        if animatedHeader == nil {
+//                            HeaderBackground(headerType: headerType, scrollState: scrollOffset)
+//                        } else {
+//                            Color.white.opacity(Double(min(scrollOffset / 114, 1)))
+//                                .overlay(HeaderBackground(headerType: headerType, scrollState: scrollOffset))
+//
+//                        }
 
                         Header(
                             headerType: headerType,
@@ -99,13 +101,17 @@ public struct Screen<Content: View>: View {
                             animatedHeader: animatedHeader,
                             scrollState: scrollOffset,
                             inputSearchProps: inputSearchProps
-                        ).padding(.bottom, headerType == .extended ? 0 : -safeAreaTopInset())
-                    }.padding(.top, -safeAreaTopInset())
+                        )
+                        .background(HeaderBackground(headerType: headerType, scrollState: scrollOffset).edgesIgnoringSafeArea(.top))
+                        .offset(y: topInset)
+
+                    }
+                    .offset(y: -topInset)
 
 
                     VStack(alignment: horizontalAlignment, spacing: 0) {
                         if animatedHeader != nil {
-                            Spacer().frame(height: statusBarHeight + 52 + layoutOffset)
+                            Spacer().frame(height: topInset + 52 + layoutOffset)
                         }
 
                         if scrollable {

package/ios/Checkbox/Checkbox.swift

@@ -75,7 +75,7 @@ public struct Checkbox: View{
         } else if checked {
             return Colors.primary
         } else {
-            return Colors.black01
+            return Color.clear
         }
     }
 }

package/ios/Popup/PopupDisplay.swift

@@ -46,8 +46,8 @@ public struct PopupDisplay: View {
                         .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 1))
                 }.foregroundColor(Colors.black20)
                     .background(Colors.black01.cornerRadius(15))
-                    .padding(.trailing, -Spacing.M )
-                    .padding(.top, -Spacing.M)
+                    .padding(.trailing, -11)
+                    .padding(.top, -11)
                     .zIndex(1)
                     .accessibility(identifier: "ic_popup_close")
 
@@ -62,7 +62,7 @@ public struct PopupDisplay: View {
                         }
                         .scaledToFill()
                         .frame(maxWidth: .infinity)
-                        .clipShape(RoundedCorner(radius: 8, corners: [.topLeft, .topRight]))
+                        .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
                         .aspectRatio(2, contentMode: .fit)
                 }
                     VStack(alignment: .leading) {