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

package/build/commonjs/Chip/Chip.js

@@ -38,7 +38,8 @@ function Chip(props) {
   } = props;
   const {
     container: containerStyle,
-    closeButton: closeButtonStyle,
+    closeButtonContainer: closeButtonContainerStyle,
+    closeIconSize,
     label: labelStyle,
     startElement: startElementStyle,
     startElementContainer: startElementContainerStyle
@@ -59,9 +60,12 @@ function Chip(props) {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), selected ? /*#__PURE__*/_react.default.createElement(_internal.Close, {
+  }), selected ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: closeButtonContainerStyle
+  }, /*#__PURE__*/_react.default.createElement(_internal.ChipClose, {
     color: 'baseInverse',
-    style: closeButtonStyle
-  }) : null);
+    height: closeIconSize === null || closeIconSize === void 0 ? void 0 : closeIconSize.height,
+    width: closeIconSize === null || closeIconSize === void 0 ? void 0 : closeIconSize.width
+  })) : null);
 }
 //# sourceMappingURL=Chip.js.map

package/build/commonjs/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","closeButton","closeButtonStyle","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","useChipStyle","chipStyle","css","cloneElementSafely"],"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;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,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,IAMF,IAAAC,qBAAA,EAAahB,IAAb,EAAmBG,mBAAnB,EAAwCP,KAAxC,EAA+CG,QAA/C,CANJ;EAQA,MAAMkB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBV,cADkB,EAElBH,SAFkB,CAAJ,CAAlB;;EAKA,MAAMJ,YAAY,gBACd,6BAAC,iBAAD;IAAM,KAAK,EAAEc;EAAb,GACK,IAAAI,yBAAA,EAAmBjB,gBAAnB,EAAqC;IAAEE,KAAK,EAAES;EAAT,CAArC,CADL,CADJ;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAE,CAACf,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEmB;EAHX,GAIQX,UAJR,GAMKL,YANL,eAQI,6BAAC,iBAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEe;EAHX,EARJ,EAcKb,QAAQ,gBACL,6BAAC,eAAD;IACI,KAAK,EAAE,aADX;IAEI,KAAK,EAAEW;EAFX,EADK,GAKL,IAnBR,CADJ;AAuBH"}
+{"version":3,"names":["Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","closeButtonContainer","closeButtonContainerStyle","closeIconSize","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","useChipStyle","chipStyle","css","cloneElementSafely","height","width"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { ChipClose } 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        closeButtonContainer: closeButtonContainerStyle,\n        closeIconSize,\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                <View style={closeButtonContainerStyle}>\n                    <ChipClose\n                        color={'baseInverse'}\n                        height={closeIconSize?.height}\n                        width={closeIconSize?.width}\n                    />\n                </View>\n            ) : null}\n        </ButtonBase>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,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,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFZ,YAAY,EAAEa,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOF,IAAAC,qBAAA,EAAajB,IAAb,EAAmBG,mBAAnB,EAAwCP,KAAxC,EAA+CG,QAA/C,CAPJ;EASA,MAAMmB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBX,cADkB,EAElBH,SAFkB,CAAJ,CAAlB;;EAKA,MAAMJ,YAAY,gBACd,6BAAC,iBAAD;IAAM,KAAK,EAAEe;EAAb,GACK,IAAAI,yBAAA,EAAmBlB,gBAAnB,EAAqC;IAAEE,KAAK,EAAEU;EAAT,CAArC,CADL,CADJ;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAE,CAAChB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEoB;EAHX,GAIQZ,UAJR,GAMKL,YANL,eAQI,6BAAC,iBAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEgB;EAHX,EARJ,EAcKd,QAAQ,gBACL,6BAAC,iBAAD;IAAM,KAAK,EAAEW;EAAb,gBACI,6BAAC,mBAAD;IACI,KAAK,EAAE,aADX;IAEI,MAAM,EAAEC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEU,MAF3B;IAGI,KAAK,EAAEV,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEW;EAH1B,EADJ,CADK,GAQL,IAtBR,CADJ;AA0BH"}

package/build/commonjs/Chip/useChipStyle.js

@@ -9,7 +9,27 @@ var _react = require("react");
 
 var _styles = require("../styles");
 
-// TODO: need to refactoring...
+const closeButtonContainerStyleMap = {
+  small: {
+    marginLeft: 8,
+    paddingTop: 1
+  },
+  large: {
+    marginLeft: 10,
+    paddingTop: 1
+  }
+};
+const closeIconSize = {
+  small: {
+    height: 14,
+    width: 8.17
+  },
+  large: {
+    height: 16,
+    width: 9
+  }
+}; // TODO: need to refactoring...
+
 function useChipStyle(size, startElementVariant, color, selected) {
   const theme = (0, _styles.useTheme)();
   return (0, _react.useMemo)(() => {
@@ -25,18 +45,6 @@ function useChipStyle(size, startElementVariant, color, selected) {
         color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
       })
     };
-    const closeButtonStyleMap = {
-      small: {
-        height: 14,
-        marginLeft: theme.spacing(2),
-        width: 8.17
-      },
-      large: {
-        height: 17,
-        marginLeft: theme.spacing(2.5),
-        width: 9
-      }
-    };
     const baseContainerStyle = {
       alignItems: 'center',
       backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
@@ -97,7 +105,8 @@ function useChipStyle(size, startElementVariant, color, selected) {
       default: {
         container: {
           paddingBottom: theme.spacing(1.75),
-          paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+          paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+          paddingRight: theme.spacing(isLarge ? 3.5 : 3),
           paddingTop: theme.spacing(1.5)
         }
       }
@@ -109,7 +118,8 @@ function useChipStyle(size, startElementVariant, color, selected) {
           paddingRight: theme.spacing(isLarge ? 2.5 : 2.25)
         } : {})
       },
-      closeButton: closeButtonStyleMap[size],
+      closeButtonContainer: closeButtonContainerStyleMap[size],
+      closeIconSize: closeIconSize[size],
       label: fontStyleMap[size],
       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

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

@@ -1 +1 @@
-{"version":3,"names":["useChipStyle","size","startElementVariant","color","selected","theme","useTheme","useMemo","fontStyleMap","small","createFontStyle","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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"}
+{"version":3,"names":["closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","theme","useTheme","useMemo","fontStyleMap","createFontStyle","selector","typography","caption1","medium","palette","text","strongInverse","strong","body2","baseContainerStyle","alignItems","backgroundColor","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\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 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                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: 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            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[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/commonjs/Dialog/useDialogStyle.js

@@ -40,7 +40,7 @@ function useDialogStyle(size) {
       },
       full: {
         paddingBottom: bottomSafeAreaInset,
-        paddingTop: topSafeAreaInset
+        paddingTop: Math.max(0, topSafeAreaInset - 3)
       }
     };
     const containerPaddingVertical = 24;

package/build/commonjs/Dialog/useDialogStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDialogStyle","size","theme","useTheme","height","windowHeight","width","windowWidth","useWindowDimensions","bottom","bottomSafeAreaInset","top","topSafeAreaInset","useSafeAreaInsets","useMemo","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","paddingBottom","paddingTop","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize): DialogStyles {\n    const theme = useTheme();\n\n    const {\n        height: windowHeight,\n        width: windowWidth,\n    } = useWindowDimensions();\n\n    const {\n        bottom: bottomSafeAreaInset,\n        top: topSafeAreaInset,\n    } = useSafeAreaInsets();\n\n    return useMemo(() => {\n        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                maxWidth: 260,\n            },\n            medium: {\n                maxWidth: 400,\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                width: 512,\n            },\n            full: {\n                paddingBottom: bottomSafeAreaInset,\n                paddingTop: topSafeAreaInset,\n            },\n        };\n\n        const containerPaddingVertical = 24;\n        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n        const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n        const isFullScreen = size === 'full';\n\n        return {\n            root: {\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: theme.zIndex.dialog,\n            },\n            container: isFullScreen ? {\n                height: '100%',\n                width: '100%',\n            } : {\n                alignItems: 'center',\n                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,\n                paddingVertical: containerPaddingVertical,\n                width: '100%',\n            },\n            paper: isFullScreen ? {\n                backgroundColor: theme.palette.surface.base,\n                height: '100%',\n                width: '100%',\n                ...sizeStyleMap[size],\n            } : {\n                backgroundColor: theme.palette.surface.base,\n                borderRadius: theme.shape.radius.xl,\n                maxHeight: dialogMaxHeight,\n                overflow: 'hidden',\n                width: '100%',\n                ...sizeStyleMap[size],\n            },\n            topElementContainer: {\n                maxWidth: dialogMaxWidth,\n                width: '100%',\n            },\n            topElementContent: {\n                position: 'absolute',\n                bottom: 0,\n                width: '100%',\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAYe,SAASA,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IACFC,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGF,IAAAC,gCAAA,GAHJ;EAKA,MAAM;IACFC,MAAM,EAAEC,mBADN;IAEFC,GAAG,EAAEC;EAFH,IAGF,IAAAC,6CAAA,GAHJ;EAKA,OAAO,IAAAC,cAAA,EAAQ,MAAM;IAAA;;IACjB,MAAMC,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHd,KAAK,EAAE;MAHJ,CAP+C;MAYtDe,IAAI,EAAE;QACFC,aAAa,EAAEZ,mBADb;QAEFa,UAAU,EAAEX;MAFV;IAZgD,CAA1D;IAkBA,MAAMY,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGpB,YAAY,GAAGmB,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGX,YAAY,CAACd,IAAD,CAAf,uDAAG,mBAAoBgB,QAA3C;IAEA,MAAMU,YAAY,GAAG1B,IAAI,KAAK,MAA9B;IAEA,OAAO;MACH2B,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAE7B,KAAK,CAAC6B,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBvB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAuB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAE3B,WAAW,GAAGL,KAAK,CAACiC,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAlB,KAAK,EAAE;MAJP,CATD;MAeHiC,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAEtC,KAAK,CAACuC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBvC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE,MAHW;QAIlB,GAAGS,YAAY,CAACd,IAAD;MAJG,CAAH,GAKf;QACAuC,eAAe,EAAEtC,KAAK,CAACuC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAE1C,KAAK,CAAC2C,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKA3C,KAAK,EAAE,MALP;QAMA,GAAGS,YAAY,CAACd,IAAD;MANf,CApBD;MA4BHiD,mBAAmB,EAAE;QACjBjC,QAAQ,EAAES,cADO;QAEjBpB,KAAK,EAAE;MAFU,CA5BlB;MAgCH6C,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEf3C,MAAM,EAAE,CAFO;QAGfH,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CA/DM,EA+DJ,CAACJ,KAAD,EAAQG,YAAR,EAAsBE,WAAtB,EAAmCN,IAAnC,EAAyCS,mBAAzC,EAA8DE,gBAA9D,CA/DI,CAAP;AAgEH"}
+{"version":3,"names":["useDialogStyle","size","theme","useTheme","height","windowHeight","width","windowWidth","useWindowDimensions","bottom","bottomSafeAreaInset","top","topSafeAreaInset","useSafeAreaInsets","useMemo","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","paddingBottom","paddingTop","Math","max","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize): DialogStyles {\n    const theme = useTheme();\n\n    const {\n        height: windowHeight,\n        width: windowWidth,\n    } = useWindowDimensions();\n\n    const {\n        bottom: bottomSafeAreaInset,\n        top: topSafeAreaInset,\n    } = useSafeAreaInsets();\n\n    return useMemo(() => {\n        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                maxWidth: 260,\n            },\n            medium: {\n                maxWidth: 400,\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                width: 512,\n            },\n            full: {\n                paddingBottom: bottomSafeAreaInset,\n                paddingTop: Math.max(0, topSafeAreaInset - 3),\n            },\n        };\n\n        const containerPaddingVertical = 24;\n        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n        const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n        const isFullScreen = size === 'full';\n\n        return {\n            root: {\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: theme.zIndex.dialog,\n            },\n            container: isFullScreen ? {\n                height: '100%',\n                width: '100%',\n            } : {\n                alignItems: 'center',\n                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,\n                paddingVertical: containerPaddingVertical,\n                width: '100%',\n            },\n            paper: isFullScreen ? {\n                backgroundColor: theme.palette.surface.base,\n                height: '100%',\n                width: '100%',\n                ...sizeStyleMap[size],\n            } : {\n                backgroundColor: theme.palette.surface.base,\n                borderRadius: theme.shape.radius.xl,\n                maxHeight: dialogMaxHeight,\n                overflow: 'hidden',\n                width: '100%',\n                ...sizeStyleMap[size],\n            },\n            topElementContainer: {\n                maxWidth: dialogMaxWidth,\n                width: '100%',\n            },\n            topElementContent: {\n                position: 'absolute',\n                bottom: 0,\n                width: '100%',\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAYe,SAASA,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IACFC,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGF,IAAAC,gCAAA,GAHJ;EAKA,MAAM;IACFC,MAAM,EAAEC,mBADN;IAEFC,GAAG,EAAEC;EAFH,IAGF,IAAAC,6CAAA,GAHJ;EAKA,OAAO,IAAAC,cAAA,EAAQ,MAAM;IAAA;;IACjB,MAAMC,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHd,KAAK,EAAE;MAHJ,CAP+C;MAYtDe,IAAI,EAAE;QACFC,aAAa,EAAEZ,mBADb;QAEFa,UAAU,EAAEC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYb,gBAAgB,GAAG,CAA/B;MAFV;IAZgD,CAA1D;IAkBA,MAAMc,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGtB,YAAY,GAAGqB,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGb,YAAY,CAACd,IAAD,CAAf,uDAAG,mBAAoBgB,QAA3C;IAEA,MAAMY,YAAY,GAAG5B,IAAI,KAAK,MAA9B;IAEA,OAAO;MACH6B,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAE/B,KAAK,CAAC+B,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBzB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAyB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAE7B,WAAW,GAAGL,KAAK,CAACmC,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIApB,KAAK,EAAE;MAJP,CATD;MAeHmC,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAExC,KAAK,CAACyC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBzC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE,MAHW;QAIlB,GAAGS,YAAY,CAACd,IAAD;MAJG,CAAH,GAKf;QACAyC,eAAe,EAAExC,KAAK,CAACyC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAE5C,KAAK,CAAC6C,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKA7C,KAAK,EAAE,MALP;QAMA,GAAGS,YAAY,CAACd,IAAD;MANf,CApBD;MA4BHmD,mBAAmB,EAAE;QACjBnC,QAAQ,EAAEW,cADO;QAEjBtB,KAAK,EAAE;MAFU,CA5BlB;MAgCH+C,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEf7C,MAAM,EAAE,CAFO;QAGfH,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CA/DM,EA+DJ,CAACJ,KAAD,EAAQG,YAAR,EAAsBE,WAAtB,EAAmCN,IAAnC,EAAyCS,mBAAzC,EAA8DE,gBAA9D,CA/DI,CAAP;AAgEH"}

package/build/commonjs/internal/icons/ChipClose.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNativeSvg = require("react-native-svg");
+
+var _utils = require("../../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z"
+}), 'ChipClose', '0 0 9 15');
+
+exports.default = _default;
+//# sourceMappingURL=ChipClose.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createSvgIcon"],"sources":["ChipClose.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z\"\n    />,\n    'ChipClose',\n    '0 0 9 15',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADW,EAMX,WANW,EAOX,UAPW,C"}

package/build/commonjs/internal/icons/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "ChevronRight", {
     return _ChevronRight.default;
   }
 });
+Object.defineProperty(exports, "ChipClose", {
+  enumerable: true,
+  get: function () {
+    return _ChipClose.default;
+  }
+});
 Object.defineProperty(exports, "CircularProgress", {
   enumerable: true,
   get: function () {
@@ -136,6 +142,8 @@ var _ChevronLeft = _interopRequireDefault(require("./ChevronLeft"));
 
 var _ChevronRight = _interopRequireDefault(require("./ChevronRight"));
 
+var _ChipClose = _interopRequireDefault(require("./ChipClose"));
+
 var _CircularProgress = _interopRequireDefault(require("./CircularProgress"));
 
 var _Clear = _interopRequireDefault(require("./Clear"));

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as ChipClose } from './ChipClose';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}

package/build/module/Chip/Chip.js

@@ -3,7 +3,7 @@ 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 { ChipClose } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
 import useChipStyle from './useChipStyle';
@@ -22,7 +22,8 @@ export default function Chip(props) {
   } = props;
   const {
     container: containerStyle,
-    closeButton: closeButtonStyle,
+    closeButtonContainer: closeButtonContainerStyle,
+    closeIconSize,
     label: labelStyle,
     startElement: startElementStyle,
     startElementContainer: startElementContainerStyle
@@ -41,9 +42,12 @@ export default function Chip(props) {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), selected ? /*#__PURE__*/React.createElement(Close, {
+  }), selected ? /*#__PURE__*/React.createElement(View, {
+    style: closeButtonContainerStyle
+  }, /*#__PURE__*/React.createElement(ChipClose, {
     color: 'baseInverse',
-    style: closeButtonStyle
-  }) : null);
+    height: closeIconSize === null || closeIconSize === void 0 ? void 0 : closeIconSize.height,
+    width: closeIconSize === null || closeIconSize === void 0 ? void 0 : closeIconSize.width
+  })) : null);
 }
 //# sourceMappingURL=Chip.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","Text","View","ButtonBase","ChipClose","css","cloneElementSafely","useChipStyle","Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","otherProps","container","containerStyle","closeButtonContainer","closeButtonContainerStyle","closeIconSize","label","labelStyle","startElementStyle","startElementContainer","startElementContainerStyle","chipStyle","height","width"],"sources":["Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { ChipClose } 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        closeButtonContainer: closeButtonContainerStyle,\n        closeIconSize,\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                <View style={closeButtonContainerStyle}>\n                    <ChipClose\n                        color={'baseInverse'}\n                        height={closeIconSize?.height}\n                        width={closeIconSize?.width}\n                    />\n                </View>\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,SAAT,QAA0B,aAA1B;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,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFZ,YAAY,EAAEa,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOFxB,YAAY,CAACQ,IAAD,EAAOG,mBAAP,EAA4BP,KAA5B,EAAmCG,QAAnC,CAPhB;EASA,MAAMkB,SAAS,GAAG3B,GAAG,CAAC,CAClBkB,cADkB,EAElBH,SAFkB,CAAD,CAArB;EAKA,MAAMJ,YAAY,gBACd,oBAAC,IAAD;IAAM,KAAK,EAAEe;EAAb,GACKzB,kBAAkB,CAACW,gBAAD,EAAmB;IAAEE,KAAK,EAAEU;EAAT,CAAnB,CADvB,CADJ;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAE,CAAChB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEmB;EAHX,GAIQX,UAJR,GAMKL,YANL,eAQI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEgB;EAHX,EARJ,EAcKd,QAAQ,gBACL,oBAAC,IAAD;IAAM,KAAK,EAAEW;EAAb,gBACI,oBAAC,SAAD;IACI,KAAK,EAAE,aADX;IAEI,MAAM,EAAEC,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEO,MAF3B;IAGI,KAAK,EAAEP,aAAF,aAAEA,aAAF,uBAAEA,aAAa,CAAEQ;EAH1B,EADJ,CADK,GAQL,IAtBR,CADJ;AA0BH"}

package/build/module/Chip/useChipStyle.js

@@ -1,6 +1,26 @@
 import { useMemo } from 'react';
 import { createFontStyle, useTheme } from '../styles';
-// TODO: need to refactoring...
+const closeButtonContainerStyleMap = {
+  small: {
+    marginLeft: 8,
+    paddingTop: 1
+  },
+  large: {
+    marginLeft: 10,
+    paddingTop: 1
+  }
+};
+const closeIconSize = {
+  small: {
+    height: 14,
+    width: 8.17
+  },
+  large: {
+    height: 16,
+    width: 9
+  }
+}; // TODO: need to refactoring...
+
 export default function useChipStyle(size, startElementVariant, color, selected) {
   const theme = useTheme();
   return useMemo(() => {
@@ -16,18 +36,6 @@ export default function useChipStyle(size, startElementVariant, color, selected)
         color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
       })
     };
-    const closeButtonStyleMap = {
-      small: {
-        height: 14,
-        marginLeft: theme.spacing(2),
-        width: 8.17
-      },
-      large: {
-        height: 17,
-        marginLeft: theme.spacing(2.5),
-        width: 9
-      }
-    };
     const baseContainerStyle = {
       alignItems: 'center',
       backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
@@ -88,7 +96,8 @@ export default function useChipStyle(size, startElementVariant, color, selected)
       default: {
         container: {
           paddingBottom: theme.spacing(1.75),
-          paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+          paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+          paddingRight: theme.spacing(isLarge ? 3.5 : 3),
           paddingTop: theme.spacing(1.5)
         }
       }
@@ -100,7 +109,8 @@ export default function useChipStyle(size, startElementVariant, color, selected)
           paddingRight: theme.spacing(isLarge ? 2.5 : 2.25)
         } : {})
       },
-      closeButton: closeButtonStyleMap[size],
+      closeButtonContainer: closeButtonContainerStyleMap[size],
+      closeIconSize: closeIconSize[size],
       label: fontStyleMap[size],
       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

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"names":["useMemo","createFontStyle","useTheme","closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","theme","fontStyleMap","selector","typography","caption1","medium","palette","text","strongInverse","strong","body2","baseContainerStyle","alignItems","backgroundColor","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\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 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                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: 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            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[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/useDialogStyle.js

@@ -29,7 +29,7 @@ export default function useDialogStyle(size) {
       },
       full: {
         paddingBottom: bottomSafeAreaInset,
-        paddingTop: topSafeAreaInset
+        paddingTop: Math.max(0, topSafeAreaInset - 3)
       }
     };
     const containerPaddingVertical = 24;

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useWindowDimensions","useSafeAreaInsets","useTheme","useDialogStyle","size","theme","height","windowHeight","width","windowWidth","bottom","bottomSafeAreaInset","top","topSafeAreaInset","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","paddingBottom","paddingTop","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize): DialogStyles {\n    const theme = useTheme();\n\n    const {\n        height: windowHeight,\n        width: windowWidth,\n    } = useWindowDimensions();\n\n    const {\n        bottom: bottomSafeAreaInset,\n        top: topSafeAreaInset,\n    } = useSafeAreaInsets();\n\n    return useMemo(() => {\n        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                maxWidth: 260,\n            },\n            medium: {\n                maxWidth: 400,\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                width: 512,\n            },\n            full: {\n                paddingBottom: bottomSafeAreaInset,\n                paddingTop: topSafeAreaInset,\n            },\n        };\n\n        const containerPaddingVertical = 24;\n        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n        const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n        const isFullScreen = size === 'full';\n\n        return {\n            root: {\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: theme.zIndex.dialog,\n            },\n            container: isFullScreen ? {\n                height: '100%',\n                width: '100%',\n            } : {\n                alignItems: 'center',\n                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,\n                paddingVertical: containerPaddingVertical,\n                width: '100%',\n            },\n            paper: isFullScreen ? {\n                backgroundColor: theme.palette.surface.base,\n                height: '100%',\n                width: '100%',\n                ...sizeStyleMap[size],\n            } : {\n                backgroundColor: theme.palette.surface.base,\n                borderRadius: theme.shape.radius.xl,\n                maxHeight: dialogMaxHeight,\n                overflow: 'hidden',\n                width: '100%',\n                ...sizeStyleMap[size],\n            },\n            topElementContainer: {\n                maxWidth: dialogMaxWidth,\n                width: '100%',\n            },\n            topElementContent: {\n                position: 'absolute',\n                bottom: 0,\n                width: '100%',\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAYA,eAAe,SAASC,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAM;IACFI,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGFT,mBAAmB,EAHvB;EAKA,MAAM;IACFU,MAAM,EAAEC,mBADN;IAEFC,GAAG,EAAEC;EAFH,IAGFZ,iBAAiB,EAHrB;EAKA,OAAOF,OAAO,CAAC,MAAM;IAAA;;IACjB,MAAMe,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHX,KAAK,EAAE;MAHJ,CAP+C;MAYtDY,IAAI,EAAE;QACFC,aAAa,EAAEV,mBADb;QAEFW,UAAU,EAAET;MAFV;IAZgD,CAA1D;IAkBA,MAAMU,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGjB,YAAY,GAAGgB,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGX,YAAY,CAACV,IAAD,CAAf,uDAAG,mBAAoBY,QAA3C;IAEA,MAAMU,YAAY,GAAGtB,IAAI,KAAK,MAA9B;IAEA,OAAO;MACHuB,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAEzB,KAAK,CAACyB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBpB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAoB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAExB,WAAW,GAAGJ,KAAK,CAAC6B,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAf,KAAK,EAAE;MAJP,CATD;MAeH8B,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAElC,KAAK,CAACmC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBpC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE,MAHW;QAIlB,GAAGM,YAAY,CAACV,IAAD;MAJG,CAAH,GAKf;QACAmC,eAAe,EAAElC,KAAK,CAACmC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAEtC,KAAK,CAACuC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKAxC,KAAK,EAAE,MALP;QAMA,GAAGM,YAAY,CAACV,IAAD;MANf,CApBD;MA4BH6C,mBAAmB,EAAE;QACjBjC,QAAQ,EAAES,cADO;QAEjBjB,KAAK,EAAE;MAFU,CA5BlB;MAgCH0C,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfzC,MAAM,EAAE,CAFO;QAGfF,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CA/Da,EA+DX,CAACH,KAAD,EAAQE,YAAR,EAAsBE,WAAtB,EAAmCL,IAAnC,EAAyCO,mBAAzC,EAA8DE,gBAA9D,CA/DW,CAAd;AAgEH"}
+{"version":3,"names":["useMemo","useWindowDimensions","useSafeAreaInsets","useTheme","useDialogStyle","size","theme","height","windowHeight","width","windowWidth","bottom","bottomSafeAreaInset","top","topSafeAreaInset","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","paddingBottom","paddingTop","Math","max","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize): DialogStyles {\n    const theme = useTheme();\n\n    const {\n        height: windowHeight,\n        width: windowWidth,\n    } = useWindowDimensions();\n\n    const {\n        bottom: bottomSafeAreaInset,\n        top: topSafeAreaInset,\n    } = useSafeAreaInsets();\n\n    return useMemo(() => {\n        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                maxWidth: 260,\n            },\n            medium: {\n                maxWidth: 400,\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                width: 512,\n            },\n            full: {\n                paddingBottom: bottomSafeAreaInset,\n                paddingTop: Math.max(0, topSafeAreaInset - 3),\n            },\n        };\n\n        const containerPaddingVertical = 24;\n        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n        const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n        const isFullScreen = size === 'full';\n\n        return {\n            root: {\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: theme.zIndex.dialog,\n            },\n            container: isFullScreen ? {\n                height: '100%',\n                width: '100%',\n            } : {\n                alignItems: 'center',\n                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,\n                paddingVertical: containerPaddingVertical,\n                width: '100%',\n            },\n            paper: isFullScreen ? {\n                backgroundColor: theme.palette.surface.base,\n                height: '100%',\n                width: '100%',\n                ...sizeStyleMap[size],\n            } : {\n                backgroundColor: theme.palette.surface.base,\n                borderRadius: theme.shape.radius.xl,\n                maxHeight: dialogMaxHeight,\n                overflow: 'hidden',\n                width: '100%',\n                ...sizeStyleMap[size],\n            },\n            topElementContainer: {\n                maxWidth: dialogMaxWidth,\n                width: '100%',\n            },\n            topElementContent: {\n                position: 'absolute',\n                bottom: 0,\n                width: '100%',\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAYA,eAAe,SAASC,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAM;IACFI,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGFT,mBAAmB,EAHvB;EAKA,MAAM;IACFU,MAAM,EAAEC,mBADN;IAEFC,GAAG,EAAEC;EAFH,IAGFZ,iBAAiB,EAHrB;EAKA,OAAOF,OAAO,CAAC,MAAM;IAAA;;IACjB,MAAMe,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHX,KAAK,EAAE;MAHJ,CAP+C;MAYtDY,IAAI,EAAE;QACFC,aAAa,EAAEV,mBADb;QAEFW,UAAU,EAAEC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYX,gBAAgB,GAAG,CAA/B;MAFV;IAZgD,CAA1D;IAkBA,MAAMY,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGnB,YAAY,GAAGkB,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGb,YAAY,CAACV,IAAD,CAAf,uDAAG,mBAAoBY,QAA3C;IAEA,MAAMY,YAAY,GAAGxB,IAAI,KAAK,MAA9B;IAEA,OAAO;MACHyB,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAE3B,KAAK,CAAC2B,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBtB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAsB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAE1B,WAAW,GAAGJ,KAAK,CAAC+B,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAjB,KAAK,EAAE;MAJP,CATD;MAeHgC,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAEpC,KAAK,CAACqC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBtC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE,MAHW;QAIlB,GAAGM,YAAY,CAACV,IAAD;MAJG,CAAH,GAKf;QACAqC,eAAe,EAAEpC,KAAK,CAACqC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAExC,KAAK,CAACyC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKA1C,KAAK,EAAE,MALP;QAMA,GAAGM,YAAY,CAACV,IAAD;MANf,CApBD;MA4BH+C,mBAAmB,EAAE;QACjBnC,QAAQ,EAAEW,cADO;QAEjBnB,KAAK,EAAE;MAFU,CA5BlB;MAgCH4C,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEf3C,MAAM,EAAE,CAFO;QAGfF,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CA/Da,EA+DX,CAACH,KAAD,EAAQE,YAAR,EAAsBE,WAAtB,EAAmCL,IAAnC,EAAyCO,mBAAzC,EAA8DE,gBAA9D,CA/DW,CAAd;AAgEH"}

package/build/module/internal/icons/ChipClose.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+export default createSvgIcon( /*#__PURE__*/React.createElement(Path, {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z"
+}), 'ChipClose', '0 0 9 15');
+//# sourceMappingURL=ChipClose.js.map

package/build/module/internal/icons/ChipClose.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Path","createSvgIcon"],"sources":["ChipClose.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n    <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z\"\n    />,\n    'ChipClose',\n    '0 0 9 15',\n);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,aAAT,QAA8B,aAA9B;AAEA,eAAeA,aAAa,eACxB,oBAAC,IAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADwB,EAMxB,WANwB,EAOxB,UAPwB,CAA5B"}

package/build/module/internal/icons/index.js

@@ -7,6 +7,7 @@ export { default as CheckCircle } from './CheckCircle';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
+export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';

package/build/module/internal/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","AppBarChevronLeft","Check","Checkbox","CheckboxChecked","CheckboxOn","CheckCircle","ChevronDown","ChevronLeft","ChevronRight","CircularProgress","Clear","Close","EyeOff","EyeOn","InfoCircle","LoadingSpinner","Radio","RadioChecked","Search"],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C;AACA,SAASD,OAAO,IAAIE,KAApB,QAAiC,SAAjC;AACA,SAASF,OAAO,IAAIG,QAApB,QAAoC,YAApC;AACA,SAASH,OAAO,IAAII,eAApB,QAA2C,mBAA3C;AACA,SAASJ,OAAO,IAAIK,UAApB,QAAsC,cAAtC;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,WAApB,QAAuC,eAAvC;AACA,SAASP,OAAO,IAAIQ,WAApB,QAAuC,eAAvC;AACA,SAASR,OAAO,IAAIS,YAApB,QAAwC,gBAAxC;AACA,SAAST,OAAO,IAAIU,gBAApB,QAA4C,oBAA5C;AACA,SAASV,OAAO,IAAIW,KAApB,QAAiC,SAAjC;AACA,SAASX,OAAO,IAAIY,KAApB,QAAiC,SAAjC;AACA,SAASZ,OAAO,IAAIa,MAApB,QAAkC,UAAlC;AACA,SAASb,OAAO,IAAIc,KAApB,QAAiC,SAAjC;AACA,SAASd,OAAO,IAAIe,UAApB,QAAsC,cAAtC;AACA,SAASf,OAAO,IAAIgB,cAApB,QAA0C,kBAA1C;AACA,SAAShB,OAAO,IAAIiB,KAApB,QAAiC,SAAjC;AACA,SAASjB,OAAO,IAAIkB,YAApB,QAAwC,gBAAxC;AACA,SAASlB,OAAO,IAAImB,MAApB,QAAkC,UAAlC"}
+{"version":3,"names":["default","AppBarChevronLeft","Check","Checkbox","CheckboxChecked","CheckboxOn","CheckCircle","ChevronDown","ChevronLeft","ChevronRight","ChipClose","CircularProgress","Clear","Close","EyeOff","EyeOn","InfoCircle","LoadingSpinner","Radio","RadioChecked","Search"],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as ChipClose } from './ChipClose';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,qBAA7C;AACA,SAASD,OAAO,IAAIE,KAApB,QAAiC,SAAjC;AACA,SAASF,OAAO,IAAIG,QAApB,QAAoC,YAApC;AACA,SAASH,OAAO,IAAII,eAApB,QAA2C,mBAA3C;AACA,SAASJ,OAAO,IAAIK,UAApB,QAAsC,cAAtC;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,SAASN,OAAO,IAAIO,WAApB,QAAuC,eAAvC;AACA,SAASP,OAAO,IAAIQ,WAApB,QAAuC,eAAvC;AACA,SAASR,OAAO,IAAIS,YAApB,QAAwC,gBAAxC;AACA,SAAST,OAAO,IAAIU,SAApB,QAAqC,aAArC;AACA,SAASV,OAAO,IAAIW,gBAApB,QAA4C,oBAA5C;AACA,SAASX,OAAO,IAAIY,KAApB,QAAiC,SAAjC;AACA,SAASZ,OAAO,IAAIa,KAApB,QAAiC,SAAjC;AACA,SAASb,OAAO,IAAIc,MAApB,QAAkC,UAAlC;AACA,SAASd,OAAO,IAAIe,KAApB,QAAiC,SAAjC;AACA,SAASf,OAAO,IAAIgB,UAApB,QAAsC,cAAtC;AACA,SAAShB,OAAO,IAAIiB,cAApB,QAA0C,kBAA1C;AACA,SAASjB,OAAO,IAAIkB,KAApB,QAAiC,SAAjC;AACA,SAASlB,OAAO,IAAImB,YAApB,QAAwC,gBAAxC;AACA,SAASnB,OAAO,IAAIoB,MAApB,QAAkC,UAAlC"}

package/build/typescript/Chip/useChipStyle.d.ts

@@ -1,9 +1,11 @@
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { SvgIconProps } from '../SvgIcon';
 import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 interface ChipStyle {
     container: FountainUiStyle;
-    closeButton?: FountainUiStyle;
+    closeButtonContainer?: FountainUiStyle;
+    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;
     label: TextStyle;
     startElement?: FountainUiStyle;
     startElementContainer?: FountainUiStyle;

package/build/typescript/internal/icons/ChipClose.d.ts

@@ -0,0 +1,131 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<{
+    (props: {
+        readonly color?: "accent" | "base" | "strong" | "strongInverse" | "baseInverse" | "baseOpacity" | "baseOpacityInverse" | "weak" | "weakInverse" | "weakOpacity" | "weakOpacityInverse" | "accentAlt" | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: import("react-native-svg").NumberProp | undefined;
+        fontWeight?: import("react-native-svg").FontWeight | undefined;
+        letterSpacing?: import("react-native-svg").NumberProp | undefined;
+        readonly fill?: import("react-native").ColorValue | undefined;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
+        testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
+        readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | undefined;
+        scaleX?: import("react-native-svg").NumberProp | undefined;
+        scaleY?: import("react-native-svg").NumberProp | undefined;
+        translateX?: import("react-native-svg").NumberProp | undefined;
+        translateY?: import("react-native-svg").NumberProp | undefined;
+        readonly style?: import("@fountain-ui/styles").FountainUiStyle | import("@fountain-ui/styles").FountainUiStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        title?: string | undefined;
+        clipPath?: string | undefined;
+        marker?: string | undefined;
+        mask?: string | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        readonly viewBox?: string | undefined;
+        preserveAspectRatio?: string | undefined;
+        fillOpacity?: import("react-native-svg").NumberProp | undefined;
+        fillRule?: import("react-native-svg").FillRule | undefined;
+        stroke?: import("react-native").ColorValue | undefined;
+        strokeWidth?: import("react-native-svg").NumberProp | undefined;
+        strokeOpacity?: import("react-native-svg").NumberProp | undefined;
+        strokeDasharray?: import("react-native-svg").NumberProp | readonly import("react-native-svg").NumberProp[] | undefined;
+        strokeDashoffset?: import("react-native-svg").NumberProp | undefined;
+        strokeLinecap?: import("react-native-svg").Linecap | undefined;
+        strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
+        strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
+        vectorEffect?: import("react-native-svg").VectorEffect | undefined;
+        clipRule?: import("react-native-svg").FillRule | undefined;
+        translate?: import("react-native-svg").NumberArray | undefined;
+        origin?: import("react-native-svg").NumberArray | undefined;
+        originX?: import("react-native-svg").NumberProp | undefined;
+        originY?: import("react-native-svg").NumberProp | undefined;
+        skew?: import("react-native-svg").NumberArray | undefined;
+        x?: import("react-native-svg").NumberArray | undefined;
+        y?: import("react-native-svg").NumberArray | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        disabled?: boolean | undefined;
+        onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        delayPressIn?: number | undefined;
+        delayPressOut?: number | undefined;
+        delayLongPress?: number | undefined;
+        id?: string | undefined;
+        markerStart?: string | undefined;
+        markerMid?: string | undefined;
+        markerEnd?: string | undefined;
+        accessibilityLabel?: string | undefined;
+        accessible?: boolean | undefined;
+        font?: import("react-native-svg").FontObject | undefined;
+        fontStretch?: import("react-native-svg").FontStretch | undefined;
+        textAnchor?: import("react-native-svg").TextAnchor | undefined;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        fontFeatureSettings?: string | undefined;
+        fontVariantLigatures?: import("react-native-svg").FontVariantLigatures | undefined;
+        fontVariationSettings?: string | undefined;
+        hitSlop?: import("react-native").Insets | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        nativeID?: string | undefined;
+        collapsable?: boolean | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native").AccessibilityState | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly size?: "medium" | "small" | "large" | undefined;
+    }): JSX.Element;
+    displayName: string;
+}>;
+export default _default;

package/build/typescript/internal/icons/index.d.ts

@@ -7,6 +7,7 @@ export { default as CheckCircle } from './CheckCircle';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
+export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.23",
+  "version": "3.0.0-alpha.24",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dbe78bda34eeeb856ce85619c48e3591fbe9bd86"
+  "gitHead": "0476888c17d395e280cec48f558280c9816189ea"
 }

package/src/Chip/Chip.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import ButtonBase from '../ButtonBase';
-import { Close } from '../internal';
+import { ChipClose } from '../internal';
 import { css } from '../styles';
 import { cloneElementSafely } from '../utils';
 import type ChipProps from './ChipProps';
@@ -24,7 +24,8 @@ export default function Chip(props: ChipProps) {
 
     const {
         container: containerStyle,
-        closeButton: closeButtonStyle,
+        closeButtonContainer: closeButtonContainerStyle,
+        closeIconSize,
         label: labelStyle,
         startElement: startElementStyle,
         startElementContainer: startElementContainerStyle,
@@ -57,10 +58,13 @@ export default function Chip(props: ChipProps) {
             />
 
             {selected ? (
-                <Close
-                    color={'baseInverse'}
-                    style={closeButtonStyle}
-                />
+                <View style={closeButtonContainerStyle}>
+                    <ChipClose
+                        color={'baseInverse'}
+                        height={closeIconSize?.height}
+                        width={closeIconSize?.width}
+                    />
+                </View>
             ) : null}
         </ButtonBase>
     );

package/src/Chip/useChipStyle.ts

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import type { SvgIconProps } from '../SvgIcon';
 import { createFontStyle, useTheme } from '../styles';
 import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    closeButton?: FountainUiStyle;
+    closeButtonContainer?: FountainUiStyle;
+    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;
     label: TextStyle;
     startElement?: FountainUiStyle;
     startElementContainer?: FountainUiStyle;
@@ -14,6 +16,28 @@ interface ChipStyle {
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 
+const closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {
+    small: {
+        marginLeft: 8,
+        paddingTop: 1,
+    },
+    large: {
+        marginLeft: 10,
+        paddingTop: 1,
+    },
+};
+
+const closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {
+    small: {
+        height: 14,
+        width: 8.17,
+    },
+    large: {
+        height: 16,
+        width: 9,
+    },
+};
+
 // TODO: need to refactoring...
 export default function useChipStyle(
     size: ChipSize,
@@ -35,19 +59,6 @@ export default function useChipStyle(
             }),
         };
 
-        const closeButtonStyleMap: Record<ChipSize, FountainUiStyle> = {
-            small: {
-                height: 14,
-                marginLeft: theme.spacing(2),
-                width: 8.17,
-            },
-            large: {
-                height: 17,
-                marginLeft: theme.spacing(2.5),
-                width: 9,
-            },
-        };
-
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
             backgroundColor: selected ? theme.palette.fill.base
@@ -115,7 +126,8 @@ export default function useChipStyle(
             default: {
                 container: {
                     paddingBottom: theme.spacing(1.75),
-                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),
                     paddingTop: theme.spacing(1.5),
                 },
             },
@@ -127,7 +139,8 @@ export default function useChipStyle(
                 ...variantStyleMap[startElementVariant]?.container,
                 ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
             },
-            closeButton: closeButtonStyleMap[size],
+            closeButtonContainer: closeButtonContainerStyleMap[size],
+            closeIconSize: closeIconSize[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
             startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,

package/src/Dialog/useDialogStyle.ts

@@ -42,7 +42,7 @@ export default function useDialogStyle(size: DialogSize): DialogStyles {
             },
             full: {
                 paddingBottom: bottomSafeAreaInset,
-                paddingTop: topSafeAreaInset,
+                paddingTop: Math.max(0, topSafeAreaInset - 3),
             },
         };
 

package/src/internal/icons/ChipClose.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z"
+    />,
+    'ChipClose',
+    '0 0 9 15',
+);

package/src/internal/icons/index.ts

@@ -7,6 +7,7 @@ export { default as CheckCircle } from './CheckCircle';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
+export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';