@fountain-ui/core 3.0.0-alpha.47 → 3.0.0-alpha.49

package/src/TextField/useVariantStyleMap.ts

@@ -3,7 +3,32 @@ import type { TextStyle } from 'react-native';
 import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+import type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';
+
+const fontSizeStyleMap = {
+    large: {
+        fontSize: 18,
+        lineHeight: 27,
+        fontFamily: 'PretendardStd-SemiBold',
+        letterSpacing: 0,
+    },
+    small: {
+        fontSize: 14,
+        lineHeight: 21,
+        fontFamily: 'PretendardStd-Medium',
+        letterSpacing: 0,
+    },
+} as const;
+
+const containerPaddingMap = {
+    large: {
+        paddingVertical: 14,
+    },
+    small: {
+        paddingTop: 18,
+        paddingBottom: 16,
+    },
+} as const;
 
 interface VariantStyleMap {
     containerStyle?: FountainUiStyle;
@@ -33,7 +58,12 @@ function useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: s
     }
 }
 
-export default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {
+export default function useVariantStyleMap(
+    variant: TextFieldVariant,
+    status: TextFieldStatus,
+    isFocused: boolean,
+    inputFontSize: TextFieldInputFontSize = 'large',
+): VariantStyleMap {
     const theme = useTheme();
 
     const {
@@ -50,19 +80,14 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
                         gap: 16,
-                        minHeight: 60,
-                        paddingVertical: 16,
+                        minHeight: 54,
+                        ...containerPaddingMap[inputFontSize],
                     },
                     inputStyle: {
                         padding: 0,
                     },
                     inputFontStyle: createFontStyle(theme, {
-                        selector: (_) => typographyOf({
-                            fontSize: 18,
-                            lineHeight: 27,
-                            fontFamily: 'PretendardStd-SemiBold',
-                            letterSpacing: 0,
-                        }),
+                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),
                         color: theme.palette.text.strong,
                     }),
                     hintStyle: {
@@ -98,5 +123,5 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     }),
                 };
         }
-    }, [theme, borderColor, hintColor, variant, isFocused]);
+    }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }

package/src/Toolbar/BackButton/BackButton.tsx

@@ -33,12 +33,10 @@ export default function BackButton(props: BackButtonProps) {
             style={rootStyle}
             {...otherProps}
         >
-            <React.Fragment>
-                <AppBarChevronLeft
-                    height={24}
-                    width={24}
-                />
-            </React.Fragment>
+            <AppBarChevronLeft
+                height={24}
+                width={24}
+            />
         </IconButton>
     );
 }