@momo-kits/foundation 0.160.1-rn.84 → 0.161.1-beta.1

package/Application/BottomSheet.tsx

@@ -39,7 +39,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const heightHeader = useHeaderHeight();
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const {
     screen: Screen,

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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * 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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const renderIcon = () => {
     if (icon === undefined) {

package/Application/BottomTab/index.tsx

@@ -376,7 +376,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 return (
                   <Text
                     numberOfLines={1}
-                    maxScaleRate={1.4}
                     typography={
                       focused ? 'label_xs_medium' : 'description_xs_regular'
                     }

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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     return (
       <View

package/Application/NavigationContainer.tsx

@@ -35,28 +35,31 @@ 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({});
+  const [currentContext, setCurrentContext] = useState<any>({});
+  const [allowFontScale, setAllowFontScale] = useState<boolean>(
+    context?.designSystemConfig?.allowFontScale ?? true,
+  );
+
+  useEffect(() => {
+    maxApi?.getDataObserver?.('allow_font_scale', (value: boolean) => {
+      setAllowFontScale(value ?? true);
+    });
+  }, [maxApi]);
+
+  const mergedContext = {
+    ...context,
+    ...currentContext,
+    designSystemConfig: {
+      ...context?.designSystemConfig,
+      allowFontScale,
+    },
+  };
 
   return (
     <SafeAreaProvider>
-      <MiniAppContext.Provider
-        value={{
-          ...context,
-          ...currentContext,
-          features: {
-            ...context?.features,
-            ...features,
-          },
-        }}
-      >
+      <MiniAppContext.Provider value={mergedContext}>
         <Navigation
           screen={screen}
           theme={theme}

package/Application/WidgetContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
@@ -42,6 +42,15 @@ 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(() => {
+    maxApi?.getDataObserver?.('allow_font_scale', (value: boolean) => {
+      setAllowFontScale(value ?? true);
+    });
+  }, [maxApi]);
 
   let headerBackground = context?.designConfig?.headerBar;
   let headerGradient = theme.colors?.gradient;
@@ -67,15 +76,19 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
 
   navigator.current.setCurrentContext = setCurrentContext;
 
+  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={{
-            ...context,
-            ...currentContext,
-          }}
-        >
+        <MiniAppContext.Provider value={mergedContext}>
           <ApplicationContext.Provider
             value={{
               navigator: navigator.current,

package/Application/index.ts

@@ -16,7 +16,6 @@ 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 {
@@ -29,6 +28,5 @@ export {
   Navigation,
   Navigator,
   exportHeaderTitle,
-  ScaleSizeProvider,
   useTooltipPortal,
 };

package/Application/types.ts

@@ -107,11 +107,6 @@ export type Theme = {
   };
 };
 
-export type ScaleSizeProviderProps = {
-  scaleSizeMaxRate?: number;
-  children: ViewProps['children'];
-};
-
 export type Context = {
   [key: string]: any;
   theme: Theme;
@@ -158,7 +153,6 @@ 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?.features?.showBaseLineDebug ?? false;
-  
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+
   const styles = StyleSheet.create({
     badge: {
       paddingHorizontal: Spacing.XS,
@@ -84,7 +84,13 @@ 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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const ribbonRotate = useMemo(() => (isRight ? '180deg' : '0deg'), [isRight]);
   const textRotate = ribbonRotate;

package/Badge/styles.ts

@@ -1,6 +1,5 @@
 import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
-import {scaleSize} from '../Text';
 
 const DOT_SIZE = 16;
 
@@ -12,8 +11,8 @@ export default StyleSheet.create({
     borderRadius: Radius.M,
     justifyContent: 'center',
     alignItems: 'center',
-    height: scaleSize(16) - 2,
-    minWidth: scaleSize(16) - 2,
+    height: DOT_SIZE - 2,
+    minWidth: DOT_SIZE - 2,
     flexDirection: 'row',
     alignSelf: 'baseline',
   },
@@ -21,8 +20,8 @@ export default StyleSheet.create({
     borderRadius: Radius.M,
     justifyContent: 'center',
     alignItems: 'center',
-    height: scaleSize(16),
-    minWidth: scaleSize(16),
+    height: DOT_SIZE,
+    minWidth: DOT_SIZE,
     flexDirection: 'row',
     borderWidth: 1,
     borderColor: Colors.black_01,

package/Button/index.tsx

@@ -77,7 +77,7 @@ const Button: FC<ButtonProps> = ({
   const animationRef = useRef<LottieView>(null);
   const pressAnim = useSharedValue(0);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   if (haveValue) {
     borderColor = theme.colors.primary;

package/Context/index.ts

@@ -9,9 +9,6 @@ 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,
 });
@@ -23,5 +20,4 @@ export {
   ComponentContext,
   SkeletonContext,
   TrackingScopeContext,
-  ScaleSizeContext,
 };

package/Divider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import { View, ViewStyle } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Spacing } from '../Consts';
 import { DashDivider } from './DashDivider';
@@ -8,7 +8,7 @@ export interface DividerProps {
   /**
    * Custom styles for divider
    */
-  style?: StyleProp<ViewStyle>;
+  style?: ViewStyle;
 
   /**
    * Enable margin vertical 4px
@@ -30,13 +30,13 @@ const Divider: React.FC<DividerProps> = ({
   return (
     <View
       style={[
+        style,
         {
           height: 1,
           width: '100%',
           backgroundColor: theme.colors.border.default,
           marginVertical: useMargin ? Spacing.XS : 0,
         },
-        style,
       ]}
     />
   );

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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * 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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * get size icon button

package/Image/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, useState } from 'react';
-import { Image as RNImage, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {
@@ -23,10 +23,6 @@ export const getImageName = (source: any): string => {
   return '';
 };
 
-const isDataUriSource = (source: any): boolean => {
-  return typeof source?.uri === 'string' && source.uri.startsWith('data:');
-};
-
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -41,8 +37,7 @@ const Image: React.FC<ImageProps> = ({
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-  const useFastImage = !isDataUriSource(source);
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   let accessibilityLabel: any = `img|${getImageName(source)}`;
   if (component?.componentId) {
@@ -79,46 +74,6 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
-  if (!useFastImage) {
-    return (
-      <RNImage
-        {...rest}
-        {...{
-          accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel,
-        }}
-        source={source}
-        style={[
-          styles.container,
-          style,
-          showBaseLineDebug && styles.debugBaseLine,
-        ]}
-        onLoadStart={() => {
-          error.current = false;
-          if (status !== 'loading' && loading) {
-            setStatus('loading');
-          }
-        }}
-        onLoad={() => {
-          error.current = false;
-        }}
-        onLoadEnd={() => {
-          let current: Status = 'success';
-          if (error.current) {
-            current = 'error';
-          }
-          setStatus(prevState =>
-            prevState !== current ? current : prevState,
-          );
-        }}
-        onError={() => {
-          error.current = true;
-        }}
-      >
-        {renderContent()}
-      </RNImage>
-    );
-  }
-
   return (
     <FastImage
       {...rest}

package/Input/Input.tsx

@@ -75,13 +75,13 @@ const Input = forwardRef(
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const scaledFontSize = useScaleSize(14);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
     const haveValue = !!value || !!defaultValue;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputDropDown.tsx

@@ -40,10 +40,10 @@ const InputDropDown = ({
 }: InputDropDownProps) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+  const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
   const componentName = 'InputDropDown';
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const { componentId } = useComponentId(
     `${componentName}/${placeholder}`,

package/Input/InputMoney.tsx

@@ -67,7 +67,7 @@ const InputMoney = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const scaledFontSize = useScaleSize(20);
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
@@ -76,7 +76,7 @@ const InputMoney = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputOTP.tsx

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

package/Input/InputPhoneNumber.tsx

@@ -67,13 +67,13 @@ const InputPhoneNumber = forwardRef(
   ) => {
     const { theme } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56, 1.1);
+    const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
     const haveValue = !!value || !!defaultValue;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
     const { componentId } = useComponentId(
       `${componentName}/${placeholder}`,

package/Input/InputSearch.tsx

@@ -35,6 +35,7 @@ const TextTyping: FC<any> = ({
   timeDelayNextChar = 20,
 }) => {
   const textRef = useRef<TextInput>(null);
+  const scaledFontSize = useScaleSize(12);
 
   const currentIndex = useRef<number>(0);
   const currentCharIndex = useRef<number>(0);
@@ -107,7 +108,7 @@ const TextTyping: FC<any> = ({
 
   return (
     <TextInput
-      style={styles.inputStyle}
+      style={[styles.inputStyle, { fontSize: scaledFontSize }]}
       ref={textRef}
       editable={false}
       autoCorrect={false}
@@ -145,7 +146,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   const context = useContext<any>(MiniAppContext);
   const scaledFontSize = useScaleSize(14);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const [focused, setFocused] = useState(false);
   const [internalText, setInternalText] = useState(defaultValue || '');

package/Input/InputTextArea.tsx

@@ -57,7 +57,7 @@ const InputTextArea = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const DEFAULT_HEIGHT = useScaleSize(104);
 
-    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+    const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
     const scaledFontSize = useScaleSize(14);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');

package/Input/styles.ts

@@ -1,13 +1,11 @@
 import { Platform, StyleSheet } from 'react-native';
 import { Colors, Radius, Spacing } from '../Consts';
-import { scaleSize } from '../Text';
 
 export default StyleSheet.create({
   //input style
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(14),
     height: '100%',
   },
   wrapper: {
@@ -76,7 +74,6 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -129,13 +126,11 @@ export default StyleSheet.create({
     width: '100%',
     paddingLeft: Spacing.M,
     height: '100%',
-    fontSize: scaleSize(20),
     paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
   inputStyle: {
     color: Colors.black_12,
-    fontSize: scaleSize(12),
     height: Platform.select({
       android: 60,
       ios: 36,
@@ -217,7 +212,7 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
-  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
+  currency: { fontWeight: 'bold' },
   phoneNumberDivider: {
     width: 1,
     marginLeft: Spacing.M,

package/Layout/FloatingButton.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
+import { useScaleSize } from '../Text';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -39,6 +40,8 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   bottom = 12,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ApplicationContext);
+  const scaledFontSize = useScaleSize(16);
+  const scaledLineHeight = useScaleSize(22);
   const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;
   const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
@@ -148,7 +151,15 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         {showText && !!label && (
           <Animated.Text
             allowFontScaling={false}
-            style={[styles.label, { opacity: opacityAnimated, color: 'white' }]}
+            style={[
+              styles.label,
+              {
+                fontSize: scaledFontSize,
+                lineHeight: scaledLineHeight,
+                opacity: opacityAnimated,
+                color: 'white',
+              },
+            ]}
             numberOfLines={1}
           >
             {label}
@@ -172,8 +183,6 @@ const styles = StyleSheet.create({
   },
   label: {
     marginLeft: 8,
-    fontSize: 16,
-    lineHeight: 22,
     fontWeight: '700',
   },
 });

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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * render overlay view only dev mode

package/Pagination/PaginationDot.tsx

@@ -14,7 +14,7 @@ const PaginationDot: FC<ChildPaginationProps> = ({
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * on action popup
@@ -92,7 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.5625, // 9:16
+    aspectRatio: 0.72,
     width: '100%',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },

package/Radio/index.tsx

@@ -33,7 +33,7 @@ const Radio: FC<RadioProps> = ({
     accessibilityLabel,
   );
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const styles = StyleSheet.create({
     container: {

package/Text/index.tsx

@@ -75,12 +75,6 @@ export interface TextProps extends RNTextProps {
    * Ex: MomoSignature, MomoTrustDisplay
    */
   fontFamily?: string;
-
-  /**
-   * Optional. Modified max scale rate of scaleSize function in Text component, default is 1.5.
-   * Ex: 1.5, 2
-   */
-  maxScaleRate?: number;
 }
 
 const deprecatedValues: Typography[] = [
@@ -98,11 +92,7 @@ const deprecatedValues: Typography[] = [
   'action_s',
 ];
 
-const TypoStyles = (
-  typo: Typography,
-  newFontFamily?: string,
-  maxScaleRate?: number,
-) => {
+const TypoStyles = (typo: Typography, newFontFamily?: string) => {
   const { theme } = useContext(ApplicationContext);
   const styleSheet: {
     [key: string]: any;
@@ -142,8 +132,8 @@ const TypoStyles = (
   return {
     ...typoStyle,
     fontFamily,
-    fontSize: useScaleSize(fontSize, maxScaleRate),
-    lineHeight: useScaleSize(lineHeight, maxScaleRate),
+    fontSize: useScaleSize(fontSize),
+    lineHeight: useScaleSize(lineHeight),
     fontStyle,
     fontWeight,
   };
@@ -155,13 +145,12 @@ const Text: React.FC<TextProps> = ({
   children,
   style,
   fontFamily,
-  maxScaleRate,
   ...rest
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const skeleton = useContext(SkeletonContext);
-  const textStyle = TypoStyles(typography, fontFamily, maxScaleRate);
+  const textStyle = TypoStyles(typography, fontFamily);
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
@@ -169,7 +158,7 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   if (skeleton.loading) {
     return (

package/Text/utils.ts

@@ -1,63 +1,39 @@
 import { Dimensions, PixelRatio, useWindowDimensions } from 'react-native';
 import { useContext } from 'react';
-import { ScaleSizeContext } from '../Context';
+import { MiniAppContext } from '../Context';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
-const MAX_FONT_SCALE = 1.5;
-const MAX_DEVICE_SCALE = 5;
+const MAX_FONT_SCALE = 1.2;
 
-const useScaleSize = (size: number, scaleRate?: number) => {
-  const scaleSizeContext = useContext<any>(ScaleSizeContext);
-  const fontScale = PixelRatio.getFontScale();
-  const windowSize = useWindowDimensions();
-  const deviceScale = windowSize.width / DEFAULT_SCREEN_SIZE;
-
-  const maxScaleRate =
-    scaleRate || scaleSizeContext?.scaleSizeMaxRate || MAX_FONT_SCALE;
+const useScaleSize = (size: number) => {
+  const { width } = useWindowDimensions();
+  const context = useContext<any>(MiniAppContext);
+  const allowFontScale = context?.designSystemConfig?.allowFontScale ?? true;
 
-  let fontSizeDeviceScale = size;
-  let fontSizeOSScale = size;
+  if (allowFontScale) {
+    const deviceScale = width / DEFAULT_SCREEN_SIZE;
+    const fontScale = PixelRatio.getFontScale();
 
-  if (deviceScale > 1) {
-    fontSizeDeviceScale = Math.min(
-      fontSizeDeviceScale * deviceScale,
-      fontSizeDeviceScale + MAX_DEVICE_SCALE,
-    );
-  }
+    const maxSize = size * MAX_FONT_SCALE;
+    const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
+    const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
 
-  if (fontScale > 1) {
-    fontSizeOSScale = Math.min(
-      fontSizeOSScale * fontScale,
-      fontSizeOSScale * maxScaleRate,
-    );
+    return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
   }
 
-  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+  return size;
 };
 
 const scaleSize = (size: number) => {
-  const fontScale = PixelRatio.getFontScale();
   const deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE;
+  const fontScale = PixelRatio.getFontScale();
 
-  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,
-    );
-  }
+  const maxSize = size * MAX_FONT_SCALE;
+  const fontSizeScaleDevice = deviceScale > 1 ? deviceScale * size : size;
+  const fontSizeScaleOS = fontScale > 1 ? fontScale * size : size;
 
-  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
+  return Math.min(Math.max(fontSizeScaleDevice, fontSizeScaleOS), maxSize);
 };
 
 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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const size18 = useScaleSize(18);
   const size22 = useScaleSize(22);

package/package.json

@@ -1,35 +1,35 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.160.1-rn.84",
-    "description": "React Native Component Kits",
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "license": "MoMo",
-    "main": "index.ts",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "scripts": {},
-    "dependencies": {
-        "@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",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.3.4",
-        "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-native-gesture-handler": "2.31.0",
-        "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.7.0"
-    },
-    "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    }
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.161.1-beta.1",
+  "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"
+}

package/Application/ScaleSizeProvider.tsx

@@ -1,16 +0,0 @@
-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;