@momo-kits/foundation 0.161.1-beta.2 → 0.161.2-beta.10

package/Application/BottomSheet.tsx

@@ -37,9 +37,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const keyboardOffset = heightHeader - bottomInset;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const {
     screen: Screen,
@@ -311,7 +312,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           {useBottomInset && (
             <View
               style={{
-                height: Math.min(insets.bottom, 21),
+                height: bottomInset,
                 backgroundColor: backgroundColor,
               }}
             />

package/Application/BottomTab/BottomTabBar.tsx

@@ -63,7 +63,7 @@ export default function BottomTabBar({
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
 
   const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * render tab item
@@ -299,7 +299,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     top: -2,
-    bottom: Platform.OS === 'ios' ? -6 : 4,
+    bottom: Platform.OS === 'ios' ? -6 : 4
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -61,7 +61,7 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   allowFontScaling,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const renderIcon = () => {
     if (icon === undefined) {

package/Application/BottomTab/index.tsx

@@ -320,7 +320,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           activeTintColor={theme.colors.primary}
           style={[
             {
-              height: 64 + Math.min(insets.bottom, 21),
+              height: 64 + (Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom),
             },
           ]}
         />

package/Application/Components/HeaderBackground.tsx

@@ -24,7 +24,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],

package/Application/Components/HeaderExtendHeader.tsx

@@ -49,7 +49,7 @@ const HeaderExtendHeader: React.FC<{
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],

package/Application/Components/HeaderTitle.tsx

@@ -24,7 +24,7 @@ import { Skeleton } from '../../Skeleton';
 const HeaderTitle: React.FC<any> = props => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const opacity = props.animatedValue?.interpolate(
     props.interpolate ?? {

package/Application/Components/SearchHeader.tsx

@@ -77,7 +77,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
       return true;
     };
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     return (
       <View

package/Application/NavigationContainer.tsx

@@ -16,6 +16,7 @@ import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -35,44 +36,39 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   initialParams,
   localize = new Localize({ vi: {}, en: {} }),
+  features = {
+    enableBottomTabAnimation: true,
+    enableHapticDialog: true,
+    enableForceFoundationList: false,
+    enableHapticBottomTab: true,
+  },
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
-  const [allowFontScale, setAllowFontScale] = useState<boolean>(
-    context?.designSystemConfig?.allowFontScale ?? true,
-  );
-
-  useEffect(() => {
-    const sub = maxApi?.observer?.('use_font_scale', (value: boolean) => {
-      setAllowFontScale(value ?? true);
-    });
-
-    return () => {
-      sub?.remove?.();
-    };
-  }, []);
 
   const mergedContext = {
     ...context,
     ...currentContext,
-    designSystemConfig: {
-      ...context?.designSystemConfig,
-      allowFontScale,
+    features: {
+      ...context?.features,
+      ...features,
     },
   };
 
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <Navigation
-          screen={screen}
-          theme={theme}
-          options={options}
-          maxApi={maxApi}
-          setCurrentContext={setCurrentContext}
-          initialParams={initialParams}
-          localize={localize}
-        />
+        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
+          <Navigation
+            screen={screen}
+            theme={theme}
+            options={options}
+            maxApi={maxApi}
+            setCurrentContext={setCurrentContext}
+            initialParams={initialParams}
+            localize={localize}
+          />
+        </ScaleSizeProvider>
       </MiniAppContext.Provider>
     </SafeAreaProvider>
   );

package/Application/ScaleSizeProvider.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { ScaleSizeContext } from '../Context';
+import { ScaleSizeProviderProps } from './types';
+
+const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
+  scaleSizeMaxRate,
+  children,
+}) => {
+  return (
+    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
+      {children}
+    </ScaleSizeContext.Provider>
+  );
+};
+
+export default ScaleSizeProvider;

package/Application/WidgetContainer.tsx

@@ -1,6 +1,7 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
@@ -42,19 +43,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
-  const [allowFontScale, setAllowFontScale] = useState<boolean>(
-    context?.designSystemConfig?.allowFontScale ?? true,
-  );
-
-  useEffect(() => {
-    const sub = maxApi?.observer?.('use_font_scale', (value: boolean) => {
-      setAllowFontScale(value ?? true);
-    });
 
-    return () => {
-      sub?.remove?.();
-    };
-  }, []);
   let headerBackground = context?.designConfig?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -82,16 +71,15 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const mergedContext = {
     ...context,
     ...currentContext,
-    designSystemConfig: {
-      ...context?.designSystemConfig,
-      allowFontScale,
-    },
   };
 
   return (
-    <View style={{ height: height ?? '100%', minHeight: 1 }}>
+    <View style={{ height: height ?? '100%', minHeight:1 }}>
       <SafeAreaProvider>
         <MiniAppContext.Provider value={mergedContext}>
+          <ScaleSizeProvider
+            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
+          >
           <ApplicationContext.Provider
             value={{
               navigator: navigator.current,
@@ -169,6 +157,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               </ReactNavigationContainer>
             </NavigationIndependentTree>
           </ApplicationContext.Provider>
+          </ScaleSizeProvider>
         </MiniAppContext.Provider>
       </SafeAreaProvider>
     </View>

package/Application/index.ts

@@ -16,6 +16,7 @@ export * from './Components/SearchHeader';
 import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
 import { useTooltipPortal } from './TooltipPortal';
 
 export {
@@ -28,5 +29,6 @@ export {
   Navigation,
   Navigator,
   exportHeaderTitle,
+  ScaleSizeProvider,
   useTooltipPortal,
 };

package/Application/types.ts

@@ -107,6 +107,11 @@ export type Theme = {
   };
 };
 
+export type ScaleSizeProviderProps = {
+  scaleSizeMaxRate?: number;
+  children: ViewProps['children'];
+};
+
 export type Context = {
   [key: string]: any;
   theme: Theme;
@@ -153,6 +158,7 @@ export type NavigationContainerProps = {
   maxApi: any;
   initialParams?: any;
   localize: LocalizeProps;
+  features?: FeatureFlags;
 };
 
 export type WidgetContainerProps = {

package/Badge/Badge.tsx

@@ -18,8 +18,8 @@ const Badge: FC<BadgeProps> = ({
   const { componentId } = useComponentId('Badge', accessibilityLabel);
   const scaledSize = useScaleSize(16);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
-
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  
   const styles = StyleSheet.create({
     badge: {
       paddingHorizontal: Spacing.XS,
@@ -84,13 +84,7 @@ const Badge: FC<BadgeProps> = ({
   }
 
   return (
-    <View
-      style={[
-        style,
-        styles.badgeContainer,
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
+    <View style={[style, styles.badgeContainer, showBaseLineDebug && styles.debugBaseLine]}>
       <View
         style={[styles.badge, { backgroundColor: badgeColor }]}
         accessibilityLabel={componentId}

package/Badge/BadgeDot.tsx

@@ -9,7 +9,7 @@ const BadgeDot: FC<BadgeDotProps> = ({ size = 'large', style }) => {
   let dotStyle;
   let dotContainerStyle;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   if (size === 'large') {
     dotStyle = styles.dot;

package/Badge/BadgeRibbon.tsx

@@ -19,7 +19,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   const isRight = position === 'top_right' || position === 'bottom_right';
   const isUpTail = position === 'bottom_left' || position === 'top_right';
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
   const textRotate = ribbonRotate;

package/Button/index.tsx

@@ -77,7 +77,7 @@ const Button: FC<ButtonProps> = ({
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const componentName = 'Button';
   const { componentId } = useComponentId(
@@ -355,7 +355,7 @@ const Button: FC<ButtonProps> = ({
         onPressOut={animateOut}
       >
         <Reanimated.View style={[buttonStyle, animatedStyle]}>
-          {renderIcon('left')}
+        {renderIcon('left')}
           {renderTitle()}
           {renderIcon('right')}
           {gradientPros && (

package/CheckBox/index.tsx

@@ -34,7 +34,7 @@ const CheckBox: FC<CheckBoxProps> = ({
     props.accessibilityLabel,
   );
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   if (haveValue) {
     borderColor = theme.colors.primary;

package/Context/index.ts

@@ -9,6 +9,9 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
+const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
+  scaleSizeMaxRate: undefined,
+});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });
@@ -20,4 +23,5 @@ export {
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,
+  ScaleSizeContext,
 };

package/Icon/index.tsx

@@ -17,7 +17,7 @@ const Icon: React.FC<IconProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * get icon source maps or remote http

package/IconButton/index.tsx

@@ -46,7 +46,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * get size icon button

package/Image/index.tsx

@@ -28,6 +28,11 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
+  onProgress,
+  onLoadStart,
+  onLoad,
+  onLoadEnd,
+  onError,
   ...rest
 }) => {
   const { theme } = useContext(ApplicationContext);
@@ -37,7 +42,7 @@ const Image: React.FC<ImageProps> = ({
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
@@ -84,17 +89,20 @@ const Image: React.FC<ImageProps> = ({
         style,
         showBaseLineDebug && styles.debugBaseLine,
       ]}
-      onProgress={() => {
+      onProgress={event => {
         error.current = false;
         if (status !== 'loading' && loading) {
           setStatus('loading');
         }
+        onProgress?.(event);
       }}
       onLoadStart={() => {
         error.current = false;
+        onLoadStart?.();
       }}
-      onLoad={() => {
+      onLoad={event => {
         error.current = false;
+        onLoad?.(event);
       }}
       onLoadEnd={() => {
         let current: Status = 'success';
@@ -102,9 +110,11 @@ const Image: React.FC<ImageProps> = ({
           current = 'error';
         }
         setStatus(prevState => (prevState !== current ? current : prevState));
+        onLoadEnd?.();
       }}
       onError={() => {
         error.current = true;
+        onError?.();
       }}
     >
       {renderContent()}

package/Input/Input.tsx

@@ -81,7 +81,7 @@ const Input = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputDropDown.tsx

@@ -43,7 +43,7 @@ const InputDropDown = ({
   const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
   const componentName = 'InputDropDown';
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,

package/Input/InputMoney.tsx

@@ -76,7 +76,7 @@ const InputMoney = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputOTP.tsx

@@ -99,7 +99,7 @@ const InputOTP = forwardRef(
 
     const componentName = 'InputOTP';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputPhoneNumber.tsx

@@ -73,7 +73,7 @@ const InputPhoneNumber = forwardRef(
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputSearch.tsx

@@ -146,7 +146,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');

package/Input/InputTextArea.tsx

@@ -21,7 +21,7 @@ import { ErrorView, FloatingView, getBorderColor, MAX_LENGTH } from './common';
 import { InputTextAreaProps } from './index';
 import styles from './styles';
 import SystemTextInput from './SystemTextInput';
-import { useComponentId } from '../Application';
+import { setAutomationID, useComponentId } from '../Application';
 
 const InputTextArea = forwardRef(
   (
@@ -57,7 +57,7 @@ const InputTextArea = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const DEFAULT_HEIGHT = useScaleSize(104);
 
-    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
     const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
@@ -121,6 +121,8 @@ const InputTextArea = forwardRef(
 
       return (
         <View
+          accessible={false}
+          importantForAccessibility="no"
           style={[
             styles.textAreaWrapper,
             {
@@ -139,11 +141,15 @@ const InputTextArea = forwardRef(
             componentId={componentId}
           />
           <View style={styles.rowArea}>
-            <View style={styles.textAreaView}>
+            <View
+              accessible={false}
+              importantForAccessibility="no"
+              style={styles.textAreaView}
+            >
               <SystemTextInput
                 {...props}
                 ref={inputRef}
-                accessibilityLabel={`${componentId}`}
+                {...setAutomationID(componentId)}
                 accessibilityState={{
                   disabled: disabled,
                   ...props.accessibilityState,

package/Layout/Item.tsx

@@ -27,7 +27,7 @@ const Item: React.FC<ItemProps> = ({
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * render overlay view only dev mode

package/Layout/Screen.tsx

@@ -204,9 +204,10 @@ const Screen = forwardRef(
     let handleScroll;
     let Component: any = View;
 
-    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    let keyboardOffset = heightHeader - bottomInset;
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -Math.min(insets.bottom, 21);
+      keyboardOffset = -bottomInset;
     }
 
     /**
@@ -616,7 +617,7 @@ const Screen = forwardRef(
                 {...floatingButtonProps}
                 animatedValue={animatedValue.current}
                 bottom={
-                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                  Footer || isTab ? 12 : bottomInset + Spacing.S
                 }
               />
             </View>
@@ -627,7 +628,7 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  paddingBottom: bottomInset + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
               ]}

package/Pagination/PaginationDot.tsx

@@ -14,7 +14,7 @@ const PaginationDot: FC<ChildPaginationProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const renderDots = () => {
     const dots: React.ReactElement[] = [];

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   return (
     <View

package/Pagination/PaginationScroll.tsx

@@ -17,7 +17,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const translateX = () => {
     if (scrollViewWidth && scrollContentWidth) {

package/Pagination/PaginationWhiteDot.tsx

@@ -13,7 +13,7 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const renderDots = () => {
     const dots: React.ReactElement[] = [];

package/Popup/PopupNotify.tsx

@@ -32,7 +32,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const { width: widthDevice } = Dimensions.get('window');
   const scaledMaxHeight = useScaleSize(172);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;

package/Popup/PopupPromotion.tsx

@@ -17,7 +17,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   const { width: widthDevice } = Dimensions.get('window');
   const closeAction = useRef('touch_outside');
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * on action popup

package/Radio/index.tsx

@@ -33,7 +33,7 @@ const Radio: FC<RadioProps> = ({
     accessibilityLabel,
   );
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   let disabledStyle = {};
   let checkBoxStyle = {
     borderWidth: 2,

package/Switch/index.tsx

@@ -22,7 +22,7 @@ const Switch: FC<SwitchProps> = ({
 
   const { componentId } = useComponentId(componentName, accessibilityLabel);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {

package/Tag/index.tsx

@@ -38,7 +38,7 @@ const Tag: FC<TagProps> = ({
   const scaledHeight24 = useScaleSize(24);
   const scaledHeight18 = useScaleSize(18);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const styles = StyleSheet.create({
     container: {

package/Text/index.tsx

@@ -158,7 +158,7 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   if (skeleton.loading) {
     return (

package/Text/utils.ts

@@ -1,39 +1,62 @@
 import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
-import { MiniAppContext } from '../Context';
+import { ScaleSizeContext } from '../Context';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
-const MAX_FONT_SCALE = 1.2;
+const MAX_FONT_SCALE = 1.5;
+const MAX_DEVICE_SCALE = 5;
 
-const useScaleSize = (size: number) => {
+const useScaleSize = (size: number, scaleRate?: number) => {
+  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
+  const fontScale = PixelRatio.getFontScale();
   const { width } = useWindowDimensions();
-  const context = useContext<any>(MiniAppContext);
-  const allowFontScale = context?.designSystemConfig?.allowFontScale ?? true;
+  const deviceScale = width / DEFAULT_SCREEN_SIZE;
+
+  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
 
-  if (allowFontScale) {
-    const deviceScale = width / DEFAULT_SCREEN_SIZE;
-    const fontScale = PixelRatio.getFontScale();
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
 
-    const maxSize = size * MAX_FONT_SCALE;
-    const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
-    const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
+    );
+  }
 
-    return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * maxScaleRate,
+    );
   }
 
-  return size;
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
 const scaleSize = (size: number) => {
-  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
   const fontScale = PixelRatio.getFontScale();
+  const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
 
-  const maxSize = size * MAX_FONT_SCALE;
-  const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
-  const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
+  let fontSizeDeviceScale = size;
+  let fontSizeOSScale = size;
+
+  if (deviceScale > 1) {
+    fontSizeDeviceScale = Math.min(
+      fontSizeDeviceScale * deviceScale,
+      fontSizeDeviceScale + MAX_DEVICE_SCALE,
+    );
+  }
+
+  if (fontScale > 1) {
+    fontSizeOSScale = Math.min(
+      fontSizeOSScale * fontScale,
+      fontSizeOSScale * MAX_FONT_SCALE,
+    );
+  }
 
-  return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
 export { scaleSize, useScaleSize };

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const [badgeWidth, setBadgeWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.161.1-beta.2",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {},
-  "keywords": [
-    "@momo-kits/foundation"
-  ],
-  "dependencies": {
-    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-    "@react-navigation/bottom-tabs": "7.4.2",
-    "@react-navigation/core": "7.12.1",
-    "@react-navigation/elements": "2.5.2",
-    "@react-navigation/native": "7.1.14",
-    "@react-navigation/routers": "7.4.1",
-    "@react-navigation/stack": "7.4.2",
-    "react-native-gesture-handler": "2.27.1",
-    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-    "react-native-reanimated": "4.1.0",
-    "react-native-safe-area-context": "5.5.2",
-    "@shopify/flash-list": "2.1.0",
-    "lottie-react-native": "7.2.4"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@types/color": "3.0.6"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MoMo"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.161.2-beta.10",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {},
+    "keywords": [
+        "@momo-kits/foundation"
+    ],
+    "dependencies": {
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "@react-navigation/bottom-tabs": "7.4.2",
+        "@react-navigation/core": "7.12.1",
+        "@react-navigation/elements": "2.5.2",
+        "@react-navigation/native": "7.1.14",
+        "@react-navigation/routers": "7.4.1",
+        "@react-navigation/stack": "7.4.2",
+        "react-native-gesture-handler": "2.27.1",
+        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-reanimated": "4.2.2",
+        "react-native-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@types/color": "3.0.6"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "MoMo"
+}