@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.11

package/build/module/Checkbox/Checkbox.js

@@ -19,13 +19,14 @@ export default function Checkbox(props) {
   } = props;
   const theme = useTheme();
   const {
+    checkboxContainerStyle,
     checkboxStyle,
     containerStyle,
     iconColor
   } = useVariantStyleMap(variant, checked);
   const rootStyle = css([children ? containerStyle : undefined, styleProp]);
   const fontStyle = createFontStyle(theme, {
-    // TODO: apply typo select.
+    selector: typography => typography.body2.regular,
     color: theme.palette.text.strong
   });
 
@@ -40,12 +41,14 @@ export default function Checkbox(props) {
     onPress: handlePress,
     style: rootStyle
   }, otherProps), /*#__PURE__*/React.createElement(View, {
+    style: checkboxContainerStyle
+  }, /*#__PURE__*/React.createElement(View, {
     style: checkboxStyle
   }, checked ? /*#__PURE__*/React.createElement(CheckboxOnIcon, {
     fill: iconColor,
     height: 7.5,
     width: 11
-  }) : null), children ? /*#__PURE__*/React.createElement(Row, {
+  }) : null)), children ? /*#__PURE__*/React.createElement(Row, {
     flexGrow: 1,
     flexShrink: 1
   }, /*#__PURE__*/React.createElement(Text, {

package/build/module/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","ButtonBase","CheckboxOn","CheckboxOnIcon","Row","createFontStyle","css","useTheme","useVariantStyleMap","Checkbox","props","checked","children","disabled","onChange","style","styleProp","variant","otherProps","theme","checkboxStyle","containerStyle","iconColor","rootStyle","undefined","fontStyle","color","palette","text","strong","handlePress"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { CheckboxOn as CheckboxOnIcon } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type CheckboxProps from './CheckboxProps';\nimport type { CheckboxVariant } from './CheckboxProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nexport default function Checkbox(props: CheckboxProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange,\n        style: styleProp,\n        variant = 'square' as CheckboxVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const {\n        checkboxStyle,\n        containerStyle,\n        iconColor,\n    } = useVariantStyleMap(variant, checked);\n\n    const rootStyle = css([\n        children ? containerStyle : undefined,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        // TODO: apply typo select.\n        color: theme.palette.text.strong,\n    });\n\n    const handlePress = () => {\n        if (onChange) {\n            onChange(!checked);\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <View style={checkboxStyle}>\n                {checked ? (\n                    <CheckboxOnIcon\n                        fill={iconColor}\n                        height={7.5}\n                        width={11}\n                    />\n                ) : null}\n            </View>\n\n            {children ? (\n                <Row\n                    flexGrow={1}\n                    flexShrink={1}\n                >\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,UAAU,IAAIC,cAAvB,QAA6C,mBAA7C;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,QAAQ,GAAG,KAHT;IAIFC,QAJE;IAKFC,KAAK,EAAEC,SALL;IAMFC,OAAO,GAAG,QANR;IAOF,GAAGC;EAPD,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,MAAM;IACFa,aADE;IAEFC,cAFE;IAGFC;EAHE,IAIFd,kBAAkB,CAACS,OAAD,EAAUN,OAAV,CAJtB;EAMA,MAAMY,SAAS,GAAGjB,GAAG,CAAC,CAClBM,QAAQ,GAAGS,cAAH,GAAoBG,SADV,EAElBR,SAFkB,CAAD,CAArB;EAKA,MAAMS,SAAS,GAAGpB,eAAe,CAACc,KAAD,EAAQ;IACrC;IACAO,KAAK,EAAEP,KAAK,CAACQ,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIhB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAEiB,WAFb;IAGI,KAAK,EAAEP;EAHX,GAIQL,UAJR,gBAMI,oBAAC,IAAD;IAAM,KAAK,EAAEE;EAAb,GACKT,OAAO,gBACJ,oBAAC,cAAD;IACI,IAAI,EAAEW,SADV;IAEI,MAAM,EAAE,GAFZ;IAGI,KAAK,EAAE;EAHX,EADI,GAMJ,IAPR,CANJ,EAgBKV,QAAQ,gBACL,oBAAC,GAAD;IACI,QAAQ,EAAE,CADd;IAEI,UAAU,EAAE;EAFhB,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEA,QADd;IAEI,KAAK,EAAEa;EAFX,EAJJ,CADK,GAUL,IA1BR,CADJ;AA8BH;AAAA"}
+{"version":3,"names":["React","Text","View","ButtonBase","CheckboxOn","CheckboxOnIcon","Row","createFontStyle","css","useTheme","useVariantStyleMap","Checkbox","props","checked","children","disabled","onChange","style","styleProp","variant","otherProps","theme","checkboxContainerStyle","checkboxStyle","containerStyle","iconColor","rootStyle","undefined","fontStyle","selector","typography","body2","regular","color","palette","text","strong","handlePress"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { CheckboxOn as CheckboxOnIcon } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type CheckboxProps from './CheckboxProps';\nimport type { CheckboxVariant } from './CheckboxProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nexport default function Checkbox(props: CheckboxProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange,\n        style: styleProp,\n        variant = 'square' as CheckboxVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const {\n        checkboxContainerStyle,\n        checkboxStyle,\n        containerStyle,\n        iconColor,\n    } = useVariantStyleMap(variant, checked);\n\n    const rootStyle = css([\n        children ? containerStyle : undefined,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body2.regular,\n        color: theme.palette.text.strong,\n    });\n\n    const handlePress = () => {\n        if (onChange) {\n            onChange(!checked);\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <View style={checkboxContainerStyle}>\n                <View style={checkboxStyle}>\n                    {checked ? (\n                        <CheckboxOnIcon\n                            fill={iconColor}\n                            height={7.5}\n                            width={11}\n                        />\n                    ) : null}\n                </View>\n            </View>\n\n            {children ? (\n                <Row\n                    flexGrow={1}\n                    flexShrink={1}\n                >\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,UAAU,IAAIC,cAAvB,QAA6C,mBAA7C;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,QAAQ,GAAG,KAHT;IAIFC,QAJE;IAKFC,KAAK,EAAEC,SALL;IAMFC,OAAO,GAAG,QANR;IAOF,GAAGC;EAPD,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,MAAM;IACFa,sBADE;IAEFC,aAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFf,kBAAkB,CAACS,OAAD,EAAUN,OAAV,CALtB;EAOA,MAAMa,SAAS,GAAGlB,GAAG,CAAC,CAClBM,QAAQ,GAAGU,cAAH,GAAoBG,SADV,EAElBT,SAFkB,CAAD,CAArB;EAKA,MAAMU,SAAS,GAAGrB,eAAe,CAACc,KAAD,EAAQ;IACrCQ,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCC,KAAK,EAAEZ,KAAK,CAACa,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIrB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAEsB,WAFb;IAGI,KAAK,EAAEX;EAHX,GAIQN,UAJR,gBAMI,oBAAC,IAAD;IAAM,KAAK,EAAEE;EAAb,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAEC;EAAb,GACKV,OAAO,gBACJ,oBAAC,cAAD;IACI,IAAI,EAAEY,SADV;IAEI,MAAM,EAAE,GAFZ;IAGI,KAAK,EAAE;EAHX,EADI,GAMJ,IAPR,CADJ,CANJ,EAkBKX,QAAQ,gBACL,oBAAC,GAAD;IACI,QAAQ,EAAE,CADd;IAEI,UAAU,EAAE;EAFhB,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEA,QADd;IAEI,KAAK,EAAEc;EAFX,EAJJ,CADK,GAUL,IA5BR,CADJ;AAgCH;AAAA"}

package/build/module/Checkbox/index.js

@@ -1,2 +1,3 @@
 export { default } from './Checkbox';
+export { checkboxVariants } from './CheckboxProps';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Checkbox';\nexport type { default as CheckboxProps } from './CheckboxProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB"}
+{"version":3,"names":["default","checkboxVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Checkbox';\nexport type { default as CheckboxProps } from './CheckboxProps';\nexport { checkboxVariants } from './CheckboxProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AAEA,SAASC,gBAAT,QAAiC,iBAAjC"}

package/build/module/Checkbox/useVariantStyleMap.js

@@ -14,6 +14,10 @@ export default function useVariantStyleMap(variant, checked) {
   switch (variant) {
     case 'square':
       return {
+        checkboxContainerStyle: {
+          alignSelf: 'flex-start',
+          paddingTop: 3
+        },
         checkboxStyle: css([styles.checkbox, {
           borderColor: theme.palette.border.base,
           borderRadius: theme.shape.radius.xs,
@@ -25,9 +29,9 @@ export default 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/module/Checkbox/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","commonColors","css","useTheme","styles","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","checkboxStyle","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","paddingVertical","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,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,YAAT,QAA8C,qBAA9C;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;AAcA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAGV,QAAQ,EAAtB;;EAEA,QAAQQ,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHG,aAAa,EAAEZ,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIS,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIZ,OAAO,GAAG;YACVa,eAAe,EAAEZ,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHS,cAAc,EAAE;UACZpB,UAAU,EAAE,QADA;UAEZqB,aAAa,EAAE,KAFH;UAGZC,GAAG,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd;QAHO,CAdb;QAmBHC,SAAS,EAAElB,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBM;MAnB3B,CAAP;;IAqBJ,KAAK,OAAL;MACI,OAAO;QACHlB,aAAa,EAAEZ,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIS,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmBY,IAFrC;UAGIV,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIZ,OAAO,GAAG;YACVa,eAAe,EAAEZ,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBQ,MAD1B;YAEVnB,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBQ;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHP,cAAc,EAAE;UACZpB,UAAU,EAAE,QADA;UAEZ4B,iBAAiB,EAAEtB,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBmB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZT,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd,CALO;UAMZQ,eAAe,EAAEzB,KAAK,CAACiB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHC,SAAS,EAAE9B,YAAY,CAACsC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EAjDR;AAmDH"}
+{"version":3,"names":["StyleSheet","commonColors","css","useTheme","styles","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","checkboxContainerStyle","alignSelf","paddingTop","checkboxStyle","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","paddingVertical","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","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    checkboxContainerStyle?: FountainUiStyle;\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                checkboxContainerStyle: {\n                    alignSelf: 'flex-start',\n                    paddingTop: 3,\n                },\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                    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,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,YAAT,QAA8C,qBAA9C;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;AAeA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAGV,QAAQ,EAAtB;;EAEA,QAAQQ,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHG,sBAAsB,EAAE;UACpBC,SAAS,EAAE,YADS;UAEpBC,UAAU,EAAE;QAFQ,CADrB;QAKHC,aAAa,EAAEf,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIY,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAET,KAAK,CAACU,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIf,OAAO,GAAG;YACVgB,eAAe,EAAEf,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CALf;QAkBHS,cAAc,EAAE;UACZC,aAAa,EAAE,KADH;UAEZC,GAAG,EAAEnB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAFO;UAGZC,eAAe,EAAErB,KAAK,CAACoB,OAAN,CAAc,CAAd;QAHL,CAlBb;QAuBHE,SAAS,EAAEtB,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBO;MAvB3B,CAAP;;IAyBJ,KAAK,OAAL;MACI,OAAO;QACHnB,aAAa,EAAEf,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIY,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAET,KAAK,CAACU,KAAN,CAAYC,MAAZ,CAAmBa,IAFrC;UAGIX,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIf,OAAO,GAAG;YACVgB,eAAe,EAAEf,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBS,MAD1B;YAEVpB,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBS;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHR,cAAc,EAAE;UACZvB,UAAU,EAAE,QADA;UAEZgC,iBAAiB,EAAE1B,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBoB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZV,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAEnB,KAAK,CAACoB,OAAN,CAAc,CAAd,CALO;UAMZC,eAAe,EAAErB,KAAK,CAACoB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHE,SAAS,EAAElC,YAAY,CAACyC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EArDR;AAuDH"}

package/build/module/Chip/Chip.js

@@ -2,16 +2,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { Text, View } from 'react-native';
+import ButtonBase from '../ButtonBase';
+import { Close } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
-import ButtonBase from '../ButtonBase/ButtonBase';
 import useChipStyle from './useChipStyle';
 export default function Chip(props) {
   const {
     children,
-    endElement: endElementProp,
+    color = 'default',
     numberOfLines,
     onPress,
+    selected = false,
     size = 'small',
     startElement: startElementProp,
     startElementVariant = 'default',
@@ -20,26 +22,28 @@ export default function Chip(props) {
   } = props;
   const {
     container: containerStyle,
-    endElement: endElementStyle,
+    closeButton: closeButtonStyle,
     label: labelStyle,
-    startElement: startElementStyle
-  } = useChipStyle(size, startElementVariant, !!endElementProp);
+    startElement: startElementStyle,
+    startElementContainer: startElementContainerStyle
+  } = useChipStyle(size, startElementVariant, color, selected);
   const chipStyle = css([containerStyle, styleProp]);
-  const startElement = startElementVariant === 'icon' ? /*#__PURE__*/React.createElement(View, {
+  const startElement = /*#__PURE__*/React.createElement(View, {
+    style: startElementContainerStyle
+  }, cloneElementSafely(startElementProp, {
     style: startElementStyle
-  }, cloneElementSafely(startElementProp)) : cloneElementSafely(startElementProp, {
-    style: startElementStyle
-  });
-  const endElement = cloneElementSafely(endElementProp, {
-    style: endElementStyle
-  });
+  }));
   return /*#__PURE__*/React.createElement(ButtonBase, _extends({
+    disabled: !onPress,
     onPress: onPress,
     style: chipStyle
   }, otherProps), startElement, /*#__PURE__*/React.createElement(Text, {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), endElement);
+  }), selected ? /*#__PURE__*/React.createElement(Close, {
+    color: 'baseInverse',
+    style: closeButtonStyle
+  }) : null);
 }
 //# sourceMappingURL=Chip.js.map

package/build/module/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","css","cloneElementSafely","ButtonBase","useChipStyle","Chip","props","children","endElement","endElementProp","numberOfLines","onPress","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","endElementStyle","label","labelStyle","startElementStyle","chipStyle"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { css } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport type ChipProps from './ChipProps';\nimport type { ChipSize } from './ChipProps';\nimport useChipStyle from './useChipStyle';\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endElement: endElementProp,\n        numberOfLines,\n        onPress,\n        size = 'small' as ChipSize,\n        startElement: startElementProp,\n        startElementVariant = 'default',\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        endElement: endElementStyle,\n        label: labelStyle,\n        startElement: startElementStyle,\n    } = useChipStyle(size, startElementVariant, !!endElementProp);\n\n    const chipStyle = css([\n        containerStyle,\n        styleProp,\n    ]);\n\n    const startElement = startElementVariant === 'icon'\n        ? (\n            <View style={startElementStyle}>\n                {cloneElementSafely(startElementProp)}\n            </View>\n        ) : cloneElementSafely(startElementProp, { style: startElementStyle });\n    const endElement = cloneElementSafely(endElementProp, { style: endElementStyle });\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startElement}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={labelStyle}\n            />\n\n            {endElement}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,kBAAT,QAAmC,UAAnC;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AAGA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,UAAU,EAAEC,cAFV;IAGFC,aAHE;IAIFC,OAJE;IAKFC,IAAI,GAAG,OALL;IAMFC,YAAY,EAAEC,gBANZ;IAOFC,mBAAmB,GAAG,SAPpB;IAQFC,KAAK,EAAEC,SARL;IASF,GAAGC;EATD,IAUFZ,KAVJ;EAYA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFZ,UAAU,EAAEa,eAFV;IAGFC,KAAK,EAAEC,UAHL;IAIFV,YAAY,EAAEW;EAJZ,IAKFpB,YAAY,CAACQ,IAAD,EAAOG,mBAAP,EAA4B,CAAC,CAACN,cAA9B,CALhB;EAOA,MAAMgB,SAAS,GAAGxB,GAAG,CAAC,CAClBmB,cADkB,EAElBH,SAFkB,CAAD,CAArB;EAKA,MAAMJ,YAAY,GAAGE,mBAAmB,KAAK,MAAxB,gBAEb,oBAAC,IAAD;IAAM,KAAK,EAAES;EAAb,GACKtB,kBAAkB,CAACY,gBAAD,CADvB,CAFa,GAKbZ,kBAAkB,CAACY,gBAAD,EAAmB;IAAEE,KAAK,EAAEQ;EAAT,CAAnB,CAL1B;EAMA,MAAMhB,UAAU,GAAGN,kBAAkB,CAACO,cAAD,EAAiB;IAAEO,KAAK,EAAEK;EAAT,CAAjB,CAArC;EAEA,oBACI,oBAAC,UAAD;IACI,OAAO,EAAEV,OADb;IAEI,KAAK,EAAEc;EAFX,GAGQP,UAHR,GAKKL,YALL,eAOI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEG,aAFnB;IAGI,KAAK,EAAEa;EAHX,EAPJ,EAaKf,UAbL,CADJ;AAiBH"}
+{"version":3,"names":["React","Text","View","ButtonBase","Close","css","cloneElementSafely","useChipStyle","Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","closeButton","closeButtonStyle","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","chipStyle"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { Close } from '../internal';\nimport { css } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ChipProps from './ChipProps';\nimport type { ChipColor, ChipSize } from './ChipProps';\nimport useChipStyle from './useChipStyle';\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        color = 'default' as ChipColor,\n        numberOfLines,\n        onPress,\n        selected = false,\n        size = 'small' as ChipSize,\n        startElement: startElementProp,\n        startElementVariant = 'default',\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const {\n        container: containerStyle,\n        closeButton: closeButtonStyle,\n        label: labelStyle,\n        startElement: startElementStyle,\n        startElementContainer: startElementContainerStyle,\n    } = useChipStyle(size, startElementVariant, color, selected);\n\n    const chipStyle = css([\n        containerStyle,\n        styleProp,\n    ]);\n\n    const startElement = (\n        <View style={startElementContainerStyle}>\n            {cloneElementSafely(startElementProp, { style: startElementStyle })}\n        </View>\n    );\n\n    return (\n        <ButtonBase\n            disabled={!onPress}\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startElement}\n\n            <Text\n                children={children}\n                numberOfLines={numberOfLines}\n                style={labelStyle}\n            />\n\n            {selected ? (\n                <Close\n                    color={'baseInverse'}\n                    style={closeButtonStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAT,QAAsB,aAAtB;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;EAC3C,MAAM;IACFC,QADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,aAHE;IAIFC,OAJE;IAKFC,QAAQ,GAAG,KALT;IAMFC,IAAI,GAAG,OANL;IAOFC,YAAY,EAAEC,gBAPZ;IAQFC,mBAAmB,GAAG,SARpB;IASFC,KAAK,EAAEC,SATL;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAM;IACFa,SAAS,EAAEC,cADT;IAEFC,WAAW,EAAEC,gBAFX;IAGFC,KAAK,EAAEC,UAHL;IAIFX,YAAY,EAAEY,iBAJZ;IAKFC,qBAAqB,EAAEC;EALrB,IAMFvB,YAAY,CAACQ,IAAD,EAAOG,mBAAP,EAA4BP,KAA5B,EAAmCG,QAAnC,CANhB;EAQA,MAAMiB,SAAS,GAAG1B,GAAG,CAAC,CAClBkB,cADkB,EAElBH,SAFkB,CAAD,CAArB;EAKA,MAAMJ,YAAY,gBACd,oBAAC,IAAD;IAAM,KAAK,EAAEc;EAAb,GACKxB,kBAAkB,CAACW,gBAAD,EAAmB;IAAEE,KAAK,EAAES;EAAT,CAAnB,CADvB,CADJ;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAE,CAACf,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEkB;EAHX,GAIQV,UAJR,GAMKL,YANL,eAQI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEe;EAHX,EARJ,EAcKb,QAAQ,gBACL,oBAAC,KAAD;IACI,KAAK,EAAE,aADX;IAEI,KAAK,EAAEW;EAFX,EADK,GAKL,IAnBR,CADJ;AAuBH"}

package/build/module/Chip/ChipProps.js

@@ -1,3 +1,4 @@
+export const chipColors = ['default', 'white'];
 export const chipSizes = ['large', 'small'];
 export const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'];
 //# sourceMappingURL=ChipProps.js.map

package/build/module/Chip/ChipProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["chipSizes","chipStartElementVariants"],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport const chipSizes = ['large', 'small'] as const;\nexport type ChipSize = typeof chipSizes[number];\n\nexport const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;\nexport type ChipStartElementVariant = typeof chipStartElementVariants[number];\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * Element placed after the children.\n     */\n    endElement?: React.ReactElement;\n\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * Determines size of component.\n     * @default 'small'\n     */\n    size?: ChipSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startElement?: React.ReactElement;\n\n    /**\n     * Determines the style of the start element.\n     */\n    startElementVariant?: ChipStartElementVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,SAAS,GAAG,CAAC,OAAD,EAAU,OAAV,CAAlB;AAGP,OAAO,MAAMC,wBAAwB,GAAG,CAAC,SAAD,EAAY,QAAZ,EAAsB,OAAtB,EAA+B,MAA/B,CAAjC"}
+{"version":3,"names":["chipColors","chipSizes","chipStartElementVariants"],"sources":["ChipProps.ts"],"sourcesContent":["import React from 'react';\nimport { OverridableComponentProps } from '../types';\nimport type { ButtonBaseProps } from '../ButtonBase';\n\nexport const chipColors = ['default', 'white'] as const;\nexport type ChipColor = typeof chipColors[number];\n\nexport const chipSizes = ['large', 'small'] as const;\nexport type ChipSize = typeof chipSizes[number];\n\nexport const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'] as const;\nexport type ChipStartElementVariant = typeof chipStartElementVariants[number];\n\nexport default interface ChipProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the component.\n     */\n    children: string;\n\n    /**\n     * Set backgroundColor of the component.\n     * @default 'default'\n     */\n    color?: ChipColor;\n\n    /**\n     * Number of lines of children.\n     */\n    numberOfLines?: number;\n\n    /**\n     * If `true`, showing a close icon and applying a highlighted style.\n     */\n    selected?: boolean;\n\n    /**\n     * Determines size of component.\n     * @default 'small'\n     */\n    size?: ChipSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startElement?: React.ReactElement;\n\n    /**\n     * Determines the style of the start element.\n     */\n    startElementVariant?: ChipStartElementVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,UAAU,GAAG,CAAC,SAAD,EAAY,OAAZ,CAAnB;AAGP,OAAO,MAAMC,SAAS,GAAG,CAAC,OAAD,EAAU,OAAV,CAAlB;AAGP,OAAO,MAAMC,wBAAwB,GAAG,CAAC,SAAD,EAAY,QAAZ,EAAsB,OAAtB,EAA+B,MAA/B,CAAjC"}

package/build/module/Chip/index.js

@@ -1,2 +1,3 @@
 export { default } from './Chip';
+export { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps } from './ChipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
+{"version":3,"names":["default","chipColors","chipSizes","chipStartElementVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASC,UAAT,EAAqBC,SAArB,EAAgCC,wBAAhC,QAAgE,aAAhE"}

package/build/module/Chip/useChipStyle.js

@@ -1,51 +1,36 @@
 import { useMemo } from 'react';
 import { createFontStyle, useTheme } from '../styles';
-import { typographyOf } from '@fountain-ui/styles';
 // TODO: need to refactoring...
-export default function useChipStyle(size, startElementVariant, isEndElement) {
+export default function useChipStyle(size, startElementVariant, color, selected) {
   const theme = useTheme();
   return useMemo(() => {
-    var _variantStyleMap$star, _variantStyleMap$star2;
+    var _variantStyleMap$star, _variantStyleMap$star2, _variantStyleMap$star3;
 
     const fontStyleMap = {
       small: createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.caption1.medium,
-        selector: _ => typographyOf({
-          fontSize: 12,
-          lineHeight: 16.8,
-          fontFamily: 'Pretendard-Medium',
-          letterSpacing: 0
-        }),
-        color: theme.palette.text.strong
+        selector: typography => typography.caption1.medium,
+        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
       }),
       large: createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.body2.medium,
-        selector: _ => typographyOf({
-          fontSize: 14,
-          lineHeight: 21,
-          fontFamily: 'Pretendard-Medium',
-          letterSpacing: 0
-        }),
-        color: theme.palette.text.strong
+        selector: typography => typography.body2.medium,
+        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
       })
     };
-    const endElementStyleMap = {
+    const closeButtonStyleMap = {
       small: {
         height: 14,
         marginLeft: theme.spacing(2),
         width: 8.17
       },
       large: {
-        height: 16,
+        height: 17,
         marginLeft: theme.spacing(2.5),
         width: 9
       }
     };
     const baseContainerStyle = {
       alignItems: 'center',
-      backgroundColor: theme.palette.fill.weaker,
+      backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
       borderRadius: theme.shape.radius.full,
       flexDirection: 'row',
       overflow: 'hidden'
@@ -60,9 +45,11 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
         },
         startElement: {
           borderRadius: theme.shape.radius.full,
-          height: isLarge ? 24 : 22,
-          marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
-          width: isLarge ? 24 : 22
+          height: isLarge ? 26 : 23,
+          width: isLarge ? 26 : 23
+        },
+        startElementContainer: {
+          marginRight: theme.spacing(isLarge ? 1.5 : 1.25)
         }
       },
       icon: {
@@ -72,11 +59,16 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
           paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25)
         },
         startElement: {
+          color: selected ? theme.palette.icon.strongInverse : theme.palette.icon.strong,
+          height: isLarge ? 17 : 16,
+          width: isLarge ? 17 : 16
+        },
+        startElementContainer: {
           alignItems: 'center',
-          height: isLarge ? 22 : 20,
+          height: isLarge ? 24 : 21,
           justifyContent: 'center',
           marginRight: theme.spacing(isLarge ? 1 : 0.75),
-          width: isLarge ? 22 : 20
+          width: isLarge ? 24 : 21
         }
       },
       image: {
@@ -86,9 +78,11 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
         },
         startElement: {
           borderRadius: theme.shape.radius.full,
-          height: isLarge ? 34 : 30,
-          marginRight: theme.spacing(1.5),
-          width: isLarge ? 45 : 40
+          height: isLarge ? 36 : 31,
+          width: isLarge ? 48 : 40
+        },
+        startElementContainer: {
+          marginRight: theme.spacing(1.5)
         }
       },
       default: {
@@ -102,14 +96,15 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
     return {
       container: { ...baseContainerStyle,
         ...((_variantStyleMap$star = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star === void 0 ? void 0 : _variantStyleMap$star.container),
-        ...(isEndElement ? {
+        ...(selected ? {
           paddingRight: theme.spacing(isLarge ? 2.5 : 2.25)
         } : {})
       },
-      endElement: endElementStyleMap[size],
+      closeButton: closeButtonStyleMap[size],
       label: fontStyleMap[size],
-      startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement
+      startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement,
+      startElementContainer: (_variantStyleMap$star3 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star3 === void 0 ? void 0 : _variantStyleMap$star3.startElementContainer
     };
-  }, [theme, size, startElementVariant]);
+  }, [theme, size, startElementVariant, color, selected]);
 }
 //# sourceMappingURL=useChipStyle.js.map

package/build/module/Chip/useChipStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","createFontStyle","useTheme","typographyOf","useChipStyle","size","startElementVariant","isEndElement","theme","fontStyleMap","small","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","palette","text","strong","large","endElementStyleMap","height","marginLeft","spacing","width","baseContainerStyle","alignItems","backgroundColor","fill","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","paddingRight","paddingVertical","startElement","marginRight","icon","justifyContent","image","default","paddingBottom","paddingHorizontal","paddingTop","endElement","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipSize, ChipStartElementVariant } from './ChipProps';\nimport { typographyOf } from '@fountain-ui/styles';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    endElement?: FountainUiStyle;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    isEndElement: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                // TODO: select typography.\n                // selector: (typography) => typography.caption1.medium,\n                selector: (_) => typographyOf({\n                    fontSize: 12,\n                    lineHeight: 16.8,\n                    fontFamily: 'Pretendard-Medium',\n                    letterSpacing: 0,\n                }),\n                color: theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                // TODO: select typography.\n                // selector: (typography) => typography.body2.medium,\n                selector: (_) => typographyOf({\n                    fontSize: 14,\n                    lineHeight: 21,\n                    fontFamily: 'Pretendard-Medium',\n                    letterSpacing: 0,\n                }),\n                color: theme.palette.text.strong,\n            }),\n        };\n\n        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {\n            small: {\n                height: 14,\n                marginLeft: theme.spacing(2),\n                width: 8.17,\n            },\n            large: {\n                height: 16,\n                marginLeft: theme.spacing(2.5),\n                width: 9,\n            },\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 24 : 22,\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                    width: isLarge ? 24 : 22,\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    alignItems: 'center',\n                    height: isLarge ? 22 : 20,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 22 : 20,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 34 : 30,\n                    marginRight: theme.spacing(1.5),\n                    width: isLarge ? 45 : 40,\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            endElement: endElementStyleMap[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n        };\n    }, [theme, size, startElementVariant]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","createFontStyle","useTheme","useChipStyle","size","startElementVariant","color","selected","theme","fontStyleMap","small","selector","typography","caption1","medium","palette","text","strongInverse","strong","large","body2","closeButtonStyleMap","height","marginLeft","spacing","width","baseContainerStyle","alignItems","backgroundColor","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","paddingHorizontal","paddingTop","closeButton","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButton?: FountainUiStyle;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    color: ChipColor,\n    selected: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n        };\n\n        const closeButtonStyleMap: Record<ChipSize, FountainUiStyle> = {\n            small: {\n                height: 14,\n                marginLeft: theme.spacing(2),\n                width: 8.17,\n            },\n            large: {\n                height: 17,\n                marginLeft: theme.spacing(2.5),\n                width: 9,\n            },\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected ? theme.palette.fill.base\n                : color === 'white'\n                    ? theme.palette.surface.base\n                    : theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 26 : 23,\n                    width: isLarge ? 26 : 23,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    color: selected\n                        ? theme.palette.icon.strongInverse\n                        : theme.palette.icon.strong,\n                    height: isLarge ? 17 : 16,\n                    width: isLarge ? 17 : 16,\n                },\n                startElementContainer: {\n                    alignItems: 'center',\n                    height: isLarge ? 24 : 21,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 24 : 21,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 36 : 31,\n                    width: isLarge ? 48 : 40,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(1.5),\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            closeButton: closeButtonStyleMap[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,\n        };\n    }, [theme, size, startElementVariant, color, selected]);\n}\n"],"mappings":"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"}

package/build/module/Dialog/Dialog.js

@@ -13,7 +13,6 @@ export default function Dialog(props) {
   const {
     animationType = ANIMATION_TYPE.SLIDE,
     children,
-    fullScreen = false,
     hideBackdrop,
     onClose,
     style: styleProp,
@@ -22,7 +21,7 @@ export default function Dialog(props) {
     topElement,
     ...otherProps
   } = props;
-  const styles = useDialogStyle(size, fullScreen);
+  const styles = useDialogStyle(size);
   const {
     height: screenHeight
   } = useWindowDimensions();
@@ -51,7 +50,7 @@ export default function Dialog(props) {
         toValue: 0,
         type: ANIMATION_TYPE.FADE
       }];
-    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+    } else if (animationType === ANIMATION_TYPE.SLIDE) {
       return [{
         toValue: screenHeight,
         type: ANIMATION_TYPE.SLIDE
@@ -67,14 +66,14 @@ export default function Dialog(props) {
       toValue: screenHeight,
       type: ANIMATION_TYPE.SLIDE
     }];
-  }, [animationType, fullScreen, screenHeight]);
+  }, [animationType, screenHeight]);
   const openAnimation = useMemo(() => {
     if (animationType === ANIMATION_TYPE.FADE) {
       return [{
         toValue: 1,
         type: ANIMATION_TYPE.FADE
       }];
-    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+    } else if (animationType === ANIMATION_TYPE.SLIDE) {
       return [{
         toValue: 0,
         type: ANIMATION_TYPE.SLIDE
@@ -90,8 +89,8 @@ export default function Dialog(props) {
       toValue: 0,
       type: ANIMATION_TYPE.SLIDE
     }];
-  }, [animationType, fullScreen]);
-  const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  }, [animationType]);
+  const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;
   const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
   const paperStyle = css([styles.paper, styleProp]);
   return /*#__PURE__*/React.createElement(Modal, _extends({
@@ -110,7 +109,7 @@ export default function Dialog(props) {
       size
     }
   }, topElement ? /*#__PURE__*/React.createElement(Column, {
-    style: fullScreen ? undefined : styles.topElementContainer
+    style: styles.topElementContainer
   }, /*#__PURE__*/React.createElement(Column, {
     style: styles.topElementContent,
     onLayout: handleTopElementLayout

package/build/module/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_OFFSET","Dialog","props","animationType","SLIDE","children","fullScreen","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size, fullScreen);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,QAAzB,QAAyC,OAAzC;AACA,SAA4BC,mBAA5B,QAAuD,cAAvD;AACA,SAASC,GAAT,QAAoB,qBAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,KAAP,IAAgBC,cAAhB,QAAqD,UAArD;AACA,OAAOC,UAAP,MAAuB,eAAvB;AAEA,SAASC,cAAT,QAA+B,iBAA/B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAEA,MAAMC,kBAAkB,GAAG,EAA3B;AAEA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,aAAa,GAAGP,cAAc,CAACQ,KAD7B;IAEFC,QAFE;IAGFC,UAAU,GAAG,KAHX;IAIFC,YAJE;IAKFC,OALE;IAMFC,KAAK,EAAEC,SANL;IAOFC,IAAI,GAAG,QAPL;IAQFC,OARE;IASFC,UATE;IAUF,GAAGC;EAVD,IAWFZ,KAXJ;EAaA,MAAMa,MAAM,GAAGhB,cAAc,CAACY,IAAD,EAAOL,UAAP,CAA7B;EAEA,MAAM;IAAEU,MAAM,EAAEC;EAAV,IAA2BzB,mBAAmB,EAApD;EAEA,MAAM,CAAC0B,gBAAD,EAAmBC,mBAAnB,IAA0C5B,QAAQ,CAAC,CAAD,CAAxD;;EACA,MAAM6B,sBAAsB,GAAIC,KAAD,IAA8B;IACzD,MAAM;MAAEL;IAAF,IAAaK,KAAK,CAACC,WAAN,CAAkBC,MAArC;IACAJ,mBAAmB,CAACH,MAAD,CAAnB;EACH,CAHD;;EAKA,MAAMQ,eAAe,GAAGlC,OAAO,CAAkB,MAAM;IACnD,IAAI4B,gBAAgB,KAAK,CAAzB,EAA4B;MACxB,OAAO,EAAP;IACH;;IAED,OAAO,CAAC;MACJO,OAAO,EAAE,CAACP,gBAAgB,GAAGlB,kBAApB,IAA0C,CAD/C;MAEJ0B,IAAI,EAAE9B,cAAc,CAACQ;IAFjB,CAAD,CAAP;EAIH,CAT8B,EAS5B,CAACc,gBAAD,CAT4B,CAA/B;EAWA,MAAMS,cAAc,GAAGrC,OAAO,CAAkB,MAAM;IAClD,IAAIa,aAAa,KAAKP,cAAc,CAACgC,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJH,OAAO,EAAE,CADL;QAEJC,IAAI,EAAE9B,cAAc,CAACgC;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAIzB,aAAa,KAAKP,cAAc,CAACQ,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACImB,OAAO,EAAER,YADb;QAEIS,IAAI,EAAE9B,cAAc,CAACQ;MAFzB,CADG,EAKH;QACIyB,QAAQ,EAAE,GADd;QAEIJ,OAAO,EAAE,CAFb;QAGIC,IAAI,EAAE9B,cAAc,CAACgC;MAHzB,CALG,CAAP;IAWH;;IAED,OAAO,CAAC;MACJC,QAAQ,EAAE,GADN;MAEJJ,OAAO,EAAER,YAFL;MAGJS,IAAI,EAAE9B,cAAc,CAACQ;IAHjB,CAAD,CAAP;EAKH,CAzB6B,EAyB3B,CAACD,aAAD,EAAgBG,UAAhB,EAA4BW,YAA5B,CAzB2B,CAA9B;EA2BA,MAAMa,aAAa,GAAGxC,OAAO,CAAkB,MAAM;IACjD,IAAIa,aAAa,KAAKP,cAAc,CAACgC,IAArC,EAA2C;MACvC,OAAO,CAAC;QACJH,OAAO,EAAE,CADL;QAEJC,IAAI,EAAE9B,cAAc,CAACgC;MAFjB,CAAD,CAAP;IAIH,CALD,MAKO,IAAIzB,aAAa,KAAKP,cAAc,CAACQ,KAAjC,IAA0C,CAACE,UAA/C,EAA2D;MAC9D,OAAO,CACH;QACImB,OAAO,EAAE,CADb;QAEIC,IAAI,EAAE9B,cAAc,CAACQ;MAFzB,CADG,EAKH;QACI2B,KAAK,EAAE,EADX;QAEIF,QAAQ,EAAE,GAFd;QAGIJ,OAAO,EAAE,CAHb;QAIIC,IAAI,EAAE9B,cAAc,CAACgC;MAJzB,CALG,CAAP;IAYH;;IAED,OAAO,CAAC;MACJH,OAAO,EAAE,CADL;MAEJC,IAAI,EAAE9B,cAAc,CAACQ;IAFjB,CAAD,CAAP;EAIH,CAzB4B,EAyB1B,CAACD,aAAD,EAAgBG,UAAhB,CAzB0B,CAA7B;EA2BA,MAAM0B,cAAc,GAAG7B,aAAa,KAAKP,cAAc,CAACQ,KAAjC,IAA0CE,UAA1C,GAAuD,CAAvD,GAA2D2B,SAAlF;EAEA,MAAMC,iBAAiB,GAAG/B,aAAa,KAAKP,cAAc,CAACgC,IAAjC,GAAwC,CAAxC,GAA4CK,SAAtE;EAEA,MAAME,UAAU,GAAG1C,GAAG,CAAC,CACnBsB,MAAM,CAACqB,KADY,EAEnB1B,SAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,KAAD;IACI,cAAc,EAAEK,MAAM,CAACsB,SAD3B;IAEI,cAAc,EAAEV,cAFpB;IAGI,YAAY,EAAEpB,YAAY,IAAIJ,aAAa,KAAKP,cAAc,CAACgC,IAHnE;IAII,cAAc,EAAEI,cAJpB;IAKI,iBAAiB,EAAEE,iBALvB;IAMI,OAAO,EAAE1B,OANb;IAOI,aAAa,EAAEsB,aAPnB;IAQI,eAAe,EAAEN,eARrB;IASI,OAAO,EAAEZ,OATb;IAUI,KAAK,EAAEG,MAAM,CAACuB;EAVlB,GAWQxB,UAXR,gBAaI,oBAAC,cAAD;IAAgB,KAAK,EAAE;MAAEH;IAAF;EAAvB,GACKE,UAAU,gBACP,oBAAC,MAAD;IAAQ,KAAK,EAAEP,UAAU,GAAG2B,SAAH,GAAelB,MAAM,CAACwB;EAA/C,gBACI,oBAAC,MAAD;IACI,KAAK,EAAExB,MAAM,CAACyB,iBADlB;IAEI,QAAQ,EAAEpB;EAFd,GAIKP,UAJL,CADJ,CADO,GASP,IAVR,eAYI,oBAAC,UAAD;IACI,OAAO,EAAE,GADb;IAEI,KAAK,EAAEsB;EAFX,GAIK9B,QAJL,CAZJ,CAbJ,CADJ;AAmCH;AAAA"}
+{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/module/Dialog/DialogProps.js

@@ -1,2 +1,2 @@
-export const dialogSizes = ['small', 'medium', 'large'];
+export const dialogSizes = ['small', 'medium', 'large', 'full'];
 //# sourceMappingURL=DialogProps.js.map

package/build/module/Dialog/DialogProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["dialogSizes"],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\n\nexport const dialogSizes = ['small', 'medium', 'large'] as const;\nexport type DialogSize = typeof dialogSizes[number];\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     * @default 'slide'\n     */\n    animationType?: ANIMATION_TYPE;\n\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the dialog is full-screen.\n     * @default false\n     */\n    fullScreen?: boolean;\n\n    /**\n     * Determines the minWidth of the Dialog.\n     * @default 'medium'\n     */\n    size?: DialogSize;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,CAApB"}
+{"version":3,"names":["dialogSizes"],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\n\nexport const dialogSizes = ['small', 'medium', 'large', 'full'] as const;\nexport type DialogSize = typeof dialogSizes[number];\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     * @default 'slide'\n     */\n    animationType?: ANIMATION_TYPE;\n\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Determines the minWidth of the Dialog.\n     * @default 'medium'\n     */\n    size?: DialogSize;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,MAA7B,CAApB"}

package/build/module/Dialog/index.js

@@ -1,4 +1,5 @@
 export { default } from './Dialog';
+export { dialogSizes } from './DialogProps';
 export { DialogProvider, useDialogContext } from './DialogContext';
 export { default as useDialogSectionStyle } from './useDialogSectionStyle';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default","DialogProvider","useDialogContext","useDialogSectionStyle"],"sources":["index.ts"],"sourcesContent":["export { default } from './Dialog';\nexport type { default as DialogProps } from './DialogProps';\nexport { DialogProvider, useDialogContext } from './DialogContext';\nexport { default as useDialogSectionStyle } from './useDialogSectionStyle';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,UAAxB;AAEA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,iBAAjD;AACA,SAASF,OAAO,IAAIG,qBAApB,QAAiD,yBAAjD"}
+{"version":3,"names":["default","dialogSizes","DialogProvider","useDialogContext","useDialogSectionStyle"],"sources":["index.ts"],"sourcesContent":["export { default } from './Dialog';\nexport type { default as DialogProps } from './DialogProps';\nexport { dialogSizes } from './DialogProps';\nexport { DialogProvider, useDialogContext } from './DialogContext';\nexport { default as useDialogSectionStyle } from './useDialogSectionStyle';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,UAAxB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,iBAAjD;AACA,SAASH,OAAO,IAAII,qBAApB,QAAiD,yBAAjD"}

package/build/module/Dialog/useDialogSectionStyle.js

@@ -13,15 +13,15 @@ export default function useDialogSectionStyle() {
   return useMemo(() => {
     const sizePaddingHorizontalMap = {
       small: {
-        paddingHorizontal: theme.spacing(6)
+        paddingHorizontal: 24
       },
       medium: {
-        // TODO: need to refactor breakpoints.
-        paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6)
+        paddingHorizontal: windowWidth >= 448 ? 32 : 24
       },
       large: {
-        paddingHorizontal: theme.spacing(8)
-      }
+        paddingHorizontal: 32
+      },
+      full: {}
     };
     return sizePaddingHorizontalMap[size];
   }, [size, theme, windowWidth]);

package/build/module/Dialog/useDialogSectionStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogContext","useDialogSectionStyle","size","width","windowWidth","theme","sizePaddingHorizontalMap","small","paddingHorizontal","spacing","medium","large"],"sources":["useDialogSectionStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useDialogContext } from './DialogContext';\nimport type { DialogSize } from './DialogProps';\n\nexport default function useDialogSectionStyle() {\n    const { size } = useDialogContext();\n\n    const { width: windowWidth } = useWindowDimensions();\n\n    const theme = useTheme();\n\n    return useMemo<FountainUiStyle>(() => {\n        const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                paddingHorizontal: theme.spacing(6),\n            },\n            medium: {\n                // TODO: need to refactor breakpoints.\n                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),\n            },\n            large: {\n                paddingHorizontal: theme.spacing(8),\n            },\n        };\n\n        return sizePaddingHorizontalMap[size];\n    }, [size, theme, windowWidth]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,gBAAT,QAAiC,iBAAjC;AAGA,eAAe,SAASC,qBAAT,GAAiC;EAC5C,MAAM;IAAEC;EAAF,IAAWF,gBAAgB,EAAjC;EAEA,MAAM;IAAEG,KAAK,EAAEC;EAAT,IAAyBN,mBAAmB,EAAlD;EAEA,MAAMO,KAAK,GAAGN,QAAQ,EAAtB;EAEA,OAAOF,OAAO,CAAkB,MAAM;IAClC,MAAMS,wBAA6D,GAAG;MAClEC,KAAK,EAAE;QACHC,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;MADhB,CAD2D;MAIlEC,MAAM,EAAE;QACJ;QACAF,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAcL,WAAW,IAAI,GAAf,GAAqB,CAArB,GAAyB,CAAvC;MAFf,CAJ0D;MAQlEO,KAAK,EAAE;QACHH,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;MADhB;IAR2D,CAAtE;IAaA,OAAOH,wBAAwB,CAACJ,IAAD,CAA/B;EACH,CAfa,EAeX,CAACA,IAAD,EAAOG,KAAP,EAAcD,WAAd,CAfW,CAAd;AAgBH"}
+{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogContext","useDialogSectionStyle","size","width","windowWidth","theme","sizePaddingHorizontalMap","small","paddingHorizontal","medium","large","full"],"sources":["useDialogSectionStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useDialogContext } from './DialogContext';\nimport type { DialogSize } from './DialogProps';\n\nexport default function useDialogSectionStyle() {\n    const { size } = useDialogContext();\n\n    const { width: windowWidth } = useWindowDimensions();\n\n    const theme = useTheme();\n\n    return useMemo<FountainUiStyle>(() => {\n        const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                paddingHorizontal: 24,\n            },\n            medium: {\n                paddingHorizontal: windowWidth >= 448 ? 32 : 24,\n            },\n            large: {\n                paddingHorizontal: 32,\n            },\n            full: {},\n        };\n\n        return sizePaddingHorizontalMap[size];\n    }, [size, theme, windowWidth]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,gBAAT,QAAiC,iBAAjC;AAGA,eAAe,SAASC,qBAAT,GAAiC;EAC5C,MAAM;IAAEC;EAAF,IAAWF,gBAAgB,EAAjC;EAEA,MAAM;IAAEG,KAAK,EAAEC;EAAT,IAAyBN,mBAAmB,EAAlD;EAEA,MAAMO,KAAK,GAAGN,QAAQ,EAAtB;EAEA,OAAOF,OAAO,CAAkB,MAAM;IAClC,MAAMS,wBAA6D,GAAG;MAClEC,KAAK,EAAE;QACHC,iBAAiB,EAAE;MADhB,CAD2D;MAIlEC,MAAM,EAAE;QACJD,iBAAiB,EAAEJ,WAAW,IAAI,GAAf,GAAqB,EAArB,GAA0B;MADzC,CAJ0D;MAOlEM,KAAK,EAAE;QACHF,iBAAiB,EAAE;MADhB,CAP2D;MAUlEG,IAAI,EAAE;IAV4D,CAAtE;IAaA,OAAOL,wBAAwB,CAACJ,IAAD,CAA/B;EACH,CAfa,EAeX,CAACA,IAAD,EAAOG,KAAP,EAAcD,WAAd,CAfW,CAAd;AAgBH"}