@reown/appkit-ui-react-native 2.0.0 → 2.0.1

package/src/composites/wui-search-bar/index.tsx

@@ -41,7 +41,7 @@ export function SearchBar({
         returnKeyType="search"
         disableFullscreenUI
       >
-        {showClear && (
+        {showClear ? (
           <InputElement
             icon="close"
             style={{ marginRight: Spacing['4xs'] }}
@@ -51,7 +51,7 @@ export function SearchBar({
               handleChangeText('');
             }}
           />
-        )}
+        ) : null}
       </InputText>
     </FlexView>
   );

package/src/composites/wui-tabs/index.tsx

@@ -72,14 +72,14 @@ export function Tabs({ tabs, onTabChange, style }: TabsProps) {
             key={isString ? option : option.label}
             style={[styles.tabItem, { width: tabWidth }]}
           >
-            {!isString && option.icon && (
+            {!isString && option.icon ? (
               <Icon
                 name={option.icon}
                 size="xs"
                 color={isActive ? 'fg-100' : 'fg-200'}
                 style={styles.tabIcon}
               />
-            )}
+            ) : null}
             <Text variant="small-600" color={isActive ? 'fg-100' : 'fg-200'}>
               {isString ? option : option.label}
             </Text>

package/src/composites/wui-toggle/index.tsx

@@ -74,9 +74,9 @@ export function Toggle({
         ) : (
           title
         )}
-        {canClose && (
+        {canClose ? (
           <IconBox icon={isOpen ? 'chevronTop' : 'chevronBottom'} size="sm" iconColor="fg-200" />
-        )}
+        ) : null}
       </Pressable>
 
       <Animated.View style={[styles.contentWrapper, { height: animatedHeight }]}>

package/src/composites/wui-token-button/index.tsx

@@ -1,12 +1,12 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
 import { Icon } from '../../components/wui-icon';
 import styles from './styles';
 import { useTheme } from '../../context/ThemeContext';
-import { View } from 'react-native';
-import React from 'react';
 
 export interface TokenButtonProps {
   onPress?: () => void;
@@ -28,7 +28,7 @@ export function TokenButton({
   onPress,
   style,
   disabled = false,
-  placeholder = 'Select token',
+  placeholder = 'Select Token',
   chevron,
   renderClip,
   testID
@@ -57,9 +57,9 @@ export function TokenButton({
         <Image
           key="image"
           source={imageUrl}
-          style={[styles.image, { backgroundColor: Theme['fg-100'] }]}
+          style={[styles.image, { backgroundColor: Theme['inverse-100'] }]}
         />
-        {renderClip && <View style={styles.clipContainer}>{renderClip}</View>}
+        {renderClip ? <View style={styles.clipContainer}>{renderClip}</View> : null}
       </View>
     ),
     <Text key="text">{text}</Text>
@@ -75,7 +75,9 @@ export function TokenButton({
       testID={testID}
     >
       {inverse ? content.reverse() : content}
-      {chevron && <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />}
+      {chevron ? (
+        <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />
+      ) : null}
     </Button>
   );
 }

package/src/composites/wui-transaction-visual/index.tsx

@@ -32,13 +32,13 @@ export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionV
           <Icon name={isFirstNFT ? 'nftPlaceholder' : 'coinPlaceholder'} size="sm" color="fg-200" />
         </FlexView>
       )}
-      {hasOneImage && firstImage?.url && (
+      {hasOneImage && firstImage?.url ? (
         <Image
           source={firstImage.url}
           style={[styles.image, firstImage?.type === 'NFT' && styles.imageNft, { backgroundColor }]}
         />
-      )}
-      {hasTwoImages && firstImage?.url && secondImage?.url && (
+      ) : null}
+      {hasTwoImages && firstImage?.url && secondImage?.url ? (
         <FlexView flexDirection="row" padding={['0', 's', '0', '0']}>
           <FlexView style={styles.halfContainer}>
             <Image
@@ -58,7 +58,7 @@ export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionV
             />
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
       <FlexView
         alignItems="center"
         justifyContent="center"

package/src/composites/wui-wallet-image/index.tsx

@@ -66,7 +66,7 @@ export function WalletImage({
   return (
     <Animated.View style={style}>
       {templateVisual()}
-      {border && (
+      {border ? (
         <View
           style={[
             styles.border,
@@ -79,7 +79,7 @@ export function WalletImage({
             }
           ]}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 }

package/src/context/ThemeContext.tsx

@@ -1,5 +1,5 @@
 import { useColorScheme } from 'react-native';
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
 import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
 
 import { DarkTheme, LightTheme, getAccentColors } from '../utils/ThemeUtil';
@@ -18,27 +18,29 @@ interface ThemeProviderProps {
 }
 
 export function ThemeProvider({ children, themeMode, themeVariables }: ThemeProviderProps) {
-  return (
-    <ThemeContext.Provider value={{ themeMode, themeVariables }}>{children}</ThemeContext.Provider>
-  );
+  const contextValue = useMemo(() => ({ themeMode, themeVariables }), [themeMode, themeVariables]);
+
+  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
 }
 
 export function useTheme() {
   const context = useContext(ThemeContext);
   const scheme = useColorScheme();
 
-  // If the theme mode is not set, use the system color scheme
-  const themeMode = context?.themeMode ?? scheme;
-  const themeVariables = context?.themeVariables ?? {};
+  return useMemo(() => {
+    // If the theme mode is not set, use the system color scheme
+    const themeMode = context?.themeMode ?? scheme;
+    const themeVariables = context?.themeVariables ?? {};
 
-  let Theme = themeMode === 'dark' ? DarkTheme : LightTheme;
+    let Theme = themeMode === 'dark' ? DarkTheme : LightTheme;
 
-  if (themeVariables.accent) {
-    Theme = {
-      ...Theme,
-      ...getAccentColors(themeVariables.accent)
-    };
-  }
+    if (themeVariables.accent) {
+      Theme = {
+        ...Theme,
+        ...getAccentColors(themeVariables.accent)
+      };
+    }
 
-  return Theme;
+    return Theme;
+  }, [context?.themeMode, context?.themeVariables, scheme]);
 }

package/src/hooks/useCustomDimensions.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { StatusBar, useWindowDimensions } from 'react-native';
+
+/**
+ * Hook used to get the width of the screen and the padding needed to accomplish portrait and landscape modes.
+ * @returns { maxHeight: number, isPortrait: boolean, isLandscape: boolean, padding: number }
+ */
+
+type CustomDimensionsType = {
+  maxHeight: number;
+  isPortrait: boolean;
+  isLandscape: boolean;
+  padding: number;
+};
+
+const MAX_PORTRAIT_PERCENTAGE = 0.9;
+const MAX_LANDSCAPE_PERCENTAGE = 0.85;
+const IOS_STATUS_BAR_HEIGHT = 20;
+
+const getMaxHeight = (height: number, isPortrait: boolean) => {
+  const percentage = isPortrait ? MAX_PORTRAIT_PERCENTAGE : MAX_LANDSCAPE_PERCENTAGE;
+
+  return height * percentage - (StatusBar.currentHeight ?? IOS_STATUS_BAR_HEIGHT);
+};
+
+export function useCustomDimensions(): CustomDimensionsType {
+  const { width, height } = useWindowDimensions();
+  const [isPortrait, setIsPortrait] = useState<boolean>(height > width);
+  const [maxHeight, setMaxHeight] = useState<number>(getMaxHeight(height, height > width));
+  const [padding, setPadding] = useState<number>(0);
+
+  useEffect(() => {
+    const _isPortrait = height > width;
+
+    setMaxHeight(getMaxHeight(height, _isPortrait));
+    setIsPortrait(_isPortrait);
+    setPadding(_isPortrait ? 0 : (width - height) / 2);
+  }, [width, height]);
+
+  return { maxHeight, isPortrait, isLandscape: !isPortrait, padding };
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+/********** Components **********/
 export { Card, type CardProps } from './components/wui-card';
 export { Icon, type IconProps } from './components/wui-icon';
 export { Image, type ImageProps } from './components/wui-image';
@@ -8,6 +9,7 @@ export { Text, type TextProps } from './components/wui-text';
 export { Visual, type VisualProps } from './components/wui-visual';
 export { Shimmer, type ShimmerProps } from './components/wui-shimmer';
 
+/********** Composites **********/
 export { AccountButton, type AccountButtonProps } from './composites/wui-account-button';
 export { AccountPill, type AccountPillProps } from './composites/wui-account-pill';
 export { ActionEntry, type ActionEntryProps } from './composites/wui-action-entry';
@@ -48,12 +50,12 @@ export { ListTransaction, type ListTransactionProps } from './composites/wui-lis
 export { ListWallet, type ListWalletProps } from './composites/wui-list-wallet';
 export { Logo, type LogoProps } from './composites/wui-logo';
 export { LogoSelect, type LogoSelectProps } from './composites/wui-logo-select';
+export { Modal, type ModalProps } from './components/wui-modal';
 export { NetworkButton, type NetworkButtonProps } from './composites/wui-network-button';
 export { NetworkImage, type NetworkImageProps } from './composites/wui-network-image';
 export { NumericKeyboard, type NumericKeyboardProps } from './composites/wui-numeric-keyboard';
 export { Otp, type OtpProps } from './composites/wui-otp';
 export { Pressable, type PressableProps } from './components/wui-pressable';
-export { Promo, type PromoProps } from './composites/wui-promo';
 export { QrCode, type QrCodeProps } from './composites/wui-qr-code';
 export { SearchBar, type SearchBarProps } from './composites/wui-search-bar';
 export { Snackbar, type SnackbarProps } from './composites/wui-snackbar';
@@ -68,6 +70,7 @@ export { Overlay, type OverlayProps } from './layout/wui-overlay';
 export { FlexView, type FlexViewProps } from './layout/wui-flex';
 export { Separator } from './layout/wui-separator';
 
+/********** Types **********/
 export type {
   ButtonType,
   CardSelectType,
@@ -83,10 +86,14 @@ export type {
   VisualType,
   TransactionType
 } from './utils/TypesUtil';
+
+/********** Utils **********/
 export { UiUtil } from './utils/UiUtil';
 export { TransactionUtil } from './utils/TransactionUtil';
 export { Spacing, BorderRadius } from './utils/ThemeUtil';
 
+/********** Hooks **********/
 export { useTheme } from './hooks/useTheme';
 export { ThemeProvider } from './context/ThemeContext';
 export { useAnimatedValue } from './hooks/useAnimatedValue';
+export { useCustomDimensions } from './hooks/useCustomDimensions';

package/src/layout/wui-flex/index.tsx

@@ -20,6 +20,9 @@ export interface FlexViewProps {
   flexShrink?: FlexShrinkType;
   alignItems?: FlexAlignType;
   alignSelf?: FlexAlignType;
+  rowGap?: SpacingType;
+  gap?: SpacingType;
+  columnGap?: SpacingType;
   justifyContent?: FlexJustifyContentType;
   padding?: SpacingType | SpacingType[];
   margin?: SpacingType | SpacingType[];
@@ -36,6 +39,9 @@ export function FlexView(props: FlexViewProps) {
     alignItems: props.alignItems,
     alignSelf: props.alignSelf,
     justifyContent: props.justifyContent,
+    rowGap: props.rowGap && UiUtil.getSpacingStyles(props.rowGap),
+    gap: props.gap && UiUtil.getSpacingStyles(props.gap),
+    columnGap: props.columnGap && UiUtil.getSpacingStyles(props.columnGap),
     paddingTop: props.padding && UiUtil.getSpacingStyles(props.padding, 0),
     paddingRight: props.padding && UiUtil.getSpacingStyles(props.padding, 1),
     paddingBottom: props.padding && UiUtil.getSpacingStyles(props.padding, 2),

package/src/utils/QRCodeUtil.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { Line, Rect, Circle } from 'react-native-svg';
 import QRCode from 'qrcode';
-import { DarkTheme, LightTheme } from '../utils/ThemeUtil';
+import { LightTheme } from '../utils/ThemeUtil';
 
 type CoordinateMapping = [number, number[]];
 
@@ -34,8 +34,8 @@ function getMatrix(value: string, errorCorrectionLevel: QRCode.QRCodeErrorCorrec
 
 export const QRCodeUtil = {
   generate(uri: string, size: number, logoSize: number) {
-    const dotColor = DarkTheme['bg-100'];
-    const edgeColor = LightTheme['bg-100'];
+    const dotColor = LightTheme['inverse-000'];
+    const edgeColor = LightTheme['inverse-100'];
     const dots: ReactNode[] = [];
     const matrix = getMatrix(uri, 'Q');
     const cellSize = size / matrix.length;

package/src/utils/TransactionUtil.ts

@@ -1,9 +1,9 @@
-import { DateUtil } from '@reown/appkit-common-react-native';
-import type {
-  TransactionTransfer,
-  Transaction,
-  TransactionImage,
-  TransactionMetadata
+import {
+  type TransactionTransfer,
+  type Transaction,
+  type TransactionImage,
+  type TransactionMetadata,
+  DateUtil
 } from '@reown/appkit-common-react-native';
 import type { TransactionType } from './TypesUtil';
 import { UiUtil } from './UiUtil';

package/src/utils/TypesUtil.ts

@@ -169,7 +169,7 @@ export type IconType =
   | 'google'
   | 'helpCircle'
   | 'infoCircle'
-  | 'mail'
+  | 'email'
   | 'mobile'
   | 'more'
   | 'networkPlaceholder'
@@ -179,6 +179,7 @@ export type IconType =
   | 'qrCode'
   | 'recycleHorizontal'
   | 'refresh'
+  | 'reown'
   | 'search'
   | 'settings'
   | 'swapHorizontal'
@@ -223,6 +224,7 @@ export type LogoType =
   | 'more'
   | 'telegram'
   | 'twitch'
+  | 'email'
   | 'x';
 
 export type TagType = 'main' | 'shade' | 'error' | 'success';

package/src/utils/UiUtil.ts

@@ -4,8 +4,8 @@ import { Spacing } from './ThemeUtil';
 import type { SpacingType, TruncateOptions } from './TypesUtil';
 
 export const UiUtil = {
-  getSpacingStyles(spacing: SpacingType | SpacingType[], index: number) {
-    if (Array.isArray(spacing)) {
+  getSpacingStyles(spacing: SpacingType | SpacingType[], index?: number) {
+    if (Array.isArray(spacing) && index !== undefined) {
       return spacing[index] ? Spacing[spacing[index] as SpacingType] : undefined;
     } else if (typeof spacing === 'string') {
       return Spacing[spacing];

package/lib/commonjs/composites/wui-promo/index.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Promo = Promo;
-var _reactNative = require("react-native");
-var _wuiIcon = require("../../components/wui-icon");
-var _wuiText = require("../../components/wui-text");
-var _useTheme = require("../../hooks/useTheme");
-var _wuiFlex = require("../../layout/wui-flex");
-var _ThemeUtil = require("../../utils/ThemeUtil");
-function Promo({
-  text,
-  style,
-  onPress
-}) {
-  const Theme = (0, _useTheme.useTheme)();
-  return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
-    style: style,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(_wuiFlex.FlexView, {
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    padding: ['xs', 'xs', 'xs', 'm'],
-    style: [styles.container, {
-      backgroundColor: Theme['gray-glass-090']
-    }]
-  }, /*#__PURE__*/React.createElement(_wuiText.Text, {
-    variant: "small-600",
-    color: "bg-100"
-  }, text), /*#__PURE__*/React.createElement(_wuiIcon.Icon, {
-    style: styles.icon,
-    name: "arrowRight",
-    color: "bg-100",
-    size: "xs"
-  })));
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    borderRadius: _ThemeUtil.BorderRadius.full
-  },
-  icon: {
-    marginLeft: _ThemeUtil.Spacing['2xs']
-  }
-});
-//# sourceMappingURL=index.js.map

package/lib/commonjs/composites/wui-promo/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_wuiIcon","_wuiText","_useTheme","_wuiFlex","_ThemeUtil","Promo","text","style","onPress","Theme","useTheme","React","createElement","Pressable","FlexView","alignItems","justifyContent","flexDirection","padding","styles","container","backgroundColor","Text","variant","color","Icon","icon","name","size","StyleSheet","create","borderRadius","BorderRadius","full","marginLeft","Spacing"],"sourceRoot":"../../../../src","sources":["composites/wui-promo/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAQO,SAASM,KAAKA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EAC1D,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,oBACEC,KAAA,CAAAC,aAAA,CAACd,YAAA,CAAAe,SAAS;IAACN,KAAK,EAAEA,KAAM;IAACC,OAAO,EAAEA;EAAQ,gBACxCG,KAAA,CAAAC,aAAA,CAACT,QAAA,CAAAW,QAAQ;IACPC,UAAU,EAAC,QAAQ;IACnBC,cAAc,EAAC,QAAQ;IACvBC,aAAa,EAAC,KAAK;IACnBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAE;IACjCX,KAAK,EAAE,CAACY,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAEZ,KAAK,CAAC,gBAAgB;IAAE,CAAC;EAAE,gBAExEE,KAAA,CAAAC,aAAA,CAACX,QAAA,CAAAqB,IAAI;IAACC,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAQ,GACrClB,IACG,CAAC,eACPK,KAAA,CAAAC,aAAA,CAACZ,QAAA,CAAAyB,IAAI;IAAClB,KAAK,EAAEY,MAAM,CAACO,IAAK;IAACC,IAAI,EAAC,YAAY;IAACH,KAAK,EAAC,QAAQ;IAACI,IAAI,EAAC;EAAI,CAAE,CAC9D,CACD,CAAC;AAEhB;AAEA,MAAMT,MAAM,GAAGU,uBAAU,CAACC,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,YAAY,EAAEC,uBAAY,CAACC;EAC7B,CAAC;EACDP,IAAI,EAAE;IACJQ,UAAU,EAAEC,kBAAO,CAAC,KAAK;EAC3B;AACF,CAAC,CAAC"}

package/lib/module/composites/wui-promo/index.js

@@ -1,42 +0,0 @@
-import { Pressable, StyleSheet } from 'react-native';
-import { Icon } from '../../components/wui-icon';
-import { Text } from '../../components/wui-text';
-import { useTheme } from '../../hooks/useTheme';
-import { FlexView } from '../../layout/wui-flex';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-export function Promo({
-  text,
-  style,
-  onPress
-}) {
-  const Theme = useTheme();
-  return /*#__PURE__*/React.createElement(Pressable, {
-    style: style,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(FlexView, {
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    padding: ['xs', 'xs', 'xs', 'm'],
-    style: [styles.container, {
-      backgroundColor: Theme['gray-glass-090']
-    }]
-  }, /*#__PURE__*/React.createElement(Text, {
-    variant: "small-600",
-    color: "bg-100"
-  }, text), /*#__PURE__*/React.createElement(Icon, {
-    style: styles.icon,
-    name: "arrowRight",
-    color: "bg-100",
-    size: "xs"
-  })));
-}
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: BorderRadius.full
-  },
-  icon: {
-    marginLeft: Spacing['2xs']
-  }
-});
-//# sourceMappingURL=index.js.map

package/lib/module/composites/wui-promo/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Pressable","StyleSheet","Icon","Text","useTheme","FlexView","BorderRadius","Spacing","Promo","text","style","onPress","Theme","React","createElement","alignItems","justifyContent","flexDirection","padding","styles","container","backgroundColor","variant","color","icon","name","size","create","borderRadius","full","marginLeft"],"sourceRoot":"../../../../src","sources":["composites/wui-promo/index.tsx"],"mappings":"AAAA,SAASA,SAAS,EAAEC,UAAU,QAAwC,cAAc;AACpF,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,EAAEC,OAAO,QAAQ,uBAAuB;AAQ7D,OAAO,SAASC,KAAKA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EAC1D,MAAMC,KAAK,GAAGR,QAAQ,CAAC,CAAC;EAExB,oBACES,KAAA,CAAAC,aAAA,CAACd,SAAS;IAACU,KAAK,EAAEA,KAAM;IAACC,OAAO,EAAEA;EAAQ,gBACxCE,KAAA,CAAAC,aAAA,CAACT,QAAQ;IACPU,UAAU,EAAC,QAAQ;IACnBC,cAAc,EAAC,QAAQ;IACvBC,aAAa,EAAC,KAAK;IACnBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAE;IACjCR,KAAK,EAAE,CAACS,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAET,KAAK,CAAC,gBAAgB;IAAE,CAAC;EAAE,gBAExEC,KAAA,CAAAC,aAAA,CAACX,IAAI;IAACmB,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAQ,GACrCd,IACG,CAAC,eACPI,KAAA,CAAAC,aAAA,CAACZ,IAAI;IAACQ,KAAK,EAAES,MAAM,CAACK,IAAK;IAACC,IAAI,EAAC,YAAY;IAACF,KAAK,EAAC,QAAQ;IAACG,IAAI,EAAC;EAAI,CAAE,CAC9D,CACD,CAAC;AAEhB;AAEA,MAAMP,MAAM,GAAGlB,UAAU,CAAC0B,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,YAAY,EAAEtB,YAAY,CAACuB;EAC7B,CAAC;EACDL,IAAI,EAAE;IACJM,UAAU,EAAEvB,OAAO,CAAC,KAAK;EAC3B;AACF,CAAC,CAAC"}

package/lib/typescript/composites/wui-promo/index.d.ts

@@ -1,8 +0,0 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
-export interface PromoProps {
-    text: string;
-    style?: StyleProp<ViewStyle>;
-    onPress?: () => void;
-}
-export declare function Promo({ text, style, onPress }: PromoProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/composites/wui-promo/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/composites/wui-promo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOrF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,2CAmBzD"}

package/src/composites/wui-promo/index.tsx

@@ -1,42 +0,0 @@
-import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import { Icon } from '../../components/wui-icon';
-import { Text } from '../../components/wui-text';
-import { useTheme } from '../../hooks/useTheme';
-import { FlexView } from '../../layout/wui-flex';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
-
-export interface PromoProps {
-  text: string;
-  style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-}
-
-export function Promo({ text, style, onPress }: PromoProps) {
-  const Theme = useTheme();
-
-  return (
-    <Pressable style={style} onPress={onPress}>
-      <FlexView
-        alignItems="center"
-        justifyContent="center"
-        flexDirection="row"
-        padding={['xs', 'xs', 'xs', 'm']}
-        style={[styles.container, { backgroundColor: Theme['gray-glass-090'] }]}
-      >
-        <Text variant="small-600" color="bg-100">
-          {text}
-        </Text>
-        <Icon style={styles.icon} name="arrowRight" color="bg-100" size="xs" />
-      </FlexView>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: BorderRadius.full
-  },
-  icon: {
-    marginLeft: Spacing['2xs']
-  }
-});