@fountain-ui/core 3.0.0-alpha.4 → 3.0.0-alpha.6

package/build/commonjs/Accordion/Accordion.js

@@ -75,6 +75,7 @@ function Accordion(props) {
     container: containerStyle,
     content: contentStyle,
     contentFont: contentFontStyle,
+    iconContainer: iconContainerStyle,
     subTitleFont: subTitleFontStyle,
     title: titleStyle,
     titleFont: titleFontStyle
@@ -126,7 +127,9 @@ function Accordion(props) {
     flexShrink: 1
   }, /*#__PURE__*/_react.default.createElement(_Row.default, {
     alignItems: 'center'
-  }, LeftComponent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, LeftComponent, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
+  }, LeftComponent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: iconContainerStyle
+  }, LeftComponent), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
     size: 1.5
   })) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     allowFontScaling: false,

package/build/commonjs/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","useVariantStyleMap","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay","rootStyle","css"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport type AccordionProps from './AccordionProps';\nimport type { AccordionVariant } from './AccordionProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        rightIcon: {\n            alignItems: 'center',\n            height: 32,\n            justifyContent: 'center',\n            width: 32,\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n        variant = 'solid' as AccordionVariant,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState<boolean>(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const {\n        container: containerStyle,\n        content: contentStyle,\n        contentFont: contentFontStyle,\n        subTitleFont: subTitleFontStyle,\n        title: titleStyle,\n        titleFont: titleFontStyle,\n    } = useVariantStyleMap(variant);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    } as ViewStyle), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n    }, [isExpanded, contentHeight]);\n\n    const rootStyle = css([\n        styles.root,\n        containerStyle,\n    ]);\n\n    return (\n        <Column style={rootStyle}>\n            <ButtonBase onPress={onPress}>\n                <Row style={titleStyle}>\n                    <Column flexShrink={1}>\n                        <Row alignItems={'center'}>\n                            {LeftComponent ? (\n                                <React.Fragment>\n                                    {LeftComponent}\n\n                                    <Spacer size={1.5}/>\n                                </React.Fragment>\n                            ) : null}\n\n                            <Text\n                                allowFontScaling={false}\n                                children={title}\n                                numberOfLines={1}\n                                style={titleFontStyle}\n                            />\n                        </Row>\n\n                        {subTitle && variant === 'solid' ?\n                            typeof subTitle === 'string' ? (\n                                <React.Fragment>\n                                    <Spacer size={1.5}/>\n\n                                    <Text\n                                        allowFontScaling={false}\n                                        children={subTitle}\n                                        numberOfLines={1}\n                                        style={subTitleFontStyle}\n                                    />\n                                </React.Fragment>\n                            ) : (subTitle)\n                            : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        <View style={styles.rightIcon}>\n                            {RightIcon ? RightIcon : (\n                                <ChevronDown\n                                    width={16}\n                                    height={16}\n                                    color={'base'}\n                                />\n                            )}\n                        </View>\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={contentStyle}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Text\n                                allowFontScaling={false}\n                                children={content}\n                                style={contentFontStyle}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;AAIA,MAAMA,kBAAkB,GAAG,CAA3B;AACA,MAAMC,kBAAkB,GAAG,GAA3B;AACA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AACA,MAAMC,6BAA6B,GAAG,GAAtC;AACA,MAAMC,4BAA4B,GAAG,GAArC;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MAAEC,YAAY,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IAAhB,CADH;IAEHC,SAAS,EAAE;MACPC,UAAU,EAAE,QADL;MAEPC,MAAM,EAAE,EAFD;MAGPC,cAAc,EAAE,QAHT;MAIPC,KAAK,EAAE;IAJA;EAFR,CAAP;AASH,CAZD;;AAce,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,QAFE;IAGFC,OAHE;IAIFC,SAJE;IAKFC,aALE;IAMFC,iBAAiB,GAAG,KANlB;IAOFC,OAAO,GAAG;EAPR,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGpB,SAAS,EAAxB;EACA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EACA,MAAMmB,qBAAqB,GAAGpB,KAAK,CAACI,OAAN,CAAc,CAAd,CAA9B;EAEA,MAAM,CAACiB,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAkB,KAAlB,CAApC;EACA,MAAMC,wBAAwB,GAAG,IAAAC,aAAA,EAAgBR,iBAAhB,CAAjC;EAEA,MAAM;IACFS,SAAS,EAAEC,cADT;IAEFb,OAAO,EAAEc,YAFP;IAGFC,WAAW,EAAEC,gBAHX;IAIFC,YAAY,EAAEC,iBAJZ;IAKFpB,KAAK,EAAEqB,UALL;IAMFC,SAAS,EAAEC;EANT,IAOF,IAAAC,2BAAA,EAAmBlB,OAAnB,CAPJ;EASA,MAAMmB,MAAM,GAAG,IAAAC,qCAAA,EAAe7C,kBAAf,CAAf;EACA,MAAM8C,eAAe,GAAG,IAAAD,qCAAA,EAAe,CAAf,CAAxB;EAEA,MAAME,cAAc,GAAG,IAAAF,qCAAA,EAAe,CAAf,CAAvB;EACA,MAAM,CAACG,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAnB,eAAA,EAAS,CAAT,CAA1C;EAEA,MAAMoB,yBAAyB,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IACtDC,SAAS,EAAE,CAAC;MAAER,MAAM,EAAG,GAAEA,MAAM,CAACS,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAjB,EAE9B,EAF8B,CAAlC;EAIA,MAAMC,+BAA+B,GAAG,IAAAH,uCAAA,EAAiB,OAAO;IAC5DrC,MAAM,EAAEiC,cAAc,CAACM,KADqC;IAE5DE,QAAQ,EAAE;EAFkD,CAAP,CAAjB,EAGvB,EAHuB,CAAxC;EAKA,MAAMC,oBAAoB,GAAG,IAAAL,uCAAA,EAAiB,OAAO;IACjDM,OAAO,EAAEX,eAAe,CAACO;EADwB,CAAP,CAAjB,EAEzB,EAFyB,CAA7B;;EAIA,MAAMK,OAAO,GAAG,MAAM;IAClB7B,aAAa,CAAC8B,IAAI,IAAI,CAACA,IAAV,CAAb;EACH,CAFD;;EAIA,MAAMC,QAAQ,GAAIC,KAAD,IAA8B;IAC3C,MAAM/C,MAAM,GAAG+C,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBjD,MAAzB,GAAkCa,qBAAjD;IACAsB,gBAAgB,CAACnC,MAAD,CAAhB;;IAEA,IAAIiB,wBAAwB,CAACiC,OAA7B,EAAsC;MAClCjC,wBAAwB,CAACiC,OAAzB,GAAmC,KAAnC;MACAC,UAAU,CAAC,MAAMpC,aAAa,CAAC,IAAD,CAApB,EAA4BzB,6BAA5B,CAAV;IACH;EACJ,CARD;;EAUA,IAAA8D,gBAAA,EAAU,MAAM;IACZtB,MAAM,CAACS,KAAP,GAAe,IAAAc,iCAAA,EAAWvC,UAAU,GAAG3B,kBAAH,GAAwBD,kBAA7C,EAAiEE,gBAAjE,CAAf;IAEA6C,cAAc,CAACM,KAAf,GAAuB,IAAAc,iCAAA,EAAWvC,UAAU,GAAGoB,aAAH,GAAmB,CAAxC,EAA2C9C,gBAA3C,CAAvB;IAEA4C,eAAe,CAACO,KAAhB,GAAwBzB,UAAU,GAC5B,IAAAwC,gCAAA,EAAU/D,4BAAV,EAAwC,IAAA8D,iCAAA,EAAW,CAAX,EAAcjE,gBAAd,CAAxC,CAD4B,GAE5B,IAAAiE,iCAAA,EAAW,CAAX,EAAcjE,gBAAd,CAFN;EAGH,CARD,EAQG,CAAC0B,UAAD,EAAaoB,aAAb,CARH;EAUA,MAAMqB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClB5C,MAAM,CAACjB,IADW,EAElByB,cAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,eAAD;IAAQ,KAAK,EAAEmC;EAAf,gBACI,6BAAC,mBAAD;IAAY,OAAO,EAAEX;EAArB,gBACI,6BAAC,YAAD;IAAK,KAAK,EAAElB;EAAZ,gBACI,6BAAC,eAAD;IAAQ,UAAU,EAAE;EAApB,gBACI,6BAAC,YAAD;IAAK,UAAU,EAAE;EAAjB,GACKjB,aAAa,gBACV,6BAAC,cAAD,CAAO,QAAP,QACKA,aADL,eAGI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAHJ,CADU,GAMV,IAPR,eASI,6BAAC,iBAAD;IACI,gBAAgB,EAAE,KADtB;IAEI,QAAQ,EAAEJ,KAFd;IAGI,aAAa,EAAE,CAHnB;IAII,KAAK,EAAEuB;EAJX,EATJ,CADJ,EAkBKtB,QAAQ,IAAIK,OAAO,KAAK,OAAxB,GACG,OAAOL,QAAP,KAAoB,QAApB,gBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,6BAAC,iBAAD;IACI,gBAAgB,EAAE,KADtB;IAEI,QAAQ,EAAEA,QAFd;IAGI,aAAa,EAAE,CAHnB;IAII,KAAK,EAAEmB;EAJX,EAHJ,CADJ,GAWKnB,QAZR,GAaK,IA/BV,CADJ,eAmCI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAnCJ,eAqCI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EArCJ,eAuCI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE8B;EAAtB,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAExB,MAAM,CAACd;EAApB,GACKU,SAAS,GAAGA,SAAH,gBACN,6BAAC,kBAAD;IACI,KAAK,EAAE,EADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAFR,CADJ,CAvCJ,CADJ,CADJ,eAuDI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAEgC;EAAtB,gBACI,6BAAC,iBAAD;IACI,QAAQ,EAAEM,QADd;IAEI,KAAK,EAAEzB;EAFX,gBAII,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAEqB;EAAtB,GACK,OAAOnC,OAAP,KAAmB,QAAnB,gBACG,6BAAC,iBAAD;IACI,gBAAgB,EAAE,KADtB;IAEI,QAAQ,EAAEA,OAFd;IAGI,KAAK,EAAEgB;EAHX,EADH,GAMIhB,OAPT,CAJJ,CADJ,CAvDJ,CADJ;AA0EH"}
+{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","useVariantStyleMap","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay","rootStyle","css"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';\nimport Animated, {\n    useAnimatedStyle,\n    useSharedValue,\n    withDelay,\n    withTiming,\n    WithTimingConfig,\n} from 'react-native-reanimated';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport type AccordionProps from './AccordionProps';\nimport type { AccordionVariant } from './AccordionProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: { marginBottom: theme.spacing(3) },\n        rightIcon: {\n            alignItems: 'center',\n            height: 32,\n            justifyContent: 'center',\n            width: 32,\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        title,\n        subTitle,\n        content,\n        RightIcon,\n        LeftComponent,\n        isInitialExpanded = false,\n        variant = 'solid' as AccordionVariant,\n    } = props;\n\n    const styles = useStyles();\n    const theme = useTheme();\n    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n    const [isExpanded, setIsExpanded] = useState<boolean>(false);\n    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n    const {\n        container: containerStyle,\n        content: contentStyle,\n        contentFont: contentFontStyle,\n        iconContainer: iconContainerStyle,\n        subTitleFont: subTitleFontStyle,\n        title: titleStyle,\n        titleFont: titleFontStyle,\n    } = useVariantStyleMap(variant);\n\n    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n    const animatedOpacity = useSharedValue(0);\n\n    const animatedHeight = useSharedValue(0);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }), []);\n\n    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n        height: animatedHeight.value,\n        overflow: 'hidden',\n    } as ViewStyle), []);\n\n    const animatedContentStyle = useAnimatedStyle(() => ({\n        opacity: animatedOpacity.value,\n    }), []);\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n    };\n\n    const onLayout = (event: LayoutChangeEvent) => {\n        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n        setContentHeight(height);\n\n        if (shouldInitialExpandedRef.current) {\n            shouldInitialExpandedRef.current = false;\n            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n        }\n    };\n\n    useEffect(() => {\n        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n        animatedOpacity.value = isExpanded\n            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n            : withTiming(0, ANIMATION_CONFIG);\n    }, [isExpanded, contentHeight]);\n\n    const rootStyle = css([\n        styles.root,\n        containerStyle,\n    ]);\n\n    return (\n        <Column style={rootStyle}>\n            <ButtonBase onPress={onPress}>\n                <Row style={titleStyle}>\n                    <Column flexShrink={1}>\n                        <Row alignItems={'center'}>\n                            {LeftComponent ? (\n                                <React.Fragment>\n                                    <View style={iconContainerStyle}>\n                                        {LeftComponent}\n                                    </View>\n\n                                    <Spacer size={1.5}/>\n                                </React.Fragment>\n                            ) : null}\n\n                            <Text\n                                allowFontScaling={false}\n                                children={title}\n                                numberOfLines={1}\n                                style={titleFontStyle}\n                            />\n                        </Row>\n\n                        {subTitle && variant === 'solid' ?\n                            typeof subTitle === 'string' ? (\n                                <React.Fragment>\n                                    <Spacer size={1.5}/>\n\n                                    <Text\n                                        allowFontScaling={false}\n                                        children={subTitle}\n                                        numberOfLines={1}\n                                        style={subTitleFontStyle}\n                                    />\n                                </React.Fragment>\n                            ) : (subTitle)\n                            : null}\n                    </Column>\n\n                    <Spacer flex={1}/>\n\n                    <Spacer size={3}/>\n\n                    <Animated.View style={animatedChevronDownStyles}>\n                        <View style={styles.rightIcon}>\n                            {RightIcon ? RightIcon : (\n                                <ChevronDown\n                                    width={16}\n                                    height={16}\n                                    color={'base'}\n                                />\n                            )}\n                        </View>\n                    </Animated.View>\n                </Row>\n            </ButtonBase>\n\n            <Animated.View style={animatedContentBackgroundStyles}>\n                <View\n                    onLayout={onLayout}\n                    style={contentStyle}\n                >\n                    <Animated.View style={animatedContentStyle}>\n                        {typeof content === 'string' ? (\n                            <Text\n                                allowFontScaling={false}\n                                children={content}\n                                style={contentFontStyle}\n                            />\n                        ) : (content)}\n                    </Animated.View>\n                </View>\n            </Animated.View>\n        </Column>\n    );\n}\n"],"mappings":"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"}

package/build/commonjs/Accordion/useVariantStyleMap.js

@@ -46,9 +46,9 @@ function useVariantStyleMap(variant) {
           },
           titleFont: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
-              fontSize: 15,
-              lineHeight: 19.5,
-              fontFamily: 'Pretendard-SemiBold',
+              fontSize: 16,
+              lineHeight: 20.8,
+              fontFamily: 'PretendardStd-SemiBold',
               letterSpacing: 0
             }),
             color: theme.palette.text.strong
@@ -74,6 +74,9 @@ function useVariantStyleMap(variant) {
             selector: typography => typography.caption2.regular,
             color: theme.palette.text.base
           }),
+          iconContainer: {
+            paddingTop: 1
+          },
           title: {
             alignItems: 'center',
             paddingBottom: theme.spacing(1),
@@ -112,9 +115,9 @@ function useVariantStyleMap(variant) {
           },
           titleFont: (0, _styles2.createFontStyle)(theme, {
             selector: _ => (0, _styles.typographyOf)({
-              fontSize: 15,
-              lineHeight: 19.5,
-              fontFamily: 'Pretendard-SemiBold',
+              fontSize: 16,
+              lineHeight: 20.8,
+              fontFamily: 'PretendardStd-SemiBold',
               letterSpacing: 0
             }),
             color: theme.palette.text.strong

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

@@ -1 +1 @@
-{"version":3,"names":["useVariantStyleMap","variant","theme","useTheme","useMemo","container","backgroundColor","palette","surface","supportive","borderRadius","shape","radius","md","content","borderTopColor","border","weak","borderTopWidth","marginHorizontal","spacing","paddingBottom","paddingTop","position","contentFont","createFontStyle","selector","typography","body3","regular","color","text","base","subTitleFont","caption1","title","alignItems","paddingLeft","paddingRight","paddingVertical","titleFont","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","strong","borderColor","borderWidth","caption2","caption1short","semiBold","borderBottomColor","borderBottomWidth"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { AccordionVariant } from './AccordionProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    content: FountainUiStyle;\n    contentFont: TextStyle;\n    subTitleFont?: TextStyle;\n    title: FountainUiStyle;\n    titleFont: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'solid':\n                return {\n                    container: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderRadius: theme.shape.radius.md,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(5),\n                        paddingTop: theme.spacing(4),\n                        position: 'absolute',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    subTitleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingVertical: theme.spacing(4),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 19.5,\n                            fontFamily: 'Pretendard-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n            case 'line':\n                return {\n                    container: {\n                        borderColor: theme.palette.border.weak,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(4),\n                        paddingTop: theme.spacing(3),\n                        position: 'absolute',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption2.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingBottom: theme.spacing(1),\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(0.75),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1short.semiBold,\n                        color: theme.palette.text.base,\n                    }),\n                };\n            case 'underline':\n                return {\n                    container: {\n                        borderBottomColor: theme.palette.border.weak,\n                        borderBottomWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        paddingBottom: theme.spacing(5),\n                        paddingLeft: theme.spacing(0.5),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(4),\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(0.5),\n                        paddingVertical: theme.spacing(2),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 15,\n                            lineHeight: 19.5,\n                            fontFamily: 'Pretendard-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, variant]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useVariantStyleMap","variant","theme","useTheme","useMemo","container","backgroundColor","palette","surface","supportive","borderRadius","shape","radius","md","content","borderTopColor","border","weak","borderTopWidth","marginHorizontal","spacing","paddingBottom","paddingTop","position","contentFont","createFontStyle","selector","typography","body3","regular","color","text","base","subTitleFont","caption1","title","alignItems","paddingLeft","paddingRight","paddingVertical","titleFont","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","strong","borderColor","borderWidth","caption2","iconContainer","caption1short","semiBold","borderBottomColor","borderBottomWidth"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { AccordionVariant } from './AccordionProps';\n\ninterface VariantStyle {\n    container: FountainUiStyle;\n    content: FountainUiStyle;\n    contentFont: TextStyle;\n    iconContainer?: FountainUiStyle;\n    subTitleFont?: TextStyle;\n    title: FountainUiStyle;\n    titleFont: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'solid':\n                return {\n                    container: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderRadius: theme.shape.radius.md,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(5),\n                        paddingTop: theme.spacing(4),\n                        position: 'absolute',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    subTitleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingVertical: theme.spacing(4),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 20.8,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n            case 'line':\n                return {\n                    container: {\n                        borderColor: theme.palette.border.weak,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        marginHorizontal: theme.spacing(4),\n                        paddingBottom: theme.spacing(4),\n                        paddingTop: theme.spacing(3),\n                        position: 'absolute',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption2.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    iconContainer: {\n                        paddingTop: 1,\n                    },\n                    title: {\n                        alignItems: 'center',\n                        paddingBottom: theme.spacing(1),\n                        paddingLeft: theme.spacing(4),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(0.75),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (typography) => typography.caption1short.semiBold,\n                        color: theme.palette.text.base,\n                    }),\n                };\n            case 'underline':\n                return {\n                    container: {\n                        borderBottomColor: theme.palette.border.weak,\n                        borderBottomWidth: 1,\n                    },\n                    content: {\n                        borderTopColor: theme.palette.border.weak,\n                        borderTopWidth: 0.5,\n                        paddingBottom: theme.spacing(5),\n                        paddingLeft: theme.spacing(0.5),\n                        paddingRight: theme.spacing(2),\n                        paddingTop: theme.spacing(4),\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (typography) => typography.body3.regular,\n                        color: theme.palette.text.base,\n                    }),\n                    title: {\n                        alignItems: 'center',\n                        paddingLeft: theme.spacing(0.5),\n                        paddingVertical: theme.spacing(2),\n                    },\n                    titleFont: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 20.8,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, variant]);\n}\n"],"mappings":"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"}

package/build/commonjs/Badge/useVariantStyleMap.js

@@ -47,13 +47,13 @@ function useVariantStyleMap(variant, size, color) {
       large: (0, _styles.typographyOf)({
         fontSize: 14,
         lineHeight: 14,
-        fontFamily: 'Pretendard-Bold',
+        fontFamily: 'PretendardStd-Bold',
         letterSpacing: -0.7
       }),
       medium: (0, _styles.typographyOf)({
         fontSize: 12,
         lineHeight: 12,
-        fontFamily: 'Pretendard-Bold',
+        fontFamily: 'PretendardStd-Bold',
         letterSpacing: -0.6
       })
     };

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

@@ -1 +1 @@
-{"version":3,"names":["sizeMap","dot","medium","number","large","getColorMap","theme","accent","palette","fill","danger","status","useVariantStyleMap","variant","size","color","useTheme","useMemo","badgeSize","process","env","NODE_ENV","undefined","console","warn","colorMap","commonBadgeStyle","backgroundColor","borderRadius","shape","radius","full","height","position","width","fontStyleMap","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","badge","alignItems","justifyContent","contentFont","createFontStyle","selector","_","commonColors","opacity","white"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FontStyle, FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { BadgeColor, BadgeSize, BadgeVariant } from './BadgeProps';\n\nconst sizeMap: Record<BadgeVariant, Partial<Record<BadgeSize, number>>> = {\n    dot: {\n        medium: 4,\n    },\n    number: {\n        large: 26,\n        medium: 22,\n    },\n};\n\nconst getColorMap = (theme: Theme): Record<BadgeColor, string> => ({\n    accent: theme.palette.fill.accent,\n    danger: theme.palette.status.danger,\n});\n\ninterface VariantStyle {\n    badge: FountainUiStyle;\n    contentFont?: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSize, color: BadgeColor): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        const badgeSize = sizeMap[variant][size] ?? sizeMap[variant].medium;\n\n        if (process.env.NODE_ENV !== 'production' && sizeMap[variant][size] === undefined) {\n            console.warn('The selected size is not supported for the chosen variant.');\n        }\n\n        const colorMap = getColorMap(theme);\n\n        const commonBadgeStyle: FountainUiStyle = {\n            backgroundColor: colorMap[color],\n            borderRadius: theme.shape.radius.full,\n            height: badgeSize,\n            position: 'absolute',\n            width: badgeSize,\n        };\n\n        const fontStyleMap: Record<BadgeSize, FontStyle> = {\n            large: typographyOf({\n                fontSize: 14,\n                lineHeight: 14,\n                fontFamily: 'Pretendard-Bold',\n                letterSpacing: -0.7,\n            }),\n            medium: typographyOf({\n                fontSize: 12,\n                lineHeight: 12,\n                fontFamily: 'Pretendard-Bold',\n                letterSpacing: -0.6,\n            }),\n        };\n\n        switch (variant) {\n            default:\n            case 'dot':\n                return {\n                    badge: { ...commonBadgeStyle },\n                };\n            case 'number':\n                return {\n                    badge: {\n                        ...commonBadgeStyle,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (_) => fontStyleMap[size],\n                        color: commonColors.opacity.white['100'],\n                    }),\n                };\n        }\n    }, [theme, variant, size, color]);\n}\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAGA,MAAMA,OAAiE,GAAG;EACtEC,GAAG,EAAE;IACDC,MAAM,EAAE;EADP,CADiE;EAItEC,MAAM,EAAE;IACJC,KAAK,EAAE,EADH;IAEJF,MAAM,EAAE;EAFJ;AAJ8D,CAA1E;;AAUA,MAAMG,WAAW,GAAIC,KAAD,KAA+C;EAC/DC,MAAM,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBF,MADoC;EAE/DG,MAAM,EAAEJ,KAAK,CAACE,OAAN,CAAcG,MAAd,CAAqBD;AAFkC,CAA/C,CAApB;;AAUe,SAASE,kBAAT,CAA4BC,OAA5B,EAAmDC,IAAnD,EAAoEC,KAApE,EAAqG;EAChH,MAAMT,KAAK,GAAG,IAAAU,iBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAsB,MAAM;IAC/B,MAAMC,SAAS,GAAGlB,OAAO,CAACa,OAAD,CAAP,CAAiBC,IAAjB,KAA0Bd,OAAO,CAACa,OAAD,CAAP,CAAiBX,MAA7D;;IAEA,IAAIiB,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAAzB,IAAyCrB,OAAO,CAACa,OAAD,CAAP,CAAiBC,IAAjB,MAA2BQ,SAAxE,EAAmF;MAC/EC,OAAO,CAACC,IAAR,CAAa,4DAAb;IACH;;IAED,MAAMC,QAAQ,GAAGpB,WAAW,CAACC,KAAD,CAA5B;IAEA,MAAMoB,gBAAiC,GAAG;MACtCC,eAAe,EAAEF,QAAQ,CAACV,KAAD,CADa;MAEtCa,YAAY,EAAEtB,KAAK,CAACuB,KAAN,CAAYC,MAAZ,CAAmBC,IAFK;MAGtCC,MAAM,EAAEd,SAH8B;MAItCe,QAAQ,EAAE,UAJ4B;MAKtCC,KAAK,EAAEhB;IAL+B,CAA1C;IAQA,MAAMiB,YAA0C,GAAG;MAC/C/B,KAAK,EAAE,IAAAgC,oBAAA,EAAa;QAChBC,QAAQ,EAAE,EADM;QAEhBC,UAAU,EAAE,EAFI;QAGhBC,UAAU,EAAE,iBAHI;QAIhBC,aAAa,EAAE,CAAC;MAJA,CAAb,CADwC;MAO/CtC,MAAM,EAAE,IAAAkC,oBAAA,EAAa;QACjBC,QAAQ,EAAE,EADO;QAEjBC,UAAU,EAAE,EAFK;QAGjBC,UAAU,EAAE,iBAHK;QAIjBC,aAAa,EAAE,CAAC;MAJC,CAAb;IAPuC,CAAnD;;IAeA,QAAQ3B,OAAR;MACI;MACA,KAAK,KAAL;QACI,OAAO;UACH4B,KAAK,EAAE,EAAE,GAAGf;UAAL;QADJ,CAAP;;MAGJ,KAAK,QAAL;QACI,OAAO;UACHe,KAAK,EAAE,EACH,GAAGf,gBADA;YAEHgB,UAAU,EAAE,QAFT;YAGHC,cAAc,EAAE;UAHb,CADJ;UAMHC,WAAW,EAAE,IAAAC,wBAAA,EAAgBvC,KAAhB,EAAuB;YAChCwC,QAAQ,EAAGC,CAAD,IAAOZ,YAAY,CAACrB,IAAD,CADG;YAEhCC,KAAK,EAAEiC,oBAAA,CAAaC,OAAb,CAAqBC,KAArB,CAA2B,KAA3B;UAFyB,CAAvB;QANV,CAAP;IAPR;EAmBH,CAnDM,EAmDJ,CAAC5C,KAAD,EAAQO,OAAR,EAAiBC,IAAjB,EAAuBC,KAAvB,CAnDI,CAAP;AAoDH"}
+{"version":3,"names":["sizeMap","dot","medium","number","large","getColorMap","theme","accent","palette","fill","danger","status","useVariantStyleMap","variant","size","color","useTheme","useMemo","badgeSize","process","env","NODE_ENV","undefined","console","warn","colorMap","commonBadgeStyle","backgroundColor","borderRadius","shape","radius","full","height","position","width","fontStyleMap","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","badge","alignItems","justifyContent","contentFont","createFontStyle","selector","_","commonColors","opacity","white"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FontStyle, FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { BadgeColor, BadgeSize, BadgeVariant } from './BadgeProps';\n\nconst sizeMap: Record<BadgeVariant, Partial<Record<BadgeSize, number>>> = {\n    dot: {\n        medium: 4,\n    },\n    number: {\n        large: 26,\n        medium: 22,\n    },\n};\n\nconst getColorMap = (theme: Theme): Record<BadgeColor, string> => ({\n    accent: theme.palette.fill.accent,\n    danger: theme.palette.status.danger,\n});\n\ninterface VariantStyle {\n    badge: FountainUiStyle;\n    contentFont?: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSize, color: BadgeColor): VariantStyle {\n    const theme = useTheme();\n\n    return useMemo<VariantStyle>(() => {\n        const badgeSize = sizeMap[variant][size] ?? sizeMap[variant].medium;\n\n        if (process.env.NODE_ENV !== 'production' && sizeMap[variant][size] === undefined) {\n            console.warn('The selected size is not supported for the chosen variant.');\n        }\n\n        const colorMap = getColorMap(theme);\n\n        const commonBadgeStyle: FountainUiStyle = {\n            backgroundColor: colorMap[color],\n            borderRadius: theme.shape.radius.full,\n            height: badgeSize,\n            position: 'absolute',\n            width: badgeSize,\n        };\n\n        const fontStyleMap: Record<BadgeSize, FontStyle> = {\n            large: typographyOf({\n                fontSize: 14,\n                lineHeight: 14,\n                fontFamily: 'PretendardStd-Bold',\n                letterSpacing: -0.7,\n            }),\n            medium: typographyOf({\n                fontSize: 12,\n                lineHeight: 12,\n                fontFamily: 'PretendardStd-Bold',\n                letterSpacing: -0.6,\n            }),\n        };\n\n        switch (variant) {\n            default:\n            case 'dot':\n                return {\n                    badge: { ...commonBadgeStyle },\n                };\n            case 'number':\n                return {\n                    badge: {\n                        ...commonBadgeStyle,\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                    },\n                    contentFont: createFontStyle(theme, {\n                        selector: (_) => fontStyleMap[size],\n                        color: commonColors.opacity.white['100'],\n                    }),\n                };\n        }\n    }, [theme, variant, size, color]);\n}\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAGA,MAAMA,OAAiE,GAAG;EACtEC,GAAG,EAAE;IACDC,MAAM,EAAE;EADP,CADiE;EAItEC,MAAM,EAAE;IACJC,KAAK,EAAE,EADH;IAEJF,MAAM,EAAE;EAFJ;AAJ8D,CAA1E;;AAUA,MAAMG,WAAW,GAAIC,KAAD,KAA+C;EAC/DC,MAAM,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBF,MADoC;EAE/DG,MAAM,EAAEJ,KAAK,CAACE,OAAN,CAAcG,MAAd,CAAqBD;AAFkC,CAA/C,CAApB;;AAUe,SAASE,kBAAT,CAA4BC,OAA5B,EAAmDC,IAAnD,EAAoEC,KAApE,EAAqG;EAChH,MAAMT,KAAK,GAAG,IAAAU,iBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAsB,MAAM;IAC/B,MAAMC,SAAS,GAAGlB,OAAO,CAACa,OAAD,CAAP,CAAiBC,IAAjB,KAA0Bd,OAAO,CAACa,OAAD,CAAP,CAAiBX,MAA7D;;IAEA,IAAIiB,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAAzB,IAAyCrB,OAAO,CAACa,OAAD,CAAP,CAAiBC,IAAjB,MAA2BQ,SAAxE,EAAmF;MAC/EC,OAAO,CAACC,IAAR,CAAa,4DAAb;IACH;;IAED,MAAMC,QAAQ,GAAGpB,WAAW,CAACC,KAAD,CAA5B;IAEA,MAAMoB,gBAAiC,GAAG;MACtCC,eAAe,EAAEF,QAAQ,CAACV,KAAD,CADa;MAEtCa,YAAY,EAAEtB,KAAK,CAACuB,KAAN,CAAYC,MAAZ,CAAmBC,IAFK;MAGtCC,MAAM,EAAEd,SAH8B;MAItCe,QAAQ,EAAE,UAJ4B;MAKtCC,KAAK,EAAEhB;IAL+B,CAA1C;IAQA,MAAMiB,YAA0C,GAAG;MAC/C/B,KAAK,EAAE,IAAAgC,oBAAA,EAAa;QAChBC,QAAQ,EAAE,EADM;QAEhBC,UAAU,EAAE,EAFI;QAGhBC,UAAU,EAAE,oBAHI;QAIhBC,aAAa,EAAE,CAAC;MAJA,CAAb,CADwC;MAO/CtC,MAAM,EAAE,IAAAkC,oBAAA,EAAa;QACjBC,QAAQ,EAAE,EADO;QAEjBC,UAAU,EAAE,EAFK;QAGjBC,UAAU,EAAE,oBAHK;QAIjBC,aAAa,EAAE,CAAC;MAJC,CAAb;IAPuC,CAAnD;;IAeA,QAAQ3B,OAAR;MACI;MACA,KAAK,KAAL;QACI,OAAO;UACH4B,KAAK,EAAE,EAAE,GAAGf;UAAL;QADJ,CAAP;;MAGJ,KAAK,QAAL;QACI,OAAO;UACHe,KAAK,EAAE,EACH,GAAGf,gBADA;YAEHgB,UAAU,EAAE,QAFT;YAGHC,cAAc,EAAE;UAHb,CADJ;UAMHC,WAAW,EAAE,IAAAC,wBAAA,EAAgBvC,KAAhB,EAAuB;YAChCwC,QAAQ,EAAGC,CAAD,IAAOZ,YAAY,CAACrB,IAAD,CADG;YAEhCC,KAAK,EAAEiC,oBAAA,CAAaC,OAAb,CAAqBC,KAArB,CAA2B,KAA3B;UAFyB,CAAvB;QANV,CAAP;IAPR;EAmBH,CAnDM,EAmDJ,CAAC5C,KAAD,EAAQO,OAAR,EAAiBC,IAAjB,EAAuBC,KAAvB,CAnDI,CAAP;AAoDH"}

package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js

@@ -66,6 +66,7 @@ function BottomSheetTitle(props) {
     color: 'accent',
     disableMinWidth: true,
     onPress: actionButtonProps.onPress,
+    size: 'large',
     style: styles.actionButton,
     variant: 'text'
   }) : null);

package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","paddingBottom","paddingTop","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            gap: theme.spacing(8),\n            justifyContent: 'space-between',\n            marginBottom: theme.spacing(4),\n            paddingHorizontal: theme.spacing(6),\n        },\n        title: {\n            paddingBottom: theme.spacing(1.25),\n            paddingTop: theme.spacing(1),\n        },\n        actionButton: {\n            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: 0,\n            paddingTop: theme.spacing(1.25),\n        },\n    };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n    const {\n        actionButtonProps,\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const titleStyle = css([\n        styles.title,\n        titleFontStyle,\n    ]);\n\n    return (\n        <Row\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Text\n                children={children}\n                style={titleStyle}\n            />\n\n            {actionButtonProps ? (\n                <Button\n                    children={actionButtonProps.title}\n                    color={'accent'}\n                    disableMinWidth={true}\n                    onPress={actionButtonProps.onPress}\n                    style={styles.actionButton}\n                    variant={'text'}\n                />\n            ) : null}\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,GAAG,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,aAAa,EAAEV,KAAK,CAACK,OAAN,CAAc,IAAd,CADZ;MAEHM,UAAU,EAAEX,KAAK,CAACK,OAAN,CAAc,CAAd;IAFT,CARJ;IAYHO,YAAY,EAAE;MACVF,aAAa,EAAEV,KAAK,CAACK,OAAN,CAAc,IAAd,CADL;MAEVG,iBAAiB,EAAE,CAFT;MAGVG,UAAU,EAAEX,KAAK,CAACK,OAAN,CAAc,IAAd;IAHF;EAZX,CAAP;AAkBH,CArBD;;AAuBe,SAASQ,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,iBADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC,SAHL;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMd,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMmB,MAAM,GAAGrB,SAAS,EAAxB;EAEA,MAAMsB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAAClB,IADW,EAElBgB,SAFkB,CAAJ,CAAlB;EAKA,MAAMK,cAAc,GAAG,IAAAC,uBAAA,EAAgBxB,KAAhB,EAAuB;IAC1CyB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE7B,KAAK,CAAC8B,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBF,MAAM,CAACX,KADY,EAEnBc,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAEF;EADX,GAEQF,UAFR,gBAII,6BAAC,iBAAD;IACI,QAAQ,EAAEH,QADd;IAEI,KAAK,EAAEiB;EAFX,EAJJ,EASKlB,iBAAiB,gBACd,6BAAC,eAAD;IACI,QAAQ,EAAEA,iBAAiB,CAACN,KADhC;IAEI,KAAK,EAAE,QAFX;IAGI,eAAe,EAAE,IAHrB;IAII,OAAO,EAAEM,iBAAiB,CAACmB,OAJ/B;IAKI,KAAK,EAAEd,MAAM,CAACR,YALlB;IAMI,OAAO,EAAE;EANb,EADc,GASd,IAlBR,CADJ;AAsBH"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","paddingBottom","paddingTop","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            gap: theme.spacing(8),\n            justifyContent: 'space-between',\n            marginBottom: theme.spacing(4),\n            paddingHorizontal: theme.spacing(6),\n        },\n        title: {\n            paddingBottom: theme.spacing(1.25),\n            paddingTop: theme.spacing(1),\n        },\n        actionButton: {\n            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: 0,\n            paddingTop: theme.spacing(1.25),\n        },\n    };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n    const {\n        actionButtonProps,\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const titleStyle = css([\n        styles.title,\n        titleFontStyle,\n    ]);\n\n    return (\n        <Row\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Text\n                children={children}\n                style={titleStyle}\n            />\n\n            {actionButtonProps ? (\n                <Button\n                    children={actionButtonProps.title}\n                    color={'accent'}\n                    disableMinWidth={true}\n                    onPress={actionButtonProps.onPress}\n                    size={'large'}\n                    style={styles.actionButton}\n                    variant={'text'}\n                />\n            ) : null}\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,GAAG,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,aAAa,EAAEV,KAAK,CAACK,OAAN,CAAc,IAAd,CADZ;MAEHM,UAAU,EAAEX,KAAK,CAACK,OAAN,CAAc,CAAd;IAFT,CARJ;IAYHO,YAAY,EAAE;MACVF,aAAa,EAAEV,KAAK,CAACK,OAAN,CAAc,IAAd,CADL;MAEVG,iBAAiB,EAAE,CAFT;MAGVG,UAAU,EAAEX,KAAK,CAACK,OAAN,CAAc,IAAd;IAHF;EAZX,CAAP;AAkBH,CArBD;;AAuBe,SAASQ,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,iBADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC,SAHL;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMd,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMmB,MAAM,GAAGrB,SAAS,EAAxB;EAEA,MAAMsB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAAClB,IADW,EAElBgB,SAFkB,CAAJ,CAAlB;EAKA,MAAMK,cAAc,GAAG,IAAAC,uBAAA,EAAgBxB,KAAhB,EAAuB;IAC1CyB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE7B,KAAK,CAAC8B,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBF,MAAM,CAACX,KADY,EAEnBc,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAEF;EADX,GAEQF,UAFR,gBAII,6BAAC,iBAAD;IACI,QAAQ,EAAEH,QADd;IAEI,KAAK,EAAEiB;EAFX,EAJJ,EASKlB,iBAAiB,gBACd,6BAAC,eAAD;IACI,QAAQ,EAAEA,iBAAiB,CAACN,KADhC;IAEI,KAAK,EAAE,QAFX;IAGI,eAAe,EAAE,IAHrB;IAII,OAAO,EAAEM,iBAAiB,CAACmB,OAJ/B;IAKI,IAAI,EAAE,OALV;IAMI,KAAK,EAAEd,MAAM,CAACR,YANlB;IAOI,OAAO,EAAE;EAPb,EADc,GAUd,IAnBR,CADJ;AAuBH"}

package/build/commonjs/Checkbox/useVariantStyleMap.js

@@ -38,7 +38,8 @@ function useVariantStyleMap(variant, checked) {
         containerStyle: {
           alignItems: 'center',
           flexDirection: 'row',
-          gap: theme.spacing(3)
+          gap: theme.spacing(3),
+          paddingVertical: theme.spacing(2)
         },
         iconColor: theme.palette.fill.baseAlt
       };

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","useTheme","checkboxStyle","css","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","paddingVertical","commonColors","static","strongInverse"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport { commonColors, FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { CheckboxVariant } from './CheckboxProps';\n\nconst styles = StyleSheet.create({\n    checkbox: {\n        alignItems: 'center',\n        borderWidth: 1,\n        justifyContent: 'center',\n    },\n});\n\ntype useVariantStyleMapReturns = {\n    checkboxStyle?: FountainUiStyle;\n    containerStyle?: FountainUiStyle;\n    iconColor?: string;\n};\n\nexport default function useVariantStyleMap(variant: CheckboxVariant, checked: boolean): useVariantStyleMapReturns {\n    const theme = useTheme();\n\n    switch (variant) {\n        case 'square':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.xs,\n                        height: 18,\n                        width: 18,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.base,\n                            borderColor: theme.palette.fill.base,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    flexDirection: 'row',\n                    gap: theme.spacing(3),\n                },\n                iconColor: theme.palette.fill.baseAlt,\n            };\n        case 'round':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.full,\n                        height: 20,\n                        width: 20,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.accent,\n                            borderColor: theme.palette.fill.accent,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    borderBottomColor: theme.palette.border.weak,\n                    borderBottomWidth: 0.5,\n                    flexDirection: 'row-reverse',\n                    gap: theme.spacing(8),\n                    paddingVertical: theme.spacing(3.5),\n                },\n                iconColor: commonColors.static.strongInverse,\n            };\n        default:\n            return {};\n    }\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;;AAce,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;;EAEA,QAAQH,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHI,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfb,MAAM,CAACG,QADQ,EAEf;UACIW,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAER,KAAK,CAACS,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAId,OAAO,GAAG;YACVe,eAAe,EAAEd,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHS,cAAc,EAAE;UACZtB,UAAU,EAAE,QADA;UAEZuB,aAAa,EAAE,KAFH;UAGZC,GAAG,EAAElB,KAAK,CAACmB,OAAN,CAAc,CAAd;QAHO,CAdb;QAmBHC,SAAS,EAAEpB,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBM;MAnB3B,CAAP;;IAqBJ,KAAK,OAAL;MACI,OAAO;QACHnB,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfb,MAAM,CAACG,QADQ,EAEf;UACIW,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAER,KAAK,CAACS,KAAN,CAAYC,MAAZ,CAAmBY,IAFrC;UAGIV,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAId,OAAO,GAAG;YACVe,eAAe,EAAEd,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBQ,MAD1B;YAEVnB,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBQ;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHP,cAAc,EAAE;UACZtB,UAAU,EAAE,QADA;UAEZ8B,iBAAiB,EAAExB,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBmB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZT,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAElB,KAAK,CAACmB,OAAN,CAAc,CAAd,CALO;UAMZQ,eAAe,EAAE3B,KAAK,CAACmB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHC,SAAS,EAAEQ,oBAAA,CAAaC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EAjDR;AAmDH"}
+{"version":3,"names":["styles","StyleSheet","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","useTheme","checkboxStyle","css","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","paddingVertical","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","commonColors","static","strongInverse"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport { commonColors, FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { CheckboxVariant } from './CheckboxProps';\n\nconst styles = StyleSheet.create({\n    checkbox: {\n        alignItems: 'center',\n        borderWidth: 1,\n        justifyContent: 'center',\n    },\n});\n\ntype useVariantStyleMapReturns = {\n    checkboxStyle?: FountainUiStyle;\n    containerStyle?: FountainUiStyle;\n    iconColor?: string;\n};\n\nexport default function useVariantStyleMap(variant: CheckboxVariant, checked: boolean): useVariantStyleMapReturns {\n    const theme = useTheme();\n\n    switch (variant) {\n        case 'square':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.xs,\n                        height: 18,\n                        width: 18,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.base,\n                            borderColor: theme.palette.fill.base,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    flexDirection: 'row',\n                    gap: theme.spacing(3),\n                    paddingVertical: theme.spacing(2),\n                },\n                iconColor: theme.palette.fill.baseAlt,\n            };\n        case 'round':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.full,\n                        height: 20,\n                        width: 20,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.accent,\n                            borderColor: theme.palette.fill.accent,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    borderBottomColor: theme.palette.border.weak,\n                    borderBottomWidth: 0.5,\n                    flexDirection: 'row-reverse',\n                    gap: theme.spacing(8),\n                    paddingVertical: theme.spacing(3.5),\n                },\n                iconColor: commonColors.static.strongInverse,\n            };\n        default:\n            return {};\n    }\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;;AAce,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;;EAEA,QAAQH,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHI,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfb,MAAM,CAACG,QADQ,EAEf;UACIW,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAER,KAAK,CAACS,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAId,OAAO,GAAG;YACVe,eAAe,EAAEd,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHS,cAAc,EAAE;UACZtB,UAAU,EAAE,QADA;UAEZuB,aAAa,EAAE,KAFH;UAGZC,GAAG,EAAElB,KAAK,CAACmB,OAAN,CAAc,CAAd,CAHO;UAIZC,eAAe,EAAEpB,KAAK,CAACmB,OAAN,CAAc,CAAd;QAJL,CAdb;QAoBHE,SAAS,EAAErB,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBO;MApB3B,CAAP;;IAsBJ,KAAK,OAAL;MACI,OAAO;QACHpB,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfb,MAAM,CAACG,QADQ,EAEf;UACIW,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAER,KAAK,CAACS,KAAN,CAAYC,MAAZ,CAAmBa,IAFrC;UAGIX,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAId,OAAO,GAAG;YACVe,eAAe,EAAEd,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBS,MAD1B;YAEVpB,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBS;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHR,cAAc,EAAE;UACZtB,UAAU,EAAE,QADA;UAEZ+B,iBAAiB,EAAEzB,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBoB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZV,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAElB,KAAK,CAACmB,OAAN,CAAc,CAAd,CALO;UAMZC,eAAe,EAAEpB,KAAK,CAACmB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHE,SAAS,EAAEO,oBAAA,CAAaC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EAlDR;AAoDH"}

package/build/commonjs/Empty/Empty.js

@@ -57,7 +57,7 @@ function Empty(props) {
     color: theme.palette.text.strong
   });
   const descriptionFontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typography => typography.body2.regular,
+    selector: typography => typography.body3.regular,
     color: theme.palette.text.base
   });
   return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({

package/build/commonjs/Empty/Empty.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flex","justifyContent","paddingHorizontal","spacing","cta","alignSelf","Empty","props","buttonTitle","description","headerContent","headerContentProp","onButtonPress","style","styleProp","title","otherProps","styles","rootStyle","css","cloneElementSafely","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","descriptionFontStyle","body2","regular","base"],"sources":["Empty.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type { FalsyReactElement } from '../utils';\nimport { cloneElementSafely } from '../utils';\nimport type EmptyProps from './EmptyProps';\n\ntype EmptyStyles = NamedStylesStringUnion<'root' | 'cta'>;\n\nconst useStyles: UseStyles<EmptyStyles> = function (): EmptyStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flex: 1,\n            justifyContent: 'center',\n            paddingHorizontal: theme.spacing(5),\n        },\n        cta: {\n            alignSelf: 'center',\n        },\n    };\n};\n\nexport default function Empty(props: EmptyProps) {\n    const {\n        buttonTitle,\n        description,\n        headerContent: headerContentProp,\n        onButtonPress,\n        style: styleProp,\n        title,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    const headerContent = cloneElementSafely(headerContentProp as FalsyReactElement);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const descriptionFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body2.regular,\n        color: theme.palette.text.base,\n    });\n\n    return (\n        <Column\n            style={rootStyle}\n            {...otherProps}\n        >\n            {headerContent ? (\n                <React.Fragment>\n                    {headerContent}\n\n                    <Spacer size={6}/>\n                </React.Fragment>\n            ) : null}\n\n            <Text\n                children={title}\n                style={titleFontStyle}\n            />\n\n            {description ? (\n                <React.Fragment>\n                    <Spacer size={2}/>\n\n                    <Text\n                        children={description}\n                        style={descriptionFontStyle}\n                    />\n                </React.Fragment>\n            ) : null}\n\n            {buttonTitle && onButtonPress ? (\n                <React.Fragment>\n                    <Spacer size={6}/>\n\n                    <Button\n                        children={buttonTitle}\n                        color={'accent'}\n                        onPress={onButtonPress}\n                        style={styles.cta}\n                        variant={'capsuleSolid'}\n                    />\n                </React.Fragment>\n            ) : null}\n        </Column>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,IAAI,EAAE,CAFJ;MAGFC,cAAc,EAAE,QAHd;MAIFC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IAJjB,CADH;IAOHC,GAAG,EAAE;MACDC,SAAS,EAAE;IADV;EAPF,CAAP;AAWH,CAdD;;AAgBe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,WADE;IAEFC,WAFE;IAGFC,aAAa,EAAEC,iBAHb;IAIFC,aAJE;IAKFC,KAAK,EAAEC,SALL;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFT,KARJ;EAUA,MAAMU,MAAM,GAAGtB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMqB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACnB,IADW,EAElBgB,SAFkB,CAAJ,CAAlB;EAKA,MAAMJ,aAAa,GAAG,IAAAU,yBAAA,EAAmBT,iBAAnB,CAAtB;EAEA,MAAMU,cAAc,GAAG,IAAAC,uBAAA,EAAgB1B,KAAhB,EAAuB;IAC1C2B,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,oBAAoB,GAAG,IAAAT,uBAAA,EAAgB1B,KAAhB,EAAuB;IAChD2B,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACQ,KAAX,CAAiBC,OADK;IAEhDN,KAAK,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,IAAd,CAAmBK;EAFsB,CAAvB,CAA7B;EAKA,oBACI,6BAAC,eAAD;IACI,KAAK,EAAEhB;EADX,GAEQF,UAFR,GAIKN,aAAa,gBACV,6BAAC,cAAD,CAAO,QAAP,QACKA,aADL,eAGI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAHJ,CADU,GAMV,IAVR,eAYI,6BAAC,iBAAD;IACI,QAAQ,EAAEK,KADd;IAEI,KAAK,EAAEM;EAFX,EAZJ,EAiBKZ,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,6BAAC,iBAAD;IACI,QAAQ,EAAEA,WADd;IAEI,KAAK,EAAEsB;EAFX,EAHJ,CADQ,GASR,IA1BR,EA4BKvB,WAAW,IAAII,aAAf,gBACG,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,6BAAC,eAAD;IACI,QAAQ,EAAEJ,WADd;IAEI,KAAK,EAAE,QAFX;IAGI,OAAO,EAAEI,aAHb;IAII,KAAK,EAAEK,MAAM,CAACb,GAJlB;IAKI,OAAO,EAAE;EALb,EAHJ,CADH,GAYG,IAxCR,CADJ;AA4CH"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","flex","justifyContent","paddingHorizontal","spacing","cta","alignSelf","Empty","props","buttonTitle","description","headerContent","headerContentProp","onButtonPress","style","styleProp","title","otherProps","styles","rootStyle","css","cloneElementSafely","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","descriptionFontStyle","body3","regular","base"],"sources":["Empty.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Column from '../Column';\nimport Spacer from '../Spacer';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type { FalsyReactElement } from '../utils';\nimport { cloneElementSafely } from '../utils';\nimport type EmptyProps from './EmptyProps';\n\ntype EmptyStyles = NamedStylesStringUnion<'root' | 'cta'>;\n\nconst useStyles: UseStyles<EmptyStyles> = function (): EmptyStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            flex: 1,\n            justifyContent: 'center',\n            paddingHorizontal: theme.spacing(5),\n        },\n        cta: {\n            alignSelf: 'center',\n        },\n    };\n};\n\nexport default function Empty(props: EmptyProps) {\n    const {\n        buttonTitle,\n        description,\n        headerContent: headerContentProp,\n        onButtonPress,\n        style: styleProp,\n        title,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    const headerContent = cloneElementSafely(headerContentProp as FalsyReactElement);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const descriptionFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body3.regular,\n        color: theme.palette.text.base,\n    });\n\n    return (\n        <Column\n            style={rootStyle}\n            {...otherProps}\n        >\n            {headerContent ? (\n                <React.Fragment>\n                    {headerContent}\n\n                    <Spacer size={6}/>\n                </React.Fragment>\n            ) : null}\n\n            <Text\n                children={title}\n                style={titleFontStyle}\n            />\n\n            {description ? (\n                <React.Fragment>\n                    <Spacer size={2}/>\n\n                    <Text\n                        children={description}\n                        style={descriptionFontStyle}\n                    />\n                </React.Fragment>\n            ) : null}\n\n            {buttonTitle && onButtonPress ? (\n                <React.Fragment>\n                    <Spacer size={6}/>\n\n                    <Button\n                        children={buttonTitle}\n                        color={'accent'}\n                        onPress={onButtonPress}\n                        style={styles.cta}\n                        variant={'capsuleSolid'}\n                    />\n                </React.Fragment>\n            ) : null}\n        </Column>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,IAAI,EAAE,CAFJ;MAGFC,cAAc,EAAE,QAHd;MAIFC,iBAAiB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IAJjB,CADH;IAOHC,GAAG,EAAE;MACDC,SAAS,EAAE;IADV;EAPF,CAAP;AAWH,CAdD;;AAgBe,SAASC,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,WADE;IAEFC,WAFE;IAGFC,aAAa,EAAEC,iBAHb;IAIFC,aAJE;IAKFC,KAAK,EAAEC,SALL;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFT,KARJ;EAUA,MAAMU,MAAM,GAAGtB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMqB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACnB,IADW,EAElBgB,SAFkB,CAAJ,CAAlB;EAKA,MAAMJ,aAAa,GAAG,IAAAU,yBAAA,EAAmBT,iBAAnB,CAAtB;EAEA,MAAMU,cAAc,GAAG,IAAAC,uBAAA,EAAgB1B,KAAhB,EAAuB;IAC1C2B,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,oBAAoB,GAAG,IAAAT,uBAAA,EAAgB1B,KAAhB,EAAuB;IAChD2B,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACQ,KAAX,CAAiBC,OADK;IAEhDN,KAAK,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,IAAd,CAAmBK;EAFsB,CAAvB,CAA7B;EAKA,oBACI,6BAAC,eAAD;IACI,KAAK,EAAEhB;EADX,GAEQF,UAFR,GAIKN,aAAa,gBACV,6BAAC,cAAD,CAAO,QAAP,QACKA,aADL,eAGI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EAHJ,CADU,GAMV,IAVR,eAYI,6BAAC,iBAAD;IACI,QAAQ,EAAEK,KADd;IAEI,KAAK,EAAEM;EAFX,EAZJ,EAiBKZ,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,6BAAC,iBAAD;IACI,QAAQ,EAAEA,WADd;IAEI,KAAK,EAAEsB;EAFX,EAHJ,CADQ,GASR,IA1BR,EA4BKvB,WAAW,IAAII,aAAf,gBACG,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,6BAAC,eAAD;IACI,QAAQ,EAAEJ,WADd;IAEI,KAAK,EAAE,QAFX;IAGI,OAAO,EAAEI,aAHb;IAII,KAAK,EAAEK,MAAM,CAACb,GAJlB;IAKI,OAAO,EAAE;EALb,EAHJ,CADH,GAYG,IAxCR,CADJ;AA4CH"}

package/build/commonjs/ListItem/ListItem.js

@@ -9,22 +9,34 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _styles = require("@fountain-ui/styles");
+
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
-var _styles = require("../styles");
+var _Row = _interopRequireDefault(require("../Row"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styles2 = require("../styles");
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   return {
-    root: {
-      flexDirection: 'row',
-      paddingVertical: theme.spacing(3),
+    content: {
+      gap: theme.spacing(2),
+      paddingVertical: theme.spacing(3.75),
       paddingHorizontal: theme.spacing(4),
       width: '100%'
+    },
+    description: {
+      paddingRight: theme.spacing(20)
+    },
+    divider: {
+      borderBottomColor: theme.palette.border.weak,
+      borderBottomWidth: 0.5
+    },
+    dividerWrapper: {
+      paddingHorizontal: theme.spacing(4)
     }
   };
 };
@@ -34,39 +46,49 @@ function ListItem(props) {
     alignItems = 'center',
     button = false,
     children,
+    description,
     disabled = false,
     onPress,
     style,
     ...otherProps
   } = props;
+  const theme = (0, _styles2.useTheme)();
   const styles = useStyles();
   const rootComponentProps = {
     accessibilityRole: _reactNative.Platform.OS === 'web' ? 'listitem' : undefined,
     ...otherProps
   };
-  const rootStyle = (0, _styles.css)([styles.root, {
-    alignItems
-  }, style]);
+  const contentWrapperStyle = (0, _styles2.css)([styles.content, style]);
+  const descriptionFontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: _ => (0, _styles.typographyOf)({
+      fontSize: 14,
+      lineHeight: 19.6,
+      fontFamily: 'PretendardStd-Regular',
+      letterSpacing: 0
+    }),
+    color: theme.palette.text.base
+  });
 
-  if (button) {
-    return (
-      /*#__PURE__*/
-      // @ts-ignore
-      _react.default.createElement(_reactNative.View, rootComponentProps, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
-        disabled: disabled,
-        onPress: onPress,
-        style: rootStyle
-      }, children))
-    );
-  }
+  const content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Row.default, {
+    alignItems: alignItems
+  }, children), description ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: (0, _styles2.css)([styles.description, descriptionFontStyle])
+  }, description) : null);
 
   return (
     /*#__PURE__*/
     // @ts-ignore
-    _react.default.createElement(_reactNative.View, _extends({
-      children: children,
-      style: rootStyle
-    }, rootComponentProps))
+    _react.default.createElement(_reactNative.View, rootComponentProps, button ? /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
+      disabled: disabled,
+      onPress: onPress,
+      style: contentWrapperStyle
+    }, content) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: contentWrapperStyle
+    }, content), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.dividerWrapper
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.divider
+    })))
   );
 }
 

package/build/commonjs/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","paddingVertical","spacing","paddingHorizontal","width","ListItem","props","alignItems","button","children","disabled","onPress","style","otherProps","styles","rootComponentProps","accessibilityRole","Platform","OS","undefined","rootStyle","css"],"sources":["ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { css, useTheme } from '../styles';\nimport ListItemProps from './ListItemProps';\n\ntype ListItemStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n            paddingHorizontal: theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\n\nexport default function ListItem(props: ListItemProps) {\n    const {\n        alignItems = 'center',\n        button = false,\n        children,\n        disabled = false,\n        onPress,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const rootComponentProps = {\n        accessibilityRole: Platform.OS === 'web' ? 'listitem' : undefined,\n        ...otherProps,\n    };\n\n    const rootStyle = css([\n        styles.root,\n        { alignItems },\n        style,\n    ]);\n\n    if (button) {\n        return (\n            // @ts-ignore\n            <View {...rootComponentProps}>\n                <ButtonBase\n                    disabled={disabled}\n                    onPress={onPress}\n                    style={rootStyle}\n                >\n                    {children}\n                </ButtonBase>\n            </View>\n        );\n    }\n\n    return (\n        // @ts-ignore\n        <View\n            children={children}\n            style={rootStyle}\n            {...rootComponentProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,KADb;MAEFC,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFf;MAGFC,iBAAiB,EAAEN,KAAK,CAACK,OAAN,CAAc,CAAd,CAHjB;MAIFE,KAAK,EAAE;IAJL;EADH,CAAP;AAQH,CAXD;;AAae,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,UAAU,GAAG,QADX;IAEFC,MAAM,GAAG,KAFP;IAGFC,QAHE;IAIFC,QAAQ,GAAG,KAJT;IAKFC,OALE;IAMFC,KANE;IAOF,GAAGC;EAPD,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGlB,SAAS,EAAxB;EAEA,MAAMmB,kBAAkB,GAAG;IACvBC,iBAAiB,EAAEC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,UAAxB,GAAqCC,SADjC;IAEvB,GAAGN;EAFoB,CAA3B;EAKA,MAAMO,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBP,MAAM,CAACf,IADW,EAElB;IAAEQ;EAAF,CAFkB,EAGlBK,KAHkB,CAAJ,CAAlB;;EAMA,IAAIJ,MAAJ,EAAY;IACR;MAAA;MACI;MACA,6BAAC,iBAAD,EAAUO,kBAAV,eACI,6BAAC,mBAAD;QACI,QAAQ,EAAEL,QADd;QAEI,OAAO,EAAEC,OAFb;QAGI,KAAK,EAAES;MAHX,GAKKX,QALL,CADJ;IAFJ;EAYH;;EAED;IAAA;IACI;IACA,6BAAC,iBAAD;MACI,QAAQ,EAAEA,QADd;MAEI,KAAK,EAAEW;IAFX,GAGQL,kBAHR;EAFJ;AAQH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","content","gap","spacing","paddingVertical","paddingHorizontal","width","description","paddingRight","divider","borderBottomColor","palette","border","weak","borderBottomWidth","dividerWrapper","ListItem","props","alignItems","button","children","disabled","onPress","style","otherProps","styles","rootComponentProps","accessibilityRole","Platform","OS","undefined","contentWrapperStyle","css","descriptionFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","text","base"],"sources":["ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlexStyle } from 'react-native';\nimport { Platform, Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type ListItemProps from './ListItemProps';\n\ntype ListItemStyles = NamedStylesStringUnion<'content' | 'description' | 'divider' | 'dividerWrapper'>;\n\nconst useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {\n    const theme = useTheme();\n\n    return {\n        content: {\n            gap: theme.spacing(2),\n            paddingVertical: theme.spacing(3.75),\n            paddingHorizontal: theme.spacing(4),\n            width: '100%',\n        },\n        description: {\n            paddingRight: theme.spacing(20),\n        },\n        divider: {\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n        },\n        dividerWrapper: {\n            paddingHorizontal: theme.spacing(4),\n        },\n    };\n};\n\nexport default function ListItem(props: ListItemProps) {\n    const {\n        alignItems = 'center' as FlexStyle['alignItems'],\n        button = false,\n        children,\n        description,\n        disabled = false,\n        onPress,\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const rootComponentProps = {\n        accessibilityRole: Platform.OS === 'web' ? 'listitem' : undefined,\n        ...otherProps,\n    };\n\n    const contentWrapperStyle = css([\n        styles.content,\n        style,\n    ]);\n\n    const descriptionFontStyle = createFontStyle(theme, {\n        selector: (_) => typographyOf({\n            fontSize: 14,\n            lineHeight: 19.6,\n            fontFamily: 'PretendardStd-Regular',\n            letterSpacing: 0,\n        }),\n        color: theme.palette.text.base,\n    });\n\n    const content = (\n        <React.Fragment>\n            <Row alignItems={alignItems}>\n                {children}\n            </Row>\n\n            {description ? (\n                <Text style={css([\n                    styles.description,\n                    descriptionFontStyle,\n                ])}>\n                    {description}\n                </Text>\n            ) : null}\n        </React.Fragment>\n    );\n\n    return (\n        // @ts-ignore\n        <View {...rootComponentProps}>\n            {button ? (\n                <ButtonBase\n                    disabled={disabled}\n                    onPress={onPress}\n                    style={contentWrapperStyle}\n                >\n                    {content}\n                </ButtonBase>\n            ) : (\n                <View style={contentWrapperStyle}>\n                    {content}\n                </View>\n            )}\n\n            <View style={styles.dividerWrapper}>\n                <View style={styles.divider}/>\n            </View>\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;EACrE,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,OAAO,EAAE;MACLC,GAAG,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADA;MAELC,eAAe,EAAEL,KAAK,CAACI,OAAN,CAAc,IAAd,CAFZ;MAGLE,iBAAiB,EAAEN,KAAK,CAACI,OAAN,CAAc,CAAd,CAHd;MAILG,KAAK,EAAE;IAJF,CADN;IAOHC,WAAW,EAAE;MACTC,YAAY,EAAET,KAAK,CAACI,OAAN,CAAc,EAAd;IADL,CAPV;IAUHM,OAAO,EAAE;MACLC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAcC,MAAd,CAAqBC,IADnC;MAELC,iBAAiB,EAAE;IAFd,CAVN;IAcHC,cAAc,EAAE;MACZV,iBAAiB,EAAEN,KAAK,CAACI,OAAN,CAAc,CAAd;IADP;EAdb,CAAP;AAkBH,CArBD;;AAuBe,SAASa,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,UAAU,GAAG,QADX;IAEFC,MAAM,GAAG,KAFP;IAGFC,QAHE;IAIFb,WAJE;IAKFc,QAAQ,GAAG,KALT;IAMFC,OANE;IAOFC,KAPE;IAQF,GAAGC;EARD,IASFP,KATJ;EAWA,MAAMlB,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMyB,MAAM,GAAG3B,SAAS,EAAxB;EAEA,MAAM4B,kBAAkB,GAAG;IACvBC,iBAAiB,EAAEC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,UAAxB,GAAqCC,SADjC;IAEvB,GAAGN;EAFoB,CAA3B;EAKA,MAAMO,mBAAmB,GAAG,IAAAC,YAAA,EAAI,CAC5BP,MAAM,CAACxB,OADqB,EAE5BsB,KAF4B,CAAJ,CAA5B;EAKA,MAAMU,oBAAoB,GAAG,IAAAC,wBAAA,EAAgBnC,KAAhB,EAAuB;IAChDoC,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;MAC1BC,QAAQ,EAAE,EADgB;MAE1BC,UAAU,EAAE,IAFc;MAG1BC,UAAU,EAAE,uBAHc;MAI1BC,aAAa,EAAE;IAJW,CAAb,CAD+B;IAOhDC,KAAK,EAAE3C,KAAK,CAACY,OAAN,CAAcgC,IAAd,CAAmBC;EAPsB,CAAvB,CAA7B;;EAUA,MAAM3C,OAAO,gBACT,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,YAAD;IAAK,UAAU,EAAEiB;EAAjB,GACKE,QADL,CADJ,EAKKb,WAAW,gBACR,6BAAC,iBAAD;IAAM,KAAK,EAAE,IAAAyB,YAAA,EAAI,CACbP,MAAM,CAAClB,WADM,EAEb0B,oBAFa,CAAJ;EAAb,GAIK1B,WAJL,CADQ,GAOR,IAZR,CADJ;;EAiBA;IAAA;IACI;IACA,6BAAC,iBAAD,EAAUmB,kBAAV,EACKP,MAAM,gBACH,6BAAC,mBAAD;MACI,QAAQ,EAAEE,QADd;MAEI,OAAO,EAAEC,OAFb;MAGI,KAAK,EAAES;IAHX,GAKK9B,OALL,CADG,gBASH,6BAAC,iBAAD;MAAM,KAAK,EAAE8B;IAAb,GACK9B,OADL,CAVR,eAeI,6BAAC,iBAAD;MAAM,KAAK,EAAEwB,MAAM,CAACV;IAApB,gBACI,6BAAC,iBAAD;MAAM,KAAK,EAAEU,MAAM,CAAChB;IAApB,EADJ,CAfJ;EAFJ;AAsBH;;AAAA"}

package/build/commonjs/ListItem/ListItemProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ListItemProps.ts"],"sourcesContent":["import React from 'react';\nimport type { FlexStyle, ViewProps } from 'react-native';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface ListItemProps extends OverridableComponentProps<React.PropsWithChildren<ViewProps>, {\n    /**\n     * Aligns children vertical direction.\n     * @default 'center'\n     */\n    alignItems?: FlexStyle['alignItems'];\n\n    /**\n     * If `true`, the list item is a button (using `ButtonBase`).\n     * @default false\n     */\n    button?: boolean;\n\n    /**\n     * Whether to prevent interaction with the ButtonBase.\n     * @default false\n     */\n    disabled?: ButtonBaseProps['disabled'];\n\n    /**\n     * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n     */\n    onPress?: ButtonBaseProps['onPress'];\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ListItemProps.ts"],"sourcesContent":["import React from 'react';\nimport type { FlexStyle, ViewProps } from 'react-native';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface ListItemProps extends OverridableComponentProps<React.PropsWithChildren<ViewProps>, {\n    /**\n     * Aligns children vertical direction.\n     * @default 'center'\n     */\n    alignItems?: FlexStyle['alignItems'];\n\n    /**\n     * If `true`, the list item is a button (using `ButtonBase`).\n     * @default false\n     */\n    button?: boolean;\n\n    /**\n     * Displays a description in this item.\n     */\n    description?: string;\n\n    /**\n     * Whether to prevent interaction with the ButtonBase.\n     * @default false\n     */\n    disabled?: ButtonBaseProps['disabled'];\n\n    /**\n     * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n     */\n    onPress?: ButtonBaseProps['onPress'];\n}> {}\n"],"mappings":""}

package/build/commonjs/ListItemIcon/ListItemIcon.js

@@ -19,8 +19,7 @@ const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
     root: {
-      marginRight: theme.spacing(2),
-      minWidth: 24,
+      marginRight: theme.spacing(3),
       flexShrink: 0
     }
   };

package/build/commonjs/ListItemIcon/ListItemIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","marginRight","spacing","minWidth","flexShrink","ListItemIcon","props","style","otherProps","styles","css"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type ListItemIconProps from './ListItemIconProps';\n\ntype ListItemIconStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<ListItemIconStyles> = function (): ListItemIconStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            marginRight: theme.spacing(2),\n            minWidth: 24,\n            flexShrink: 0,\n        },\n    };\n};\n\nexport default function ListItemIcon(props: ListItemIconProps) {\n    const {\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,WAAW,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADX;MAEFC,QAAQ,EAAE,EAFR;MAGFC,UAAU,EAAE;IAHV;EADH,CAAP;AAOH,CAVD;;AAYe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,KADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGZ,SAAS,EAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAa,WAAA,EAAI,CACPD,MAAM,CAACT,IADA,EAEPO,KAFO,CAAJ;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","marginRight","spacing","flexShrink","ListItemIcon","props","style","otherProps","styles","css"],"sources":["ListItemIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type ListItemIconProps from './ListItemIconProps';\n\ntype ListItemIconStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<ListItemIconStyles> = function (): ListItemIconStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            marginRight: theme.spacing(3),\n            flexShrink: 0,\n        },\n    };\n};\n\nexport default function ListItemIcon(props: ListItemIconProps) {\n    const {\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAAwC,GAAG,YAAgC;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,WAAW,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADX;MAEFC,UAAU,EAAE;IAFV;EADH,CAAP;AAMH,CATD;;AAWe,SAASC,YAAT,CAAsBC,KAAtB,EAAgD;EAC3D,MAAM;IACFC,KADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGX,SAAS,EAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAY,WAAA,EAAI,CACPD,MAAM,CAACR,IADA,EAEPM,KAFO,CAAJ;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}

package/build/commonjs/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -18,6 +18,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const useStyles = function () {
   return {
     root: {
+      alignItems: 'center',
+      flexDirection: 'row',
       flexShrink: 0,
       marginLeft: 'auto'
     }

package/build/commonjs/ListItemSecondaryAction/ListItemSecondaryAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","root","flexShrink","marginLeft","ListItemSecondaryAction","props","style","otherProps","styles","css"],"sources":["ListItemSecondaryAction.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css } from '../styles';\nimport ListItemSecondaryActionProps from './ListItemSecondaryActionProps';\n\ntype ListItemSecondaryActionStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<ListItemSecondaryActionStyles> = function (): ListItemSecondaryActionStyles {\n    return {\n        root: {\n            flexShrink: 0,\n            marginLeft: 'auto',\n        },\n    };\n};\n\nexport default function ListItemSecondaryAction(props: ListItemSecondaryActionProps) {\n    const {\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAAmD,GAAG,YAA2C;EACnG,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,CADV;MAEFC,UAAU,EAAE;IAFV;EADH,CAAP;AAMH,CAPD;;AASe,SAASC,uBAAT,CAAiCC,KAAjC,EAAsE;EACjF,MAAM;IACFC,KADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGR,SAAS,EAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAS,WAAA,EAAI,CACPD,MAAM,CAACP,IADA,EAEPK,KAFO,CAAJ;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}
+{"version":3,"names":["useStyles","root","alignItems","flexDirection","flexShrink","marginLeft","ListItemSecondaryAction","props","style","otherProps","styles","css"],"sources":["ListItemSecondaryAction.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css } from '../styles';\nimport ListItemSecondaryActionProps from './ListItemSecondaryActionProps';\n\ntype ListItemSecondaryActionStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<ListItemSecondaryActionStyles> = function (): ListItemSecondaryActionStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            flexDirection: 'row',\n            flexShrink: 0,\n            marginLeft: 'auto',\n        },\n    };\n};\n\nexport default function ListItemSecondaryAction(props: ListItemSecondaryActionProps) {\n    const {\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAKA,MAAMA,SAAmD,GAAG,YAA2C;EACnG,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,aAAa,EAAE,KAFb;MAGFC,UAAU,EAAE,CAHV;MAIFC,UAAU,EAAE;IAJV;EADH,CAAP;AAQH,CATD;;AAWe,SAASC,uBAAT,CAAiCC,KAAjC,EAAsE;EACjF,MAAM;IACFC,KADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGV,SAAS,EAAxB;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAW,WAAA,EAAI,CACPD,MAAM,CAACT,IADA,EAEPO,KAFO,CAAJ;EADX,GAKQC,UALR,EADJ;AASH;;AAAA"}

package/build/commonjs/ListItemText/ListItemText.js

@@ -7,50 +7,49 @@ exports.default = ListItemText;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Column = _interopRequireDefault(require("../Column"));
+var _reactNative = require("react-native");
+
+var _styles = require("@fountain-ui/styles");
 
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _Column = _interopRequireDefault(require("../Column"));
 
-var _styles = require("../styles");
+var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const useStyles = function () {
-  const theme = (0, _styles.useTheme)();
   return {
     root: {
       flexGrow: 1,
       flexShrink: 1
-    },
-    multiline: {
-      marginBottom: theme.spacing(1)
     }
   };
 };
 
 function ListItemText(props) {
   const {
-    primary,
-    secondary,
+    children,
     style,
     ...otherProps
   } = props;
+  const theme = (0, _styles2.useTheme)();
   const styles = useStyles();
-  const isMultiline = !!(primary && secondary);
+  const fontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: _ => (0, _styles.typographyOf)({
+      fontSize: 16,
+      lineHeight: 19.2,
+      fontFamily: 'PretendardStd-Medium',
+      letterSpacing: 0
+    }),
+    color: theme.palette.text.strong
+  });
   return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({
-    style: (0, _styles.css)([styles.root, style])
-  }, otherProps), primary ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    children: primary,
-    color: 'strong',
-    variant: 'body3',
-    style: isMultiline ? styles.multiline : undefined
-  }) : null, secondary ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    children: secondary,
-    color: 'strong',
-    variant: 'body3'
-  }) : null);
+    style: (0, _styles2.css)([styles.root, style])
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: fontStyle
+  }, children));
 }
 
 ;