@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.31

package/build/commonjs/Tabs/useTabsStyle.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTabsStyle;
+
+var _react = require("react");
+
+var _hooks = require("../hooks");
+
+var _styles = require("../styles");
+
+function useTabsStyle(variant, size, scrollable) {
+  const theme = (0, _styles.useTheme)();
+  const isTablet = (0, _hooks.useBreakpointUp)('md', true, false);
+  return (0, _react.useMemo)(() => {
+    switch (variant) {
+      case 'circular':
+        {
+          const paddingHorizontal = isTablet ? 20 : size === 'small' ? 8 : 12;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'circular-home':
+        {
+          const paddingHorizontal = isTablet ? 20 : 8;
+          return {
+            container: {
+              paddingBottom: 8,
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'bottom-navigation':
+        {
+          const paddingHorizontal = 24;
+          return {
+            container: { ...(isTablet ? {
+                alignSelf: 'center',
+                minWidth: 460
+              } : {}),
+              justifyContent: 'space-between',
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+
+      case 'default':
+      default:
+        {
+          const paddingHorizontal = isTablet ? 14 : 6;
+          return {
+            container: {
+              paddingHorizontal: scrollable ? 0 : paddingHorizontal
+            },
+            contentContainer: {
+              paddingHorizontal: scrollable ? paddingHorizontal : 0
+            }
+          };
+        }
+    }
+  }, [theme, variant, isTablet, size, scrollable]);
+}
+//# sourceMappingURL=useTabsStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useTabsStyle","variant","size","scrollable","theme","useTheme","isTablet","useBreakpointUp","useMemo","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 isTablet = useBreakpointUp('md', true, false);\n\n    return useMemo<TabsStyle>(() => {\n        switch (variant) {\n            case 'circular': {\n                const paddingHorizontal = isTablet ? 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 = isTablet ? 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                        ...(isTablet ? {\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 = isTablet ? 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, isTablet, size, scrollable]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAQe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0DC,UAA1D,EAA+E;EAC1F,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,QAAQ,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAjB;EAEA,OAAO,IAAAC,cAAA,EAAmB,MAAM;IAC5B,QAAQP,OAAR;MACI,KAAK,UAAL;QAAiB;UACb,MAAMQ,iBAAiB,GAAGH,QAAQ,GAAG,EAAH,GAASJ,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB,EAAlE;UAEA,OAAO;YACHQ,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,eAAL;QAAsB;UAClB,MAAMA,iBAAiB,GAAGH,QAAQ,GAAG,EAAH,GAAQ,CAA1C;UAEA,OAAO;YACHI,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,mBAAL;QAA0B;UACtB,MAAMA,iBAAiB,GAAG,EAA1B;UAEA,OAAO;YACHC,SAAS,EAAE,EACP,IAAIJ,QAAQ,GAAG;gBACXO,SAAS,EAAE,QADA;gBAEXC,QAAQ,EAAE;cAFC,CAAH,GAGR,EAHJ,CADO;cAKPC,cAAc,EAAE,eALT;cAMPN,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAN7B,CADR;YASHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UATf,CAAP;QAaH;;MACD,KAAK,SAAL;MACA;QAAS;UACL,MAAMA,iBAAiB,GAAGH,QAAQ,GAAG,EAAH,GAAQ,CAA1C;UAEA,OAAO;YACHI,SAAS,EAAE;cACPD,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAD7B,CADR;YAIHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UAJf,CAAP;QAQH;IAxDL;EA0DH,CA3DM,EA2DJ,CAACL,KAAD,EAAQH,OAAR,EAAiBK,QAAjB,EAA2BJ,IAA3B,EAAiCC,UAAjC,CA3DI,CAAP;AA4DH"}

package/build/commonjs/TextField/TextField.js

@@ -37,9 +37,29 @@ const styles = _reactNative.StyleSheet.create({
   input: {
     flexGrow: 1
   },
+  inputWrapper: {
+    flexGrow: 1
+  },
+  placeholderWrapper: { ..._reactNative.StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
   secureToggleButton: {
     alignItems: 'flex-end',
     padding: 0
+  },
+  searchIconContainer: {
+    left: 12,
+    position: 'absolute'
+  },
+  loadingSinner: {
+    height: 19,
+    width: 19
+  },
+  clearButton: {
+    height: 36,
+    position: 'absolute',
+    right: 2,
+    width: 32
   }
 });
 
@@ -53,6 +73,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
+    placeholder: placeholderProp,
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
@@ -94,13 +115,15 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
 
   const showClearButton = showClearButtonProp ?? isSearch;
   const titleFontStyle = (0, _styles2.createFontStyle)(theme, {
-    // selector: (typography) => typography.caption1['semiBold']
+    selector: typography => typography.caption1['semiBold'],
     color: theme.palette.text.strong
   });
-  const inputStyle = (0, _styles.css)([styles.input, variantStyles.inputStyle, _reactNative.Platform.OS === 'web' ? {
+  const inputStyle = (0, _styles.css)([styles.input, variantStyles.inputStyle, variantStyles.inputFontStyle, _reactNative.Platform.OS === 'web' ? {
     outlineWidth: 0
   } : {}, styleProp]);
-  const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;
+  const placeholderFontStyle = (0, _styles.css)([variantStyles.inputFontStyle, {
+    color: placeholderTextColorProp ?? theme.palette.status.disabledLabel
+  }]);
   const containerStyle = (0, _styles.css)([styles.root, variantStyles.containerStyle, {
     opacity: disabled ? 0.3 : 1
   }, containerStyleProp]);
@@ -109,28 +132,41 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     style: titleFontStyle
   }) : null, /*#__PURE__*/_react.default.createElement(_Row.default, {
     style: containerStyle
-  }, isSearch ? isLoading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, null) : /*#__PURE__*/_react.default.createElement(_icons.Search, {
+  }, isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.searchIconContainer
+  }, isLoading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, {
+    style: styles.loadingSinner
+  }) : /*#__PURE__*/_react.default.createElement(_icons.Search, {
     color: 'base',
-    height: 18,
-    width: 18
-  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
+    height: 19,
+    width: 19
+  })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.inputWrapper
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    pointerEvents: 'none',
+    style: styles.placeholderWrapper
+  }, placeholderProp && !value ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: placeholderProp,
+    numberOfLines: 1,
+    style: placeholderFontStyle
+  }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
-    placeholderTextColor: placeholderTextColor,
     ref: ref,
     secureTextEntry: secureTextEntry,
     style: inputStyle,
     value: value
-  }, otherProps)), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, otherProps))), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     color: 'base',
     children: /*#__PURE__*/_react.default.createElement(_icons.Clear, {
-      height: 13.75,
-      width: 15
+      height: 17.31,
+      width: 15.9
     }),
-    onPress: handleClear
+    onPress: handleClear,
+    style: styles.clearButton
   }) : null, secureTextEntryProp && !isSearch ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     color: 'base',
     onPress: handleSecureTogglePress,

package/build/commonjs/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","React","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","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","color","palette","strong","inputStyle","css","Platform","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":"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"}
+{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","searchIconContainer","left","position","loadingSinner","height","width","clearButton","right","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","Platform","OS","outlineWidth","placeholderFontStyle","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    inputWrapper: {\n        flexGrow: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 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});\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        placeholder: placeholderProp,\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        variantStyles.inputFontStyle,\n        Platform.OS === 'web' ? { 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                {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                        onBlur={handleBlur}\n                        onChangeText={handleChangeText}\n                        onFocus={handleFocus}\n                        ref={ref}\n                        secureTextEntry={secureTextEntry}\n                        style={inputStyle}\n                        value={value}\n                        {...otherProps}\n                    />\n                </View>\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                    <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":"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"}

package/build/commonjs/TextField/useVariantStyleMap.js

@@ -47,25 +47,27 @@ function useVariantStyleMap(variant, status, isFocused) {
         return {
           containerStyle: {
             borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
-            borderBottomWidth: 1
+            borderBottomWidth: 1,
+            minHeight: 60,
+            paddingVertical: 16
           },
           inputStyle: {
-            paddingRight: theme.spacing(4),
-            paddingVertical: theme.spacing(4),
-            ...(0, _styles2.createFontStyle)(theme, {
-              selector: _ => (0, _styles.typographyOf)({
-                fontSize: 18,
-                lineHeight: 27,
-                fontFamily: 'Pretendard-SemiBold',
-                letterSpacing: 0
-              }),
-              color: theme.palette.text.strong
-            })
+            padding: 0,
+            paddingRight: 16
           },
+          inputFontStyle: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 18,
+              lineHeight: 27,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: 0
+            }),
+            color: theme.palette.text.strong
+          }),
           hintStyle: {
             marginTop: theme.spacing(2),
             ...(0, _styles2.createFontStyle)(theme, {
-              // selector: (typography) => typography.caption1['regular']
+              selector: typography => typography.caption1['regular'],
               color: hintColor
             })
           }
@@ -78,24 +80,22 @@ 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),
-            ...(0, _styles2.createFontStyle)(theme, {
-              selector: _ => (0, _styles.typographyOf)({
-                fontSize: 16,
-                lineHeight: 19.2,
-                fontFamily: 'Pretendard-SemiBold',
-                letterSpacing: -0.16
-              }),
-              color: theme.palette.text.strong
-            })
-          }
+            padding: 0
+          },
+          inputFontStyle: (0, _styles2.createFontStyle)(theme, {
+            selector: _ => (0, _styles.typographyOf)({
+              fontSize: 16,
+              lineHeight: 19.2,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: -0.16
+            }),
+            color: theme.palette.text.strong
+          })
         };
     }
   }, [theme, borderColor, hintColor, variant, isFocused]);

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

@@ -1 +1 @@
-{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingRight","spacing","paddingVertical","createFontStyle","selector","_","typographyOf","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: 'Pretendard-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: 'Pretendard-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":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","inputFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"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 { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\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(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                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        paddingRight: 16,\n                    },\n                    inputFontStyle: 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                    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]);\n}\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAUA,SAASA,cAAT,CAAwBC,KAAxB,EAAsCC,MAAtC,EAA4G;EACxG,QAAQA,MAAR;IACI;IACA,KAAK,SAAL;MACI,OAAO;QACHC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAD/B;QAEHC,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBC;MAF3B,CAAP;;IAIJ,KAAK,SAAL;MACI,OAAO;QACHN,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ,OAD/B;QAEHH,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ;MAF7B,CAAP;;IAIJ,KAAK,OAAL;MACI,OAAO;QACHP,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS,MAD/B;QAEHJ,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS;MAF7B,CAAP;EAbR;AAkBH;;AAEc,SAASC,kBAAT,CAA4BC,OAA5B,EAAuDX,MAAvD,EAAgFY,SAAhF,EAAqH;EAChI,MAAMb,KAAK,GAAG,IAAAc,iBAAA,GAAd;EAEA,MAAM;IACFZ,WADE;IAEFI;EAFE,IAGFP,cAAc,CAACC,KAAD,EAAQC,MAAR,CAHlB;EAKA,OAAO,IAAAc,cAAA,EAAQ,MAAM;IACjB,QAAQH,OAAR;MACI;MACA,KAAK,SAAL;QACI,OAAO;UACHI,cAAc,EAAE;YACZC,iBAAiB,EAAEhB,MAAM,KAAK,SAAX,IAAwBY,SAAxB,GAAoCb,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBc,MAAzD,GAAkEhB,WADzE;YAEZiB,iBAAiB,EAAE,CAFP;YAGZC,SAAS,EAAE,EAHC;YAIZC,eAAe,EAAE;UAJL,CADb;UAOHC,UAAU,EAAE;YACRC,OAAO,EAAE,CADD;YAERC,YAAY,EAAE;UAFN,CAPT;UAWHC,cAAc,EAAE,IAAAC,wBAAA,EAAgB1B,KAAhB,EAAuB;YACnC2B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAb,CADkB;YAOnCC,KAAK,EAAElC,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBW;UAPS,CAAvB,CAXb;UAoBHiB,SAAS,EAAE;YACPC,SAAS,EAAEpC,KAAK,CAACqC,OAAN,CAAc,CAAd,CADJ;YAEP,GAAG,IAAAX,wBAAA,EAAgB1B,KAAhB,EAAuB;cACtB2B,QAAQ,EAAGW,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,SAApB,CADJ;cAEtBL,KAAK,EAAE5B;YAFe,CAAvB;UAFI;QApBR,CAAP;;MA4BJ,KAAK,QAAL;QACI,OAAO;UACHU,cAAc,EAAE;YACZwB,eAAe,EAAExC,KAAK,CAACG,OAAN,CAAcsC,OAAd,CAAsBC,UAD3B;YAEZxC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAFtB;YAGZsC,YAAY,EAAE3C,KAAK,CAAC4C,KAAN,CAAYC,MAAZ,CAAmBC,EAHrB;YAIZC,WAAW,EAAE,GAJD;YAKZC,aAAa,EAAE,EALH;YAMZC,iBAAiB,EAAE,EANP;YAOZC,UAAU,EAAE;UAPA,CADb;UAUH5B,UAAU,EAAE;YACRC,OAAO,EAAE;UADD,CAVT;UAaHE,cAAc,EAAE,IAAAC,wBAAA,EAAgB1B,KAAhB,EAAuB;YACnC2B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAb,CADkB;YAOnCC,KAAK,EAAElC,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBW;UAPS,CAAvB;QAbb,CAAP;IAhCR;EAwDH,CAzDM,EAyDJ,CAAClB,KAAD,EAAQE,WAAR,EAAqBI,SAArB,EAAgCM,OAAhC,EAAyCC,SAAzC,CAzDI,CAAP;AA0DH"}

package/build/commonjs/Toolbar/BackButton/BackButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BackButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _IconButton = _interopRequireDefault(require("../../IconButton"));
+
+var _internal = require("../../internal");
+
+var _styles = require("@fountain-ui/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    height: 40,
+    left: 4,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+
+function BackButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = (0, _styles.css)([styles.root, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_internal.AppBarChevronLeft, {
+    height: 24,
+    width: 24
+  })));
+}
+//# sourceMappingURL=BackButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"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            <React.Fragment>\n                <AppBarChevronLeft\n                    height={24}\n                    width={24}\n                />\n            </React.Fragment>\n        </IconButton>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,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;;AAYe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,2BAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADJ,CAJJ,CADJ;AAaH"}

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=BackButtonProps.js.map

package/build/commonjs/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/commonjs/Toolbar/BackButton/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BackButton.default;
+  }
+});
+
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

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

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

package/build/commonjs/Toolbar/Toolbar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Toolbar;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _Row = _interopRequireDefault(require("../Row"));
 
 var _styles = require("../styles");
 
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -40,7 +42,7 @@ const sizeMap = {
   }
 };
 
-function Toolbar(props) {
+const Toolbar = props => {
   const {
     disableGutters = false,
     size = 'medium',
@@ -51,7 +53,9 @@ function Toolbar(props) {
   return /*#__PURE__*/_react.default.createElement(_Row.default, _extends({
     style: (0, _styles.css)([styles.root, !disableGutters ? styles.gutters : undefined, sizeMap[size], style])
   }, otherProps));
-}
+};
 
-;
+Toolbar.BackButton = _BackButton.default;
+var _default = Toolbar;
+exports.default = _default;
 //# sourceMappingURL=Toolbar.js.map

package/build/commonjs/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","css","undefined"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexWrap: 'nowrap',\n        },\n        gutters: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n    small: { height: 48 },\n    medium: { height: 50 },\n    large: { height: 56 },\n};\n\nexport default function Toolbar(props: ToolbarProps) {\n    const {\n        disableGutters = false,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Row\n            style={css([\n                styles.root,\n                !disableGutters ? styles.gutters : undefined,\n                sizeMap[size],\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMe,SAASG,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGpB,SAAS,EAAxB;EAEA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAE,IAAAqB,WAAA,EAAI,CACPD,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCgB,SAF5B,EAGPb,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAJ;EADX,GAOQC,UAPR,EADJ;AAWH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flexWrap","gutters","paddingHorizontal","spacing","sizeMap","small","height","medium","large","Toolbar","props","disableGutters","size","style","otherProps","styles","css","undefined","BackButton"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { css, useTheme } from '../styles';\nimport BackButton from './BackButton';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'root' | 'gutters'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexWrap: 'nowrap',\n        },\n        gutters: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n    small: { height: 48 },\n    medium: { height: 50 },\n    large: { height: 56 },\n};\n\nconst Toolbar = (props: ToolbarProps) => {\n    const {\n        disableGutters = false,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <Row\n            style={css([\n                styles.root,\n                !disableGutters ? styles.gutters : undefined,\n                sizeMap[size],\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n\nToolbar.BackButton = BackButton;\n\nexport default Toolbar;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR,CADH;IAKHC,OAAO,EAAE;MACLC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IADd;EALN,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMA,MAAMG,OAAO,GAAIC,KAAD,IAAyB;EACrC,MAAM;IACFC,cAAc,GAAG,KADf;IAEFC,IAAI,GAAG,QAFL;IAGFC,KAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGpB,SAAS,EAAxB;EAEA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAE,IAAAqB,WAAA,EAAI,CACPD,MAAM,CAACjB,IADA,EAEP,CAACa,cAAD,GAAkBI,MAAM,CAACd,OAAzB,GAAmCgB,SAF5B,EAGPb,OAAO,CAACQ,IAAD,CAHA,EAIPC,KAJO,CAAJ;EADX,GAOQC,UAPR,EADJ;AAWH,CArBD;;AAuBAL,OAAO,CAACS,UAAR,GAAqBA,mBAArB;eAEeT,O"}

package/build/commonjs/Tooltip/Beaks/index.js

@@ -3,6 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "HorizontalLargeBeak", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalLargeBeak.default;
+  }
+});
+Object.defineProperty(exports, "HorizontalSmallBeak", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalSmallBeak.default;
+  }
+});
+Object.defineProperty(exports, "VerticalLargeBeak", {
+  enumerable: true,
+  get: function () {
+    return _VerticalLargeBeak.default;
+  }
+});
+Object.defineProperty(exports, "VerticalSmallBeak", {
+  enumerable: true,
+  get: function () {
+    return _VerticalSmallBeak.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -12,5 +36,13 @@ Object.defineProperty(exports, "default", {
 
 var _Beak = _interopRequireDefault(require("./Beak"));
 
+var _HorizontalLargeBeak = _interopRequireDefault(require("./HorizontalLargeBeak"));
+
+var _HorizontalSmallBeak = _interopRequireDefault(require("./HorizontalSmallBeak"));
+
+var _VerticalLargeBeak = _interopRequireDefault(require("./VerticalLargeBeak"));
+
+var _VerticalSmallBeak = _interopRequireDefault(require("./VerticalSmallBeak"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/build/commonjs/Tooltip/Beaks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Beak';\nexport type { default as BeakProps } from './BeakProps';\nexport { default as HorizontalLargeBeak } from './HorizontalLargeBeak';\nexport { default as HorizontalSmallBeak } from './HorizontalSmallBeak';\nexport { default as VerticalLargeBeak } from './VerticalLargeBeak';\nexport { default as VerticalSmallBeak } from './VerticalSmallBeak';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA"}