@fountain-ui/core 3.0.0-alpha.46 → 3.0.0-alpha.48

package/build/commonjs/Chip/Chip.js

@@ -34,8 +34,10 @@ function Chip(props) {
     startElement: startElementProp,
     startElementVariant = 'default',
     style: styleProp,
+    variant = 'filled',
     ...otherProps
   } = props;
+  const isSelected = variant === 'outlined' ? false : selected;
   const {
     container: containerStyle,
     closeButtonContainer: closeButtonContainerStyle,
@@ -43,7 +45,7 @@ function Chip(props) {
     label: labelStyle,
     startElement: startElementStyle,
     startElementContainer: startElementContainerStyle
-  } = (0, _useChipStyle.default)(size, startElementVariant, color, selected);
+  } = (0, _useChipStyle.default)(size, startElementVariant, color, isSelected, variant);
   const chipStyle = (0, _styles.css)([containerStyle, styleProp]);
 
   const startElement = /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -60,7 +62,7 @@ function Chip(props) {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), selected ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }), isSelected ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: closeButtonContainerStyle
   }, /*#__PURE__*/_react.default.createElement(_internal.ChipClose, {
     color: 'baseInverse',

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","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"}
+{"version":3,"names":["Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","variant","otherProps","isSelected","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        variant = 'filled',\n        ...otherProps\n    } = props;\n\n    const isSelected = variant === 'outlined' ? false : selected;\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, isSelected, variant);\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            {isSelected ? (\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;IAUFC,OAAO,GAAG,QAVR;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAMc,UAAU,GAAGF,OAAO,KAAK,UAAZ,GAAyB,KAAzB,GAAiCP,QAApD;EAEA,MAAM;IACFU,SAAS,EAAEC,cADT;IAEFC,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFd,YAAY,EAAEe,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOF,IAAAC,qBAAA,EAAanB,IAAb,EAAmBG,mBAAnB,EAAwCP,KAAxC,EAA+CY,UAA/C,EAA2DF,OAA3D,CAPJ;EASA,MAAMc,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBX,cADkB,EAElBL,SAFkB,CAAJ,CAAlB;;EAKA,MAAMJ,YAAY,gBACd,6BAAC,iBAAD;IAAM,KAAK,EAAEiB;EAAb,GACK,IAAAI,yBAAA,EAAmBpB,gBAAnB,EAAqC;IAAEE,KAAK,EAAEY;EAAT,CAArC,CADL,CADJ;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAE,CAAClB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEsB;EAHX,GAIQb,UAJR,GAMKN,YANL,eAQI,6BAAC,iBAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEkB;EAHX,EARJ,EAcKP,UAAU,gBACP,6BAAC,iBAAD;IAAM,KAAK,EAAEI;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,CADO,GAQP,IAtBR,CADJ;AA0BH"}

package/build/commonjs/Chip/ChipProps.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chipStartElementVariants = exports.chipSizes = exports.chipColors = void 0;
+exports.chipVariants = exports.chipStartElementVariants = exports.chipSizes = exports.chipColors = void 0;
 const chipColors = ['default', 'white'];
 exports.chipColors = chipColors;
 const chipSizes = ['large', 'small'];
 exports.chipSizes = chipSizes;
 const chipStartElementVariants = ['default', 'avatar', 'image', 'icon'];
 exports.chipStartElementVariants = chipStartElementVariants;
+const chipVariants = ['filled', 'outlined'];
+exports.chipVariants = chipVariants;
 //# sourceMappingURL=ChipProps.js.map

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

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

package/build/commonjs/Chip/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "chipStartElementVariants", {
     return _ChipProps.chipStartElementVariants;
   }
 });
+Object.defineProperty(exports, "chipVariants", {
+  enumerable: true,
+  get: function () {
+    return _ChipProps.chipVariants;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants } from './ChipProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps, ChipVariant } from './ChipProps';\nexport { chipColors, chipSizes, chipStartElementVariants, chipVariants } from './ChipProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/Chip/useChipStyle.js

@@ -31,26 +31,33 @@ const closeIconSize = {
 }; // TODO: need to refactoring...
 
 function useChipStyle(size, startElementVariant, color, selected) {
+  let variant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'filled';
   const theme = (0, _styles.useTheme)();
   return (0, _react.useMemo)(() => {
     var _variantStyleMap$star, _variantStyleMap$star2, _variantStyleMap$star3;
 
+    const isOutlined = variant === 'outlined';
+    const textColor = selected ? theme.palette.text.strongInverse : isOutlined ? theme.palette.text.base : theme.palette.text.strong;
     const fontStyleMap = {
       small: (0, _styles.createFontStyle)(theme, {
         selector: typography => typography.caption1.medium,
-        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+        color: textColor
       }),
       large: (0, _styles.createFontStyle)(theme, {
         selector: typography => typography.body2.medium,
-        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
+        color: textColor
       })
     };
     const baseContainerStyle = {
       alignItems: 'center',
-      backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
+      backgroundColor: selected ? theme.palette.fill.base : isOutlined ? 'transparent' : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
       borderRadius: theme.shape.radius.full,
       flexDirection: 'row',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      ...(isOutlined && {
+        borderWidth: 1,
+        borderColor: theme.palette.border.weak
+      })
     };
     const isLarge = size === 'large';
     const variantStyleMap = {
@@ -124,6 +131,6 @@ function useChipStyle(size, startElementVariant, color, selected) {
       startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement,
       startElementContainer: (_variantStyleMap$star3 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star3 === void 0 ? void 0 : _variantStyleMap$star3.startElementContainer
     };
-  }, [theme, size, startElementVariant, color, selected]);
+  }, [theme, size, startElementVariant, color, selected, variant]);
 }
 //# sourceMappingURL=useChipStyle.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"names":["closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","variant","theme","useTheme","useMemo","isOutlined","textColor","palette","text","strongInverse","base","strong","fontStyleMap","createFontStyle","selector","typography","caption1","medium","body2","baseContainerStyle","alignItems","backgroundColor","fill","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","borderWidth","borderColor","border","weak","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, ChipVariant } 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    variant: ChipVariant = 'filled',\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const isOutlined = variant === 'outlined';\n\n        const textColor = selected\n            ? theme.palette.text.strongInverse\n            : isOutlined\n                ? theme.palette.text.base\n                : theme.palette.text.strong;\n\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: textColor,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: textColor,\n            }),\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected\n                ? theme.palette.fill.base\n                : isOutlined\n                    ? 'transparent'\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            ...(isOutlined && {\n                borderWidth: 1,\n                borderColor: theme.palette.border.weak,\n            }),\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, variant]);\n}\n"],"mappings":"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"}

package/build/commonjs/Radio/Radio.js

@@ -79,14 +79,13 @@ function Radio(props) {
     }
   };
 
-  const isChecked = (context === null || context === void 0 ? void 0 : context.value) === value ?? checked;
+  const isChecked = context ? context.value === value : checked;
 
   const defaultCheckedIcon = /*#__PURE__*/_react.default.createElement(_internal.Check, {
     color: 'accent'
   });
 
   const checkedIcon = checkIconProp ?? defaultCheckedIcon;
-  const icon = isChecked ? checkedIcon : null;
   const startIcon = (0, _utils.cloneElementSafely)(startIconProp, {
     color: 'strong',
     height: DEFAULT_START_ICON_SIZE,
@@ -115,7 +114,11 @@ function Radio(props) {
     color: 'base',
     weight: 'regular',
     children: description
-  }) : null), icon);
+  }) : null), /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: {
+      opacity: Number(isChecked)
+    }
+  }, checkedIcon));
 }
 
 ;

package/build/commonjs/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_START_ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","useContext","RadioContext","handlePress","isChecked","defaultCheckedIcon","icon","cloneElementSafely","color","height","width","rootStyle","css","fontStyle","createFontStyle","selector","typography","body1","regular","text","strong"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n    const icon = isChecked ? checkedIcon : null;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            {icon}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["DEFAULT_START_ICON_SIZE","useStyles","theme","useTheme","root","alignItems","borderBottomColor","palette","border","weak","borderBottomWidth","flexDirection","gap","justifyContent","paddingVertical","content","minHeight","Radio","props","checked","children","checkedIcon","checkIconProp","disabled","onChange","onChangeProp","startIcon","startIconProp","style","value","description","otherProps","styles","context","useContext","RadioContext","handlePress","isChecked","defaultCheckedIcon","cloneElementSafely","color","height","width","rootStyle","css","fontStyle","createFontStyle","selector","typography","body1","regular","text","strong","opacity","Number"],"sources":["Radio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport { Check as CheckedIcon } from '../internal';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\nimport Typography from '../Typography';\n\nconst DEFAULT_START_ICON_SIZE = 21;\n\ntype RadioStyles = NamedStylesStringUnion<'root' | 'content'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderBottomColor: theme.palette.border.weak,\n            borderBottomWidth: 0.5,\n            flexDirection: 'row',\n            gap: 32,\n            justifyContent: 'space-between',\n            paddingVertical: 14,\n        },\n        content: {\n            gap: 8,\n            minHeight: 20,\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        checkedIcon: checkIconProp,\n        disabled = false,\n        onChange: onChangeProp,\n        startIcon: startIconProp,\n        style,\n        value,\n        description,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const context = useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context\n        ? context.value === value\n        : checked;\n\n    const defaultCheckedIcon = (\n        <CheckedIcon color={'accent'}/>\n    );\n\n    const checkedIcon = checkIconProp ?? defaultCheckedIcon;\n\n    const startIcon = cloneElementSafely(startIconProp, {\n        color: 'strong',\n        height: DEFAULT_START_ICON_SIZE,\n        width: DEFAULT_START_ICON_SIZE,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body1.regular,\n        color: theme.palette.text.strong,\n    });\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Column\n                gap={2}\n                flexShrink={1}\n            >\n                <Row\n                    alignItems={'center'}\n                    style={styles.content}\n                >\n                    {startIcon}\n\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n\n                {description ? (\n                    <Typography\n                        variant={'body3'}\n                        color={'base'}\n                        weight={'regular'}\n                        children={description}\n                    />\n                ) : null}\n            </Column>\n\n            <Column style={{ opacity: Number(isChecked) }}>\n                {checkedIcon}\n            </Column>\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/TextField/TextField.js

@@ -79,7 +79,9 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     multiline,
     editable = true,
     hint,
+    inputFontSize = 'large',
     isLoading,
+    maxLength,
     onBlur,
     onChangeText: onChangeTextProp,
     onFocus,
@@ -87,6 +89,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
     placeholderTextColor: placeholderTextColorProp,
     secureTextEntry: secureTextEntryProp,
     showClearButton: showClearButtonProp,
+    showWordCounter = false,
     status = 'default',
     style: styleProp,
     title,
@@ -109,7 +112,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
       ref.current = node;
     }
   }, [ref]);
-  const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused);
+  const variantStyles = (0, _useVariantStyleMap.default)(variant, status, isFocused, inputFontSize);
 
   const handleBlur = event => {
     setIsFocused(false);
@@ -188,6 +191,7 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   }) : null), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
     autoFocus: autoFocus,
     editable: !disabled,
+    maxLength: maxLength,
     onBlur: handleBlur,
     onChangeText: handleChangeText,
     onFocus: handleFocus,
@@ -216,7 +220,10 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
   }) : /*#__PURE__*/_react.default.createElement(_icons.EyeOn, {
     height: 19,
     width: 17.42
-  }))) : null), hint && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }))) : null), showWordCounter && maxLength && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    children: `${(value === null || value === void 0 ? void 0 : value.length) ?? 0}/${maxLength}`,
+    style: variantStyles.hintStyle
+  }) : null, hint && !isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     children: hint,
     style: variantStyles.hintStyle
   }) : null);

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

@@ -1 +1 @@
-{"version":3,"names":["isWeb","Platform","OS","styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","internalRef","useRef","mergedRef","useCallback","node","current","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","useLayoutEffect","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst isWeb = Platform.OS === 'web';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\n        editable = true,\n        hint,\n        isLoading,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                <React.Fragment>\n                    {isSearch ? (\n                        <View style={styles.searchIconContainer}>\n                            {isLoading ? (\n                                <LoadingSpinner style={styles.loadingSinner}/>\n                            ) : (\n                                <Search\n                                    color={'base'}\n                                    height={19}\n                                    width={19}\n                                />\n                            )}\n                        </View>\n                    ) : null}\n\n                    <View style={styles.inputWrapper}>\n                        <View\n                            pointerEvents={'none'}\n                            style={styles.placeholderWrapper}\n                        >\n                            {placeholderProp && !value ? (\n                                <Text\n                                    children={placeholderProp}\n                                    numberOfLines={1}\n                                    style={placeholderFontStyle}\n                                />\n                            ) : null}\n                        </View>\n\n                        <TextInput\n                            autoFocus={autoFocus}\n                            editable={!disabled}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <View style={styles.secureButtonContainer}>\n                        <IconButton\n                            color={'base'}\n                            onPress={handleSecureTogglePress}\n                            style={styles.secureToggleButton}\n                        >\n                            {secureTextEntry ? (\n                                <EyeOff\n                                    height={19}\n                                    width={17.42}\n                                />\n                            ) : (\n                                <EyeOn\n                                    height={19}\n                                    width={17.42}\n                                />\n                            )}\n                        </IconButton>\n                    </View>\n                ) : null}\n            </Row>\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"names":["isWeb","Platform","OS","styles","StyleSheet","create","root","alignItems","flexGrow","input","inputWrapper","flexShrink","placeholderWrapper","absoluteFillObject","justifyContent","secureToggleButton","padding","position","right","searchIconContainer","left","loadingSinner","height","width","clearButton","secureButtonContainer","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","multiline","editable","hint","inputFontSize","isLoading","maxLength","onBlur","onChangeText","onChangeTextProp","onFocus","placeholder","placeholderProp","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","showWordCounter","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","internalRef","useRef","mergedRef","useCallback","node","current","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","resizeHeight","el","scrollHeight","useLayoutEffect","shouldResizeHeight","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","inputFontStyle","outlineWidth","placeholderFontStyle","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst isWeb = Platform.OS === 'web';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        flexGrow: 1,\n    },\n    input: {\n        flexGrow: 1,\n    },\n    inputWrapper: {\n        flexGrow: 1,\n        flexShrink: 1,\n    },\n    placeholderWrapper: {\n        ...StyleSheet.absoluteFillObject,\n        justifyContent: 'center',\n    },\n    secureToggleButton: {\n        alignItems: 'flex-end',\n        padding: 0,\n        position: 'absolute',\n        right: 0,\n    },\n    searchIconContainer: {\n        left: 12,\n        position: 'absolute',\n    },\n    loadingSinner: {\n        height: 19,\n        width: 19,\n    },\n    clearButton: {\n        height: 36,\n        position: 'absolute',\n        right: 2,\n        width: 32,\n    },\n    secureButtonContainer: {\n        justifyContent: 'center',\n        width: 32,\n    },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n    const {\n        autoFocus,\n        containerStyle: containerStyleProp,\n        multiline,\n        editable = true,\n        hint,\n        inputFontSize = 'large',\n        isLoading,\n        maxLength,\n        onBlur,\n        onChangeText: onChangeTextProp,\n        onFocus,\n        placeholder: placeholderProp,\n        placeholderTextColor: placeholderTextColorProp,\n        secureTextEntry: secureTextEntryProp,\n        showClearButton: showClearButtonProp,\n        showWordCounter = false,\n        status = 'default' as TextFieldStatus,\n        style: styleProp,\n        title,\n        value,\n        variant = 'default' as TextFieldVariant,\n        ...otherProps\n    } = props;\n\n    const isSearch = variant === 'search';\n\n    const disabled = !editable || isLoading;\n\n    const theme = useTheme();\n\n    const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n    const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n    const internalRef = useRef<TextInput>(null);\n\n    const mergedRef = useCallback((node: TextInput | null) => {\n        (internalRef as React.MutableRefObject<TextInput | null>).current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref) {\n            (ref as React.MutableRefObject<TextInput | null>).current = node;\n        }\n    }, [ref]);\n\n    const variantStyles = useVariantStyleMap(variant, status, isFocused, inputFontSize);\n\n    const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleSecureTogglePress = () => {\n        setSecureTextEntry((current) => !current);\n    };\n\n    const resizeHeight = useCallback(() => {\n        const el = internalRef.current as unknown as HTMLTextAreaElement | null;\n        if (el) {\n            el.style.height = 'auto';\n            el.style.height = `${el.scrollHeight}px`;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        const shouldResizeHeight = multiline && isWeb;\n        if (shouldResizeHeight) {\n            resizeHeight();\n        }\n    }, [resizeHeight, multiline, value]);\n\n    const handleChangeText = (text: string) => {\n        onChangeTextProp?.(text);\n    };\n\n    const handleClear = () => {\n        handleChangeText('');\n    };\n\n    const showClearButton = showClearButtonProp ?? isSearch;\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.caption1['semiBold'],\n        color: theme.palette.text.strong,\n    });\n\n    const inputStyle = css([\n        styles.input,\n        variantStyles.inputStyle,\n        variantStyles.inputFontStyle,\n        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},\n        styleProp,\n    ]);\n\n    const placeholderFontStyle = css([\n        variantStyles.inputFontStyle,\n        { color: placeholderTextColorProp ?? theme.palette.status.disabledLabel },\n    ]);\n\n    const containerStyle = css([\n        styles.root,\n        variantStyles.containerStyle,\n        { opacity: disabled ? 0.3 : 1 },\n        containerStyleProp,\n    ]);\n\n    return (\n        <View>\n            {title && !isSearch ? (\n                <Text\n                    children={title}\n                    style={titleFontStyle}\n                />\n            ) : null}\n\n            <Row style={containerStyle}>\n                <React.Fragment>\n                    {isSearch ? (\n                        <View style={styles.searchIconContainer}>\n                            {isLoading ? (\n                                <LoadingSpinner style={styles.loadingSinner}/>\n                            ) : (\n                                <Search\n                                    color={'base'}\n                                    height={19}\n                                    width={19}\n                                />\n                            )}\n                        </View>\n                    ) : null}\n\n                    <View style={styles.inputWrapper}>\n                        <View\n                            pointerEvents={'none'}\n                            style={styles.placeholderWrapper}\n                        >\n                            {placeholderProp && !value ? (\n                                <Text\n                                    children={placeholderProp}\n                                    numberOfLines={1}\n                                    style={placeholderFontStyle}\n                                />\n                            ) : null}\n                        </View>\n\n                        <TextInput\n                            autoFocus={autoFocus}\n                            editable={!disabled}\n                            maxLength={maxLength}\n                            onBlur={handleBlur}\n                            onChangeText={handleChangeText}\n                            onFocus={handleFocus}\n                            ref={mergedRef}\n                            secureTextEntry={secureTextEntry}\n                            style={inputStyle}\n                            value={value}\n                            multiline={multiline}\n                            {...otherProps}\n                        />\n                    </View>\n                </React.Fragment>\n\n                {showClearButton && value?.length && value.length > 0 ? (\n                    <IconButton\n                        color={'base'}\n                        children={\n                            <Clear\n                                height={17.31}\n                                width={15.9}\n                            />\n                        }\n                        onPress={handleClear}\n                        style={styles.clearButton}\n                    />\n                ) : null}\n\n                {secureTextEntryProp && !isSearch ? (\n                    <View style={styles.secureButtonContainer}>\n                        <IconButton\n                            color={'base'}\n                            onPress={handleSecureTogglePress}\n                            style={styles.secureToggleButton}\n                        >\n                            {secureTextEntry ? (\n                                <EyeOff\n                                    height={19}\n                                    width={17.42}\n                                />\n                            ) : (\n                                <EyeOn\n                                    height={19}\n                                    width={17.42}\n                                />\n                            )}\n                        </IconButton>\n                    </View>\n                ) : null}\n            </Row>\n\n            {showWordCounter && maxLength && !isSearch ? (\n                <Text\n                    children={`${value?.length ?? 0}/${maxLength}`}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n\n            {hint && !isSearch ? (\n                <Text\n                    children={hint}\n                    style={variantStyles.hintStyle}\n                />\n            ) : null}\n        </View>\n    );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/build/commonjs/TextField/TextFieldProps.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textFieldVariants = exports.textFieldStatus = void 0;
+exports.textFieldVariants = exports.textFieldStatus = exports.textFieldInputFontSizes = void 0;
 const textFieldStatus = ['default', 'success', 'error'];
 exports.textFieldStatus = textFieldStatus;
 const textFieldVariants = ['default', 'search'];
 exports.textFieldVariants = textFieldVariants;
+const textFieldInputFontSizes = ['large', 'small'];
+exports.textFieldInputFontSizes = textFieldInputFontSizes;
 //# sourceMappingURL=TextFieldProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["textFieldStatus","textFieldVariants"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B"}
+{"version":3,"names":["textFieldStatus","textFieldVariants","textFieldInputFontSizes"],"sources":["TextFieldProps.ts"],"sourcesContent":["import type { TextInputProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { ExtendedStyle } from '../types';\n\nexport const textFieldStatus = ['default', 'success', 'error'] as const;\nexport type TextFieldStatus = typeof textFieldStatus[number];\n\nexport const textFieldVariants = ['default', 'search'] as const;\nexport type TextFieldVariant = typeof textFieldVariants[number];\n\nexport const textFieldInputFontSizes = ['large', 'small'] as const;\nexport type TextFieldInputFontSize = typeof textFieldInputFontSizes[number];\n\nexport default interface TextFieldProps extends OverridableComponentProps<TextInputProps, {\n    /**\n     * Determines the style of the container that wraps the input.\n     */\n    containerStyle?: ExtendedStyle | ExtendedStyle[];\n\n    /**\n     * Determines the text below the input.\n     */\n    hint?: string;\n\n    /**\n     * Determines whether to display the spinner when in loading state. (only search)\n     */\n    isLoading?: boolean;\n\n    /**\n     * Determines whether to expose the Clear button.\n     * @default variant === search ? true : false\n     */\n    showClearButton?: boolean;\n\n    /**\n     * Determines the input color based on the status.\n     * @default default\n     */\n    status?: TextFieldStatus;\n\n    /**\n     * Determines the title of the input.\n     */\n    title?: string;\n\n    /**\n     * Determines the overall style and appearance of the input.\n     * @default default\n     */\n    variant?: TextFieldVariant;\n\n    /**\n     * Determines the font size of the input.\n     * @default large\n     */\n    inputFontSize?: TextFieldInputFontSize;\n\n    /**\n     * Determines whether to display the word counter below the input.\n     * Requires maxLength to be set.\n     * @default false\n     */\n    showWordCounter?: boolean;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,eAAe,GAAG,CAAC,SAAD,EAAY,SAAZ,EAAuB,OAAvB,CAAxB;;AAGA,MAAMC,iBAAiB,GAAG,CAAC,SAAD,EAAY,QAAZ,CAA1B;;AAGA,MAAMC,uBAAuB,GAAG,CAAC,OAAD,EAAU,OAAV,CAAhC"}

package/build/commonjs/TextField/useVariantStyleMap.js

@@ -11,6 +11,30 @@ var _styles = require("@fountain-ui/styles");
 
 var _styles2 = require("../styles");
 
+const fontSizeStyleMap = {
+  large: {
+    fontSize: 18,
+    lineHeight: 27,
+    fontFamily: 'PretendardStd-SemiBold',
+    letterSpacing: 0
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'PretendardStd-Medium',
+    letterSpacing: 0
+  }
+};
+const containerPaddingMap = {
+  large: {
+    paddingVertical: 14
+  },
+  small: {
+    paddingTop: 18,
+    paddingBottom: 16
+  }
+};
+
 function useStatusColor(theme, status) {
   switch (status) {
     default:
@@ -35,6 +59,7 @@ function useStatusColor(theme, status) {
 }
 
 function useVariantStyleMap(variant, status, isFocused) {
+  let inputFontSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'large';
   const theme = (0, _styles2.useTheme)();
   const {
     borderColor,
@@ -49,19 +74,14 @@ function useVariantStyleMap(variant, status, isFocused) {
             borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
             borderBottomWidth: 1,
             gap: 16,
-            minHeight: 60,
-            paddingVertical: 16
+            minHeight: 54,
+            ...containerPaddingMap[inputFontSize]
           },
           inputStyle: {
             padding: 0
           },
           inputFontStyle: (0, _styles2.createFontStyle)(theme, {
-            selector: _ => (0, _styles.typographyOf)({
-              fontSize: 18,
-              lineHeight: 27,
-              fontFamily: 'PretendardStd-SemiBold',
-              letterSpacing: 0
-            }),
+            selector: _ => (0, _styles.typographyOf)(fontSizeStyleMap[inputFontSize]),
             color: theme.palette.text.strong
           }),
           hintStyle: {
@@ -98,6 +118,6 @@ function useVariantStyleMap(variant, status, isFocused) {
           })
         };
     }
-  }, [theme, borderColor, hintColor, variant, isFocused]);
+  }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);
 }
 //# sourceMappingURL=useVariantStyleMap.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","paddingVertical","inputStyle","padding","inputFontStyle","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        gap: 16,\n                        minHeight: 60,\n                        paddingVertical: 16,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 18,\n                            lineHeight: 27,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: 0,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["fontSizeStyleMap","large","fontSize","lineHeight","fontFamily","letterSpacing","small","containerPaddingMap","paddingVertical","paddingTop","paddingBottom","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","inputFontSize","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","gap","minHeight","inputStyle","padding","inputFontStyle","createFontStyle","selector","_","typographyOf","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingHorizontal"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldInputFontSize, TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\nconst fontSizeStyleMap = {\n    large: {\n        fontSize: 18,\n        lineHeight: 27,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: 0,\n    },\n    small: {\n        fontSize: 14,\n        lineHeight: 21,\n        fontFamily: 'PretendardStd-Medium',\n        letterSpacing: 0,\n    },\n} as const;\n\nconst containerPaddingMap = {\n    large: {\n        paddingVertical: 14,\n    },\n    small: {\n        paddingTop: 18,\n        paddingBottom: 16,\n    },\n} as const;\n\ninterface VariantStyleMap {\n    containerStyle?: FountainUiStyle;\n    inputFontStyle?: TextStyle;\n    inputStyle?: FountainUiStyle;\n    hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n    switch (status) {\n        default:\n        case 'default':\n            return {\n                borderColor: theme.palette.border.base,\n                hintColor: theme.palette.text.weak,\n            };\n        case 'success':\n            return {\n                borderColor: theme.palette.status.success,\n                hintColor: theme.palette.status.success,\n            };\n        case 'error':\n            return {\n                borderColor: theme.palette.status.danger,\n                hintColor: theme.palette.status.danger,\n            };\n    }\n}\n\nexport default function useVariantStyleMap(\n    variant: TextFieldVariant,\n    status: TextFieldStatus,\n    isFocused: boolean,\n    inputFontSize: TextFieldInputFontSize = 'large',\n): VariantStyleMap {\n    const theme = useTheme();\n\n    const {\n        borderColor,\n        hintColor,\n    } = useStatusColor(theme, status);\n\n    return useMemo(() => {\n        switch (variant) {\n            default:\n            case 'default':\n                return {\n                    containerStyle: {\n                        borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n                        borderBottomWidth: 1,\n                        gap: 16,\n                        minHeight: 54,\n                        ...containerPaddingMap[inputFontSize],\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf(fontSizeStyleMap[inputFontSize]),\n                        color: theme.palette.text.strong,\n                    }),\n                    hintStyle: {\n                        marginTop: theme.spacing(2),\n                        ...createFontStyle(theme, {\n                            selector: (typography) => typography.caption1['regular'],\n                            color: hintColor,\n                        }),\n                    },\n                };\n            case 'search':\n                return {\n                    containerStyle: {\n                        backgroundColor: theme.palette.surface.supportive,\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.md,\n                        borderWidth: 0.5,\n                        paddingBottom: 12,\n                        paddingHorizontal: 39,\n                        paddingTop: 11,\n                    },\n                    inputStyle: {\n                        padding: 0,\n                    },\n                    inputFontStyle: createFontStyle(theme, {\n                        selector: (_) => typographyOf({\n                            fontSize: 16,\n                            lineHeight: 19.2,\n                            fontFamily: 'PretendardStd-SemiBold',\n                            letterSpacing: -0.16,\n                        }),\n                        color: theme.palette.text.strong,\n                    }),\n                };\n        }\n    }, [theme, borderColor, hintColor, variant, isFocused, inputFontSize]);\n}\n"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAGA,MAAMA,gBAAgB,GAAG;EACrBC,KAAK,EAAE;IACHC,QAAQ,EAAE,EADP;IAEHC,UAAU,EAAE,EAFT;IAGHC,UAAU,EAAE,wBAHT;IAIHC,aAAa,EAAE;EAJZ,CADc;EAOrBC,KAAK,EAAE;IACHJ,QAAQ,EAAE,EADP;IAEHC,UAAU,EAAE,EAFT;IAGHC,UAAU,EAAE,sBAHT;IAIHC,aAAa,EAAE;EAJZ;AAPc,CAAzB;AAeA,MAAME,mBAAmB,GAAG;EACxBN,KAAK,EAAE;IACHO,eAAe,EAAE;EADd,CADiB;EAIxBF,KAAK,EAAE;IACHG,UAAU,EAAE,EADT;IAEHC,aAAa,EAAE;EAFZ;AAJiB,CAA5B;;AAiBA,SAASC,cAAT,CAAwBC,KAAxB,EAAsCC,MAAtC,EAA4G;EACxG,QAAQA,MAAR;IACI;IACA,KAAK,SAAL;MACI,OAAO;QACHC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAD/B;QAEHC,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBC;MAF3B,CAAP;;IAIJ,KAAK,SAAL;MACI,OAAO;QACHN,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ,OAD/B;QAEHH,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBQ;MAF7B,CAAP;;IAIJ,KAAK,OAAL;MACI,OAAO;QACHP,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS,MAD/B;QAEHJ,SAAS,EAAEN,KAAK,CAACG,OAAN,CAAcF,MAAd,CAAqBS;MAF7B,CAAP;EAbR;AAkBH;;AAEc,SAASC,kBAAT,CACXC,OADW,EAEXX,MAFW,EAGXY,SAHW,EAKI;EAAA,IADfC,aACe,uEADyB,OACzB;EACf,MAAMd,KAAK,GAAG,IAAAe,iBAAA,GAAd;EAEA,MAAM;IACFb,WADE;IAEFI;EAFE,IAGFP,cAAc,CAACC,KAAD,EAAQC,MAAR,CAHlB;EAKA,OAAO,IAAAe,cAAA,EAAQ,MAAM;IACjB,QAAQJ,OAAR;MACI;MACA,KAAK,SAAL;QACI,OAAO;UACHK,cAAc,EAAE;YACZC,iBAAiB,EAAEjB,MAAM,KAAK,SAAX,IAAwBY,SAAxB,GAAoCb,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBe,MAAzD,GAAkEjB,WADzE;YAEZkB,iBAAiB,EAAE,CAFP;YAGZC,GAAG,EAAE,EAHO;YAIZC,SAAS,EAAE,EAJC;YAKZ,GAAG3B,mBAAmB,CAACmB,aAAD;UALV,CADb;UAQHS,UAAU,EAAE;YACRC,OAAO,EAAE;UADD,CART;UAWHC,cAAc,EAAE,IAAAC,wBAAA,EAAgB1B,KAAhB,EAAuB;YACnC2B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAazC,gBAAgB,CAAC0B,aAAD,CAA7B,CADkB;YAEnCgB,KAAK,EAAE9B,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBY;UAFS,CAAvB,CAXb;UAeHY,SAAS,EAAE;YACPC,SAAS,EAAEhC,KAAK,CAACiC,OAAN,CAAc,CAAd,CADJ;YAEP,GAAG,IAAAP,wBAAA,EAAgB1B,KAAhB,EAAuB;cACtB2B,QAAQ,EAAGO,UAAD,IAAgBA,UAAU,CAACC,QAAX,CAAoB,SAApB,CADJ;cAEtBL,KAAK,EAAExB;YAFe,CAAvB;UAFI;QAfR,CAAP;;MAuBJ,KAAK,QAAL;QACI,OAAO;UACHW,cAAc,EAAE;YACZmB,eAAe,EAAEpC,KAAK,CAACG,OAAN,CAAckC,OAAd,CAAsBC,UAD3B;YAEZpC,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IAFtB;YAGZkC,YAAY,EAAEvC,KAAK,CAACwC,KAAN,CAAYC,MAAZ,CAAmBC,EAHrB;YAIZC,WAAW,EAAE,GAJD;YAKZ7C,aAAa,EAAE,EALH;YAMZ8C,iBAAiB,EAAE,EANP;YAOZ/C,UAAU,EAAE;UAPA,CADb;UAUH0B,UAAU,EAAE;YACRC,OAAO,EAAE;UADD,CAVT;UAaHC,cAAc,EAAE,IAAAC,wBAAA,EAAgB1B,KAAhB,EAAuB;YACnC2B,QAAQ,EAAGC,CAAD,IAAO,IAAAC,oBAAA,EAAa;cAC1BvC,QAAQ,EAAE,EADgB;cAE1BC,UAAU,EAAE,IAFc;cAG1BC,UAAU,EAAE,wBAHc;cAI1BC,aAAa,EAAE,CAAC;YAJU,CAAb,CADkB;YAOnCqC,KAAK,EAAE9B,KAAK,CAACG,OAAN,CAAcI,IAAd,CAAmBY;UAPS,CAAvB;QAbb,CAAP;IA3BR;EAmDH,CApDM,EAoDJ,CAACnB,KAAD,EAAQE,WAAR,EAAqBI,SAArB,EAAgCM,OAAhC,EAAyCC,SAAzC,EAAoDC,aAApD,CApDI,CAAP;AAqDH"}

package/build/module/Chip/Chip.js

@@ -18,8 +18,10 @@ export default function Chip(props) {
     startElement: startElementProp,
     startElementVariant = 'default',
     style: styleProp,
+    variant = 'filled',
     ...otherProps
   } = props;
+  const isSelected = variant === 'outlined' ? false : selected;
   const {
     container: containerStyle,
     closeButtonContainer: closeButtonContainerStyle,
@@ -27,7 +29,7 @@ export default function Chip(props) {
     label: labelStyle,
     startElement: startElementStyle,
     startElementContainer: startElementContainerStyle
-  } = useChipStyle(size, startElementVariant, color, selected);
+  } = useChipStyle(size, startElementVariant, color, isSelected, variant);
   const chipStyle = css([containerStyle, styleProp]);
   const startElement = /*#__PURE__*/React.createElement(View, {
     style: startElementContainerStyle
@@ -42,7 +44,7 @@ export default function Chip(props) {
     children: children,
     numberOfLines: numberOfLines,
     style: labelStyle
-  }), selected ? /*#__PURE__*/React.createElement(View, {
+  }), isSelected ? /*#__PURE__*/React.createElement(View, {
     style: closeButtonContainerStyle
   }, /*#__PURE__*/React.createElement(ChipClose, {
     color: 'baseInverse',

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","Text","View","ButtonBase","ChipClose","css","cloneElementSafely","useChipStyle","Chip","props","children","color","numberOfLines","onPress","selected","size","startElement","startElementProp","startElementVariant","style","styleProp","variant","otherProps","isSelected","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        variant = 'filled',\n        ...otherProps\n    } = props;\n\n    const isSelected = variant === 'outlined' ? false : selected;\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, isSelected, variant);\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            {isSelected ? (\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;IAUFC,OAAO,GAAG,QAVR;IAWF,GAAGC;EAXD,IAYFb,KAZJ;EAcA,MAAMc,UAAU,GAAGF,OAAO,KAAK,UAAZ,GAAyB,KAAzB,GAAiCP,QAApD;EAEA,MAAM;IACFU,SAAS,EAAEC,cADT;IAEFC,oBAAoB,EAAEC,yBAFpB;IAGFC,aAHE;IAIFC,KAAK,EAAEC,UAJL;IAKFd,YAAY,EAAEe,iBALZ;IAMFC,qBAAqB,EAAEC;EANrB,IAOF1B,YAAY,CAACQ,IAAD,EAAOG,mBAAP,EAA4BP,KAA5B,EAAmCY,UAAnC,EAA+CF,OAA/C,CAPhB;EASA,MAAMa,SAAS,GAAG7B,GAAG,CAAC,CAClBoB,cADkB,EAElBL,SAFkB,CAAD,CAArB;EAKA,MAAMJ,YAAY,gBACd,oBAAC,IAAD;IAAM,KAAK,EAAEiB;EAAb,GACK3B,kBAAkB,CAACW,gBAAD,EAAmB;IAAEE,KAAK,EAAEY;EAAT,CAAnB,CADvB,CADJ;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAE,CAAClB,OADf;IAEI,OAAO,EAAEA,OAFb;IAGI,KAAK,EAAEqB;EAHX,GAIQZ,UAJR,GAMKN,YANL,eAQI,oBAAC,IAAD;IACI,QAAQ,EAAEN,QADd;IAEI,aAAa,EAAEE,aAFnB;IAGI,KAAK,EAAEkB;EAHX,EARJ,EAcKP,UAAU,gBACP,oBAAC,IAAD;IAAM,KAAK,EAAEI;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,CADO,GAQP,IAtBR,CADJ;AA0BH"}

package/build/module/Chip/ChipProps.js

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