@momo-kits/native-kits 0.167.1-duo.8-debug → 0.167.1-duo.9

package/ios/OTPKeyboard/OTPKeyboard.swift

@@ -65,21 +65,18 @@ public struct OTPKeyboard: View {
             HStack {
                 KeyboardButton("", action: self.onPressKey).disabled(true).opacity(0)
                 KeyboardButton("0", action: self.onPressKey)
+                // Frame inside the label so the whole key is tappable, not just the glyph.
                 SwiftUI.Button(action: onPressBack) {
-                    HStack {
-                        Image(
-                            systemName: "delete.backward"
-                        ).foregroundColor(Colors.text)
-                    }
-                }.frame(maxWidth: .infinity, minHeight: 48)
-                    .clipShape(RoundedRectangle(cornerRadius: 8))
+                    Image(systemName: "delete.backward")
+                        .foregroundColor(Colors.text)
+                        .frame(maxWidth: .infinity, minHeight: 48)
+                        .contentShape(Rectangle())
+                }
             }
         }
         .background(Colors.background)
         .valueChanged(value: value) { otp in
-            if onChange != nil {
-                self.onChange!(otp)
-            }
+            onChange?(otp)
         }
     }
 
@@ -128,7 +125,7 @@ private struct ValueView: View {
 
     public var body: some View {
         return HStack {
-            ForEach(0 ..< valueLength, id: \.self) { i in
+            ForEach(0 ..< max(valueLength, 0), id: \.self) { i in
                 if i < value.count {
                     Circle().foregroundColor(Colors.text).frame(width: 8, height: 8)
                 } else {

package/ios/Pagination/PaginationScroll.swift

@@ -14,10 +14,10 @@ import SwiftUI
 private let INDICATOR_WIDTH: CGFloat = 24
 private let PROGRESS_WIDTH: CGFloat = 72
 
-/// Memoized offset calculation, mirroring Compose's `calculateOffset`.
+/// Mirrors Compose's `calculateOffset`; clamped because UIKit bounce overshoots the scroll range.
 private func calculateOffset(currentPosition: CGFloat, maxBound: CGFloat) -> CGFloat {
     guard maxBound > 0 else { return 0 }
-    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound)
+    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * min(max(currentPosition / maxBound, 0), 1)
 }
 
 // MARK: - PaginationScroll

package/ios/Popup/PopupDisplay.swift

@@ -1,4 +1,3 @@
-import SDWebImageSwiftUI
 import SwiftUI
 
 // MARK: - PopupButtonDirection
@@ -16,45 +15,12 @@ public enum PopupButtonType {
     case button
 }
 
-extension View {
-    func measureLineHeights(font: Font,
-                            oneLine: Binding<CGFloat>,
-                            twoLines: Binding<CGFloat>) -> some View {
-        overlay(
-            VStack(spacing: 0) {
-                Text("A")
-                    .font(font)
-                    .ignoreBoldTextSetting()
-                    .lineLimit(1)
-                    .fixedSize()
-                    .background(
-                        GeometryReader { g in
-                            Color.clear.onAppear { oneLine.wrappedValue = g.size.height }
-                        }
-                    )
-                    .hidden()
-
-                Text("A\nA")
-                    .font(font)
-                    .ignoreBoldTextSetting()
-                    .lineLimit(2)
-                    .fixedSize(horizontal: false, vertical: true)
-                    .background(
-                        GeometryReader { g in
-                            Color.clear.onAppear { twoLines.wrappedValue = g.size.height }
-                        }
-                    )
-                    .hidden()
-            }
-            .frame(width: 0, height: 0)
-        )
-    }
-}
-
 // MARK: - PopupDisplay
 
 public struct PopupDisplay: View {
+    @Environment(\.appTheme) private var theme
     @Environment(\.localize) private var localize
+    @Environment(\.momoFontScale) private var fontScale
     @Environment(\.screenLayout) private var layout
 
     // MARK: Lifecycle
@@ -76,146 +42,100 @@ public struct PopupDisplay: View {
     }
 
     // MARK: Public
-    
+
     @State private var oneLineH: CGFloat = 0
     @State private var twoLineH: CGFloat = 0
+    @State private var textHeight: CGFloat = .zero
+    @State private var actionsHeight: CGFloat = 0
 
-    private var fallbackLH: CGFloat { UIFont.preferredFont(forTextStyle: .body).lineHeight }
-    private var perLine: CGFloat { max(twoLineH - oneLineH, oneLineH > 0 ? oneLineH : fallbackLH) }
-
-    private func heightForLines(lines: CGFloat) -> CGFloat {
-        guard oneLineH > 0 && twoLineH > 0 else { return ceil(fallbackLH * lines) }
-        return ceil(oneLineH + max(0, lines - 1) * (twoLineH - oneLineH))
+    // ~8.5 lines as laid out; nominal line height until measured
+    private var maxHeight8_5: CGFloat {
+        popupLinesHeight(8.5, oneLine: oneLineH, twoLines: twoLineH)
+            ?? fontScale(TypographyStyle.bodyDefaultRegular.lineHeight) * 8.5
     }
-    private var maxHeight8_5: CGFloat { heightForLines(lines: 8.5) }
 
+    private var shouldUseColumn: Bool {
+        // UTF-16 length, as PopupNotify counts it
+        buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.utf16.count > 12 || actionButtonTitle.utf16.count > 12))
+    }
 
-    @State private var textHeight: CGFloat = .zero
-    @State private var isScrollable = false
-    @State private var actionsHeight: CGFloat = 0
-    
     public var body: some View {
-        var shouldUseColumn: Bool {
-            buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
-        }
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                // scrolls when iPhone Duo landscape is too short; actions stay visible
+                PopupScrollBody(maxHeight: layout.popupMaxHeight.map { $0 - actionsHeight }) {
+                    VStack(spacing: 0) {
+                        if !url.isEmpty {
+                            PopupHeaderImage(url: url)
+                        }
+                        VStack(alignment: .leading, spacing: 0) {
+                            MomoText(title, typography: .headerDefaultBold, maxLines: 2, accessibilityId: "title_popup_permission")
+                                .padding(.top, 24)
+                                .padding(.bottom, 8)
 
-        VStack(spacing: 12) {
-            ZStack(alignment: .topTrailing) {
-                if(isShowCloseIcon) {
-                    SwiftUI.Button(action: onClose) {
-                        Image(systemName: "xmark.circle.fill")
-                            .resizable()
-                            .frame(width: 22, height: 22)
-                            .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
-                    }.foregroundColor(Colors.black20)
-                        .background(Colors.black01.cornerRadius(15))
-                        .padding(.trailing, -11)
-                        .padding(.top, -11)
-                        .zIndex(1)
-                        .accessibility(identifier: "ic_popup_close")
-                }
-                
-                VStack(spacing: 0) {
-                    // scrolls when iPhone Duo landscape is too short; actions stay visible
-                    PopupScrollBody(maxHeight: layout.popupMaxHeight.map { $0 - actionsHeight }) {
-                        VStack(spacing: 0) {
-                            if(!url.isEmpty) {
-                                WebImage(url: URL(string: url), isAnimating: .constant(true))
-                                    .resizable()
-                                    .placeholder {
-                                        Rectangle()
-                                            .fill(Color.gray.opacity(0.3))
-                                            .aspectRatio(1.777, contentMode: .fit)
-                                            .frame(maxWidth: .infinity, maxHeight: 184)
-                                    }
-                                    .aspectRatio(1.777, contentMode: .fit)
-                                    .frame(maxWidth: .infinity, alignment: .center)
-                                    .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
-                                    .clipped()
-                            }
-                            VStack(alignment: .leading, spacing: 0) {
-                                MomoText(title, typography: .headerDefaultBold)
-                                    .padding(.top, 24)
-                                    .padding(.bottom, 8)
-                                    .lineLimit(2)
-                                    .accessibility(identifier: "title_popup_permission")
-                        
-                                Group {
-                                    if isScrollable {
-                                        ScrollView(showsIndicators: false) {
-                                            MomoText(description, typography: .bodyDefaultRegular)
-                                                .multilineTextAlignment(.leading)
-                                                .background(GeometryReader { geo in
-                                                    Color.clear.onAppear { textHeight = geo.size.height }
-                                                })
-                                                .measureLineHeights(font: .body_default_regular,
-                                                                    oneLine: $oneLineH,
-                                                                    twoLines: $twoLineH)
-                                                .accessibility(identifier: "description_popup_permission")
-                                        }
-                                        // Cap the visible height to ~8.5 lines
-                                        .frame(height: min(maxHeight8_5, textHeight))
-                                    } else {
-                                        MomoText(description, typography: .bodyDefaultRegular)
-                                            .multilineTextAlignment(.leading)
-                                            .background(GeometryReader { geo in
-                                                Color.clear.onAppear {
-                                                    textHeight = geo.size.height
-                                                    // Trigger scroll at ~8.5 lines
-                                                    isScrollable = textHeight > maxHeight8_5
-                                                }
-                                            })
-                                            .measureLineHeights(font: .body_default_regular,
-                                                                oneLine: $oneLineH,
-                                                                twoLines: $twoLineH)
-                                            .accessibility(identifier: "description_popup_permission")
-                                    }
-                                }
+                            descriptionContent
                                 .padding(.bottom, 8)
-                        
-                                if(!errorCode.isEmpty) {
-                                    MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
-                                        .lineLimit(1)
-                                        .padding(.bottom, 8)
-                                }
+
+                            if !errorCode.isEmpty {
+                                MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: theme.colors.text.hint, maxLines: 1)
+                                    .padding(.bottom, 8)
                             }
-                            .frame(maxWidth: .infinity, alignment: .leading)
-                            .padding(.horizontal, 24)
-                            .padding(.bottom, 16)
                         }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.horizontal, 24)
+                        .padding(.bottom, 16)
+                        .measureLineHeights(typography: .bodyDefaultRegular, oneLine: $oneLineH, twoLines: $twoLineH)
                     }
+                }
 
-                    Group {
-                        if shouldUseColumn {
-                            if buttonType == .text {
-                                ColumnTextButtons
-                            } else {
-                                ColumnButtons
-                            }
+                Group {
+                    if shouldUseColumn {
+                        if buttonType == .text {
+                            ColumnTextButtons
                         } else {
-                            if buttonType == .text {
-                                RowTextButtons
-                            } else {
-                                RowButtons
-                            }
+                            ColumnButtons
                         }
-                    }
-                    .background(
-                        GeometryReader { proxy in
-                            Color.clear
-                                .onAppear { actionsHeight = proxy.size.height }
-                                .onChange(of: proxy.size.height) { actionsHeight = $0 }
+                    } else {
+                        if buttonType == .text {
+                            RowTextButtons
+                        } else {
+                            RowButtons
                         }
-                    )
+                    }
                 }
-                .fixedSize(horizontal: false, vertical: true)
+                .popupReadHeight($actionsHeight)
             }
+            .fixedSize(horizontal: false, vertical: true)
+            .background(theme.colors.background.surface)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+
+            if isShowCloseIcon {
+                PopupCloseButton(action: onClose)
+                    .offset(x: 11, y: -11)
+            }
+        }
+        .frame(maxWidth: layout.popupMaxWidth)
+        .padding(.horizontal, 12)
+        .accessibilityElement(children: .contain)
+        .accessibilityIdentifier("popup_notify")
+    }
+
+    @ViewBuilder
+    private var descriptionContent: some View {
+        if textHeight > maxHeight8_5 {
+            ScrollView(showsIndicators: false) {
+                descriptionText
+            }
+            .frame(height: maxHeight8_5)
+        } else {
+            descriptionText
         }
-            .background(Color.white.cornerRadius(15))
-            .frame(maxWidth: layout.popupMaxWidth)
-            .padding(.horizontal, 12)
-            .accessibilityElement(children: .ignore)
-            .accessibility(identifier: "popup_notify")
+    }
+
+    private var descriptionText: some View {
+        MomoText(description, typography: .bodyDefaultRegular, accessibilityId: "description_popup_permission")
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .popupReadHeight($textHeight)
     }
 
     // MARK: Internal
@@ -265,7 +185,7 @@ public struct PopupDisplay: View {
     }
 
     var RowButtons: some View {
-        HStack {
+        HStack(spacing: Spacing.S) {
             if(!closeButtonTitle.isEmpty) {
                 Button(title: closeButtonTitle, action: onPressCloseButton, type: .text, size: .medium).accessibility(identifier: "btn_popup_cancel")
             }
@@ -278,7 +198,7 @@ public struct PopupDisplay: View {
     }
 
     var ColumnButtons: some View {
-        VStack(alignment: .trailing) {
+        VStack(alignment: .trailing, spacing: Spacing.S) {
             Button(
                 title: actionButtonTitle,
                 action: onPressAction,

package/ios/Popup/PopupInput.swift

@@ -1,7 +1,9 @@
-import SDWebImageSwiftUI
 import SwiftUI
 
 public struct PopupInput: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.screenLayout) private var layout
+
     // MARK: Lifecycle
 
     public init(isPresented: Binding<Bool>, title: String = "", description: String = "", numberOfButtons: Int = 1, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, inputPlaceholder: String = "", inputValue: Binding<String> = Binding.constant(""), onTextChange: ((String) -> Void)? = nil) {
@@ -24,22 +26,13 @@ public struct PopupInput: View {
     public var body: some View {
         VStack(spacing: 12) {
             ZStack(alignment: .topTrailing) {
-                SwiftUI.Button(action: onPressClose) {
-                    Image(systemName: "xmark.circle.fill")
-                        .resizable()
-                        .frame(width: 16, height: 16)
-                }.foregroundColor(Colors.black20)
-                    .background(Colors.black01.cornerRadius(8))
-                    .offset(x: 6, y: -6)
-                    .zIndex(1)
-
                 VStack {
                     VStack(alignment: .leading) {
-                        MomoText(title, typography: .headerDefaultBold, color: .black)
+                        MomoText(title, typography: .headerDefaultBold)
                             .padding(.top, 12)
                             .padding(.bottom, 24)
 
-                        MomoText(description, typography: .bodyDefaultRegular, color: .black)
+                        MomoText(description, typography: .bodyDefaultRegular)
                             .opacity(0.6)
                             .multilineTextAlignment(.leading)
                             .padding(.bottom, 20)
@@ -61,11 +54,15 @@ public struct PopupInput: View {
                     }
 
                 }.clipped()
+
+                PopupCloseButton(action: onPressClose)
+                    .offset(x: 11, y: -11)
             }
         }
-        .background(Color.white.cornerRadius(8))
+        .background(theme.colors.background.surface.cornerRadius(8))
         .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
         .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
+        .frame(maxWidth: layout.popupMaxWidth)
         .padding(.horizontal, 40)
     }
 

package/ios/Popup/PopupLayout.swift

@@ -1,3 +1,4 @@
+import SDWebImageSwiftUI
 import SwiftUI
 
 // Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
@@ -6,9 +7,9 @@ private let duoPopupMaxWidth: CGFloat = 440
 extension ScreenLayout {
     var isDuoDevice: Bool { isIPhoneDuoDevice(windowSize: CGSize(width: width, height: height)) }
 
-    /// Card width cap; other devices keep the full window width minus the popup's own padding.
+    /// Card width cap (Compose `popupMaxWidth`); unbounded off iPhone Duo, where the popup's own padding sets the width.
     var popupMaxWidth: CGFloat {
-        isDuoDevice ? min(width - Spacing.XL * 2, duoPopupMaxWidth) : .infinity
+        isDuoDevice ? duoPopupMaxWidth : .infinity
     }
 
     /// Room left for a popup on iPhone Duo, where landscape is too short for it; nil elsewhere.
@@ -43,3 +44,97 @@ struct PopupScrollBody<Content: View>: View {
         }
     }
 }
+
+/// Height of `lines` (may be fractional) lines measured by `measureLineHeights`; nil until measured.
+func popupLinesHeight(_ lines: CGFloat, oneLine: CGFloat, twoLines: CGFloat) -> CGFloat? {
+    guard oneLine > 0, twoLines > oneLine else { return nil }
+    return oneLine + (lines - 1) * (twoLines - oneLine)
+}
+
+extension View {
+    /// Measures one and two lines of `typography` as MomoText lays them out, its line spacing included.
+    func measureLineHeights(typography: TypographyStyle,
+                            oneLine: Binding<CGFloat>,
+                            twoLines: Binding<CGFloat>) -> some View {
+        overlay(
+            VStack(spacing: 0) {
+                MomoText("A", typography: typography)
+                    .fixedSize()
+                    .popupReadHeight(oneLine)
+                MomoText("A\nA", typography: typography)
+                    .fixedSize()
+                    .popupReadHeight(twoLines)
+            }
+            .frame(width: 0, height: 0)
+            .hidden()
+            .accessibilityHidden(true)
+        )
+    }
+
+    func popupReadHeight(_ height: Binding<CGFloat>) -> some View {
+        background(
+            GeometryReader { proxy in
+                Color.clear
+                    .onAppear { height.wrappedValue = proxy.size.height }
+                    .onChange(of: proxy.size.height) { height.wrappedValue = $0 }
+            }
+        )
+    }
+}
+
+/// 22pt round close button shared by the popups (Compose `PopupNotify` / `PopupPromotion`).
+struct PopupCloseButton: View {
+    @Environment(\.appTheme) private var theme
+    var tapSize: CGFloat = 22
+    let action: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: action) {
+            Circle()
+                .fill(theme.colors.text.default)
+                .overlay(Circle().strokeBorder(theme.colors.background.surface, lineWidth: 2))
+                .overlay(Icon(source: "navigation_close", size: 16, color: theme.colors.background.surface))
+                .frame(width: 22, height: 22)
+                .frame(width: tapSize, height: tapSize)
+                .contentShape(Rectangle())
+        }
+        .accessibilityIdentifier("ic_popup_close")
+    }
+}
+
+/// Compose `Image` states: skeleton while loading, `media_fail` once loading fails.
+struct PopupImagePlaceholder: View {
+    @Environment(\.appTheme) private var theme
+    let failed: Bool
+
+    var body: some View {
+        if failed {
+            Icon(source: "media_fail", color: theme.colors.text.disable)
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+        } else {
+            Skeleton()
+        }
+    }
+}
+
+/// 16:9 header image, cropped like Compose `Image` (ContentScale.Crop).
+struct PopupHeaderImage: View {
+    let url: String
+
+    @State private var failed = false
+
+    var body: some View {
+        Color.clear
+            .aspectRatio(1.777, contentMode: .fit)
+            .frame(maxWidth: .infinity)
+            .overlay(
+                WebImage(url: URL(string: url), isAnimating: .constant(true))
+                    .onSuccess { _, _, _ in failed = false }
+                    .onFailure { _ in failed = true }
+                    .resizable()
+                    .placeholder { PopupImagePlaceholder(failed: failed || URL(string: url) == nil) }
+                    .scaledToFill()
+            )
+            .clipped()
+    }
+}

package/ios/Popup/PopupNotify.swift

@@ -1,8 +1,17 @@
-import SDWebImageSwiftUI
 import SwiftUI
 
 public typealias PopupActionDirection = PopupButtonDirection
 
+public struct PopupAction {
+    public let title: String
+    public let onPress: (() -> Void)?
+
+    public init(title: String, onPress: (() -> Void)? = nil) {
+        self.title = title
+        self.onPress = onPress
+    }
+}
+
 public struct PopupNotifyProps {
     public var image: String
     public var title: String
@@ -38,6 +47,7 @@ public struct PopupNotifyProps {
 }
 
 public struct PopupNotify: View {
+    @Environment(\.appTheme) private var theme
     @Environment(\.localize) private var localize
     @Environment(\.momoFontScale) private var fontScale
     @Environment(\.screenLayout) private var layout
@@ -46,13 +56,17 @@ public struct PopupNotify: View {
 
     @State private var descriptionHeight: CGFloat = 0
     @State private var actionsHeight: CGFloat = 0
+    @State private var oneLineHeight: CGFloat = 0
+    @State private var twoLinesHeight: CGFloat = 0
 
     private var errorCodePrefix: String {
         localize.translate("errorCode")
     }
 
+    // ~8.5 lines as laid out (Compose measures the real lines); nominal line height until measured
     private var maxDescriptionHeight: CGFloat {
-        fontScale(TypographyStyle.bodyDefaultRegular.lineHeight) * 8.5
+        popupLinesHeight(8.5, oneLine: oneLineHeight, twoLines: twoLinesHeight)
+            ?? fontScale(TypographyStyle.bodyDefaultRegular.lineHeight) * 8.5
     }
 
     private var shouldUseColumnButtons: Bool {
@@ -62,7 +76,9 @@ public struct PopupNotify: View {
         case .row:
             return false
         case .auto:
-            return (props.secondary?.title.count ?? 0) > 12 || (props.primary?.title.count ?? 0) > 12
+            // UTF-16 length, as Kotlin and JS count it
+            guard let secondary = props.secondary else { return false }
+            return secondary.title.utf16.count > 12 || (props.primary?.title.utf16.count ?? 0) > 12
         }
     }
 
@@ -77,7 +93,7 @@ public struct PopupNotify: View {
                 PopupScrollBody(maxHeight: layout.popupMaxHeight.map { $0 - actionsHeight }) {
                     VStack(spacing: 0) {
                         if !props.image.isEmpty {
-                            popupImage
+                            PopupHeaderImage(url: props.image)
                         }
                         textContent
                     }
@@ -86,25 +102,19 @@ public struct PopupNotify: View {
                 actionButtons
                     .padding(.horizontal, Spacing.XL)
                     .padding(.bottom, Spacing.XL)
-                    .background(
-                        GeometryReader { proxy in
-                            Color.clear
-                                .onAppear { actionsHeight = proxy.size.height }
-                                .onChange(of: proxy.size.height) { actionsHeight = $0 }
-                        }
-                    )
+                    .popupReadHeight($actionsHeight)
             }
-            .background(Colors.black01)
+            .background(theme.colors.background.surface)
             .clipShape(RoundedRectangle(cornerRadius: Radius.L))
 
             if props.isShowCloseIcon {
-                closeButton
+                PopupCloseButton(action: props.onIconClose)
                     .offset(x: 11, y: -11)
             }
         }
         .frame(maxWidth: layout.popupMaxWidth)
         .padding(.horizontal, Spacing.M)
-        .accessibilityElement(children: .ignore)
+        .accessibilityElement(children: .contain)
         .accessibilityIdentifier("popup_notify")
     }
 
@@ -124,7 +134,7 @@ public struct PopupNotify: View {
                 MomoText(
                     errorCodePrefix + props.error,
                     typography: .descriptionXsRegular,
-                    color: Colors.black12,
+                    color: theme.colors.text.hint,
                     maxLines: 1
                 )
                 .padding(.top, Spacing.S)
@@ -132,20 +142,7 @@ public struct PopupNotify: View {
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding(Spacing.XL)
-    }
-
-    private var popupImage: some View {
-        WebImage(url: URL(string: props.image), isAnimating: .constant(true))
-            .resizable()
-            .placeholder {
-                Rectangle()
-                    .fill(Colors.black03)
-                    .aspectRatio(1.777, contentMode: .fit)
-                    .frame(maxWidth: .infinity)
-            }
-            .aspectRatio(1.777, contentMode: .fit)
-            .frame(maxWidth: .infinity)
-            .clipShape(RoundedCorner(radius: Radius.L, corners: [.topLeft, .topRight]))
+        .measureLineHeights(typography: .bodyDefaultRegular, oneLine: $oneLineHeight, twoLines: $twoLinesHeight)
     }
 
     @ViewBuilder
@@ -167,15 +164,7 @@ public struct PopupNotify: View {
             accessibilityId: "description_popup_permission"
         )
         .frame(maxWidth: .infinity, alignment: .leading)
-        .background(
-            GeometryReader { proxy in
-                Color.clear
-                    .onAppear { descriptionHeight = proxy.size.height }
-                    .onChange(of: props.description) { _ in
-                        descriptionHeight = proxy.size.height
-                    }
-            }
-        )
+        .popupReadHeight($descriptionHeight)
     }
 
     @ViewBuilder
@@ -217,21 +206,4 @@ public struct PopupNotify: View {
         )
         .accessibilityIdentifier("btn_popup_cancel")
     }
-
-    private var closeButton: some View {
-        SwiftUI.Button(action: props.onIconClose) {
-            ZStack {
-                Circle()
-                    .fill(Colors.black17)
-                    .overlay(
-                        Circle()
-                            .stroke(Colors.black01, lineWidth: 2)
-                    )
-                    .frame(width: 22, height: 22)
-
-                Icon(source: "navigation_close", size: 16, color: Colors.black01)
-            }
-        }
-        .accessibilityIdentifier("ic_popup_close")
-    }
 }