@fountain-ui/core 3.0.0-alpha.24 → 3.0.0-alpha.26

package/build/commonjs/Tab/Tab.js

@@ -41,11 +41,13 @@ function Tab(props) {
     children,
     enableIndicator = false,
     icon: defaultIcon,
+    parentColor = 'default',
     selected = false,
     selectedIcon,
     size = 'medium',
     variant = 'default',
     style: styleProp,
+    innerStyle: innerStyleProp,
     onTabInnerLayout,
     ...otherProps
   } = props;
@@ -54,9 +56,9 @@ function Tab(props) {
     iconContainer: iconContainerStyle,
     inner: innerStyle,
     label: labelStyle
-  } = (0, _useVariantStyleMap.default)(variant, selected, size);
+  } = (0, _useVariantStyleMap.default)(variant, selected, size, parentColor);
   const tabBaseStyle = (0, _styles.css)([styles.root, containerStyle, styleProp]);
-  const tabInnerStyle = (0, _styles.css)([styles.filledInner, innerStyle]);
+  const tabInnerStyle = (0, _styles.css)([styles.filledInner, innerStyle, innerStyleProp]);
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
   const iconElement = (0, _utils.cloneElementSafely)(icon);
   const tabElement = typeof children !== 'string' ? (0, _utils.cloneElementSafely)(children, {

package/build/commonjs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","size","variant","style","styleProp","onTabInnerLayout","otherProps","container","containerStyle","iconContainer","iconContainerStyle","inner","innerStyle","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        selected = false,\n        selectedIcon,\n        size = 'medium' as TabSize,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        iconContainer: iconContainerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected, size);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n    ]);\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = cloneElementSafely(icon);\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-4}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4}\n                    >\n                        <View style={iconContainerStyle}>\n                            {iconElement}\n                        </View>\n                    </Badge>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,QAAQ,GAAG,KALT;IAMFC,YANE;IAOFC,IAAI,GAAG,QAPL;IAQFC,OAAO,GAAG,SARR;IASFC,KAAK,EAAEC,SATL;IAUFC,gBAVE;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAM;IACFc,SAAS,EAAEC,cADT;IAEFC,aAAa,EAAEC,kBAFb;IAGFC,KAAK,EAAEC,UAHL;IAIFC,KAAK,EAAEC;EAJL,IAKF,IAAAC,2BAAA,EAAmBb,OAAnB,EAA4BH,QAA5B,EAAsCE,IAAtC,CALJ;EAOA,MAAMe,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBnC,MAAM,CAACG,IADc,EAErBuB,cAFqB,EAGrBJ,SAHqB,CAAJ,CAArB;EAMA,MAAMc,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBnC,MAAM,CAACO,WADe,EAEtBuB,UAFsB,CAAJ,CAAtB;EAKA,MAAMf,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMqB,WAAW,GAAG,IAAAC,yBAAA,EAAmBvB,IAAnB,CAApB;EAEA,MAAMwB,UAAU,GAAG,OAAO1B,QAAP,KAAoB,QAApB,GACf,IAAAyB,yBAAA,EAAmBzB,QAAnB,EAA6B;IACzBI;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKoB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACzB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAEgB;EAAb,GACKS,WADL,CALJ,CADJ,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CAXJ,CADQ,gBAiBR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAuB,WAAA,EAAIH,UAAJ;EAAb,GACKnB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEqB;EADX,GAEQV,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEa;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}
+{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","parentColor","selected","selectedIcon","size","variant","style","styleProp","innerStyle","innerStyleProp","onTabInnerLayout","otherProps","container","containerStyle","iconContainer","iconContainerStyle","inner","label","labelStyle","useVariantStyleMap","tabBaseStyle","css","tabInnerStyle","iconElement","cloneElementSafely","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type { TabsColor } from '../Tabs';\nimport { css, StyleSheet } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { TabSize, TabVariant } from './TabProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    filledInner: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator = false,\n        icon: defaultIcon,\n        parentColor = 'default' as TabsColor,\n        selected = false,\n        selectedIcon,\n        size = 'medium' as TabSize,\n        variant = 'default' as TabVariant,\n        style: styleProp,\n        innerStyle: innerStyleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        iconContainer: iconContainerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected, size, parentColor);\n\n    const tabBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styleProp,\n    ]);\n\n    const tabInnerStyle = css([\n        styles.filledInner,\n        innerStyle,\n        innerStyleProp,\n    ]);\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = cloneElementSafely(icon);\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge\n                        horizontalOffset={-4}\n                        invisible={!badgeVisible}\n                        verticalOffset={-4}\n                    >\n                        <View style={iconContainerStyle}>\n                            {iconElement}\n                        </View>\n                    </Badge>\n\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </React.Fragment>\n            ) : (\n                <Badge\n                    horizontalOffset={-7}\n                    invisible={!badgeVisible}\n                    verticalOffset={3}\n                >\n                    <Text style={css(labelStyle)}>\n                        {children}\n                    </Text>\n                </Badge>\n            )}\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAGA;;;;;;AAEA,MAAMA,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEC,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE,CADuB;EAK7BC,WAAW,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AALgB,CAAlB,CAAf;;AAWe,SAASC,GAAT,CAAaC,KAAb,EAA8B;EACzC,MAAM;IACFC,YAAY,GAAG,KADb;IAEFC,QAFE;IAGFC,eAAe,GAAG,KAHhB;IAIFC,IAAI,EAAEC,WAJJ;IAKFC,WAAW,GAAG,SALZ;IAMFC,QAAQ,GAAG,KANT;IAOFC,YAPE;IAQFC,IAAI,GAAG,QARL;IASFC,OAAO,GAAG,SATR;IAUFC,KAAK,EAAEC,SAVL;IAWFC,UAAU,EAAEC,cAXV;IAYFC,gBAZE;IAaF,GAAGC;EAbD,IAcFhB,KAdJ;EAgBA,MAAM;IACFiB,SAAS,EAAEC,cADT;IAEFC,aAAa,EAAEC,kBAFb;IAGFC,KAAK,EAAER,UAHL;IAIFS,KAAK,EAAEC;EAJL,IAKF,IAAAC,2BAAA,EAAmBd,OAAnB,EAA4BH,QAA5B,EAAsCE,IAAtC,EAA4CH,WAA5C,CALJ;EAOA,MAAMmB,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBrC,MAAM,CAACG,IADc,EAErB0B,cAFqB,EAGrBN,SAHqB,CAAJ,CAArB;EAMA,MAAMe,aAAa,GAAG,IAAAD,WAAA,EAAI,CACtBrC,MAAM,CAACO,WADe,EAEtBiB,UAFsB,EAGtBC,cAHsB,CAAJ,CAAtB;EAMA,MAAMV,IAAI,GAAGG,QAAQ,GAAIC,YAAY,IAAIH,WAApB,GAAmCA,WAAxD;EACA,MAAMuB,WAAW,GAAG,IAAAC,yBAAA,EAAmBzB,IAAnB,CAApB;EAEA,MAAM0B,UAAU,GAAG,OAAO5B,QAAP,KAAoB,QAApB,GACf,IAAA2B,yBAAA,EAAmB3B,QAAnB,EAA6B;IACzBK;EADyB,CAA7B,CADe,gBAKf,6BAAC,cAAD,CAAO,QAAP,QACKqB,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAAC3B,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAEmB;EAAb,GACKQ,WADL,CALJ,CADJ,eAWI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAF,WAAA,EAAIH,UAAJ;EAAb,GACKrB,QADL,CAXJ,CADQ,gBAiBR,6BAAC,cAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAyB,WAAA,EAAIH,UAAJ;EAAb,GACKrB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,6BAAC,gBAAD;IACI,KAAK,EAAEuB;EADX,GAEQT,UAFR,gBAII,6BAAC,iBAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEY;EAAzC,GACKG,UADL,CAJJ,CADJ;AAUH;;AAAA"}

package/build/commonjs/Tab/TabProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["tabSizes","tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const tabSizes = ['small', 'medium'] as const;\nexport type TabSize = typeof tabSizes[number];\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The size of the Tab.\n     * @default 'medium'\n     */\n    size?: TabSize;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,QAAQ,GAAG,CAAC,OAAD,EAAU,QAAV,CAAjB;;AAGA,MAAMC,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}
+{"version":3,"names":["tabSizes","tabVariants"],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { TabsColor } from '../Tabs';\nimport type { ExtendedStyle, OverridableComponentProps } from '../types';\n\nexport const tabSizes = ['small', 'medium'] as const;\nexport type TabSize = typeof tabSizes[number];\n\nexport const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'] as const;\nexport type TabVariant = typeof tabVariants[number];\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n    /**\n     * If `true`, the badge is visible.\n     * @default false\n     */\n    badgeVisible?: boolean;\n\n    /**\n     * The label of the Tab.\n     */\n    children: string | React.ReactElement;\n\n    /**\n     * If `true`, the indicator is enabled.\n     * @default false\n     */\n    enableIndicator?: boolean;\n\n    /**\n     * The color value inherited from the parent Tabs component.\n     * This allows Tab components to apply consistent styling based on the Tabs container's color scheme.\n     * @default 'default'\n     */\n    parentColor?: TabsColor;\n\n    /**\n     * If `true`, the component is selected.\n     * @default false\n     */\n    selected?: boolean;\n\n    /**\n     * Element placed before the children.\n     */\n    icon?: React.ReactElement;\n\n    /**\n     * If supplied, use this icon on selected state.\n     */\n    selectedIcon?: React.ReactElement;\n\n    /**\n     * The size of the Tab.\n     * @default 'medium'\n     */\n    size?: TabSize;\n\n    /**\n     * The variant to use.\n     * @default 'default'\n     */\n    variant?: TabVariant;\n\n    /**\n     * Function to be passed to the child component's onLayout prop.\n     */\n    onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n\n    /**\n     * Custom style to apply to the inner container of the Tab.\n     * This allows customization of the tab's inner layout and appearance.\n     */\n    innerStyle?: ExtendedStyle | ExtendedStyle[];\n}> {}\n"],"mappings":";;;;;;AAMO,MAAMA,QAAQ,GAAG,CAAC,OAAD,EAAU,QAAV,CAAjB;;AAGA,MAAMC,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}

package/build/commonjs/Tab/useVariantStyleMap.js

@@ -11,7 +11,7 @@ var _styles = require("@fountain-ui/styles");
 
 var _styles2 = require("../styles");
 
-function useVariantStyleMap(variant, selected, size) {
+function useVariantStyleMap(variant, selected, size, parentColor) {
   const theme = (0, _styles2.useTheme)();
   return (0, _react.useMemo)(() => {
     switch (variant) {
@@ -22,7 +22,7 @@ function useVariantStyleMap(variant, selected, size) {
             paddingVertical: theme.spacing(1)
           },
           inner: {
-            backgroundColor: selected ? theme.palette.fill.base : theme.palette.fill.weaker,
+            backgroundColor: selected ? theme.palette.fill.base : parentColor === 'alt' ? theme.palette.surface.base : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             gap: 5,
@@ -75,15 +75,12 @@ function useVariantStyleMap(variant, selected, size) {
             alignItems: 'center',
             height: 49,
             justifyContent: 'flex-start',
-            paddingTop: 10.5,
-            maxWidth: 48
-          },
-          iconContainer: {
-            padding: 0.75
+            maxWidth: 64,
+            paddingTop: 10
           },
           inner: {
             flexDirection: 'column',
-            gap: 4.75
+            gap: 4
           },
           label: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
@@ -119,6 +116,6 @@ function useVariantStyleMap(variant, selected, size) {
           })
         };
     }
-  }, [theme, variant, selected, size]);
+  }, [theme, variant, selected, size, parentColor]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useVariantStyleMap","variant","selected","size","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","surface","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","maxWidth","iconContainer","padding","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    iconContainer?: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean, size: TabSize): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 14 : 15,\n                            lineHeight: size === 'small' ? 18.2 : 19.5,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 4,\n                        paddingHorizontal: 3,\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: selected ? undefined : 0.5,\n                        borderColor: selected ? undefined : theme.palette.border.weak,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: -0.28,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: 10.5,\n                        maxWidth: 48,\n                    },\n                    iconContainer: {\n                        padding: 0.75,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4.75,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10.5,\n                            lineHeight: 10.5,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.105,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: 10,\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 1,\n                        paddingVertical: 10,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 15 : 16,\n                            lineHeight: size === 'small' ? 18.75 : 20,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected, size]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useVariantStyleMap","variant","selected","size","parentColor","theme","useTheme","useMemo","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","borderWidth","undefined","borderColor","border","weak","alignItems","height","justifyContent","maxWidth","strong"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { TabsColor } from '../Tabs';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TabSize, TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    iconContainer?: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(\n    variant: TabVariant,\n    selected: boolean,\n    size: TabSize,\n    parentColor: TabsColor,\n): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        switch (variant) {\n            case 'circular':\n                return {\n                    container: {\n                        paddingHorizontal: theme.spacing(0.75),\n                        paddingVertical: theme.spacing(1),\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : parentColor === 'alt'\n                                ? theme.palette.surface.base\n                                : theme.palette.fill.weaker,\n                        borderRadius: theme.shape.radius.full,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 14 : 15,\n                            lineHeight: size === 'small' ? 18.2 : 19.5,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'circular-home':\n                return {\n                    container: {\n                        paddingBottom: 4,\n                        paddingHorizontal: 3,\n                    },\n                    inner: {\n                        backgroundColor: selected\n                            ? theme.palette.fill.base\n                            : theme.palette.surface.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: selected ? undefined : 0.5,\n                        borderColor: selected ? undefined : theme.palette.border.weak,\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingBottom: 7.5,\n                        paddingHorizontal: 14,\n                        paddingTop: 6.5,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'LexendDeca-Medium',\n                            letterSpacing: -0.28,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        maxWidth: 64,\n                        paddingTop: 10,\n                    },\n                    inner: {\n                        flexDirection: 'column',\n                        gap: 4,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10.5,\n                            lineHeight: 10.5,\n                            fontFamily: 'PretendardStd-Medium',\n                            letterSpacing: -0.105,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n            case 'default':\n            default:\n                return {\n                    container: {\n                        paddingHorizontal: 10,\n                    },\n                    inner: {\n                        flexDirection: 'row',\n                        gap: 5,\n                        paddingHorizontal: 1,\n                        paddingVertical: 10,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: size === 'small' ? 15 : 16,\n                            lineHeight: size === 'small' ? 18.75 : 20,\n                            fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected, size, parentColor]);\n}\n"],"mappings":"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"}

package/build/commonjs/Tabs/Tabs.js

@@ -177,6 +177,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
       onLayout,
       onPress,
       onMouseDown,
+      parentColor: color,
       size,
       variant,
       indicatorSize,

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","forwardRef","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","size","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","container","containerStyle","contentContainer","contentContainerStyle","useTabsStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabStyle","tabElement","cloneElement","enableIndicator","css","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabSize, TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        bottomDivider: {\n            borderBottomColor: theme.palette.border.base,\n            borderBottomWidth: 0.5,\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        color = 'default',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'fit-content',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollViewContentContainerStyle,\n        showDivider = false,\n        size = 'medium' as TabSize,\n        style,\n        variant = 'default' as TabVariant,\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const {\n        container: containerStyle,\n        contentContainer: contentContainerStyle,\n    } = useTabsStyle(variant, size, scrollable);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (outerCoordinates.length === 0) {\n            return [];\n        }\n\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabStyle = child.props.style;\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            size,\n            variant,\n            indicatorSize,\n            style: css([\n                scrollable ? undefined : styles.fixedTab,\n                tabStyle,\n            ]),\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    const backgroundColorMap: Record<TabsColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    containerStyle,\n                    { backgroundColor: backgroundColorMap[color] },\n                    showDivider ? styles.bottomDivider : undefined,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            contentContainerStyle,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","bottomDivider","borderBottomColor","palette","border","base","borderBottomWidth","Tabs","forwardRef","props","ref","children","color","initialIndex","disableIndicator","indicatorSize","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollViewContentContainerStyle","showDivider","size","style","variant","UNSTABLE_sharedIndex","onTabSelected","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","currentIndexRef","useRef","container","containerStyle","contentContainer","contentContainerStyle","useTabsStyle","setTab","newIndex","currentIndex","current","animatedValue","setValue","useImperativeHandle","styles","outerCoordinates","updateCoordinate","useTabCoordinates","innerContentsWidthList","updateInnerContentsWidth","useTabInnerContentsWidth","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","coordinates","useMemo","length","map","innerContentWidth","idx","x1","outerX1","x2","outerX2","tabWidth","distanceFromParent","indicatorStartCoordinate","useEffect","subscribe","tabElements","React","Children","child","index","onTabInnerLayout","event","width","nativeEvent","layout","onLayout","x","onMouseDown","e","preventDefault","onPress","tabStyle","tabElement","cloneElement","enableIndicator","parentColor","css","undefined","filter","Boolean","tabIndicator","backgroundColorMap","default","background","alt","backgroundColor"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type { TabSize, TabVariant } from '../Tab';\nimport type TabsProps from './TabsProps';\nimport type { TabsColor } from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useTabInnerContentsWidth from './useTabInnerContentsWidth';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\nimport useTabsStyle from './useTabsStyle';\n\ntype TabsStyleKeys =\n    | 'root'\n    | 'fixedRoot'\n    | 'fixedTab'\n    | 'bottomDivider';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        fixedRoot: {\n            flexDirection: 'row',\n        },\n        fixedTab: {\n            flex: 1,\n        },\n        bottomDivider: {\n            borderBottomColor: theme.palette.border.base,\n            borderBottomWidth: 0.5,\n        },\n    };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n    const {\n        children,\n        color = 'default',\n        initialIndex = 0,\n        disableIndicator = false,\n        indicatorSize = 'fit-content',\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollViewContentContainerStyle,\n        showDivider = false,\n        size = 'medium' as TabSize,\n        style,\n        variant = 'default' as TabVariant,\n        UNSTABLE_sharedIndex,\n        onTabSelected,\n    } = props;\n\n    const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n    const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n    const realInitialIndex = sharedIndex.initialValue;\n\n    const currentIndexRef = useRef(initialIndex);\n\n    const {\n        container: containerStyle,\n        contentContainer: contentContainerStyle,\n    } = useTabsStyle(variant, size, scrollable);\n\n    const setTab = (newIndex: number) => {\n        const currentIndex = currentIndexRef.current;\n        onTabSelected?.(newIndex, currentIndex);\n\n        sharedIndex.animatedValue.setValue(newIndex);\n    };\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            setTab,\n        }),\n        [sharedIndex],\n    );\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const [outerCoordinates, updateCoordinate] = useTabCoordinates(children);\n    const [innerContentsWidthList, updateInnerContentsWidth] = useTabInnerContentsWidth(children);\n\n    const canRenderIndicator = indicatorSize === 'fit-content'\n        ? isEveryTabCoordinatesDefined(innerContentsWidthList, children)\n        : isEveryTabCoordinatesDefined(outerCoordinates, children);\n\n    const indexStore = useIndexStore(sharedIndex);\n\n    const coordinates = useMemo(() => {\n        if (outerCoordinates.length === 0) {\n            return [];\n        }\n\n        if (indicatorSize !== 'fit-content') {\n            return outerCoordinates;\n        }\n\n        return innerContentsWidthList.map((innerContentWidth, idx) => {\n            const { x1: outerX1, x2: outerX2 } = outerCoordinates[idx];\n\n            const tabWidth = outerX2 - outerX1;\n            const distanceFromParent = (tabWidth - innerContentWidth) / 2;\n            const indicatorStartCoordinate = outerX1 + distanceFromParent;\n\n            return {\n                x1: indicatorStartCoordinate,\n                x2: indicatorStartCoordinate + innerContentWidth,\n            };\n        });\n    }, [outerCoordinates, innerContentsWidthList]);\n\n    useEffect(() => {\n        return indexStore.subscribe(newIndex => {\n            onChange?.(newIndex);\n            currentIndexRef.current = newIndex;\n        });\n    }, [indexStore, onChange]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        if (!child) {\n            return null;\n        }\n\n        const onTabInnerLayout = (event: LayoutChangeEvent) => {\n            const { width } = event.nativeEvent.layout;\n\n            updateInnerContentsWidth(index, width);\n        };\n\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            updateCoordinate(index, x, width);\n\n            // @ts-ignore\n            child.props.onLayout?.(event);\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            setTab(index);\n\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        // @ts-ignore\n        const tabStyle = child.props.style;\n\n        // @ts-ignore\n        const tabElement = cloneElement(child, {\n            enableIndicator: !disableIndicator && !canRenderIndicator,\n            onTabInnerLayout,\n            onLayout,\n            onPress,\n            onMouseDown,\n            parentColor: color,\n            size,\n            variant,\n            indicatorSize,\n            style: css([\n                scrollable ? undefined : styles.fixedTab,\n                tabStyle,\n            ]),\n        });\n\n        return (\n            <IndexAwareTab\n                children={tabElement}\n                index={index}\n                initialIndex={realInitialIndex}\n            />\n        );\n    })?.filter(Boolean);\n\n    const tabIndicator = canRenderIndicator ? (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            initialIndex={realInitialIndex}\n        />\n    ) : null;\n\n    const backgroundColorMap: Record<TabsColor, string> = {\n        default: theme.palette.background.base,\n        alt: theme.palette.background.alt,\n    };\n\n    return (\n        <InternalContext.Provider value={{ indexStore }}>\n            <View\n                style={css([\n                    styles.root,\n                    containerStyle,\n                    { backgroundColor: backgroundColorMap[color] },\n                    showDivider ? styles.bottomDivider : undefined,\n                    scrollable ? undefined : styles.fixedRoot,\n                    style,\n                ])}\n            >\n                {scrollable ? (\n                    <ScrollableTabsView\n                        automaticallyAdjustContentInsets={false}\n                        bounces={false}\n                        contentContainerStyle={css([\n                            contentContainerStyle,\n                            scrollViewContentContainerStyle,\n                        ])}\n                        coordinates={coordinates}\n                        directionalLockEnabled={true}\n                        horizontal={true}\n                        initialIndex={realInitialIndex}\n                        scrollsToTop={false}\n                        showsHorizontalScrollIndicator={false}\n                        showsVerticalScrollIndicator={false}\n                        keyboardDismissMode={keyboardDismissMode}\n                        keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                    >\n                        {tabElements}\n                        {tabIndicator}\n                    </ScrollableTabsView>\n                ) : (\n                    <React.Fragment>\n                        {tabElements}\n                        {tabIndicator}\n                    </React.Fragment>\n                )}\n            </View>\n        </InternalContext.Provider>\n    );\n});\n\nexport default Tabs;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tabs';\nexport type { default as TabsProps, TabIndicatorSize, TabsColor } from './TabsProps';\nexport { tabIndicatorSizes, tabsColors } from './TabsProps';\nexport type { TabsInstance } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/Tabs/useTabsStyle.js

@@ -48,9 +48,10 @@ function useTabsStyle(variant, size, scrollable) {
         {
           const paddingHorizontal = 24;
           return {
-            container: {
-              borderTopColor: theme.palette.border.base,
-              borderTopWidth: 0.5,
+            container: { ...(isTablet ? {
+                alignSelf: 'center',
+                minWidth: 460
+              } : {}),
               justifyContent: 'space-between',
               paddingHorizontal: scrollable ? 0 : paddingHorizontal
             },

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

@@ -1 +1 @@
-{"version":3,"names":["useTabsStyle","variant","size","scrollable","theme","useTheme","isTablet","useBreakpointUp","useMemo","paddingHorizontal","container","paddingBottom","contentContainer","borderTopColor","palette","border","base","borderTopWidth","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                        borderTopColor: theme.palette.border.base,\n                        borderTopWidth: 0.5,\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;cACPG,cAAc,EAAET,KAAK,CAACU,OAAN,CAAcC,MAAd,CAAqBC,IAD9B;cAEPC,cAAc,EAAE,GAFT;cAGPC,cAAc,EAAE,eAHT;cAIPT,iBAAiB,EAAEN,UAAU,GAAG,CAAH,GAAOM;YAJ7B,CADR;YAOHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEN,UAAU,GAAGM,iBAAH,GAAuB;YADtC;UAPf,CAAP;QAWH;;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;IAtDL;EAwDH,CAzDM,EAyDJ,CAACL,KAAD,EAAQH,OAAR,EAAiBK,QAAjB,EAA2BJ,IAA3B,EAAiCC,UAAjC,CAzDI,CAAP;AA0DH"}
+{"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,6 +37,12 @@ const styles = _reactNative.StyleSheet.create({
   input: {
     flexGrow: 1
   },
+  inputWrapper: {
+    flexGrow: 1
+  },
+  placeholderWrapper: { ..._reactNative.StyleSheet.absoluteFillObject,
+    justifyContent: 'center'
+  },
   secureToggleButton: {
     alignItems: 'flex-end',
     padding: 0
@@ -67,6 +73,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
+    placeholder: placeholderProp,
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
@@ -111,10 +118,12 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     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]);
@@ -131,18 +140,26 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     color: 'base',
     height: 19,
     width: 19
-  })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
+  })) : 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: 17.31,

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","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","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","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    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        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                    <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                <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={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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"}
+{"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

@@ -53,17 +53,17 @@ function useVariantStyleMap(variant, status, isFocused) {
           },
           inputStyle: {
             padding: 0,
-            paddingRight: 16,
-            ...(0, _styles2.createFontStyle)(theme, {
-              selector: _ => (0, _styles.typographyOf)({
-                fontSize: 18,
-                lineHeight: 27,
-                fontFamily: 'PretendardStd-SemiBold',
-                letterSpacing: 0
-              }),
-              color: theme.palette.text.strong
-            })
+            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, {
@@ -85,17 +85,17 @@ function useVariantStyleMap(variant, status, isFocused) {
             paddingTop: 11
           },
           inputStyle: {
-            padding: 0,
-            ...(0, _styles2.createFontStyle)(theme, {
-              selector: _ => (0, _styles.typographyOf)({
-                fontSize: 16,
-                lineHeight: 19.2,
-                fontFamily: 'PretendardStd-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","minHeight","paddingVertical","inputStyle","padding","paddingRight","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 { 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                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                        paddingRight: 16,\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                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\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":["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":"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"}

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

@@ -40,8 +40,8 @@ function BackButton(props) {
   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: 18,
-    width: 10
+    height: 24,
+    width: 24
   })));
 }
 //# sourceMappingURL=BackButton.js.map

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

@@ -1 +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={18}\n                    width={10}\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"}
+{"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/internal/icons/AppBarChevronLeft.js

@@ -16,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M0.292893 9.70711C-0.0976311 9.31658 -0.0976311 8.68342 0.292893 8.29289L8.2929 0.292893C8.68342 -0.097631 9.31658 -0.097631 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L2.41421 9L9.70711 16.2929C10.0976 16.6834 10.0976 17.3166 9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L0.292893 9.70711Z"
-})), 'AppBarChevronLeft', '0 0 10 18');
+  d: "M7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L15.2929 3.29289C15.6834 2.90237 16.3166 2.90237 16.7071 3.29289C17.0976 3.68342 17.0976 4.31658 16.7071 4.70711L9.41421 12L16.7071 19.2929C17.0976 19.6834 17.0976 20.3166 16.7071 20.7071C16.3166 21.0976 15.6834 21.0976 15.2929 20.7071L7.29289 12.7071Z"
+})), 'AppBarChevronLeft', '0 0 24 24');
 
 exports.default = _default;
 //# sourceMappingURL=AppBarChevronLeft.js.map

package/build/commonjs/internal/icons/AppBarChevronLeft.js.map

@@ -1 +1 @@
-{"version":3,"names":["createSvgIcon"],"sources":["AppBarChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <React.Fragment>\n        <Path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M0.292893 9.70711C-0.0976311 9.31658 -0.0976311 8.68342 0.292893 8.29289L8.2929 0.292893C8.68342 -0.097631 9.31658 -0.097631 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L2.41421 9L9.70711 16.2929C10.0976 16.6834 10.0976 17.3166 9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L0.292893 9.70711Z\"\n        />\n    </React.Fragment>,\n    'AppBarChevronLeft',\n    '0 0 10 18',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADJ,CADW,EAQX,mBARW,EASX,WATW,C"}
+{"version":3,"names":["createSvgIcon"],"sources":["AppBarChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <React.Fragment>\n        <Path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L15.2929 3.29289C15.6834 2.90237 16.3166 2.90237 16.7071 3.29289C17.0976 3.68342 17.0976 4.31658 16.7071 4.70711L9.41421 12L16.7071 19.2929C17.0976 19.6834 17.0976 20.3166 16.7071 20.7071C16.3166 21.0976 15.6834 21.0976 15.2929 20.7071L7.29289 12.7071Z\"\n        />\n    </React.Fragment>,\n    'AppBarChevronLeft',\n    '0 0 24 24',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADJ,CADW,EAQX,mBARW,EASX,WATW,C"}