@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

package/build/module/Tooltip/Tooltip.js

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { rgb } from '@fountain-ui/utils';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
-import { Close as CloseIcon } from '../internal/icons';
-import UpArrow from './UpArrow';
-const DEFAULT_OPACITY = 0.8;
+import Beak from './Beaks';
+const DEFAULT_BEAK_LAYOUT = {
+  offset: 0,
+  placement: 'middle'
+};
 const INITIAL_LAYOUT = {
   width: 0,
   height: 0,
@@ -16,9 +18,53 @@ const INITIAL_LAYOUT = {
 const ANIMATION_CONFIG = {
   duration: 150
 };
+
+const getFlexDirection = placement => {
+  switch (placement) {
+    case 'right':
+      return 'row-reverse';
+
+    case 'bottom':
+      return 'column-reverse';
+
+    case 'left':
+      return 'row';
+
+    case 'top':
+    default:
+      return 'column';
+  }
+};
+
+const useStyles = function () {
+  const theme = useTheme();
+  return {
+    root: {
+      position: 'absolute',
+      zIndex: theme.zIndex.tooltip
+    },
+    content: {
+      backgroundColor: theme.palette.fill.base,
+      paddingHorizontal: theme.spacing(2),
+      paddingVertical: theme.spacing(1.5)
+    },
+    small: {
+      borderRadius: theme.shape.radius.sm,
+      paddingHorizontal: theme.spacing(2),
+      paddingVertical: theme.spacing(1.5)
+    },
+    large: {
+      borderRadius: 5,
+      paddingBottom: theme.spacing(2.5),
+      paddingHorizontal: theme.spacing(4),
+      paddingTop: theme.spacing(2)
+    }
+  };
+};
+
 export default function Tooltip(props) {
   const {
-    arrowLayout,
+    beakLayout = DEFAULT_BEAK_LAYOUT,
     children,
     initialLayout = INITIAL_LAYOUT,
     left,
@@ -26,13 +72,19 @@ export default function Tooltip(props) {
     placement = 'top',
     right,
     numberOfTitleLines = 1,
+    size = 'small',
     style,
     title,
     tooltipStyle,
     verticalOffset = 4,
     visible = false
   } = props;
+  const {
+    offset: beakOffset,
+    placement: beakPlacement
+  } = beakLayout;
   const theme = useTheme();
+  const styles = useStyles();
   const [layout, setLayout] = useState(initialLayout);
   const scale = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => ({
@@ -40,16 +92,14 @@ export default function Tooltip(props) {
       scale: scale.value
     }]
   }), []);
-  const [r, g, b] = rgb(theme.palette.primary.main);
-  const totalVerticalOffset = -(layout.height + verticalOffset);
+  const flexDirection = getFlexDirection(placement);
+  const isVerticalPlacement = placement === 'top' || placement === 'bottom';
+  const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);
   const tooltipLayoutStyle = {
-    alignItems: (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'left' ? 'flex-start' : (arrowLayout === null || arrowLayout === void 0 ? void 0 : arrowLayout.placement) === 'right' ? 'flex-end' : 'center',
-    bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+    alignItems: beakPlacement === 'start' ? 'flex-start' : beakPlacement === 'end' ? 'flex-end' : 'center',
+    flexDirection,
     left,
-    position: 'absolute',
     right,
-    top: placement === 'top' ? totalVerticalOffset : undefined,
-    zIndex: theme.zIndex.tooltip,
     height: visible ? undefined : 0,
     overflow: visible ? undefined : 'hidden',
     ...Platform.select({
@@ -57,53 +107,54 @@ export default function Tooltip(props) {
         display: visible ? 'flex' : 'none'
       },
       default: {}
-    })
+    }),
+    [placement]: totalOffset
   };
+  const contentStyle = css([styles.content, styles[size], isVerticalPlacement ? {
+    width: '100%'
+  } : {
+    flexGrow: 1,
+    flexShrink: 1
+  }]);
   useEffect(() => {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-  const touchableStyle = {
-    alignItems: 'center',
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
-    borderRadius: theme.shape.roundness,
-    flexDirection: 'row',
-    padding: theme.spacing(2),
-    width: '100%'
-  };
   const fontStyle = createFontStyle(theme, {
-    selector: typo => typo.caption2,
-    color: theme.palette.primary.contrastTextColor
+    selector: typo => size === 'large' ? typographyOf({
+      fontSize: 13,
+      lineHeight: 19.5,
+      fontFamily: 'Pretendard-Regular',
+      letterSpacing: 0
+    }) // TODO: change caption2.
+    : typo.caption3.regular,
+    color: theme.palette.text.strongInverse
   });
   const textStyle = css([fontStyle, {
-    marginRight: theme.spacing(2),
     flexShrink: 1
   }]);
-  const arrowStyle = css({ ...(arrowLayout && {
-      [arrowLayout.placement]: arrowLayout.offset
-    })
+  const beakStyle = css({
+    transform: [isVerticalPlacement ? {
+      translateX: beakOffset
+    } : {
+      translateY: beakOffset
+    }]
   });
   const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
     pressEffect: 'none',
-    onPress: onClose
-  }, /*#__PURE__*/React.createElement(View, {
-    style: css(touchableStyle)
-  }, /*#__PURE__*/React.createElement(Text, {
-    children: title // TODO: Should we provide text prop customization?
-    ,
+    onPress: onClose,
+    style: contentStyle
+  }, /*#__PURE__*/React.createElement(Text // TODO: Should we provide text prop customization?
+  , {
     numberOfLines: numberOfTitleLines,
     style: textStyle
-  }), /*#__PURE__*/React.createElement(CloseIcon, {
-    fill: theme.palette.primary.contrastTextColor,
-    width: 20,
-    height: 20
-  })));
-  const arrowElem = /*#__PURE__*/React.createElement(View, {
-    style: arrowStyle
-  }, /*#__PURE__*/React.createElement(UpArrow, {
-    upsideDown: placement === 'top',
-    fill: theme.palette.primary.main,
-    opacity: DEFAULT_OPACITY
+  }, title));
+  const beakElem = /*#__PURE__*/React.createElement(View, {
+    style: beakStyle
+  }, /*#__PURE__*/React.createElement(Beak, {
+    fill: theme.palette.fill.base,
+    placement: placement,
+    size: size
   }));
   return /*#__PURE__*/React.createElement(View, {
     style: style
@@ -115,8 +166,8 @@ export default function Tooltip(props) {
 
       setLayout(event.nativeEvent.layout);
     },
-    style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
-  }, placement === 'top' ? /*#__PURE__*/React.createElement(React.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/React.createElement(React.Fragment, null, arrowElem, buttonElem)));
+    style: [styles.root, animatedStyle, tooltipLayoutStyle, tooltipStyle]
+  }, buttonElem, beakElem));
 }
 ;
 //# sourceMappingURL=Tooltip.js.map

package/build/module/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","select","web","display","default","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","flexShrink","arrowStyle","offset","buttonElem","arrowElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        arrowLayout,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top',\n        right,\n        numberOfTitleLines = 1,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const theme = useTheme();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const [r, g, b] = rgb(theme.palette.primary.main);\n\n    const totalVerticalOffset = -(layout.height + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: arrowLayout?.placement === 'left'\n            ? 'flex-start'\n            : arrowLayout?.placement === 'right'\n                ? 'flex-end'\n                : 'center',\n        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n        left,\n        position: 'absolute',\n        right,\n        top: placement === 'top' ? totalVerticalOffset : undefined,\n        zIndex: theme.zIndex.tooltip,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n           web: {\n               display: visible ? 'flex' : 'none',\n           },\n            default: {},\n        }),\n    };\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const touchableStyle: ViewProps['style'] = {\n        alignItems: 'center',\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n        borderRadius: theme.shape.roundness,\n        flexDirection: 'row',\n        padding: theme.spacing(2),\n        width: '100%',\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2,\n        color: theme.palette.primary.contrastTextColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            marginRight: theme.spacing(2),\n            flexShrink: 1,\n        },\n    ]);\n\n    const arrowStyle = css({\n        ...(arrowLayout && {\n            [arrowLayout.placement]: arrowLayout.offset,\n        }),\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n        >\n            <View style={css(touchableStyle)}>\n                <Text\n                    children={title}\n                    // TODO: Should we provide text prop customization?\n                    numberOfLines={numberOfTitleLines}\n                    style={textStyle}\n                />\n                <CloseIcon\n                    fill={theme.palette.primary.contrastTextColor}\n                    width={20}\n                    height={20}\n                />\n            </View>\n        </ButtonBase>\n    );\n\n    const arrowElem = (\n        <View style={arrowStyle}>\n            <UpArrow\n                upsideDown={placement === 'top'}\n                fill={theme.palette.primary.main}\n                opacity={DEFAULT_OPACITY}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {placement === 'top' ? (\n                    <React.Fragment>\n                        {buttonElem}\n                        {arrowElem}\n                    </React.Fragment>\n                ) : (\n                    <React.Fragment>\n                        {arrowElem}\n                        {buttonElem}\n                    </React.Fragment>\n                )}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAgD,cAAhD;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,mBAAnC;AAEA,OAAOC,OAAP,MAAoB,WAApB;AAEA,MAAMC,eAAe,GAAG,GAAxB;AACA,MAAMC,cAAc,GAAG;EAAEC,KAAK,EAAE,CAAT;EAAYC,MAAM,EAAE,CAApB;EAAuBC,CAAC,EAAE,CAA1B;EAA6BC,CAAC,EAAE;AAAhC,CAAvB;AAEA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AAEA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,WADE;IAEFC,QAFE;IAGFC,aAAa,GAAGX,cAHd;IAIFY,IAJE;IAKFC,OALE;IAMFC,SAAS,GAAG,KANV;IAOFC,KAPE;IAQFC,kBAAkB,GAAG,CARnB;IASFC,KATE;IAUFC,KAVE;IAWFC,YAXE;IAYFC,cAAc,GAAG,CAZf;IAaFC,OAAO,GAAG;EAbR,IAcFb,KAdJ;EAgBA,MAAMc,KAAK,GAAG3B,QAAQ,EAAtB;EAEA,MAAM,CAAC4B,MAAD,EAASC,SAAT,IAAsBzC,QAAQ,CAAC4B,aAAD,CAApC;EAEA,MAAMc,KAAK,GAAGpC,cAAc,CAAC,CAAD,CAA5B;EAEA,MAAMqC,aAAa,GAAGtC,gBAAgB,CAAC,OAAO;IAC1CuC,SAAS,EAAE,CAAC;MAAEF,KAAK,EAAEA,KAAK,CAACG;IAAf,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIA,MAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYxC,GAAG,CAAC+B,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsBC,IAAvB,CAArB;EAEA,MAAMC,mBAAmB,GAAG,EAAEZ,MAAM,CAACrB,MAAP,GAAgBkB,cAAlB,CAA5B;EACA,MAAMgB,kBAAsC,GAAG;IAC3CC,UAAU,EAAE,CAAA5B,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEK,SAAb,MAA2B,MAA3B,GACN,YADM,GAEN,CAAAL,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEK,SAAb,MAA2B,OAA3B,GACI,UADJ,GAEI,QALiC;IAM3CwB,MAAM,EAAExB,SAAS,KAAK,QAAd,GAAyBqB,mBAAzB,GAA+CI,SANZ;IAO3C3B,IAP2C;IAQ3C4B,QAAQ,EAAE,UARiC;IAS3CzB,KAT2C;IAU3C0B,GAAG,EAAE3B,SAAS,KAAK,KAAd,GAAsBqB,mBAAtB,GAA4CI,SAVN;IAW3CG,MAAM,EAAEpB,KAAK,CAACoB,MAAN,CAAaC,OAXsB;IAY3CzC,MAAM,EAAEmB,OAAO,GAAGkB,SAAH,GAAe,CAZa;IAa3CK,QAAQ,EAAEvB,OAAO,GAAGkB,SAAH,GAAe,QAbW;IAc3C,GAAGvD,QAAQ,CAAC6D,MAAT,CAAgB;MAChBC,GAAG,EAAE;QACDC,OAAO,EAAE1B,OAAO,GAAG,MAAH,GAAY;MAD3B,CADW;MAIf2B,OAAO,EAAE;IAJM,CAAhB;EAdwC,CAA/C;EAsBAlE,SAAS,CAAC,MAAM;IACZ,MAAMmE,cAAc,GAAG5B,OAAO,GAAG,CAAH,GAAO,CAArC;IAEAI,KAAK,CAACG,KAAN,GAActC,UAAU,CAAC2D,cAAD,EAAiB5C,gBAAjB,CAAxB;EACH,CAJQ,EAIN,CAACgB,OAAD,CAJM,CAAT;EAMA,MAAM6B,cAAkC,GAAG;IACvCb,UAAU,EAAE,QAD2B;IAEvCc,eAAe,EAAG,QAAOtB,CAAE,KAAIC,CAAE,KAAIC,CAAE,KAAIhC,eAAgB,GAFpB;IAGvCqD,YAAY,EAAE9B,KAAK,CAAC+B,KAAN,CAAYC,SAHa;IAIvCC,aAAa,EAAE,KAJwB;IAKvCC,OAAO,EAAElC,KAAK,CAACmC,OAAN,CAAc,CAAd,CAL8B;IAMvCxD,KAAK,EAAE;EANgC,CAA3C;EASA,MAAMyD,SAAS,GAAGjE,eAAe,CAAC6B,KAAD,EAAQ;IACrCqC,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;IAErCC,KAAK,EAAExC,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsB8B;EAFQ,CAAR,CAAjC;EAKA,MAAMC,SAAS,GAAGtE,GAAG,CAAC,CAClBgE,SADkB,EAElB;IACIO,WAAW,EAAE3C,KAAK,CAACmC,OAAN,CAAc,CAAd,CADjB;IAEIS,UAAU,EAAE;EAFhB,CAFkB,CAAD,CAArB;EAQA,MAAMC,UAAU,GAAGzE,GAAG,CAAC,EACnB,IAAIe,WAAW,IAAI;MACf,CAACA,WAAW,CAACK,SAAb,GAAyBL,WAAW,CAAC2D;IADtB,CAAnB;EADmB,CAAD,CAAtB;EAMA,MAAMC,UAAU,gBACZ,oBAAC,UAAD;IACI,WAAW,EAAE,MADjB;IAEI,OAAO,EAAExD;EAFb,gBAII,oBAAC,IAAD;IAAM,KAAK,EAAEnB,GAAG,CAACwD,cAAD;EAAhB,gBACI,oBAAC,IAAD;IACI,QAAQ,EAAEhC,KADd,CAEI;IAFJ;IAGI,aAAa,EAAEF,kBAHnB;IAII,KAAK,EAAEgD;EAJX,EADJ,eAOI,oBAAC,SAAD;IACI,IAAI,EAAE1C,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsB8B,iBADhC;IAEI,KAAK,EAAE,EAFX;IAGI,MAAM,EAAE;EAHZ,EAPJ,CAJJ,CADJ;EAqBA,MAAMO,SAAS,gBACX,oBAAC,IAAD;IAAM,KAAK,EAAEH;EAAb,gBACI,oBAAC,OAAD;IACI,UAAU,EAAErD,SAAS,KAAK,KAD9B;IAEI,IAAI,EAAEQ,KAAK,CAACU,OAAN,CAAcC,OAAd,CAAsBC,IAFhC;IAGI,OAAO,EAAEnC;EAHb,EADJ,CADJ;EAUA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAEkB;EAAb,GACKP,QADL,eAGI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAG6D,KAAD,IAAW;MACjB,IAAIA,KAAK,CAACC,WAAN,CAAkBjD,MAAlB,CAAyBrB,MAAzB,KAAoC,CAAxC,EAA2C;QACvC;MACH;;MAEDsB,SAAS,CAAC+C,KAAK,CAACC,WAAN,CAAkBjD,MAAnB,CAAT;IACH,CAPL;IAQI,KAAK,EAAE,CACHG,aADG,EAEHU,kBAFG,EAGHjB,YAHG;EARX,GAcKL,SAAS,KAAK,KAAd,gBACG,oBAAC,KAAD,CAAO,QAAP,QACKuD,UADL,EAEKC,SAFL,CADH,gBAMG,oBAAC,KAAD,CAAO,QAAP,QACKA,SADL,EAEKD,UAFL,CApBR,CAHJ,CADJ;AAgCH;AAAA"}
+{"version":3,"names":["React","useEffect","useState","Platform","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","typographyOf","ButtonBase","createFontStyle","css","useTheme","Beak","DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","large","paddingBottom","paddingTop","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","beakOffset","beakPlacement","styles","layout","setLayout","scale","animatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","select","web","display","default","contentStyle","flexGrow","flexShrink","nextScaleValue","fontStyle","selector","typo","fontSize","lineHeight","fontFamily","letterSpacing","caption3","regular","color","text","strongInverse","textStyle","beakStyle","translateX","translateY","buttonElem","beakElem","event","nativeEvent"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Platform, Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type TooltipProps from './TooltipProps';\nimport type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';\nimport Beak from './Beaks';\n\nconst DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {\n    offset: 0,\n    placement: 'middle',\n};\n\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\ntype FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nconst getFlexDirection = (placement: TooltipPlacement): FlexDirection => {\n    switch (placement) {\n        case 'right':\n            return 'row-reverse';\n        case 'bottom':\n            return 'column-reverse';\n        case 'left':\n            return 'row';\n        case 'top':\n        default:\n            return 'column';\n    }\n};\n\ntype TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;\n\nconst useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            position: 'absolute',\n            zIndex: theme.zIndex.tooltip,\n        },\n        content: {\n            backgroundColor: theme.palette.fill.base,\n            paddingHorizontal: theme.spacing(2),\n            paddingVertical: theme.spacing(1.5),\n        },\n        small: {\n            borderRadius: theme.shape.radius.sm,\n            paddingHorizontal: theme.spacing(2),\n            paddingVertical: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingBottom: theme.spacing(2.5),\n            paddingHorizontal: theme.spacing(4),\n            paddingTop: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Tooltip(props: TooltipProps) {\n    const {\n        beakLayout = DEFAULT_BEAK_LAYOUT,\n        children,\n        initialLayout = INITIAL_LAYOUT,\n        left,\n        onClose,\n        placement = 'top' as TooltipPlacement,\n        right,\n        numberOfTitleLines = 1,\n        size = 'small' as TooltipSize,\n        style,\n        title,\n        tooltipStyle,\n        verticalOffset = 4,\n        visible = false,\n    } = props;\n\n    const {\n        offset: beakOffset,\n        placement: beakPlacement,\n    } = beakLayout;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const [layout, setLayout] = useState(initialLayout);\n\n    const scale = useSharedValue(0);\n\n    const animatedStyle = useAnimatedStyle(() => ({\n        transform: [{ scale: scale.value }],\n    }), []);\n\n    const flexDirection = getFlexDirection(placement);\n\n    const isVerticalPlacement = placement === 'top' || placement === 'bottom';\n\n    const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);\n    const tooltipLayoutStyle: ViewProps['style'] = {\n        alignItems: beakPlacement === 'start'\n            ? 'flex-start'\n            : beakPlacement === 'end'\n                ? 'flex-end'\n                : 'center',\n        flexDirection,\n        left,\n        right,\n        height: visible ? undefined : 0,\n        overflow: visible ? undefined : 'hidden',\n        ...Platform.select({\n            web: {\n                display: visible ? 'flex' : 'none',\n            },\n            default: {},\n        }),\n        [placement]: totalOffset,\n    };\n\n    const contentStyle = css([\n        styles.content,\n        styles[size],\n        isVerticalPlacement\n            ? { width: '100%' }\n            : { flexGrow: 1, flexShrink: 1 },\n    ]);\n\n    useEffect(() => {\n        const nextScaleValue = visible ? 1 : 0;\n\n        scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n    }, [visible]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'large'\n            ? typographyOf({\n                fontSize: 13,\n                lineHeight: 19.5,\n                fontFamily: 'Pretendard-Regular',\n                letterSpacing: 0,\n            })\n            // TODO: change caption2.\n            : typo.caption3.regular,\n        color: theme.palette.text.strongInverse,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { flexShrink: 1 },\n    ]);\n\n    const beakStyle = css({\n        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],\n    });\n\n    const buttonElem = (\n        <ButtonBase\n            pressEffect={'none'}\n            onPress={onClose}\n            style={contentStyle}\n        >\n            <Text\n                // TODO: Should we provide text prop customization?\n                numberOfLines={numberOfTitleLines}\n                style={textStyle}\n            >\n                {title}\n            </Text>\n        </ButtonBase>\n    );\n\n    const beakElem = (\n        <View style={beakStyle}>\n            <Beak\n                fill={theme.palette.fill.base}\n                placement={placement}\n                size={size}\n            />\n        </View>\n    );\n\n    return (\n        <View style={style}>\n            {children}\n\n            <Animated.View\n                onLayout={(event) => {\n                    if (event.nativeEvent.layout.height === 0) {\n                        return;\n                    }\n\n                    setLayout(event.nativeEvent.layout);\n                }}\n                style={[\n                    styles.root,\n                    animatedStyle,\n                    tooltipLayoutStyle,\n                    tooltipStyle,\n                ]}\n            >\n                {buttonElem}\n\n                {beakElem}\n            </Animated.View>\n        </View>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,QAA2C,OAA3C;AACA,SAASC,QAAT,EAAmBC,IAAnB,EAAyBC,IAAzB,QAAgD,cAAhD;AAEA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,YAAT,QAA6B,qBAA7B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AAGA,OAAOC,IAAP,MAAiB,SAAjB;AAEA,MAAMC,mBAAsC,GAAG;EAC3CC,MAAM,EAAE,CADmC;EAE3CC,SAAS,EAAE;AAFgC,CAA/C;AAKA,MAAMC,cAAc,GAAG;EAAEC,KAAK,EAAE,CAAT;EAAYC,MAAM,EAAE,CAApB;EAAuBC,CAAC,EAAE,CAA1B;EAA6BC,CAAC,EAAE;AAAhC,CAAvB;AAEA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;;AAIA,MAAMC,gBAAgB,GAAIR,SAAD,IAAgD;EACrE,QAAQA,SAAR;IACI,KAAK,OAAL;MACI,OAAO,aAAP;;IACJ,KAAK,QAAL;MACI,OAAO,gBAAP;;IACJ,KAAK,MAAL;MACI,OAAO,KAAP;;IACJ,KAAK,KAAL;IACA;MACI,OAAO,QAAP;EATR;AAWH,CAZD;;AAgBA,MAAMS,SAAmC,GAAG,YAA2B;EACnE,MAAMC,KAAK,GAAGd,QAAQ,EAAtB;EAEA,OAAO;IACHe,IAAI,EAAE;MACFC,QAAQ,EAAE,UADR;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,OAAO,EAAE;MACLC,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IAD/B;MAELC,iBAAiB,EAAEV,KAAK,CAACW,OAAN,CAAc,CAAd,CAFd;MAGLC,eAAe,EAAEZ,KAAK,CAACW,OAAN,CAAc,GAAd;IAHZ,CALN;IAUHE,KAAK,EAAE;MACHC,YAAY,EAAEd,KAAK,CAACe,KAAN,CAAYC,MAAZ,CAAmBC,EAD9B;MAEHP,iBAAiB,EAAEV,KAAK,CAACW,OAAN,CAAc,CAAd,CAFhB;MAGHC,eAAe,EAAEZ,KAAK,CAACW,OAAN,CAAc,GAAd;IAHd,CAVJ;IAeHO,KAAK,EAAE;MACHJ,YAAY,EAAE,CADX;MAEHK,aAAa,EAAEnB,KAAK,CAACW,OAAN,CAAc,GAAd,CAFZ;MAGHD,iBAAiB,EAAEV,KAAK,CAACW,OAAN,CAAc,CAAd,CAHhB;MAIHS,UAAU,EAAEpB,KAAK,CAACW,OAAN,CAAc,CAAd;IAJT;EAfJ,CAAP;AAsBH,CAzBD;;AA2BA,eAAe,SAASU,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,UAAU,GAAGnC,mBADX;IAEFoC,QAFE;IAGFC,aAAa,GAAGlC,cAHd;IAIFmC,IAJE;IAKFC,OALE;IAMFrC,SAAS,GAAG,KANV;IAOFsC,KAPE;IAQFC,kBAAkB,GAAG,CARnB;IASFC,IAAI,GAAG,OATL;IAUFC,KAVE;IAWFC,KAXE;IAYFC,YAZE;IAaFC,cAAc,GAAG,CAbf;IAcFC,OAAO,GAAG;EAdR,IAeFb,KAfJ;EAiBA,MAAM;IACFjC,MAAM,EAAE+C,UADN;IAEF9C,SAAS,EAAE+C;EAFT,IAGFd,UAHJ;EAKA,MAAMvB,KAAK,GAAGd,QAAQ,EAAtB;EAEA,MAAMoD,MAAM,GAAGvC,SAAS,EAAxB;EAEA,MAAM,CAACwC,MAAD,EAASC,SAAT,IAAsBlE,QAAQ,CAACmD,aAAD,CAApC;EAEA,MAAMgB,KAAK,GAAG7D,cAAc,CAAC,CAAD,CAA5B;EAEA,MAAM8D,aAAa,GAAG/D,gBAAgB,CAAC,OAAO;IAC1CgE,SAAS,EAAE,CAAC;MAAEF,KAAK,EAAEA,KAAK,CAACG;IAAf,CAAD;EAD+B,CAAP,CAAD,EAElC,EAFkC,CAAtC;EAIA,MAAMC,aAAa,GAAG/C,gBAAgB,CAACR,SAAD,CAAtC;EAEA,MAAMwD,mBAAmB,GAAGxD,SAAS,KAAK,KAAd,IAAuBA,SAAS,KAAK,QAAjE;EAEA,MAAMyD,WAAW,GAAG,EAAE,CAACD,mBAAmB,GAAGP,MAAM,CAAC9C,MAAV,GAAmB8C,MAAM,CAAC/C,KAA9C,IAAuD0C,cAAzD,CAApB;EACA,MAAMc,kBAAsC,GAAG;IAC3CC,UAAU,EAAEZ,aAAa,KAAK,OAAlB,GACN,YADM,GAENA,aAAa,KAAK,KAAlB,GACI,UADJ,GAEI,QALiC;IAM3CQ,aAN2C;IAO3CnB,IAP2C;IAQ3CE,KAR2C;IAS3CnC,MAAM,EAAE0C,OAAO,GAAGe,SAAH,GAAe,CATa;IAU3CC,QAAQ,EAAEhB,OAAO,GAAGe,SAAH,GAAe,QAVW;IAW3C,GAAG3E,QAAQ,CAAC6E,MAAT,CAAgB;MACfC,GAAG,EAAE;QACDC,OAAO,EAAEnB,OAAO,GAAG,MAAH,GAAY;MAD3B,CADU;MAIfoB,OAAO,EAAE;IAJM,CAAhB,CAXwC;IAiB3C,CAACjE,SAAD,GAAayD;EAjB8B,CAA/C;EAoBA,MAAMS,YAAY,GAAGvE,GAAG,CAAC,CACrBqD,MAAM,CAACjC,OADc,EAErBiC,MAAM,CAACR,IAAD,CAFe,EAGrBgB,mBAAmB,GACb;IAAEtD,KAAK,EAAE;EAAT,CADa,GAEb;IAAEiE,QAAQ,EAAE,CAAZ;IAAeC,UAAU,EAAE;EAA3B,CALe,CAAD,CAAxB;EAQArF,SAAS,CAAC,MAAM;IACZ,MAAMsF,cAAc,GAAGxB,OAAO,GAAG,CAAH,GAAO,CAArC;IAEAM,KAAK,CAACG,KAAN,GAAc/D,UAAU,CAAC8E,cAAD,EAAiB/D,gBAAjB,CAAxB;EACH,CAJQ,EAIN,CAACuC,OAAD,CAJM,CAAT;EAMA,MAAMyB,SAAS,GAAG5E,eAAe,CAACgB,KAAD,EAAQ;IACrC6D,QAAQ,EAAGC,IAAD,IAAUhC,IAAI,KAAK,OAAT,GACdhD,YAAY,CAAC;MACXiF,QAAQ,EAAE,EADC;MAEXC,UAAU,EAAE,IAFD;MAGXC,UAAU,EAAE,oBAHD;MAIXC,aAAa,EAAE;IAJJ,CAAD,CADE,CAOhB;IAPgB,EAQdJ,IAAI,CAACK,QAAL,CAAcC,OATiB;IAUrCC,KAAK,EAAErE,KAAK,CAACO,OAAN,CAAc+D,IAAd,CAAmBC;EAVW,CAAR,CAAjC;EAaA,MAAMC,SAAS,GAAGvF,GAAG,CAAC,CAClB2E,SADkB,EAElB;IAAEF,UAAU,EAAE;EAAd,CAFkB,CAAD,CAArB;EAKA,MAAMe,SAAS,GAAGxF,GAAG,CAAC;IAClB0D,SAAS,EAAE,CAACG,mBAAmB,GAAG;MAAE4B,UAAU,EAAEtC;IAAd,CAAH,GAAgC;MAAEuC,UAAU,EAAEvC;IAAd,CAApD;EADO,CAAD,CAArB;EAIA,MAAMwC,UAAU,gBACZ,oBAAC,UAAD;IACI,WAAW,EAAE,MADjB;IAEI,OAAO,EAAEjD,OAFb;IAGI,KAAK,EAAE6B;EAHX,gBAKI,oBAAC,IAAD,CACI;EADJ;IAEI,aAAa,EAAE3B,kBAFnB;IAGI,KAAK,EAAE2C;EAHX,GAKKxC,KALL,CALJ,CADJ;EAgBA,MAAM6C,QAAQ,gBACV,oBAAC,IAAD;IAAM,KAAK,EAAEJ;EAAb,gBACI,oBAAC,IAAD;IACI,IAAI,EAAEzE,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,IAD7B;IAEI,SAAS,EAAEnB,SAFf;IAGI,IAAI,EAAEwC;EAHV,EADJ,CADJ;EAUA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAEC;EAAb,GACKP,QADL,eAGI,oBAAC,QAAD,CAAU,IAAV;IACI,QAAQ,EAAGsD,KAAD,IAAW;MACjB,IAAIA,KAAK,CAACC,WAAN,CAAkBxC,MAAlB,CAAyB9C,MAAzB,KAAoC,CAAxC,EAA2C;QACvC;MACH;;MAED+C,SAAS,CAACsC,KAAK,CAACC,WAAN,CAAkBxC,MAAnB,CAAT;IACH,CAPL;IAQI,KAAK,EAAE,CACHD,MAAM,CAACrC,IADJ,EAEHyC,aAFG,EAGHM,kBAHG,EAIHf,YAJG;EARX,GAeK2C,UAfL,EAiBKC,QAjBL,CAHJ,CADJ;AAyBH;AAAA"}

package/build/module/Tooltip/TooltipProps.js

@@ -1,2 +1,4 @@
-
+export const tooltipPlacements = ['top', 'bottom', 'left', 'right'];
+export const tooltipSizes = ['small', 'large'];
+export const tooltipBeakPlacements = ['start', 'middle', 'end'];
 //# sourceMappingURL=TooltipProps.js.map

package/build/module/Tooltip/TooltipProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport type TooltipInitialLayout = { height: number, width: number, x: number, y: number };\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip arrow layout.\n     * If 'undefined', the arrow will be centered on tooltip.\n     */\n    arrowLayout?: {\n        placement: TooltipArrowPlacement;\n        offset: number;\n    }\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n\n    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout: TooltipInitialLayout;\n}> {}\n"],"mappings":""}
+{"version":3,"names":["tooltipPlacements","tooltipSizes","tooltipBeakPlacements"],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;\nexport type TooltipPlacement = typeof tooltipPlacements[number];\n\nexport const tooltipSizes = ['small', 'large'] as const;\nexport type TooltipSize = typeof tooltipSizes[number];\n\nexport const tooltipBeakPlacements = ['start', 'middle', 'end'] as const;\nexport type TooltipBeakPlacement = typeof tooltipBeakPlacements[number];\n\nexport type TooltipBeakLayout = {\n    placement: TooltipBeakPlacement;\n    offset: number;\n};\n\nexport type TooltipInitialLayout = {\n    height: number;\n    width: number;\n    x: number;\n    y: number;\n};\n\nexport default interface TooltipProps extends ComponentProps<{\n    /**\n     * Tooltip reference element.\n     */\n    children: React.ReactNode;\n\n    /**\n     * Left position relative to reference element.\n     */\n    left?: number;\n\n    /**\n     * Callback fired when the component requests to be closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * Tooltip placement.\n     * @default 'top'\n     */\n    placement?: TooltipPlacement;\n\n    /**\n     * Right position relative to reference element.\n     */\n    right?: number;\n\n    /**\n     * Tooltip title.\n     */\n    title: ButtonProps['children'];\n\n    /**\n     * Additional style for tooltip wrapper.\n     */\n    tooltipStyle?: ViewProps['style'];\n\n    /**\n     * The additional amount to vertically shift.\n     * @default 4\n     */\n    verticalOffset?: number;\n\n    /**\n     * If `true`, the tooltip is shown.\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Tooltip beak layout.\n     * If 'undefined', the beak will be centered on tooltip.\n     */\n    beakLayout?: TooltipBeakLayout;\n\n    /**\n     * number of tooltip's title lines\n     * @default 1\n     */\n    numberOfTitleLines?: TextProps['numberOfLines'];\n\n    /**\n     * position of tooltip before onLayout call\n     * @default  { height: 0, width: 0 , x: 0, y: 0}\n     */\n    initialLayout?: TooltipInitialLayout;\n\n    /**\n     * Determines the size of the tooltip.\n     * @default  'small'\n     */\n    size?: TooltipSize;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,iBAAiB,GAAG,CAAC,KAAD,EAAQ,QAAR,EAAkB,MAAlB,EAA0B,OAA1B,CAA1B;AAGP,OAAO,MAAMC,YAAY,GAAG,CAAC,OAAD,EAAU,OAAV,CAArB;AAGP,OAAO,MAAMC,qBAAqB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA9B"}

package/build/module/Tooltip/index.js

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

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

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

package/build/module/Typography/LegacyTypography.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Platform, Text } from 'react-native';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+const accessibilityMap = {
+  h1: {
+    accessibilityRole: 'header',
+    'area-level': 1
+  },
+  h2: {
+    accessibilityRole: 'header',
+    'area-level': 2
+  },
+  h3: {
+    accessibilityRole: 'header',
+    'area-level': 3
+  },
+  subtitle1: {
+    accessibilityRole: 'header',
+    'area-level': 6
+  },
+  subtitle2: {
+    accessibilityRole: 'header',
+    'area-level': 6
+  },
+  body1: {
+    accessibilityRole: 'text'
+  },
+  body2: {
+    accessibilityRole: 'text'
+  },
+  caption1: {
+    accessibilityRole: 'text'
+  },
+  caption2: {
+    accessibilityRole: 'text'
+  },
+  flag: {
+    accessibilityRole: 'text'
+  }
+};
+
+function selectColor(theme, colorProp) {
+  var _theme$palette$colorP;
+
+  const palette = theme.palette.text;
+
+  switch (colorProp) {
+    case 'inherit':
+      return Platform.OS === 'web' ? 'inherit' : undefined;
+
+    case 'textPrimary':
+      return palette.primary;
+
+    case 'textSecondary':
+      return palette.secondary;
+
+    case 'textAccent':
+      return palette.accent;
+
+    case 'textHint':
+      return palette.hint;
+  }
+
+  return (_theme$palette$colorP = theme.palette[colorProp]) === null || _theme$palette$colorP === void 0 ? void 0 : _theme$palette$colorP.main;
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flexShrink: 1,
+    ...(Platform.OS === 'web' ? {
+      maxWidth: '100%'
+    } : {})
+  }
+});
+const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref) {
+  const {
+    accessibilityRole,
+    align = 'inherit',
+    ariaLevel,
+    disableFontScaling = false,
+    children,
+    color: colorProp = 'inherit',
+    ellipsizeMode = 'tail',
+    href,
+    numberOfLines,
+    onPress,
+    selectable,
+    style,
+    variant = 'body1',
+    onLayout,
+    onTextLayout
+  } = props;
+  const theme = useTheme();
+  const fontStyle = createFontStyle(theme, {
+    selector: typography => typography[variant],
+    color: selectColor(theme, colorProp)
+  }); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
+
+  const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? {
+    wordWrap: 'normal'
+  } : {};
+  const textStyle = css([styles.root, {
+    textAlign: align === 'inherit' ? 'auto' : align
+  }, textWrapStyle, fontStyle, style]);
+  const accessibility = accessibilityMap[variant];
+  const variantRole = href !== undefined ? 'link' : accessibility === null || accessibility === void 0 ? void 0 : accessibility.accessibilityRole;
+  const variantLevel = accessibility === null || accessibility === void 0 ? void 0 : accessibility['area-level'];
+  return /*#__PURE__*/React.createElement(Text, {
+    ref: ref,
+    accessibilityRole: accessibilityRole || variantRole,
+    allowFontScaling: !disableFontScaling,
+    "aria-level": ariaLevel || variantLevel,
+    children: children,
+    ellipsizeMode: ellipsizeMode // @ts-ignore
+    ,
+    href: href,
+    numberOfLines: numberOfLines,
+    onPress: onPress,
+    selectable: selectable,
+    style: textStyle,
+    onLayout: onLayout,
+    onTextLayout: onTextLayout
+  });
+});
+export default /*#__PURE__*/React.memo(Typography);
+//# sourceMappingURL=LegacyTypography.js.map

package/build/module/Typography/LegacyTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["LegacyTypography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './LegacyTypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n    body1: { accessibilityRole: 'text' },\n    body2: { accessibilityRole: 'text' },\n    caption1: { accessibilityRole: 'text' },\n    caption2: { accessibilityRole: 'text' },\n    flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit',\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}

package/build/module/Typography/LegacyTypographyProps.js

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

package/build/module/Typography/LegacyTypographyProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyTypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag'\n    | 'button1'\n    | 'button2';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: TypographyVariant;\n\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n    onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}

package/build/module/Typography/Typography.js

@@ -1,67 +1,27 @@
 import React from 'react';
 import { Platform, Text } from 'react-native';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
-const accessibilityMap = {
-  h1: {
-    accessibilityRole: 'header',
-    'area-level': 1
-  },
-  h2: {
-    accessibilityRole: 'header',
-    'area-level': 2
-  },
-  h3: {
-    accessibilityRole: 'header',
-    'area-level': 3
-  },
-  subtitle1: {
-    accessibilityRole: 'header',
-    'area-level': 6
-  },
-  subtitle2: {
-    accessibilityRole: 'header',
-    'area-level': 6
-  },
-  body1: {
-    accessibilityRole: 'text'
-  },
-  body2: {
-    accessibilityRole: 'text'
-  },
-  caption1: {
-    accessibilityRole: 'text'
-  },
-  caption2: {
-    accessibilityRole: 'text'
-  },
-  flag: {
-    accessibilityRole: 'text'
-  }
+const accessibilityMap = {// TODO: set accessibilityRole.
+  // h1: { accessibilityRole: 'header', 'aria-level': 1 },
+  // h2: { accessibilityRole: 'header', 'aria-level': 2 },
+  // h3: { accessibilityRole: 'header', 'aria-level': 3 },
+  // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },
+  // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },
+  // body1: { accessibilityRole: 'text' },
+  // body2: { accessibilityRole: 'text' },
+  // caption1: { accessibilityRole: 'text' },
+  // caption2: { accessibilityRole: 'text' },
+  // flag: { accessibilityRole: 'text' },
 };
 
 function selectColor(theme, colorProp) {
-  var _theme$palette$colorP;
-
-  const palette = theme.palette.text;
-
   switch (colorProp) {
     case 'inherit':
       return Platform.OS === 'web' ? 'inherit' : undefined;
 
-    case 'textPrimary':
-      return palette.primary;
-
-    case 'textSecondary':
-      return palette.secondary;
-
-    case 'textAccent':
-      return palette.accent;
-
-    case 'textHint':
-      return palette.hint;
+    default:
+      return theme.palette.text[colorProp];
   }
-
-  return (_theme$palette$colorP = theme.palette[colorProp]) === null || _theme$palette$colorP === void 0 ? void 0 : _theme$palette$colorP.main;
 }
 
 const styles = StyleSheet.create({
@@ -87,12 +47,13 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
     selectable,
     style,
     variant = 'body1',
+    weight = 'medium',
     onLayout,
     onTextLayout
   } = props;
   const theme = useTheme();
   const fontStyle = createFontStyle(theme, {
-    selector: typography => typography[variant],
+    selector: typography => typography[variant][weight],
     color: selectColor(theme, colorProp)
   }); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
 

package/build/module/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n    body1: { accessibilityRole: 'text' },\n    body2: { accessibilityRole: 'text' },\n    caption1: { accessibilityRole: 'text' },\n    caption2: { accessibilityRole: 'text' },\n    flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit',\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
+{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","selectColor","theme","colorProp","OS","undefined","palette","text","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    // TODO: set accessibilityRole.\n    // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n    // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n    // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n    // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n    // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n    // body1: { accessibilityRole: 'text' },\n    // body2: { accessibilityRole: 'text' },\n    // caption1: { accessibilityRole: 'text' },\n    // caption2: { accessibilityRole: 'text' },\n    // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        default:\n            return theme.palette.text[colorProp];\n    }\n}\n\nconst styles = StyleSheet.create({\n    root: {\n        flexShrink: 1,\n        ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n    },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        accessibilityRole,\n        align = 'inherit' as TypographyAlign,\n        ariaLevel,\n        disableFontScaling = false,\n        children,\n        color: colorProp = 'inherit' as TypographyColor,\n        ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1' as FontVariant,\n        weight = 'medium' as FontWeight,\n        onLayout,\n        onTextLayout,\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant][weight],\n        color: selectColor(theme, colorProp),\n    });\n\n    // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n    const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n    const textStyle = css([\n        styles.root,\n        { textAlign: align === 'inherit' ? 'auto' : align },\n        textWrapStyle as TextStyle,\n        fontStyle,\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n    const variantLevel = accessibility?.['area-level'];\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole || variantRole}\n            allowFontScaling={!disableFontScaling}\n            aria-level={ariaLevel || variantLevel}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n            onLayout={onLayout}\n            onTextLayout={onTextLayout}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,cAA/B;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAIA,MAAMC,gBAAkC,GAAG,CACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAXuC,CAA3C;;AAcA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAC/E,QAAQA,SAAR;IACI,KAAK,SAAL;MACI,OAAOT,QAAQ,CAACU,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ;MACI,OAAOH,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBJ,SAAnB,CAAP;EAJR;AAMH;;AAED,MAAMK,MAAM,GAAGV,UAAU,CAACW,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIjB,QAAQ,CAACU,EAAT,KAAgB,KAAhB,GAAwB;MAAEQ,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;AAOA,MAAMC,UAAU,gBAAGpB,KAAK,CAACqB,UAAN,CAAwC,SAASD,UAAT,CAAoBE,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACFC,iBADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAEnB,SAAS,GAAG,SANjB;IAOFoB,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,aATE;IAUFC,OAVE;IAWFC,UAXE;IAYFC,KAZE;IAaFC,OAAO,GAAG,OAbR;IAcFC,MAAM,GAAG,QAdP;IAeFC,QAfE;IAgBFC;EAhBE,IAiBFjB,KAjBJ;EAmBA,MAAMb,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAMkC,SAAS,GAAGrC,eAAe,CAACM,KAAD,EAAQ;IACrCgC,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACN,OAAD,CAAV,CAAoBC,MAApB,CADW;IAErCR,KAAK,EAAErB,WAAW,CAACC,KAAD,EAAQC,SAAR;EAFmB,CAAR,CAAjC,CAtBuF,CA2BvF;;EACA,MAAMiC,aAAa,GAAGX,aAAa,IAAIA,aAAa,GAAG,CAAjC,IAAsC/B,QAAQ,CAACU,EAAT,KAAgB,KAAtD,GAA8D;IAAEiC,QAAQ,EAAE;EAAZ,CAA9D,GAAuF,EAA7G;EAEA,MAAMC,SAAS,GAAGzC,GAAG,CAAC,CAClBW,MAAM,CAACE,IADW,EAElB;IAAE6B,SAAS,EAAErB,KAAK,KAAK,SAAV,GAAsB,MAAtB,GAA+BA;EAA5C,CAFkB,EAGlBkB,aAHkB,EAIlBH,SAJkB,EAKlBL,KALkB,CAAD,CAArB;EAQA,MAAMY,aAAa,GAAGxC,gBAAgB,CAAC6B,OAAD,CAAtC;EACA,MAAMY,WAAW,GAAGjB,IAAI,KAAKnB,SAAT,GAAqB,MAArB,GAA8BmC,aAA9B,aAA8BA,aAA9B,uBAA8BA,aAAa,CAAEvB,iBAAjE;EACA,MAAMyB,YAAY,GAAGF,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAG,YAAH,CAAlC;EAEA,oBACI,oBAAC,IAAD;IACI,GAAG,EAAExB,GADT;IAEI,iBAAiB,EAAEC,iBAAiB,IAAIwB,WAF5C;IAGI,gBAAgB,EAAE,CAACrB,kBAHvB;IAII,cAAYD,SAAS,IAAIuB,YAJ7B;IAKI,QAAQ,EAAErB,QALd;IAMI,aAAa,EAAEE,aANnB,CAOI;IAPJ;IAQI,IAAI,EAAEC,IARV;IASI,aAAa,EAAEC,aATnB;IAUI,OAAO,EAAEC,OAVb;IAWI,UAAU,EAAEC,UAXhB;IAYI,KAAK,EAAEW,SAZX;IAaI,QAAQ,EAAEP,QAbd;IAcI,YAAY,EAAEC;EAdlB,EADJ;AAkBH,CA5DkB,CAAnB;AA8DA,4BAAevC,KAAK,CAACkD,IAAN,CAAW9B,UAAX,CAAf"}

package/build/module/Typography/TypographyProps.js

@@ -1,2 +1,2 @@
-
+export const typographyColors = ['inherit', 'accent', 'accentAlt', 'strong', 'strongInverse', 'base', 'baseInverse', 'baseOpacity', 'baseOpacityInverse', 'weak', 'weakOpacity', 'weakInverse', 'weakOpacityInverse'];
 //# sourceMappingURL=TypographyProps.js.map

package/build/module/Typography/TypographyProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n    | 'inherit'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'warning'\n    | 'error'\n    | 'accent'\n    | 'textPrimary'\n    | 'textSecondary'\n    | 'textAccent'\n    | 'textHint';\n\nexport type TypographyVariant =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'body1'\n    | 'body2'\n    | 'caption1'\n    | 'caption2'\n    | 'flag'\n    | 'button1'\n    | 'button2';\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n    [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: TypographyVariant;\n\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n     onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}
+{"version":3,"names":["typographyColors"],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps, TextStyle } from 'react-native';\nimport type { FontVariant, FontWeight } from '@fountain-ui/styles';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | TextStyle['textAlign'];\n\nexport const typographyColors = [\n    'inherit',\n    'accent',\n    'accentAlt',\n    'strong',\n    'strongInverse',\n    'base',\n    'baseInverse',\n    'baseOpacity',\n    'baseOpacityInverse',\n    'weak',\n    'weakOpacity',\n    'weakInverse',\n    'weakOpacityInverse',\n] as const;\n\nexport type TypographyColor = typeof typographyColors[number];\n\nexport interface Accessibility {\n    accessibilityRole: AccessibilityProps['accessibilityRole'];\n    'area-level'?: number;\n}\n\nexport type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;\n\nexport default interface TypographyProps extends ComponentProps<{\n    /**\n     * Applies HTML tag at web and communicates purpose of component at app\n     */\n    accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n    /**\n     * Set the text-align on the component.\n     * The value 'justify' is not supported on Android and fallbacks to left.\n     * @default 'inherit'\n     */\n    align?: TypographyAlign;\n\n    /**\n     * Applies HTML heading level\n     */\n    ariaLevel?: number;\n\n    /**\n     * Specifies whether fonts should scale to respect Text Size accessibility settings.\n     * @default false\n     */\n    disableFontScaling?: boolean;\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'inherit'\n     */\n    color?: TypographyColor;\n\n    /**\n     * The text ellipsis mode.\n     * @default 'tail'\n     */\n    ellipsizeMode?: TextProps['ellipsizeMode'];\n\n    /**\n     * Internal use only. The hyperlink of the text.\n     */\n    href?: string;\n\n    /**\n     * Used to truncate the text with an ellipsis after computing the text\n     * layout, including line wrapping, such that the total number of lines\n     * does not exceed this number.\n     */\n    numberOfLines?: TextProps['numberOfLines'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    onPress?: TextProps['onPress'];\n\n    /**\n     * Lets the user select text, to use the native copy and paste functionality.\n     */\n    selectable?: boolean;\n\n    /**\n     * Applies the theme typography styles.\n     * @default 'body1'\n     */\n    variant?: FontVariant;\n\n    /**\n     * Determines the font weight.\n     * @default 'medium'\n     */\n    weight?: FontWeight;\n\n    /**\n     * Callback that is called when the text layout has been calculated.\n     */\n    onTextLayout?: TextProps['onTextLayout'];\n\n    /**\n     * Callback that is called when the layout of the Text component changes.\n     */\n    onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":"AAOA,OAAO,MAAMA,gBAAgB,GAAG,CAC5B,SAD4B,EAE5B,QAF4B,EAG5B,WAH4B,EAI5B,QAJ4B,EAK5B,eAL4B,EAM5B,MAN4B,EAO5B,aAP4B,EAQ5B,aAR4B,EAS5B,oBAT4B,EAU5B,MAV4B,EAW5B,aAX4B,EAY5B,aAZ4B,EAa5B,oBAb4B,CAAzB"}

package/build/module/Typography/index.js

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