@toss/tds-react-native 1.0.0

package/dist/esm/core/overlay/_OverlayProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+export declare const OverlayContext: React.Context<{
+    mount(id: string, element: ReactNode): void;
+    unmount(id: string): void;
+} | null>;
+export declare function OverlayProvider({ children }: PropsWithChildren<{
+    containerId?: string;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/core/overlay/_OverlayProvider.js

@@ -0,0 +1,3 @@
+"use strict";function e(r){let t="";for(let x=0;x<r.length;x++)t+=String.fromCharCode(r.charCodeAt(x)^96);return t}function h(r){let t="";for(let x=0;x<r.length;x++)t+=String.fromCharCode(r.charCodeAt(x)^57);return t}function o(r){let t="";for(let x=0;x<r.length;x++)t+=String.fromCharCode(r.charCodeAt(x)^209);return t}function n(r){let t="";for(let x=0;x<r.length;x++)t+=String.fromCharCode(r.charCodeAt(x)^120);return t}import{jsx as f,jsxs as l}from"react/jsx-runtime";import c,{createContext as B,useMemo as m}from"react";import s from"./useOverlayCache";export const OverlayContext=B(null);export function OverlayProvider({[o("\xB2\xB9\xB8\xBD\xB5\xA3\xB4\xBF")]:r}){const{[o("\xBC\xBE\xA4\xBF\xA5")]:t,[e("\r")]:x,[e('\f
")')]:u}=s(),a=m(()=>({[e("\r")]:t,[o("\xA4\xBF\xBC\xBE\xA4\xBF\xA5")]:x}),[t,x]);return l(OverlayContext.Provider,{[e("
\f")]:a,[n(`\x1B
+`)]:[r,[...u.entries()].map(([i,C])=>f(c.Fragment,{[n(`\x1B
+`)]:C},i))]})}

package/dist/esm/core/overlay/index.d.ts

@@ -0,0 +1,3 @@
+export { OverlayProvider } from './OverlayProvider';
+export { useOverlayBase } from './useOverlayBase';
+export { useOverlay } from './useOverlay';

package/dist/esm/core/overlay/index.js

@@ -0,0 +1 @@
+"use strict";export{OverlayProvider}from"./OverlayProvider";export{useOverlayBase}from"./useOverlayBase";export{useOverlay}from"./useOverlay";

package/dist/esm/core/overlay/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @category Types
+ * @kind typedef
+ * @name CreateOverlayElement
+ * @description
+ * `CreateOverlayElement`는 특정 컴포넌트를 오버레이 형태로 생성하고 관리하는 함수예요. `useOverlayBase` hook과 함께 사용해요.
+ * 오버레이의 열림 상태를 제어하고, 필요할 때 오버레이를 닫거나 제거할 수 있어요.
+ *
+ * @property {boolean} isOpen  - 오버레이가 띄워져 있는지 여부를 나타내는 상태예요. `open()`이 호출되면 `isOpen`이 `true`로 설정돼요. 이 값을 확인해서 오버레이로 띄울 컴포넌트의 열림 상태를 제어할 수 있어요.
+ * @property {() => void} close - 오버레이를 숨기기 위해 호출하는 함수예요. 이 함수를 호출하면 `isOpen`이 `false`로 설정됩니다. 주로 오버레이 컴포넌트의 `onClose` prop으로 사용돼요.
+ * @property {() => void} exit - 오버레이를 화면에서 완전히 제거(unmount)하기 위해 호출하는 함수예요. 이 함수가 호출되면 오버레이 컴포넌트가 `View` 트리에서 제거돼요.
+ */
+export type CreateOverlayElement = (props: {
+    isOpen: boolean;
+    close: () => void;
+    exit: () => void;
+}) => JSX.Element;

package/dist/esm/core/overlay/types.js

@@ -0,0 +1 @@
+"use strict";export{};

package/dist/esm/core/overlay/useOverlay.d.ts

@@ -0,0 +1,52 @@
+import { CreateOverlayElement } from './types';
+/**
+ * @public
+ * @tag UI
+ * @category Hooks
+ * @kind function
+ * @name useOverlay
+ * @description
+ * `useOverlay`는 뒤로가기 버튼을 눌렀을 때 Overlay를 닫고 화면을 종료할 수 있도록 도와주는 hook이에요. 이 hook은 Overlay의 열림과 닫힘 상태를 간편하게 관리하고 싶을 때 유용해요.
+ *
+ * @returns {{
+ *   open: (overlayElement: CreateOverlayElement) => void;
+ *   close: () => void;
+ * }}
+ * `open` 함수는 `overlayElement`를 받아 Overlay를 표시하고, `close` 함수는 등록된 Overlay를 닫습니다.
+ *
+ * @example
+ * ```tsx
+ * import { useOverlay } from '';
+ *
+ *  const overlay = useOverlay();
+ *
+ *   const openBottomSheet = useCallback(() => {
+ *     return new Promise<void>((resolve) => {
+ *       overlay.open(({ isOpen, exit, close }) => {
+ *         const handleClose = () => {
+ *           close();
+ *           resolve();
+ *         };
+ *
+ *         return (
+ *           <BottomSheet
+ *             open={isOpen}
+ *             onClose={handleClose}
+ *             onExited={exit}
+ *             header={<BottomSheet.Header>BottomSheet V1 Header</BottomSheet.Header>}
+ *             cta={<BottomSheet.CTA onPress={handleClose}>확인</BottomSheet.CTA>}
+ *           >
+ *             <View>
+ *               <TextField size="classic" label="name" value="FOCUS ME" />
+ *             </View>
+ *           </BottomSheet>
+ *         );
+ *       });
+ *     });
+ *   }, []);
+ * ```
+ */
+export declare function useOverlay(): {
+    close: () => void;
+    open: (overlayElement: CreateOverlayElement) => void;
+};

package/dist/esm/core/overlay/useOverlay.js

@@ -0,0 +1 @@
+"use strict";function x(e){let r="";for(let n=0;n<e.length;n++)r+=String.fromCharCode(e.charCodeAt(n)^150);return r}import{useCallback as E,useMemo as l}from"react";import{BackHandler as o}from"react-native";import{useOverlayBase as u}from"./useOverlayBase";export function useOverlay(){const e=u(),r=E(n=>{function t(){return e.close(),o.removeEventListener(function(){return typeof global[x("\xC9\xC9\xF2\xF3\xF5\xE4\xEF\xE6\xE2",150)]!="function"?"":global[x("\xC9\xC9\xF2\xF3\xF5\xE4\xEF\xE6\xE2",150)]("A9I:L5E7p129z>0=<",39)}(),t),!0}o.addEventListener(function(){return typeof global[x("\xC9\xC9\xF2\xF3\xF5\xE4\xEF\xE6\xE2",150)]!="function"?"":global[x("\xC9\xC9\xF2\xF3\xF5\xE4\xEF\xE6\xE2",150)]("IAQBT=M?x9:A%F8ED",31)}(),t),e.open(({...F})=>n({...F,[x("\xF5\xFA\xF9\xE5\xF3")]:()=>{o.removeEventListener(function(){return typeof global[x("\xC9\xC9\xF2\xF3\xF5\xE4\xEF\xE6\xE2",150)]!="function"?"":global[x("\xC9\xC9\xF2\xF3\xF5\xE4\xEF\xE6\xE2",150)]("OGWHZCSE!?@G+L>KJ",118)}(),t),F.close()}}))},[e]);return l(()=>({[x("\xF9\xE6\xF3\xF8")]:r,[x("\xF5\xFA\xF9\xE5\xF3")]:e.close}),[r,e.close])}

package/dist/esm/core/overlay/useOverlayBase.d.ts

@@ -0,0 +1,72 @@
+import { CreateOverlayElement } from './types';
+interface Options {
+    exitOnUnmount?: boolean;
+}
+/**
+ * @public
+ * @tag UI
+ * @category Hooks
+ * @kind function
+ * @name useOverlayBase
+ * @description
+ * useOverlayBase는 Dialog처럼 별도의 UI 레이어를 띄우는 Overlay를 선언적으로 다루기 위한 hook이에요.
+ * 이 hook을 사용하려면 사용하는 화면의 _app.tsx에 <OverlayProvider />를 추가해야 해요.
+ * Promise와 함께 사용할 수 있어서 비동기 작업과 결합해 Overlay를 제어할 때 유용해요.
+ * 여러 개의 Overlay가 필요할 때는 useOverlayBase를 여러 번 호출하면 돼요.
+ *
+ * @param {boolean} [exitOnUnmount=true]
+ * useOverlayBase를 호출한 컴포넌트가 unmount될 때 overlay도 자동으로 unmount(=exit)되도록 설정하는 옵션이예요.
+ * 만약 exitOnUnmount를 false로 설정하면, useOverlayBase를 호출한 컴포넌트가 unmount되어도 overlay는 자동으로 unmount되지 않고 등록된 overlay가 메모리에 계속 남아 있어요.
+ * 이럴 때는 원하는 시점에 직접 exit 함수를 호출해서 overlay를 수동으로 unmount 해주세요.
+ *
+ * @return {{
+ *  open: (overlayElement: CreateOverlayElement) => void;
+ *  close: () => void;
+ * }}
+ * `open` 함수는 `overlayElement`를 받아 Overlay를 표시하고, `close` 함수는 등록된 Overlay를 닫아요.
+ *
+ * @example
+ * ```tsx
+ * // _app.tsx
+ * import { OverlayProvider } from '@toss/tds-react-native/private';
+ *
+ * export default function App({ Component, pageProps }: AppProps) {
+ *   return (
+ *     <OverlayProvider>
+ *       <Component {...pageProps} />
+ *     </OverlayProvider>
+ *   )
+ * }
+ * ```
+ *
+ * ```tsx
+ * // Page.tsx
+ * const overlay = useOverlayBase();
+ * const openFooConfirmDialog = () => {
+ *   return new Promise<boolean>(resolve => {
+ *     overlay.open(({ isOpen, close }) => (
+ *       <FooConfirmDialog
+ *         open={isOpen}
+ *         onClose={() => {
+ *           resolve(false);
+ *           close();
+ *         }}
+ *         onConfirm={() => {
+ *           resolve(true);
+ *           close();
+ *         }}
+ *       />
+ *     ));
+ *   });
+ * };
+ *
+ * await openFooConfirmDialog();
+ * // ConfirmDialog의 confirmButton을 누르거나 onClose가 호출된 후
+ * console.log('dialog closed');
+ * ```
+ */
+export declare function useOverlayBase({ exitOnUnmount }?: Options): {
+    open: (overlayElement: CreateOverlayElement) => void;
+    close: () => void;
+};
+export {};

package/dist/esm/core/overlay/useOverlayBase.js

@@ -0,0 +1 @@
+"use strict";function a(r){let e="";for(let t=0;t<r.length;t++)e+=String.fromCharCode(r.charCodeAt(t)^173);return e}function u(r){let e="";for(let t=0;t<r.length;t++)e+=String.fromCharCode(r.charCodeAt(t)^86);return e}function S(r){let e="";for(let t=0;t<r.length;t++)e+=String.fromCharCode(r.charCodeAt(t)^83);return e}function f(r){let e="";for(let t=0;t<r.length;t++)e+=String.fromCharCode(r.charCodeAt(t)^243);return e}function c(r){let e="";for(let t=0;t<r.length;t++)e+=String.fromCharCode(r.charCodeAt(t)^162);return e}function s(r){let e="";for(let t=0;t<r.length;t++)e+=String.fromCharCode(r.charCodeAt(t)^195);return e}import{jsx as h}from"react/jsx-runtime";import{useContext as d,useEffect as m,useMemo as g,useRef as D}from"react";import{OverlayController as p}from"./OverlayController";import{OverlayContext as A}from"./_OverlayProvider";let C=0;export function useOverlayBase({[a("\xC8\xD5\xC4\xD9\xE2\xC3\xF8\xC3\xC0\xC2\xD8\xC3\xD9")]:r=!0}={}){const e=d(A);if(e==null)throw new Error("useOverlayBase\uB294 OverlayProvider \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.");const{[u(';9#8"')]:t,[c("\xD7\xCC\xCF\xCD\xD7\xCC\xD6")]:x}=e,l=D(new Map).current;return m(()=>{const o=C;return()=>{r&&x(String(o))}},[r,x]),g(()=>({[f("\x9C\x83\x96\x9D")]:o=>{const n=C;t(String(n),h(p,{[u("$30")]:i=>{l.set(n,i)},[c("\xCD\xD4\xC7\xD0\xCE\xC3\xDB\xE7\xCE\xC7\xCF\xC7\xCC\xD6")]:o,[f("\x9C\x9D\xB6\x8B\x9A\x87")]:()=>{x(String(n))}},Date.now())),C=C+1},[s("\xA0\xAF\xAC\xB0\xA6")]:()=>{const o=l.values();for(const n of o)n?.close()}}),[l,t,x])}

package/dist/esm/core/overlay/useOverlayCache.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export default function useOverlayCache(): {
+    mount: (id: string, element: ReactNode) => void;
+    unmount: (id: string) => void;
+    overlayById: Map<string, ReactNode>;
+};

package/dist/esm/core/overlay/useOverlayCache.js

@@ -0,0 +1 @@
+"use strict";import{useCallback as a,useState as l}from"react";export default function d(){const[u,o]=l(new Map),c=a((t,n)=>{o(e=>{const r=new Map(e);return r.set(t,n),r})},[]),s=a(t=>{o(n=>{const e=new Map(n);return e.delete(t),e})},[]);return{mount:c,unmount:s,overlayById:u}}

package/dist/esm/core/theme/ThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DerivedToken } from './deriveToken';
+import { SeedToken } from './seedToken';
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export type ThemeToken = SeedToken & DerivedToken;
+export declare const ThemeContext: React.Context<{
+    token: ThemeToken;
+} | null>;
+export interface ThemeProviderProps {
+    token?: DeepPartial<ThemeToken>;
+    children: React.ReactNode;
+}
+export declare function ThemeProvider({ token: customSeedToken, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): {
+    token: ThemeToken;
+};
+export {};

package/dist/esm/core/theme/ThemeProvider.js

@@ -0,0 +1 @@
+"use strict";function f(e){let r="";for(let t=0;t<e.length;t++)r+=String.fromCharCode(e.charCodeAt(t)^64);return r}function h(e){let r="";for(let t=0;t<e.length;t++)r+=String.fromCharCode(e.charCodeAt(t)^235);return r}function p(e){let r="";for(let t=0;t<e.length;t++)r+=String.fromCharCode(e.charCodeAt(t)^186);return r}function o(e){let r="";for(let t=0;t<e.length;t++)r+=String.fromCharCode(e.charCodeAt(t)^139);return r}function g(e){let r="";for(let t=0;t<e.length;t++)r+=String.fromCharCode(e.charCodeAt(t)^205);return r}import{jsx as m}from"react/jsx-runtime";import{createContext as c,useContext as x,useMemo as d}from"react";import{deepMerge as i}from"../../utils";import{deriveToken as C}from"./deriveToken";import{seedToken as l}from"./seedToken";export const ThemeContext=c(null);export function ThemeProvider({[o("\xFF\xE4\xE0\xEE\xE5")]:e={},[o("\xE8\xE3\xE2\xE7\xEF\xF9\xEE\xE5")]:r}){const t=x(ThemeContext),u=d(()=>{const n=i(t?.token??l,e),E=C(n);return i(n,E)},[e,t]);return m(ThemeContext.Provider,{[h("\x9D\x8A\x87\x9E\x8E")]:{[f("4/+%.")]:u},[o("\xE8\xE3\xE2\xE7\xEF\xF9\xEE\xE5")]:r})}export function useTheme(){const e=x(ThemeContext);if(!e)throw new Error("ThemeProvider\uB85C \uAC10\uC2F8\uC57C \uD569\uB2C8\uB2E4.");return e}

package/dist/esm/core/theme/deriveToken/BaseDerivedTokenGenerator.d.ts

@@ -0,0 +1,6 @@
+import { SeedToken } from '../seedToken';
+export declare abstract class BaseDerivedTokenGenerator<T> {
+    private cache;
+    create(seed: SeedToken): T;
+    protected abstract calculate(seed: SeedToken): T;
+}

package/dist/esm/core/theme/deriveToken/BaseDerivedTokenGenerator.js

@@ -0,0 +1 @@
+"use strict";export class BaseDerivedTokenGenerator{cache=new Map;create(e){if(this.cache.has(e))return this.cache.get(e);const c=this.calculate(e);return this.cache.set(e,c),c}}

package/dist/esm/core/theme/deriveToken/batchDerivedTokenGenerators.d.ts

@@ -0,0 +1,5 @@
+import { SeedToken } from '../seedToken';
+import { BaseDerivedTokenGenerator } from './BaseDerivedTokenGenerator';
+type DerivedTokenGenerators = Record<string, BaseDerivedTokenGenerator<unknown>>;
+export declare function batchDerivedTokenGenerators<T extends DerivedTokenGenerators>(styleMap: T): (seed: SeedToken) => { [K in keyof T]: T[K] extends BaseDerivedTokenGenerator<infer R> ? R : never; };
+export {};

package/dist/esm/core/theme/deriveToken/batchDerivedTokenGenerators.js

@@ -0,0 +1 @@
+"use strict";export function batchDerivedTokenGenerators(e){return r=>Object.fromEntries(Object.entries(e).map(([t,n])=>[t,n.create(r)]))}

package/dist/esm/core/theme/deriveToken/deriveToken.d.ts

@@ -0,0 +1,5 @@
+export declare const deriveToken: (seed: import("..").SeedToken) => {
+    readonly button: import("../../../components/button/ButtonDerivedTokenGenerator").ButtonDerivedTheme;
+    readonly bridge: import("../../../extensions/bridge/BridgeDerivedTokenGenerator").BridgeDerivedTheme;
+};
+export type DerivedToken = ReturnType<typeof deriveToken>;

package/dist/esm/core/theme/deriveToken/deriveToken.js

@@ -0,0 +1 @@
+"use strict";function h(r){let t="";for(let e=0;e<r.length;e++)t+=String.fromCharCode(r.charCodeAt(e)^216);return t}function l(r){let t="";for(let e=0;e<r.length;e++)t+=String.fromCharCode(r.charCodeAt(e)^249);return t}function C(r){let t="";for(let e=0;e<r.length;e++)t+=String.fromCharCode(r.charCodeAt(e)^252);return t}function o(r){let t="";for(let e=0;e<r.length;e++)t+=String.fromCharCode(r.charCodeAt(e)^147);return t}function n(r){let t="";for(let e=0;e<r.length;e++)t+=String.fromCharCode(r.charCodeAt(e)^50);return t}import{ButtonDerivedTokenGenerator as i}from"../../../components/button/ButtonDerivedTokenGenerator";import{batchDerivedTokenGenerators as f}from"./batchDerivedTokenGenerators";import{BridgeDerivedTokenGenerator as u}from"../../../extensions/bridge/BridgeDerivedTokenGenerator";const d={[n("PGFF]\\")]:new i,[o("\xF1\xE1\xFA\xF7\xF4\xF6")]:new u};export const deriveToken=f(d);

package/dist/esm/core/theme/deriveToken/index.d.ts

@@ -0,0 +1 @@
+export * from './deriveToken';

package/dist/esm/core/theme/deriveToken/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./deriveToken";

package/dist/esm/core/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './seedToken';
+export * from './deriveToken';
+export * from './ThemeProvider';

package/dist/esm/core/theme/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./seedToken";export*from"./deriveToken";export*from"./ThemeProvider";

package/dist/esm/core/theme/seedToken/index.d.ts

@@ -0,0 +1 @@
+export * from './seedToken';

package/dist/esm/core/theme/seedToken/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./seedToken";

package/dist/esm/core/theme/seedToken/seedToken.d.ts

@@ -0,0 +1,6 @@
+export declare const seedToken: {
+    color: {
+        primary: string;
+    };
+};
+export type SeedToken = typeof seedToken;

package/dist/esm/core/theme/seedToken/seedToken.js

@@ -0,0 +1 @@
+"use strict";function e(r){let o="";for(let t=0;t<r.length;t++)o+=String.fromCharCode(r.charCodeAt(t)^51);return o}function n(r){let o="";for(let t=0;t<r.length;t++)o+=String.fromCharCode(r.charCodeAt(t)^113);return o}function f(r){let o="";for(let t=0;t<r.length;t++)o+=String.fromCharCode(r.charCodeAt(t)^147);return o}function l(r){let o="";for(let t=0;t<r.length;t++)o+=String.fromCharCode(r.charCodeAt(t)^195);return o}function h(r){let o="";for(let t=0;t<r.length;t++)o+=String.fromCharCode(r.charCodeAt(t)^133);return o}function i(r){let o="";for(let t=0;t<r.length;t++)o+=String.fromCharCode(r.charCodeAt(t)^234);return o}import{colors as u}from"@toss-design-system/colors";export const seedToken={[n("")]:{[e("CAZ^RAJ")]:u.blue500}};

package/dist/esm/extensions/bridge/Bridge.d.ts

@@ -0,0 +1,34 @@
+import { ViewProps } from 'react-native';
+import { IconProps } from './components';
+interface BridgeBaseProps extends ViewProps {
+    /**
+     * `Bridge` 컴포넌트 중앙에 표시될 아이콘이에요.
+     */
+    icon: IconProps;
+    /**
+     * `Bridge` 컴포넌트의 열림 상태를 제어해요.
+     */
+    open?: boolean;
+    /**
+     * `Bridge` 컴포넌트의 색상 정책을 결정해요.
+     * - `basic`: 하얀 배경을 갖고있어요. 보통 하얀 배경의 화면에서 사용돼요.
+     * - `inverted`: 검은 배경을 갖고있어요. 보통 검은 배경이나 색이 짙은 배경의 화면에서 사용돼요.
+     * @default 'basic'
+     */
+    colorMode?: 'basic' | 'inverted';
+    onClose?: () => void;
+    onExited?: () => void;
+}
+interface BridgeBasicProps extends BridgeBaseProps {
+    variant?: 'basic';
+    serviceName: string;
+    amount?: never;
+}
+interface BridgePointProps extends BridgeBaseProps {
+    variant: 'point';
+    serviceName: string;
+    amount: number;
+}
+export type BridgeProps = BridgeBasicProps | BridgePointProps;
+export declare function Bridge({ style, icon, open, colorMode, onClose: _onClose, onExited: _onExited, variant, serviceName, amount, ...restProps }: BridgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/extensions/bridge/Bridge.js

@@ -0,0 +1,2 @@
+"use strict";import{jsx as o,jsxs as T}from"react/jsx-runtime";import{bezier as C,spring as R}from"@toss-design-system/easings";import{josa as A}from"es-hangul";import{useCallback as G,useEffect as E,useLayoutEffect as Q,useMemo as X,useRef as Z,useState as w}from"react";import{Dimensions as ee,Easing as v,Platform as te,Pressable as oe,StyleSheet as O,useAnimatedValue as r,View as L}from"react-native";import{usePreservedCallback as k}from"../../components/bottom-sheet/utils/usePreservedCallback";import{LinearGradient as re,RadialGradient as B}from"../../components/gradient";import{Text as z}from"../../components/txt";import{useTheme as ie}from"../../core/theme/ThemeProvider";import{Animated as t}from"../../interactions/animated/Animated";import{Icon as ne,NestedShadow as ae}from"./components";import{getCenterOffset as N}from"./utils";const le=600,se=400;export function Bridge({style:a,icon:f,open:c,colorMode:p="basic",onClose:l,onExited:y,variant:x,serviceName:u,amount:s,...m}){const{token:e}=ie(),g=p==="basic",D=k(l??Y),I=k(y??Y),[j,P]=w(!1),b=Z(null),_=G(()=>{b.current&&clearTimeout(b.current),b.current=setTimeout(()=>{D?.(),b.current=null},se)},[D]);E(()=>()=>{b.current&&clearTimeout(b.current)},[]),E(()=>{const d=setTimeout(()=>{P(!0)},le);return()=>{clearTimeout(d)}},[]);const h={large:412.5,small:375},i=ge();E(()=>{if(c)return i.controller.open().start(),()=>{D?.(),i.controller.close().start(()=>{I?.()})}},[i.controller,D,I,c]);const M=x==="point"?[{type:"strong",text:u},{type:"default",text:A.pick(u,"\uC73C\uB85C/\uB85C")+` \uC774\uB3D9\uD558\uACE0
+`},{type:"strong",text:`${s.toLocaleString()}\uC6D0`},{type:"default",text:" \uBC1B\uC558\uC5B4\uC694"}]:[{type:"strong",text:u},{type:"default",text:A.pick(u,"\uC73C\uB85C/\uB85C")+" \uC774\uB3D9\uD588\uC5B4\uC694"}],[S,H]=w(null),[V,W]=w(null),[U,$]=w(0),q=G(d=>{H(N(d.nativeEvent.layout))},[]),F=G(d=>{W(N(d.nativeEvent.layout))},[]);return Q(()=>{S===null||V===null||$(S.y-V.y)},[V,S]),T(oe,{style:[n.fullCover,{zIndex:10},a],disabled:!j,onPress:_,...m,children:[o(L,{style:{flex:1,paddingTop:te.select({ios:103,android:56,default:56}),zIndex:1},children:T(t.View,{style:[{flexDirection:"column",gap:16,paddingHorizontal:20,alignItems:"center"}],onLayout:q,children:[o(ae,{shadows:g?[{offset:{x:0,y:4},opacity:.03,radius:6,color:"#000"},{offset:{x:0,y:10},opacity:.18,radius:16,color:e.bridge.contentLogoShadowColor},{offset:{x:0,y:12},opacity:.52,radius:64,color:e.bridge.contentLogoShadowColor}]:[],children:o(ce,{...f,style:[n.iconBorder,i.style.contentLogo]})}),o(ue,{style:[{textAlign:"center"},i.style.contentTitle],children:M.map(({type:d,text:J},K)=>o(z,{typography:"t3",fontWeight:"bold",color:g?d==="strong"?e.bridge.contentTitleStrongColor:e.bridge.contentTitleDefaultColor:d==="strong"?e.bridge.contentTitleStrongInvertedColor:e.bridge.contentTitleDefaultInvertedColor,textAlign:"center",children:J},K))})]})}),o(L,{style:[n.fullCover,{height:de}],children:T(t.View,{style:[n.center,n.fullCover,i.style.backgroundGroup],onLayout:F,children:[o(L,{style:n.fullCover,children:o(re,{opacity:1,degree:180,colors:g?[e.bridge.baseGradientStartColor,e.bridge.baseGradientStartColor,e.bridge.baseGradientMiddleColor,e.bridge.baseGradientEndColor]:[e.bridge.baseGradientStartInvertedColor,e.bridge.baseGradientStartInvertedColor,e.bridge.baseGradientMiddleInvertedColor,e.bridge.baseGradientEndInvertedColor],positions:[0,.25,.31,1],easing:"linear"})}),o(L,{style:{width:h.large+135,height:h.large,position:"relative",transform:[{translateY:U}]},children:g&&T(t.View,{style:[n.fullCover,{opacity:.02},i.style.radialGradientGroup],children:[o(t.View,{style:[n.rightCover,{width:h.small,height:h.small},i.style.rightRadialGradient],children:o(B,{colors:[{value:e.bridge.rightRadialGradientColor,opacity:1},{value:e.bridge.rightRadialGradientColor,opacity:0}]})}),o(t.View,{style:[n.leftCover,{width:h.large,height:h.large},i.style.leftRadialGradient],children:o(B,{colors:[{value:e.bridge.leftRadialGradientColor,opacity:1},{value:e.bridge.leftRadialGradientColor,opacity:0}]})})]})})]})})]})}const n=O.create({fullCover:{position:"absolute",top:0,left:0,right:0,bottom:0,width:"100%",height:"100%"},halfCover:{position:"absolute",top:0,left:0,width:"100%",height:"50%"},leftCover:{position:"absolute",bottom:0,left:0},rightCover:{position:"absolute",bottom:0,right:0},center:{display:"flex",justifyContent:"center",alignItems:"center"},iconBorder:{width:56,height:56,borderWidth:O.hairlineWidth,borderRadius:14,borderColor:"rgba(25, 66, 142, 0.12)",borderStyle:"solid",overflow:"hidden"}}),Y=()=>{},de=ee.get("window").height,ce=t.createAnimatedComponent(ne),ue=t.createAnimatedComponent(z);function ge(){const a=r(0),f=r(.5),c=r(0),p=r(0),l=r(0),y=r(.6),x=r(0),u=r(0),s=r(0),m=r(.7),e=G(()=>t.parallel([t.spring(a,{toValue:1,...R.small,useNativeDriver:!1}),t.timing(f,{toValue:1,easing:v.bezier(...C.out),duration:800,useNativeDriver:!1}),t.spring(c,{toValue:1,...R.basic,useNativeDriver:!1}),t.spring(p,{toValue:1,delay:40,...R.basic,useNativeDriver:!1}),t.timing(l,{toValue:1,easing:v.bezier(...C.out),duration:600,useNativeDriver:!1,delay:40}),t.spring(y,{toValue:1,stiffness:120,friction:11,useNativeDriver:!1,delay:40}),t.timing(s,{toValue:1,easing:v.bezier(...C.out),duration:600,useNativeDriver:!1,delay:80}),t.spring(m,{toValue:1,stiffness:120,friction:11,useNativeDriver:!1,delay:80})]),[a,f,c,p,l,y,s,m]),g=G(()=>t.parallel([t.timing(l,{toValue:0,easing:v.bezier(...C.out),duration:500,useNativeDriver:!1}),t.timing(s,{toValue:0,easing:v.bezier(...C.out),duration:500,useNativeDriver:!1}),t.timing(a,{toValue:0,easing:v.bezier(...C.out),duration:500,useNativeDriver:!1})]),[a,l,s]);return X(()=>({style:{backgroundGroup:{opacity:a},radialGradientGroup:{transform:[{scale:f}]},leftRadialGradient:{opacity:c},rightRadialGradient:{opacity:p},contentLogo:{opacity:l,transform:[{translateY:x},{scale:y}]},contentTitle:{opacity:s,transform:[{translateY:u},{scale:m}]}},controller:{open:e,close:g}}),[a,g,l,y,x,s,m,u,c,e,f,p])}

package/dist/esm/extensions/bridge/BridgeDerivedTokenGenerator.d.ts

@@ -0,0 +1,20 @@
+import { BaseDerivedTokenGenerator } from '../../core/theme/deriveToken/BaseDerivedTokenGenerator';
+import { SeedToken } from '../../core/theme/seedToken/seedToken';
+export type BridgeDerivedTheme = {
+    contentLogoShadowColor: string;
+    leftRadialGradientColor: string;
+    rightRadialGradientColor: string;
+    contentTitleStrongColor: string;
+    contentTitleDefaultColor: string;
+    baseGradientStartColor: string;
+    baseGradientMiddleColor: string;
+    baseGradientEndColor: string;
+    contentTitleStrongInvertedColor: string;
+    contentTitleDefaultInvertedColor: string;
+    baseGradientStartInvertedColor: string;
+    baseGradientMiddleInvertedColor: string;
+    baseGradientEndInvertedColor: string;
+};
+export declare class BridgeDerivedTokenGenerator extends BaseDerivedTokenGenerator<BridgeDerivedTheme> {
+    protected calculate(seed: SeedToken): BridgeDerivedTheme;
+}

package/dist/esm/extensions/bridge/BridgeDerivedTokenGenerator.js

@@ -0,0 +1 @@
+"use strict";import{colors as e}from"@toss-design-system/colors";import{BaseDerivedTokenGenerator as u}from"../../core/theme/deriveToken/BaseDerivedTokenGenerator";import{ColorManager as o}from"../../utils/ColorManager";import{getThemeColorCodeFromOklch as f}from"./utils/getThemeColorCodeFromOklch";function h(r){const t=new o(r);return f(t.getOklch())}const m={red:e.purple300,orange:e.yellow500,yellow:"#ffe812",green:e.blue500,teal:e.blue500,blue:e.blue500,purple:e.purple300,grey:e.blue500};function w(r){const t=h(r),n=t==="grey"?e.blue500:r,s=new o(n).setLightness(.418).getRgba(),d=new o(n).setLightness(.315).setAlpha(.56).getRgba(),l="#fff",g=new o(l).setAlpha(.95).getRgba(),i=new o(l).setAlpha(0).getRgba(),c="#fff",b="#b7b7b7",a=new o("#000").setAlpha(.93).getRgba(),C=new o(a).setAlpha(.88).getRgba(),p=new o(a).setAlpha(0).getRgba();return{contentLogoShadowColor:n,leftRadialGradientColor:n,rightRadialGradientColor:m[t]??e.blue500,contentTitleStrongColor:s,contentTitleDefaultColor:d,baseGradientStartColor:l,baseGradientMiddleColor:g,baseGradientEndColor:i,contentTitleStrongInvertedColor:c,contentTitleDefaultInvertedColor:b,baseGradientStartInvertedColor:a,baseGradientMiddleInvertedColor:C,baseGradientEndInvertedColor:p}}export class BridgeDerivedTokenGenerator extends u{calculate(t){return w(t.color.primary)}}

package/dist/esm/extensions/bridge/components/Icon.d.ts

@@ -0,0 +1,10 @@
+import { Source } from '@granite-js/native/react-native-fast-image';
+import { View, ViewProps } from 'react-native';
+export type IconProps = ({
+    source: Source;
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+}) & ViewProps;
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<View>>;

package/dist/esm/extensions/bridge/components/Icon.js

@@ -0,0 +1 @@
+"use strict";import{jsx as o}from"react/jsx-runtime";import{forwardRef as c}from"react";import{View as s}from"react-native";import{Image as m}from"@granite-js/react-native";import{Icon as a}from"../../../components/icon";export const Icon=c(function({name:t,source:e,...i},r){const n=t!==void 0?o(a,{name:t,style:{width:"100%",aspectRatio:1}}):o(m,{source:e,style:{width:"100%",aspectRatio:1},resizeMode:"contain",accessibilityRole:"image"});return o(s,{ref:r,...i,children:n})});

package/dist/esm/extensions/bridge/components/NestedShadow.d.ts

@@ -0,0 +1,14 @@
+import { ViewProps } from 'react-native';
+export interface Shadow {
+    opacity?: number;
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    radius: number;
+    color: string;
+}
+export interface NestedShadowProps extends ViewProps {
+    shadows: Shadow[];
+}
+export declare function NestedShadow({ shadows, children, ...restProps }: NestedShadowProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/extensions/bridge/components/NestedShadow.js

@@ -0,0 +1 @@
+"use strict";import{Fragment as d,jsx as e}from"react/jsx-runtime";import{View as n}from"react-native";import{generateShadowStyle as s}from"../../../components/shadow/generateShadowStyle";export function NestedShadow({shadows:r,children:t,...i}){if(r.length===0)return e(d,{children:t});const o=r.reduceRight((m,a)=>e(n,{style:s(a),children:m}),t);return e(n,{...i,children:o})}

package/dist/esm/extensions/bridge/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Icon';
+export * from './NestedShadow';

package/dist/esm/extensions/bridge/components/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./Icon";export*from"./NestedShadow";

package/dist/esm/extensions/bridge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Bridge';
+export * from './useBridge';

package/dist/esm/extensions/bridge/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./Bridge";export*from"./useBridge";

package/dist/esm/extensions/bridge/useBridge.d.ts

@@ -0,0 +1,19 @@
+import { BridgeProps } from './Bridge';
+interface UseBridgeOptions {
+    /** @default true */
+    closeOnDestroy?: boolean;
+}
+/**
+ *
+ * `Bridge` 컴포넌트를 띄우는 훅이에요.
+ * - `open` 이 호출되고 200ms 후에 `Bridge` 컴포넌트가 노출돼요
+ * - `open` 이후에 `variant` 가 `basic` 일 때는 2.0s, `point` 일 때는 2.3s 후에 제거돼요
+ * - `close` 가 호출되면 `Bridge` 컴포넌트가 즉시 제거돼요
+ */
+export declare function useBridge({ closeOnDestroy }?: UseBridgeOptions): {
+    close: () => void;
+    open: ({ onExited, onClose, color, ...options }: BridgeProps & {
+        color?: string;
+    }) => void;
+};
+export {};

package/dist/esm/extensions/bridge/useBridge.js

@@ -0,0 +1 @@
+"use strict";import{jsx as c}from"react/jsx-runtime";import{useCallback as u,useEffect as h,useMemo as v,useRef as x}from"react";import{ThemeProvider as C,useOverlay as T}from"../../core/index";import{Bridge as g}from"./Bridge";export function useBridge({closeOnDestroy:n=!0}={}){const e=x(),r=T(),o=u(()=>r.close(),[r]),s=u(({onExited:l,onClose:m,color:a,...i})=>{e.current&&clearTimeout(e.current),e.current=setTimeout(()=>{r.open(({isOpen:d,exit:p,close:b})=>c(C,{token:{color:{primary:a}},children:c(g,{open:d,onClose:()=>{m?.(),b()},onExited:()=>{l?.(),p()},...i})}));const f=i.variant==="basic"?2e3:2300;e.current=setTimeout(()=>{o()},f)},200)},[o,r]),t=v(()=>({close:o,open:s}),[o,s]);return h(()=>()=>{n&&t?.close()},[n,t]),t}

package/dist/esm/extensions/bridge/utils/getCenterOffset.d.ts

@@ -0,0 +1,5 @@
+import { LayoutRectangle } from 'react-native';
+export declare function getCenterOffset(layout: LayoutRectangle): {
+    x: number;
+    y: number;
+};

package/dist/esm/extensions/bridge/utils/getCenterOffset.js

@@ -0,0 +1 @@
+"use strict";export function getCenterOffset(e){return{x:e.x+e.width/2,y:e.y+e.height/2}}

package/dist/esm/extensions/bridge/utils/getThemeColorCodeFromOklch.d.ts

@@ -0,0 +1,6 @@
+import { Oklch } from '../../../utils/ColorManager';
+export type ThemeColorCode = 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'grey';
+/**
+ * OKLCH 색상 값에서 ThemeColorCode 추출
+ */
+export declare const getThemeColorCodeFromOklch: ({ c, h }: Oklch) => ThemeColorCode;

package/dist/esm/extensions/bridge/utils/getThemeColorCodeFromOklch.js

@@ -0,0 +1 @@
+"use strict";const o=[{name:"red",min:0,max:30},{name:"orange",min:30,max:70},{name:"yellow",min:70,max:110},{name:"green",min:110,max:180},{name:"teal",min:180,max:220},{name:"blue",min:220,max:290},{name:"purple",min:290,max:340},{name:"red",min:340,max:360}];export const getThemeColorCodeFromOklch=({c:e,h:m})=>{if(e<=.05)return"grey";for(const{name:n,min:a,max:r}of o)if(m>a&&m<=r)return n;return"grey"};

package/dist/esm/extensions/bridge/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './getCenterOffset';

package/dist/esm/extensions/bridge/utils/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./getCenterOffset";

package/dist/esm/extensions/external-web-view-screen/ExternalWebViewScreen.d.ts

@@ -0,0 +1,23 @@
+import { WebView, WebViewProps } from '@granite-js/native/react-native-webview';
+import { Icon } from '../../components/icon';
+type Icon = {
+    source: {
+        uri: string;
+    };
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+};
+type Header = {
+    title?: string;
+    icon?: Icon;
+    withBackButton?: boolean;
+};
+export type ExternalWebViewScreenProps = WebViewProps & {
+    header?: Header;
+};
+export declare const ExternalWebViewScreen: import("react").ForwardRefExoticComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
+    header?: Header;
+} & import("react").RefAttributes<WebView<{}>>>;
+export {};

package/dist/esm/extensions/external-web-view-screen/ExternalWebViewScreen.js

@@ -0,0 +1 @@
+"use strict";import{jsx as e,jsxs as n,Fragment as h}from"react/jsx-runtime";import{WebView as v}from"@granite-js/native/react-native-webview";import{forwardRef as k,useCallback as x,useRef as l}from"react";import{View as N}from"react-native";import{mergeRefs as p}from"../../utils/mergeRefs";import{Navigation as w,NavigationBackButton as b,NavigationBackdrop as C,NavigationCenter as R,NavigationCloseButton as V,NavigationLeft as j,NavigationRight as y,NavigationTitleIcon as G,NavigationTitleText as S,useBackOrCloseNavigation as T}from"./Navigation";export const ExternalWebViewScreen=k(function({header:s={},onNavigationStateChange:f,...u},g){const{title:a,icon:o,withBackButton:m=!1}=s,r=l(!1),t=l(null),B=p(g,t),c=T(),d=x(function(){if(t.current!=null&&r.current){t.current?.goBack();return}c()},[c]);return n(h,{children:[n(w,{children:[e(j,{visible:m,children:e(b,{onPress:d,canGoBack:!1})}),n(R,{children:[o!=null&&e(G,{...o}),a!=null&&e(S,{children:a})]}),e(y,{children:e(V,{})})]}),n(N,{style:{display:"flex",flexDirection:"column",flex:1,position:"relative"},children:[e(C,{}),e(v,{ref:B,...u,onNavigationStateChange:i=>{r.current=i.canGoBack,f?.(i)},style:{flex:1}})]})]})});

package/dist/esm/extensions/external-web-view-screen/Navigation.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { TxtProps } from '../../components/txt';
+export interface NavigationProps {
+    children?: ReactNode;
+}
+export declare function Navigation({ children }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function useBackOrCloseNavigation(): () => void;
+export declare function NavigationBackdrop(): import("react/jsx-runtime").JSX.Element;
+export type NavigationLeftProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 왼쪽 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 왼쪽 영역을 설정할 수 있어요.
+ */
+export declare function NavigationLeft({ children, visible }: NavigationLeftProps): null;
+export type NavigationRightProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 오른쪽 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 오른쪽 영역을 설정할 수 있어요.
+ */
+export declare function NavigationRight({ children, visible }: NavigationRightProps): null;
+export type NavigationCenterProps = {
+    children?: ReactNode;
+    /**
+     * 내비게이션 가운데 영역을 보이거나 숨길 수 있어요.
+     * @default true
+     */
+    visible?: boolean;
+};
+/**
+ * 내비게이션 가운데 영역을 설정할 수 있어요.
+ */
+export declare function NavigationCenter({ children, visible }: NavigationCenterProps): null;
+type Icon = {
+    source: {
+        uri: string;
+    };
+    name?: never;
+} | {
+    name: string;
+    source?: never;
+};
+export type NavigationTitleIcon = Icon;
+export declare function NavigationTitleIcon(props: NavigationTitleIcon): import("react/jsx-runtime").JSX.Element;
+export type NavigationTitleTextProps = TxtProps;
+export declare function NavigationTitleText({ style, ...restProps }: NavigationTitleTextProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationBackButtonProps = {
+    onPress?: () => void;
+    canGoBack?: boolean;
+};
+export declare function NavigationBackButton({ onPress, canGoBack }: NavigationBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export type NavigationCloseButtonProps = {
+    onPress?: () => void;
+};
+export declare function NavigationCloseButton({ onPress }: NavigationCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/extensions/external-web-view-screen/Navigation.js

@@ -0,0 +1 @@
+"use strict";import{Fragment as p,jsx as n,jsxs as y}from"react/jsx-runtime";import{useHeaderHeight as O}from"@granite-js/native/@react-navigation/elements";import{useNavigation as s}from"@granite-js/native/@react-navigation/native";import{colors as f,colorsByPreference as v}from"@toss-design-system/colors";import{Children as x,useCallback as C,useLayoutEffect as u,useMemo as k}from"react";import{Dimensions as B,Image as N,Platform as w,View as g}from"react-native";import{closeView as h}from"@granite-js/react-native";import{Asset as T}from"../../components/asset";import{LinearGradient as I}from"../../components/gradient";import{ReactNavigationNavbar as m}from"../../components/navbar";import{useShadow as b}from"../../components/shadow";import{Txt as P}from"../../components/txt";import{useColorPreference as c}from"../../core/contexts/ColorPreferenceProvider";import{PreventFontScaling as R}from"../../extensions/prevent-font-scaling";function l(){const{colorPreference:t}=c(),{adaptive:e}=k(()=>({adaptive:v[t]}),[t]);return e}function d(t){return x.toArray(t).length>0}export function Navigation({children:t}){const e=s(),o=l(),{colorPreference:r}=c(),i=d(t);return u(()=>{function a(){e.setOptions({headerStyle:null,statusBarStyle:"auto"})}if(!i){a();return}return e.setOptions({headerStyle:{backgroundColor:o.background},statusBarStyle:"auto"}),()=>{a()}},[e,r,i,o.background]),n(p,{children:t})}export function useBackOrCloseNavigation(){const t=s();return C(()=>{t.canGoBack()?t.goBack():h()},[t])}const L=w.select({android:f.greyOpacity400,ios:f.greyOpacity100,default:f.greyOpacity100});export function NavigationBackdrop(){const{colorPreference:t}=c(),e=l(),o=O(),r=t==="dark",i=b({offset:{x:0,y:0},opacity:1,radius:r?50:20,color:r?"rgba(0, 0, 0, 0.1)":L}),a=r?[e.grey100,e.grey300,e.grey100]:[e.greyOpacity100,e.greyOpacity300,e.greyOpacity100];return y(g,{pointerEvents:"none",style:[{position:"absolute",top:-o,left:0,right:0,zIndex:1,width:"100%",height:o+.5}],children:[n(g,{pointerEvents:"none",style:[{position:"absolute",top:0,left:0,right:0,backgroundColor:e.background,width:"100%",height:o},i]}),n(I,{degree:90,easing:"linear",positions:[0,.5,1],colors:a})]})}export function NavigationLeft({children:t,visible:e=!0}){const o=s();return u(()=>{if(!d(t)||!e){o.setOptions({headerLeft:null});return}o.setOptions({headerLeft:()=>n(p,{children:t})})},[t,o,e]),null}export function NavigationRight({children:t,visible:e=!0}){const o=s();return u(()=>{if(!d(t)||!e){o.setOptions({headerRight:null});return}o.setOptions({headerRight:()=>n(g,{style:{marginRight:4,flexDirection:"row"},children:t})})},[t,o,e]),null}const S=B.get("window").width;export function NavigationCenter({children:t,visible:e=!0}){const r=s();return u(()=>{if(!d(t)||!e){r.setOptions({headerBackVisible:!1,headerTitle:null});return}r.setOptions({headerTitleAlign:"center",headerBackVisible:!1,headerTitle:()=>n(g,{style:[{maxWidth:S-100,display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",gap:5}],children:t})})},[t,r,e]),null}export function NavigationTitleIcon(t){const e={width:16,height:16,radius:5};return t.name!==void 0?n(T.Icon,{name:t.name,frameShape:e}):n(N,{source:t.source,style:{overflow:"hidden",borderRadius:e.radius,width:e.width,height:e.height}})}export function NavigationTitleText({style:t,...e}){const o=l();return n(R,{limit:100,children:n(P,{typography:"st10",fontWeight:"semibold",color:o.grey900,numberOfLines:1,ellipsizeMode:"tail",...e})})}export function NavigationBackButton({onPress:t,canGoBack:e=!0}){const{colorPreference:o}=c(),r=l(),i=o==="light"?r.greyOpacity400:r.greyOpacity500,a=useBackOrCloseNavigation();return n(m.BackButton,{tintColor:i,onPress:()=>{t?.(),e&&a()}})}export function NavigationCloseButton({onPress:t}){const{colorPreference:e}=c(),o=l(),r=e==="light"?o.greyOpacity400:o.greyOpacity500;return n(m.CloseButton,{tintColor:r,onPress:()=>{t?.(),h()}})}

package/dist/esm/extensions/external-web-view-screen/index.d.ts

@@ -0,0 +1 @@
+export * from './ExternalWebViewScreen';

package/dist/esm/extensions/external-web-view-screen/index.js

@@ -0,0 +1 @@
+"use strict";export*from"./ExternalWebViewScreen";