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

package/build/module/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","Text","ButtonBase","Check","CheckedIcon","Row","createFontStyle","css","useTheme","cloneElementSafely","RadioContext","useStyles","theme","root","alignItems","flexDirection","gap","spacing","justifyContent","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","otherProps","styles","context","handlePress","isChecked","defaultCheckedIcon","icon","color","rootStyle","fontStyle","selector","typography","body1","regular","palette","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flexDirection: 'row',\n            gap: theme.spacing(8),\n            justifyContent: 'space-between',\n        },\n        content: {\n            gap: theme.spacing(2),\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, { color: 'strong' });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Row\n                alignItems={'center'}\n                style={styles.content}\n            >\n                {startIcon}\n\n                <Text\n                    children={children}\n                    style={fontStyle}\n                />\n            </Row>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,aAArC;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,kBAAT,QAAmC,UAAnC;AACA,SAASC,YAAT,QAA6B,oCAA7B;;AAKA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,aAAa,EAAE,KAFb;MAGFC,GAAG,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAHH;MAIFC,cAAc,EAAE;IAJd,CADH;IAOHC,OAAO,EAAE;MACLH,GAAG,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CADA;MAELG,SAAS,EAAE;IAFN;EAPN,CAAP;AAYH,CAfD;;AAiBA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,WAAW,EAAEC,aAHX;IAIFC,QAAQ,GAAG,KAJT;IAKFC,QAAQ,EAAEC,YALR;IAMFC,SAAS,EAAEC,aANT;IAOFC,KAPE;IAQFC,KARE;IASF,GAAGC;EATD,IAUFZ,KAVJ;EAYA,MAAMV,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAM2B,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMyB,OAAO,GAAGpC,UAAU,CAACU,YAAD,CAA1B;;EAEA,MAAM2B,WAAW,GAAG,MAAM;IACtB,MAAMT,QAAQ,GAAG,CAAAQ,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAER,QAAT,KAAqBC,YAAtC;;IACA,IAAID,QAAJ,EAAc;MACVA,QAAQ,CAACK,KAAD,CAAR;IACH;EACJ,CALD;;EAOA,MAAMK,SAAS,GAAG,CAAAF,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEH,KAAT,MAAmBA,KAAnB,IAA4BV,OAA9C;EAEA,MAAMgB,kBAAkB,gBACpB,oBAAC,WAAD;IAAa,KAAK,EAAE;EAApB,EADJ;EAIA,MAAMd,WAAW,GAAGC,aAAa,IAAIa,kBAArC;EACA,MAAMC,IAAI,GAAGF,SAAS,GAAGb,WAAH,GAAiB,IAAvC;EAEA,MAAMK,SAAS,GAAGrB,kBAAkB,CAACsB,aAAD,EAAgB;IAAEU,KAAK,EAAE;EAAT,CAAhB,CAApC;EAEA,MAAMC,SAAS,GAAGnC,GAAG,CAAC,CAClB4B,MAAM,CAACtB,IADW,EAElBmB,KAFkB,CAAD,CAArB;EAKA,MAAMW,SAAS,GAAGrC,eAAe,CAACM,KAAD,EAAQ;IACrCgC,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCN,KAAK,EAAE7B,KAAK,CAACoC,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;EAKA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEvB,QADd;IAEI,OAAO,EAAEU,WAFb;IAGI,KAAK,EAAEK;EAHX,GAIQR,UAJR,gBAMI,oBAAC,GAAD;IACI,UAAU,EAAE,QADhB;IAEI,KAAK,EAAEC,MAAM,CAAChB;EAFlB,GAIKW,SAJL,eAMI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,KAAK,EAAEmB;EAFX,EANJ,CANJ,EAkBKH,IAlBL,CADJ;AAsBH;AAAA"}
+{"version":3,"names":["React","useContext","Text","ButtonBase","Check","CheckedIcon","Row","createFontStyle","css","useTheme","cloneElementSafely","RadioContext","DEFAULT_START_ICON_SIZE","useStyles","theme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","otherProps","styles","context","handlePress","isChecked","defaultCheckedIcon","icon","color","height","width","rootStyle","fontStyle","selector","typography","body1","regular","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Row\n                alignItems={'center'}\n                style={styles.content}\n            >\n                {startIcon}\n\n                <Text\n                    children={children}\n                    style={fontStyle}\n                />\n            </Row>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,aAArC;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,kBAAT,QAAmC,UAAnC;AACA,SAASC,YAAT,QAA6B,oCAA7B;AAGA,MAAMC,uBAAuB,GAAG,EAAhC;;AAIA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAO;IACHM,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAcC,MAAd,CAAqBC,IAFtC;MAGFC,iBAAiB,EAAE,GAHjB;MAIFC,aAAa,EAAE,KAJb;MAKFC,GAAG,EAAE,EALH;MAMFC,cAAc,EAAE,eANd;MAOFC,eAAe,EAAE;IAPf,CADH;IAUHC,OAAO,EAAE;MACLH,GAAG,EAAE,CADA;MAELI,SAAS,EAAE;IAFN;EAVN,CAAP;AAeH,CAlBD;;AAoBA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,WAAW,EAAEC,aAHX;IAIFC,QAAQ,GAAG,KAJT;IAKFC,QAAQ,EAAEC,YALR;IAMFC,SAAS,EAAEC,aANT;IAOFC,KAPE;IAQFC,KARE;IASF,GAAGC;EATD,IAUFZ,KAVJ;EAYA,MAAMf,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMiC,MAAM,GAAG7B,SAAS,EAAxB;EAEA,MAAM8B,OAAO,GAAG1C,UAAU,CAACU,YAAD,CAA1B;;EAEA,MAAMiC,WAAW,GAAG,MAAM;IACtB,MAAMT,QAAQ,GAAG,CAAAQ,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAER,QAAT,KAAqBC,YAAtC;;IACA,IAAID,QAAJ,EAAc;MACVA,QAAQ,CAACK,KAAD,CAAR;IACH;EACJ,CALD;;EAOA,MAAMK,SAAS,GAAG,CAAAF,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEH,KAAT,MAAmBA,KAAnB,IAA4BV,OAA9C;EAEA,MAAMgB,kBAAkB,gBACpB,oBAAC,WAAD;IAAa,KAAK,EAAE;EAApB,EADJ;EAIA,MAAMd,WAAW,GAAGC,aAAa,IAAIa,kBAArC;EACA,MAAMC,IAAI,GAAGF,SAAS,GAAGb,WAAH,GAAiB,IAAvC;EAEA,MAAMK,SAAS,GAAG3B,kBAAkB,CAAC4B,aAAD,EAAgB;IAChDU,KAAK,EAAE,QADyC;IAEhDC,MAAM,EAAErC,uBAFwC;IAGhDsC,KAAK,EAAEtC;EAHyC,CAAhB,CAApC;EAMA,MAAMuC,SAAS,GAAG3C,GAAG,CAAC,CAClBkC,MAAM,CAAC3B,IADW,EAElBwB,KAFkB,CAAD,CAArB;EAKA,MAAMa,SAAS,GAAG7C,eAAe,CAACO,KAAD,EAAQ;IACrCuC,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCR,KAAK,EAAElC,KAAK,CAACI,OAAN,CAAcuC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;EAKA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAExB,QADd;IAEI,OAAO,EAAEU,WAFb;IAGI,KAAK,EAAEO;EAHX,GAIQV,UAJR,gBAMI,oBAAC,GAAD;IACI,UAAU,EAAE,QADhB;IAEI,KAAK,EAAEC,MAAM,CAAChB;EAFlB,GAIKW,SAJL,eAMI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,KAAK,EAAEqB;EAFX,EANJ,CANJ,EAkBKL,IAlBL,CADJ;AAsBH;AAAA"}

package/build/module/RadioGroup/RadioGroup.js

@@ -1,20 +1,6 @@
-import React, { Children } from 'react';
+import React from 'react';
 import { View } from 'react-native';
-import { useTheme } from '../styles';
-import { cloneElementSafely } from '../utils';
 import RadioContextProvider from './RadioContextProvider';
-
-const useStyles = function () {
-  const theme = useTheme();
-  return {
-    root: {
-      borderBottomColor: theme.palette.border.weak,
-      borderBottomWidth: 0.5,
-      paddingVertical: theme.spacing(3.5)
-    }
-  };
-};
-
 export default function RadioGroup(props) {
   const {
     children,
@@ -22,16 +8,12 @@ export default function RadioGroup(props) {
     onChange,
     ...otherProps
   } = props;
-  const styles = useStyles();
-  const radios = Children.map(children, child => /*#__PURE__*/React.createElement(View, {
-    style: styles.root
-  }, cloneElementSafely(child)));
   return /*#__PURE__*/React.createElement(RadioContextProvider, {
     value: {
       value,
       onChange
     }
-  }, /*#__PURE__*/React.createElement(View, otherProps, radios));
+  }, /*#__PURE__*/React.createElement(View, otherProps, children));
 }
 ;
 //# sourceMappingURL=RadioGroup.js.map

package/build/module/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","View","useTheme","cloneElementSafely","RadioContextProvider","useStyles","theme","root","borderBottomColor","palette","border","weak","borderBottomWidth","paddingVertical","spacing","RadioGroup","props","children","value","onChange","otherProps","styles","radios","map","child"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React, { Children } from 'react';\nimport { View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { FalsyReactElement } from '../utils';\nimport { cloneElementSafely } from '../utils';\nimport RadioContextProvider from './RadioContextProvider';\nimport type RadioGroupProps from './RadioGroupProps';\n\ntype RadioItemStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<RadioItemStyles> = function (): RadioItemStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            paddingVertical: theme.spacing(3.5),\n        },\n    };\n};\n\nexport default function RadioGroup(props: RadioGroupProps) {\n    const {\n        children,\n        value,\n        onChange,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const radios = Children.map(children, (child) => (\n        <View style={styles.root}>\n            {cloneElementSafely(child as FalsyReactElement)}\n        </View>\n    ));\n\n    return (\n        <RadioContextProvider value={{ value, onChange }}>\n            <View {...otherProps}>\n                {radios}\n            </View>\n        </RadioContextProvider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAEA,SAASC,kBAAT,QAAmC,UAAnC;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;;AAKA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IADtC;MAEFC,iBAAiB,EAAE,GAFjB;MAGFC,eAAe,EAAEP,KAAK,CAACQ,OAAN,CAAc,GAAd;IAHf;EADH,CAAP;AAOH,CAVD;;AAYA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC,QAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,MAAMK,MAAM,GAAGhB,SAAS,EAAxB;EAEA,MAAMiB,MAAM,GAAGtB,QAAQ,CAACuB,GAAT,CAAaN,QAAb,EAAwBO,KAAD,iBAClC,oBAAC,IAAD;IAAM,KAAK,EAAEH,MAAM,CAACd;EAApB,GACKJ,kBAAkB,CAACqB,KAAD,CADvB,CADW,CAAf;EAMA,oBACI,oBAAC,oBAAD;IAAsB,KAAK,EAAE;MAAEN,KAAF;MAASC;IAAT;EAA7B,gBACI,oBAAC,IAAD,EAAUC,UAAV,EACKE,MADL,CADJ,CADJ;AAOH;AAAA"}
+{"version":3,"names":["React","View","RadioContextProvider","RadioGroup","props","children","value","onChange","otherProps"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport RadioContextProvider from './RadioContextProvider';\nimport type RadioGroupProps from './RadioGroupProps';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n    const {\n        children,\n        value,\n        onChange,\n        ...otherProps\n    } = props;\n\n    return (\n        <RadioContextProvider value={{ value, onChange }}>\n            <View {...otherProps}>\n                {children}\n            </View>\n        </RadioContextProvider>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AAGA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,KAFE;IAGFC,QAHE;IAIF,GAAGC;EAJD,IAKFJ,KALJ;EAOA,oBACI,oBAAC,oBAAD;IAAsB,KAAK,EAAE;MAAEE,KAAF;MAASC;IAAT;EAA7B,gBACI,oBAAC,IAAD,EAAUC,UAAV,EACKH,QADL,CADJ,CADJ;AAOH;AAAA"}

package/build/module/Section/Section.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useContentContainerStyle } from '../hooks';
+import { css } from '../styles';
+export default function Section(props) {
+  const {
+    children,
+    maxWidth,
+    style: styleProp
+  } = props;
+  const styles = useContentContainerStyle({
+    maxWidth
+  });
+  const rootStyle = css([styles, styleProp]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: rootStyle
+  }, children);
+}
+//# sourceMappingURL=Section.js.map

package/build/module/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","useContentContainerStyle","css","Section","props","children","maxWidth","style","styleProp","styles","rootStyle"],"sources":["Section.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useContentContainerStyle } from '../hooks';\nimport { css } from '../styles';\nimport type SectionProps from './SectionProps';\n\nexport default function Section(props: SectionProps) {\n    const {\n        children,\n        maxWidth,\n        style: styleProp,\n    } = props;\n\n    const styles = useContentContainerStyle({ maxWidth });\n\n    const rootStyle = css([\n        styles,\n        styleProp,\n    ]);\n\n    return (\n        <View style={rootStyle}>\n            {children}\n        </View>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,wBAAT,QAAyC,UAAzC;AACA,SAASC,GAAT,QAAoB,WAApB;AAGA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,QADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC;EAHL,IAIFJ,KAJJ;EAMA,MAAMK,MAAM,GAAGR,wBAAwB,CAAC;IAAEK;EAAF,CAAD,CAAvC;EAEA,MAAMI,SAAS,GAAGR,GAAG,CAAC,CAClBO,MADkB,EAElBD,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAEE;EAAb,GACKL,QADL,CADJ;AAKH"}

package/build/module/Section/SectionProps.js

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

package/build/module/Section/SectionProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["SectionProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface SectionProps extends OverridableComponentProps<ViewProps, {\n    maxWidth?: number;\n}> {}\n"],"mappings":""}

package/build/module/Section/index.js

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

package/build/module/Section/index.js.map

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

package/build/module/ShadowView/ShadowView.native.js

@@ -17,6 +17,8 @@ export default function ShadowView(props) {
   const {
     borderRadius,
     height,
+    maxHeight,
+    maxWidth,
     width
   } = styleProp;
   return nativeShadows.reduce((accumulator, nativeShadow) => {
@@ -25,6 +27,8 @@ export default function ShadowView(props) {
       }, {
         borderRadius: borderRadius ?? 0,
         height,
+        maxHeight,
+        maxWidth,
         width
       }])
     }, accumulator);

package/build/module/ShadowView/ShadowView.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","css","useTheme","ShadowView","props","children","style","styleProp","variant","otherProps","theme","nativeShadows","shadow","borderRadius","height","width","reduce","accumulator","nativeShadow"],"sources":["ShadowView.native.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { FountainUiStyle, ShadowVariant } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type ShadowViewProps from './ShadowViewProps';\n\nexport default function ShadowView(props: ShadowViewProps) {\n    const {\n        children,\n        style: styleProp = {},\n        variant = 100 as ShadowVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const { nativeShadows } = theme.shadow[variant];\n\n    const {\n        borderRadius,\n        height,\n        width,\n    } = styleProp as FountainUiStyle;\n\n    return nativeShadows.reduce((accumulator, nativeShadow) => {\n        return (\n            <View\n                style={css([\n                    { ...nativeShadow },\n                    {\n                        borderRadius: borderRadius ?? 0,\n                        height,\n                        width,\n                    },\n                ])}\n            >\n                {accumulator}\n            </View>\n        );\n    }, (\n        <View\n            style={styleProp}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    ));\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAAS,GAAG,EAFjB;IAGFC,OAAO,GAAG,GAHR;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMM,KAAK,GAAGR,QAAQ,EAAtB;EAEA,MAAM;IAAES;EAAF,IAAoBD,KAAK,CAACE,MAAN,CAAaJ,OAAb,CAA1B;EAEA,MAAM;IACFK,YADE;IAEFC,MAFE;IAGFC;EAHE,IAIFR,SAJJ;EAMA,OAAOI,aAAa,CAACK,MAAd,CAAqB,CAACC,WAAD,EAAcC,YAAd,KAA+B;IACvD,oBACI,oBAAC,IAAD;MACI,KAAK,EAAEjB,GAAG,CAAC,CACP,EAAE,GAAGiB;MAAL,CADO,EAEP;QACIL,YAAY,EAAEA,YAAY,IAAI,CADlC;QAEIC,MAFJ;QAGIC;MAHJ,CAFO,CAAD;IADd,GAUKE,WAVL,CADJ;EAcH,CAfM,eAgBH,oBAAC,IAAD;IACI,KAAK,EAAEV;EADX,GAEQE,UAFR,GAIKJ,QAJL,CAhBG,CAAP;AAuBH"}
+{"version":3,"names":["React","View","css","useTheme","ShadowView","props","children","style","styleProp","variant","otherProps","theme","nativeShadows","shadow","borderRadius","height","maxHeight","maxWidth","width","reduce","accumulator","nativeShadow"],"sources":["ShadowView.native.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { FountainUiStyle, ShadowVariant } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type ShadowViewProps from './ShadowViewProps';\n\nexport default function ShadowView(props: ShadowViewProps) {\n    const {\n        children,\n        style: styleProp = {},\n        variant = 100 as ShadowVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const { nativeShadows } = theme.shadow[variant];\n\n    const {\n        borderRadius,\n        height,\n        maxHeight,\n        maxWidth,\n        width,\n    } = styleProp as FountainUiStyle;\n\n    return nativeShadows.reduce((accumulator, nativeShadow) => {\n        return (\n            <View\n                style={css([\n                    { ...nativeShadow },\n                    {\n                        borderRadius: borderRadius ?? 0,\n                        height,\n                        maxHeight,\n                        maxWidth,\n                        width,\n                    },\n                ])}\n            >\n                {accumulator}\n            </View>\n        );\n    }, (\n        <View\n            style={styleProp}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    ));\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAAS,GAAG,EAFjB;IAGFC,OAAO,GAAG,GAHR;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMM,KAAK,GAAGR,QAAQ,EAAtB;EAEA,MAAM;IAAES;EAAF,IAAoBD,KAAK,CAACE,MAAN,CAAaJ,OAAb,CAA1B;EAEA,MAAM;IACFK,YADE;IAEFC,MAFE;IAGFC,SAHE;IAIFC,QAJE;IAKFC;EALE,IAMFV,SANJ;EAQA,OAAOI,aAAa,CAACO,MAAd,CAAqB,CAACC,WAAD,EAAcC,YAAd,KAA+B;IACvD,oBACI,oBAAC,IAAD;MACI,KAAK,EAAEnB,GAAG,CAAC,CACP,EAAE,GAAGmB;MAAL,CADO,EAEP;QACIP,YAAY,EAAEA,YAAY,IAAI,CADlC;QAEIC,MAFJ;QAGIC,SAHJ;QAIIC,QAJJ;QAKIC;MALJ,CAFO,CAAD;IADd,GAYKE,WAZL,CADJ;EAgBH,CAjBM,eAkBH,oBAAC,IAAD;IACI,KAAK,EAAEZ;EADX,GAEQE,UAFR,GAIKJ,QAJL,CAlBG,CAAP;AAyBH"}

package/build/module/SnackbarContent/SnackbarContent.js

@@ -26,6 +26,14 @@ const useStyles = function () {
     },
     actionButton: {
       marginLeft: theme.spacing(6)
+    },
+    actionLabel: {
+      paddingBottom: theme.spacing(1.5),
+      paddingTop: theme.spacing(1.25)
+    },
+    actionElement: {
+      paddingLeft: theme.spacing(2),
+      paddingVertical: theme.spacing(1.25)
     }
   };
 };
@@ -45,18 +53,23 @@ export default function SnackbarContent(props) {
   const theme = useTheme();
   const titleFontStyle = createFontStyle(theme, {
     selector: _ => typographyOf({
-      fontSize: 14,
-      lineHeight: 18.2,
-      fontFamily: 'Pretendard-SemiBold',
+      fontSize: 15,
+      lineHeight: 19.5,
+      fontFamily: 'PretendardStd-SemiBold',
       letterSpacing: 0
     }),
     color: theme.palette.text.strongInverse
   });
   const messageFontStyle = createFontStyle(theme, {
-    selector: _ => typographyOf({
-      fontSize: 13,
-      lineHeight: 16.9,
-      fontFamily: 'Pretendard-Regular',
+    selector: _ => title ? typographyOf({
+      fontSize: 12,
+      lineHeight: 15.6,
+      fontFamily: 'PretendardStd-Regular',
+      letterSpacing: 0
+    }) : typographyOf({
+      fontSize: 14,
+      lineHeight: 18.2,
+      fontFamily: 'PretendardStd-Regular',
       letterSpacing: 0
     }),
     color: theme.palette.text.strongInverse
@@ -96,10 +109,14 @@ export default function SnackbarContent(props) {
     flex: 1
   }), /*#__PURE__*/React.createElement(View, {
     style: styles.actionButton
-  }, typeof actionContent === 'string' ? /*#__PURE__*/React.createElement(Text, {
+  }, typeof actionContent === 'string' ? /*#__PURE__*/React.createElement(View, {
+    style: styles.actionLabel
+  }, /*#__PURE__*/React.createElement(Text, {
     children: actionContent,
     style: labelFontStyle
-  }) : actionContent)) : null);
+  })) : /*#__PURE__*/React.createElement(View, {
+    style: styles.actionElement
+  }, actionContent))) : null);
 }
 ;
 //# sourceMappingURL=SnackbarContent.js.map

package/build/module/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","typographyOf","createFontStyle","css","useTheme","ButtonBase","Column","Spacer","Typography","StatusIcon","useStyles","theme","root","flexDirection","alignItems","alignSelf","backgroundColor","palette","surface","accent","borderRadius","maxWidth","paddingBottom","spacing","paddingHorizontal","paddingTop","actionButton","marginLeft","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","hasActionButton","rootStyle","shape","radius","xl","undefined","width"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            alignSelf: 'center',\n            backgroundColor: theme.palette.surface.accent,\n            borderRadius: 22,\n            maxWidth: 400,\n            paddingBottom: theme.spacing(2.25),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n        actionButton: {\n            marginLeft: theme.spacing(6),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionContent,\n        message,\n        title,\n        onPress,\n        style: styleProp,\n        status = 'info',\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 14,\n            lineHeight: 18.2,\n            fontFamily: 'Pretendard-SemiBold',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.9,\n            fontFamily: 'Pretendard-Regular',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.25,\n            fontFamily: 'LexendDeca-SemiBold',\n            letterSpacing: -0.26,\n        }),\n        color: theme.palette.text.accent,\n    });\n\n    const hasActionButton = !!(actionContent && onPress);\n\n    const rootStyle = css([\n        styles.root,\n        startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,\n        hasActionButton ? { width: '100%' } : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : status !== 'info' ? (\n                <React.Fragment>\n                    <StatusIcon status={status}/>\n\n                    <Spacer size={1.5}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionContent ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <View style={styles.actionButton}>\n                        {typeof actionContent === 'string' ? (\n                            <Text\n                                children={actionContent}\n                                style={labelFontStyle}\n                            />\n                        ) : (actionContent)}\n                    </View>\n                </React.Fragment>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","typographyOf","createFontStyle","css","useTheme","ButtonBase","Column","Spacer","Typography","StatusIcon","useStyles","theme","root","flexDirection","alignItems","alignSelf","backgroundColor","palette","surface","accent","borderRadius","maxWidth","paddingBottom","spacing","paddingHorizontal","paddingTop","actionButton","marginLeft","actionLabel","actionElement","paddingLeft","paddingVertical","SnackbarContent","props","actionContent","message","title","onPress","style","styleProp","status","startIcon","otherProps","styles","titleFontStyle","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","messageFontStyle","labelFontStyle","hasActionButton","rootStyle","shape","radius","xl","undefined","width"],"sources":["SnackbarContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { typographyOf } from '@fountain-ui/styles';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport type SnackbarContentProps from './SnackbarContentProps';\nimport StatusIcon from './StatusIcon';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'actionButton' | 'actionLabel' | 'actionElement'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            alignSelf: 'center',\n            backgroundColor: theme.palette.surface.accent,\n            borderRadius: 22,\n            maxWidth: 400,\n            paddingBottom: theme.spacing(2.25),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n        actionButton: {\n            marginLeft: theme.spacing(6),\n        },\n        actionLabel: {\n            paddingBottom: theme.spacing(1.5),\n            paddingTop: theme.spacing(1.25),\n        },\n        actionElement: {\n            paddingLeft: theme.spacing(2),\n            paddingVertical: theme.spacing(1.25),\n        },\n    };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n    const {\n        actionContent,\n        message,\n        title,\n        onPress,\n        style: styleProp,\n        status = 'info',\n        startIcon,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 15,\n            lineHeight: 19.5,\n            fontFamily: 'PretendardStd-SemiBold',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const messageFontStyle = createFontStyle(theme, {\n        selector: (_) => title\n            ? typographyOf({\n                fontSize: 12,\n                lineHeight: 15.6,\n                fontFamily: 'PretendardStd-Regular',\n                letterSpacing: 0,\n            })\n            : typographyOf({\n                fontSize: 14,\n                lineHeight: 18.2,\n                fontFamily: 'PretendardStd-Regular',\n                letterSpacing: 0,\n            }),\n        color: theme.palette.text.strongInverse,\n    });\n\n    const labelFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 13,\n            lineHeight: 16.25,\n            fontFamily: 'LexendDeca-SemiBold',\n            letterSpacing: -0.26,\n        }),\n        color: theme.palette.text.accent,\n    });\n\n    const hasActionButton = !!(actionContent && onPress);\n\n    const rootStyle = css([\n        styles.root,\n        startIcon ? { borderRadius: theme.shape.radius.xl } : undefined,\n        hasActionButton ? { width: '100%' } : undefined,\n        styleProp,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {startIcon ? (\n                <React.Fragment>\n                    {startIcon}\n\n                    <Spacer size={3}/>\n                </React.Fragment>\n            ) : status !== 'info' ? (\n                <React.Fragment>\n                    <StatusIcon status={status}/>\n\n                    <Spacer size={1.5}/>\n                </React.Fragment>\n            ) : null}\n\n            <Column>\n                {title ? (\n                    <Typography\n                        children={title}\n                        style={css([titleFontStyle])}\n                    />\n                ) : null}\n\n                <Text\n                    children={message}\n                    style={css([messageFontStyle])}\n                />\n            </Column>\n\n            {actionContent ? (\n                <React.Fragment>\n                    <Spacer flex={1}/>\n\n                    <View style={styles.actionButton}>\n                        {typeof actionContent === 'string' ? (\n                            <View style={styles.actionLabel}>\n                                <Text\n                                    children={actionContent}\n                                    style={labelFontStyle}\n                                />\n                            </View>\n                        ) : (\n                            <View style={styles.actionElement}>\n                                {actionContent}\n                            </View>\n                        )}\n                    </View>\n                </React.Fragment>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/module/Tab/Tab.js

@@ -3,9 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { Platform, Text, View } from 'react-native';
 import Badge from '../Badge';
-import Spacer from '../Spacer';
 import TabBase from '../TabBase';
-import { css, StyleSheet, useTheme } from '../styles';
+import { css, StyleSheet } from '../styles';
 import { cloneElementSafely } from '../utils';
 import useVariantStyleMap from './useVariantStyleMap';
 const styles = StyleSheet.create({
@@ -25,41 +24,45 @@ export default function Tab(props) {
     children,
     enableIndicator = false,
     icon: defaultIcon,
+    parentColor = 'default',
     selected = false,
     selectedIcon,
+    size = 'medium',
     variant = 'default',
     style: styleProp,
+    innerStyle: innerStyleProp,
     onTabInnerLayout,
     ...otherProps
   } = props;
-  const theme = useTheme();
-  const vertical = variant === 'bottom-navigation';
   const {
     container: containerStyle,
+    iconContainer: iconContainerStyle,
     inner: innerStyle,
     label: labelStyle
-  } = useVariantStyleMap(variant, selected);
+  } = useVariantStyleMap(variant, selected, size, parentColor);
   const tabBaseStyle = css([styles.root, containerStyle, styleProp]);
-  const tabInnerStyle = css([styles.filledInner, innerStyle]);
-  const pressEffect = selected ? 'none' : 'opacity';
+  const tabInnerStyle = css([styles.filledInner, innerStyle, innerStyleProp]);
   const icon = selected ? selectedIcon || defaultIcon : defaultIcon;
-  const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;
-  const iconElement = cloneElementSafely(icon, {
-    fill: iconColor
-  });
+  const iconElement = cloneElementSafely(icon);
   const tabElement = typeof children !== 'string' ? cloneElementSafely(children, {
     selected
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconElement ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
-    invisible: !badgeVisible
-  }, iconElement), /*#__PURE__*/React.createElement(Spacer, {
-    size: 1.25
-  })) : null, /*#__PURE__*/React.createElement(Text, {
+    horizontalOffset: -4,
+    invisible: !badgeVisible,
+    verticalOffset: -4
+  }, /*#__PURE__*/React.createElement(View, {
+    style: iconContainerStyle
+  }, iconElement)), /*#__PURE__*/React.createElement(Text, {
     style: css(labelStyle)
-  }, children));
+  }, children)) : /*#__PURE__*/React.createElement(Badge, {
+    horizontalOffset: -7,
+    invisible: !badgeVisible,
+    verticalOffset: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: css(labelStyle)
+  }, children)));
   return /*#__PURE__*/React.createElement(TabBase, _extends({
-    pressEffect: pressEffect,
-    style: tabBaseStyle,
-    vertical: vertical
+    style: tabBaseStyle
   }, otherProps), /*#__PURE__*/React.createElement(View, {
     onLayout: onTabInnerLayout,
     style: tabInnerStyle

package/build/module/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","Text","View","Badge","Spacer","TabBase","css","StyleSheet","useTheme","cloneElementSafely","useVariantStyleMap","styles","create","root","OS","minWidth","filledInner","alignItems","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","styleProp","onTabInnerLayout","otherProps","theme","vertical","container","containerStyle","inner","innerStyle","label","labelStyle","tabBaseStyle","tabInnerStyle","pressEffect","iconColor","palette","strong","base","iconElement","fill","tabElement"],"sources":["Tab.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport Spacer from '../Spacer';\nimport TabBase from '../TabBase';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type TabProps from './TabProps';\nimport type { 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        variant = 'default' as TabVariant,\n        style: styleProp,\n        onTabInnerLayout,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const {\n        container: containerStyle,\n        inner: innerStyle,\n        label: labelStyle,\n    } = useVariantStyleMap(variant, selected);\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 pressEffect = selected ? 'none' : 'opacity';\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconColor = selected ? theme.palette.icon.strong : theme.palette.icon.base;\n    const iconElement = cloneElementSafely(icon, { fill: iconColor });\n\n    const tabElement = typeof children !== 'string' ? (\n        cloneElementSafely(children, {\n            selected,\n        })\n    ) : (\n        <React.Fragment>\n            {iconElement ? (\n                <React.Fragment>\n                    <Badge invisible={!badgeVisible}>\n                        {iconElement}\n                    </Badge>\n\n                    <Spacer size={1.25}/>\n                </React.Fragment>\n            ) : null}\n\n            <Text style={css(labelStyle)}>\n                {children}\n            </Text>\n        </React.Fragment>\n    );\n\n    return (\n        <TabBase\n            pressEffect={pressEffect}\n            style={tabBaseStyle}\n            vertical={vertical}\n            {...otherProps}\n        >\n            <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n                {tabElement}\n            </View>\n        </TabBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIb,QAAQ,CAACc,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;AAWA,eAAe,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,OAAO,GAAG,SAPR;IAQFC,KAAK,EAAEC,SARL;IASFC,gBATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAMa,KAAK,GAAGzB,QAAQ,EAAtB;EAEA,MAAM0B,QAAQ,GAAGN,OAAO,KAAK,mBAA7B;EAEA,MAAM;IACFO,SAAS,EAAEC,cADT;IAEFC,KAAK,EAAEC,UAFL;IAGFC,KAAK,EAAEC;EAHL,IAIF9B,kBAAkB,CAACkB,OAAD,EAAUF,QAAV,CAJtB;EAMA,MAAMe,YAAY,GAAGnC,GAAG,CAAC,CACrBK,MAAM,CAACE,IADc,EAErBuB,cAFqB,EAGrBN,SAHqB,CAAD,CAAxB;EAMA,MAAMY,aAAa,GAAGpC,GAAG,CAAC,CACtBK,MAAM,CAACK,WADe,EAEtBsB,UAFsB,CAAD,CAAzB;EAKA,MAAMK,WAAW,GAAGjB,QAAQ,GAAG,MAAH,GAAY,SAAxC;EAEA,MAAMF,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;EACA,MAAMmB,SAAS,GAAGlB,QAAQ,GAAGO,KAAK,CAACY,OAAN,CAAcrB,IAAd,CAAmBsB,MAAtB,GAA+Bb,KAAK,CAACY,OAAN,CAAcrB,IAAd,CAAmBuB,IAA5E;EACA,MAAMC,WAAW,GAAGvC,kBAAkB,CAACe,IAAD,EAAO;IAAEyB,IAAI,EAAEL;EAAR,CAAP,CAAtC;EAEA,MAAMM,UAAU,GAAG,OAAO5B,QAAP,KAAoB,QAApB,GACfb,kBAAkB,CAACa,QAAD,EAAW;IACzBI;EADyB,CAAX,CADH,gBAKf,oBAAC,KAAD,CAAO,QAAP,QACKsB,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,KAAD;IAAO,SAAS,EAAE,CAAC3B;EAAnB,GACK2B,WADL,CADJ,eAKI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EALJ,CADQ,GAQR,IATR,eAWI,oBAAC,IAAD;IAAM,KAAK,EAAE1C,GAAG,CAACkC,UAAD;EAAhB,GACKlB,QADL,CAXJ,CALJ;EAsBA,oBACI,oBAAC,OAAD;IACI,WAAW,EAAEqB,WADjB;IAEI,KAAK,EAAEF,YAFX;IAGI,QAAQ,EAAEP;EAHd,GAIQF,UAJR,gBAMI,oBAAC,IAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEW;EAAzC,GACKQ,UADL,CANJ,CADJ;AAYH;AAAA"}
+{"version":3,"names":["React","Platform","Text","View","Badge","TabBase","css","StyleSheet","cloneElementSafely","useVariantStyleMap","styles","create","root","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","tabBaseStyle","tabInnerStyle","iconElement","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,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAqC,cAArC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;EAC7BC,IAAI,EAAE,EACF;IACA,IAAIX,QAAQ,CAACY,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;AAWA,eAAe,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,IAKFjC,kBAAkB,CAACoB,OAAD,EAAUH,QAAV,EAAoBE,IAApB,EAA0BH,WAA1B,CALtB;EAOA,MAAMkB,YAAY,GAAGrC,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErByB,cAFqB,EAGrBN,SAHqB,CAAD,CAAxB;EAMA,MAAMa,aAAa,GAAGtC,GAAG,CAAC,CACtBI,MAAM,CAACK,WADe,EAEtBiB,UAFsB,EAGtBC,cAHsB,CAAD,CAAzB;EAMA,MAAMV,IAAI,GAAGG,QAAQ,GAAIC,YAAY,IAAIH,WAApB,GAAmCA,WAAxD;EACA,MAAMqB,WAAW,GAAGrC,kBAAkB,CAACe,IAAD,CAAtC;EAEA,MAAMuB,UAAU,GAAG,OAAOzB,QAAP,KAAoB,QAApB,GACfb,kBAAkB,CAACa,QAAD,EAAW;IACzBK;EADyB,CAAX,CADH,gBAKf,oBAAC,KAAD,CAAO,QAAP,QACKmB,WAAW,gBACR,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACzB,YAFhB;IAGI,cAAc,EAAE,CAAC;EAHrB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEmB;EAAb,GACKM,WADL,CALJ,CADJ,eAWI,oBAAC,IAAD;IAAM,KAAK,EAAEvC,GAAG,CAACoC,UAAD;EAAhB,GACKrB,QADL,CAXJ,CADQ,gBAiBR,oBAAC,KAAD;IACI,gBAAgB,EAAE,CAAC,CADvB;IAEI,SAAS,EAAE,CAACD,YAFhB;IAGI,cAAc,EAAE;EAHpB,gBAKI,oBAAC,IAAD;IAAM,KAAK,EAAEd,GAAG,CAACoC,UAAD;EAAhB,GACKrB,QADL,CALJ,CAlBR,CALJ;EAoCA,oBACI,oBAAC,OAAD;IACI,KAAK,EAAEsB;EADX,GAEQR,UAFR,gBAII,oBAAC,IAAD;IAAM,QAAQ,EAAED,gBAAhB;IAAkC,KAAK,EAAEU;EAAzC,GACKE,UADL,CAJJ,CADJ;AAUH;AAAA"}

package/build/module/Tab/TabProps.js

@@ -1,2 +1,3 @@
-export const tabVariants = ['default', 'circular', 'bottom-navigation'];
+export const tabSizes = ['small', 'medium'];
+export const tabVariants = ['default', 'circular', 'circular-home', 'bottom-navigation'];
 //# sourceMappingURL=TabProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["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 tabVariants = ['default', 'circular', '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 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":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,mBAAxB,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":"AAMA,OAAO,MAAMA,QAAQ,GAAG,CAAC,OAAD,EAAU,QAAV,CAAjB;AAGP,OAAO,MAAMC,WAAW,GAAG,CAAC,SAAD,EAAY,UAAZ,EAAwB,eAAxB,EAAyC,mBAAzC,CAApB"}

package/build/module/Tab/index.js

@@ -1,2 +1,3 @@
 export { default } from './Tab';
+export { tabSizes, tabVariants } from './TabProps';
 //# sourceMappingURL=index.js.map

package/build/module/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabVariant } from './TabProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB"}
+{"version":3,"names":["default","tabSizes","tabVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Tab';\nexport type { default as TabProps, TabSize, TabVariant } from './TabProps';\nexport { tabSizes, tabVariants } from './TabProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,YAAtC"}

package/build/module/Tab/useVariantStyleMap.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-export default function useVariantStyleMap(variant, selected) {
+export default function useVariantStyleMap(variant, selected, size, parentColor) {
   const theme = useTheme();
   return useMemo(() => {
     switch (variant) {
@@ -12,19 +12,50 @@ export default function useVariantStyleMap(variant, selected) {
             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,
-            paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(1.75)
+            flexDirection: 'row',
+            gap: 5,
+            paddingBottom: 7.5,
+            paddingHorizontal: 14,
+            paddingTop: 6.5
+          },
+          label: createFontStyle(theme, {
+            selector: _ => typographyOf({
+              fontSize: size === 'small' ? 14 : 15,
+              lineHeight: size === 'small' ? 18.2 : 19.5,
+              fontFamily: 'PretendardStd-SemiBold',
+              letterSpacing: 0
+            }),
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
+          })
+        };
+
+      case 'circular-home':
+        return {
+          container: {
+            paddingBottom: 4,
+            paddingHorizontal: 3
+          },
+          inner: {
+            backgroundColor: selected ? theme.palette.fill.base : theme.palette.surface.base,
+            borderRadius: theme.shape.radius.full,
+            borderWidth: selected ? undefined : 0.5,
+            borderColor: selected ? undefined : theme.palette.border.weak,
+            flexDirection: 'row',
+            gap: 5,
+            paddingBottom: 7.5,
+            paddingHorizontal: 14,
+            paddingTop: 6.5
           },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
               fontSize: 14,
               lineHeight: 18.2,
-              fontFamily: 'Pretendard-SemiBold',
-              letterSpacing: 0
+              fontFamily: 'LexendDeca-Medium',
+              letterSpacing: -0.28
             }),
-            color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+            color: selected ? theme.palette.text.strongInverse : theme.palette.text.base
           })
         };
 
@@ -34,15 +65,19 @@ export default function useVariantStyleMap(variant, selected) {
             alignItems: 'center',
             height: 49,
             justifyContent: 'flex-start',
-            paddingTop: theme.spacing(2.625),
-            width: 48
+            maxWidth: 64,
+            paddingTop: 10
+          },
+          inner: {
+            flexDirection: 'column',
+            gap: 5
           },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
-              fontSize: 10,
-              lineHeight: 10,
-              fontFamily: 'Pretendard-Medium',
-              letterSpacing: -0.1
+              fontSize: 10.5,
+              lineHeight: 10.5,
+              fontFamily: 'PretendardStd-Medium',
+              letterSpacing: -0.105
             }),
             color: selected ? theme.palette.text.strong : theme.palette.text.base
           })
@@ -52,19 +87,25 @@ export default function useVariantStyleMap(variant, selected) {
       default:
         return {
           container: {
-            padding: theme.spacing(2.5)
+            paddingHorizontal: 10
+          },
+          inner: {
+            flexDirection: 'row',
+            gap: 5,
+            paddingHorizontal: 1,
+            paddingVertical: 10
           },
           label: createFontStyle(theme, {
             selector: _ => typographyOf({
-              fontSize: 15,
-              lineHeight: 18.75,
-              fontFamily: 'Pretendard-SemiBold',
+              fontSize: size === 'small' ? 15 : 16,
+              lineHeight: size === 'small' ? 18.75 : 20,
+              fontFamily: selected ? 'PretendardStd-SemiBold' : 'PretendardStd-Medium',
               letterSpacing: 0
             }),
             color: selected ? theme.palette.text.strong : theme.palette.text.base
           })
         };
     }
-  }, [theme, variant, selected]);
+  }, [theme, variant, selected, size, parentColor]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","weaker","borderRadius","shape","radius","full","label","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","text","strongInverse","strong","alignItems","height","justifyContent","paddingTop","width","padding"],"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 { TabVariant } from './TabProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    inner?: FountainUiStyle;\n    label: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: TabVariant, selected: boolean): 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                        paddingHorizontal: theme.spacing(4),\n                        paddingVertical: theme.spacing(1.75),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 14,\n                            lineHeight: 18.2,\n                            fontFamily: 'Pretendard-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strongInverse\n                            : theme.palette.text.strong,\n                    }),\n                };\n            case 'bottom-navigation':\n                return {\n                    container: {\n                        alignItems: 'center',\n                        height: 49,\n                        justifyContent: 'flex-start',\n                        paddingTop: theme.spacing(2.625),\n                        width: 48,\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 10,\n                            lineHeight: 10,\n                            fontFamily: 'Pretendard-Medium',\n                            letterSpacing: -0.1,\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                        padding: theme.spacing(2.5),\n                    },\n                    label: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 18.75,\n                            fontFamily: 'Pretendard-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: selected\n                            ? theme.palette.text.strong\n                            : theme.palette.text.base,\n                    }),\n                };\n        }\n    }, [theme, variant, selected]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAGA,SAASC,YAAT,QAA6B,qBAA7B;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;AASA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAiDC,QAAjD,EAAkF;EAC7F,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAOH,OAAO,CAAe,MAAM;IAC/B,QAAQK,OAAR;MACI,KAAK,UAAL;QACI,OAAO;UACHG,SAAS,EAAE;YACPC,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAc,IAAd,CADZ;YAEPC,eAAe,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;UAFV,CADR;UAKHE,KAAK,EAAE;YACHC,eAAe,EAAEP,QAAQ,GACnBC,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IADA,GAEnBT,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBE,MAHtB;YAIHC,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBC,IAJ9B;YAKHZ,iBAAiB,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CALhB;YAMHC,eAAe,EAAEJ,KAAK,CAACG,OAAN,CAAc,IAAd;UANd,CALJ;UAaHY,KAAK,EAAEpB,eAAe,CAACK,KAAD,EAAQ;YAC1BgB,QAAQ,EAAGC,CAAD,IAAOvB,YAAY,CAAC;cAC1BwB,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,qBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAEvB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAcgB,IAAd,CAAmBC,aADV,GAETxB,KAAK,CAACO,OAAN,CAAcgB,IAAd,CAAmBE;UATC,CAAR;QAbnB,CAAP;;MAyBJ,KAAK,mBAAL;QACI,OAAO;UACHxB,SAAS,EAAE;YACPyB,UAAU,EAAE,QADL;YAEPC,MAAM,EAAE,EAFD;YAGPC,cAAc,EAAE,YAHT;YAIPC,UAAU,EAAE7B,KAAK,CAACG,OAAN,CAAc,KAAd,CAJL;YAKP2B,KAAK,EAAE;UALA,CADR;UAQHf,KAAK,EAAEpB,eAAe,CAACK,KAAD,EAAQ;YAC1BgB,QAAQ,EAAGC,CAAD,IAAOvB,YAAY,CAAC;cAC1BwB,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,EAFc;cAG1BC,UAAU,EAAE,mBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAD,CADH;YAO1BC,KAAK,EAAEvB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAcgB,IAAd,CAAmBE,MADV,GAETzB,KAAK,CAACO,OAAN,CAAcgB,IAAd,CAAmBd;UATC,CAAR;QARnB,CAAP;;MAoBJ,KAAK,SAAL;MACA;QACI,OAAO;UACHR,SAAS,EAAE;YACP8B,OAAO,EAAE/B,KAAK,CAACG,OAAN,CAAc,GAAd;UADF,CADR;UAIHY,KAAK,EAAEpB,eAAe,CAACK,KAAD,EAAQ;YAC1BgB,QAAQ,EAAGC,CAAD,IAAOvB,YAAY,CAAC;cAC1BwB,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,KAFc;cAG1BC,UAAU,EAAE,qBAHc;cAI1BC,aAAa,EAAE;YAJW,CAAD,CADH;YAO1BC,KAAK,EAAEvB,QAAQ,GACTC,KAAK,CAACO,OAAN,CAAcgB,IAAd,CAAmBE,MADV,GAETzB,KAAK,CAACO,OAAN,CAAcgB,IAAd,CAAmBd;UATC,CAAR;QAJnB,CAAP;IAlDR;EAmEH,CApEa,EAoEX,CAACT,KAAD,EAAQF,OAAR,EAAiBC,QAAjB,CApEW,CAAd;AAqEH"}
+{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","selected","size","parentColor","theme","container","paddingHorizontal","spacing","paddingVertical","inner","backgroundColor","palette","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","gap","paddingBottom","paddingTop","label","selector","_","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: 5,\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/module/TabBase/TabBase.js

@@ -9,12 +9,6 @@ const useStyles = function () {
     root: {
       alignItems: 'center',
       justifyContent: 'center'
-    },
-    row: {
-      flexDirection: 'row'
-    },
-    column: {
-      flexDirection: 'column'
     }
   };
 };
@@ -25,7 +19,6 @@ export default function TabBase(props) {
     disabled = false,
     onPress,
     selected = false,
-    vertical = false,
     style,
     ...otherProps
   } = props;
@@ -33,7 +26,7 @@ export default function TabBase(props) {
   return /*#__PURE__*/React.createElement(ButtonBase, _extends({
     onPress: onPress,
     disabled: disabled,
-    style: css([styles.root, vertical ? styles.column : styles.row, style])
+    style: css([styles.root, style])
   }, otherProps), children);
 }
 ;