@apps-in-toss/framework 2.7.1 → 2.8.0

package/dist/index.js

@@ -148,8 +148,8 @@ function useNavigationBarContext() {
 
 // src/components/RNAppContainer.tsx
 import { setIosSwipeGestureEnabled } from "@apps-in-toss/native-modules";
-import { useEffect as useEffect7 } from "react";
-import { Platform as Platform3 } from "react-native";
+import { useEffect as useEffect8 } from "react";
+import { Platform as Platform2 } from "react-native";
 
 // src/components/GameInitializer.tsx
 import { isMinVersionSupported } from "@apps-in-toss/native-modules";
@@ -604,9 +604,6 @@ var overlayStyle = {
   zIndex: Z_INDEX.PROFILE_OVERLAY
 };
 
-// src/components/NavigationBar/RNNavigationBar/Default.tsx
-import { NavigationBackButton, NavigationLeft, TopNavigation } from "@toss/tds-react-native/private";
-
 // src/components/NavigationBar/RNNavigationBar/hooks/useHardwareBackPress.ts
 import { useEffect as useEffect4 } from "react";
 import { BackHandler } from "react-native";
@@ -741,7 +738,7 @@ function useNavigationEvent() {
         if (homeEvent.hasSubscriptions()) {
           homeEvent.emit({});
         } else {
-          navigation.navigate("/");
+          navigation.navigate("/", {}, { pop: true });
         }
       },
       handleCloseButtonClick: () => {
@@ -1111,100 +1108,325 @@ function BottomSheetImpressionArea({ children }) {
   return /* @__PURE__ */ jsx9(Fragment3, { children });
 }
 
-// src/core/utils/toIcon.ts
-function toIcon(source) {
-  return source.startsWith("http") ? { source: { uri: source } } : { name: source };
+// src/components/NavigationBar/TopNavigation/TopNavigation.tsx
+import { useSafeAreaInsets } from "@granite-js/native/react-native-safe-area-context";
+import { useNavigation as useNavigation2 } from "@granite-js/react-native";
+import { colors } from "@toss/tds-react-native";
+import { useEffect as useEffect6 } from "react";
+import { View as View3 } from "react-native";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function TopNavigation({ left, center, right }) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation2();
+  useEffect6(() => {
+    const { navigationBar } = getAppsInTossGlobals();
+    const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
+    const transparent = parsedNavigationBar?.transparentBackground ?? false;
+    const theme = parsedNavigationBar?.theme ?? "light";
+    navigation.setOptions({
+      headerTransparent: transparent,
+      header: () => /* @__PURE__ */ jsxs3(
+        View3,
+        {
+          style: {
+            width: "100%",
+            backgroundColor: transparent ? void 0 : theme === "light" ? colors.lightThemeBackground : colors.darkThemeBackground
+          },
+          pointerEvents: "box-none",
+          children: [
+            /* @__PURE__ */ jsx10(View3, { style: { width: "100%", height: insets.top } }),
+            /* @__PURE__ */ jsxs3(
+              View3,
+              {
+                style: {
+                  width: "100%",
+                  height: 44,
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  paddingLeft: insets.left,
+                  paddingRight: insets.right
+                },
+                children: [
+                  /* @__PURE__ */ jsx10(View3, { children: left }),
+                  /* @__PURE__ */ jsx10(
+                    View3,
+                    {
+                      style: {
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center"
+                      },
+                      children: center
+                    }
+                  ),
+                  /* @__PURE__ */ jsx10(
+                    View3,
+                    {
+                      style: {
+                        flexDirection: "row",
+                        alignItems: "center"
+                      },
+                      children: right
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    });
+  }, [navigation, insets, left, center, right]);
+  return /* @__PURE__ */ jsx10(Fragment4, {});
+}
+
+// src/components/NavigationBar/TopNavigation/BackButton.tsx
+import { SvgXml } from "@granite-js/native/react-native-svg";
+import { TouchableOpacity, View as View4 } from "react-native";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function BackButton({ theme = "light", onPress, ...restProps }) {
+  return /* @__PURE__ */ jsx11(
+    TouchableOpacity,
+    {
+      hitSlop: { top: 10, right: 10, bottom: 10, left: 10 },
+      style: {
+        width: 24,
+        height: 24,
+        marginRight: 14
+      },
+      onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: "\uB4A4\uB85C\uAC00\uAE30",
+      ...restProps,
+      children: /* @__PURE__ */ jsx11(View4, { style: { width: 24, height: 24 }, children: /* @__PURE__ */ jsx11(
+        SvgXml,
+        {
+          width: 24,
+          height: 24,
+          xml: BACK_BUTTON_XML.replace(/__COLOR__/g, theme === "light" ? "#191F28" : "#FFFFFF")
+        }
+      ) })
+    }
+  );
+}
+var BACK_BUTTON_XML = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="m20.8 20.7c-.3 0-.6-.1-.8-.4l-7.5-7.5c-.5-.5-.5-1.2 0-1.7l7.5-7.5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-6.8 6.7 6.7 6.7c.5.5.5 1.2 0 1.7-.2.2-.5.3-.8.3z" fill="__COLOR__"/></svg>`;
+
+// src/components/NavigationBar/TopNavigation/HomeButton.tsx
+import { colors as colors2, Icon } from "@toss/tds-react-native";
+import { TouchableOpacity as TouchableOpacity2 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function HomeButton({ theme = "light", onPress, children }) {
+  return /* @__PURE__ */ jsxs4(
+    TouchableOpacity2,
+    {
+      onPress,
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        height: 34,
+        paddingLeft: 10,
+        paddingRight: 10,
+        backgroundColor: theme === "light" ? colors2.greyOpacity50 : "rgba(0, 0, 1, 0.58)",
+        borderRadius: 99
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx12(Icon, { name: "icon-home-mono", size: 18 })
+      ]
+    }
+  );
+}
+
+// src/components/NavigationBar/TopNavigation/AppTitle.tsx
+import { Image } from "@granite-js/react-native";
+import { Text, View as View5 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function AppTitle({ title, iconUrl, theme = "light" }) {
+  return /* @__PURE__ */ jsxs5(
+    View5,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6
+      },
+      children: [
+        iconUrl != null && iconUrl !== "" && /* @__PURE__ */ jsx13(
+          Image,
+          {
+            source: { uri: iconUrl },
+            style: {
+              width: 18,
+              height: 18,
+              borderRadius: 6,
+              overflow: "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          Text,
+          {
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            style: {
+              color: theme === "light" ? "#191F28" : "#FFFFFF",
+              fontSize: 16,
+              fontWeight: "600"
+            },
+            children: title
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/NavigationBar/TopNavigation/Menu.tsx
+import { colors as colors3, Icon as Icon2, tdsEvent } from "@toss/tds-react-native";
+import { TouchableOpacity as TouchableOpacity3, View as View6 } from "react-native";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function Menu2({ theme = "light", accessoryButton, onPressDots, onLongPressDots, onPressClose }) {
+  const backgroundColor = theme === "light" ? colors3.greyOpacity50 : "rgba(0, 0, 1, 0.58)";
+  const iconColor = theme === "light" ? colors3.greyOpacity600 : "rgba(253, 253, 255, 0.75)";
+  return /* @__PURE__ */ jsxs6(View6, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
+    accessoryButton && /* @__PURE__ */ jsx14(
+      View6,
+      {
+        style: {
+          borderRadius: 99,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx14(
+          TouchableOpacity3,
+          {
+            style: {
+              paddingVertical: 7,
+              paddingHorizontal: 12,
+              backgroundColor
+            },
+            onPress: () => {
+              tdsEvent.emit("navigationAccessoryEvent", { id: accessoryButton.id });
+              accessoryButton.onPress?.();
+            },
+            disabled: accessoryButton.disabled,
+            children: /* @__PURE__ */ jsx14(
+              Icon2,
+              {
+                name: accessoryButton.icon.name ?? "",
+                accessibilityLabel: accessoryButton.title,
+                color: iconColor,
+                size: 20
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx14(View6, { style: { borderRadius: 99, overflow: "hidden", marginRight: 12 }, children: /* @__PURE__ */ jsxs6(
+      View6,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 12,
+          height: 34,
+          paddingHorizontal: 12,
+          backgroundColor
+        },
+        children: [
+          /* @__PURE__ */ jsx14(TouchableOpacity3, { onPress: onPressDots, onLongPress: onLongPressDots, children: /* @__PURE__ */ jsx14(Icon2, { name: "icon-dots-mono", accessibilityLabel: "\uB354\uBCF4\uAE30", color: iconColor, size: 20 }) }),
+          /* @__PURE__ */ jsx14(
+            View6,
+            {
+              style: {
+                width: 1,
+                height: 16,
+                backgroundColor: theme === "light" ? colors3.greyOpacity200 : "rgba(222, 222, 255, 0.19)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx14(TouchableOpacity3, { onPress: onPressClose, children: /* @__PURE__ */ jsx14(Icon2, { name: "icon-appsintoss-close-mono", accessibilityLabel: "\uB2EB\uAE30", color: iconColor, size: 20 }) })
+        ]
+      }
+    ) })
+  ] });
 }
 
 // src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
-import { useEffect as useEffect6, useRef as useRef2 } from "react";
-import { Fragment as Fragment4, jsx as jsx10 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef2 } from "react";
+import { Fragment as Fragment5, jsx as jsx15 } from "react/jsx-runtime";
 function NavigationBarImpressionArea({
   children,
   withHomeButton
 }) {
   const hasLogged = useRef2(false);
   const logging = useNavigationBarLogging();
-  useEffect6(() => {
+  useEffect7(() => {
     if (hasLogged.current === false) {
       logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
       hasLogged.current = true;
     }
   }, [logging, withHomeButton]);
-  return /* @__PURE__ */ jsx10(Fragment4, { children });
+  return /* @__PURE__ */ jsx15(Fragment5, { children });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Default.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function DefaultNavigationBar() {
   const globals = getAppsInTossGlobals();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
+  const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
   const navigationEvent = useNavigationEvent();
   useHardwareBackPress(navigationEvent.handleBack);
-  return /* @__PURE__ */ jsx11(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx16(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx16(
     TopNavigation,
     {
-      title: globals.brandDisplayName,
-      icon: toIcon(globals.brandIcon),
-      onPressDots: openMoreButtonBottomSheet,
-      contentVisible: true,
-      onPressTitle: withHomeButton ? navigationEvent.handleHomeButtonClick : void 0,
-      onPressClose: navigationEvent.handleCloseButtonClick,
-      withHome: withHomeButton,
-      fixedRightButton: navigationRightButton,
-      leftVisible: withBackButton,
-      children: /* @__PURE__ */ jsx11(NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ jsx11(NavigationBackButton, { onPress: navigationEvent.handleBack, canGoBack: false }) })
+      left: withBackButton ? /* @__PURE__ */ jsx16(BackButton, { theme, onPress: navigationEvent.handleBack }) : null,
+      center: withHomeButton ? /* @__PURE__ */ jsx16(HomeButton, { theme, onPress: navigationEvent.handleHomeButtonClick, children: /* @__PURE__ */ jsx16(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ jsx16(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }),
+      right: /* @__PURE__ */ jsx16(
+        Menu2,
+        {
+          theme,
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: navigationEvent.handleCloseButtonClick
+        }
+      )
     }
   ) });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Game.tsx
-import { useSafeAreaInsets } from "@granite-js/native/react-native-safe-area-context";
-import { PageNavbar } from "@toss/tds-react-native";
-import { NavigationRightContent, useSafeAreaTop } from "@toss/tds-react-native/private";
-import { Platform as Platform2, View as View3 } from "react-native";
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function GameNavigationBar() {
-  const safeAreaTop = useSafeAreaTop();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const navigationEvent = useNavigationEvent();
   const { navigationRightButton } = useNavigationBarContext();
-  const { right: safeAreaRight } = useSafeAreaInsets();
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
   useHardwareBackPress(navigationEvent.handleBack);
-  return /* @__PURE__ */ jsxs3(Fragment5, { children: [
-    /* @__PURE__ */ jsx12(PageNavbar, { preference: { type: "none" } }),
-    /* @__PURE__ */ jsx12(
-      View3,
-      {
-        style: {
-          width: "100%",
-          // TODO: UI관련 스타일 설정은 TDS로 이관
-          height: Platform2.OS === "ios" ? 44 : 54,
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          position: "absolute",
-          zIndex: Z_INDEX.CLOSE_BUTTON,
-          marginTop: safeAreaTop,
-          paddingRight: safeAreaRight + 10
-        },
-        pointerEvents: "box-none",
-        children: /* @__PURE__ */ jsx12(
-          NavigationRightContent,
-          {
-            fixedRightButton: navigationRightButton,
-            onPressDots: openMoreButtonBottomSheet,
-            onPressClose: navigationEvent.handleCloseButtonClick,
-            theme: "dark"
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx17(
+    TopNavigation,
+    {
+      right: /* @__PURE__ */ jsx17(
+        Menu2,
+        {
+          theme: parsedNavigationBar?.theme ?? "dark",
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: navigationEvent.handleCloseButtonClick
+        }
+      )
+    }
+  );
 }
 
 // src/components/NavigationBar/RNNavigationBar/index.tsx
@@ -1223,20 +1445,20 @@ import * as constant_bridges_star from "@apps-in-toss/native-modules/constant-br
 import * as event_bridges_star from "@apps-in-toss/native-modules/event-bridges";
 
 // src/components/RNAppContainer.tsx
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 function RNAppContainer({ children }) {
   const global2 = getAppsInTossGlobals();
   switch (global2.appType) {
     case "game":
-      return /* @__PURE__ */ jsx13(GameAppContainer, { children });
+      return /* @__PURE__ */ jsx18(GameAppContainer, { children });
     case "general":
     default:
-      return /* @__PURE__ */ jsx13(GeneralAppContainer, { children });
+      return /* @__PURE__ */ jsx18(GeneralAppContainer, { children });
   }
 }
 function GameAppContainer({ children }) {
-  useEffect7(() => {
-    if (Platform3.OS === "ios") {
+  useEffect8(() => {
+    if (Platform2.OS === "ios") {
       setIosSwipeGestureEnabled({ isEnabled: false });
       return () => {
         setIosSwipeGestureEnabled({ isEnabled: true });
@@ -1244,33 +1466,33 @@ function GameAppContainer({ children }) {
     }
     return;
   }, []);
-  return /* @__PURE__ */ jsxs4(Fragment6, { children: [
-    /* @__PURE__ */ jsx13(RNNavigationBar.Game, {}),
-    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ jsx13(GameInitializer, { children }) : children
+  return /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsx18(RNNavigationBar.Game, {}),
+    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ jsx18(GameInitializer, { children }) : children
   ] });
 }
 function GeneralAppContainer({ children }) {
-  return /* @__PURE__ */ jsxs4(Fragment6, { children: [
-    /* @__PURE__ */ jsx13(RNNavigationBar.Default, {}),
+  return /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsx18(RNNavigationBar.Default, {}),
     children
   ] });
 }
 
 // src/core/registerApp.tsx
-import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 function AppsInTossContainer(Container, { children, ...initialProps }) {
   if (!isMinVersionSupported3({
     android: "5.220.0",
     ios: "5.221.0"
   })) {
-    return /* @__PURE__ */ jsxs5(Fragment7, { children: [
-      /* @__PURE__ */ jsx14(AppEvent.System, { ...initialProps }),
-      /* @__PURE__ */ jsx14(AppUpdate, {})
+    return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+      /* @__PURE__ */ jsx19(AppEvent.System, { ...initialProps }),
+      /* @__PURE__ */ jsx19(AppUpdate, {})
     ] });
   }
-  return /* @__PURE__ */ jsxs5(Fragment7, { children: [
-    /* @__PURE__ */ jsx14(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ jsx14(Container, { ...initialProps, children: /* @__PURE__ */ jsx14(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children }) })
+  return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    /* @__PURE__ */ jsx19(AppEvent.System, { ...initialProps }),
+    /* @__PURE__ */ jsx19(Container, { ...initialProps, children: /* @__PURE__ */ jsx19(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children }) })
   ] });
 }
 function registerApp(container, { context, analytics }) {
@@ -1289,7 +1511,8 @@ function registerApp(container, { context, analytics }) {
       router: {
         screenContainer: AppsInTossScreenContainer,
         defaultScreenOption: {
-          statusBarStyle: "dark"
+          statusBarStyle: "dark",
+          header: () => null
         }
       }
     });
@@ -1299,7 +1522,7 @@ function registerApp(container, { context, analytics }) {
 }
 function AppsInTossScreenContainer({ children }) {
   const isRNApp = getAppsInTossGlobals().webViewType == null;
-  return /* @__PURE__ */ jsx14(NavigationBarContextProvider, { children: isRNApp ? /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx19(NavigationBarContextProvider, { children: isRNApp ? /* @__PURE__ */ jsx19(
     Analytics.Screen,
     {
       onLog: (params) => sendLog(
@@ -1315,7 +1538,7 @@ function AppsInTossScreenContainer({ children }) {
         },
         { pipelines: ["core"] }
       ),
-      children: /* @__PURE__ */ jsx14(RNAppContainer, { children })
+      children: /* @__PURE__ */ jsx19(RNAppContainer, { children })
     }
   ) : children });
 }
@@ -1352,79 +1575,57 @@ import * as appsInTossAsyncBridges from "@apps-in-toss/native-modules/async-brid
 import * as appsInTossConstantBridges from "@apps-in-toss/native-modules/constant-bridges";
 import * as appsInTossEventBridges from "@apps-in-toss/native-modules/event-bridges";
 import { afterDocumentLoad, beforeDocumentLoad } from "@apps-in-toss/user-scripts";
-import { useSafeAreaInsets as useSafeAreaInsets4 } from "@granite-js/native/react-native-safe-area-context";
+import { useSafeAreaInsets as useSafeAreaInsets3 } from "@granite-js/native/react-native-safe-area-context";
 import { getSchemeUri as getSchemeUri9 } from "@granite-js/react-native";
-import { ExternalWebViewScreen, tdsEvent } from "@toss/tds-react-native";
-import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop3 } from "@toss/tds-react-native/private";
-import { useEffect as useEffect12, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
-import { BackHandler as BackHandler2, Linking, Platform as Platform6 } from "react-native";
+import { ExternalWebViewScreen, tdsEvent as tdsEvent2 } from "@toss/tds-react-native";
+import { useEffect as useEffect13, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { BackHandler as BackHandler2, Linking, Platform as Platform4 } from "react-native";
 
 // src/components/GameWebView.tsx
 import { setIosSwipeGestureEnabled as setIosSwipeGestureEnabled3, getOperationalEnvironment as getOperationalEnvironment5 } from "@apps-in-toss/native-modules";
 import {
   WebView as PlainWebView
 } from "@granite-js/native/react-native-webview";
-import { forwardRef, useEffect as useEffect8 } from "react";
-import { Platform as Platform5 } from "react-native";
+import { forwardRef, useEffect as useEffect9 } from "react";
+import { Platform as Platform3 } from "react-native";
 
 // src/components/NavigationBar/GameWebviewNavigationBar.tsx
-import { useSafeAreaInsets as useSafeAreaInsets2 } from "@granite-js/native/react-native-safe-area-context";
 import { closeView as closeView4 } from "@granite-js/react-native";
-import { PageNavbar as PageNavbar2, useDialog as useDialog4 } from "@toss/tds-react-native";
-import { NavigationRightContent as NavigationRightContent2, useSafeAreaTop as useSafeAreaTop2 } from "@toss/tds-react-native/private";
+import { useDialog as useDialog4 } from "@toss/tds-react-native";
 import { useCallback as useCallback6 } from "react";
-import { Platform as Platform4, View as View4 } from "react-native";
-import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function GameWebviewNavigationBar() {
-  const safeAreaTop = useSafeAreaTop2();
   const { openConfirm } = useDialog4();
   const logging = useNavigationBarLogging();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const { navigationRightButton } = useNavigationBarContext();
-  const { right: safeAreaRight } = useSafeAreaInsets2();
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
   const handleGameWebviewClose = useCallback6(async () => {
     logging.closeButtonClick();
     closeView4();
   }, [logging, openConfirm]);
-  return /* @__PURE__ */ jsxs6(Fragment8, { children: [
-    /* @__PURE__ */ jsx15(PageNavbar2, { preference: { type: "none" } }),
-    /* @__PURE__ */ jsx15(
-      View4,
-      {
-        style: {
-          width: "100%",
-          // TODO: UI관련 스타일 설정은 TDS로 이관
-          height: Platform4.OS === "ios" ? 44 : 54,
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          position: "absolute",
-          zIndex: Z_INDEX.CLOSE_BUTTON,
-          marginTop: safeAreaTop,
-          paddingRight: safeAreaRight + 10
-        },
-        pointerEvents: "box-none",
-        children: /* @__PURE__ */ jsx15(
-          NavigationRightContent2,
-          {
-            fixedRightButton: navigationRightButton,
-            onPressDots: openMoreButtonBottomSheet,
-            onPressClose: () => {
-              handleGameWebviewClose();
-            },
-            theme: "dark"
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx20(
+    TopNavigation,
+    {
+      right: /* @__PURE__ */ jsx20(
+        Menu2,
+        {
+          theme: parsedNavigationBar?.theme ?? "dark",
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: handleGameWebviewClose
+        }
+      )
+    }
+  );
 }
 
 // src/components/GameWebView.tsx
-import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var GameWebView = forwardRef(function GameWebView2(props, ref) {
-  useEffect8(() => {
-    if (Platform5.OS === "ios") {
+  useEffect9(() => {
+    if (Platform3.OS === "ios") {
       setIosSwipeGestureEnabled3({ isEnabled: false });
       return () => {
         setIosSwipeGestureEnabled3({ isEnabled: true });
@@ -1432,9 +1633,9 @@ var GameWebView = forwardRef(function GameWebView2(props, ref) {
     }
     return;
   }, []);
-  return /* @__PURE__ */ jsxs7(Fragment9, { children: [
-    /* @__PURE__ */ jsx16(GameWebviewNavigationBar, {}),
-    getOperationalEnvironment5() === "toss" ? /* @__PURE__ */ jsx16(GameInitializer, { children: /* @__PURE__ */ jsx16(PlainWebView, { ref, ...props }) }) : /* @__PURE__ */ jsx16(PlainWebView, { ref, ...props })
+  return /* @__PURE__ */ jsxs9(Fragment8, { children: [
+    /* @__PURE__ */ jsx21(GameWebviewNavigationBar, {}),
+    getOperationalEnvironment5() === "toss" ? /* @__PURE__ */ jsx21(GameInitializer, { children: /* @__PURE__ */ jsx21(PlainWebView, { ref, ...props }) }) : /* @__PURE__ */ jsx21(PlainWebView, { ref, ...props })
   ] });
 });
 
@@ -1446,9 +1647,8 @@ import { forwardRef as forwardRef2 } from "react";
 
 // src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
 import { closeView as closeView5 } from "@granite-js/react-native";
-import { NavigationBackButton as NavigationBackButton2, NavigationLeft as NavigationLeft2, TopNavigation as TopNavigation2 } from "@toss/tds-react-native/private";
 import { useCallback as useCallback7 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const globals = getAppsInTossGlobals();
   const logging = useNavigationBarLogging();
@@ -1456,34 +1656,36 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
+  const theme = parsedNavigationBar?.theme ?? "light";
   const { navigationRightButton } = useNavigationBarContext();
   const handleClose = useCallback7(async () => {
     logging.closeButtonClick();
     closeView5();
   }, [logging]);
-  return /* @__PURE__ */ jsx17(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx17(
-    TopNavigation2,
+  return /* @__PURE__ */ jsx22(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx22(
+    TopNavigation,
     {
-      title: globals.brandDisplayName,
-      icon: toIcon(globals.brandIcon),
-      onPressDots: openMoreButtonBottomSheet,
-      contentVisible: true,
-      onPressTitle: withHomeButton ? onHomeButtonClick : void 0,
-      onPressClose: handleClose,
-      withHome: withHomeButton,
-      fixedRightButton: navigationRightButton,
-      leftVisible: withBackButton,
-      children: /* @__PURE__ */ jsx17(NavigationLeft2, { visible: withBackButton, children: /* @__PURE__ */ jsx17(NavigationBackButton2, { onPress: onBackButtonClick, canGoBack: false }) })
+      left: withBackButton ? /* @__PURE__ */ jsx22(BackButton, { theme, onPress: onBackButtonClick }) : null,
+      center: withHomeButton ? /* @__PURE__ */ jsx22(HomeButton, { theme, onPress: onHomeButtonClick, children: /* @__PURE__ */ jsx22(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ jsx22(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }),
+      right: /* @__PURE__ */ jsx22(
+        Menu2,
+        {
+          theme,
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: handleClose
+        }
+      )
     }
   ) });
 }
 
 // src/components/PartnerWebView.tsx
-import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var PartnerWebView = forwardRef2(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
-  return /* @__PURE__ */ jsxs8(Fragment10, { children: [
-    /* @__PURE__ */ jsx18(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
-    /* @__PURE__ */ jsx18(PlainWebView2, { ref, ...webViewProps, style: { flex: 1 } })
+  return /* @__PURE__ */ jsxs10(Fragment9, { children: [
+    /* @__PURE__ */ jsx23(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
+    /* @__PURE__ */ jsx23(PlainWebView2, { ref, ...webViewProps, style: { flex: 1 } })
   ] });
 });
 
@@ -1909,7 +2111,7 @@ async function tossAdEventLog(params) {
 }
 
 // src/bridge-handler/useBridgeHandler.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo3, useRef as useRef3 } from "react";
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -1974,7 +2176,7 @@ function useBridgeHandler({
     )};`,
     [constantHandlerMap]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     ref.current?.injectJavaScript(injectedJavaScript);
   }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
@@ -2047,14 +2249,14 @@ function parseNativeEventData(data) {
 }
 
 // src/core/hooks/useSafeAreaInsetsEvent.tsx
-import { useSafeAreaInsets as useSafeAreaInsets3 } from "@granite-js/native/react-native-safe-area-context";
-import { useEffect as useEffect10 } from "react";
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "@granite-js/native/react-native-safe-area-context";
+import { useEffect as useEffect11 } from "react";
 function useSafeAreaInsetsEvent() {
-  const insets = useSafeAreaInsets3();
-  useEffect10(() => {
+  const insets = useSafeAreaInsets2();
+  useEffect11(() => {
     safeAreaInsetsChange.emit(insets);
   }, [insets]);
-  useEffect10(() => {
+  useEffect11(() => {
     return () => safeAreaInsetsChange.clearSubscriptions();
   }, []);
   return safeAreaInsetsChange;
@@ -2335,11 +2537,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 import { startUpdateLocation } from "@apps-in-toss/native-modules";
 import { useVisibility } from "@granite-js/react-native";
-import { useEffect as useEffect11, useState as useState5 } from "react";
+import { useEffect as useEffect12, useState as useState5 } from "react";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility();
   const [location, setLocation] = useState5(null);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isVisible) {
       return;
     }
@@ -2357,11 +2559,11 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 }
 
 // src/hooks/useWaitForReturnNavigator.tsx
-import { useNavigation as useNavigation2, useVisibilityChange } from "@granite-js/react-native";
+import { useNavigation as useNavigation3, useVisibilityChange } from "@granite-js/react-native";
 import { useCallback as useCallback11, useRef as useRef4 } from "react";
 function useWaitForReturnNavigator() {
   const callbacks = useRef4([]).current;
-  const navigation = useNavigation2();
+  const navigation = useNavigation3();
   const startNavigating = useCallback11(
     (route, params) => {
       return new Promise((resolve) => {
@@ -2499,7 +2701,7 @@ var trackScreen = (url, title) => {
 };
 
 // src/components/WebView.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
@@ -2539,10 +2741,8 @@ function WebView({ type, local, onMessage, ...props }) {
   const webViewRef = useRef5(null);
   const url = useMemo6(() => getWebViewURL(local), [local]);
   const webBackHandler = useWebBackHandler(url, webViewRef);
-  const top = useSafeAreaTop3();
-  const bottom = useSafeAreaBottom();
-  const insets = useSafeAreaInsets4();
   const global2 = getAppsInTossGlobals();
+  const insets = useSafeAreaInsets3();
   const navigationBarContext = useNavigationBarContext();
   const safeAreaInsetsEvent = useSafeAreaInsetsEvent();
   const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = useState6(
@@ -2552,7 +2752,7 @@ function WebView({ type, local, onMessage, ...props }) {
     onMessage,
     eventListenerMap: {
       ...appsInTossEventBridges,
-      navigationAccessoryEvent: ({ onEvent, onError }) => tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
+      navigationAccessoryEvent: ({ onEvent, onError }) => tdsEvent2.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
       backEvent: ({ onEvent }) => {
         webBackHandler.addEventListener(onEvent);
         return () => {
@@ -2580,12 +2780,7 @@ function WebView({ type, local, onMessage, ...props }) {
     },
     constantHandlerMap: {
       ...appsInTossConstantBridges,
-      getSafeAreaInsets: () => ({
-        top,
-        bottom,
-        left: insets.left,
-        right: insets.right
-      }),
+      getSafeAreaInsets: () => insets,
       ...Object.fromEntries(Object.entries(global2).map(([key, value]) => [key, () => value])),
       getServerTime_isSupported: getServerTime.isSupported,
       requestReview_isSupported: requestReview.isSupported,
@@ -2667,7 +2862,7 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  useEffect12(() => {
+  useEffect13(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
@@ -2676,7 +2871,7 @@ function WebView({ type, local, onMessage, ...props }) {
     return () => subscription.remove();
   }, [webBackHandler]);
   const handleWebViewProcessDidTerminate = useHandleWebViewProcessDidTerminate(webViewRef);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx24(
     BaseWebView,
     {
       ref: refs,
@@ -2699,14 +2894,14 @@ function WebView({ type, local, onMessage, ...props }) {
         webBackHandler.onNavigationStateChange(event);
       },
       textZoom: 100,
-      userAgent: Platform6.OS === "ios" ? userAgent : void 0,
+      userAgent: Platform4.OS === "ios" ? userAgent : void 0,
       sharedCookiesEnabled: true,
       webviewDebuggingEnabled: webViewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
       onMessage: handler.onMessage,
       injectedJavaScript: afterDocumentLoad,
       injectedJavaScriptBeforeContentLoaded: [handler.injectedJavaScript, beforeDocumentLoad].join("\n"),
-      decelerationRate: Platform6.OS === "ios" ? 1 : void 0,
+      decelerationRate: Platform4.OS === "ios" ? 1 : void 0,
       allowsBackForwardNavigationGestures,
       onShouldStartLoadWithRequest: (event) => {
         try {
@@ -2746,8 +2941,8 @@ import { StartUpdateLocationPermissionError } from "@apps-in-toss/types";
 
 // src/ads/inlineAd/InlineAd.tsx
 import { ImpressionArea, useVisibilityChange as useVisibilityChange2 } from "@granite-js/react-native";
-import { useEffect as useEffect13, useRef as useRef8, useState as useState7 } from "react";
-import { StyleSheet as StyleSheet3, View as View7, useColorScheme } from "react-native";
+import { useEffect as useEffect14, useRef as useRef8, useState as useState7 } from "react";
+import { StyleSheet as StyleSheet3, View as View9, useColorScheme } from "react-native";
 
 // src/ads/inlineAd/constants.ts
 var SDK_ID = "106";
@@ -3132,13 +3327,13 @@ import { useRef as useRef6 } from "react";
 import {
   Animated,
   Easing,
-  Image,
+  Image as Image2,
   Pressable as Pressable2,
   StyleSheet,
-  Text,
-  View as View5
+  Text as Text2,
+  View as View7
 } from "react-native";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var ARROW_PATH = "m7.5 20.4c-.5-.5-.5-1.2 0-1.7l6.7-6.7-6.8-6.7c-.5-.5-.5-1.2 0-1.7s1.2-.5 1.7 0l7.5 7.5c.5.5.5 1.2 0 1.7l-7.5 7.5c-.2.3-.5.4-.8.4s-.6-.1-.8-.3z";
 function FeedBannerAdView({
   brandName,
@@ -3150,7 +3345,7 @@ function FeedBannerAdView({
   ctaTextColor,
   ctaBackgroundColor,
   adClearanceText,
-  colors,
+  colors: colors4,
   isAdBadgeEnabled,
   paddingStyle,
   onPress
@@ -3172,7 +3367,7 @@ function FeedBannerAdView({
   };
   const resolvedCtaBackground = ctaBackgroundColor ?? "#3081F9";
   const resolvedCtaTextColor = ctaTextColor ?? "#ffffff";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx25(
     Pressable2,
     {
       accessibilityRole: "button",
@@ -3180,10 +3375,10 @@ function FeedBannerAdView({
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles.pressable,
-      children: /* @__PURE__ */ jsxs9(Animated.View, { style: [styles.container, paddingStyle, { transform: [{ scale }] }], children: [
-        /* @__PURE__ */ jsxs9(View5, { style: styles.profileContainer, children: [
-          /* @__PURE__ */ jsxs9(View5, { style: styles.brandArea, children: [
-            /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsxs11(Animated.View, { style: [styles.container, paddingStyle, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxs11(View7, { style: styles.profileContainer, children: [
+          /* @__PURE__ */ jsxs11(View7, { style: styles.brandArea, children: [
+            /* @__PURE__ */ jsx25(
               Pressable2,
               {
                 accessibilityRole: "button",
@@ -3191,59 +3386,59 @@ function FeedBannerAdView({
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
                 style: styles.logoContainer,
-                children: /* @__PURE__ */ jsxs9(View5, { style: [styles.logoWrapper, { backgroundColor: colors.brandLogoBg }], children: [
-                  brandLogoUri ? /* @__PURE__ */ jsx20(Image, { source: { uri: brandLogoUri }, style: styles.logoImage, resizeMode: "cover" }) : null,
-                  /* @__PURE__ */ jsx20(View5, { style: [styles.logoOverlay, { borderColor: colors.brandLogoBorder }] })
+                children: /* @__PURE__ */ jsxs11(View7, { style: [styles.logoWrapper, { backgroundColor: colors4.brandLogoBg }], children: [
+                  brandLogoUri ? /* @__PURE__ */ jsx25(Image2, { source: { uri: brandLogoUri }, style: styles.logoImage, resizeMode: "cover" }) : null,
+                  /* @__PURE__ */ jsx25(View7, { style: [styles.logoOverlay, { borderColor: colors4.brandLogoBorder }] })
                 ] })
               }
             ),
-            /* @__PURE__ */ jsxs9(View5, { style: styles.brandTextContainer, children: [
-              /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsxs11(View7, { style: styles.brandTextContainer, children: [
+              /* @__PURE__ */ jsx25(
                 Pressable2,
                 {
                   accessibilityRole: "button",
                   onPress: () => onPress("103"),
                   onPressIn: handlePressIn,
                   onPressOut: handlePressOut,
-                  children: /* @__PURE__ */ jsx20(
-                    Text,
+                  children: /* @__PURE__ */ jsx25(
+                    Text2,
                     {
                       allowFontScaling: false,
                       numberOfLines: 1,
-                      style: [styles.brandName, { color: colors.brandName }],
+                      style: [styles.brandName, { color: colors4.brandName }],
                       children: brandName
                     }
                   )
                 }
               ),
-              isAdBadgeEnabled ? /* @__PURE__ */ jsx20(Text, { allowFontScaling: false, numberOfLines: 1, style: [styles.adBadge, { color: colors.adBadge }], children: "\uAD11\uACE0" }) : null
+              isAdBadgeEnabled ? /* @__PURE__ */ jsx25(Text2, { allowFontScaling: false, numberOfLines: 1, style: [styles.adBadge, { color: colors4.adBadge }], children: "\uAD11\uACE0" }) : null
             ] })
           ] }),
-          /* @__PURE__ */ jsxs9(View5, { style: styles.textArea, children: [
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs11(View7, { style: styles.textArea, children: [
+            /* @__PURE__ */ jsx25(
               Pressable2,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("101"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ jsx20(Text, { allowFontScaling: false, style: [styles.title, { color: colors.title }], children: title })
+                children: /* @__PURE__ */ jsx25(Text2, { allowFontScaling: false, style: [styles.title, { color: colors4.title }], children: title })
               }
             ),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx25(
               Pressable2,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("102"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ jsx20(Text, { allowFontScaling: false, style: [styles.subtitle, { color: colors.subtitle }], children: subtitle })
+                children: /* @__PURE__ */ jsx25(Text2, { allowFontScaling: false, style: [styles.subtitle, { color: colors4.subtitle }], children: subtitle })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9(View5, { style: styles.card, children: [
-          /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs11(View7, { style: styles.card, children: [
+          /* @__PURE__ */ jsx25(
             Pressable2,
             {
               accessibilityRole: "button",
@@ -3251,10 +3446,10 @@ function FeedBannerAdView({
               onPressIn: handlePressIn,
               onPressOut: handlePressOut,
               style: styles.imageButton,
-              children: /* @__PURE__ */ jsx20(View5, { style: styles.imageContainer, children: mainImageUri ? /* @__PURE__ */ jsx20(Image, { source: { uri: mainImageUri }, style: styles.mainImage, resizeMode: "cover" }) : null })
+              children: /* @__PURE__ */ jsx25(View7, { style: styles.imageContainer, children: mainImageUri ? /* @__PURE__ */ jsx25(Image2, { source: { uri: mainImageUri }, style: styles.mainImage, resizeMode: "cover" }) : null })
             }
           ),
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs11(
             Pressable2,
             {
               accessibilityRole: "button",
@@ -3263,14 +3458,14 @@ function FeedBannerAdView({
               onPressOut: handlePressOut,
               style: [styles.cta, { backgroundColor: resolvedCtaBackground }],
               children: [
-                /* @__PURE__ */ jsx20(Text, { allowFontScaling: false, style: [styles.ctaText, { color: resolvedCtaTextColor }], children: ctaText }),
-                /* @__PURE__ */ jsx20(Svg, { width: 20, height: 20, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20(Path, { d: ARROW_PATH, fill: resolvedCtaTextColor }) })
+                /* @__PURE__ */ jsx25(Text2, { allowFontScaling: false, style: [styles.ctaText, { color: resolvedCtaTextColor }], children: ctaText }),
+                /* @__PURE__ */ jsx25(Svg, { width: 20, height: 20, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx25(Path, { d: ARROW_PATH, fill: resolvedCtaTextColor }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx20(View5, { style: [styles.cardOverlay, { borderColor: colors.imageOverlayBorder }] })
+          /* @__PURE__ */ jsx25(View7, { style: [styles.cardOverlay, { borderColor: colors4.imageOverlayBorder }] })
         ] }),
-        adClearanceText ? /* @__PURE__ */ jsx20(Text, { allowFontScaling: false, style: [styles.adClearance, { color: colors.adClearance }], children: adClearanceText }) : null
+        adClearanceText ? /* @__PURE__ */ jsx25(Text2, { allowFontScaling: false, style: [styles.adClearance, { color: colors4.adClearance }], children: adClearanceText }) : null
       ] })
     }
   );
@@ -3392,8 +3587,8 @@ var styles = StyleSheet.create({
 // src/ads/inlineAd/ui/ListBannerAdView.tsx
 import { ClipPath, Defs, Image as SvgImage, Path as Path2, Svg as Svg2 } from "@granite-js/native/react-native-svg";
 import { useRef as useRef7 } from "react";
-import { Animated as Animated2, Easing as Easing2, Pressable as Pressable3, StyleSheet as StyleSheet2, Text as Text2, View as View6 } from "react-native";
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Animated as Animated2, Easing as Easing2, Pressable as Pressable3, StyleSheet as StyleSheet2, Text as Text3, View as View8 } from "react-native";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
 var SQUIRCLE_PATH = "M0 17.352C0 3.564 3.564 0 17.352 0H18.648C32.436 0 36 3.564 36 17.352V18.648C36 32.436 32.436 36 18.648 36H17.352C3.564 36 0 32.436 0 18.648V17.352Z";
 function ListBannerAdView({
   title,
@@ -3402,7 +3597,7 @@ function ListBannerAdView({
   adClearanceFontSize,
   imageUri,
   paddingStyle,
-  colors,
+  colors: colors4,
   onPress
 }) {
   const scale = useRef7(new Animated2.Value(1)).current;
@@ -3421,7 +3616,7 @@ function ListBannerAdView({
   const handlePressOut = () => {
     animateScale(1);
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     Pressable3,
     {
       accessibilityRole: "button",
@@ -3429,9 +3624,9 @@ function ListBannerAdView({
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles2.pressable,
-      children: /* @__PURE__ */ jsxs10(Animated2.View, { style: [styles2.container, paddingStyle, { transform: [{ scale }] }], children: [
-        /* @__PURE__ */ jsxs10(View6, { style: styles2.titleRow, children: [
-          /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsxs12(Animated2.View, { style: [styles2.container, paddingStyle, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxs12(View8, { style: styles2.titleRow, children: [
+          /* @__PURE__ */ jsx26(
             Pressable3,
             {
               accessibilityRole: "button",
@@ -3439,10 +3634,10 @@ function ListBannerAdView({
               onPressIn: handlePressIn,
               onPressOut: handlePressOut,
               style: styles2.iconWrapper,
-              children: /* @__PURE__ */ jsxs10(Svg2, { width: 36, height: 36, viewBox: "0 0 36 36", children: [
-                /* @__PURE__ */ jsx21(Defs, { children: /* @__PURE__ */ jsx21(ClipPath, { id: clipIdRef.current, children: /* @__PURE__ */ jsx21(Path2, { d: SQUIRCLE_PATH }) }) }),
-                /* @__PURE__ */ jsx21(Path2, { d: SQUIRCLE_PATH, fill: colors.iconBg }),
-                imageUri ? /* @__PURE__ */ jsx21(
+              children: /* @__PURE__ */ jsxs12(Svg2, { width: 36, height: 36, viewBox: "0 0 36 36", children: [
+                /* @__PURE__ */ jsx26(Defs, { children: /* @__PURE__ */ jsx26(ClipPath, { id: clipIdRef.current, children: /* @__PURE__ */ jsx26(Path2, { d: SQUIRCLE_PATH }) }) }),
+                /* @__PURE__ */ jsx26(Path2, { d: SQUIRCLE_PATH, fill: colors4.iconBg }),
+                imageUri ? /* @__PURE__ */ jsx26(
                   SvgImage,
                   {
                     href: { uri: imageUri },
@@ -3452,12 +3647,12 @@ function ListBannerAdView({
                     clipPath: `url(#${clipIdRef.current})`
                   }
                 ) : null,
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx26(
                   Path2,
                   {
                     d: SQUIRCLE_PATH,
                     fill: "none",
-                    stroke: colors.iconBorder,
+                    stroke: colors4.iconBorder,
                     strokeWidth: 2,
                     clipPath: `url(#${clipIdRef.current})`
                   }
@@ -3465,37 +3660,37 @@ function ListBannerAdView({
               ] })
             }
           ),
-          /* @__PURE__ */ jsxs10(View6, { style: styles2.textWrapper, children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs12(View8, { style: styles2.textWrapper, children: [
+            /* @__PURE__ */ jsx26(
               Pressable3,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("101"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ jsx21(Text2, { allowFontScaling: false, style: [styles2.title, { color: colors.title }], children: title })
+                children: /* @__PURE__ */ jsx26(Text3, { allowFontScaling: false, style: [styles2.title, { color: colors4.title }], children: title })
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx26(
               Pressable3,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("102"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ jsx21(Text2, { allowFontScaling: false, style: [styles2.subtitle, { color: colors.subtitle }], children: subtitle })
+                children: /* @__PURE__ */ jsx26(Text3, { allowFontScaling: false, style: [styles2.subtitle, { color: colors4.subtitle }], children: subtitle })
               }
             )
           ] })
         ] }),
-        adClearanceText ? /* @__PURE__ */ jsx21(
-          Text2,
+        adClearanceText ? /* @__PURE__ */ jsx26(
+          Text3,
           {
             allowFontScaling: false,
             style: [
               styles2.adClearance,
               {
-                color: colors.adClearance,
+                color: colors4.adClearance,
                 fontSize: adClearanceFontSize,
                 lineHeight: adClearanceFontSize * 1.2
               }
@@ -3626,7 +3821,7 @@ function buildNoFillPayload(slotId, adGroupId) {
 }
 
 // src/ads/inlineAd/InlineAd.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 var themePalette = {
   light: {
     title: "#4e5968",
@@ -3742,7 +3937,7 @@ function InlineAd(props) {
   const resolvedTheme = selectedTheme === "auto" ? colorScheme === "dark" ? "dark" : "light" : selectedTheme;
   const resolvedTone = tone ?? DEFAULT_INLINE_AD_TONE;
   const resolvedVariant = variant ?? DEFAULT_INLINE_AD_VARIANT;
-  const colors = themePalette[resolvedTheme];
+  const colors4 = themePalette[resolvedTheme];
   const feedColors = feedThemePalette[resolvedTheme];
   const backgroundColor = resolvedTone === "grey" ? resolvedTheme === "dark" ? "#101013" : "#f2f4f7" : resolvedTheme === "dark" ? "#17171c" : "#ffffff";
   callbacksRef.current = {
@@ -3753,7 +3948,7 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   };
-  useEffect13(() => {
+  useEffect14(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
@@ -3763,7 +3958,7 @@ function InlineAd(props) {
       }
     };
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     const normalizedAdGroupId = normalizeAdGroupId(adGroupId);
     const loadAdRequest = () => {
       if (loadingRef.current) {
@@ -3848,7 +4043,7 @@ function InlineAd(props) {
       loadRef.current?.();
     }
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (!ad || hasRenderedRef.current) {
       return;
     }
@@ -3933,28 +4128,28 @@ function InlineAd(props) {
       callbacksRef.current.onAdClicked?.(basePayload);
     }
   };
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(
     ImpressionArea,
     {
       style: styles3.impressionArea,
       onImpressionStart: handleImpression1px,
       areaThreshold: 0,
       UNSAFE__impressFallbackOnMount: Boolean(impressFallbackOnMount),
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx27(
         ImpressionArea,
         {
           onImpressionStart: handleImpression100p,
           areaThreshold: 1,
           UNSAFE__impressFallbackOnMount: Boolean(impressFallbackOnMount),
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx27(
             ImpressionArea,
             {
               onImpressionStart: handleViewableStart,
               onImpressionEnd: handleViewableEnd,
               areaThreshold: 0.5,
               UNSAFE__impressFallbackOnMount: Boolean(impressFallbackOnMount),
-              children: /* @__PURE__ */ jsx22(View7, { style: [styles3.wrapper, resolvedVariant === "card" && styles3.cardWrapper], children: /* @__PURE__ */ jsxs11(View7, { style: [styles3.surface, { backgroundColor }, resolvedVariant === "card" && styles3.cardSurface], children: [
-                isListBanner && listCreative ? /* @__PURE__ */ jsx22(
+              children: /* @__PURE__ */ jsx27(View9, { style: [styles3.wrapper, resolvedVariant === "card" && styles3.cardWrapper], children: /* @__PURE__ */ jsxs13(View9, { style: [styles3.surface, { backgroundColor }, resolvedVariant === "card" && styles3.cardSurface], children: [
+                isListBanner && listCreative ? /* @__PURE__ */ jsx27(
                   ListBannerAdView,
                   {
                     title: listCreative.title,
@@ -3963,11 +4158,11 @@ function InlineAd(props) {
                     adClearanceFontSize,
                     imageUri,
                     paddingStyle,
-                    colors,
+                    colors: colors4,
                     onPress: handleClick
                   }
                 ) : null,
-                isFeedBanner && feedCreative ? /* @__PURE__ */ jsx22(
+                isFeedBanner && feedCreative ? /* @__PURE__ */ jsx27(
                   FeedBannerAdView,
                   {
                     brandName: feedCreative.brandName,