@apps-in-toss/framework 2.7.1 → 2.9.0

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(src_exports, {
   AppsInToss: () => AppsInToss,
   INTERNAL__onVisibilityChangedByTransparentServiceWeb: () => INTERNAL__onVisibilityChangedByTransparentServiceWeb,
   InlineAd: () => InlineAd,
-  OverlayProvider: () => import_private10.OverlayProvider,
+  OverlayProvider: () => import_private5.OverlayProvider,
   StartUpdateLocationPermissionError: () => import_types.StartUpdateLocationPermissionError,
   WebView: () => WebView,
   env: () => env,
@@ -45,7 +45,7 @@ __export(src_exports, {
   showFullScreenAd: () => showFullScreenAd,
   useCreateUserAgent: () => useCreateUserAgent,
   useGeolocation: () => useGeolocation,
-  useOverlay: () => import_private10.useOverlay,
+  useOverlay: () => import_private5.useOverlay,
   useTopNavigation: () => useTopNavigation,
   useWaitForReturnNavigator: () => useWaitForReturnNavigator
 });
@@ -55,9 +55,9 @@ var import_analytics2 = require("@apps-in-toss/analytics");
 // src/core/registerApp.tsx
 var import_analytics = require("@apps-in-toss/analytics");
 var import_native_modules10 = require("@apps-in-toss/native-modules");
-var import_react_native21 = require("@granite-js/react-native");
-var import_tds_react_native9 = require("@toss/tds-react-native");
-var import_react_native22 = require("react-native");
+var import_react_native27 = require("@granite-js/react-native");
+var import_tds_react_native11 = require("@toss/tds-react-native");
+var import_react_native28 = require("react-native");
 
 // src/core/components/AppEvent.tsx
 var import_react_native2 = require("@granite-js/react-native");
@@ -185,8 +185,8 @@ function useNavigationBarContext() {
 
 // src/components/RNAppContainer.tsx
 var import_native_modules9 = require("@apps-in-toss/native-modules");
-var import_react15 = require("react");
-var import_react_native20 = require("react-native");
+var import_react16 = require("react");
+var import_react_native26 = require("react-native");
 
 // src/components/GameInitializer.tsx
 var import_native_modules4 = require("@apps-in-toss/native-modules");
@@ -641,9 +641,6 @@ var overlayStyle = {
   zIndex: Z_INDEX.PROFILE_OVERLAY
 };
 
-// src/components/NavigationBar/RNNavigationBar/Default.tsx
-var import_private5 = require("@toss/tds-react-native/private");
-
 // src/components/NavigationBar/RNNavigationBar/hooks/useHardwareBackPress.ts
 var import_react11 = require("react");
 var import_react_native11 = require("react-native");
@@ -778,7 +775,7 @@ function useNavigationEvent() {
         if (homeEvent.hasSubscriptions()) {
           homeEvent.emit({});
         } else {
-          navigation.navigate("/");
+          navigation.navigate("/", {}, { pop: true });
         }
       },
       handleCloseButtonClick: () => {
@@ -1148,100 +1145,325 @@ function BottomSheetImpressionArea({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
 }
 
-// src/core/utils/toIcon.ts
-function toIcon(source) {
-  return source.startsWith("http") ? { source: { uri: source } } : { name: source };
+// src/components/NavigationBar/TopNavigation/TopNavigation.tsx
+var import_react_native_safe_area_context = require("@granite-js/native/react-native-safe-area-context");
+var import_react_native19 = require("@granite-js/react-native");
+var import_tds_react_native8 = require("@toss/tds-react-native");
+var import_react14 = require("react");
+var import_react_native20 = require("react-native");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function TopNavigation({ left, center, right }) {
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const navigation = (0, import_react_native19.useNavigation)();
+  (0, import_react14.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime10.jsxs)(
+        import_react_native20.View,
+        {
+          style: {
+            width: "100%",
+            backgroundColor: transparent ? void 0 : theme === "light" ? import_tds_react_native8.colors.lightThemeBackground : import_tds_react_native8.colors.darkThemeBackground
+          },
+          pointerEvents: "box-none",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native20.View, { style: { width: "100%", height: insets.top } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              import_react_native20.View,
+              {
+                style: {
+                  width: "100%",
+                  height: 44,
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  paddingLeft: insets.left,
+                  paddingRight: insets.right
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native20.View, { children: left }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    import_react_native20.View,
+                    {
+                      style: {
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center"
+                      },
+                      children: center
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    import_react_native20.View,
+                    {
+                      style: {
+                        flexDirection: "row",
+                        alignItems: "center"
+                      },
+                      children: right
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    });
+  }, [navigation, insets, left, center, right]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+}
+
+// src/components/NavigationBar/TopNavigation/BackButton.tsx
+var import_react_native_svg = require("@granite-js/native/react-native-svg");
+var import_react_native21 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function BackButton({ theme = "light", onPress, ...restProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native21.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__ */ (0, import_jsx_runtime11.jsx)(import_react_native21.View, { style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_native_svg.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
+var import_tds_react_native9 = require("@toss/tds-react-native");
+var import_react_native22 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function HomeButton({ theme = "light", onPress, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react_native22.TouchableOpacity,
+    {
+      onPress,
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        height: 34,
+        paddingLeft: 10,
+        paddingRight: 10,
+        backgroundColor: theme === "light" ? import_tds_react_native9.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)",
+        borderRadius: 99
+      },
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tds_react_native9.Icon, { name: "icon-home-mono", size: 18 })
+      ]
+    }
+  );
+}
+
+// src/components/NavigationBar/TopNavigation/AppTitle.tsx
+var import_react_native23 = require("@granite-js/react-native");
+var import_react_native24 = require("react-native");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function AppTitle({ title, iconUrl, theme = "light" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_react_native24.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6
+      },
+      children: [
+        iconUrl != null && iconUrl !== "" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_native23.Image,
+          {
+            source: { uri: iconUrl },
+            style: {
+              width: 18,
+              height: 18,
+              borderRadius: 6,
+              overflow: "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_native24.Text,
+          {
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            style: {
+              color: theme === "light" ? "#191F28" : "#FFFFFF",
+              fontSize: 16,
+              fontWeight: "600"
+            },
+            children: title
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/NavigationBar/TopNavigation/Menu.tsx
+var import_tds_react_native10 = require("@toss/tds-react-native");
+var import_react_native25 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Menu2({ theme = "light", accessoryButton, onPressDots, onLongPressDots, onPressClose }) {
+  const backgroundColor = theme === "light" ? import_tds_react_native10.colors.greyOpacity50 : "rgba(0, 0, 1, 0.58)";
+  const iconColor = theme === "light" ? import_tds_react_native10.colors.greyOpacity600 : "rgba(253, 253, 255, 0.75)";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native25.View, { style: { flexDirection: "row", alignItems: "center", gap: 4 }, children: [
+    accessoryButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_native25.View,
+      {
+        style: {
+          borderRadius: 99,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_react_native25.TouchableOpacity,
+          {
+            style: {
+              paddingVertical: 7,
+              paddingHorizontal: 12,
+              backgroundColor
+            },
+            onPress: () => {
+              import_tds_react_native10.tdsEvent.emit("navigationAccessoryEvent", { id: accessoryButton.id });
+              accessoryButton.onPress?.();
+            },
+            disabled: accessoryButton.disabled,
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_tds_react_native10.Icon,
+              {
+                name: accessoryButton.icon.name ?? "",
+                accessibilityLabel: accessoryButton.title,
+                color: iconColor,
+                size: 20
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.View, { style: { borderRadius: 99, overflow: "hidden", marginRight: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_react_native25.View,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 12,
+          height: 34,
+          paddingHorizontal: 12,
+          backgroundColor
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.TouchableOpacity, { onPress: onPressDots, onLongPress: onLongPressDots, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native10.Icon, { name: "icon-dots-mono", accessibilityLabel: "\uB354\uBCF4\uAE30", color: iconColor, size: 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_native25.View,
+            {
+              style: {
+                width: 1,
+                height: 16,
+                backgroundColor: theme === "light" ? import_tds_react_native10.colors.greyOpacity200 : "rgba(222, 222, 255, 0.19)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native25.TouchableOpacity, { onPress: onPressClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native10.Icon, { name: "icon-appsintoss-close-mono", accessibilityLabel: "\uB2EB\uAE30", color: iconColor, size: 20 }) })
+        ]
+      }
+    ) })
+  ] });
 }
 
 // src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
-var import_react14 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function NavigationBarImpressionArea({
   children,
   withHomeButton
 }) {
-  const hasLogged = (0, import_react14.useRef)(false);
+  const hasLogged = (0, import_react15.useRef)(false);
   const logging = useNavigationBarLogging();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (hasLogged.current === false) {
       logging.navBarImpression({ home_icon_yn: withHomeButton ? "Y" : "N" });
       hasLogged.current = true;
     }
   }, [logging, withHomeButton]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Default.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime11.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_private5.TopNavigation,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    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__ */ (0, import_jsx_runtime11.jsx)(import_private5.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_private5.NavigationBackButton, { onPress: navigationEvent.handleBack, canGoBack: false }) })
+      left: withBackButton ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BackButton, { theme, onPress: navigationEvent.handleBack }) : null,
+      center: withHomeButton ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HomeButton, { theme, onPress: navigationEvent.handleHomeButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }),
+      right: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Menu2,
+        {
+          theme,
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: navigationEvent.handleCloseButtonClick
+        }
+      )
     }
   ) });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Game.tsx
-var import_react_native_safe_area_context = require("@granite-js/native/react-native-safe-area-context");
-var import_tds_react_native8 = require("@toss/tds-react-native");
-var import_private6 = require("@toss/tds-react-native/private");
-var import_react_native19 = require("react-native");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function GameNavigationBar() {
-  const safeAreaTop = (0, import_private6.useSafeAreaTop)();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const navigationEvent = useNavigationEvent();
   const { navigationRightButton } = useNavigationBarContext();
-  const { right: safeAreaRight } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
   useHardwareBackPress(navigationEvent.handleBack);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tds_react_native8.PageNavbar, { preference: { type: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native19.View,
-      {
-        style: {
-          width: "100%",
-          // TODO: UI관련 스타일 설정은 TDS로 이관
-          height: import_react_native19.Platform.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__ */ (0, import_jsx_runtime12.jsx)(
-          import_private6.NavigationRightContent,
-          {
-            fixedRightButton: navigationRightButton,
-            onPressDots: openMoreButtonBottomSheet,
-            onPressClose: navigationEvent.handleCloseButtonClick,
-            theme: "dark"
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    TopNavigation,
+    {
+      right: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Menu2,
+        {
+          theme: parsedNavigationBar?.theme ?? "dark",
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: navigationEvent.handleCloseButtonClick
+        }
+      )
+    }
+  );
 }
 
 // src/components/NavigationBar/RNNavigationBar/index.tsx
@@ -1257,20 +1479,20 @@ __reExport(bridge_entry_exports, require("@apps-in-toss/native-modules/constant-
 __reExport(bridge_entry_exports, require("@apps-in-toss/native-modules/event-bridges"));
 
 // src/components/RNAppContainer.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function RNAppContainer({ children }) {
   const global2 = getAppsInTossGlobals();
   switch (global2.appType) {
     case "game":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GameAppContainer, { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GameAppContainer, { children });
     case "general":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GeneralAppContainer, { children });
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GeneralAppContainer, { children });
   }
 }
 function GameAppContainer({ children }) {
-  (0, import_react15.useEffect)(() => {
-    if (import_react_native20.Platform.OS === "ios") {
+  (0, import_react16.useEffect)(() => {
+    if (import_react_native26.Platform.OS === "ios") {
       (0, import_native_modules9.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
         (0, import_native_modules9.setIosSwipeGestureEnabled)({ isEnabled: true });
@@ -1278,44 +1500,44 @@ function GameAppContainer({ children }) {
     }
     return;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RNNavigationBar.Game, {}),
-    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GameInitializer, { children }) : children
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RNNavigationBar.Game, {}),
+    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GameInitializer, { children }) : children
   ] });
 }
 function GeneralAppContainer({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RNNavigationBar.Default, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RNNavigationBar.Default, {}),
     children
   ] });
 }
 
 // src/core/registerApp.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function AppsInTossContainer(Container, { children, ...initialProps }) {
   if (!(0, import_native_modules10.isMinVersionSupported)({
     android: "5.220.0",
     ios: "5.221.0"
   })) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AppEvent.System, { ...initialProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AppUpdate, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppEvent.System, { ...initialProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppUpdate, {})
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tds_react_native9.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AppEvent.System, { ...initialProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Container, { ...initialProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tds_react_native11.TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children }) })
   ] });
 }
 function registerApp(container, { context, analytics }) {
   const appName = getAppName();
-  const isRegistered = import_react_native22.AppRegistry.getAppKeys().includes(appName);
+  const isRegistered = import_react_native28.AppRegistry.getAppKeys().includes(appName);
   if (!isRegistered) {
     import_analytics.Analytics.init({
       logger: (params) => void (0, import_native_modules10.eventLog)(params),
       debug: analytics?.debug ?? __DEV__
     });
-    const App = import_react_native21.Granite.registerApp(AppsInTossContainer.bind(null, container), {
+    const App = import_react_native27.Granite.registerApp(AppsInTossContainer.bind(null, container), {
       appName,
       context,
       initialScheme: (0, import_native_modules10.getSchemeUri)(),
@@ -1323,7 +1545,8 @@ function registerApp(container, { context, analytics }) {
       router: {
         screenContainer: AppsInTossScreenContainer,
         defaultScreenOption: {
-          statusBarStyle: "dark"
+          statusBarStyle: "dark",
+          header: () => null
         }
       }
     });
@@ -1333,7 +1556,7 @@ function registerApp(container, { context, analytics }) {
 }
 function AppsInTossScreenContainer({ children }) {
   const isRNApp = getAppsInTossGlobals().webViewType == null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavigationBarContextProvider, { children: isRNApp ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NavigationBarContextProvider, { children: isRNApp ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_analytics.Analytics.Screen,
     {
       onLog: (params) => sendLog(
@@ -1343,13 +1566,13 @@ function AppsInTossScreenContainer({ children }) {
           params: {
             ...params.params,
             schema_id: 5175906,
-            app_name: import_react_native21.Granite.appName,
+            app_name: import_react_native27.Granite.appName,
             log_name: params.log_name
           }
         },
         { pipelines: ["core"] }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RNAppContainer, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RNAppContainer, { children })
     }
   ) : children });
 }
@@ -1373,77 +1596,55 @@ var appsInTossAsyncBridges = __toESM(require("@apps-in-toss/native-modules/async
 var appsInTossConstantBridges = __toESM(require("@apps-in-toss/native-modules/constant-bridges"), 1);
 var appsInTossEventBridges = __toESM(require("@apps-in-toss/native-modules/event-bridges"), 1);
 var import_user_scripts = require("@apps-in-toss/user-scripts");
-var import_react_native_safe_area_context4 = require("@granite-js/native/react-native-safe-area-context");
-var import_react_native36 = require("@granite-js/react-native");
-var import_tds_react_native12 = require("@toss/tds-react-native");
-var import_private9 = require("@toss/tds-react-native/private");
-var import_react26 = require("react");
-var import_react_native37 = require("react-native");
+var import_react_native_safe_area_context3 = require("@granite-js/native/react-native-safe-area-context");
+var import_react_native41 = require("@granite-js/react-native");
+var import_tds_react_native14 = require("@toss/tds-react-native");
+var import_react27 = require("react");
+var import_react_native42 = require("react-native");
 
 // src/components/GameWebView.tsx
 var import_native_modules11 = require("@apps-in-toss/native-modules");
 var import_react_native_webview = require("@granite-js/native/react-native-webview");
-var import_react17 = require("react");
-var import_react_native25 = require("react-native");
+var import_react18 = require("react");
+var import_react_native30 = require("react-native");
 
 // src/components/NavigationBar/GameWebviewNavigationBar.tsx
-var import_react_native_safe_area_context2 = require("@granite-js/native/react-native-safe-area-context");
-var import_react_native23 = require("@granite-js/react-native");
-var import_tds_react_native10 = require("@toss/tds-react-native");
-var import_private7 = require("@toss/tds-react-native/private");
-var import_react16 = require("react");
-var import_react_native24 = require("react-native");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react_native29 = require("@granite-js/react-native");
+var import_tds_react_native12 = require("@toss/tds-react-native");
+var import_react17 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function GameWebviewNavigationBar() {
-  const safeAreaTop = (0, import_private7.useSafeAreaTop)();
-  const { openConfirm } = (0, import_tds_react_native10.useDialog)();
+  const { openConfirm } = (0, import_tds_react_native12.useDialog)();
   const logging = useNavigationBarLogging();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const { navigationRightButton } = useNavigationBarContext();
-  const { right: safeAreaRight } = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const handleGameWebviewClose = (0, import_react16.useCallback)(async () => {
+  const { navigationBar } = getAppsInTossGlobals();
+  const parsedNavigationBar = navigationBar ? safeParseNavigationBar(navigationBar) : null;
+  const handleGameWebviewClose = (0, import_react17.useCallback)(async () => {
     logging.closeButtonClick();
-    (0, import_react_native23.closeView)();
+    (0, import_react_native29.closeView)();
   }, [logging, openConfirm]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tds_react_native10.PageNavbar, { preference: { type: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native24.View,
-      {
-        style: {
-          width: "100%",
-          // TODO: UI관련 스타일 설정은 TDS로 이관
-          height: import_react_native24.Platform.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__ */ (0, import_jsx_runtime15.jsx)(
-          import_private7.NavigationRightContent,
-          {
-            fixedRightButton: navigationRightButton,
-            onPressDots: openMoreButtonBottomSheet,
-            onPressClose: () => {
-              handleGameWebviewClose();
-            },
-            theme: "dark"
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    TopNavigation,
+    {
+      right: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        Menu2,
+        {
+          theme: parsedNavigationBar?.theme ?? "dark",
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: handleGameWebviewClose
+        }
+      )
+    }
+  );
 }
 
 // src/components/GameWebView.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var GameWebView = (0, import_react17.forwardRef)(function GameWebView2(props, ref) {
-  (0, import_react17.useEffect)(() => {
-    if (import_react_native25.Platform.OS === "ios") {
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var GameWebView = (0, import_react18.forwardRef)(function GameWebView2(props, ref) {
+  (0, import_react18.useEffect)(() => {
+    if (import_react_native30.Platform.OS === "ios") {
       (0, import_native_modules11.setIosSwipeGestureEnabled)({ isEnabled: false });
       return () => {
         (0, import_native_modules11.setIosSwipeGestureEnabled)({ isEnabled: true });
@@ -1451,21 +1652,20 @@ var GameWebView = (0, import_react17.forwardRef)(function GameWebView2(props, re
     }
     return;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GameWebviewNavigationBar, {}),
-    (0, import_native_modules11.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GameInitializer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_webview.WebView, { ref, ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_webview.WebView, { ref, ...props })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GameWebviewNavigationBar, {}),
+    (0, import_native_modules11.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GameInitializer, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_webview.WebView, { ref, ...props }) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_webview.WebView, { ref, ...props })
   ] });
 });
 
 // src/components/PartnerWebView.tsx
 var import_react_native_webview2 = require("@granite-js/native/react-native-webview");
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/NavigationBar/PartnerWebviewNavigationBar.tsx
-var import_react_native26 = require("@granite-js/react-native");
-var import_private8 = require("@toss/tds-react-native/private");
-var import_react18 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_native31 = require("@granite-js/react-native");
+var import_react19 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const globals = getAppsInTossGlobals();
   const logging = useNavigationBarLogging();
@@ -1473,34 +1673,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 = (0, import_react18.useCallback)(async () => {
+  const handleClose = (0, import_react19.useCallback)(async () => {
     logging.closeButtonClick();
-    (0, import_react_native26.closeView)();
+    (0, import_react_native31.closeView)();
   }, [logging]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_private8.TopNavigation,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    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__ */ (0, import_jsx_runtime17.jsx)(import_private8.NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_private8.NavigationBackButton, { onPress: onBackButtonClick, canGoBack: false }) })
+      left: withBackButton ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BackButton, { theme, onPress: onBackButtonClick }) : null,
+      center: withHomeButton ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HomeButton, { theme, onPress: onHomeButtonClick, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppTitle, { theme, title: globals.brandDisplayName, iconUrl: globals.brandIcon }),
+      right: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Menu2,
+        {
+          theme,
+          accessoryButton: navigationRightButton,
+          onPressDots: openMoreButtonBottomSheet,
+          onPressClose: handleClose
+        }
+      )
     }
   ) });
 }
 
 // src/components/PartnerWebView.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var PartnerWebView = (0, import_react19.forwardRef)(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_webview2.WebView, { ref, ...webViewProps, style: { flex: 1 } })
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var PartnerWebView = (0, import_react20.forwardRef)(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_webview2.WebView, { ref, ...webViewProps, style: { flex: 1 } })
   ] });
 });
 
@@ -1603,10 +1805,10 @@ function generateRequestId() {
 }
 
 // src/ads/getReferrer.ts
-var import_react_native27 = require("@granite-js/react-native");
+var import_react_native32 = require("@granite-js/react-native");
 function getReferrer() {
   try {
-    return new URL((0, import_react_native27.getSchemeUri)()).searchParams.get("referrer");
+    return new URL((0, import_react_native32.getSchemeUri)()).searchParams.get("referrer");
   } catch {
     return null;
   }
@@ -1616,10 +1818,10 @@ function getReferrer() {
 var import_native_modules13 = require("@apps-in-toss/native-modules");
 
 // src/ads/getIsDev.ts
-var import_react_native28 = require("@granite-js/react-native");
+var import_react_native33 = require("@granite-js/react-native");
 function getIsDev() {
   try {
-    return new URL((0, import_react_native28.getSchemeUri)()).searchParams.get("isDev") === "true";
+    return new URL((0, import_react_native33.getSchemeUri)()).searchParams.get("isDev") === "true";
   } catch {
     return false;
   }
@@ -1906,10 +2108,10 @@ function showFullScreenAd(params) {
 showFullScreenAd.isSupported = import_native_modules14.GoogleAdMob.showAppsInTossAdMob.isSupported;
 
 // src/ads/tossAdEventLog.ts
-var import_react_native29 = require("@granite-js/react-native");
+var import_react_native34 = require("@granite-js/react-native");
 async function tossAdEventLog(params) {
   const referrer = getReferrer();
-  const appName = import_react_native29.Granite.appName;
+  const appName = import_react_native34.Granite.appName;
   const eventLogParams = {
     ...params,
     params: {
@@ -1922,7 +2124,7 @@ async function tossAdEventLog(params) {
 }
 
 // src/bridge-handler/useBridgeHandler.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -1974,8 +2176,8 @@ function useBridgeHandler({
   asyncHandlerMap,
   eventListenerMap
 }) {
-  const ref = (0, import_react20.useRef)(null);
-  const injectedJavaScript = (0, import_react20.useMemo)(
+  const ref = (0, import_react21.useRef)(null);
+  const injectedJavaScript = (0, import_react21.useMemo)(
     () => `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
       Object.entries(constantHandlerMap).reduce(
         (acc, [key, value]) => {
@@ -1987,7 +2189,7 @@ function useBridgeHandler({
     )};`,
     [constantHandlerMap]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     ref.current?.injectJavaScript(injectedJavaScript);
   }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
@@ -2001,7 +2203,7 @@ function useBridgeHandler({
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onError/${eventId}', ${serializedError});
     `);
   };
-  const $onMessage = (0, import_react20.useCallback)(
+  const $onMessage = (0, import_react21.useCallback)(
     async (e) => {
       onMessage?.(e);
       const data = parseNativeEventData(e.nativeEvent.data);
@@ -2060,25 +2262,25 @@ function parseNativeEventData(data) {
 }
 
 // src/core/hooks/useSafeAreaInsetsEvent.tsx
-var import_react_native_safe_area_context3 = require("@granite-js/native/react-native-safe-area-context");
-var import_react21 = require("react");
+var import_react_native_safe_area_context2 = require("@granite-js/native/react-native-safe-area-context");
+var import_react22 = require("react");
 function useSafeAreaInsetsEvent() {
-  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  (0, import_react21.useEffect)(() => {
+  const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
+  (0, import_react22.useEffect)(() => {
     safeAreaInsetsChange.emit(insets);
   }, [insets]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     return () => safeAreaInsetsChange.clearSubscriptions();
   }, []);
   return safeAreaInsetsChange;
 }
 
 // src/core/hooks/useWebBackHandler.tsx
-var import_react_native30 = require("@granite-js/react-native");
-var import_react23 = require("react");
+var import_react_native35 = require("@granite-js/react-native");
+var import_react24 = require("react");
 
 // src/hooks/useWebviewHistoryStack.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -2109,11 +2311,11 @@ function reducer(state, action) {
   }
 }
 function useWebViewHistory() {
-  const [state, dispatch] = (0, import_react22.useReducer)(reducer, INITIAL_STATE);
-  const onNavigationStateChange = (0, import_react22.useCallback)(({ url, canGoForward: canGoForward2 }) => {
+  const [state, dispatch] = (0, import_react23.useReducer)(reducer, INITIAL_STATE);
+  const onNavigationStateChange = (0, import_react23.useCallback)(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
-  const { canGoBack, canGoForward } = (0, import_react22.useMemo)(() => {
+  const { canGoBack, canGoForward } = (0, import_react23.useMemo)(() => {
     const canBack = state.index > 0;
     const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
     return { canGoBack: canBack, canGoForward: canFwd };
@@ -2129,21 +2331,21 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     hasBackEvent: hasWebBackEvent,
     addEventListener: addWebBackEventListener,
     removeEventListener: removeWebBackEventListener
-  } = (0, import_react_native30.useBackEventState)();
+  } = (0, import_react_native35.useBackEventState)();
   const logging = useNavigationBarLogging();
-  const addEventListener = (0, import_react23.useCallback)(
+  const addEventListener = (0, import_react24.useCallback)(
     (handler) => {
       addWebBackEventListener(handler);
     },
     [addWebBackEventListener]
   );
-  const removeEventListener = (0, import_react23.useCallback)(
+  const removeEventListener = (0, import_react24.useCallback)(
     (handler) => {
       removeWebBackEventListener(handler);
     },
     [removeWebBackEventListener]
   );
-  const handleWebBack = (0, import_react23.useCallback)(async () => {
+  const handleWebBack = (0, import_react24.useCallback)(async () => {
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
         handler();
@@ -2153,10 +2355,10 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     if (hasHistory) {
       webViewRef.current?.injectJavaScript("window.history.back();");
     } else {
-      (0, import_react_native30.closeView)();
+      (0, import_react_native35.closeView)();
     }
   }, [hasHistory, hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  const handleWebHome = (0, import_react23.useCallback)(() => {
+  const handleWebHome = (0, import_react24.useCallback)(() => {
     logging.homeButtonClick();
     if (homeEvent.hasSubscriptions()) {
       homeEvent.emit({});
@@ -2169,7 +2371,7 @@ function useWebBackHandler(webViewInitialURL, webViewRef) {
     })();
     `);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewInitialURL, webViewRef]);
-  return (0, import_react23.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -2190,7 +2392,7 @@ function mergeRefs(...refs) {
 
 // src/hooks/useCreateUserAgent.ts
 var import_native_modules15 = require("@apps-in-toss/native-modules");
-var import_react_native31 = require("react-native");
+var import_react_native36 = require("react-native");
 var FontA11yCategory = {
   Large: "Large",
   xLarge: "xLarge",
@@ -2325,7 +2527,7 @@ function useCreateUserAgent({
 }) {
   const platform = (0, import_native_modules15.getPlatformOS)();
   const appVersion = (0, import_native_modules15.getTossAppVersion)();
-  const { fontScale } = (0, import_react_native31.useWindowDimensions)();
+  const { fontScale } = (0, import_react_native36.useWindowDimensions)();
   const platformString = platform === "ios" ? "iPhone" : "Android phone";
   const fontA11y = mapFontScaleToCategory(fontScale, platform);
   const normalizedFontScale = convertToAndroidStyleScale(fontScale, platform);
@@ -2347,12 +2549,12 @@ function useCreateUserAgent({
 
 // src/hooks/useGeolocation.ts
 var import_native_modules16 = require("@apps-in-toss/native-modules");
-var import_react_native32 = require("@granite-js/react-native");
-var import_react24 = require("react");
+var import_react_native37 = require("@granite-js/react-native");
+var import_react25 = require("react");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
-  const isVisible = (0, import_react_native32.useVisibility)();
-  const [location, setLocation] = (0, import_react24.useState)(null);
-  (0, import_react24.useEffect)(() => {
+  const isVisible = (0, import_react_native37.useVisibility)();
+  const [location, setLocation] = (0, import_react25.useState)(null);
+  (0, import_react25.useEffect)(() => {
     if (!isVisible) {
       return;
     }
@@ -2370,12 +2572,12 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 }
 
 // src/hooks/useWaitForReturnNavigator.tsx
-var import_react_native33 = require("@granite-js/react-native");
-var import_react25 = require("react");
+var import_react_native38 = require("@granite-js/react-native");
+var import_react26 = require("react");
 function useWaitForReturnNavigator() {
-  const callbacks = (0, import_react25.useRef)([]).current;
-  const navigation = (0, import_react_native33.useNavigation)();
-  const startNavigating = (0, import_react25.useCallback)(
+  const callbacks = (0, import_react26.useRef)([]).current;
+  const navigation = (0, import_react_native38.useNavigation)();
+  const startNavigating = (0, import_react26.useCallback)(
     (route, params) => {
       return new Promise((resolve) => {
         callbacks.push(resolve);
@@ -2384,7 +2586,7 @@ function useWaitForReturnNavigator() {
     },
     [callbacks, navigation]
   );
-  const handleVisibilityChange = (0, import_react25.useCallback)(
+  const handleVisibilityChange = (0, import_react26.useCallback)(
     (state) => {
       if (state === "visible" && callbacks.length > 0) {
         for (const callback of callbacks) {
@@ -2395,7 +2597,7 @@ function useWaitForReturnNavigator() {
     },
     [callbacks]
   );
-  (0, import_react_native33.useVisibilityChange)(handleVisibilityChange);
+  (0, import_react_native38.useVisibilityChange)(handleVisibilityChange);
   return startNavigating;
 }
 
@@ -2410,10 +2612,10 @@ function useTopNavigation() {
 
 // src/hooks/useWebViewMemoryDebug.tsx
 var import_native_modules17 = require("@apps-in-toss/native-modules");
-var import_react_native34 = require("@granite-js/react-native");
-var import_tds_react_native11 = require("@toss/tds-react-native");
+var import_react_native39 = require("@granite-js/react-native");
+var import_tds_react_native13 = require("@toss/tds-react-native");
 function useHandleWebViewProcessDidTerminate(webViewRef) {
-  const toast = (0, import_tds_react_native11.useToast)();
+  const toast = (0, import_tds_react_native13.useToast)();
   return () => {
     webViewDebugLog("AppsInTossWebViewProcessDidTerminate", {});
     toast.open("\uBB38\uC81C\uAC00 \uC0DD\uACA8\uC11C \uBBF8\uB2C8\uC571\uC744 \uB2E4\uC2DC \uC2DC\uC791\uD588\uC5B4\uC694.", {
@@ -2433,7 +2635,7 @@ function webViewDebugLog(logName, params) {
     log_type: "debug",
     params: {
       ...params,
-      app_name: import_react_native34.Granite.appName,
+      app_name: import_react_native39.Granite.appName,
       deployment_id: global2.deploymentId
     }
   };
@@ -2445,7 +2647,7 @@ function webViewDebugLog(logName, params) {
 }
 
 // src/utils/log.ts
-var import_react_native35 = require("@granite-js/react-native");
+var import_react_native40 = require("@granite-js/react-native");
 
 // src/utils/extractDateFromUUIDv7.ts
 var extractDateFromUUIDv7 = (uuid) => {
@@ -2471,7 +2673,7 @@ var getGroupId = (url) => {
 };
 var getReferrer2 = () => {
   try {
-    const referrer = new URL((0, import_react_native35.getSchemeUri)());
+    const referrer = new URL((0, import_react_native40.getSchemeUri)());
     return referrer.searchParams.get("referrer");
   } catch {
     return "";
@@ -2485,7 +2687,7 @@ var trackScreen = (url, title) => {
     search,
     referrer: getReferrer2(),
     document_title: title,
-    app_name: import_react_native35.Granite.appName,
+    app_name: import_react_native40.Granite.appName,
     deployment_id: env.getDeploymentId(),
     deployment_timestamp: extractDateFromUUIDv7(env.getDeploymentId()).getTime()
   };
@@ -2512,17 +2714,17 @@ var trackScreen = (url, title) => {
 };
 
 // src/components/WebView.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
   partner: PartnerWebView,
-  external: import_tds_react_native12.ExternalWebViewScreen,
+  external: import_tds_react_native14.ExternalWebViewScreen,
   game: GameWebView
 };
 function mergeSchemeQueryParamsInto(url) {
   const baseUrl = new URL(url);
-  const schemeUrl = new URL((0, import_react_native36.getSchemeUri)());
+  const schemeUrl = new URL((0, import_react_native41.getSchemeUri)());
   const resultUrl = new URL(schemeUrl.pathname, baseUrl.origin);
   for (const [key, value] of baseUrl.searchParams.entries()) {
     resultUrl.searchParams.set(key, value);
@@ -2549,23 +2751,21 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
-  const webViewRef = (0, import_react26.useRef)(null);
-  const url = (0, import_react26.useMemo)(() => getWebViewURL(local), [local]);
+  const webViewRef = (0, import_react27.useRef)(null);
+  const url = (0, import_react27.useMemo)(() => getWebViewURL(local), [local]);
   const webBackHandler = useWebBackHandler(url, webViewRef);
-  const top = (0, import_private9.useSafeAreaTop)();
-  const bottom = (0, import_private9.useSafeAreaBottom)();
-  const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const global2 = getAppsInTossGlobals();
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const navigationBarContext = useNavigationBarContext();
   const safeAreaInsetsEvent = useSafeAreaInsetsEvent();
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react26.useState)(
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react27.useState)(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
     onMessage,
     eventListenerMap: {
       ...appsInTossEventBridges,
-      navigationAccessoryEvent: ({ onEvent, onError }) => import_tds_react_native12.tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
+      navigationAccessoryEvent: ({ onEvent, onError }) => import_tds_react_native14.tdsEvent.addEventListener("navigationAccessoryEvent", { onEvent, onError }),
       backEvent: ({ onEvent }) => {
         webBackHandler.addEventListener(onEvent);
         return () => {
@@ -2593,12 +2793,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: import_native_modules18.getServerTime.isSupported,
       requestReview_isSupported: import_native_modules18.requestReview.isSupported,
@@ -2659,7 +2854,7 @@ function WebView({ type, local, onMessage, ...props }) {
       }
     }
   });
-  const headerPropForExternalWebView = (0, import_react26.useMemo)(() => {
+  const headerPropForExternalWebView = (0, import_react27.useMemo)(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -2680,16 +2875,16 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
     };
-    const subscription = import_react_native37.BackHandler.addEventListener("hardwareBackPress", callback);
+    const subscription = import_react_native42.BackHandler.addEventListener("hardwareBackPress", callback);
     return () => subscription.remove();
   }, [webBackHandler]);
   const handleWebViewProcessDidTerminate = useHandleWebViewProcessDidTerminate(webViewRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     BaseWebView,
     {
       ref: refs,
@@ -2712,14 +2907,14 @@ function WebView({ type, local, onMessage, ...props }) {
         webBackHandler.onNavigationStateChange(event);
       },
       textZoom: 100,
-      userAgent: import_react_native37.Platform.OS === "ios" ? userAgent : void 0,
+      userAgent: import_react_native42.Platform.OS === "ios" ? userAgent : void 0,
       sharedCookiesEnabled: true,
       webviewDebuggingEnabled: webViewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
       onMessage: handler.onMessage,
       injectedJavaScript: import_user_scripts.afterDocumentLoad,
       injectedJavaScriptBeforeContentLoaded: [handler.injectedJavaScript, import_user_scripts.beforeDocumentLoad].join("\n"),
-      decelerationRate: import_react_native37.Platform.OS === "ios" ? 1 : void 0,
+      decelerationRate: import_react_native42.Platform.OS === "ios" ? 1 : void 0,
       allowsBackForwardNavigationGestures,
       onShouldStartLoadWithRequest: (event) => {
         try {
@@ -2727,7 +2922,7 @@ function WebView({ type, local, onMessage, ...props }) {
           if (["https:", "http:"].includes(url2.protocol) || url2.href === "about:blank") {
             return true;
           } else {
-            import_react_native37.Linking.openURL(convertIntentURL(url2) ?? url2.href);
+            import_react_native42.Linking.openURL(convertIntentURL(url2) ?? url2.href);
             return false;
           }
         } catch (error) {
@@ -2752,15 +2947,15 @@ function WebView({ type, local, onMessage, ...props }) {
 
 // src/index.ts
 __reExport(src_exports, require("@apps-in-toss/analytics"), module.exports);
-var import_private10 = require("@toss/tds-react-native/private");
+var import_private5 = require("@toss/tds-react-native/private");
 __reExport(src_exports, require("@apps-in-toss/native-modules"), module.exports);
 __reExport(src_exports, require("@apps-in-toss/types"), module.exports);
 var import_types = require("@apps-in-toss/types");
 
 // src/ads/inlineAd/InlineAd.tsx
-var import_react_native41 = require("@granite-js/react-native");
-var import_react29 = require("react");
-var import_react_native42 = require("react-native");
+var import_react_native46 = require("@granite-js/react-native");
+var import_react30 = require("react");
+var import_react_native47 = require("react-native");
 
 // src/ads/inlineAd/constants.ts
 var SDK_ID = "106";
@@ -3022,7 +3217,7 @@ async function loadAd(adGroupId) {
 }
 
 // src/ads/inlineAd/opener.ts
-var import_react_native38 = require("@granite-js/react-native");
+var import_react_native43 = require("@granite-js/react-native");
 function isSafeUrl(url) {
   try {
     const parsed = new URL(url);
@@ -3054,7 +3249,7 @@ function openLandingUrl(url) {
     return;
   }
   try {
-    (0, import_react_native38.openURL)(getWebSchemeOrUri(url));
+    (0, import_react_native43.openURL)(getWebSchemeOrUri(url));
   } catch (error) {
     console.error("[InlineAd] Failed to open landing URL:", error);
   }
@@ -3140,10 +3335,10 @@ var EventTracker = class {
 };
 
 // src/ads/inlineAd/ui/FeedBannerAdView.tsx
-var import_react_native_svg = require("@granite-js/native/react-native-svg");
-var import_react27 = require("react");
-var import_react_native39 = require("react-native");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react_native_svg2 = require("@granite-js/native/react-native-svg");
+var import_react28 = require("react");
+var import_react_native44 = require("react-native");
+var import_jsx_runtime25 = require("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,
@@ -3155,17 +3350,17 @@ function FeedBannerAdView({
   ctaTextColor,
   ctaBackgroundColor,
   adClearanceText,
-  colors,
+  colors: colors4,
   isAdBadgeEnabled,
   paddingStyle,
   onPress
 }) {
-  const scale = (0, import_react27.useRef)(new import_react_native39.Animated.Value(1)).current;
+  const scale = (0, import_react28.useRef)(new import_react_native44.Animated.Value(1)).current;
   const animateScale = (toValue) => {
-    import_react_native39.Animated.timing(scale, {
+    import_react_native44.Animated.timing(scale, {
       toValue,
       duration: 100,
-      easing: import_react_native39.Easing.inOut(import_react_native39.Easing.ease),
+      easing: import_react_native44.Easing.inOut(import_react_native44.Easing.ease),
       useNativeDriver: true
     }).start();
   };
@@ -3177,90 +3372,90 @@ function FeedBannerAdView({
   };
   const resolvedCtaBackground = ctaBackgroundColor ?? "#3081F9";
   const resolvedCtaTextColor = ctaTextColor ?? "#ffffff";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react_native39.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react_native44.Pressable,
     {
       accessibilityRole: "button",
       onPress: () => onPress(null),
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles.pressable,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.Animated.View, { style: [styles.container, paddingStyle, { transform: [{ scale }] }], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.View, { style: styles.profileContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.View, { style: styles.brandArea, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react_native39.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.Animated.View, { style: [styles.container, paddingStyle, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.View, { style: styles.profileContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.View, { style: styles.brandArea, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_react_native44.Pressable,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("202"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
                 style: styles.logoContainer,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.View, { style: [styles.logoWrapper, { backgroundColor: colors.brandLogoBg }], children: [
-                  brandLogoUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Image, { source: { uri: brandLogoUri }, style: styles.logoImage, resizeMode: "cover" }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.View, { style: [styles.logoOverlay, { borderColor: colors.brandLogoBorder }] })
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.View, { style: [styles.logoWrapper, { backgroundColor: colors4.brandLogoBg }], children: [
+                  brandLogoUri ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Image, { source: { uri: brandLogoUri }, style: styles.logoImage, resizeMode: "cover" }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.View, { style: [styles.logoOverlay, { borderColor: colors4.brandLogoBorder }] })
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.View, { style: styles.brandTextContainer, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react_native39.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.View, { style: styles.brandTextContainer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_react_native44.Pressable,
                 {
                   accessibilityRole: "button",
                   onPress: () => onPress("103"),
                   onPressIn: handlePressIn,
                   onPressOut: handlePressOut,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react_native39.Text,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    import_react_native44.Text,
                     {
                       allowFontScaling: false,
                       numberOfLines: 1,
-                      style: [styles.brandName, { color: colors.brandName }],
+                      style: [styles.brandName, { color: colors4.brandName }],
                       children: brandName
                     }
                   )
                 }
               ),
-              isAdBadgeEnabled ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Text, { allowFontScaling: false, numberOfLines: 1, style: [styles.adBadge, { color: colors.adBadge }], children: "\uAD11\uACE0" }) : null
+              isAdBadgeEnabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Text, { allowFontScaling: false, numberOfLines: 1, style: [styles.adBadge, { color: colors4.adBadge }], children: "\uAD11\uACE0" }) : null
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.View, { style: styles.textArea, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react_native39.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.View, { style: styles.textArea, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_react_native44.Pressable,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("101"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Text, { allowFontScaling: false, style: [styles.title, { color: colors.title }], children: title })
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Text, { allowFontScaling: false, style: [styles.title, { color: colors4.title }], children: title })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react_native39.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_react_native44.Pressable,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("102"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Text, { allowFontScaling: false, style: [styles.subtitle, { color: colors.subtitle }], children: subtitle })
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Text, { allowFontScaling: false, style: [styles.subtitle, { color: colors4.subtitle }], children: subtitle })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native39.View, { style: styles.card, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react_native39.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native44.View, { style: styles.card, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_react_native44.Pressable,
             {
               accessibilityRole: "button",
               onPress: () => onPress("201"),
               onPressIn: handlePressIn,
               onPressOut: handlePressOut,
               style: styles.imageButton,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.View, { style: styles.imageContainer, children: mainImageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Image, { source: { uri: mainImageUri }, style: styles.mainImage, resizeMode: "cover" }) : null })
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.View, { style: styles.imageContainer, children: mainImageUri ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Image, { source: { uri: mainImageUri }, style: styles.mainImage, resizeMode: "cover" }) : null })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react_native39.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            import_react_native44.Pressable,
             {
               accessibilityRole: "button",
               onPress: () => onPress("0"),
@@ -3268,19 +3463,19 @@ function FeedBannerAdView({
               onPressOut: handlePressOut,
               style: [styles.cta, { backgroundColor: resolvedCtaBackground }],
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Text, { allowFontScaling: false, style: [styles.ctaText, { color: resolvedCtaTextColor }], children: ctaText }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_svg.Svg, { width: 20, height: 20, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_svg.Path, { d: ARROW_PATH, fill: resolvedCtaTextColor }) })
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Text, { allowFontScaling: false, style: [styles.ctaText, { color: resolvedCtaTextColor }], children: ctaText }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg2.Svg, { width: 20, height: 20, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg2.Path, { d: ARROW_PATH, fill: resolvedCtaTextColor }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.View, { style: [styles.cardOverlay, { borderColor: colors.imageOverlayBorder }] })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.View, { style: [styles.cardOverlay, { borderColor: colors4.imageOverlayBorder }] })
         ] }),
-        adClearanceText ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native39.Text, { allowFontScaling: false, style: [styles.adClearance, { color: colors.adClearance }], children: adClearanceText }) : null
+        adClearanceText ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native44.Text, { allowFontScaling: false, style: [styles.adClearance, { color: colors4.adClearance }], children: adClearanceText }) : null
       ] })
     }
   );
 }
-var styles = import_react_native39.StyleSheet.create({
+var styles = import_react_native44.StyleSheet.create({
   pressable: {
     width: "100%"
   },
@@ -3319,7 +3514,7 @@ var styles = import_react_native39.StyleSheet.create({
     borderRadius: 18
   },
   logoOverlay: {
-    ...import_react_native39.StyleSheet.absoluteFillObject,
+    ...import_react_native44.StyleSheet.absoluteFillObject,
     borderWidth: 1,
     borderRadius: 18
   },
@@ -3382,7 +3577,7 @@ var styles = import_react_native39.StyleSheet.create({
     lineHeight: 22.5
   },
   cardOverlay: {
-    ...import_react_native39.StyleSheet.absoluteFillObject,
+    ...import_react_native44.StyleSheet.absoluteFillObject,
     borderWidth: 2,
     borderRadius: 12,
     pointerEvents: "none"
@@ -3395,10 +3590,10 @@ var styles = import_react_native39.StyleSheet.create({
 });
 
 // src/ads/inlineAd/ui/ListBannerAdView.tsx
-var import_react_native_svg2 = require("@granite-js/native/react-native-svg");
-var import_react28 = require("react");
-var import_react_native40 = require("react-native");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react_native_svg3 = require("@granite-js/native/react-native-svg");
+var import_react29 = require("react");
+var import_react_native45 = require("react-native");
+var import_jsx_runtime26 = require("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,
@@ -3407,16 +3602,16 @@ function ListBannerAdView({
   adClearanceFontSize,
   imageUri,
   paddingStyle,
-  colors,
+  colors: colors4,
   onPress
 }) {
-  const scale = (0, import_react28.useRef)(new import_react_native40.Animated.Value(1)).current;
-  const clipIdRef = (0, import_react28.useRef)(`clip-${Math.random().toString(36).slice(2)}`);
+  const scale = (0, import_react29.useRef)(new import_react_native45.Animated.Value(1)).current;
+  const clipIdRef = (0, import_react29.useRef)(`clip-${Math.random().toString(36).slice(2)}`);
   const animateScale = (toValue) => {
-    import_react_native40.Animated.timing(scale, {
+    import_react_native45.Animated.timing(scale, {
       toValue,
       duration: 100,
-      easing: import_react_native40.Easing.inOut(import_react_native40.Easing.ease),
+      easing: import_react_native45.Easing.inOut(import_react_native45.Easing.ease),
       useNativeDriver: true
     }).start();
   };
@@ -3426,29 +3621,29 @@ function ListBannerAdView({
   const handlePressOut = () => {
     animateScale(1);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_native40.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react_native45.Pressable,
     {
       accessibilityRole: "button",
       onPress: () => onPress(null),
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       style: styles2.pressable,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native40.Animated.View, { style: [styles2.container, paddingStyle, { transform: [{ scale }] }], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native40.View, { style: styles2.titleRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react_native40.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native45.Animated.View, { style: [styles2.container, paddingStyle, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native45.View, { style: styles2.titleRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_react_native45.Pressable,
             {
               accessibilityRole: "button",
               onPress: () => onPress("202"),
               onPressIn: handlePressIn,
               onPressOut: handlePressOut,
               style: styles2.iconWrapper,
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native_svg2.Svg, { width: 36, height: 36, viewBox: "0 0 36 36", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_svg2.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_svg2.ClipPath, { id: clipIdRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_svg2.Path, { d: SQUIRCLE_PATH }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_svg2.Path, { d: SQUIRCLE_PATH, fill: colors.iconBg }),
-                imageUri ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  import_react_native_svg2.Image,
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native_svg3.Svg, { width: 36, height: 36, viewBox: "0 0 36 36", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_svg3.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_svg3.ClipPath, { id: clipIdRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_svg3.Path, { d: SQUIRCLE_PATH }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_svg3.Path, { d: SQUIRCLE_PATH, fill: colors4.iconBg }),
+                imageUri ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  import_react_native_svg3.Image,
                   {
                     href: { uri: imageUri },
                     width: 36,
@@ -3457,12 +3652,12 @@ function ListBannerAdView({
                     clipPath: `url(#${clipIdRef.current})`
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  import_react_native_svg2.Path,
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  import_react_native_svg3.Path,
                   {
                     d: SQUIRCLE_PATH,
                     fill: "none",
-                    stroke: colors.iconBorder,
+                    stroke: colors4.iconBorder,
                     strokeWidth: 2,
                     clipPath: `url(#${clipIdRef.current})`
                   }
@@ -3470,37 +3665,37 @@ function ListBannerAdView({
               ] })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native40.View, { style: styles2.textWrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_react_native40.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native45.View, { style: styles2.textWrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_react_native45.Pressable,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("101"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native40.Text, { allowFontScaling: false, style: [styles2.title, { color: colors.title }], children: title })
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native45.Text, { allowFontScaling: false, style: [styles2.title, { color: colors4.title }], children: title })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_react_native40.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_react_native45.Pressable,
               {
                 accessibilityRole: "button",
                 onPress: () => onPress("102"),
                 onPressIn: handlePressIn,
                 onPressOut: handlePressOut,
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native40.Text, { allowFontScaling: false, style: [styles2.subtitle, { color: colors.subtitle }], children: subtitle })
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native45.Text, { allowFontScaling: false, style: [styles2.subtitle, { color: colors4.subtitle }], children: subtitle })
               }
             )
           ] })
         ] }),
-        adClearanceText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_react_native40.Text,
+        adClearanceText ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_react_native45.Text,
           {
             allowFontScaling: false,
             style: [
               styles2.adClearance,
               {
-                color: colors.adClearance,
+                color: colors4.adClearance,
                 fontSize: adClearanceFontSize,
                 lineHeight: adClearanceFontSize * 1.2
               }
@@ -3512,7 +3707,7 @@ function ListBannerAdView({
     }
   );
 }
-var styles2 = import_react_native40.StyleSheet.create({
+var styles2 = import_react_native45.StyleSheet.create({
   pressable: {
     width: "100%"
   },
@@ -3631,7 +3826,7 @@ function buildNoFillPayload(slotId, adGroupId) {
 }
 
 // src/ads/inlineAd/InlineAd.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var themePalette = {
   light: {
     title: "#4e5968",
@@ -3719,21 +3914,21 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   } = props;
-  const slotIdRef = (0, import_react29.useRef)(createSlotId());
-  const [ad, setAd] = (0, import_react29.useState)(null);
-  const [isAdBadgeEnabled, setIsAdBadgeEnabled] = (0, import_react29.useState)(true);
-  const eventTrackerRef = (0, import_react29.useRef)(null);
-  const eventPayloadRef = (0, import_react29.useRef)(null);
-  const hasRenderedRef = (0, import_react29.useRef)(false);
-  const hasLoggedImp1pxRef = (0, import_react29.useRef)(false);
-  const hasLoggedImp100pRef = (0, import_react29.useRef)(false);
-  const hasNotifiedViewableRef = (0, import_react29.useRef)(false);
-  const viewableTimerRef = (0, import_react29.useRef)(null);
-  const refetchIntervalMsRef = (0, import_react29.useRef)(null);
-  const lastImp1pxAtRef = (0, import_react29.useRef)(null);
-  const loadingRef = (0, import_react29.useRef)(false);
-  const loadRef = (0, import_react29.useRef)(null);
-  const callbacksRef = (0, import_react29.useRef)({
+  const slotIdRef = (0, import_react30.useRef)(createSlotId());
+  const [ad, setAd] = (0, import_react30.useState)(null);
+  const [isAdBadgeEnabled, setIsAdBadgeEnabled] = (0, import_react30.useState)(true);
+  const eventTrackerRef = (0, import_react30.useRef)(null);
+  const eventPayloadRef = (0, import_react30.useRef)(null);
+  const hasRenderedRef = (0, import_react30.useRef)(false);
+  const hasLoggedImp1pxRef = (0, import_react30.useRef)(false);
+  const hasLoggedImp100pRef = (0, import_react30.useRef)(false);
+  const hasNotifiedViewableRef = (0, import_react30.useRef)(false);
+  const viewableTimerRef = (0, import_react30.useRef)(null);
+  const refetchIntervalMsRef = (0, import_react30.useRef)(null);
+  const lastImp1pxAtRef = (0, import_react30.useRef)(null);
+  const loadingRef = (0, import_react30.useRef)(false);
+  const loadRef = (0, import_react30.useRef)(null);
+  const callbacksRef = (0, import_react30.useRef)({
     onAdRendered,
     onAdViewable,
     onAdClicked,
@@ -3741,13 +3936,13 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   });
-  const isMountedRef = (0, import_react29.useRef)(false);
-  const colorScheme = (0, import_react_native42.useColorScheme)();
+  const isMountedRef = (0, import_react30.useRef)(false);
+  const colorScheme = (0, import_react_native47.useColorScheme)();
   const selectedTheme = theme ?? DEFAULT_INLINE_AD_THEME;
   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 = {
@@ -3758,7 +3953,7 @@ function InlineAd(props) {
     onAdFailedToRender,
     onNoFill
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
@@ -3768,7 +3963,7 @@ function InlineAd(props) {
       }
     };
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const normalizedAdGroupId = normalizeAdGroupId(adGroupId);
     const loadAdRequest = () => {
       if (loadingRef.current) {
@@ -3840,7 +4035,7 @@ function InlineAd(props) {
       loadRef.current = null;
     };
   }, [adGroupId]);
-  (0, import_react_native41.useVisibilityChange)((documentVisibility) => {
+  (0, import_react_native46.useVisibilityChange)((documentVisibility) => {
     if (documentVisibility !== "visible") {
       return;
     }
@@ -3853,7 +4048,7 @@ function InlineAd(props) {
       loadRef.current?.();
     }
   });
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!ad || hasRenderedRef.current) {
       return;
     }
@@ -3938,28 +4133,28 @@ function InlineAd(props) {
       callbacksRef.current.onAdClicked?.(basePayload);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_react_native41.ImpressionArea,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_native46.ImpressionArea,
     {
       style: styles3.impressionArea,
       onImpressionStart: handleImpression1px,
       areaThreshold: 0,
       UNSAFE__impressFallbackOnMount: Boolean(impressFallbackOnMount),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        import_react_native41.ImpressionArea,
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react_native46.ImpressionArea,
         {
           onImpressionStart: handleImpression100p,
           areaThreshold: 1,
           UNSAFE__impressFallbackOnMount: Boolean(impressFallbackOnMount),
-          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            import_react_native41.ImpressionArea,
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react_native46.ImpressionArea,
             {
               onImpressionStart: handleViewableStart,
               onImpressionEnd: handleViewableEnd,
               areaThreshold: 0.5,
               UNSAFE__impressFallbackOnMount: Boolean(impressFallbackOnMount),
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native42.View, { style: [styles3.wrapper, resolvedVariant === "card" && styles3.cardWrapper], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native42.View, { style: [styles3.surface, { backgroundColor }, resolvedVariant === "card" && styles3.cardSurface], children: [
-                isListBanner && listCreative ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native47.View, { style: [styles3.wrapper, resolvedVariant === "card" && styles3.cardWrapper], children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native47.View, { style: [styles3.surface, { backgroundColor }, resolvedVariant === "card" && styles3.cardSurface], children: [
+                isListBanner && listCreative ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   ListBannerAdView,
                   {
                     title: listCreative.title,
@@ -3968,11 +4163,11 @@ function InlineAd(props) {
                     adClearanceFontSize,
                     imageUri,
                     paddingStyle,
-                    colors,
+                    colors: colors4,
                     onPress: handleClick
                   }
                 ) : null,
-                isFeedBanner && feedCreative ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                isFeedBanner && feedCreative ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   FeedBannerAdView,
                   {
                     brandName: feedCreative.brandName,
@@ -3999,7 +4194,7 @@ function InlineAd(props) {
     impressionKey
   );
 }
-var styles3 = import_react_native42.StyleSheet.create({
+var styles3 = import_react_native47.StyleSheet.create({
   impressionArea: {
     width: "100%"
   },