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

package/build/commonjs/Tooltip/Tooltip.js

@@ -11,11 +11,9 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _styles = require("@fountain-ui/styles");
-
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
-var _styles2 = require("../styles");
+var _styles = require("../styles");
 
 var _Beaks = _interopRequireDefault(require("./Beaks"));
 
@@ -57,7 +55,7 @@ const getFlexDirection = placement => {
 };
 
 const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   return {
     root: {
       position: 'absolute',
@@ -70,14 +68,14 @@ const useStyles = function () {
     },
     small: {
       borderRadius: theme.shape.radius.sm,
+      paddingBottom: theme.spacing(1.75),
       paddingHorizontal: theme.spacing(2),
-      paddingVertical: theme.spacing(1.5)
+      paddingTop: theme.spacing(1.5)
     },
     large: {
       borderRadius: 5,
-      paddingBottom: theme.spacing(2.5),
       paddingHorizontal: theme.spacing(4),
-      paddingTop: theme.spacing(2)
+      paddingVertical: theme.spacing(2)
     }
   };
 };
@@ -103,7 +101,7 @@ function Tooltip(props) {
     offset: beakOffset,
     placement: beakPlacement
   } = beakLayout;
-  const theme = (0, _styles2.useTheme)();
+  const theme = (0, _styles.useTheme)();
   const styles = useStyles();
   const [layout, setLayout] = (0, _react.useState)(initialLayout);
   const scale = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -130,7 +128,7 @@ function Tooltip(props) {
     }),
     [placement]: totalOffset
   };
-  const contentStyle = (0, _styles2.css)([styles.content, styles[size], isVerticalPlacement ? {
+  const contentStyle = (0, _styles.css)([styles.content, styles[size], isVerticalPlacement ? {
     width: '100%'
   } : {
     flexGrow: 1,
@@ -140,25 +138,14 @@ function Tooltip(props) {
     const nextScaleValue = visible ? 1 : 0;
     scale.value = (0, _reactNativeReanimated.withTiming)(nextScaleValue, ANIMATION_CONFIG);
   }, [visible]);
-  const fontStyle = (0, _styles2.createFontStyle)(theme, {
-    selector: typo => size === 'large' ? (0, _styles.typographyOf)({
-      fontSize: 13,
-      lineHeight: 19.5,
-      fontFamily: 'Pretendard-Regular',
-      letterSpacing: 0
-    }) // TODO: change caption2.
-    : (0, _styles.typographyOf)({
-      fontSize: 11,
-      lineHeight: 15.4,
-      fontFamily: 'Pretendard-Regular',
-      letterSpacing: 0
-    }),
+  const fontStyle = (0, _styles.createFontStyle)(theme, {
+    selector: typo => size === 'large' ? typo.body3.regular : typo.caption2.regular,
     color: theme.palette.text.strongInverse
   });
-  const textStyle = (0, _styles2.css)([fontStyle, {
+  const textStyle = (0, _styles.css)([fontStyle, {
     flexShrink: 1
   }]);
-  const beakStyle = (0, _styles2.css)({
+  const beakStyle = (0, _styles.css)({
     transform: [isVerticalPlacement ? {
       translateX: beakOffset
     } : {

package/build/commonjs/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","useTheme","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","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","Platform","select","web","display","default","contentStyle","css","flexGrow","flexShrink","useEffect","nextScaleValue","withTiming","fontStyle","createFontStyle","selector","typo","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","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            : typographyOf({\n                fontSize: 11,\n                lineHeight: 15.4,\n                fontFamily: 'Pretendard-Regular',\n                letterSpacing: 0,\n            }),\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":"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"}
+{"version":3,"names":["DEFAULT_BEAK_LAYOUT","offset","placement","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","getFlexDirection","useStyles","theme","useTheme","root","position","zIndex","tooltip","content","backgroundColor","palette","fill","base","paddingHorizontal","spacing","paddingVertical","small","borderRadius","shape","radius","sm","paddingBottom","paddingTop","large","Tooltip","props","beakLayout","children","initialLayout","left","onClose","right","numberOfTitleLines","size","style","title","tooltipStyle","verticalOffset","visible","beakOffset","beakPlacement","styles","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","flexDirection","isVerticalPlacement","totalOffset","tooltipLayoutStyle","alignItems","undefined","overflow","Platform","select","web","display","default","contentStyle","css","flexGrow","flexShrink","useEffect","nextScaleValue","withTiming","fontStyle","createFontStyle","selector","typo","body3","regular","caption2","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            paddingBottom: theme.spacing(1.75),\n            paddingHorizontal: theme.spacing(2),\n            paddingTop: theme.spacing(1.5),\n        },\n        large: {\n            borderRadius: 5,\n            paddingHorizontal: theme.spacing(4),\n            paddingVertical: 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            ? typo.body3.regular\n            : typo.caption2.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;;AACA;;AAEA;;AAGA;;AACA;;AAGA;;;;;;;;AAEA,MAAMA,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,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,QAAQ,EAAE,UADR;MAEFC,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC;IAFnB,CADH;IAKHC,OAAO,EAAE;MACLC,eAAe,EAAEP,KAAK,CAACQ,OAAN,CAAcC,IAAd,CAAmBC,IAD/B;MAELC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAFd;MAGLC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAHZ,CALN;IAUHE,KAAK,EAAE;MACHC,YAAY,EAAEf,KAAK,CAACgB,KAAN,CAAYC,MAAZ,CAAmBC,EAD9B;MAEHC,aAAa,EAAEnB,KAAK,CAACY,OAAN,CAAc,IAAd,CAFZ;MAGHD,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAHhB;MAIHQ,UAAU,EAAEpB,KAAK,CAACY,OAAN,CAAc,GAAd;IAJT,CAVJ;IAgBHS,KAAK,EAAE;MACHN,YAAY,EAAE,CADX;MAEHJ,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAFhB;MAGHC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,CAAd;IAHd;EAhBJ,CAAP;AAsBH,CAzBD;;AA2Be,SAASU,OAAT,CAAiBC,KAAjB,EAAsC;EACjD,MAAM;IACFC,UAAU,GAAGpC,mBADX;IAEFqC,QAFE;IAGFC,aAAa,GAAGnC,cAHd;IAIFoC,IAJE;IAKFC,OALE;IAMFtC,SAAS,GAAG,KANV;IAOFuC,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;IACFlC,MAAM,EAAEgD,UADN;IAEF/C,SAAS,EAAEgD;EAFT,IAGFd,UAHJ;EAKA,MAAMxB,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMsC,MAAM,GAAGxC,SAAS,EAAxB;EAEA,MAAM,CAACyC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAShB,aAAT,CAA5B;EAEA,MAAMiB,KAAK,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAAd;EAEA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,OAAO;IAC1CC,SAAS,EAAE,CAAC;MAAEJ,KAAK,EAAEA,KAAK,CAACK;IAAf,CAAD;EAD+B,CAAP,CAAjB,EAElB,EAFkB,CAAtB;EAIA,MAAMC,aAAa,GAAGnD,gBAAgB,CAACR,SAAD,CAAtC;EAEA,MAAM4D,mBAAmB,GAAG5D,SAAS,KAAK,KAAd,IAAuBA,SAAS,KAAK,QAAjE;EAEA,MAAM6D,WAAW,GAAG,EAAE,CAACD,mBAAmB,GAAGV,MAAM,CAAC/C,MAAV,GAAmB+C,MAAM,CAAChD,KAA9C,IAAuD2C,cAAzD,CAApB;EACA,MAAMiB,kBAAsC,GAAG;IAC3CC,UAAU,EAAEf,aAAa,KAAK,OAAlB,GACN,YADM,GAENA,aAAa,KAAK,KAAlB,GACI,UADJ,GAEI,QALiC;IAM3CW,aAN2C;IAO3CtB,IAP2C;IAQ3CE,KAR2C;IAS3CpC,MAAM,EAAE2C,OAAO,GAAGkB,SAAH,GAAe,CATa;IAU3CC,QAAQ,EAAEnB,OAAO,GAAGkB,SAAH,GAAe,QAVW;IAW3C,GAAGE,qBAAA,CAASC,MAAT,CAAgB;MACfC,GAAG,EAAE;QACDC,OAAO,EAAEvB,OAAO,GAAG,MAAH,GAAY;MAD3B,CADU;MAIfwB,OAAO,EAAE;IAJM,CAAhB,CAXwC;IAiB3C,CAACtE,SAAD,GAAa6D;EAjB8B,CAA/C;EAoBA,MAAMU,YAAY,GAAG,IAAAC,WAAA,EAAI,CACrBvB,MAAM,CAACjC,OADc,EAErBiC,MAAM,CAACR,IAAD,CAFe,EAGrBmB,mBAAmB,GACb;IAAE1D,KAAK,EAAE;EAAT,CADa,GAEb;IAAEuE,QAAQ,EAAE,CAAZ;IAAeC,UAAU,EAAE;EAA3B,CALe,CAAJ,CAArB;EAQA,IAAAC,gBAAA,EAAU,MAAM;IACZ,MAAMC,cAAc,GAAG9B,OAAO,GAAG,CAAH,GAAO,CAArC;IAEAO,KAAK,CAACK,KAAN,GAAc,IAAAmB,iCAAA,EAAWD,cAAX,EAA2BtE,gBAA3B,CAAd;EACH,CAJD,EAIG,CAACwC,OAAD,CAJH;EAMA,MAAMgC,SAAS,GAAG,IAAAC,uBAAA,EAAgBrE,KAAhB,EAAuB;IACrCsE,QAAQ,EAAGC,IAAD,IAAUxC,IAAI,KAAK,OAAT,GACdwC,IAAI,CAACC,KAAL,CAAWC,OADG,GAEdF,IAAI,CAACG,QAAL,CAAcD,OAHiB;IAIrCE,KAAK,EAAE3E,KAAK,CAACQ,OAAN,CAAcoE,IAAd,CAAmBC;EAJW,CAAvB,CAAlB;EAOA,MAAMC,SAAS,GAAG,IAAAhB,WAAA,EAAI,CAClBM,SADkB,EAElB;IAAEJ,UAAU,EAAE;EAAd,CAFkB,CAAJ,CAAlB;EAKA,MAAMe,SAAS,GAAG,IAAAjB,WAAA,EAAI;IAClBf,SAAS,EAAE,CAACG,mBAAmB,GAAG;MAAE8B,UAAU,EAAE3C;IAAd,CAAH,GAAgC;MAAE4C,UAAU,EAAE5C;IAAd,CAApD;EADO,CAAJ,CAAlB;;EAIA,MAAM6C,UAAU,gBACZ,6BAAC,mBAAD;IACI,WAAW,EAAE,MADjB;IAEI,OAAO,EAAEtD,OAFb;IAGI,KAAK,EAAEiC;EAHX,gBAKI,6BAAC,iBAAD,CACI;EADJ;IAEI,aAAa,EAAE/B,kBAFnB;IAGI,KAAK,EAAEgD;EAHX,GAKK7C,KALL,CALJ,CADJ;;EAgBA,MAAMkD,QAAQ,gBACV,6BAAC,iBAAD;IAAM,KAAK,EAAEJ;EAAb,gBACI,6BAAC,cAAD;IACI,IAAI,EAAE/E,KAAK,CAACQ,OAAN,CAAcC,IAAd,CAAmBC,IAD7B;IAEI,SAAS,EAAEpB,SAFf;IAGI,IAAI,EAAEyC;EAHV,EADJ,CADJ;;EAUA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEC;EAAb,GACKP,QADL,eAGI,6BAAC,8BAAD,CAAU,IAAV;IACI,QAAQ,EAAG2D,KAAD,IAAW;MACjB,IAAIA,KAAK,CAACC,WAAN,CAAkB7C,MAAlB,CAAyB/C,MAAzB,KAAoC,CAAxC,EAA2C;QACvC;MACH;;MAEDgD,SAAS,CAAC2C,KAAK,CAACC,WAAN,CAAkB7C,MAAnB,CAAT;IACH,CAPL;IAQI,KAAK,EAAE,CACHD,MAAM,CAACrC,IADJ,EAEH2C,aAFG,EAGHO,kBAHG,EAIHlB,YAJG;EARX,GAeKgD,UAfL,EAiBKC,QAjBL,CAHJ,CADJ;AAyBH;;AAAA"}

package/build/commonjs/Tooltip/index.js

@@ -3,14 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  tooltipBeakPlacements: true,
+  tooltipPlacements: true,
+  tooltipSizes: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "tooltipBeakPlacements", {
+  enumerable: true,
+  get: function () {
+    return _TooltipProps.tooltipBeakPlacements;
+  }
+});
+Object.defineProperty(exports, "tooltipPlacements", {
+  enumerable: true,
+  get: function () {
+    return _TooltipProps.tooltipPlacements;
+  }
+});
+Object.defineProperty(exports, "tooltipSizes", {
+  enumerable: true,
+  get: function () {
+    return _TooltipProps.tooltipSizes;
+  }
+});
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
+var _TooltipProps = require("./TooltipProps");
+
+var _Beaks = require("./Beaks");
+
+Object.keys(_Beaks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Beaks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Beaks[key];
+    }
+  });
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps } from './TooltipProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Tooltip';\nexport type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';\nexport { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';\nexport * from './Beaks';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/commonjs/Typography/Typography.js

@@ -55,6 +55,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
     color: colorProp = 'inherit',
     ellipsizeMode = 'tail',
     href,
+    lineHeight,
     numberOfLines,
     onPress,
     selectable,
@@ -66,7 +67,11 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   } = props;
   const theme = (0, _styles.useTheme)();
   const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typography => typography[variant][weight],
+    selector: typography => {
+      var _typography$variant;
+
+      return (_typography$variant = typography[variant]) === null || _typography$variant === void 0 ? void 0 : _typography$variant[weight];
+    },
     color: selectColor(theme, colorProp)
   }); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
 
@@ -75,7 +80,9 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
   } : {};
   const textStyle = (0, _styles.css)([styles.root, {
     textAlign: align === 'inherit' ? 'auto' : align
-  }, textWrapStyle, fontStyle, style]);
+  }, textWrapStyle, fontStyle, lineHeight ? {
+    lineHeight
+  } : undefined, 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'];

package/build/commonjs/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","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":"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"}
+{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","lineHeight","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","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        lineHeight,\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        lineHeight ? { lineHeight } : undefined,\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/commonjs/Typography/TypographyProps.js.map

@@ -1 +1 @@
-{"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":";;;;;;AAOO,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"}
+{"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     * Defines the vertical spacing between lines of text.\n     */\n    lineHeight?: TextStyle['lineHeight'];\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":";;;;;;AAOO,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/commonjs/Typography/index.js

@@ -9,8 +9,16 @@ Object.defineProperty(exports, "default", {
     return _Typography.default;
   }
 });
+Object.defineProperty(exports, "typographyColors", {
+  enumerable: true,
+  get: function () {
+    return _TypographyProps.typographyColors;
+  }
+});
 
 var _Typography = _interopRequireDefault(require("./Typography"));
 
+var _TypographyProps = require("./TypographyProps");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Typography';\nexport type { default as TypographyProps } from './TypographyProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Typography';\nexport type { default as TypographyProps } from './TypographyProps';\nexport { typographyColors } from './TypographyProps';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEA"}

package/build/commonjs/hooks/useBreakpointUp.js

@@ -15,9 +15,12 @@ function useBreakpointUp(target, yes, no) {
 
   const isUp = (0, _react.useMemo)(() => {
     switch (target) {
-      case 'xs':
+      case 'xxs':
         return true;
 
+      case 'xs':
+        return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';
+
       case 'sm':
         return current === 'sm' || current === 'md' || current === 'lg';
 

package/build/commonjs/hooks/useBreakpointUp.js.map

@@ -1 +1 @@
-{"version":3,"names":["useBreakpointUp","target","yes","no","theme","useTheme","current","breakpoints","isUp","useMemo"],"sources":["useBreakpointUp.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Theme } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R {\n    const theme = useTheme();\n\n    const current = theme.breakpoints.current;\n\n    // TODO: Needs to refactor\n    const isUp = useMemo<boolean>(() => {\n        switch (target) {\n            case 'xs':\n                return true;\n            case 'sm':\n                return current === 'sm' || current === 'md' || current === 'lg';\n            case 'md':\n                return current === 'md' || current === 'lg';\n            case 'lg':\n                return current === 'lg';\n        }\n    }, [target, current]);\n\n    return isUp ? yes : no;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAIe,SAASA,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAGF,KAAK,CAACG,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;EACA,MAAME,IAAI,GAAG,IAAAC,cAAA,EAAiB,MAAM;IAChC,QAAQR,MAAR;MACI,KAAK,IAAL;QACI,OAAO,IAAP;;MACJ,KAAK,IAAL;QACI,OAAOK,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAA3D;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAvC;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAnB;IARR;EAUH,CAXY,EAWV,CAACL,MAAD,EAASK,OAAT,CAXU,CAAb;EAaA,OAAOE,IAAI,GAAGN,GAAH,GAASC,EAApB;AACH;;AAAA"}
+{"version":3,"names":["useBreakpointUp","target","yes","no","theme","useTheme","current","breakpoints","isUp","useMemo"],"sources":["useBreakpointUp.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Theme } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport default function useBreakpointUp<R>(target: Breakpoint, yes: R, no: R): R {\n    const theme = useTheme();\n\n    const current = theme.breakpoints.current;\n\n    // TODO: Needs to refactor\n    const isUp = useMemo<boolean>(() => {\n        switch (target) {\n            case 'xxs':\n                return true;\n            case 'xs':\n                return current === 'xs' || current === 'sm' || current === 'md' || current === 'lg';\n            case 'sm':\n                return current === 'sm' || current === 'md' || current === 'lg';\n            case 'md':\n                return current === 'md' || current === 'lg';\n            case 'lg':\n                return current === 'lg';\n        }\n    }, [target, current]);\n\n    return isUp ? yes : no;\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAIe,SAASA,eAAT,CAA4BC,MAA5B,EAAgDC,GAAhD,EAAwDC,EAAxD,EAAkE;EAC7E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,OAAO,GAAGF,KAAK,CAACG,WAAN,CAAkBD,OAAlC,CAH6E,CAK7E;;EACA,MAAME,IAAI,GAAG,IAAAC,cAAA,EAAiB,MAAM;IAChC,QAAQR,MAAR;MACI,KAAK,KAAL;QACI,OAAO,IAAP;;MACJ,KAAK,IAAL;QACI,OAAOK,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAApD,IAA4DA,OAAO,KAAK,IAA/E;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAhC,IAAwCA,OAAO,KAAK,IAA3D;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,IAAvC;;MACJ,KAAK,IAAL;QACI,OAAOA,OAAO,KAAK,IAAnB;IAVR;EAYH,CAbY,EAaV,CAACL,MAAD,EAASK,OAAT,CAbU,CAAb;EAeA,OAAOE,IAAI,GAAGN,GAAH,GAASC,EAApB;AACH;;AAAA"}

package/build/commonjs/hooks/useContentContainerStyle.js

@@ -7,49 +7,42 @@ exports.default = useContentContainerStyle;
 
 var _styles = require("../styles");
 
-var _useBreakpointUp = _interopRequireDefault(require("./useBreakpointUp"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function getMaxWidth(theme, breakpoint, customMaxWidth) {
+  switch (breakpoint) {
+    case 'lg':
+    case 'md':
+      return customMaxWidth ?? theme.breakpoints.values[breakpoint];
 
-const defaultConfig = {
-  breakpoint: 'lg',
-  maxWidth: 'md',
-  styleProvider: () => undefined
-}; // TODO: Needs to refactor
+    default:
+      return undefined;
+  }
+}
 
-function getMaxWidth(theme, breakpoint) {
+function getPaddingHorizontal(theme, breakpoint) {
   switch (breakpoint) {
-    case 'xs':
-      return theme.breakpoints.values['sm'];
-
     case 'sm':
-      return theme.breakpoints.values['md'];
+      return theme.spacing(6);
 
-    case 'md':
-      return theme.breakpoints.values['lg'];
-
-    case 'lg':
-      return 'none';
+    default:
+      return theme.spacing(4);
   }
 }
 
 function useContentContainerStyle() {
-  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
-    breakpoint,
-    maxWidth,
+    maxWidth: customMaxWidth,
     styleProvider
-  } = { ...defaultConfig,
-    ...config
-  };
+  } = config;
   const theme = (0, _styles.useTheme)();
+  const currentBreakpoint = theme.breakpoints.current;
   const additionalStyle = styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider(theme);
-  const yesStyle = [{
+  return (0, _styles.css)([{
     alignSelf: 'center',
-    maxWidth: getMaxWidth(theme, maxWidth),
+    maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
+    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
     width: '100%'
-  }, additionalStyle];
-  return (0, _useBreakpointUp.default)(breakpoint, yesStyle, additionalStyle);
+  }, additionalStyle]);
 }
 
 ;

package/build/commonjs/hooks/useContentContainerStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","useTheme","additionalStyle","yesStyle","alignSelf","width","useBreakpointUp"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"],"mappings":";;;;;;;AAEA;;AACA;;;;AAYA,MAAMA,aAA+B,GAAG;EACpCC,UAAU,EAAE,IADwB;EAEpCC,QAAQ,EAAE,IAF0B;EAGpCC,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;EAC9E,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAO,MAAP;EARR;AAUH;;AAEc,SAASC,wBAAT,GAAyF;EAAA,IAAvDC,MAAuD,uEAAtCV,aAAsC;EACpG,MAAM;IACFC,UADE;IAEFC,QAFE;IAGFC;EAHE,IAIF,EACA,GAAGH,aADH;IAEA,GAAGU;EAFH,CAJJ;EASA,MAAMJ,KAAK,GAAG,IAAAK,gBAAA,GAAd;EAEA,MAAMC,eAAe,GAAGT,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;EAEA,MAAMO,QAA+B,GAAG,CACpC;IACIC,SAAS,EAAE,QADf;IAEIZ,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;IAGIa,KAAK,EAAE;EAHX,CADoC,EAMpCH,eANoC,CAAxC;EASA,OAAO,IAAAI,wBAAA,EAAgBf,UAAhB,EAA4BY,QAA5B,EAAsCD,eAAtC,CAAP;AACH;;AAAA"}
+{"version":3,"names":["getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","useTheme","currentBreakpoint","current","additionalStyle","css","alignSelf","paddingHorizontal","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n    maxWidth?: number;\n    styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n    switch (breakpoint) {\n        case 'lg':\n        case 'md':\n            return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n        default:\n            return undefined;\n    }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n    switch (breakpoint) {\n        case 'sm':\n            return theme.spacing(6);\n        default:\n            return theme.spacing(4);\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = {}): FountainUiStyle {\n    const {\n        maxWidth: customMaxWidth,\n        styleProvider,\n    } = config;\n\n    const theme = useTheme();\n\n    const currentBreakpoint = theme.breakpoints.current;\n\n    const additionalStyle = styleProvider?.(theme);\n\n    return css([\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),\n            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),\n            width: '100%',\n        },\n        additionalStyle,\n    ]);\n};\n"],"mappings":";;;;;;;AACA;;AAUA,SAASA,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAEc,SAASC,wBAAT,GAAwE;EAAA,IAAtCC,MAAsC,uEAArB,EAAqB;EACnF,MAAM;IACFC,QAAQ,EAAER,cADR;IAEFS;EAFE,IAGFF,MAHJ;EAKA,MAAMT,KAAK,GAAG,IAAAY,gBAAA,GAAd;EAEA,MAAMC,iBAAiB,GAAGb,KAAK,CAACG,WAAN,CAAkBW,OAA5C;EAEA,MAAMC,eAAe,GAAGJ,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGX,KAAH,CAArC;EAEA,OAAO,IAAAgB,WAAA,EAAI,CACP;IACIC,SAAS,EAAE,QADf;IAEIP,QAAQ,EAAEX,WAAW,CAACC,KAAD,EAAQa,iBAAR,EAA2BX,cAA3B,CAFzB;IAGIgB,iBAAiB,EAAEZ,oBAAoB,CAACN,KAAD,EAAQa,iBAAR,CAH3C;IAIIM,KAAK,EAAE;EAJX,CADO,EAOPJ,eAPO,CAAJ,CAAP;AASH;;AAAA"}

package/build/commonjs/index.js

@@ -51,6 +51,7 @@ var _exportNames = {
   Radio: true,
   RadioGroup: true,
   Row: true,
+  Section: true,
   ShadowView: true,
   Slide: true,
   Slider: true,
@@ -344,6 +345,12 @@ Object.defineProperty(exports, "Row", {
     return _Row.default;
   }
 });
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function () {
+    return _Section.default;
+  }
+});
 Object.defineProperty(exports, "ShadowView", {
   enumerable: true,
   get: function () {
@@ -1175,6 +1182,20 @@ Object.keys(_Row).forEach(function (key) {
   });
 });
 
+var _Section = _interopRequireWildcard(require("./Section"));
+
+Object.keys(_Section).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Section[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Section[key];
+    }
+  });
+});
+
 var _ShadowView = _interopRequireWildcard(require("./ShadowView"));
 
 Object.keys(_ShadowView).forEach(function (key) {

package/build/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as BottomSheetActions } from './BottomSheetActions';\nexport * from './BottomSheetActions';\n\nexport { default as BottomSheetContent } from './BottomSheetContent';\nexport * from './BottomSheetContent';\n\nexport { default as BottomSheetTitle } from './BottomSheetTitle';\nexport * from './BottomSheetTitle';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as ButtonSet } from './ButtonSet';\nexport * from './ButtonSet';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Empty } from './Empty';\nexport * from './Empty';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as ShadowView } from './ShadowView';\nexport * from './ShadowView';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toggle } from './Toggle';\nexport * from './Toggle';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAEA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from './styles';\n\nexport * from './types';\n\nexport * from './hooks';\n\nexport * from './utils';\n\nexport * from './store';\n\nexport { default as Accordion } from './Accordion';\nexport * from './Accordion';\n\nexport { default as AppBar } from './AppBar';\nexport * from './AppBar';\n\nexport { default as AspectRatio } from './AspectRatio';\nexport * from './AspectRatio';\n\nexport { default as Avatar } from './Avatar';\nexport * from './Avatar';\n\nexport { default as Badge } from './Badge';\nexport * from './Badge';\n\nexport { default as BottomSheetActions } from './BottomSheetActions';\nexport * from './BottomSheetActions';\n\nexport { default as BottomSheetContent } from './BottomSheetContent';\nexport * from './BottomSheetContent';\n\nexport { default as BottomSheetTitle } from './BottomSheetTitle';\nexport * from './BottomSheetTitle';\n\nexport { default as Button } from './Button';\nexport * from './Button';\n\nexport { default as ButtonBase } from './ButtonBase';\nexport * from './ButtonBase';\n\nexport { default as ButtonSet } from './ButtonSet';\nexport * from './ButtonSet';\n\nexport { default as Card } from './Card';\nexport * from './Card';\n\nexport { default as CardActions } from './CardActions';\nexport * from './CardActions';\n\nexport { default as CardContent } from './CardContent';\nexport * from './CardContent';\n\nexport { default as CardMedia } from './CardMedia';\nexport * from './CardMedia';\n\nexport { default as Checkbox } from './Checkbox';\nexport * from './Checkbox';\n\nexport { default as Chip } from './Chip';\nexport * from './Chip';\n\nexport { default as CircularProgress } from './CircularProgress';\nexport * from './CircularProgress';\n\nexport { default as Column } from './Column';\nexport * from './Column';\n\nexport { default as Dialog } from './Dialog';\nexport * from './Dialog';\n\nexport { default as DialogActions } from './DialogActions';\nexport * from './DialogActions';\n\nexport { default as DialogContent } from './DialogContent';\nexport * from './DialogContent';\n\nexport { default as DialogMedia } from './DialogMedia';\nexport * from './DialogMedia';\n\nexport { default as DialogTitle } from './DialogTitle';\nexport * from './DialogTitle';\n\nexport { default as Divider } from './Divider';\nexport * from './Divider';\n\nexport { default as Empty } from './Empty';\nexport * from './Empty';\n\nexport { default as Fab } from './Fab';\nexport * from './Fab';\n\nexport { default as IconButton } from './IconButton';\nexport * from './IconButton';\n\nexport { default as Image } from './Image';\nexport * from './Image';\n\nexport * from './ImageCore';\n\nexport { default as Link } from './Link';\nexport * from './Link';\n\nexport { default as List } from './List';\nexport * from './List';\n\nexport { default as ListItem } from './ListItem';\nexport * from './ListItem';\n\nexport { default as ListItemIcon } from './ListItemIcon';\nexport * from './ListItemIcon';\n\nexport { default as ListItemSecondaryAction } from './ListItemSecondaryAction';\nexport * from './ListItemSecondaryAction';\n\nexport { default as ListItemText } from './ListItemText';\nexport * from './ListItemText';\n\nexport { default as ListSubheader } from './ListSubheader';\nexport * from './ListSubheader';\n\nexport { default as Menu } from './Menu';\nexport * from './Menu';\n\nexport { default as MenuItem } from './MenuItem';\nexport * from './MenuItem';\n\nexport { default as Modal, createModalCloseEvent } from './Modal';\nexport type { ModalCloseEvent } from './Modal';\nexport * from './Modal';\n\nexport { default as Pagination } from './Pagination';\nexport * from './Pagination';\n\nexport { default as PaginationItem } from './PaginationItem';\nexport * from './PaginationItem';\n\nexport { default as Paper } from './Paper';\nexport * from './Paper';\n\nexport { default as Portal } from './Portal';\nexport * from './Portal';\n\nexport { default as Radio } from './Radio';\nexport * from './Radio';\n\nexport { default as RadioGroup } from './RadioGroup';\nexport * from './RadioGroup';\n\nexport { default as Row } from './Row';\nexport * from './Row';\n\nexport { default as Section } from './Section';\nexport * from './Section';\n\nexport { default as ShadowView } from './ShadowView';\nexport * from './ShadowView';\n\nexport { default as Slide } from './Slide';\nexport * from './Slide';\n\nexport { default as Slider } from './Slider';\nexport * from './Slider';\n\nexport { default as Snackbar } from './Snackbar';\nexport * from './Snackbar';\n\nexport { default as SnackbarContent } from './SnackbarContent';\nexport * from './SnackbarContent';\n\nexport { default as Spacer } from './Spacer';\nexport * from './Spacer';\n\nexport { default as SvgIcon } from './SvgIcon';\nexport * from './SvgIcon';\n\nexport { default as Switch } from './Switch';\nexport * from './Switch';\n\nexport { default as Tab } from './Tab';\nexport * from './Tab';\n\nexport { default as TabBase } from './TabBase';\nexport * from './TabBase';\n\nexport { default as Tabs } from './Tabs';\nexport * from './Tabs';\n\nexport { default as TextField } from './TextField';\nexport * from './TextField';\n\nexport { default as Toggle } from './Toggle';\nexport * from './Toggle';\n\nexport { default as Toolbar } from './Toolbar';\nexport * from './Toolbar';\n\nexport { default as Tooltip } from './Tooltip';\nexport * from './Tooltip';\n\nexport { default as Typography } from './Typography';\nexport * from './Typography';\n\nexport * from './animated';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAEA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/module/Accordion/Accordion.js

@@ -51,6 +51,7 @@ export default function Accordion(props) {
     container: containerStyle,
     content: contentStyle,
     contentFont: contentFontStyle,
+    iconContainer: iconContainerStyle,
     subTitleFont: subTitleFontStyle,
     title: titleStyle,
     titleFont: titleFontStyle
@@ -102,7 +103,9 @@ export default function Accordion(props) {
     flexShrink: 1
   }, /*#__PURE__*/React.createElement(Row, {
     alignItems: 'center'
-  }, LeftComponent ? /*#__PURE__*/React.createElement(React.Fragment, null, LeftComponent, /*#__PURE__*/React.createElement(Spacer, {
+  }, LeftComponent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: iconContainerStyle
+  }, LeftComponent), /*#__PURE__*/React.createElement(Spacer, {
     size: 1.5
   })) : null, /*#__PURE__*/React.createElement(Text, {
     allowFontScaling: false,