@fountain-ui/core 1.10.0 → 1.11.3

package/build/module/ButtonBase/ButtonBase.js

@@ -4,6 +4,7 @@ import React from 'react';
 import Animated from 'react-native-reanimated';
 import { useThrottle } from '../hooks';
 import { AnimatedPressable } from '../animated';
+import { StyleSheet } from '../styles';
 const ORIGINAL_OPACITY = 1;
 const ACTIVE_OPACITY = .65;
 const DISABLED_OPACITY = .3;
@@ -12,6 +13,14 @@ const MINIFIED_SCALE = .96;
 const animationTimingConfig = {
   duration: 150
 };
+const styles = StyleSheet.create({
+  disabled: {
+    opacity: DISABLED_OPACITY,
+    transform: [{
+      scale: ORIGINAL_SCALE
+    }]
+  }
+});
 export default function ButtonBase(props) {
   const {
     children,
@@ -30,12 +39,13 @@ export default function ButtonBase(props) {
   const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);
   const scale = Animated.useSharedValue(ORIGINAL_SCALE);
   const animatedStyle = Animated.useAnimatedStyle(() => ({
-    opacity: disabled ? DISABLED_OPACITY : opacity.value,
+    opacity: opacity.value,
     transform: [{
-      scale: disabled ? ORIGINAL_SCALE : scale.value
+      scale: scale.value
     }]
   }));
-  const startAnimation = React.useCallback((pressIn, isHovered = false) => {
+
+  const startAnimation = (pressIn, isHovered = false) => {
     if (pressEffect === 'none') {
       return;
     }
@@ -53,13 +63,14 @@ export default function ButtonBase(props) {
         scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);
       }
     }
-  }, [pressEffect]);
+  };
+
   return /*#__PURE__*/React.createElement(AnimatedPressable, _extends({
     disabled: disabled,
     onPress: handlePress,
     onPressIn: () => startAnimation(true),
     onPressOut: () => startAnimation(false),
-    style: [animatedStyle, style]
+    style: [animatedStyle, disabled ? styles.disabled : undefined, style]
   }, otherProps), typeof children !== 'function' ? ({
     hovered
   }) => {

package/build/module/ButtonBase/ButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ButtonBase.tsx"],"names":["React","Animated","useThrottle","AnimatedPressable","ORIGINAL_OPACITY","ACTIVE_OPACITY","DISABLED_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","opacity","useSharedValue","scale","animatedStyle","useAnimatedStyle","value","transform","startAnimation","useCallback","pressIn","isHovered","withTiming","withDelay","hovered","undefined"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\nconst ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\nconst DISABLED_OPACITY = .3;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n    const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        opacity: disabled ? DISABLED_OPACITY : opacity.value,\n        transform: [{ scale: disabled ? ORIGINAL_SCALE : scale.value }],\n    }));\n\n    const startAnimation = React.useCallback((pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = Animated.withDelay(\n                    100,\n                    Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n            }\n        }\n    }, [pressEffect]);\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[animatedStyle, style]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"]}
+{"version":3,"sources":["ButtonBase.tsx"],"names":["React","Animated","useThrottle","AnimatedPressable","StyleSheet","ORIGINAL_OPACITY","ACTIVE_OPACITY","DISABLED_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","useSharedValue","animatedStyle","useAnimatedStyle","value","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\nconst ORIGINAL_OPACITY = 1;\nconst ACTIVE_OPACITY = .65;\nconst DISABLED_OPACITY = .3;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n    disabled: {\n        opacity: DISABLED_OPACITY,\n        transform: [{ scale: ORIGINAL_SCALE }],\n    },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n    const {\n        children,\n        disabled = false,\n        disableThrottle = false,\n        onPress,\n        pressEffect = 'opacity',\n        style,\n        throttleMillis = 650,\n        ...otherProps\n    } = props;\n\n    const handlePress = useThrottle({\n        periodMillis: disableThrottle ? 0 : throttleMillis,\n        callback: onPress,\n    });\n\n    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n    const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        opacity: opacity.value,\n        transform: [{ scale: scale.value }],\n    }));\n\n    const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n        if (pressEffect === 'none') {\n            return;\n        }\n\n        if (pressEffect === 'opacity') {\n            if (pressIn) {\n                opacity.value = ACTIVE_OPACITY;\n            } else {\n                opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n            }\n        } else if (!isHovered) {\n            if (pressIn) {\n                scale.value = Animated.withDelay(\n                    100,\n                    Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n                );\n            } else {\n                scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n            }\n        }\n    };\n\n    return (\n        <AnimatedPressable\n            disabled={disabled}\n            onPress={handlePress}\n            onPressIn={() => startAnimation(true)}\n            onPressOut={() => startAnimation(false)}\n            style={[\n                animatedStyle,\n                disabled ? styles.disabled : undefined,\n                style,\n            ]}\n            {...otherProps}\n        >\n            {typeof children !== 'function' ? (\n                ({ hovered }) => {\n                    if (hovered !== undefined) {\n                        startAnimation(hovered, true);\n                    }\n\n                    return children;\n                }\n            ) : children}\n        </AnimatedPressable>\n    );\n};\n"]}

package/build/module/Link/Link.js

@@ -1,7 +1,7 @@
 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 { Linking } from 'react-native';
+import { Linking, Platform } from 'react-native';
 import Pressable from '../Pressable';
 import Typography from '../Typography';
 import { css } from '../styles';
@@ -27,6 +27,10 @@ export default function Link(props) {
   const styles = useStyles();
 
   const handlePress = async event => {
+    if (Platform.OS === 'web') {
+      event.preventDefault();
+    }
+
     if (onPress) {
       onPress(event);
       return;
@@ -39,7 +43,7 @@ export default function Link(props) {
 
   return /*#__PURE__*/React.createElement(Pressable, {
     disabled: disabled,
-    onPress: handlePress,
+    onPress: Platform.OS === 'web' ? undefined : handlePress,
     style: css([styles.root, style])
   }, ({
     hovered
@@ -47,7 +51,8 @@ export default function Link(props) {
     const underlineStyle = underline === 'always' || underline === 'hover' && hovered ? styles.underline : undefined;
     return /*#__PURE__*/React.createElement(Typography, _extends({
       href: href,
-      style: underlineStyle
+      style: underlineStyle,
+      onPress: Platform.OS === 'web' ? handlePress : undefined
     }, otherProps));
   });
 }

package/build/module/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.tsx"],"names":["React","Linking","Pressable","Typography","css","useStyles","root","underline","textDecorationLine","Link","props","disabled","href","onPress","style","otherProps","styles","handlePress","event","canOpenURL","openURL","hovered","underlineStyle","undefined"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAgCC,OAAhC,QAA+C,cAA/C;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAAgC,GAAG,YAAwB;AAC7D,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,SAAS,EAAE;AACPC,MAAAA,kBAAkB,EAAE;AADb;AAFR,GAAP;AAMH,CAPD;;AASA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;AAC3C,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,IAFE;AAGFC,IAAAA,OAHE;AAIFC,IAAAA,KAJE;AAKFP,IAAAA,SAAS,GAAG,QALV;AAMF,OAAGQ;AAND,MAOFL,KAPJ;AASA,QAAMM,MAAM,GAAGX,SAAS,EAAxB;;AAEA,QAAMY,WAAW,GAAG,MAAOC,KAAP,IAAwC;AACxD,QAAIL,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAACK,KAAD,CAAP;AACA;AACH;;AAED,QAAI,MAAMjB,OAAO,CAACkB,UAAR,CAAmBP,IAAnB,CAAV,EAAoC;AAChC,YAAMX,OAAO,CAACmB,OAAR,CAAgBR,IAAhB,CAAN;AACH;AACJ,GATD;;AAWA,sBACI,oBAAC,SAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,OAAO,EAAEM,WAFb;AAGI,IAAA,KAAK,EAAEb,GAAG,CAAC,CAACY,MAAM,CAACV,IAAR,EAAcQ,KAAd,CAAD;AAHd,KAKK,CAAC;AAAEO,IAAAA;AAAF,GAAD,KAAiB;AACd,UAAMC,cAAc,GAAIf,SAAS,KAAK,QAAd,IAA2BA,SAAS,KAAK,OAAd,IAAyBc,OAArD,GACjBL,MAAM,CAACT,SADU,GAEjBgB,SAFN;AAIA,wBACI,oBAAC,UAAD;AACI,MAAA,IAAI,EAAEX,IADV;AAEI,MAAA,KAAK,EAAEU;AAFX,OAGQP,UAHR,EADJ;AAOH,GAjBL,CADJ;AAqBH;AAAA","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, Linking } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Pressable from '../Pressable';\nimport Typography from '../Typography';\nimport { css } from '../styles';\nimport type LinkProps from './LinkProps';\n\ntype LinkStyles = NamedStylesStringUnion<'root' | 'underline'>;\n\nconst useStyles: UseStyles<LinkStyles> = function (): LinkStyles {\n    return {\n        root: {},\n        underline: {\n            textDecorationLine: 'underline',\n        },\n    };\n};\n\nexport default function Link(props: LinkProps) {\n    const {\n        disabled = false,\n        href,\n        onPress,\n        style,\n        underline = 'always',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const handlePress = async (event: GestureResponderEvent) => {\n        if (onPress) {\n            onPress(event);\n            return;\n        }\n\n        if (await Linking.canOpenURL(href)) {\n            await Linking.openURL(href);\n        }\n    };\n\n    return (\n        <Pressable\n            disabled={disabled}\n            onPress={handlePress}\n            style={css([styles.root, style])}\n        >\n            {({ hovered }) => {\n                const underlineStyle = (underline === 'always' || (underline === 'hover' && hovered))\n                    ? styles.underline\n                    : undefined;\n\n                return (\n                    <Typography\n                        href={href}\n                        style={underlineStyle}\n                        {...otherProps}\n                    />\n                );\n            }}\n        </Pressable>\n    );\n};\n"]}
+{"version":3,"sources":["Link.tsx"],"names":["React","Linking","Platform","Pressable","Typography","css","useStyles","root","underline","textDecorationLine","Link","props","disabled","href","onPress","style","otherProps","styles","handlePress","event","OS","preventDefault","canOpenURL","openURL","undefined","hovered","underlineStyle"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAgCC,OAAhC,EAAyCC,QAAzC,QAAyD,cAAzD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,GAAT,QAAoB,WAApB;;AAKA,MAAMC,SAAgC,GAAG,YAAwB;AAC7D,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,SAAS,EAAE;AACPC,MAAAA,kBAAkB,EAAE;AADb;AAFR,GAAP;AAMH,CAPD;;AASA,eAAe,SAASC,IAAT,CAAcC,KAAd,EAAgC;AAC3C,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,IAFE;AAGFC,IAAAA,OAHE;AAIFC,IAAAA,KAJE;AAKFP,IAAAA,SAAS,GAAG,QALV;AAMF,OAAGQ;AAND,MAOFL,KAPJ;AASA,QAAMM,MAAM,GAAGX,SAAS,EAAxB;;AAEA,QAAMY,WAAW,GAAG,MAAOC,KAAP,IAAwC;AACxD,QAAIjB,QAAQ,CAACkB,EAAT,KAAgB,KAApB,EAA2B;AACvBD,MAAAA,KAAK,CAACE,cAAN;AACH;;AAED,QAAIP,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAACK,KAAD,CAAP;AACA;AACH;;AAED,QAAI,MAAMlB,OAAO,CAACqB,UAAR,CAAmBT,IAAnB,CAAV,EAAoC;AAChC,YAAMZ,OAAO,CAACsB,OAAR,CAAgBV,IAAhB,CAAN;AACH;AACJ,GAbD;;AAeA,sBACI,oBAAC,SAAD;AACI,IAAA,QAAQ,EAAED,QADd;AAEI,IAAA,OAAO,EAAEV,QAAQ,CAACkB,EAAT,KAAgB,KAAhB,GAAwBI,SAAxB,GAAoCN,WAFjD;AAGI,IAAA,KAAK,EAAEb,GAAG,CAAC,CAACY,MAAM,CAACV,IAAR,EAAcQ,KAAd,CAAD;AAHd,KAKK,CAAC;AAAEU,IAAAA;AAAF,GAAD,KAAiB;AACd,UAAMC,cAAc,GAAIlB,SAAS,KAAK,QAAd,IAA2BA,SAAS,KAAK,OAAd,IAAyBiB,OAArD,GACjBR,MAAM,CAACT,SADU,GAEjBgB,SAFN;AAIA,wBACI,oBAAC,UAAD;AACI,MAAA,IAAI,EAAEX,IADV;AAEI,MAAA,KAAK,EAAEa,cAFX;AAGI,MAAA,OAAO,EAAExB,QAAQ,CAACkB,EAAT,KAAgB,KAAhB,GAAwBF,WAAxB,GAAsCM;AAHnD,OAIQR,UAJR,EADJ;AAQH,GAlBL,CADJ;AAsBH;AAAA","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, Linking, Platform } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Pressable from '../Pressable';\nimport Typography from '../Typography';\nimport { css } from '../styles';\nimport type LinkProps from './LinkProps';\n\ntype LinkStyles = NamedStylesStringUnion<'root' | 'underline'>;\n\nconst useStyles: UseStyles<LinkStyles> = function (): LinkStyles {\n    return {\n        root: {},\n        underline: {\n            textDecorationLine: 'underline',\n        },\n    };\n};\n\nexport default function Link(props: LinkProps) {\n    const {\n        disabled = false,\n        href,\n        onPress,\n        style,\n        underline = 'always',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const handlePress = async (event: GestureResponderEvent) => {\n        if (Platform.OS === 'web') {\n            event.preventDefault();\n        }\n\n        if (onPress) {\n            onPress(event);\n            return;\n        }\n\n        if (await Linking.canOpenURL(href)) {\n            await Linking.openURL(href);\n        }\n    };\n\n    return (\n        <Pressable\n            disabled={disabled}\n            onPress={Platform.OS === 'web' ? undefined : handlePress}\n            style={css([styles.root, style])}\n        >\n            {({ hovered }) => {\n                const underlineStyle = (underline === 'always' || (underline === 'hover' && hovered))\n                    ? styles.underline\n                    : undefined;\n\n                return (\n                    <Typography\n                        href={href}\n                        style={underlineStyle}\n                        onPress={Platform.OS === 'web' ? handlePress : undefined}\n                        {...otherProps}\n                    />\n                );\n            }}\n        </Pressable>\n    );\n};\n"]}

package/build/module/SvgIcon/SvgIcon.js

@@ -2,17 +2,23 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import Svg from 'react-native-svg';
+import { css } from '../styles';
 export default function SvgIcon(props) {
   const {
     fill = '#000',
     height = 24,
+    style: styleProp,
     viewBox = '0 0 20 20',
     width = 24,
     ...otherProps
   } = props;
+  const style = css([{
+    flexShrink: 0
+  }, styleProp]);
   return /*#__PURE__*/React.createElement(Svg, _extends({
     fill: fill,
     height: height,
+    style: style,
     viewBox: viewBox,
     width: width
   }, otherProps));

package/build/module/SvgIcon/SvgIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SvgIcon.tsx"],"names":["React","Svg","SvgIcon","props","fill","height","viewBox","width","otherProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,GAAP,MAAgB,kBAAhB;AAGA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,IAAI,GAAG,MADL;AAEFC,IAAAA,MAAM,GAAG,EAFP;AAGFC,IAAAA,OAAO,GAAG,WAHR;AAIFC,IAAAA,KAAK,GAAG,EAJN;AAKF,OAAGC;AALD,MAMYL,KANlB;AAQA,sBACI,oBAAC,GAAD;AACI,IAAA,IAAI,EAAEC,IADV;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,OAAO,EAAEC,OAHb;AAII,IAAA,KAAK,EAAEC;AAJX,KAKQC,UALR,EADJ;AASH;AAAA","sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        fill = '#000',\n        height = 24,\n        viewBox = '0 0 20 20',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    return (\n        <Svg\n            fill={fill}\n            height={height}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};\n"]}
+{"version":3,"sources":["SvgIcon.tsx"],"names":["React","Svg","css","SvgIcon","props","fill","height","style","styleProp","viewBox","width","otherProps","flexShrink"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,GAAP,MAAgB,kBAAhB;AACA,SAASC,GAAT,QAAoB,WAApB;AAGA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,IAAI,GAAG,MADL;AAEFC,IAAAA,MAAM,GAAG,EAFP;AAGFC,IAAAA,KAAK,EAAEC,SAHL;AAIFC,IAAAA,OAAO,GAAG,WAJR;AAKFC,IAAAA,KAAK,GAAG,EALN;AAMF,OAAGC;AAND,MAOYP,KAPlB;AASA,QAAMG,KAAK,GAAGL,GAAG,CAAC,CACd;AAAEU,IAAAA,UAAU,EAAG;AAAf,GADc,EAEdJ,SAFc,CAAD,CAAjB;AAKA,sBACI,oBAAC,GAAD;AACI,IAAA,IAAI,EAAEH,IADV;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,KAAK,EAAEC,KAHX;AAII,IAAA,OAAO,EAAEE,OAJb;AAKI,IAAA,KAAK,EAAEC;AALX,KAMQC,UANR,EADJ;AAUH;AAAA","sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n    const {\n        fill = '#000',\n        height = 24,\n        style: styleProp,\n        viewBox = '0 0 20 20',\n        width = 24,\n        ...otherProps\n    }: SvgIconProps = props;\n\n    const style = css([\n        { flexShrink : 0 },\n        styleProp,\n    ]);\n\n    return (\n        <Svg\n            fill={fill}\n            height={height}\n            style={style}\n            viewBox={viewBox}\n            width={width}\n            {...otherProps}\n        />\n    );\n};"]}

package/build/module/Tab/Tab.js

@@ -44,10 +44,10 @@ export default function Tab(props) {
   return /*#__PURE__*/React.createElement(TabBase, _extends({
     vertical: vertical,
     style: tabBaseStyle
-  }, otherProps), iconElement && badgeVisible ? /*#__PURE__*/React.createElement(Badge, {
+  }, otherProps), /*#__PURE__*/React.createElement(Badge, {
     children: iconElement,
-    invisible: false
-  }) : iconElement, /*#__PURE__*/React.createElement(Text, {
+    invisible: !badgeVisible
+  }), /*#__PURE__*/React.createElement(Text, {
     children: children,
     style: css(fontStyle)
   }), enableIndicator ? /*#__PURE__*/React.createElement(TabIndicator, null) : null);

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,GAKKc,WAAW,IAAIvB,YAAf,gBACG,oBAAC,KAAD;AACI,IAAA,QAAQ,EAAEuB,WADd;AAEI,IAAA,SAAS,EAAE;AAFf,IADH,GAKGA,WAVR,eAYI,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEtB,QADd;AAEI,IAAA,KAAK,EAAEb,GAAG,CAAC6B,SAAD;AAFd,IAZJ,EAiBKf,eAAe,gBAAG,oBAAC,YAAD,OAAH,GAAqB,IAjBzC,CADJ;AAqBH;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            {iconElement && badgeVisible ? (\n                <Badge\n                    children={iconElement}\n                    invisible={false}\n                />\n            ) : iconElement}\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","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"]}

package/build/module/Typography/Typography.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Platform, Text } from 'react-native';
 import { createFontStyle, css, useTheme } from '../styles';
 const accessibilityMap = {
   h1: {
@@ -46,7 +46,7 @@ function selectColor(theme, colorProp) {
 
   switch (colorProp) {
     case 'inherit':
-      return undefined;
+      return Platform.OS === 'web' ? 'inherit' : undefined;
 
     case 'textPrimary':
       return palette.primary;

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

@@ -1 +1 @@
-{"version":3,"sources":["Typography.tsx"],"names":["React","Text","createFontStyle","css","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","undefined","primary","secondary","accent","hint","main","Typography","forwardRef","props","ref","align","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textStyle","textAlign","flexShrink","accessibility","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n    body1: { accessibilityRole: 'text' },\n    body2: { accessibilityRole: 'text' },\n    caption1: { accessibilityRole: 'text' },\n    caption2: { accessibilityRole: 'text' },\n    flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\n}\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        align = 'inherit',\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\n        color: selectColor(theme, colorProp),\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            textAlign: align === 'inherit' ? 'auto' : align,\n            flexShrink: 1,\n        },\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole}\n            aria-level={accessibility?.['area-level']}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"]}
+{"version":3,"sources":["Typography.tsx"],"names":["React","Platform","Text","createFontStyle","css","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","Typography","forwardRef","props","ref","align","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textStyle","textAlign","flexShrink","accessibility","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Platform, Text } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n    h1: { accessibilityRole: 'header', 'area-level': 1 },\n    h2: { accessibilityRole: 'header', 'area-level': 2 },\n    h3: { accessibilityRole: 'header', 'area-level': 3 },\n    subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n    subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n    body1: { accessibilityRole: 'text' },\n    body2: { accessibilityRole: 'text' },\n    caption1: { accessibilityRole: 'text' },\n    caption2: { accessibilityRole: 'text' },\n    flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n    const palette = theme.palette.text;\n\n    switch (colorProp) {\n        case 'inherit':\n            return Platform.OS === 'web' ? 'inherit' : undefined;\n        case 'textPrimary':\n            return palette.primary;\n        case 'textSecondary':\n            return palette.secondary;\n        case 'textAccent':\n            return palette.accent;\n        case 'textHint':\n            return palette.hint;\n    }\n\n    return theme.palette[colorProp]?.main;\n}\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n    const {\n        align = 'inherit',\n        children,\n        color: colorProp = 'inherit',\n        ellipsizeMode = 'tail',\n        href,\n        numberOfLines,\n        onPress,\n        selectable,\n        style,\n        variant = 'body1',\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography[variant],\n        color: selectColor(theme, colorProp),\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            textAlign: align === 'inherit' ? 'auto' : align,\n            flexShrink: 1,\n        },\n        style,\n    ]);\n\n    const accessibility = accessibilityMap[variant];\n    const accessibilityRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n\n    return (\n        <Text\n            ref={ref}\n            accessibilityRole={accessibilityRole}\n            aria-level={accessibility?.['area-level']}\n            children={children}\n            ellipsizeMode={ellipsizeMode}\n            // @ts-ignore\n            href={href}\n            numberOfLines={numberOfLines}\n            onPress={onPress}\n            selectable={selectable}\n            style={textStyle}\n        />\n    );\n});\n\nexport default React.memo(Typography);\n"]}

package/build/module/hooks/index.js

@@ -1,4 +1,6 @@
+export { default as useBreakpointUp } from './useBreakpointUp';
 export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
+export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
 export { default as useThrottle } from './useThrottle';

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","useCollapsibleAppBar","useElevationStyle","useFadeInAppBar","useThrottle"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAApB,QAAgD,wBAAhD;AACA,SAASD,OAAO,IAAIE,iBAApB,QAA6C,qBAA7C;AACA,SAASF,OAAO,IAAIG,eAApB,QAA2C,mBAA3C;AACA,SAASH,OAAO,IAAII,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';"]}
+{"version":3,"sources":["index.ts"],"names":["default","useBreakpointUp","useCollapsibleAppBar","useContentContainerStyle","useElevationStyle","useFadeInAppBar","useThrottle"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,mBAA3C;AACA,SAASD,OAAO,IAAIE,oBAApB,QAAgD,wBAAhD;AACA,SAASF,OAAO,IAAIG,wBAApB,QAAoD,4BAApD;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,qBAA7C;AACA,SAASJ,OAAO,IAAIK,eAApB,QAA2C,mBAA3C;AACA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as useBreakpointUp } from './useBreakpointUp';\nexport { default as useCollapsibleAppBar } from './useCollapsibleAppBar';\nexport { default as useContentContainerStyle } from './useContentContainerStyle';\nexport { default as useElevationStyle } from './useElevationStyle';\nexport { default as useFadeInAppBar } from './useFadeInAppBar';\nexport { default as useThrottle } from './useThrottle';\n"]}

package/build/module/hooks/useCollapsibleAppBar.js

@@ -26,17 +26,23 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
   const lastOffsetY = Animated.useSharedValue(0);
   const overlapped = Animated.useSharedValue(false);
   const elevationStyle = useElevationStyle(6);
-  const animatedStyle = Animated.useAnimatedStyle(() => ({
-    transform: [{
-      translateY: translateY.value
-    }],
-    boxShadow: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow,
-    elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
-    shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
-    shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
-    shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
-    shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
-  }));
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    return Platform.OS === 'web' ? {
+      transform: [{
+        translateY: translateY.value
+      }],
+      boxShadow: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.boxShadow : 0
+    } : {
+      transform: [{
+        translateY: translateY.value
+      }],
+      elevation: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.elevation : 0,
+      shadowColor: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowColor,
+      shadowOffset: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOffset,
+      shadowRadius: elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowRadius,
+      shadowOpacity: overlapped.value ? elevationStyle === null || elevationStyle === void 0 ? void 0 : elevationStyle.shadowOpacity : 0
+    };
+  });
   const indexRef = React.useRef(0);
   const offsetsRef = React.useRef([]);
 
@@ -94,6 +100,7 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
           }
         }
 
+        overlapped.value = offsetY > 0;
         lastOffsetY.value = offsetY;
       }
     },

package/build/module/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Platform","Animated","useSafeAreaInsets","useElevationStyle","useHeight","useAppbarStyles","defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAgBC,QAAhB,QAAwF,cAAxF;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,iBAAT,QAAkC,UAAlC;AACA,SAASC,SAAT,QAA0B,mBAA1B;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AA4BA,MAAMC,cAAiC,GAAG;AACtCC,EAAAA,WAAW,EAAE;AADyB,CAA1C;AAIA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGT,QAAQ,CAACU,EAAT,KAAgB,KAAhD;AAEA,eAAe,SAASC,oBAAT,CAA8BC,WAAoB,GAAGN,cAArD,EAAwF;AACnG,QAAM;AAAEC,IAAAA;AAAF,MAAqC,EACvC,GAAGD,cADoC;AAEvC,OAAGM;AAFoC,GAA3C;AAKA,QAAMC,MAAM,GAAGR,eAAe,EAA9B;AAEA,QAAMS,cAAc,GAAGZ,iBAAiB,EAAxC;AAEA,QAAM,CAACa,YAAD,EAAeC,cAAf,IAAiCZ,SAAS,EAAhD;AACA,QAAM,CAACa,wBAAD,EAA2BC,0BAA3B,IAAyDd,SAAS,EAAxE;AAEA,QAAMe,aAAa,GAAGlB,QAAQ,CAACmB,eAAT,CAAyB,MAAM,CAACH,wBAAhC,CAAtB;AAEA,QAAMI,UAAU,GAAGpB,QAAQ,CAACqB,cAAT,CAAgC,CAAhC,CAAnB;AACA,QAAMC,cAAc,GAAGtB,QAAQ,CAACqB,cAAT,CAAgC,CAAhC,CAAvB;AACA,QAAME,WAAW,GAAGvB,QAAQ,CAACqB,cAAT,CAAgC,CAAhC,CAApB;AACA,QAAMG,UAAU,GAAGxB,QAAQ,CAACqB,cAAT,CAAiC,KAAjC,CAAnB;AAEA,QAAMI,cAAc,GAAGvB,iBAAiB,CAAC,CAAD,CAAxC;AACA,QAAMwB,aAAa,GAAG1B,QAAQ,CAAC2B,gBAAT,CAA0B,OAAO;AACnDC,IAAAA,SAAS,EAAE,CAAC;AAAER,MAAAA,UAAU,EAAEA,UAAU,CAACS;AAAzB,KAAD,CADwC;AAEnDC,IAAAA,SAAS,EAAEL,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEK,SAFwB;AAGnDC,IAAAA,SAAS,EAAEP,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C,CAHP;AAInDC,IAAAA,WAAW,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,WAJsB;AAKnDC,IAAAA,YAAY,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,YALqB;AAMnDC,IAAAA,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YANqB;AAOnDC,IAAAA,aAAa,EAAEX,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEU,aAAnC,GAAmD;AAPf,GAAP,CAA1B,CAAtB;AAUA,QAAMC,QAAQ,GAAGtC,KAAK,CAACuC,MAAN,CAAqB,CAArB,CAAjB;AACA,QAAMC,UAAU,GAAGxC,KAAK,CAACuC,MAAN,CAA4B,EAA5B,CAAnB;;AAEA,QAAME,mBAAmB,GAAIC,SAAD,IAAuB;AAAA;;AAC/C,UAAMC,SAAS,GAAGL,QAAQ,CAACM,OAA3B;;AACA,QAAID,SAAS,KAAKD,SAAlB,EAA6B;AACzB;AACH;;AAEDF,IAAAA,UAAU,CAACI,OAAX,CAAmBD,SAAnB,IAAgClB,WAAW,CAACM,KAA5C;AAEA,UAAMc,YAAY,4BAAGL,UAAU,CAACI,OAAX,CAAmBF,SAAnB,CAAH,yEAAoC,CAAtD;AACAjB,IAAAA,WAAW,CAACM,KAAZ,GAAoBc,YAApB;AAEAP,IAAAA,QAAQ,CAACM,OAAT,GAAmBF,SAAnB,CAX+C,CAa/C;;AACAhB,IAAAA,UAAU,CAACK,KAAX,GAAmBc,YAAY,GAAG,CAAlC,CAd+C,CAgB/C;;AACA,QAAIvB,UAAU,CAACS,KAAX,GAAmB,CAAnB,IAAwBc,YAAY,GAAG7B,YAA3C,EAAyD;AACrDM,MAAAA,UAAU,CAACS,KAAX,GAAmB7B,QAAQ,CAAC4C,UAAT,CAAoB,CAApB,EAAuB;AACtCC,QAAAA,QAAQ,EAAEtC;AAD4B,OAAvB,CAAnB;AAGH;AACJ,GAtBD;;AAwBA,QAAMuC,aAAa,GAAG9C,QAAQ,CAAC+C,wBAAT,CAAkC;AACpDC,IAAAA,WAAW,EAAE,MAAM;AACf1B,MAAAA,cAAc,CAACO,KAAf,GAAuBT,UAAU,CAACS,KAAlC;AACH,KAHmD;AAIpDoB,IAAAA,eAAe,EAAE,MAAM;AACnB3B,MAAAA,cAAc,CAACO,KAAf,GAAuBT,UAAU,CAACS,KAAlC;AACH,KANmD;AAOpDqB,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACjB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEA,YAAMC,EAAE,GAAGnC,UAAU,CAACS,KAAtB;AACA,YAAM2B,KAAK,GAAGtC,aAAa,CAACW,KAA5B;;AAEA,UAAIrB,uBAAJ,EAA6B;AACzB,cAAMiD,EAAE,GAAGL,OAAO,GAAG7B,WAAW,CAACM,KAAjC;AAEAT,QAAAA,UAAU,CAACS,KAAX,GAAmBuB,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBM,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAStC,cAAc,CAACO,KAAf,GAAuB4B,EAAhC,EAAoCD,KAApC,CAAT,EAAqD,CAArD,CAAtC;AAEAhC,QAAAA,UAAU,CAACK,KAAX,GAAmBuB,OAAO,GAAGhC,UAAU,CAACS,KAArB,GAA6B,CAAhD;AACH,OAND,MAMO;AACH,YAAIuB,OAAO,GAAG,CAACI,KAAf,EAAsB;AAClB,cAAID,EAAE,KAAK,CAAX,EAAc;AACVnC,YAAAA,UAAU,CAACS,KAAX,GAAmB7B,QAAQ,CAAC4C,UAAT,CAAoBc,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS,CAACR,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAApB,EAA4D;AAC3EX,cAAAA,QAAQ,EAAEtC;AADiE,aAA5D,CAAnB;AAGH;AACJ,SAND,MAMO;AACH,cAAIgD,EAAE,KAAKC,KAAX,EAAkB;AACdpC,YAAAA,UAAU,CAACS,KAAX,GAAmB7B,QAAQ,CAAC4C,UAAT,CAAoB,CAApB,EAAuB;AACtCC,cAAAA,QAAQ,EAAEtC;AAD4B,aAAvB,CAAnB;AAGH;AACJ;;AAEDgB,QAAAA,WAAW,CAACM,KAAZ,GAAoBuB,OAApB;AACH;AACJ,KApCmD;AAqCpDS,IAAAA,SAAS,EAAGV,KAAD,IAAW;AAClB5B,MAAAA,WAAW,CAACM,KAAZ,GAAoBsB,KAAK,CAACE,aAAN,CAAoBC,CAAxC;AACH,KAvCmD;AAwCpDQ,IAAAA,aAAa,EAAGX,KAAD,IAAW;AACtB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEA/B,MAAAA,WAAW,CAACM,KAAZ,GAAoBuB,OAApB;AAEA,YAAMG,EAAE,GAAGnC,UAAU,CAACS,KAAtB;AACA,YAAM2B,KAAK,GAAGtC,aAAa,CAACW,KAA5B,CANsB,CAQtB;;AACA,UAAI0B,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;AACxB;AACH;;AAED,YAAMQ,SAAS,GAAGP,KAAK,GAAG,GAA1B;AAEA,YAAMQ,cAAc,GAAIT,EAAE,GAAGQ,SAAL,IAAkBX,OAAO,GAAGtC,YAA7B,GAA6C,CAA7C,GAAiD0C,KAAxE;AAEAhC,MAAAA,UAAU,CAACK,KAAX,GAAmBuB,OAAO,GAAGY,cAAV,GAA2B,CAA9C;AAEA5C,MAAAA,UAAU,CAACS,KAAX,GAAmB7B,QAAQ,CAAC4C,UAAT,CAAoBoB,cAApB,EAAoC;AACnDnB,QAAAA,QAAQ,EAAEtC;AADyC,OAApC,CAAnB;AAGH;AA9DmD,GAAlC,CAAtB;AAiEA,QAAM0D,cAAc,GAAGjD,wBAAwB,GAAG,CAAlD;AAEA,QAAMkD,WAAW,GAAG,CAChBxC,aADgB,EAEhBpB,WAAW,GAAG;AAAE6D,IAAAA,UAAU,EAAEtD,cAAc,CAACuD;AAA7B,GAAH,GAAwCC,SAFnC,EAGhBJ,cAAc,GAAGrD,MAAM,CAAC0D,QAAV,GAAqBD,SAHnB,CAApB;AAMA,SAAO;AACHH,IAAAA,WADG;AAEHnD,IAAAA,cAFG;AAGHE,IAAAA,0BAHG;AAIHiC,IAAAA,QAAQ,EAAEJ,aAJP;AAKHP,IAAAA,mBALG;AAMHgC,IAAAA,mBAAmB,EAAE;AAAEH,MAAAA,GAAG,EAAEH,cAAc,GAAGnD,YAAH,GAAkB;AAAvC;AANlB,GAAP;AAQH;AAAA","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useElevationStyle } from '../hooks';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(6);\n    const animatedStyle = Animated.useAnimatedStyle(() => ({\n        transform: [{ translateY: translateY.value }],\n        boxShadow: elevationStyle?.boxShadow,\n        elevation: overlapped.value ? elevationStyle?.elevation : 0,\n        shadowColor: elevationStyle?.shadowColor,\n        shadowOffset: elevationStyle?.shadowOffset,\n        shadowRadius: elevationStyle?.shadowRadius,\n        shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n    }));\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}
+{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Platform","Animated","useSafeAreaInsets","useElevationStyle","useHeight","useAppbarStyles","defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useElevationStyle } from '../hooks';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(6);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["useContentContainerStyle.ts"],"names":["useTheme","useBreakpointUp","defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"mappings":"AAEA,SAASA,QAAT,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAYA,MAAMC,aAA+B,GAAG;AACpCC,EAAAA,UAAU,EAAE,IADwB;AAEpCC,EAAAA,QAAQ,EAAE,IAF0B;AAGpCC,EAAAA,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;AAC9E,UAAQA,UAAR;AACI,SAAK,IAAL;AACI,aAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAO,MAAP;AARR;AAUH;;AAED,eAAe,SAASC,wBAAT,CAAkCC,MAAM,GAAGV,aAA3C,EAAiF;AAC5F,QAAM;AACFC,IAAAA,UADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA;AAHE,MAIF,EACA,GAAGH,aADH;AAEA,OAAGU;AAFH,GAJJ;AASA,QAAMJ,KAAK,GAAGR,QAAQ,EAAtB;AAEA,QAAMa,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;AAEA,QAAMM,QAA+B,GAAG,CACpC;AACIC,IAAAA,SAAS,EAAE,QADf;AAEIX,IAAAA,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;AAGIY,IAAAA,KAAK,EAAE;AAHX,GADoC,EAMpCH,eANoC,CAAxC;AASA,SAAOZ,eAAe,CAACE,UAAD,EAAaW,QAAb,EAAuBD,eAAvB,CAAtB;AACH;AAAA","sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"]}
+{"version":3,"sources":["useContentContainerStyle.ts"],"names":["useTheme","useBreakpointUp","defaultConfig","breakpoint","maxWidth","styleProvider","undefined","getMaxWidth","theme","breakpoints","values","useContentContainerStyle","config","additionalStyle","yesStyle","alignSelf","width"],"mappings":"AAEA,SAASA,QAAT,QAAyB,WAAzB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAYA,MAAMC,aAA+B,GAAG;AACpCC,EAAAA,UAAU,EAAE,IADwB;AAEpCC,EAAAA,QAAQ,EAAE,IAF0B;AAGpCC,EAAAA,aAAa,EAAE,MAAMC;AAHe,CAAxC,C,CAMA;;AACA,SAASC,WAAT,CAAqBC,KAArB,EAAmCL,UAAnC,EAAkF;AAC9E,UAAQA,UAAR;AACI,SAAK,IAAL;AACI,aAAOK,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAOF,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;AACJ,SAAK,IAAL;AACI,aAAO,MAAP;AARR;AAUH;;AAED,eAAe,SAASC,wBAAT,CAAkCC,MAAc,GAAGV,aAAnD,EAAyF;AACpG,QAAM;AACFC,IAAAA,UADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA;AAHE,MAIF,EACA,GAAGH,aADH;AAEA,OAAGU;AAFH,GAJJ;AASA,QAAMJ,KAAK,GAAGR,QAAQ,EAAtB;AAEA,QAAMa,eAAe,GAAGR,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGG,KAAH,CAArC;AAEA,QAAMM,QAA+B,GAAG,CACpC;AACIC,IAAAA,SAAS,EAAE,QADf;AAEIX,IAAAA,QAAQ,EAAEG,WAAW,CAACC,KAAD,EAAQJ,QAAR,CAFzB;AAGIY,IAAAA,KAAK,EAAE;AAHX,GADoC,EAMpCH,eANoC,CAAxC;AASA,SAAOZ,eAAe,CAACE,UAAD,EAAaW,QAAb,EAAuBD,eAAvB,CAAtB;AACH;AAAA","sourcesContent":["import type { ScrollViewProps, ViewStyle } from 'react-native';\nimport type { Theme } from '../types';\nimport { useTheme } from '../styles';\nimport useBreakpointUp from './useBreakpointUp';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\ntype ContentContainerStyle = ScrollViewProps['contentContainerStyle'];\n\nexport interface Config {\n    breakpoint?: Breakpoint;\n    maxWidth?: Breakpoint;\n    styleProvider?: (theme: Theme) => ContentContainerStyle;\n}\n\nconst defaultConfig: Required<Config> = {\n    breakpoint: 'lg',\n    maxWidth: 'md',\n    styleProvider: () => undefined,\n};\n\n// TODO: Needs to refactor\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'xs':\n            return theme.breakpoints.values['sm'];\n        case 'sm':\n            return theme.breakpoints.values['md'];\n        case 'md':\n            return theme.breakpoints.values['lg'];\n        case 'lg':\n            return 'none';\n    }\n}\n\nexport default function useContentContainerStyle(config: Config = defaultConfig): ContentContainerStyle {\n    const {\n        breakpoint,\n        maxWidth,\n        styleProvider,\n    } = {\n        ...defaultConfig,\n        ...config,\n    };\n\n    const theme = useTheme();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const yesStyle: ContentContainerStyle = [\n        {\n            alignSelf: 'center',\n            maxWidth: getMaxWidth(theme, maxWidth),\n            width: '100%',\n        },\n        additionalStyle,\n    ];\n\n    return useBreakpointUp(breakpoint, yesStyle, additionalStyle);\n};\n"]}

package/build/typescript/hooks/index.d.ts

@@ -1,4 +1,6 @@
+export { default as useBreakpointUp } from './useBreakpointUp';
 export { default as useCollapsibleAppBar } from './useCollapsibleAppBar';
+export { default as useContentContainerStyle } from './useContentContainerStyle';
 export { default as useElevationStyle } from './useElevationStyle';
 export { default as useFadeInAppBar } from './useFadeInAppBar';
 export { default as useThrottle } from './useThrottle';

package/build/typescript/hooks/useCollapsibleAppBar.d.ts

@@ -1,5 +1,8 @@
 import { Falsy, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-declare type ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;
+declare type WebOnlyStyle = {
+    boxShadow: any;
+};
+declare type ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;
 declare type OnScroll = ScrollViewProps['onScroll'];
 declare type OnLayoutCallback = ViewProps['onLayout'];
 export interface ContentInsets {

package/build/typescript/hooks/useContentContainerStyle.d.ts

@@ -7,5 +7,5 @@ export interface Config {
     maxWidth?: Breakpoint;
     styleProvider?: (theme: Theme) => ContentContainerStyle;
 }
-export default function useContentContainerStyle(config?: Required<Config>): ContentContainerStyle;
+export default function useContentContainerStyle(config?: Config): ContentContainerStyle;
 export {};

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

@@ -38,8 +38,8 @@ declare const _default: React.MemoExoticComponent<{
         rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "inherit" | "uri" | undefined;
-        pointerEvents?: "none" | "box-none" | "box-only" | "auto" | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

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

@@ -38,8 +38,8 @@ declare const _default: React.MemoExoticComponent<{
         rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "inherit" | "uri" | undefined;
-        pointerEvents?: "none" | "box-none" | "box-only" | "auto" | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

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

@@ -38,8 +38,8 @@ declare const _default: React.MemoExoticComponent<{
         rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "inherit" | "uri" | undefined;
-        pointerEvents?: "none" | "box-none" | "box-only" | "auto" | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

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

@@ -38,8 +38,8 @@ declare const _default: React.MemoExoticComponent<{
         rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "inherit" | "uri" | undefined;
-        pointerEvents?: "none" | "box-none" | "box-only" | "auto" | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

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

@@ -38,8 +38,8 @@ declare const _default: React.MemoExoticComponent<{
         rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "inherit" | "uri" | undefined;
-        pointerEvents?: "none" | "box-none" | "box-only" | "auto" | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

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

@@ -38,8 +38,8 @@ declare const _default: React.MemoExoticComponent<{
         rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "inherit" | "uri" | undefined;
-        pointerEvents?: "none" | "box-none" | "box-only" | "auto" | undefined;
+        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.10.0",
+  "version": "1.11.3",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^1.3.0",
+    "@fountain-ui/styles": "^1.4.0",
     "@fountain-ui/utils": "^1.1.0"
   },
   "peerDependencies": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38c89201acebdf0642b1547b66af8e7f970f55e2"
+  "gitHead": "d0073b2a3cd04c55c88b1225fa46f37013adf63d"
 }

package/src/Accordion/Accordion.tsx

@@ -2,23 +2,11 @@ import React, { useState } from 'react';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
-import {
-    ButtonBase,
-    Column,
-    Divider,
-    Spacer,
-    Typography,
-} from '../index';
+import { ButtonBase, Column, Divider, Spacer, Typography, useTheme } from '../index';
 import AccordionProps from './AccordionProps';
 
 type AccordionStyles = NamedStylesStringUnion<'buttonBase'>;
 
-const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
-    return {
-        buttonBase: { flexDirection: 'row' },
-    };
-};
-
 const ANIMATION_OPTION = { duration: 250 };
 
 export default function Accordion(props: AccordionProps) {
@@ -29,6 +17,16 @@ export default function Accordion(props: AccordionProps) {
         title,
         titleVariant = 'subtitle2',
     } = props;
+    const theme = useTheme();
+
+    const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
+        return {
+            buttonBase: {
+                flexDirection: 'row',
+                paddingVertical: theme.spacing(3),
+            },
+        };
+    };
 
     const styles = useStyles();
     const [isExpanded, setIsExpanded] = useState(false);