@fountain-ui/core 1.11.7 → 1.11.11

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.11](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.11) (2021-10-20)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.11.10](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.10) (2021-10-13)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.11.9](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.9) (2021-10-13)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+## [1.11.8](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.8) (2021-10-12)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
 ## [1.11.7](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.11.7) (2021-10-12)
 
 **Note:** Version bump only for package @fountain-ui/core

package/build/commonjs/Accordion/Accordion.js

@@ -7,12 +7,14 @@ exports.default = Accordion;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 
 var _icons = require("../internal/icons");
 
 var _index = require("../index");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,16 +43,18 @@ function Accordion(props) {
   } = props;
   const styles = useStyles();
   const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
-  const rotate = (0, _reactNativeReanimated.useSharedValue)(0);
-  const animatedChevronDownStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+
+  const rotate = _reactNativeReanimated.default.useSharedValue(0);
+
+  const animatedChevronDownStyles = _reactNativeReanimated.default.useAnimatedStyle(() => ({
     transform: [{
       rotate: `${rotate.value}deg`
     }]
   }));
 
   const onPress = () => {
-    setIsExpanded(!isExpanded);
-    rotate.value = (0, _reactNativeReanimated.withTiming)(isExpanded ? 180 : 0, ANIMATION_OPTION);
+    setIsExpanded(prev => !prev);
+    rotate.value = _reactNativeReanimated.default.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
   };
 
   return /*#__PURE__*/_react.default.createElement(_index.Column, null, /*#__PURE__*/_react.default.createElement(_index.ButtonBase, {

package/build/commonjs/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Accordion.tsx"],"names":["ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,sBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;AACA,QAAMC,MAAM,GAAG,2CAAe,CAAf,CAAf;AAEA,QAAMC,yBAAyB,GAAG,6CAAiB,OAAO;AACtDC,IAAAA,SAAS,EAAE,CAAC;AAAEF,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;AAA1B,KAAD;AAD2C,GAAP,CAAjB,CAAlC;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBL,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACAE,IAAAA,MAAM,CAACG,KAAP,GAAe,uCAAWL,UAAU,GAAG,GAAH,GAAS,CAA9B,EAAiChB,gBAAjC,CAAf;AACH,GAHD;;AAKA,sBACI,6BAAC,aAAD,qBACI,6BAAC,iBAAD;AACI,IAAA,OAAO,EAAEsB,OADb;AAEI,IAAA,KAAK,EAAEP,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,aAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEK;AAAtB,KACKP,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,+BAAC,kBAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,4BAAMO,cAAN,CAAqBb,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,6BAAC,cAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(!isExpanded);\n        rotate.value = withTiming(isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            // @ts-ignore\n                            <ChevronDownIcon height={24} width={24}/>\n                        )}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"]}
+{"version":3,"sources":["Accordion.tsx"],"names":["ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","Animated","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAKA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,sBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;;AACA,QAAMC,MAAM,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAAf;;AAEA,QAAMC,yBAAyB,GAAGF,+BAASG,gBAAT,CAA0B,OAAO;AAC/DC,IAAAA,SAAS,EAAE,CAAC;AAAEL,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACM,KAAM;AAA1B,KAAD;AADoD,GAAP,CAA1B,CAAlC;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBR,IAAAA,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;AACAR,IAAAA,MAAM,CAACM,KAAP,GAAeL,+BAASQ,UAAT,CAAoB,CAACX,UAAD,GAAc,GAAd,GAAoB,CAAxC,EAA2ChB,gBAA3C,CAAf;AACH,GAHD;;AAKA,sBACI,6BAAC,aAAD,qBACI,6BAAC,iBAAD;AACI,IAAA,OAAO,EAAEyB,OADb;AAEI,IAAA,KAAK,EAAEV,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,aAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,aAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEO;AAAtB,KACKT,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,+BAAC,kBAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,4BAAMY,cAAN,CAAqBlB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,6BAAC,cAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = Animated.useSharedValue(0);\n\n    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            // @ts-ignore\n                            <ChevronDownIcon height={24} width={24}/>\n                        )}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"]}

package/build/commonjs/CircularProgress/CircularProgress.js

@@ -34,9 +34,12 @@ function CircularProgress(props) {
   } = props;
   const styles = useStyles();
   const rootStyle = (0, _styles.css)([styles.root, style]);
-  const sharedSpin = (0, _reactNativeReanimated.useSharedValue)(0);
-  const spinStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const interpolatedSpin = (0, _reactNativeReanimated.interpolate)(sharedSpin.value, [0, 1], [0, 360]);
+
+  const sharedSpin = _reactNativeReanimated.default.useSharedValue(0);
+
+  const spinStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
+    const interpolatedSpin = _reactNativeReanimated.default.interpolate(sharedSpin.value, [0, 1], [0, 360]);
+
     return {
       transform: [{
         rotate: `${interpolatedSpin}deg`
@@ -45,7 +48,7 @@ function CircularProgress(props) {
   });
 
   _react.default.useEffect(() => {
-    sharedSpin.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+    sharedSpin.value = _reactNativeReanimated.default.withRepeat(_reactNativeReanimated.default.withTiming(1, {
       duration: 900,
       easing: _reactNativeReanimated.Easing.linear
     }), -1, false);

package/build/commonjs/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CircularProgress.tsx"],"names":["useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styles","rootStyle","sharedSpin","spinStyle","interpolatedSpin","value","transform","rotate","React","useEffect","duration","easing","Easing","linear"],"mappings":";;;;;;;AAAA;;AAGA;;AAQA;;AACA;;;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;AACrF,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,cAAc,EAAE;AAFd;AADH,GAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;AAClF,QAAM;AAAEC,IAAAA;AAAF,MAAYD,KAAlB;AAEA,QAAME,MAAM,GAAGP,SAAS,EAAxB;AAEA,QAAMQ,SAAS,GAAG,iBAAI,CAClBD,MAAM,CAACN,IADW,EAElBK,KAFkB,CAAJ,CAAlB;AAKA,QAAMG,UAAU,GAAG,2CAAe,CAAf,CAAnB;AAEA,QAAMC,SAAS,GAAG,6CAAiB,MAAM;AACrC,UAAMC,gBAAgB,GAAG,wCAAYF,UAAU,CAACG,KAAvB,EAA8B,CAAC,CAAD,EAAI,CAAJ,CAA9B,EAAsC,CAAC,CAAD,EAAI,GAAJ,CAAtC,CAAzB;AAEA,WAAO;AACHC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,MAAM,EAAG,GAAEH,gBAAiB;AAA9B,OAAD;AADR,KAAP;AAGH,GANiB,CAAlB;;AAQAI,iBAAMC,SAAN,CAAgB,MAAM;AAClBP,IAAAA,UAAU,CAACG,KAAX,GAAmB,uCACf,uCAAW,CAAX,EAAc;AAAEK,MAAAA,QAAQ,EAAE,GAAZ;AAAiBC,MAAAA,MAAM,EAAEC,8BAAOC;AAAhC,KAAd,CADe,EAEf,CAAC,CAFc,EAGf,KAHe,CAAnB;AAKH,GAND,EAMG,EANH;;AAQA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACV,SAAD,EAAYF,SAAZ;AAAtB,kBACI,6BAAC,uBAAD,OADJ,CADJ;AAKH;;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, {\n    Easing,\n    interpolate,\n    useAnimatedStyle,\n    useSharedValue,\n    withRepeat,\n    withTiming,\n} from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = useSharedValue(0);\n\n    const spinStyle = useAnimatedStyle(() => {\n        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = withRepeat(\n            withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"]}
+{"version":3,"sources":["CircularProgress.tsx"],"names":["useStyles","root","alignItems","justifyContent","CircularProgress","props","style","styles","rootStyle","sharedSpin","Animated","useSharedValue","spinStyle","useAnimatedStyle","interpolatedSpin","interpolate","value","transform","rotate","React","useEffect","withRepeat","withTiming","duration","easing","Easing","linear"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;AACrF,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,cAAc,EAAE;AAFd;AADH,GAAP;AAMH,CAPD;;AASe,SAASC,gBAAT,CAA0BC,KAA1B,EAAuE;AAClF,QAAM;AAAEC,IAAAA;AAAF,MAAYD,KAAlB;AAEA,QAAME,MAAM,GAAGP,SAAS,EAAxB;AAEA,QAAMQ,SAAS,GAAG,iBAAI,CAClBD,MAAM,CAACN,IADW,EAElBK,KAFkB,CAAJ,CAAlB;;AAKA,QAAMG,UAAU,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAAnB;;AAEA,QAAMC,SAAS,GAAGF,+BAASG,gBAAT,CAA0B,MAAM;AAC9C,UAAMC,gBAAgB,GAAGJ,+BAASK,WAAT,CAAqBN,UAAU,CAACO,KAAhC,EAAuC,CAAC,CAAD,EAAI,CAAJ,CAAvC,EAA+C,CAAC,CAAD,EAAI,GAAJ,CAA/C,CAAzB;;AAEA,WAAO;AACHC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,MAAM,EAAG,GAAEJ,gBAAiB;AAA9B,OAAD;AADR,KAAP;AAGH,GANiB,CAAlB;;AAQAK,iBAAMC,SAAN,CAAgB,MAAM;AAClBX,IAAAA,UAAU,CAACO,KAAX,GAAmBN,+BAASW,UAAT,CACfX,+BAASY,UAAT,CAAoB,CAApB,EAAuB;AAAEC,MAAAA,QAAQ,EAAE,GAAZ;AAAiBC,MAAAA,MAAM,EAAEC,8BAAOC;AAAhC,KAAvB,CADe,EAEf,CAAC,CAFc,EAGf,KAHe,CAAnB;AAKH,GAND,EAMG,EANH;;AAQA,sBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACd,SAAD,EAAYJ,SAAZ;AAAtB,kBACI,6BAAC,uBAAD,OADJ,CADJ;AAKH;;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = Animated.useSharedValue(0);\n\n    const spinStyle = Animated.useAnimatedStyle(() => {\n        const interpolatedSpin = Animated.interpolate(sharedSpin.value, [0, 1], [0, 360]);\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = Animated.withRepeat(\n            Animated.withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"]}

package/build/commonjs/Pagination/Pagination.js

@@ -9,13 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _utils = require("@fountain-ui/utils");
+var _icons = require("@fountain-ui/icons");
 
-var _Fab = _interopRequireDefault(require("../Fab"));
+var _utils = require("@fountain-ui/utils");
 
 var _styles = require("../styles");
 
-var _icons = require("../internal/icons");
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
 
@@ -62,9 +62,11 @@ const useStyles = function () {
 
 function Pagination(props) {
   const {
+    bundleSize = 1,
     children,
     count,
     disabled = false,
+    hideIndicator = false,
     hideNextButton = false,
     hidePrevButton = false,
     infinite = false,
@@ -92,33 +94,36 @@ function Pagination(props) {
   };
 
   const handlePrevPress = () => {
-    const prevPage = page > firstPage ? page - 1 : infinite ? lastPage : -1;
+    const prevPage = page - bundleSize >= firstPage ? page - bundleSize : infinite ? count - bundleSize + page : -1;
     handleChange(prevPage);
   };
 
   const handleNextPress = () => {
-    const nextPage = page < lastPage ? page + 1 : infinite ? firstPage : -1;
+    const nextPage = page + bundleSize <= lastPage ? page + bundleSize : infinite ? page + bundleSize - count : -1;
     handleChange(nextPage);
-  }; //TODO: Need to change arrow icons
-
+  };
 
-  const prevButton = !hidePrevButton ? /*#__PURE__*/_react.default.createElement(_Fab.default, {
-    children: /*#__PURE__*/_react.default.createElement(_icons.CheckboxChecked, null),
+  const prevButton = !hidePrevButton ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    children: /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, null),
+    color: 'tertiary',
     disabled: disabled || !infinite && page <= firstPage,
     onPress: handlePrevPress,
+    size: 'small',
     style: children ? styles.prevAnchor : styles.prevInline
   }) : null;
-  const nextButton = !hideNextButton ? /*#__PURE__*/_react.default.createElement(_Fab.default, {
-    children: /*#__PURE__*/_react.default.createElement(_icons.CheckboxChecked, null),
-    disabled: disabled || !infinite && page >= lastPage,
+  const nextButton = !hideNextButton ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    children: /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, null),
+    color: 'tertiary',
+    disabled: disabled || !infinite && page + bundleSize > lastPage,
     onPress: handleNextPress,
+    size: 'small',
     style: children ? styles.nextAnchor : styles.nextInline
   }) : null;
-  const items = (0, _utils.times)(i => renderItem({
+  const items = !hideIndicator ? (0, _utils.times)(i => renderItem({
     index: i,
     disabled,
     selected: i === page
-  }), count);
+  }), count) : null;
   const containerProps = {
     style: (0, _styles.css)([styles.root, children ? styles.rootAnchor : styles.rootInline, style]),
     ...otherProps

package/build/commonjs/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Pagination.tsx"],"names":["useStyles","theme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","children","count","disabled","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","i","selected","containerProps"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAgBA,MAAMA,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,UAAU,EAAE;AACRC,MAAAA,aAAa,EAAE,KADP;AAERC,MAAAA,UAAU,EAAE;AAFJ,KAFT;AAMHC,IAAAA,UAAU,EAAE;AACRF,MAAAA,aAAa,EAAE;AADP,KANT;AASHG,IAAAA,KAAK,EAAE;AACHH,MAAAA,aAAa,EAAE,KADZ;AAEHI,MAAAA,cAAc,EAAE,QAFb;AAGHC,MAAAA,SAAS,EAAER,KAAK,CAACS,OAAN,CAAc,CAAd;AAHR,KATJ;AAcHC,IAAAA,cAAc,EAAE;AACZP,MAAAA,aAAa,EAAE,QADH;AAEZI,MAAAA,cAAc,EAAE;AAFJ,KAdb;AAkBHI,IAAAA,UAAU,EAAE;AACRC,MAAAA,WAAW,EAAEZ,KAAK,CAACS,OAAN,CAAc,CAAd;AADL,KAlBT;AAqBHI,IAAAA,UAAU,EAAE;AACRC,MAAAA,QAAQ,EAAE,UADF;AAERC,MAAAA,IAAI,EAAE,CAAC;AAFC,KArBT;AAyBHC,IAAAA,UAAU,EAAE;AACRC,MAAAA,UAAU,EAAEjB,KAAK,CAACS,OAAN,CAAc,CAAd;AADJ,KAzBT;AA4BHS,IAAAA,UAAU,EAAE;AACRJ,MAAAA,QAAQ,EAAE,UADF;AAERK,MAAAA,KAAK,EAAE,CAAC;AAFA;AA5BT,GAAP;AAiCH,CApCD;;AAsCe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;AACvD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,KAFE;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,cAAc,GAAG,KAJf;AAKFC,IAAAA,cAAc,GAAG,KALf;AAMFC,IAAAA,QAAQ,GAAG,KANT;AAOFC,IAAAA,QAPE;AAQFC,IAAAA,IARE;AASFC,IAAAA,UAAU,GAAG,CAAC;AAAEC,MAAAA,KAAF;AAAS,SAAGC;AAAZ,KAAD,kBAAwB,6BAAC,uBAAD;AAAgB,MAAA,GAAG,EAAG,GAAED,KAAM;AAA9B,OAAqCC,IAArC,EATnC;AAUFC,IAAAA,KAVE;AAWF,OAAGC;AAXD,MAYFb,KAZJ;AAcA,QAAMc,MAAM,GAAGpC,SAAS,EAAxB;AAEA,QAAMqC,SAAS,GAAG,CAAlB;AACA,QAAMC,QAAQ,GAAGd,KAAK,GAAG,CAAzB;;AAEA,QAAMe,YAAY,GAAIC,QAAD,IAAsB;AACvC,QAAIA,QAAQ,IAAIH,SAAZ,IAAyBG,QAAQ,IAAIF,QAAzC,EAAmD;AAC/C,UAAIT,QAAJ,EAAc;AACVA,QAAAA,QAAQ,CAACW,QAAD,CAAR;AACH;AACJ;AACJ,GAND;;AAQA,QAAMC,eAAe,GAAG,MAAM;AAC1B,UAAMC,QAAQ,GAAGZ,IAAI,GAAGO,SAAP,GACXP,IAAI,GAAG,CADI,GAEVF,QAAQ,GAAGU,QAAH,GAAc,CAAC,CAF9B;AAIAC,IAAAA,YAAY,CAACG,QAAD,CAAZ;AACH,GAND;;AAQA,QAAMC,eAAe,GAAG,MAAM;AAC1B,UAAMH,QAAQ,GAAGV,IAAI,GAAGQ,QAAP,GACXR,IAAI,GAAG,CADI,GAEVF,QAAQ,GAAGS,SAAH,GAAe,CAAC,CAF/B;AAIAE,IAAAA,YAAY,CAACC,QAAD,CAAZ;AACH,GAND,CApCuD,CA4CvD;;;AACA,QAAMI,UAAU,GAAG,CAACjB,cAAD,gBACf,6BAAC,YAAD;AACI,IAAA,QAAQ,eAAE,6BAAC,sBAAD,OADd;AAEI,IAAA,QAAQ,EAAEF,QAAQ,IAAK,CAACG,QAAD,IAAaE,IAAI,IAAIO,SAFhD;AAGI,IAAA,OAAO,EAAEI,eAHb;AAII,IAAA,KAAK,EAAElB,QAAQ,GAAGa,MAAM,CAACtB,UAAV,GAAuBsB,MAAM,CAACxB;AAJjD,IADe,GAOf,IAPJ;AASA,QAAMiC,UAAU,GAAG,CAACnB,cAAD,gBACf,6BAAC,YAAD;AACI,IAAA,QAAQ,eAAE,6BAAC,sBAAD,OADd;AAEI,IAAA,QAAQ,EAAED,QAAQ,IAAK,CAACG,QAAD,IAAaE,IAAI,IAAIQ,QAFhD;AAGI,IAAA,OAAO,EAAEK,eAHb;AAII,IAAA,KAAK,EAAEpB,QAAQ,GAAGa,MAAM,CAACjB,UAAV,GAAuBiB,MAAM,CAACnB;AAJjD,IADe,GAOf,IAPJ;AASA,QAAMV,KAAK,GAAG,kBAAMuC,CAAC,IAAIf,UAAU,CAAC;AAAEC,IAAAA,KAAK,EAAEc,CAAT;AAAYrB,IAAAA,QAAZ;AAAsBsB,IAAAA,QAAQ,EAAED,CAAC,KAAKhB;AAAtC,GAAD,CAArB,EAAqEN,KAArE,CAAd;AAEA,QAAMwB,cAAc,GAAG;AACnBd,IAAAA,KAAK,EAAE,iBAAI,CACPE,MAAM,CAAClC,IADA,EAEPqB,QAAQ,GAAGa,MAAM,CAAC9B,UAAV,GAAuB8B,MAAM,CAACjC,UAF/B,EAGP+B,KAHO,CAAJ,CADY;AAMnB,OAAGC;AANgB,GAAvB;;AASA,MAAIZ,QAAJ,EAAc;AACV,wBACI,6BAAC,iBAAD,EAAUyB,cAAV,eACI,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAE,iBAAIZ,MAAM,CAACzB,cAAX;AAAb,OACKY,QADL,EAEKqB,UAFL,EAGKC,UAHL,CADJ,eAOI,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAE,iBAAIT,MAAM,CAAC7B,KAAX;AAAb,OACKA,KADL,CAPJ,CADJ;AAaH;;AAED,sBACI,6BAAC,iBAAD,EAAUyC,cAAV,EACKJ,UADL,EAEKrC,KAFL,EAGKsC,UAHL,CADJ;AAOH;;AAAA","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport Fab from '../Fab';\nimport { css, useTheme } from '../styles';\nimport { CheckboxChecked } from '../internal/icons';\nimport PaginationItem from '../PaginationItem';\nimport type PaginationProps from './PaginationProps';\n\ntype PaginationStyleKeys =\n    | 'root'\n    | 'rootInline'\n    | 'rootAnchor'\n    | 'items'\n    | 'arrowContainer'\n    | 'prevInline'\n    | 'prevAnchor'\n    | 'nextInline'\n    | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rootInline: {\n            flexDirection: 'row',\n            alignItems: 'center',\n        },\n        rootAnchor: {\n            flexDirection: 'column',\n        },\n        items: {\n            flexDirection: 'row',\n            justifyContent: 'center',\n            marginTop: theme.spacing(2),\n        },\n        arrowContainer: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n        },\n        prevInline: {\n            marginRight: theme.spacing(1),\n        },\n        prevAnchor: {\n            position: 'absolute',\n            left: -24,\n        },\n        nextInline: {\n            marginLeft: theme.spacing(1),\n        },\n        nextAnchor: {\n            position: 'absolute',\n            right: -24,\n        },\n    };\n};\n\nexport default function Pagination(props: PaginationProps) {\n    const {\n        children,\n        count,\n        disabled = false,\n        hideNextButton = false,\n        hidePrevButton = false,\n        infinite = false,\n        onChange,\n        page,\n        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const firstPage = 0;\n    const lastPage = count - 1;\n\n    const handleChange = (nextPage: number) => {\n        if (nextPage >= firstPage && nextPage <= lastPage) {\n            if (onChange) {\n                onChange(nextPage);\n            }\n        }\n    };\n\n    const handlePrevPress = () => {\n        const prevPage = page > firstPage\n            ? page - 1\n            : (infinite ? lastPage : -1);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page < lastPage\n            ? page + 1\n            : (infinite ? firstPage : -1);\n\n        handleChange(nextPage);\n    };\n\n    //TODO: Need to change arrow icons\n    const prevButton = !hidePrevButton ? (\n        <Fab\n            children={<CheckboxChecked/>}\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        />\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <Fab\n            children={<CheckboxChecked/>}\n            disabled={disabled || (!infinite && page >= lastPage)}\n            onPress={handleNextPress}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        />\n    ) : null;\n\n    const items = times(i => renderItem({ index: i, disabled, selected: i === page }), count);\n\n    const containerProps = {\n        style: css([\n            styles.root,\n            children ? styles.rootAnchor : styles.rootInline,\n            style,\n        ]),\n        ...otherProps,\n    };\n\n    if (children) {\n        return (\n            <View {...containerProps}>\n                <View style={css(styles.arrowContainer)}>\n                    {children}\n                    {prevButton}\n                    {nextButton}\n                </View>\n\n                <View style={css(styles.items)}>\n                    {items}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View {...containerProps}>\n            {prevButton}\n            {items}\n            {nextButton}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Pagination.tsx"],"names":["useStyles","theme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","bundleSize","children","count","disabled","hideIndicator","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","i","selected","containerProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport PaginationItem from '../PaginationItem';\nimport type PaginationProps from './PaginationProps';\n\ntype PaginationStyleKeys =\n    | 'root'\n    | 'rootInline'\n    | 'rootAnchor'\n    | 'items'\n    | 'arrowContainer'\n    | 'prevInline'\n    | 'prevAnchor'\n    | 'nextInline'\n    | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rootInline: {\n            flexDirection: 'row',\n            alignItems: 'center',\n        },\n        rootAnchor: {\n            flexDirection: 'column',\n        },\n        items: {\n            flexDirection: 'row',\n            justifyContent: 'center',\n            marginTop: theme.spacing(2),\n        },\n        arrowContainer: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n        },\n        prevInline: {\n            marginRight: theme.spacing(1),\n        },\n        prevAnchor: {\n            position: 'absolute',\n            left: -24,\n        },\n        nextInline: {\n            marginLeft: theme.spacing(1),\n        },\n        nextAnchor: {\n            position: 'absolute',\n            right: -24,\n        },\n    };\n};\n\nexport default function Pagination(props: PaginationProps) {\n    const {\n        bundleSize = 1,\n        children,\n        count,\n        disabled = false,\n        hideIndicator = false,\n        hideNextButton = false,\n        hidePrevButton = false,\n        infinite = false,\n        onChange,\n        page,\n        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const firstPage = 0;\n    const lastPage = count - 1;\n\n    const handleChange = (nextPage: number) => {\n        if (nextPage >= firstPage && nextPage <= lastPage) {\n            if (onChange) {\n                onChange(nextPage);\n            }\n        }\n    };\n\n    const handlePrevPress = () => {\n        const prevPage = page - bundleSize >= firstPage\n            ? page - bundleSize\n            : (infinite ? count - bundleSize + page : -1);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page + bundleSize <= lastPage\n            ? page + bundleSize\n            : (infinite ? page + bundleSize - count : -1);\n\n        handleChange(nextPage);\n    };\n\n    const prevButton = !hidePrevButton ? (\n        <IconButton\n            children={<ChevronLeft/>}\n            color={'tertiary'}\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            size={'small'}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        />\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <IconButton\n            children={<ChevronRight/>}\n            color={'tertiary'}\n            disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n            onPress={handleNextPress}\n            size={'small'}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        />\n    ) : null;\n\n    const items = !hideIndicator ? (\n        times(i => renderItem({ index: i, disabled, selected: i === page }), count)\n    ) : null;\n\n    const containerProps = {\n        style: css([\n            styles.root,\n            children ? styles.rootAnchor : styles.rootInline,\n            style,\n        ]),\n        ...otherProps,\n    };\n\n    if (children) {\n        return (\n            <View {...containerProps}>\n                <View style={css(styles.arrowContainer)}>\n                    {children}\n                    {prevButton}\n                    {nextButton}\n                </View>\n\n                <View style={css(styles.items)}>\n                    {items}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View {...containerProps}>\n            {prevButton}\n            {items}\n            {nextButton}\n        </View>\n    );\n};\n"]}

package/build/commonjs/Snackbar/Snackbar.js

@@ -34,7 +34,9 @@ const useStyles = function () {
       paddingBottom: insets.bottom,
       paddingHorizontal: theme.spacing(2),
       position: 'absolute',
-      width: '100%'
+      width: '100%',
+      // TODO: Need to remove zIndex.
+      zIndex: 32
     }
   };
 };

package/build/commonjs/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Snackbar.tsx"],"names":["useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAG,wBAAd;AACA,QAAMC,MAAM,GAAG,oDAAf;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE;AAPL;AADH,GAAP;AAWH,CAfD;;AAiBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,SADE;AAEFC,IAAAA,gBAAgB,GAAG,IAFjB;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,KANE;AAOFC,IAAAA,OAAO,GAAG,KAPR;AAQF,OAAGC;AARD,MASFR,KATJ;;AAWA,QAAMS,aAAa,GAAGC,eAAMC,MAAN,CAA4B,IAA5B,CAAtB;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAC/B,QAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;AAChCC,MAAAA,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;AACH;AACJ,GAJD;;AAMAH,iBAAMK,SAAN,CAAgB,MAAM;AAClB,WAAO,MAAM;AACTH,MAAAA,oBAAoB;AACvB,KAFD;AAGH,GAJD,EAIG,EAJH;;AAMAF,iBAAMK,SAAN,CAAgB,MAAM;AAClB,QAAIR,OAAO,IAAIL,gBAAgB,KAAK,IAApC,EAA0C;AACtCU,MAAAA,oBAAoB,GADkB,CAGtC;;AACAH,MAAAA,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;AACrC,YAAIX,OAAJ,EAAa;AACTA,UAAAA,OAAO;AACV;AACJ,OAJiC,EAI/BH,gBAJ+B,CAAlC;AAKH;AACJ,GAXD,EAWG,CAACK,OAAD,EAAUL,gBAAV,EAA4BG,OAA5B,CAXH;;AAaA,QAAMY,MAAM,GAAG9B,SAAS,EAAxB;;AAEA,QAAM,CAAC+B,MAAD,EAASC,SAAT,IAAsBT,eAAMU,QAAN,CAAe,IAAf,CAA5B;;AAEA,MAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;AACpB,WAAO,IAAP;AACH;;AAED,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPD,MAAM,CAAC3B,IADA,EAEPgB,KAFO,CAAJ;AADX,KAKQE,UALR,gBAOI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAEP,SADf;AAEI,IAAA,MAAM,EAAEM,OAFZ;AAGI,IAAA,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;AAII,IAAA,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;AAJ7B,KAMKhB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;AAAiB,IAAA,OAAO,EAAEC;AAA1B,IAPR,CAPJ,CADJ;AAoBH;;AAAA","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent message={message}/>\n                )}\n            </Slide>\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Snackbar.tsx"],"names":["useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAG,wBAAd;AACA,QAAMC,MAAM,GAAG,oDAAf;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE,MAPL;AAQF;AACAC,MAAAA,MAAM,EAAE;AATN;AADH,GAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,SADE;AAEFC,IAAAA,gBAAgB,GAAG,IAFjB;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,KANE;AAOFC,IAAAA,OAAO,GAAG,KAPR;AAQF,OAAGC;AARD,MASFR,KATJ;;AAWA,QAAMS,aAAa,GAAGC,eAAMC,MAAN,CAA4B,IAA5B,CAAtB;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAC/B,QAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;AAChCC,MAAAA,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;AACH;AACJ,GAJD;;AAMAH,iBAAMK,SAAN,CAAgB,MAAM;AAClB,WAAO,MAAM;AACTH,MAAAA,oBAAoB;AACvB,KAFD;AAGH,GAJD,EAIG,EAJH;;AAMAF,iBAAMK,SAAN,CAAgB,MAAM;AAClB,QAAIR,OAAO,IAAIL,gBAAgB,KAAK,IAApC,EAA0C;AACtCU,MAAAA,oBAAoB,GADkB,CAGtC;;AACAH,MAAAA,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;AACrC,YAAIX,OAAJ,EAAa;AACTA,UAAAA,OAAO;AACV;AACJ,OAJiC,EAI/BH,gBAJ+B,CAAlC;AAKH;AACJ,GAXD,EAWG,CAACK,OAAD,EAAUL,gBAAV,EAA4BG,OAA5B,CAXH;;AAaA,QAAMY,MAAM,GAAG/B,SAAS,EAAxB;;AAEA,QAAM,CAACgC,MAAD,EAASC,SAAT,IAAsBT,eAAMU,QAAN,CAAe,IAAf,CAA5B;;AAEA,MAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;AACpB,WAAO,IAAP;AACH;;AAED,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPD,MAAM,CAAC5B,IADA,EAEPiB,KAFO,CAAJ;AADX,KAKQE,UALR,gBAOI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAEP,SADf;AAEI,IAAA,MAAM,EAAEM,OAFZ;AAGI,IAAA,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;AAII,IAAA,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;AAJ7B,KAMKhB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;AAAiB,IAAA,OAAO,EAAEC;AAA1B,IAPR,CAPJ,CADJ;AAoBH;;AAAA","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent message={message}/>\n                )}\n            </Slide>\n        </View>\n    );\n};\n"]}

package/build/commonjs/Tab/Tab.js

@@ -22,6 +22,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const styles = _styles.StyleSheet.create({
+  root: { // TODO: Remove redundant platform checking
+    ...(_reactNative.Platform.OS === 'web' ? {
+      minWidth: 'auto'
+    } : {})
+  },
   primary: {
     minHeight: 48
   },
@@ -48,7 +53,7 @@ function Tab(props) {
   const theme = (0, _styles.useTheme)();
   const vertical = variant === 'bottom-navigation';
   const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
-  const tabBaseStyle = (0, _styles.css)([variant === 'primary' ? styles.primary : variant === 'secondary' ? styles.secondary : styles.bottomNavigation, style]);
+  const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'primary' ? styles.primary : variant === 'secondary' ? styles.secondary : styles.bottomNavigation, style]);
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
     color

package/build/commonjs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["styles","StyleSheet","create","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","iconElement","React","cloneElement","fill"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,mBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GADoB;AAI7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GAJkB;AAO7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAPW,CAAlB,CAAf;;AAYe,SAASG,GAAT,CAAaC,KAAb,EAA8B;AACzC,QAAM;AACFC,IAAAA,YAAY,GAAG,KADb;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,eAHE;AAIFC,IAAAA,IAAI,EAAEC,WAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,YANE;AAOFC,IAAAA,OAAO,GAAG,SAPR;AAQFC,IAAAA,KARE;AASF,OAAGC;AATD,MAUFV,KAVJ;AAYA,QAAMW,KAAK,GAAG,uBAAd;AAEA,QAAMC,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;AAEA,QAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;AAEA,QAAMC,YAAY,GAAG,iBAAI,CACrBT,OAAO,KAAK,SAAZ,GACMhB,MAAM,CAACG,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BhB,MAAM,CAACK,SAAjC,GAA6CL,MAAM,CAACM,gBAHtC,EAIrBW,KAJqB,CAAJ,CAArB;AAOA,QAAMS,SAAS,GAAG,6BAAgBP,KAAhB,EAAuB;AACrCQ,IAAAA,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;AAIrCV,IAAAA;AAJqC,GAAvB,CAAlB;AAOA,QAAMT,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;AACA,QAAMmB,WAAW,GAAGpB,IAAI,gBAAGqB,eAAMC,YAAN,CAAmBtB,IAAnB,EAAyB;AAAEuB,IAAAA,IAAI,EAAEd;AAAR,GAAzB,CAAH,GAA+C,IAAvE;AAEA,sBACI,6BAAC,gBAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAEK;AAFX,KAGQP,UAHR,gBAKI,6BAAC,cAAD;AACI,IAAA,QAAQ,EAAEc,WADd;AAEI,IAAA,SAAS,EAAE,CAACvB;AAFhB,IALJ,eAUI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEC,QADd;AAEI,IAAA,KAAK,EAAE,iBAAIgB,SAAJ;AAFX,IAVJ,EAeKf,eAAe,gBAAG,6BAAC,qBAAD,OAAH,GAAqB,IAfzC,CADJ;AAmBH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            vertical={vertical}\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","iconElement","React","cloneElement","fill"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,mBAAWC,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE,EACF;AACA,QAAIC,sBAASC,EAAT,KAAgB,KAAhB,GAAwB;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAxB,GAA+C,EAAnD;AAFE,GADuB;AAK7BC,EAAAA,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GALoB;AAQ7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GARkB;AAW7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAXW,CAAlB,CAAf;;AAgBe,SAASG,GAAT,CAAaC,KAAb,EAA8B;AACzC,QAAM;AACFC,IAAAA,YAAY,GAAG,KADb;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,eAHE;AAIFC,IAAAA,IAAI,EAAEC,WAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,YANE;AAOFC,IAAAA,OAAO,GAAG,SAPR;AAQFC,IAAAA,KARE;AASF,OAAGC;AATD,MAUFV,KAVJ;AAYA,QAAMW,KAAK,GAAG,uBAAd;AAEA,QAAMC,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;AAEA,QAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;AAEA,QAAMC,YAAY,GAAG,iBAAI,CACrB7B,MAAM,CAACG,IADc,EAErBiB,OAAO,KAAK,SAAZ,GACMpB,MAAM,CAACO,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BpB,MAAM,CAACS,SAAjC,GAA6CT,MAAM,CAACU,gBAJtC,EAKrBW,KALqB,CAAJ,CAArB;AAQA,QAAMS,SAAS,GAAG,6BAAgBP,KAAhB,EAAuB;AACrCQ,IAAAA,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;AAIrCV,IAAAA;AAJqC,GAAvB,CAAlB;AAOA,QAAMT,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;AACA,QAAMmB,WAAW,GAAGpB,IAAI,gBAAGqB,eAAMC,YAAN,CAAmBtB,IAAnB,EAAyB;AAAEuB,IAAAA,IAAI,EAAEd;AAAR,GAAzB,CAAH,GAA+C,IAAvE;AAEA,sBACI,6BAAC,gBAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAEK;AAFX,KAGQP,UAHR,gBAKI,6BAAC,cAAD;AACI,IAAA,QAAQ,EAAEc,WADd;AAEI,IAAA,SAAS,EAAE,CAACvB;AAFhB,IALJ,eAUI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEC,QADd;AAEI,IAAA,KAAK,EAAE,iBAAIgB,SAAJ;AAFX,IAVJ,EAeKf,eAAe,gBAAG,6BAAC,qBAAD,OAAH,GAAqB,IAfzC,CADJ;AAmBH;;AAAA","sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            vertical={vertical}\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"]}

package/build/module/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
 import { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';
 const ANIMATION_OPTION = {
@@ -26,16 +26,16 @@ export default function Accordion(props) {
   } = props;
   const styles = useStyles();
   const [isExpanded, setIsExpanded] = useState(false);
-  const rotate = useSharedValue(0);
-  const animatedChevronDownStyles = useAnimatedStyle(() => ({
+  const rotate = Animated.useSharedValue(0);
+  const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({
     transform: [{
       rotate: `${rotate.value}deg`
     }]
   }));
 
   const onPress = () => {
-    setIsExpanded(!isExpanded);
-    rotate.value = withTiming(isExpanded ? 180 : 0, ANIMATION_OPTION);
+    setIsExpanded(prev => !prev);
+    rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
   };
 
   return /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(ButtonBase, {

package/build/module/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Accordion.tsx"],"names":["React","useState","Animated","useAnimatedStyle","useSharedValue","withTiming","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","animatedChevronDownStyles","transform","value","onPress","isValidElement"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,cAArC,EAAqDC,UAArD,QAAuE,yBAAvE;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,OAA7B,EAAsCC,MAAtC,EAA8CC,UAA9C,EAA0DC,QAA1D,QAA0E,UAA1E;AAKA,MAAMC,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAGJ,QAAQ,EAAtB;AAEA,SAAO;AACHK,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B9B,QAAQ,CAAC,KAAD,CAA5C;AACA,QAAM+B,MAAM,GAAG5B,cAAc,CAAC,CAAD,CAA7B;AAEA,QAAM6B,yBAAyB,GAAG9B,gBAAgB,CAAC,OAAO;AACtD+B,IAAAA,SAAS,EAAE,CAAC;AAAEF,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACG,KAAM;AAA1B,KAAD;AAD2C,GAAP,CAAD,CAAlD;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBL,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACAE,IAAAA,MAAM,CAACG,KAAP,GAAe9B,UAAU,CAACyB,UAAU,GAAG,GAAH,GAAS,CAApB,EAAuBhB,gBAAvB,CAAzB;AACH,GAHD;;AAKA,sBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;AACI,IAAA,OAAO,EAAEsB,OADb;AAEI,IAAA,KAAK,EAAEP,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEK;AAAtB,KACKP,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,sBAAC,eAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,aAAA9B,KAAK,CAACqC,cAAN,CAAqBb,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,oBAAC,OAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = useSharedValue(0);\n\n    const animatedChevronDownStyles = useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(!isExpanded);\n        rotate.value = withTiming(isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            // @ts-ignore\n                            <ChevronDownIcon height={24} width={24}/>\n                        )}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"]}
+{"version":3,"sources":["Accordion.tsx"],"names":["React","useState","Animated","ChevronDown","ChevronDownIcon","ButtonBase","Column","Divider","Spacer","Typography","useTheme","ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAEA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,mBAA/C;AACA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,OAA7B,EAAsCC,MAAtC,EAA8CC,UAA9C,EAA0DC,QAA1D,QAA0E,UAA1E;AAKA,MAAMC,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAGJ,QAAQ,EAAtB;AAEA,SAAO;AACHK,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B3B,QAAQ,CAAC,KAAD,CAA5C;AACA,QAAM4B,MAAM,GAAG3B,QAAQ,CAAC4B,cAAT,CAAwB,CAAxB,CAAf;AAEA,QAAMC,yBAAyB,GAAG7B,QAAQ,CAAC8B,gBAAT,CAA0B,OAAO;AAC/DC,IAAAA,SAAS,EAAE,CAAC;AAAEJ,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACK,KAAM;AAA1B,KAAD;AADoD,GAAP,CAA1B,CAAlC;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBP,IAAAA,aAAa,CAACQ,IAAI,IAAI,CAACA,IAAV,CAAb;AACAP,IAAAA,MAAM,CAACK,KAAP,GAAehC,QAAQ,CAACmC,UAAT,CAAoB,CAACV,UAAD,GAAc,GAAd,GAAoB,CAAxC,EAA2ChB,gBAA3C,CAAf;AACH,GAHD;;AAKA,sBACI,oBAAC,MAAD,qBACI,oBAAC,UAAD;AACI,IAAA,OAAO,EAAEwB,OADb;AAEI,IAAA,KAAK,EAAET,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,oBAAC,KAAD,CAAO,QAAP,QACKA,QADL,eAEI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,oBAAC,MAAD,qBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEM;AAAtB,KACKR,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,sBAAC,eAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,aAAA3B,KAAK,CAACsC,cAAN,CAAqBjB,OAArB,IAAiCA,OAAjC,gBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,oBAAC,OAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'row',\n            paddingVertical: theme.spacing(3),\n        },\n    };\n};\n\nexport default function Accordion(props: AccordionProps) {\n    const {\n        content,\n        LeftIcon,\n        RightIcon,\n        title,\n        titleVariant = 'subtitle2',\n    } = props;\n\n    const styles = useStyles();\n\n    const [isExpanded, setIsExpanded] = useState(false);\n    const rotate = Animated.useSharedValue(0);\n\n    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({\n        transform: [{ rotate: `${rotate.value}deg` }],\n    }));\n\n    const onPress = () => {\n        setIsExpanded(prev => !prev);\n        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n    };\n\n    return (\n        <Column>\n            <ButtonBase\n                onPress={onPress}\n                style={styles.root}\n            >\n                {LeftIcon ? (\n                    <React.Fragment>\n                        {LeftIcon}\n                        <Spacer size={2}/>\n                    </React.Fragment>\n                ) : null}\n\n                <Typography\n                    children={title}\n                    variant={titleVariant}\n                />\n\n                <Spacer flex={1}/>\n\n                <Spacer size={2}/>\n\n                <Column>\n                    <Animated.View style={animatedChevronDownStyles}>\n                        {RightIcon ? RightIcon : (\n                            // @ts-ignore\n                            <ChevronDownIcon height={24} width={24}/>\n                        )}\n                    </Animated.View>\n                </Column>\n            </ButtonBase>\n\n            {isExpanded ? (\n                React.isValidElement(content) ? (content) : (\n                    <Typography\n                        children={content}\n                        color={'textSecondary'}\n                        variant={'body2'}\n                    />\n                )\n            ) : null}\n\n            <Divider/>\n        </Column>\n    );\n}\n"]}

package/build/module/CircularProgress/CircularProgress.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import Animated, { Easing } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
 import { css } from '../styles';
 
@@ -18,9 +18,9 @@ export default function CircularProgress(props) {
   } = props;
   const styles = useStyles();
   const rootStyle = css([styles.root, style]);
-  const sharedSpin = useSharedValue(0);
-  const spinStyle = useAnimatedStyle(() => {
-    const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
+  const sharedSpin = Animated.useSharedValue(0);
+  const spinStyle = Animated.useAnimatedStyle(() => {
+    const interpolatedSpin = Animated.interpolate(sharedSpin.value, [0, 1], [0, 360]);
     return {
       transform: [{
         rotate: `${interpolatedSpin}deg`
@@ -28,7 +28,7 @@ export default function CircularProgress(props) {
     };
   });
   React.useEffect(() => {
-    sharedSpin.value = withRepeat(withTiming(1, {
+    sharedSpin.value = Animated.withRepeat(Animated.withTiming(1, {
       duration: 900,
       easing: Easing.linear
     }), -1, false);

package/build/module/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CircularProgress.tsx"],"names":["React","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withRepeat","withTiming","CircularProgress","CircularProgressIcon","css","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","sharedSpin","spinStyle","interpolatedSpin","value","transform","rotate","useEffect","duration","easing","linear"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IACIC,MADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,cAJJ,EAKIC,UALJ,EAMIC,UANJ,QAOO,yBAPP;AAQA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;AACrF,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,cAAc,EAAE;AAFd;AADH,GAAP;AAMH,CAPD;;AASA,eAAe,SAASN,gBAAT,CAA0BO,KAA1B,EAAuE;AAClF,QAAM;AAAEC,IAAAA;AAAF,MAAYD,KAAlB;AAEA,QAAME,MAAM,GAAGN,SAAS,EAAxB;AAEA,QAAMO,SAAS,GAAGR,GAAG,CAAC,CAClBO,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;AAKA,QAAMG,UAAU,GAAGd,cAAc,CAAC,CAAD,CAAjC;AAEA,QAAMe,SAAS,GAAGhB,gBAAgB,CAAC,MAAM;AACrC,UAAMiB,gBAAgB,GAAGlB,WAAW,CAACgB,UAAU,CAACG,KAAZ,EAAmB,CAAC,CAAD,EAAI,CAAJ,CAAnB,EAA2B,CAAC,CAAD,EAAI,GAAJ,CAA3B,CAApC;AAEA,WAAO;AACHC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,MAAM,EAAG,GAAEH,gBAAiB;AAA9B,OAAD;AADR,KAAP;AAGH,GANiC,CAAlC;AAQArB,EAAAA,KAAK,CAACyB,SAAN,CAAgB,MAAM;AAClBN,IAAAA,UAAU,CAACG,KAAX,GAAmBhB,UAAU,CACzBC,UAAU,CAAC,CAAD,EAAI;AAAEmB,MAAAA,QAAQ,EAAE,GAAZ;AAAiBC,MAAAA,MAAM,EAAEzB,MAAM,CAAC0B;AAAhC,KAAJ,CADe,EAEzB,CAAC,CAFwB,EAGzB,KAHyB,CAA7B;AAKH,GAND,EAMG,EANH;AAQA,sBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACR,SAAD,EAAYF,SAAZ;AAAtB,kBACI,oBAAC,oBAAD,OADJ,CADJ;AAKH;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, {\n    Easing,\n    interpolate,\n    useAnimatedStyle,\n    useSharedValue,\n    withRepeat,\n    withTiming,\n} from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = useSharedValue(0);\n\n    const spinStyle = useAnimatedStyle(() => {\n        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = withRepeat(\n            withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"]}
+{"version":3,"sources":["CircularProgress.tsx"],"names":["React","Animated","Easing","CircularProgress","CircularProgressIcon","css","useStyles","root","alignItems","justifyContent","props","style","styles","rootStyle","sharedSpin","useSharedValue","spinStyle","useAnimatedStyle","interpolatedSpin","interpolate","value","transform","rotate","useEffect","withRepeat","withTiming","duration","easing","linear"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IAAmBC,MAAnB,QAAiC,yBAAjC;AACA,SAASC,gBAAgB,IAAIC,oBAA7B,QAAyD,mBAAzD;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;AACrF,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,cAAc,EAAE;AAFd;AADH,GAAP;AAMH,CAPD;;AASA,eAAe,SAASN,gBAAT,CAA0BO,KAA1B,EAAuE;AAClF,QAAM;AAAEC,IAAAA;AAAF,MAAYD,KAAlB;AAEA,QAAME,MAAM,GAAGN,SAAS,EAAxB;AAEA,QAAMO,SAAS,GAAGR,GAAG,CAAC,CAClBO,MAAM,CAACL,IADW,EAElBI,KAFkB,CAAD,CAArB;AAKA,QAAMG,UAAU,GAAGb,QAAQ,CAACc,cAAT,CAAwB,CAAxB,CAAnB;AAEA,QAAMC,SAAS,GAAGf,QAAQ,CAACgB,gBAAT,CAA0B,MAAM;AAC9C,UAAMC,gBAAgB,GAAGjB,QAAQ,CAACkB,WAAT,CAAqBL,UAAU,CAACM,KAAhC,EAAuC,CAAC,CAAD,EAAI,CAAJ,CAAvC,EAA+C,CAAC,CAAD,EAAI,GAAJ,CAA/C,CAAzB;AAEA,WAAO;AACHC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,MAAM,EAAG,GAAEJ,gBAAiB;AAA9B,OAAD;AADR,KAAP;AAGH,GANiB,CAAlB;AAQAlB,EAAAA,KAAK,CAACuB,SAAN,CAAgB,MAAM;AAClBT,IAAAA,UAAU,CAACM,KAAX,GAAmBnB,QAAQ,CAACuB,UAAT,CACfvB,QAAQ,CAACwB,UAAT,CAAoB,CAApB,EAAuB;AAAEC,MAAAA,QAAQ,EAAE,GAAZ;AAAiBC,MAAAA,MAAM,EAAEzB,MAAM,CAAC0B;AAAhC,KAAvB,CADe,EAEf,CAAC,CAFc,EAGf,KAHe,CAAnB;AAKH,GAND,EAMG,EANH;AAQA,sBACI,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACZ,SAAD,EAAYH,SAAZ;AAAtB,kBACI,oBAAC,oBAAD,OADJ,CADJ;AAKH;AAAA","sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport { CircularProgress as CircularProgressIcon } from '../internal/icons';\nimport { css } from '../styles';\nimport { OverridableComponentProps } from '../types';\n\ntype CircularProgressStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CircularProgressStyles> = function (): CircularProgressStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n    };\n};\n\nexport default function CircularProgress(props: OverridableComponentProps<ViewProps>) {\n    const { style } = props;\n\n    const styles = useStyles();\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const sharedSpin = Animated.useSharedValue(0);\n\n    const spinStyle = Animated.useAnimatedStyle(() => {\n        const interpolatedSpin = Animated.interpolate(sharedSpin.value, [0, 1], [0, 360]);\n\n        return {\n            transform: [{ rotate: `${interpolatedSpin}deg` }],\n        };\n    });\n\n    React.useEffect(() => {\n        sharedSpin.value = Animated.withRepeat(\n            Animated.withTiming(1, { duration: 900, easing: Easing.linear }),\n            -1,\n            false,\n        );\n    }, []);\n\n    return (\n        <Animated.View style={[spinStyle, rootStyle]}>\n            <CircularProgressIcon/>\n        </Animated.View>\n    );\n};\n"]}

package/build/module/Pagination/Pagination.js

@@ -2,10 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { View } from 'react-native';
+import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
 import { times } from '@fountain-ui/utils';
-import Fab from '../Fab';
 import { css, useTheme } from '../styles';
-import { CheckboxChecked } from '../internal/icons';
+import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
 
 const useStyles = function () {
@@ -47,9 +47,11 @@ const useStyles = function () {
 
 export default function Pagination(props) {
   const {
+    bundleSize = 1,
     children,
     count,
     disabled = false,
+    hideIndicator = false,
     hideNextButton = false,
     hidePrevButton = false,
     infinite = false,
@@ -77,33 +79,36 @@ export default function Pagination(props) {
   };
 
   const handlePrevPress = () => {
-    const prevPage = page > firstPage ? page - 1 : infinite ? lastPage : -1;
+    const prevPage = page - bundleSize >= firstPage ? page - bundleSize : infinite ? count - bundleSize + page : -1;
     handleChange(prevPage);
   };
 
   const handleNextPress = () => {
-    const nextPage = page < lastPage ? page + 1 : infinite ? firstPage : -1;
+    const nextPage = page + bundleSize <= lastPage ? page + bundleSize : infinite ? page + bundleSize - count : -1;
     handleChange(nextPage);
-  }; //TODO: Need to change arrow icons
-
+  };
 
-  const prevButton = !hidePrevButton ? /*#__PURE__*/React.createElement(Fab, {
-    children: /*#__PURE__*/React.createElement(CheckboxChecked, null),
+  const prevButton = !hidePrevButton ? /*#__PURE__*/React.createElement(IconButton, {
+    children: /*#__PURE__*/React.createElement(ChevronLeft, null),
+    color: 'tertiary',
     disabled: disabled || !infinite && page <= firstPage,
     onPress: handlePrevPress,
+    size: 'small',
     style: children ? styles.prevAnchor : styles.prevInline
   }) : null;
-  const nextButton = !hideNextButton ? /*#__PURE__*/React.createElement(Fab, {
-    children: /*#__PURE__*/React.createElement(CheckboxChecked, null),
-    disabled: disabled || !infinite && page >= lastPage,
+  const nextButton = !hideNextButton ? /*#__PURE__*/React.createElement(IconButton, {
+    children: /*#__PURE__*/React.createElement(ChevronRight, null),
+    color: 'tertiary',
+    disabled: disabled || !infinite && page + bundleSize > lastPage,
     onPress: handleNextPress,
+    size: 'small',
     style: children ? styles.nextAnchor : styles.nextInline
   }) : null;
-  const items = times(i => renderItem({
+  const items = !hideIndicator ? times(i => renderItem({
     index: i,
     disabled,
     selected: i === page
-  }), count);
+  }), count) : null;
   const containerProps = {
     style: css([styles.root, children ? styles.rootAnchor : styles.rootInline, style]),
     ...otherProps

package/build/module/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Pagination.tsx"],"names":["React","View","times","Fab","css","useTheme","CheckboxChecked","PaginationItem","useStyles","theme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","children","count","disabled","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","i","selected","containerProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport Fab from '../Fab';\nimport { css, useTheme } from '../styles';\nimport { CheckboxChecked } from '../internal/icons';\nimport PaginationItem from '../PaginationItem';\nimport type PaginationProps from './PaginationProps';\n\ntype PaginationStyleKeys =\n    | 'root'\n    | 'rootInline'\n    | 'rootAnchor'\n    | 'items'\n    | 'arrowContainer'\n    | 'prevInline'\n    | 'prevAnchor'\n    | 'nextInline'\n    | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rootInline: {\n            flexDirection: 'row',\n            alignItems: 'center',\n        },\n        rootAnchor: {\n            flexDirection: 'column',\n        },\n        items: {\n            flexDirection: 'row',\n            justifyContent: 'center',\n            marginTop: theme.spacing(2),\n        },\n        arrowContainer: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n        },\n        prevInline: {\n            marginRight: theme.spacing(1),\n        },\n        prevAnchor: {\n            position: 'absolute',\n            left: -24,\n        },\n        nextInline: {\n            marginLeft: theme.spacing(1),\n        },\n        nextAnchor: {\n            position: 'absolute',\n            right: -24,\n        },\n    };\n};\n\nexport default function Pagination(props: PaginationProps) {\n    const {\n        children,\n        count,\n        disabled = false,\n        hideNextButton = false,\n        hidePrevButton = false,\n        infinite = false,\n        onChange,\n        page,\n        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const firstPage = 0;\n    const lastPage = count - 1;\n\n    const handleChange = (nextPage: number) => {\n        if (nextPage >= firstPage && nextPage <= lastPage) {\n            if (onChange) {\n                onChange(nextPage);\n            }\n        }\n    };\n\n    const handlePrevPress = () => {\n        const prevPage = page > firstPage\n            ? page - 1\n            : (infinite ? lastPage : -1);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page < lastPage\n            ? page + 1\n            : (infinite ? firstPage : -1);\n\n        handleChange(nextPage);\n    };\n\n    //TODO: Need to change arrow icons\n    const prevButton = !hidePrevButton ? (\n        <Fab\n            children={<CheckboxChecked/>}\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        />\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <Fab\n            children={<CheckboxChecked/>}\n            disabled={disabled || (!infinite && page >= lastPage)}\n            onPress={handleNextPress}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        />\n    ) : null;\n\n    const items = times(i => renderItem({ index: i, disabled, selected: i === page }), count);\n\n    const containerProps = {\n        style: css([\n            styles.root,\n            children ? styles.rootAnchor : styles.rootInline,\n            style,\n        ]),\n        ...otherProps,\n    };\n\n    if (children) {\n        return (\n            <View {...containerProps}>\n                <View style={css(styles.arrowContainer)}>\n                    {children}\n                    {prevButton}\n                    {nextButton}\n                </View>\n\n                <View style={css(styles.items)}>\n                    {items}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View {...containerProps}>\n            {prevButton}\n            {items}\n            {nextButton}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Pagination.tsx"],"names":["React","View","ChevronLeft","ChevronRight","times","css","useTheme","IconButton","PaginationItem","useStyles","theme","root","rootInline","flexDirection","alignItems","rootAnchor","items","justifyContent","marginTop","spacing","arrowContainer","prevInline","marginRight","prevAnchor","position","left","nextInline","marginLeft","nextAnchor","right","Pagination","props","bundleSize","children","count","disabled","hideIndicator","hideNextButton","hidePrevButton","infinite","onChange","page","renderItem","index","rest","style","otherProps","styles","firstPage","lastPage","handleChange","nextPage","handlePrevPress","prevPage","handleNextPress","prevButton","nextButton","i","selected","containerProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport PaginationItem from '../PaginationItem';\nimport type PaginationProps from './PaginationProps';\n\ntype PaginationStyleKeys =\n    | 'root'\n    | 'rootInline'\n    | 'rootAnchor'\n    | 'items'\n    | 'arrowContainer'\n    | 'prevInline'\n    | 'prevAnchor'\n    | 'nextInline'\n    | 'nextAnchor';\n\ntype PaginationStyles = NamedStylesStringUnion<PaginationStyleKeys>;\n\nconst useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rootInline: {\n            flexDirection: 'row',\n            alignItems: 'center',\n        },\n        rootAnchor: {\n            flexDirection: 'column',\n        },\n        items: {\n            flexDirection: 'row',\n            justifyContent: 'center',\n            marginTop: theme.spacing(2),\n        },\n        arrowContainer: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n        },\n        prevInline: {\n            marginRight: theme.spacing(1),\n        },\n        prevAnchor: {\n            position: 'absolute',\n            left: -24,\n        },\n        nextInline: {\n            marginLeft: theme.spacing(1),\n        },\n        nextAnchor: {\n            position: 'absolute',\n            right: -24,\n        },\n    };\n};\n\nexport default function Pagination(props: PaginationProps) {\n    const {\n        bundleSize = 1,\n        children,\n        count,\n        disabled = false,\n        hideIndicator = false,\n        hideNextButton = false,\n        hidePrevButton = false,\n        infinite = false,\n        onChange,\n        page,\n        renderItem = ({ index, ...rest }) => <PaginationItem key={`${index}`} {...rest}/>,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const firstPage = 0;\n    const lastPage = count - 1;\n\n    const handleChange = (nextPage: number) => {\n        if (nextPage >= firstPage && nextPage <= lastPage) {\n            if (onChange) {\n                onChange(nextPage);\n            }\n        }\n    };\n\n    const handlePrevPress = () => {\n        const prevPage = page - bundleSize >= firstPage\n            ? page - bundleSize\n            : (infinite ? count - bundleSize + page : -1);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page + bundleSize <= lastPage\n            ? page + bundleSize\n            : (infinite ? page + bundleSize - count : -1);\n\n        handleChange(nextPage);\n    };\n\n    const prevButton = !hidePrevButton ? (\n        <IconButton\n            children={<ChevronLeft/>}\n            color={'tertiary'}\n            disabled={disabled || (!infinite && page <= firstPage)}\n            onPress={handlePrevPress}\n            size={'small'}\n            style={children ? styles.prevAnchor : styles.prevInline}\n        />\n    ) : null;\n\n    const nextButton = !hideNextButton ? (\n        <IconButton\n            children={<ChevronRight/>}\n            color={'tertiary'}\n            disabled={disabled || (!infinite && page + bundleSize > lastPage)}\n            onPress={handleNextPress}\n            size={'small'}\n            style={children ? styles.nextAnchor : styles.nextInline}\n        />\n    ) : null;\n\n    const items = !hideIndicator ? (\n        times(i => renderItem({ index: i, disabled, selected: i === page }), count)\n    ) : null;\n\n    const containerProps = {\n        style: css([\n            styles.root,\n            children ? styles.rootAnchor : styles.rootInline,\n            style,\n        ]),\n        ...otherProps,\n    };\n\n    if (children) {\n        return (\n            <View {...containerProps}>\n                <View style={css(styles.arrowContainer)}>\n                    {children}\n                    {prevButton}\n                    {nextButton}\n                </View>\n\n                <View style={css(styles.items)}>\n                    {items}\n                </View>\n            </View>\n        );\n    }\n\n    return (\n        <View {...containerProps}>\n            {prevButton}\n            {items}\n            {nextButton}\n        </View>\n    );\n};\n"]}

package/build/module/Snackbar/Snackbar.js

@@ -19,7 +19,9 @@ const useStyles = function () {
       paddingBottom: insets.bottom,
       paddingHorizontal: theme.spacing(2),
       position: 'absolute',
-      width: '100%'
+      width: '100%',
+      // TODO: Need to remove zIndex.
+      zIndex: 32
     }
   };
 };

package/build/module/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Snackbar.tsx"],"names":["React","View","useSafeAreaInsets","css","Slide","SnackbarContent","useTheme","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,GAAT,QAAuD,qBAAvD;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,QAAT,QAAyB,WAAzB;;AAKA,MAAMC,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AACA,QAAMG,MAAM,GAAGP,iBAAiB,EAAhC;AAEA,SAAO;AACHQ,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE;AAPL;AADH,GAAP;AAWH,CAfD;;AAiBA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,SADE;AAEFC,IAAAA,gBAAgB,GAAG,IAFjB;AAGFC,IAAAA,QAHE;AAIFC,IAAAA,OAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,KANE;AAOFC,IAAAA,OAAO,GAAG,KAPR;AAQF,OAAGC;AARD,MASFR,KATJ;AAWA,QAAMS,aAAa,GAAG7B,KAAK,CAAC8B,MAAN,CAA4B,IAA5B,CAAtB;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAC/B,QAAIF,aAAa,CAACG,OAAd,KAA0B,IAA9B,EAAoC;AAChCC,MAAAA,YAAY,CAACJ,aAAa,CAACG,OAAf,CAAZ;AACH;AACJ,GAJD;;AAMAhC,EAAAA,KAAK,CAACkC,SAAN,CAAgB,MAAM;AAClB,WAAO,MAAM;AACTH,MAAAA,oBAAoB;AACvB,KAFD;AAGH,GAJD,EAIG,EAJH;AAMA/B,EAAAA,KAAK,CAACkC,SAAN,CAAgB,MAAM;AAClB,QAAIP,OAAO,IAAIL,gBAAgB,KAAK,IAApC,EAA0C;AACtCS,MAAAA,oBAAoB,GADkB,CAGtC;;AACAF,MAAAA,aAAa,CAACG,OAAd,GAAwBG,UAAU,CAAC,MAAM;AACrC,YAAIV,OAAJ,EAAa;AACTA,UAAAA,OAAO;AACV;AACJ,OAJiC,EAI/BH,gBAJ+B,CAAlC;AAKH;AACJ,GAXD,EAWG,CAACK,OAAD,EAAUL,gBAAV,EAA4BG,OAA5B,CAXH;AAaA,QAAMW,MAAM,GAAG7B,SAAS,EAAxB;AAEA,QAAM,CAAC8B,MAAD,EAASC,SAAT,IAAsBtC,KAAK,CAACuC,QAAN,CAAe,IAAf,CAA5B;;AAEA,MAAI,CAACZ,OAAD,IAAYU,MAAhB,EAAwB;AACpB,WAAO,IAAP;AACH;;AAED,sBACI,oBAAC,IAAD;AACI,IAAA,KAAK,EAAElC,GAAG,CAAC,CACPiC,MAAM,CAAC1B,IADA,EAEPgB,KAFO,CAAD;AADd,KAKQE,UALR,gBAOI,oBAAC,KAAD;AACI,IAAA,SAAS,EAAEP,SADf;AAEI,IAAA,MAAM,EAAEM,OAFZ;AAGI,IAAA,OAAO,EAAE,MAAMW,SAAS,CAAC,KAAD,CAH5B;AAII,IAAA,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;AAJ7B,KAMKf,QAAQ,GAAGA,QAAH,gBACL,oBAAC,eAAD;AAAiB,IAAA,OAAO,EAAEC;AAA1B,IAPR,CAPJ,CADJ;AAoBH;AAAA","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent message={message}/>\n                )}\n            </Slide>\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Snackbar.tsx"],"names":["React","View","useSafeAreaInsets","css","Slide","SnackbarContent","useTheme","useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n    const theme = useTheme();\n    const insets = useSafeAreaInsets();\n\n    return {\n        root: {\n            alignSelf: 'center',\n            bottom: theme.spacing(2),\n            maxWidth: 480,\n            paddingBottom: insets.bottom,\n            paddingHorizontal: theme.spacing(2),\n            position: 'absolute',\n            width: '100%',\n            // TODO: Need to remove zIndex.\n            zIndex: 32,\n        },\n    };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n    const {\n        animatedY,\n        autoHideDuration = null,\n        children,\n        message,\n        onClose,\n        style,\n        visible = false,\n        ...otherProps\n    } = props;\n\n    const autoHideTimer = React.useRef<number | null>(null);\n\n    const clearAutoHideTimeout = () => {\n        if (autoHideTimer.current !== null) {\n            clearTimeout(autoHideTimer.current);\n        }\n    };\n\n    React.useEffect(() => {\n        return () => {\n            clearAutoHideTimeout();\n        };\n    }, []);\n\n    React.useEffect(() => {\n        if (visible && autoHideDuration !== null) {\n            clearAutoHideTimeout();\n\n            // @ts-ignore\n            autoHideTimer.current = setTimeout(() => {\n                if (onClose) {\n                    onClose();\n                }\n            }, autoHideDuration);\n        }\n    }, [visible, autoHideDuration, onClose]);\n\n    const styles = useStyles();\n\n    const [exited, setExited] = React.useState(true);\n\n    if (!visible && exited) {\n        return null;\n    }\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Slide\n                animatedY={animatedY}\n                appear={visible}\n                onEnter={() => setExited(false)}\n                onExited={() => setExited(true)}\n            >\n                {children ? children : (\n                    <SnackbarContent message={message}/>\n                )}\n            </Slide>\n        </View>\n    );\n};\n"]}

package/build/module/Tab/Tab.js

@@ -1,12 +1,17 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { Text } from 'react-native';
+import { Platform, Text } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import TabIndicator from './TabIndicator';
 const styles = StyleSheet.create({
+  root: { // TODO: Remove redundant platform checking
+    ...(Platform.OS === 'web' ? {
+      minWidth: 'auto'
+    } : {})
+  },
   primary: {
     minHeight: 48
   },
@@ -32,7 +37,7 @@ export default function Tab(props) {
   const theme = useTheme();
   const vertical = variant === 'bottom-navigation';
   const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
-  const tabBaseStyle = css([variant === 'primary' ? styles.primary : variant === 'secondary' ? styles.secondary : styles.bottomNavigation, style]);
+  const tabBaseStyle = css([styles.root, variant === 'primary' ? styles.primary : variant === 'secondary' ? styles.secondary : styles.bottomNavigation, style]);
   const fontStyle = createFontStyle(theme, {
     selector: typo => variant === 'primary' ? typo.h2 : variant === 'secondary' ? typo.button2 : typo.flag,
     color

package/build/module/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["React","Text","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","iconElement","cloneElement","fill"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;AAC7BC,EAAAA,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GADoB;AAI7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GAJkB;AAO7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAPW,CAAlB,CAAf;AAYA,eAAe,SAASG,GAAT,CAAaC,KAAb,EAA8B;AACzC,QAAM;AACFC,IAAAA,YAAY,GAAG,KADb;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,eAHE;AAIFC,IAAAA,IAAI,EAAEC,WAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,YANE;AAOFC,IAAAA,OAAO,GAAG,SAPR;AAQFC,IAAAA,KARE;AASF,OAAGC;AATD,MAUFV,KAVJ;AAYA,QAAMW,KAAK,GAAGpB,QAAQ,EAAtB;AAEA,QAAMqB,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;AAEA,QAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;AAEA,QAAMC,YAAY,GAAG5B,GAAG,CAAC,CACrBmB,OAAO,KAAK,SAAZ,GACMf,MAAM,CAACE,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0Bf,MAAM,CAACI,SAAjC,GAA6CJ,MAAM,CAACK,gBAHtC,EAIrBW,KAJqB,CAAD,CAAxB;AAOA,QAAMS,SAAS,GAAG9B,eAAe,CAACuB,KAAD,EAAQ;AACrCQ,IAAAA,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;AAIrCV,IAAAA;AAJqC,GAAR,CAAjC;AAOA,QAAMT,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;AACA,QAAMmB,WAAW,GAAGpB,IAAI,gBAAGpB,KAAK,CAACyC,YAAN,CAAmBrB,IAAnB,EAAyB;AAAEsB,IAAAA,IAAI,EAAEb;AAAR,GAAzB,CAAH,GAA+C,IAAvE;AAEA,sBACI,oBAAC,OAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAEK;AAFX,KAGQP,UAHR,gBAKI,oBAAC,KAAD;AACI,IAAA,QAAQ,EAAEc,WADd;AAEI,IAAA,SAAS,EAAE,CAACvB;AAFhB,IALJ,eAUI,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEC,QADd;AAEI,IAAA,KAAK,EAAEb,GAAG,CAAC6B,SAAD;AAFd,IAVJ,EAeKf,eAAe,gBAAG,oBAAC,YAAD,OAAH,GAAqB,IAfzC,CADJ;AAmBH;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            vertical={vertical}\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["React","Platform","Text","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","primary","minHeight","secondary","bottomNavigation","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","selected","selectedIcon","variant","style","otherProps","theme","vertical","color","palette","text","hint","tabBaseStyle","fontStyle","selector","typo","h2","button2","flag","iconElement","cloneElement","fill"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,cAA/B;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE,EACF;AACA,QAAIX,QAAQ,CAACY,EAAT,KAAgB,KAAhB,GAAwB;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAxB,GAA+C,EAAnD;AAFE,GADuB;AAK7BC,EAAAA,OAAO,EAAE;AACLC,IAAAA,SAAS,EAAE;AADN,GALoB;AAQ7BC,EAAAA,SAAS,EAAE;AACPD,IAAAA,SAAS,EAAE;AADJ,GARkB;AAW7BE,EAAAA,gBAAgB,EAAE;AACdF,IAAAA,SAAS,EAAE;AADG;AAXW,CAAlB,CAAf;AAgBA,eAAe,SAASG,GAAT,CAAaC,KAAb,EAA8B;AACzC,QAAM;AACFC,IAAAA,YAAY,GAAG,KADb;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,eAHE;AAIFC,IAAAA,IAAI,EAAEC,WAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,YANE;AAOFC,IAAAA,OAAO,GAAG,SAPR;AAQFC,IAAAA,KARE;AASF,OAAGC;AATD,MAUFV,KAVJ;AAYA,QAAMW,KAAK,GAAGvB,QAAQ,EAAtB;AAEA,QAAMwB,QAAQ,GAAGJ,OAAO,KAAK,mBAA7B;AAEA,QAAMK,KAAK,GAAGP,QAAQ,GAAGK,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBpB,OAAtB,GAAgCgB,KAAK,CAACG,OAAN,CAAcC,IAAd,CAAmBC,IAAzE;AAEA,QAAMC,YAAY,GAAG/B,GAAG,CAAC,CACrBI,MAAM,CAACE,IADc,EAErBgB,OAAO,KAAK,SAAZ,GACMlB,MAAM,CAACK,OADb,GAEOa,OAAO,KAAK,WAAZ,GAA0BlB,MAAM,CAACO,SAAjC,GAA6CP,MAAM,CAACQ,gBAJtC,EAKrBW,KALqB,CAAD,CAAxB;AAQA,QAAMS,SAAS,GAAGjC,eAAe,CAAC0B,KAAD,EAAQ;AACrCQ,IAAAA,QAAQ,EAAGC,IAAD,IAAUZ,OAAO,KAAK,SAAZ,GACdY,IAAI,CAACC,EADS,GAEbb,OAAO,KAAK,WAAZ,GAA0BY,IAAI,CAACE,OAA/B,GAAyCF,IAAI,CAACG,IAHhB;AAIrCV,IAAAA;AAJqC,GAAR,CAAjC;AAOA,QAAMT,IAAI,GAAGE,QAAQ,GAAIC,YAAY,IAAIF,WAApB,GAAmCA,WAAxD;AACA,QAAMmB,WAAW,GAAGpB,IAAI,gBAAGxB,KAAK,CAAC6C,YAAN,CAAmBrB,IAAnB,EAAyB;AAAEsB,IAAAA,IAAI,EAAEb;AAAR,GAAzB,CAAH,GAA+C,IAAvE;AAEA,sBACI,oBAAC,OAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,KAAK,EAAEK;AAFX,KAGQP,UAHR,gBAKI,oBAAC,KAAD;AACI,IAAA,QAAQ,EAAEc,WADd;AAEI,IAAA,SAAS,EAAE,CAACvB;AAFhB,IALJ,eAUI,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEC,QADd;AAEI,IAAA,KAAK,EAAEhB,GAAG,CAACgC,SAAD;AAFd,IAVJ,EAeKf,eAAe,gBAAG,oBAAC,YAAD,OAAH,GAAqB,IAfzC,CADJ;AAmBH;AAAA","sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport type TabProps from './TabProps';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n    root: {\n        // TODO: Remove redundant platform checking\n        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n    },\n    primary: {\n        minHeight: 48,\n    },\n    secondary: {\n        minHeight: 48,\n    },\n    bottomNavigation: {\n        minHeight: 56,\n    },\n});\n\nexport default function Tab(props: TabProps) {\n    const {\n        badgeVisible = false,\n        children,\n        enableIndicator,\n        icon: defaultIcon,\n        selected,\n        selectedIcon,\n        variant = 'primary',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const vertical = variant === 'bottom-navigation';\n\n    const color = selected ? theme.palette.text.primary : theme.palette.text.hint;\n\n    const tabBaseStyle = css([\n        styles.root,\n        variant === 'primary'\n            ? styles.primary\n            : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),\n        style,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => variant === 'primary'\n            ? typo.h2\n            : (variant === 'secondary' ? typo.button2 : typo.flag),\n        color,\n    });\n\n    const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n    const iconElement = icon ? React.cloneElement(icon, { fill: color }) : null;\n\n    return (\n        <TabBase\n            vertical={vertical}\n            style={tabBaseStyle}\n            {...otherProps}\n        >\n            <Badge\n                children={iconElement}\n                invisible={!badgeVisible}\n            />\n\n            <Text\n                children={children}\n                style={css(fontStyle)}\n            />\n\n            {enableIndicator ? <TabIndicator/> : null}\n        </TabBase>\n    );\n};\n"]}

package/build/typescript/Pagination/PaginationProps.d.ts

@@ -16,6 +16,11 @@ export interface PaginationRenderItemParams {
     selected: boolean;
 }
 export default interface PaginationProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * The Number of pages that change when the button is pressed
+     * @default 1
+     */
+    bundleSize?: number;
     /**
      * The pagination will be added relative to this node.
      */
@@ -29,6 +34,11 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      * @default false
      */
     disabled?: boolean;
+    /**
+     * If `true`, hide the page indicator.
+     * @default false
+     */
+    hideIndicator?: boolean;
     /**
      * If `true`, hide the next-page button.
      * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.11.7",
+  "version": "1.11.11",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3048a12a440cd3600c78ba023dafa927c2f51cc6"
+  "gitHead": "f8d02fe9966aa18f0e970ff7fb876d1822352693"
 }

package/src/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
 import { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';
@@ -32,15 +32,15 @@ export default function Accordion(props: AccordionProps) {
     const styles = useStyles();
 
     const [isExpanded, setIsExpanded] = useState(false);
-    const rotate = useSharedValue(0);
+    const rotate = Animated.useSharedValue(0);
 
-    const animatedChevronDownStyles = useAnimatedStyle(() => ({
+    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
     }));
 
     const onPress = () => {
-        setIsExpanded(!isExpanded);
-        rotate.value = withTiming(isExpanded ? 180 : 0, ANIMATION_OPTION);
+        setIsExpanded(prev => !prev);
+        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
     };
 
     return (

package/src/CircularProgress/CircularProgress.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Animated, {
-    Easing,
-    interpolate,
-    useAnimatedStyle,
-    useSharedValue,
-    withRepeat,
-    withTiming,
-} from 'react-native-reanimated';
+import Animated, { Easing } from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
 import { css } from '../styles';
 import { OverridableComponentProps } from '../types';
@@ -34,10 +27,10 @@ export default function CircularProgress(props: OverridableComponentProps<ViewPr
         style,
     ]);
 
-    const sharedSpin = useSharedValue(0);
+    const sharedSpin = Animated.useSharedValue(0);
 
-    const spinStyle = useAnimatedStyle(() => {
-        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
+    const spinStyle = Animated.useAnimatedStyle(() => {
+        const interpolatedSpin = Animated.interpolate(sharedSpin.value, [0, 1], [0, 360]);
 
         return {
             transform: [{ rotate: `${interpolatedSpin}deg` }],
@@ -45,8 +38,8 @@ export default function CircularProgress(props: OverridableComponentProps<ViewPr
     });
 
     React.useEffect(() => {
-        sharedSpin.value = withRepeat(
-            withTiming(1, { duration: 900, easing: Easing.linear }),
+        sharedSpin.value = Animated.withRepeat(
+            Animated.withTiming(1, { duration: 900, easing: Easing.linear }),
             -1,
             false,
         );

package/src/Pagination/Pagination.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
+import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { times } from '@fountain-ui/utils';
-import Fab from '../Fab';
 import { css, useTheme } from '../styles';
-import { CheckboxChecked } from '../internal/icons';
+import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
 import type PaginationProps from './PaginationProps';
 
@@ -61,9 +61,11 @@ const useStyles: UseStyles<PaginationStyles> = function (): PaginationStyles {
 
 export default function Pagination(props: PaginationProps) {
     const {
+        bundleSize = 1,
         children,
         count,
         disabled = false,
+        hideIndicator = false,
         hideNextButton = false,
         hidePrevButton = false,
         infinite = false,
@@ -88,41 +90,46 @@ export default function Pagination(props: PaginationProps) {
     };
 
     const handlePrevPress = () => {
-        const prevPage = page > firstPage
-            ? page - 1
-            : (infinite ? lastPage : -1);
+        const prevPage = page - bundleSize >= firstPage
+            ? page - bundleSize
+            : (infinite ? count - bundleSize + page : -1);
 
         handleChange(prevPage);
     };
 
     const handleNextPress = () => {
-        const nextPage = page < lastPage
-            ? page + 1
-            : (infinite ? firstPage : -1);
+        const nextPage = page + bundleSize <= lastPage
+            ? page + bundleSize
+            : (infinite ? page + bundleSize - count : -1);
 
         handleChange(nextPage);
     };
 
-    //TODO: Need to change arrow icons
     const prevButton = !hidePrevButton ? (
-        <Fab
-            children={<CheckboxChecked/>}
+        <IconButton
+            children={<ChevronLeft/>}
+            color={'tertiary'}
             disabled={disabled || (!infinite && page <= firstPage)}
             onPress={handlePrevPress}
+            size={'small'}
             style={children ? styles.prevAnchor : styles.prevInline}
         />
     ) : null;
 
     const nextButton = !hideNextButton ? (
-        <Fab
-            children={<CheckboxChecked/>}
-            disabled={disabled || (!infinite && page >= lastPage)}
+        <IconButton
+            children={<ChevronRight/>}
+            color={'tertiary'}
+            disabled={disabled || (!infinite && page + bundleSize > lastPage)}
             onPress={handleNextPress}
+            size={'small'}
             style={children ? styles.nextAnchor : styles.nextInline}
         />
     ) : null;
 
-    const items = times(i => renderItem({ index: i, disabled, selected: i === page }), count);
+    const items = !hideIndicator ? (
+        times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+    ) : null;
 
     const containerProps = {
         style: css([

package/src/Pagination/PaginationProps.ts

@@ -20,6 +20,12 @@ export interface PaginationRenderItemParams {
 }
 
 export default interface PaginationProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * The Number of pages that change when the button is pressed
+     * @default 1
+     */
+    bundleSize?: number,
+
     /**
      * The pagination will be added relative to this node.
      */
@@ -36,6 +42,13 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      */
     disabled?: boolean;
 
+
+    /**
+     * If `true`, hide the page indicator.
+     * @default false
+     */
+    hideIndicator?: boolean,
+
     /**
      * If `true`, hide the next-page button.
      * @default false

package/src/Snackbar/Snackbar.tsx

@@ -22,6 +22,8 @@ const useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {
             paddingHorizontal: theme.spacing(2),
             position: 'absolute',
             width: '100%',
+            // TODO: Need to remove zIndex.
+            zIndex: 32,
         },
     };
 };

package/src/Tab/Tab.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Platform, Text } from 'react-native';
 import Badge from '../Badge';
 import TabBase from '../TabBase';
 import type TabProps from './TabProps';
@@ -7,6 +7,10 @@ import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import TabIndicator from './TabIndicator';
 
 const styles = StyleSheet.create({
+    root: {
+        // TODO: Remove redundant platform checking
+        ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),
+    },
     primary: {
         minHeight: 48,
     },
@@ -38,6 +42,7 @@ export default function Tab(props: TabProps) {
     const color = selected ? theme.palette.text.primary : theme.palette.text.hint;
 
     const tabBaseStyle = css([
+        styles.root,
         variant === 'primary'
             ? styles.primary
             : (variant === 'secondary' ? styles.secondary : styles.bottomNavigation),