@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

package/build/module/Tabs/useTabsStyle.js

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { useBreakpointUp } from '../hooks';
+import { useTheme } from '../styles';
+export default function useTabsStyle(variant, size, scrollable) {
+  const theme = useTheme();
+  const isSmallUp = useBreakpointUp('sm', true, false);
+  const isMediumUp = useBreakpointUp('md', true, false);
+  return useMemo(() => {
+    switch (variant) {
+      case 'circular':
+        {
+          const paddingHorizontal = isSmallUp ? 20 : size === 'small' ? 8 : 12;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'circular-home':
+        {
+          const paddingHorizontal = isSmallUp ? 20 : 8;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'bottom-navigation':
+        {
+          const paddingHorizontal = 24;
+          return {
+            container: { ...(isMediumUp ? {
+                alignSelf: 'center',
+                minWidth: 460
+              } : {}),
+              justifyContent: 'space-between',
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'default':
+      default:
+        {
+          const paddingHorizontal = isSmallUp ? 14 : 6;
+          return {
+            container: {
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+    }
+  }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
+}
+//# sourceMappingURL=useTabsStyle.js.map

package/build/module/Tabs/useTabsStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","size","scrollable","theme","isSmallUp","isMediumUp","paddingHorizontal","container","paddingBottom","contentContainer","alignSelf","minWidth","justifyContent"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n    container: FountainUiStyle;\n    contentContainer?: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {\n    const theme = useTheme();\n\n    const isSmallUp = useBreakpointUp('sm', true, false);\n\n    const isMediumUp = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular': {\n                const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);\n\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'circular-home': {\n                const paddingHorizontal = isSmallUp ? 20 : 8;\n\n                return {\n                    container: {\n                        paddingBottom: 8,\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'bottom-navigation': {\n                const paddingHorizontal = 24;\n\n                return {\n                    container: {\n                        ...(isMediumUp ? {\n                            alignSelf: 'center',\n                            minWidth: 460,\n                        } : {}),\n                        justifyContent: 'space-between',\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n            case 'default':\n            default: {\n                const paddingHorizontal = isSmallUp ? 14 : 6;\n\n                return {\n                    container: {\n                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n                    },\n                    contentContainer: {\n                        paddingHorizontal: scrollable ? paddingHorizontal : 0,\n                    },\n                };\n            }\n        }\n    }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAQA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0DC,UAA1D,EAA+E;EAC1F,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,SAAS,GAAGP,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,MAAMQ,UAAU,GAAGR,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAlC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QAAiB;UACb,MAAMM,iBAAiB,GAAGF,SAAS,GAAG,EAAH,GAASH,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB,EAAnE;UAEA,OAAO;YACHM,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,eAAL;QAAsB;UAClB,MAAMA,iBAAiB,GAAGF,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHG,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,mBAAL;QAA0B;UACtB,MAAMA,iBAAiB,GAAG,EAA1B;UAEA,OAAO;YACHC,SAAS,EAAE,EACP,IAAIF,UAAU,GAAG;gBACbK,SAAS,EAAE,QADE;gBAEbC,QAAQ,EAAE;cAFG,CAAH,GAGV,EAHJ,CADO;cAKPC,cAAc,EAAE,eALT;cAMPN,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAN7B,CADR;YASHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UATf,CAAP;QAaH;;MACD,KAAK,SAAL;MACA;QAAS;UACL,MAAMA,iBAAiB,GAAGF,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHG,SAAS,EAAE;cACPD,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAD7B,CADR;YAIHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UAJf,CAAP;QAQH;IAxDL;EA0DH,CA3Da,EA2DX,CAACH,KAAD,EAAQH,OAAR,EAAiBK,UAAjB,EAA6BD,SAA7B,EAAwCH,IAAxC,EAA8CC,UAA9C,CA3DW,CAAd;AA4DH"}

package/build/module/TextField/TextField.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import IconButton from '../IconButton/IconButton';
@@ -8,6 +8,7 @@ import { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons'
 import Row from '../Row';
 import { createFontStyle, useTheme } from '../styles';
 import useVariantStyleMap from './useVariantStyleMap';
+const isWeb = Platform.OS === 'web';
 const styles = StyleSheet.create({
   root: {
     alignItems: 'center',
@@ -16,24 +17,56 @@ const styles = StyleSheet.create({
   input: {
     flexGrow: 1
   },
+  inputWrapper: {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  placeholderWrapper: { ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
   secureToggleButton: {
     alignItems: 'flex-end',
-    padding: 0
+    padding: 0,
+    position: 'absolute',
+    right: 0
+  },
+  searchIconContainer: {
+    left: 12,
+    position: 'absolute'
+  },
+  loadingSinner: {
+    height: 19,
+    width: 19
+  },
+  clearButton: {
+    height: 36,
+    position: 'absolute',
+    right: 2,
+    width: 32
+  },
+  secureButtonContainer: {
+    justifyContent: 'center',
+    width: 32
   }
 });
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   const {
     autoFocus,
     containerStyle: containerStyleProp,
+    multiline,
     editable = true,
     hint,
+    inputFontSize = 'large',
     isLoading,
+    maxLength,
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
+    placeholder: placeholderProp,
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
+    showWordCounter = false,
     status = 'default',
     style: styleProp,
     title,
@@ -46,7 +79,17 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   const theme = useTheme();
   const [isFocused, setIsFocused] = useState(autoFocus ?? false);
   const [secureTextEntry, setSecureTextEntry] = useState(secureTextEntryProp ?? false);
-  const variantStyles = useVariantStyleMap(variant, status, isFocused);
+  const internalRef = useRef(null);
+  const mergedRef = useCallback(node => {
+    internalRef.current = node;
+
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);
 
   const handleBlur = event => {
     setIsFocused(false);
@@ -62,6 +105,22 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     setSecureTextEntry(current => !current);
   };
 
+  const resizeHeight = useCallback(() => {
+    const el = internalRef.current;
+
+    if (el) {
+      el.style.height = 'auto';
+      el.style.height = `${el.scrollHeight}px`;
+    }
+  }, []);
+  useLayoutEffect(() => {
+    const shouldResizeHeight = multiline && isWeb;
+
+    if (shouldResizeHeight) {
+      resizeHeight();
+    }
+  }, [resizeHeight, multiline, value]);
+
   const handleChangeText = text => {
     onChangeTextProp === null || onChangeTextProp === void 0 ? void 0 : onChangeTextProp(text);
   };
@@ -75,10 +134,12 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
-  const inputStyle = css([styles.input, variantStyles.inputStyle, Platform.OS === 'web' ? {
+  const inputStyle = css([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, isWeb ? {
     outlineWidth: 0
   } : {}, styleProp]);
-  const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+  const placeholderFontStyle = css([variantStyles.inputFontStyle, {
+    color: placeholderTextColorProp ?? theme.palette.status.disabledLabel
+  }]);
   const containerStyle = css([styles.root, variantStyles.containerStyle, {
     opacity: disabled ? 0.3 : 1
   }, containerStyleProp]);
@@ -87,29 +148,46 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
     style: titleFontStyle
   }) : null, /*#__PURE__*/React.createElement(Row, {
     style: containerStyle
-  }, isSearch ? isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, null) : /*#__PURE__*/React.createElement(Search, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(View, {
+    style: styles.searchIconContainer
+  }, isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+    style: styles.loadingSinner
+  }) : /*#__PURE__*/React.createElement(Search, {
     color: 'base',
-    height: 18,
-    width: 18
-  }) : null, /*#__PURE__*/React.createElement(TextInput, _extends({
+    height: 19,
+    width: 19
+  })) : null, /*#__PURE__*/React.createElement(View, {
+    style: styles.inputWrapper
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: 'none',
+    style: styles.placeholderWrapper
+  }, placeholderProp && !value ? /*#__PURE__*/React.createElement(Text, {
+    children: placeholderProp,
+    numberOfLines: 1,
+    style: placeholderFontStyle
+  }) : null), /*#__PURE__*/React.createElement(TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
+    maxLength: maxLength,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
-    placeholderTextColor: placeholderTextColor,
-    ref: ref,
+    ref: mergedRef,
     secureTextEntry: secureTextEntry,
     style: inputStyle,
-    value: value
-  }, otherProps)), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/React.createElement(IconButton, {
+    value: value,
+    multiline: multiline
+  }, otherProps)))), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/React.createElement(IconButton, {
     color: 'base',
     children: /*#__PURE__*/React.createElement(Clear, {
-      height: 13.75,
-      width: 15
+      height: 17.31,
+      width: 15.9
     }),
-    onPress: handleClear
-  }) : null, secureTextEntryProp && !isSearch ? /*#__PURE__*/React.createElement(IconButton, {
+    onPress: handleClear,
+    style: styles.clearButton
+  }) : null, secureTextEntryProp && !isSearch ? /*#__PURE__*/React.createElement(View, {
+    style: styles.secureButtonContainer
+  }, /*#__PURE__*/React.createElement(IconButton, {
     color: 'base',
     onPress: handleSecureTogglePress,
     style: styles.secureToggleButton
@@ -119,7 +197,10 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {
   }) : /*#__PURE__*/React.createElement(EyeOn, {
     height: 19,
     width: 17.42
-  })) : null), hint && !isSearch ? /*#__PURE__*/React.createElement(Text, {
+  }))) : null), showWordCounter && maxLength && !isSearch ? /*#__PURE__*/React.createElement(Text, {
+    children: `${(value === null || value === void 0 ? void 0 : value.length) ?? 0}/${maxLength}`,
+    style: variantStyles.hintStyle
+  }) : null, hint && !isSearch ? /*#__PURE__*/React.createElement(Text, {
     children: hint,
     style: variantStyles.hintStyle
   }) : null);

package/build/module/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","styles","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                {isSearch ? (\n                    isLoading ? (\n                        <LoadingSpinner/>\n                    ) : (\n                        <Search\n                            color={'base'}\n                            height={18}\n                            width={18}\n                        />\n                    )\n                ) : null}\n\n                <TextInput\n                    autoFocus={autoFocus}\n                    editable={!disabled}\n                    onBlur={handleBlur}\n                    onChangeText={handleChangeText}\n                    onFocus={handleFocus}\n                    placeholderTextColor={placeholderTextColor}\n                    ref={ref}\n                    secureTextEntry={secureTextEntry}\n                    style={inputStyle}\n                    value={value}\n                    {...otherProps}\n                />\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={13.75}\n                                width={15}\n                            />\n                        }\n                        onPress={handleClear}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <IconButton\n                        color={'base'}\n                        onPress={handleSecureTogglePress}\n                        style={styles.secureToggleButton}\n                    >\n                        {secureTextEntry ? (\n                            <EyeOff\n                                height={19}\n                                width={17.42}\n                            />\n                        ) : (\n                            <EyeOn\n                                height={19}\n                                width={17.42}\n                            />\n                        )}\n                    </IconButton>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,EAAqCC,SAArC,EAAgDC,IAAhD,QAA4D,cAA5D;AAEA,SAASC,GAAT,QAAoB,qBAApB;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AACA,SAASC,KAAT,EAAgBC,MAAhB,EAAwBC,KAAxB,EAA+BC,cAA/B,EAA+CC,MAA/C,QAA6D,mBAA7D;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGf,UAAU,CAACgB,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,QAAQ,EAAE;EAFR,CADuB;EAK7BC,KAAK,EAAE;IACHD,QAAQ,EAAE;EADP,CALsB;EAQ7BE,kBAAkB,EAAE;IAChBH,UAAU,EAAE,UADI;IAEhBI,OAAO,EAAE;EAFO;AARS,CAAlB,CAAf;AAcA,MAAMC,SAAS,gBAAG1B,KAAK,CAAC2B,UAAN,CAA4C,SAASD,SAAT,CAAmBE,KAAnB,EAA0BC,GAA1B,EAA+B;EACzF,MAAM;IACFC,SADE;IAEFC,cAAc,EAAEC,kBAFd;IAGFC,QAAQ,GAAG,IAHT;IAIFC,IAJE;IAKFC,SALE;IAMFC,MANE;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,OARE;IASFC,oBAAoB,EAAEC,wBATpB;IAUFC,eAAe,EAAEC,mBAVf;IAWFC,eAAe,EAAEC,mBAXf;IAYFC,MAAM,GAAG,SAZP;IAaFC,KAAK,EAAEC,SAbL;IAcFC,KAdE;IAeFC,KAfE;IAgBFC,OAAO,GAAG,SAhBR;IAiBF,GAAGC;EAjBD,IAkBFxB,KAlBJ;EAoBA,MAAMyB,QAAQ,GAAGF,OAAO,KAAK,QAA7B;EAEA,MAAMG,QAAQ,GAAG,CAACrB,QAAD,IAAaE,SAA9B;EAEA,MAAMoB,KAAK,GAAGvC,QAAQ,EAAtB;EAEA,MAAM,CAACwC,SAAD,EAAYC,YAAZ,IAA4BxD,QAAQ,CAAU6B,SAAS,IAAI,KAAvB,CAA1C;EACA,MAAM,CAACY,eAAD,EAAkBgB,kBAAlB,IAAwCzD,QAAQ,CAAU0C,mBAAmB,IAAI,KAAjC,CAAtD;EAEA,MAAMgB,aAAa,GAAG1C,kBAAkB,CAACkC,OAAD,EAAUL,MAAV,EAAkBU,SAAlB,CAAxC;;EAEA,MAAMI,UAAU,GAAIC,KAAD,IAA0D;IACzEJ,YAAY,CAAC,KAAD,CAAZ;IACArB,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAGyB,KAAH,CAAN;EACH,CAHD;;EAKA,MAAMC,WAAW,GAAID,KAAD,IAA0D;IAC1EJ,YAAY,CAAC,IAAD,CAAZ;IACAlB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAGsB,KAAH,CAAP;EACH,CAHD;;EAKA,MAAME,uBAAuB,GAAG,MAAM;IAClCL,kBAAkB,CAAEM,OAAD,IAAa,CAACA,OAAf,CAAlB;EACH,CAFD;;EAIA,MAAMC,gBAAgB,GAAIC,IAAD,IAAkB;IACvC5B,gBAAgB,SAAhB,IAAAA,gBAAgB,WAAhB,YAAAA,gBAAgB,CAAG4B,IAAH,CAAhB;EACH,CAFD;;EAIA,MAAMC,WAAW,GAAG,MAAM;IACtBF,gBAAgB,CAAC,EAAD,CAAhB;EACH,CAFD;;EAIA,MAAMrB,eAAe,GAAGC,mBAAmB,IAAIQ,QAA/C;EAEA,MAAMe,cAAc,GAAGrD,eAAe,CAACwC,KAAD,EAAQ;IAC1Cc,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,UAApB,CADgB;IAE1CC,KAAK,EAAEjB,KAAK,CAACkB,OAAN,CAAcP,IAAd,CAAmBQ;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAGpE,GAAG,CAAC,CACnBW,MAAM,CAACK,KADY,EAEnBoC,aAAa,CAACgB,UAFK,EAGnBzE,QAAQ,CAAC0E,EAAT,KAAgB,KAAhB,GAAwB;IAAEC,YAAY,EAAE;EAAhB,CAAxB,GAAiE,EAH9C,EAInB7B,SAJmB,CAAD,CAAtB;EAOA,MAAMR,oBAAoB,GAAGC,wBAAwB,IAAIc,KAAK,CAACkB,OAAN,CAAc3B,MAAd,CAAqBgC,aAA9E;EAEA,MAAM/C,cAAc,GAAGxB,GAAG,CAAC,CACvBW,MAAM,CAACE,IADgB,EAEvBuC,aAAa,CAAC5B,cAFS,EAGvB;IAAEgD,OAAO,EAAEzB,QAAQ,GAAG,GAAH,GAAS;EAA5B,CAHuB,EAIvBtB,kBAJuB,CAAD,CAA1B;EAOA,oBACI,oBAAC,IAAD,QACKiB,KAAK,IAAI,CAACI,QAAV,gBACG,oBAAC,IAAD;IACI,QAAQ,EAAEJ,KADd;IAEI,KAAK,EAAEmB;EAFX,EADH,GAKG,IANR,eAQI,oBAAC,GAAD;IAAK,KAAK,EAAErC;EAAZ,GACKsB,QAAQ,GACLlB,SAAS,gBACL,oBAAC,cAAD,OADK,gBAGL,oBAAC,MAAD;IACI,KAAK,EAAE,MADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAJC,GAUL,IAXR,eAaI,oBAAC,SAAD;IACI,SAAS,EAAEL,SADf;IAEI,QAAQ,EAAE,CAACwB,QAFf;IAGI,MAAM,EAAEM,UAHZ;IAII,YAAY,EAAEK,gBAJlB;IAKI,OAAO,EAAEH,WALb;IAMI,oBAAoB,EAAEtB,oBAN1B;IAOI,GAAG,EAAEX,GAPT;IAQI,eAAe,EAAEa,eARrB;IASI,KAAK,EAAEiC,UATX;IAUI,KAAK,EAAEzB;EAVX,GAWQE,UAXR,EAbJ,EA2BKR,eAAe,IAAIM,KAAJ,aAAIA,KAAJ,eAAIA,KAAK,CAAE8B,MAA1B,IAAoC9B,KAAK,CAAC8B,MAAN,GAAe,CAAnD,gBACG,oBAAC,UAAD;IACI,KAAK,EAAE,MADX;IAEI,QAAQ,eACJ,oBAAC,KAAD;MACI,MAAM,EAAE,KADZ;MAEI,KAAK,EAAE;IAFX,EAHR;IAQI,OAAO,EAAEb;EARb,EADH,GAWG,IAtCR,EAwCKxB,mBAAmB,IAAI,CAACU,QAAxB,gBACG,oBAAC,UAAD;IACI,KAAK,EAAE,MADX;IAEI,OAAO,EAAEU,uBAFb;IAGI,KAAK,EAAE7C,MAAM,CAACM;EAHlB,GAKKkB,eAAe,gBACZ,oBAAC,MAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADY,gBAMZ,oBAAC,KAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAXR,CADH,GAkBG,IA1DR,CARJ,EAqEKR,IAAI,IAAI,CAACmB,QAAT,gBACG,oBAAC,IAAD;IACI,QAAQ,EAAEnB,IADd;IAEI,KAAK,EAAEyB,aAAa,CAACsB;EAFzB,EADH,GAKG,IA1ER,CADJ;AA8EH,CA3JiB,CAAlB;AA6JA,eAAevD,SAAf"}
+{"version":3,"names":["React","useCallback","useLayoutEffect","useRef","useState","Platform","StyleSheet","Text","TextInput","View","css","IconButton","Clear","EyeOff","EyeOn","LoadingSpinner","Search","Row","createFontStyle","useTheme","useVariantStyleMap","isWeb","OS","styles","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","editable","hint","inputFontSize","isLoading","maxLength","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","showWordCounter","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","isFocused","setIsFocused","setSecureTextEntry","internalRef","mergedRef","node","current","variantStyles","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst isWeb = Platform.OS === 'web';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\n        editable = true,\n        hint,\n        inputFontSize = 'large',\n        isLoading,\n        maxLength,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        showWordCounter = false,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                <React.Fragment>\n                    {isSearch ? (\n                        <View style={styles.searchIconContainer}>\n                            {isLoading ? (\n                                <LoadingSpinner style={styles.loadingSinner}/>\n                            ) : (\n                                <Search\n                                    color={'base'}\n                                    height={19}\n                                    width={19}\n                                />\n                            )}\n                        </View>\n                    ) : null}\n\n                    <View style={styles.inputWrapper}>\n                        <View\n                            pointerEvents={'none'}\n                            style={styles.placeholderWrapper}\n                        >\n                            {placeholderProp && !value ? (\n                                <Text\n                                    children={placeholderProp}\n                                    numberOfLines={1}\n                                    style={placeholderFontStyle}\n                                />\n                            ) : null}\n                        </View>\n\n                        <TextInput\n                            autoFocus={autoFocus}\n                            editable={!disabled}\n                            maxLength={maxLength}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <View style={styles.secureButtonContainer}>\n                        <IconButton\n                            color={'base'}\n                            onPress={handleSecureTogglePress}\n                            style={styles.secureToggleButton}\n                        >\n                            {secureTextEntry ? (\n                                <EyeOff\n                                    height={19}\n                                    width={17.42}\n                                />\n                            ) : (\n                                <EyeOn\n                                    height={19}\n                                    width={17.42}\n                                />\n                            )}\n                        </IconButton>\n                    </View>\n                ) : null}\n            </Row>\n\n            {showWordCounter && maxLength && !isSearch ? (\n                <Text\n                    children={`${value?.length ?? 0}/${maxLength}`}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/build/module/TextField/TextFieldProps.js

@@ -1,3 +1,4 @@
 export const textFieldStatus = ['default', 'success', 'error'];
 export const textFieldVariants = ['default', 'search'];
+export const textFieldInputFontSizes = ['large', 'small'];
 //# sourceMappingURL=TextFieldProps.js.map

package/build/module/TextField/TextFieldProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["textFieldStatus","textFieldVariants"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B"}
+{"version":3,"names":["textFieldStatus","textFieldVariants","textFieldInputFontSizes"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport const textFieldInputFontSizes = ['large', 'small'] as const;\nexport type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n\n    /**\n     * Determines the font size of the input.\n     * @default large\n     */\n    inputFontSize?: TextFieldInputFontSize;\n\n    /**\n     * Determines whether to display the word counter below the input.\n     * Requires maxLength to be set.\n     * @default false\n     */\n    showWordCounter?: boolean;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;AAGP,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B;AAGP,OAAO,MAAMC,uBAAuB,GAAG,CAAC,OAAD,EAAU,OAAV,CAAhC"}

package/build/module/TextField/useVariantStyleMap.js

@@ -1,6 +1,29 @@
 import { useMemo } from 'react';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
+const fontSizeStyleMap = {
+  large: {
+    fontSize: 18,
+    lineHeight: 27,
+    fontFamily: 'PretendardStd-SemiBold',
+    letterSpacing: 0
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'PretendardStd-Medium',
+    letterSpacing: 0
+  }
+};
+const containerPaddingMap = {
+  large: {
+    paddingVertical: 14
+  },
+  small: {
+    paddingTop: 18,
+    paddingBottom: 16
+  }
+};
 
 function useStatusColor(theme, status) {
   switch (status) {
@@ -26,6 +49,7 @@ function useStatusColor(theme, status) {
 }
 
 export default function useVariantStyleMap(variant, status, isFocused) {
+  let inputFontSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'large';
   const theme = useTheme();
   const {
     borderColor,
@@ -38,25 +62,22 @@ export default function useVariantStyleMap(variant, status, isFocused) {
         return {
           containerStyle: {
             borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
-            borderBottomWidth: 1
+            borderBottomWidth: 1,
+            gap: 16,
+            minHeight: 54,
+            ...containerPaddingMap[inputFontSize]
           },
           inputStyle: {
-            paddingRight: theme.spacing(4),
-            paddingVertical: theme.spacing(4),
-            ...createFontStyle(theme, {
-              selector: _ => typographyOf({
-                fontSize: 18,
-                lineHeight: 27,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: 0
-              }),
-              color: theme.palette.text.strong
-            })
+            padding: 0
           },
+          inputFontStyle: createFontStyle(theme, {
+            selector: _ => typographyOf(fontSizeStyleMap[inputFontSize]),
+            color: theme.palette.text.strong
+          }),
           hintStyle: {
             marginTop: theme.spacing(2),
             ...createFontStyle(theme, {
-              // selector: (typography) => typography.caption1['regular']
+              selector: typography => typography.caption1['regular'],
               color: hintColor
             })
           }
@@ -69,26 +90,24 @@ export default function useVariantStyleMap(variant, status, isFocused) {
             borderColor: theme.palette.border.base,
             borderRadius: theme.shape.radius.md,
             borderWidth: 0.5,
-            paddingLeft: theme.spacing(3),
-            paddingRight: theme.spacing(0.5)
+            paddingBottom: 12,
+            paddingHorizontal: 39,
+            paddingTop: 11
           },
           inputStyle: {
-            paddingBottom: theme.spacing(2.5),
-            paddingLeft: theme.spacing(2),
-            paddingRight: theme.spacing(1),
-            paddingTop: theme.spacing(2.25),
-            ...createFontStyle(theme, {
-              selector: _ => typographyOf({
-                fontSize: 16,
-                lineHeight: 19.2,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: -0.16
-              }),
-              color: theme.palette.text.strong
-            })
-          }
+            padding: 0
+          },
+          inputFontStyle: createFontStyle(theme, {
+            selector: _ => typographyOf({
+              fontSize: 16,
+              lineHeight: 19.2,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: -0.16
+            }),
+            color: theme.palette.text.strong
+          })
         };
     }
-  }, [theme, borderColor, hintColor, variant, isFocused]);
+  }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

package/build/module/TextField/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingLeft","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                    },\n                    inputStyle: {\n                        paddingRight: theme.spacing(4),\n                        paddingVertical: theme.spacing(4),\n                        ...createFontStyle(theme, {\n                            selector: (_) => typographyOf({\n                                fontSize: 18,\n                                lineHeight: 27,\n                                fontFamily: 'PretendardStd-SemiBold',\n                                letterSpacing: 0,\n                            }),\n                            color: theme.palette.text.strong,\n                        }),\n                    },\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            // selector: (typography) => typography.caption1['regular']\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingLeft: theme.spacing(3),\n                        paddingRight: theme.spacing(0.5),\n                    },\n                    inputStyle: {\n                        paddingBottom: theme.spacing(2.5),\n                        paddingLeft: theme.spacing(2),\n                        paddingRight: theme.spacing(1),\n                        paddingTop: theme.spacing(2.25),\n                        ...createFontStyle(theme, {\n                            selector: (_) => typographyOf({\n                                fontSize: 16,\n                                lineHeight: 19.2,\n                                fontFamily: 'PretendardStd-SemiBold',\n                                letterSpacing: -0.16,\n                            }),\n                            color: theme.palette.text.strong,\n                        }),\n                    },\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","fontSizeStyleMap","large","fontSize","lineHeight","fontFamily","letterSpacing","small","containerPaddingMap","paddingVertical","paddingTop","paddingBottom","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","inputFontSize","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","inputStyle","padding","inputFontStyle","selector","_","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingHorizontal"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\nconst fontSizeStyleMap = {\n    large: {\n        fontSize: 18,\n        lineHeight: 27,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: 0,\n    },\n    small: {\n        fontSize: 14,\n        lineHeight: 21,\n        fontFamily: 'PretendardStd-Medium',\n        letterSpacing: 0,\n    },\n} as const;\n\nconst containerPaddingMap = {\n    large: {\n        paddingVertical: 14,\n    },\n    small: {\n        paddingTop: 18,\n        paddingBottom: 16,\n    },\n} as const;\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(\n    variant: TextFieldVariant,\n    status: TextFieldStatus,\n    isFocused: boolean,\n    inputFontSize: TextFieldInputFontSize = 'large',\n): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        gap: 16,\n                        minHeight: 54,\n                        ...containerPaddingMap[inputFontSize],\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);\n}\n"],"mappings":"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"}

package/build/module/Toolbar/BackButton/BackButton.js

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { AppBarChevronLeft } from '../../internal';
+import { css } from '@fountain-ui/styles';
+const styles = StyleSheet.create({
+  root: {
+    height: 40,
+    left: 4,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+export default function BackButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = css([styles.root, styleProp]);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/React.createElement(AppBarChevronLeft, {
+    height: 24,
+    width: 24
+  }));
+}
+//# sourceMappingURL=BackButton.js.map

package/build/module/Toolbar/BackButton/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","IconButton","AppBarChevronLeft","css","styles","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 4,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <AppBarChevronLeft\n                height={24}\n                width={24}\n            />\n        </IconButton>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,SAASC,iBAAT,QAAkC,gBAAlC;AAEA,SAASC,GAAT,QAAoB,qBAApB;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;AAYA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAGhB,GAAG,CAAC,CAClBC,MAAM,CAACE,IADW,EAElBW,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,UAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,oBAAC,iBAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAJJ,CADJ;AAWH"}

package/build/module/Toolbar/BackButton/BackButtonProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=BackButtonProps.js.map

package/build/module/Toolbar/BackButton/BackButtonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["BackButtonProps.ts"],"sourcesContent":["import type { IconButtonProps } from '../../IconButton';\nimport type { OverridableComponentProps } from '../../types';\n\nexport default interface BackButtonProps extends OverridableComponentProps<Omit<IconButtonProps, 'children'>, {}> {}\n"],"mappings":""}

package/build/module/Toolbar/BackButton/index.js

@@ -0,0 +1,2 @@
+export { default } from './BackButton';
+//# sourceMappingURL=index.js.map

package/build/module/Toolbar/BackButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './BackButton';\nexport type { default as BackButtonProps } from './BackButtonProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}