@fountain-ui/core 1.18.0 → 2.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.19.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.19.1) (2022-05-19)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
+# [1.19.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.19.0) (2022-05-12)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
 # [1.18.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.18.0) (2022-03-25)
 
 **Note:** Version bump only for package @fountain-ui/core

package/build/commonjs/Accordion/Accordion.js

@@ -81,13 +81,7 @@ function Accordion(props) {
     size: 2
   }), /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: animatedChevronDownStyles
-  }, RightIcon ? RightIcon :
-  /*#__PURE__*/
-  // @ts-ignore
-  _react.default.createElement(_icons.ChevronDown, {
-    height: 24,
-    width: 24
-  })))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, RightIcon ? RightIcon : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, null)))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_Typography.default, {
     children: content,
     color: 'textSecondary',
     variant: 'body2'

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","Animated","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,uBAAd;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,eAAD,qBACI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEyB,OADb;AAEI,IAAA,KAAK,EAAEV,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,eAAD,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,mBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,6BAAC,gBAAD,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 from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\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"]}
+{"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;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,uBAAd;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,eAAD,qBACI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEyB,OADb;AAEI,IAAA,KAAK,EAAEV,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,eAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEO;AAAtB,KACKT,SAAS,GAAGA,SAAH,gBAAe,6BAAC,kBAAD,OAD7B,CADJ,CApBJ,CADJ,EA4BKI,UAAU,GACP,4BAAMY,cAAN,CAAqBlB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IApCR,eAsCI,6BAAC,gBAAD,OAtCJ,CADJ;AA0CH","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 from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\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 : <ChevronDownIcon/>}\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/Button/Button.js

@@ -13,10 +13,17 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 var _styles = require("../styles");
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 iconSizes = {
+  small: 20,
+  medium: 24
+};
+
 const styles = _styles.StyleSheet.create({
   root: {
     flexDirection: 'row',
@@ -69,14 +76,13 @@ function Button(props) {
       backgroundColor: 'transparent'
     }
   };
-  const startIcon = (0, _styles.cloneSvgIcon)(startIconProp, {
-    size,
-    color: fontColor
-  });
-  const endIcon = (0, _styles.cloneSvgIcon)(endIconProp, {
-    size,
-    color: fontColor
-  });
+  const iconProps = {
+    width: iconSizes[size],
+    height: iconSizes[size],
+    colorValue: fontColor
+  };
+  const startIcon = (0, _utils.cloneElementSafely)(startIconProp, iconProps);
+  const endIcon = (0, _utils.cloneElementSafely)(endIconProp, iconProps);
   const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);
   const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;
   const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;

package/build/commonjs/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","medium","minWidth","height","small","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","handlePress","Linking","canOpenURL","openURL"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { cloneSvgIcon, createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type ButtonProps from './ButtonProps';\n\nconst styles = StyleSheet.create({\n    root: {\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    fullWidth: {\n        width: '100%',\n    },\n    medium: {\n        minWidth: 104,\n        height: 48,\n    },\n    small: {\n        minWidth: 56,\n        height: 32,\n    },\n});\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        clipHorizontalSpacing = false,\n        color = 'primary',\n        disabled = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        onPress,\n        size = 'medium',\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'contained',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const mainColor = theme.palette[color].main;\n\n    const fontColor = variant === 'contained'\n        ? theme.palette[color].contrastTextColor\n        : theme.palette[color].main;\n\n    const variantStyleMap = {\n        contained: {\n            backgroundColor: mainColor,\n        },\n        outlined: {\n            backgroundColor: 'transparent',\n            borderColor: mainColor,\n            borderStyle: 'solid',\n            borderWidth: 1,\n        },\n        text: {\n            backgroundColor: 'transparent',\n        },\n    };\n\n    const startIcon = cloneSvgIcon(startIconProp, { size, color: fontColor });\n    const endIcon = cloneSvgIcon(endIconProp, { size, color: fontColor });\n\n    const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n    const borderRadius = theme.shape.roundness;\n    const buttonBaseStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        size === 'medium' ? styles.medium : styles.small,\n        fullWidth ? styles.fullWidth : undefined,\n        { borderRadius, color: fontColor },\n        (variant === 'text' && clipHorizontalSpacing)\n            ? { minWidth: 0 }\n            : { paddingLeft, paddingRight },\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: fontColor,\n    });\n\n    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n    const textMarginStyle = startIcon\n        ? { marginLeft: textMarginSize }\n        : endIcon\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n        if (href) {\n            if (await Linking.canOpenURL(href)) {\n                await Linking.openURL(href);\n            }\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n};\n"]}
+{"version":3,"sources":["Button.tsx"],"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","colorValue","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","handlePress","Linking","canOpenURL","openURL"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n    small: 20,\n    medium: 24,\n};\n\nconst styles = StyleSheet.create({\n    root: {\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    fullWidth: {\n        width: '100%',\n    },\n    medium: {\n        minWidth: 104,\n        height: 48,\n    },\n    small: {\n        minWidth: 56,\n        height: 32,\n    },\n});\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        clipHorizontalSpacing = false,\n        color = 'primary',\n        disabled = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        onPress,\n        size = 'medium',\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'contained',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const mainColor = theme.palette[color].main;\n\n    const fontColor = variant === 'contained'\n        ? theme.palette[color].contrastTextColor\n        : theme.palette[color].main;\n\n    const variantStyleMap = {\n        contained: {\n            backgroundColor: mainColor,\n        },\n        outlined: {\n            backgroundColor: 'transparent',\n            borderColor: mainColor,\n            borderStyle: 'solid',\n            borderWidth: 1,\n        },\n        text: {\n            backgroundColor: 'transparent',\n        },\n    };\n\n    const iconProps = {\n        width: iconSizes[size],\n        height: iconSizes[size],\n        colorValue: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n    const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n    const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n    const borderRadius = theme.shape.roundness;\n    const buttonBaseStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        size === 'medium' ? styles.medium : styles.small,\n        fullWidth ? styles.fullWidth : undefined,\n        { borderRadius, color: fontColor },\n        (variant === 'text' && clipHorizontalSpacing)\n            ? { minWidth: 0 }\n            : { paddingLeft, paddingRight },\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: fontColor,\n    });\n\n    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n    const textMarginStyle = startIcon\n        ? { marginLeft: textMarginSize }\n        : endIcon\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n        if (href) {\n            if (await Linking.canOpenURL(href)) {\n                await Linking.openURL(href);\n            }\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n};\n"]}

package/build/commonjs/Checkbox/Checkbox.js

@@ -32,6 +32,7 @@ function Checkbox(props) {
   const {
     checked = false,
     checkedIcon: checkedIconProp,
+    color = 'primary',
     disabled = false,
     icon: iconProp,
     onChange,
@@ -39,8 +40,12 @@ function Checkbox(props) {
     ...otherProps
   } = props;
   const styles = useStyles();
-  const uncheckedIcon = iconProp ? iconProp : /*#__PURE__*/_react.default.createElement(_icons.Checkbox, null);
-  const checkedIcon = checkedIconProp ? checkedIconProp : /*#__PURE__*/_react.default.createElement(_icons.CheckboxChecked, null);
+  const uncheckedIcon = iconProp ? iconProp : /*#__PURE__*/_react.default.createElement(_icons.Checkbox, {
+    color: color
+  });
+  const checkedIcon = checkedIconProp ? checkedIconProp : /*#__PURE__*/_react.default.createElement(_icons.CheckboxChecked, {
+    color: color
+  });
 
   const handlePress = () => {
     if (onChange) {

package/build/commonjs/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.tsx"],"names":["useStyles","root","width","height","justifyContent","alignItems","Checkbox","props","checked","checkedIcon","checkedIconProp","disabled","icon","iconProp","onChange","style","otherProps","styles","uncheckedIcon","handlePress","rootStyle"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;;;;;AAIA,MAAMA,SAAmC,GAAG,YAA2B;AACnE,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,KAAK,EAAE,EADL;AAEFC,MAAAA,MAAM,EAAE,EAFN;AAGFC,MAAAA,cAAc,EAAE,QAHd;AAIFC,MAAAA,UAAU,EAAE;AAJV;AADH,GAAP;AAQH,CATD;;AAWe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,WAAW,EAAEC,eAFX;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,IAAI,EAAEC,QAJJ;AAKFC,IAAAA,QALE;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFT,KARJ;AAUA,QAAMU,MAAM,GAAGjB,SAAS,EAAxB;AAEA,QAAMkB,aAAa,GAAGL,QAAQ,GAAGA,QAAH,gBAAc,6BAAC,eAAD,OAA5C;AACA,QAAMJ,WAAW,GAAGC,eAAe,GAAGA,eAAH,gBAAqB,6BAAC,sBAAD,OAAxD;;AAEA,QAAMS,WAAW,GAAG,MAAM;AACtB,QAAIL,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAAC,CAACN,OAAF,CAAR;AACH;AACJ,GAJD;;AAMA,QAAMY,SAAS,GAAG,iBAAI,CAClBH,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;AAKA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEJ,QADd;AAEI,IAAA,OAAO,EAAEQ,WAFb;AAGI,IAAA,KAAK,EAAEC;AAHX,KAIQJ,UAJR,GAMKR,OAAO,GACFC,WADE,GAEFS,aARV,CADJ;AAaH;;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type CheckboxProps from './CheckboxProps';\nimport ButtonBase from '../ButtonBase';\nimport { Checkbox as CheckboxIcon, CheckboxChecked as CheckboxCheckedIcon } from '../internal/icons';\nimport { css } from '../styles';\n\ntype CheckboxStyle = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CheckboxStyle> = function (): CheckboxStyle {\n    return {\n        root: {\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n        },\n    };\n};\n\nexport default function Checkbox(props: CheckboxProps) {\n    const {\n        checked = false,\n        checkedIcon: checkedIconProp,\n        disabled = false,\n        icon: iconProp,\n        onChange,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon/>;\n    const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon/>;\n\n    const handlePress = () => {\n        if (onChange) {\n            onChange(!checked);\n        }\n    };\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {checked\n                ? checkedIcon\n                : uncheckedIcon\n            }\n        </ButtonBase>\n    );\n};\n"]}
+{"version":3,"sources":["Checkbox.tsx"],"names":["useStyles","root","width","height","justifyContent","alignItems","Checkbox","props","checked","checkedIcon","checkedIconProp","color","disabled","icon","iconProp","onChange","style","otherProps","styles","uncheckedIcon","handlePress","rootStyle"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AACA;;;;;;AAIA,MAAMA,SAAmC,GAAG,YAA2B;AACnE,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,KAAK,EAAE,EADL;AAEFC,MAAAA,MAAM,EAAE,EAFN;AAGFC,MAAAA,cAAc,EAAE,QAHd;AAIFC,MAAAA,UAAU,EAAE;AAJV;AADH,GAAP;AAQH,CATD;;AAWe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,WAAW,EAAEC,eAFX;AAGFC,IAAAA,KAAK,GAAG,SAHN;AAIFC,IAAAA,QAAQ,GAAG,KAJT;AAKFC,IAAAA,IAAI,EAAEC,QALJ;AAMFC,IAAAA,QANE;AAOFC,IAAAA,KAPE;AAQF,OAAGC;AARD,MASFV,KATJ;AAWA,QAAMW,MAAM,GAAGlB,SAAS,EAAxB;AAEA,QAAMmB,aAAa,GAAGL,QAAQ,GAAGA,QAAH,gBAAc,6BAAC,eAAD;AAAc,IAAA,KAAK,EAAEH;AAArB,IAA5C;AACA,QAAMF,WAAW,GAAGC,eAAe,GAAGA,eAAH,gBAAqB,6BAAC,sBAAD;AAAqB,IAAA,KAAK,EAAEC;AAA5B,IAAxD;;AAEA,QAAMS,WAAW,GAAG,MAAM;AACtB,QAAIL,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAAC,CAACP,OAAF,CAAR;AACH;AACJ,GAJD;;AAMA,QAAMa,SAAS,GAAG,iBAAI,CAClBH,MAAM,CAACjB,IADW,EAElBe,KAFkB,CAAJ,CAAlB;AAKA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEJ,QADd;AAEI,IAAA,OAAO,EAAEQ,WAFb;AAGI,IAAA,KAAK,EAAEC;AAHX,KAIQJ,UAJR,GAMKT,OAAO,GACFC,WADE,GAEFU,aARV,CADJ;AAaH;;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type CheckboxProps from './CheckboxProps';\nimport ButtonBase from '../ButtonBase';\nimport { Checkbox as CheckboxIcon, CheckboxChecked as CheckboxCheckedIcon } from '../internal/icons';\nimport { css } from '../styles';\n\ntype CheckboxStyle = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CheckboxStyle> = function (): CheckboxStyle {\n    return {\n        root: {\n            width: 24,\n            height: 24,\n            justifyContent: 'center',\n            alignItems: 'center',\n        },\n    };\n};\n\nexport default function Checkbox(props: CheckboxProps) {\n    const {\n        checked = false,\n        checkedIcon: checkedIconProp,\n        color = 'primary',\n        disabled = false,\n        icon: iconProp,\n        onChange,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon color={color}/>;\n    const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon color={color}/>;\n\n    const handlePress = () => {\n        if (onChange) {\n            onChange(!checked);\n        }\n    };\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {checked\n                ? checkedIcon\n                : uncheckedIcon\n            }\n        </ButtonBase>\n    );\n};\n"]}

package/build/commonjs/Chip/Chip.js

@@ -11,6 +11,8 @@ var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
+var _utils = require("../utils");
+
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -76,14 +78,13 @@ function Chip(props) {
   const textStyle = (0, _styles.css)([fontStyle, textMarginStyle, {
     textAlign: 'center'
   }]);
-  const startIcon = (0, _styles.cloneSvgIcon)(startIconProp, {
-    size: ICON_SIZE,
-    color: fontColor
-  });
-  const endIcon = (0, _styles.cloneSvgIcon)(endIconProp, {
-    size: ICON_SIZE,
-    color: fontColor
-  });
+  const iconProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    colorValue: fontColor
+  };
+  const startIcon = (0, _utils.cloneElementSafely)(startIconProp, iconProps);
+  const endIcon = (0, _utils.cloneElementSafely)(endIconProp, iconProps);
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     onPress: onPress,
     style: chipStyle

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

@@ -1 +1 @@
-{"version":3,"sources":["Chip.tsx"],"names":["ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const startIcon = cloneSvgIcon(startIconProp, { size: ICON_SIZE, color: fontColor });\n    const endIcon = cloneSvgIcon(endIconProp, { size: ICON_SIZE, color: fontColor });\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"]}
+{"version":3,"sources":["Chip.tsx"],"names":["ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","colorValue"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: 20,\n            flexDirection: 'row',\n            height: 32,\n            justifyContent: 'center',\n            paddingLeft: theme.spacing(2),\n            paddingRight: theme.spacing(2),\n        },\n    };\n};\n\nexport default function Chip(props: ChipProps) {\n    const {\n        children,\n        endIcon: endIconProp,\n        onPress,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'outlined',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const fontColor = variant === 'outlined'\n        ? theme.palette.tertiary.main\n        : theme.palette.primary.main;\n\n    const variantStyleMap = {\n        outlined: {\n            backgroundColor: theme.palette.paper.default,\n            borderColor: theme.palette.border,\n            borderWidth: 2,\n        },\n        filled: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        bold: {\n            backgroundColor: theme.palette.paper.grey,\n            borderColor: theme.palette.primary.main,\n            borderWidth: 2,\n        },\n    };\n\n    const chipStyle = css([\n        styles.root,\n        variantStyleMap[variant],\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.subtitle2,\n        color: fontColor,\n    });\n\n    const textMarginSize = theme.spacing(1);\n    const textMarginStyle = startIconProp\n        ? { marginLeft: textMarginSize }\n        : endIconProp\n            ? { marginRight: textMarginSize }\n            : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const iconProps = {\n        width: ICON_SIZE,\n        height: ICON_SIZE,\n        colorValue: fontColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    return (\n        <ButtonBase\n            onPress={onPress}\n            style={chipStyle}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text\n                children={children}\n                style={textStyle}\n            />\n\n            {endIcon}\n        </ButtonBase>\n    );\n}\n"]}

package/build/commonjs/Fab/Fab.js

@@ -15,12 +15,18 @@ var _hooks = require("../hooks");
 
 var _styles = require("../styles");
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 SMALL = 32;
 const MEDIUM = 48;
+const iconSizes = {
+  small: 20,
+  medium: 24
+};
 
 const styles = _styles.StyleSheet.create({
   medium: {
@@ -61,9 +67,10 @@ function Fab(props) {
   const theme = (0, _styles.useTheme)();
   const backgroundColor = theme.palette[color].main;
   const fontColor = theme.palette[color].contrastTextColor;
-  const icon = (0, _styles.cloneSvgIcon)(children, {
-    size,
-    color: fontColor
+  const icon = (0, _utils.cloneElementSafely)(children, {
+    width: iconSizes[size],
+    height: iconSizes[size],
+    colorValue: fontColor
   });
   const elevationStyle = (0, _hooks.useElevationStyle)(elevation);
   const width = variant === 'circular' ? size === 'medium' ? MEDIUM : SMALL : undefined;

package/build/commonjs/Fab/Fab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Fab.tsx"],"names":["SMALL","MEDIUM","styles","StyleSheet","create","medium","borderRadius","height","root","alignItems","justifyContent","row","flexDirection","reverse","small","Fab","props","children","color","disabled","elevation","label","numberOfLines","onPress","size","style","styleProp","variant","otherProps","theme","backgroundColor","palette","main","fontColor","contrastTextColor","icon","elevationStyle","width","undefined","paddingSize","spacing","iconPadding","paddingLeft","paddingRight","buttonBaseStyle","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginRight","marginLeft","textStyle","handlePress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { useElevationStyle } from '../hooks';\nimport { cloneSvgIcon, createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type FabProps from './FabProps';\n\nconst SMALL = 32;\nconst MEDIUM = 48;\n\nconst styles = StyleSheet.create({\n    medium: {\n        borderRadius: MEDIUM * 0.5,\n        height: MEDIUM,\n    },\n    root: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    reverse: {\n        flexDirection: 'row-reverse',\n    },\n    small: {\n        borderRadius: SMALL * 0.5,\n        height: SMALL,\n    },\n});\n\nexport default function Fab(props: FabProps) {\n    const {\n        children,\n        color = 'primary',\n        disabled = false,\n        elevation = 2,\n        label,\n        numberOfLines = 1,\n        onPress,\n        reverse,\n        size = 'medium',\n        style: styleProp,\n        variant = 'circular',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette[color].main;\n    const fontColor = theme.palette[color].contrastTextColor;\n\n    const icon = cloneSvgIcon(children, {\n        size,\n        color: fontColor,\n    });\n\n    const elevationStyle = useElevationStyle(elevation);\n    const width = variant === 'circular' ? (size === 'medium' ? MEDIUM : SMALL) : undefined;\n    const paddingSize = size === 'medium' ? theme.spacing(5) : theme.spacing(3);\n    const iconPadding = icon ? paddingSize - theme.spacing(1) : paddingSize;\n\n    const paddingLeft = variant === 'circular'\n        ? undefined\n        : icon\n            ? (reverse ? paddingSize : iconPadding)\n            : paddingSize;\n\n    const paddingRight = variant === 'circular'\n        ? undefined\n        : icon\n            ? (reverse ? iconPadding : paddingSize)\n            : paddingSize;\n\n    const buttonBaseStyle = css([\n        styles.root,\n        reverse ? styles.reverse : styles.row,\n        size === 'medium' ? styles.medium : styles.small,\n        { width, backgroundColor, paddingLeft, paddingRight },\n        elevationStyle,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: fontColor,\n    });\n\n    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n    const textMarginStyle = icon\n        ? (reverse ? { marginRight: textMarginSize } : { marginLeft: textMarginSize })\n        : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {variant === 'extended' && label ? (\n                <Text\n                    children={label}\n                    numberOfLines={numberOfLines}\n                    style={textStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"]}
+{"version":3,"sources":["Fab.tsx"],"names":["SMALL","MEDIUM","iconSizes","small","medium","styles","StyleSheet","create","borderRadius","height","root","alignItems","justifyContent","row","flexDirection","reverse","Fab","props","children","color","disabled","elevation","label","numberOfLines","onPress","size","style","styleProp","variant","otherProps","theme","backgroundColor","palette","main","fontColor","contrastTextColor","icon","width","colorValue","elevationStyle","undefined","paddingSize","spacing","iconPadding","paddingLeft","paddingRight","buttonBaseStyle","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginRight","marginLeft","textStyle","handlePress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { useElevationStyle } from '../hooks';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type FabProps from './FabProps';\nimport type { FabSize } from './FabProps';\n\nconst SMALL = 32;\nconst MEDIUM = 48;\n\ntype IconSizes = { [n in FabSize]: number };\n\nconst iconSizes: IconSizes = {\n    small: 20,\n    medium: 24,\n};\n\nconst styles = StyleSheet.create({\n    medium: {\n        borderRadius: MEDIUM * 0.5,\n        height: MEDIUM,\n    },\n    root: {\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    reverse: {\n        flexDirection: 'row-reverse',\n    },\n    small: {\n        borderRadius: SMALL * 0.5,\n        height: SMALL,\n    },\n});\n\nexport default function Fab(props: FabProps) {\n    const {\n        children,\n        color = 'primary',\n        disabled = false,\n        elevation = 2,\n        label,\n        numberOfLines = 1,\n        onPress,\n        reverse,\n        size = 'medium',\n        style: styleProp,\n        variant = 'circular',\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const backgroundColor = theme.palette[color].main;\n    const fontColor = theme.palette[color].contrastTextColor;\n\n    const icon = cloneElementSafely(children, {\n        width: iconSizes[size],\n        height: iconSizes[size],\n        colorValue: fontColor,\n    });\n\n    const elevationStyle = useElevationStyle(elevation);\n    const width = variant === 'circular' ? (size === 'medium' ? MEDIUM : SMALL) : undefined;\n    const paddingSize = size === 'medium' ? theme.spacing(5) : theme.spacing(3);\n    const iconPadding = icon ? paddingSize - theme.spacing(1) : paddingSize;\n\n    const paddingLeft = variant === 'circular'\n        ? undefined\n        : icon\n            ? (reverse ? paddingSize : iconPadding)\n            : paddingSize;\n\n    const paddingRight = variant === 'circular'\n        ? undefined\n        : icon\n            ? (reverse ? iconPadding : paddingSize)\n            : paddingSize;\n\n    const buttonBaseStyle = css([\n        styles.root,\n        reverse ? styles.reverse : styles.row,\n        size === 'medium' ? styles.medium : styles.small,\n        { width, backgroundColor, paddingLeft, paddingRight },\n        elevationStyle,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n        color: fontColor,\n    });\n\n    const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n    const textMarginStyle = icon\n        ? (reverse ? { marginRight: textMarginSize } : { marginLeft: textMarginSize })\n        : undefined;\n\n    const textStyle = css([\n        fontStyle,\n        textMarginStyle,\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {variant === 'extended' && label ? (\n                <Text\n                    children={label}\n                    numberOfLines={numberOfLines}\n                    style={textStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"]}

package/build/commonjs/IconButton/IconButton.js

@@ -13,10 +13,19 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 
 var _styles = require("../styles");
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 iconSizes = {
+  tiny: 16,
+  small: 20,
+  medium: 24,
+  large: 28
+};
+
 const useStyles = function () {
   const theme = (0, _styles.useTheme)();
   return {
@@ -42,9 +51,10 @@ function IconButton(props) {
   } = props;
   const theme = (0, _styles.useTheme)();
   const styles = useStyles();
-  const icon = (0, _styles.cloneSvgIcon)(children, {
-    color: theme.palette[color].main,
-    size
+  const icon = (0, _utils.cloneElementSafely)(children, {
+    width: iconSizes[size],
+    height: iconSizes[size],
+    color: color
   });
   const fontStyle = (0, _styles.createFontStyle)(theme, {
     selector: typo => typo.caption1,

package/build/commonjs/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["IconButton.tsx"],"names":["useStyles","theme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","otherProps","styles","icon","palette","main","fontStyle","selector","typo","caption1","labelStyle","rootStyle","handlePress"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,cAAc,EAAE,QAFd;AAGFC,MAAAA,UAAU,EAAE,QAHV;AAIFC,MAAAA,OAAO,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;AAJP;AADH,GAAP;AAQH,CAXD;;AAae,SAASC,UAAT,CAAoBC,KAApB,EAA4C;AACvD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,KAAK,GAAG,SAFN;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,IAAI,GAAG,QANL;AAOFC,IAAAA,KAPE;AAQF,OAAGC;AARD,MASFR,KATJ;AAWA,QAAMR,KAAK,GAAG,uBAAd;AACA,QAAMiB,MAAM,GAAGlB,SAAS,EAAxB;AAEA,QAAMmB,IAAI,GAAG,0BAAaT,QAAb,EAAuB;AAChCC,IAAAA,KAAK,EAAEV,KAAK,CAACmB,OAAN,CAAcT,KAAd,EAAqBU,IADI;AAEhCN,IAAAA;AAFgC,GAAvB,CAAb;AAKA,QAAMO,SAAS,GAAG,6BAAgBrB,KAAhB,EAAuB;AACrCsB,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;AAErCd,IAAAA,KAAK,EAAEV,KAAK,CAACmB,OAAN,CAAcT,KAAd,EAAqBU;AAFS,GAAvB,CAAlB;AAKA,QAAMK,UAAU,GAAG,iBAAI,CACnBJ,SADmB,CAAJ,CAAnB;AAIA,QAAMK,SAAS,GAAG,iBAAI,CAClBT,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;;AAKA,QAAMY,WAAW,GAAG,YAAY;AAC5B,QAAIhB,QAAJ,EAAc;AACV;AACH;;AACD,QAAIE,OAAJ,EAAa;AACTA,MAAAA,OAAO;AACP;AACH;AACJ,GARD;;AAUA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEF,QADd;AAEI,IAAA,OAAO,EAAEgB,WAFb;AAGI,IAAA,KAAK,EAAED;AAHX,KAIQV,UAJR,GAMKE,IANL,EAQKN,KAAK,gBACF,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEA,KADd;AAEI,IAAA,KAAK,EAAEa;AAFX,IADE,GAKF,IAbR,CADJ;AAiBH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport type IconButtonProps from './IconButtonProps';\n\ntype IconButtonStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            padding: theme.spacing(1),\n        },\n    };\n};\n\nexport default function IconButton(props: IconButtonProps) {\n    const {\n        children,\n        color = 'primary',\n        disabled = false,\n        label,\n        onPress,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const icon = cloneSvgIcon(children, {\n        color: theme.palette[color].main,\n        size,\n    });\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption1,\n        color: theme.palette[color].main,\n    });\n\n    const labelStyle = css([\n        fontStyle,\n    ]);\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {label ? (\n                <Text\n                    children={label}\n                    style={labelStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"]}
+{"version":3,"sources":["IconButton.tsx"],"names":["iconSizes","tiny","small","medium","large","useStyles","theme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","otherProps","styles","icon","width","height","fontStyle","selector","typo","caption1","palette","main","labelStyle","rootStyle","handlePress"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAQA,MAAMA,SAAoB,GAAG;AACzBC,EAAAA,IAAI,EAAE,EADmB;AAEzBC,EAAAA,KAAK,EAAE,EAFkB;AAGzBC,EAAAA,MAAM,EAAE,EAHiB;AAIzBC,EAAAA,KAAK,EAAE;AAJkB,CAA7B;;AAOA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,cAAc,EAAE,QAFd;AAGFC,MAAAA,UAAU,EAAE,QAHV;AAIFC,MAAAA,OAAO,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;AAJP;AADH,GAAP;AAQH,CAXD;;AAae,SAASC,UAAT,CAAoBC,KAApB,EAA4C;AACvD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,KAAK,GAAG,SAFN;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,IAAI,GAAG,QANL;AAOFC,IAAAA,KAPE;AAQF,OAAGC;AARD,MASFR,KATJ;AAWA,QAAMR,KAAK,GAAG,uBAAd;AACA,QAAMiB,MAAM,GAAGlB,SAAS,EAAxB;AAEA,QAAMmB,IAAI,GAAG,+BAAmBT,QAAnB,EAA6B;AACtCU,IAAAA,KAAK,EAAEzB,SAAS,CAACoB,IAAD,CADsB;AAEtCM,IAAAA,MAAM,EAAE1B,SAAS,CAACoB,IAAD,CAFqB;AAGtCJ,IAAAA,KAAK,EAAEA;AAH+B,GAA7B,CAAb;AAMA,QAAMW,SAAS,GAAG,6BAAgBrB,KAAhB,EAAuB;AACrCsB,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;AAErCd,IAAAA,KAAK,EAAEV,KAAK,CAACyB,OAAN,CAAcf,KAAd,EAAqBgB;AAFS,GAAvB,CAAlB;AAKA,QAAMC,UAAU,GAAG,iBAAI,CACnBN,SADmB,CAAJ,CAAnB;AAIA,QAAMO,SAAS,GAAG,iBAAI,CAClBX,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAJ,CAAlB;;AAKA,QAAMc,WAAW,GAAG,YAAY;AAC5B,QAAIlB,QAAJ,EAAc;AACV;AACH;;AACD,QAAIE,OAAJ,EAAa;AACTA,MAAAA,OAAO;AACP;AACH;AACJ,GARD;;AAUA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEF,QADd;AAEI,IAAA,OAAO,EAAEkB,WAFb;AAGI,IAAA,KAAK,EAAED;AAHX,KAIQZ,UAJR,GAMKE,IANL,EAQKN,KAAK,gBACF,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEA,KADd;AAEI,IAAA,KAAK,EAAEe;AAFX,IADE,GAKF,IAbR,CADJ;AAiBH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonSize } from './IconButtonProps';\n\ntype IconButtonStyles = NamedStylesStringUnion<'root'>;\n\ntype IconSizes = { [n in IconButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n    tiny: 16,\n    small: 20,\n    medium: 24,\n    large: 28,\n};\n\nconst useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            padding: theme.spacing(1),\n        },\n    };\n};\n\nexport default function IconButton(props: IconButtonProps) {\n    const {\n        children,\n        color = 'primary',\n        disabled = false,\n        label,\n        onPress,\n        size = 'medium',\n        style,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const styles = useStyles();\n\n    const icon = cloneElementSafely(children, {\n        width: iconSizes[size],\n        height: iconSizes[size],\n        color: color,\n    });\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption1,\n        color: theme.palette[color].main,\n    });\n\n    const labelStyle = css([\n        fontStyle,\n    ]);\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    const handlePress = async () => {\n        if (disabled) {\n            return;\n        }\n        if (onPress) {\n            onPress();\n            return;\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {label ? (\n                <Text\n                    children={label}\n                    style={labelStyle}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"]}

package/build/commonjs/Image/Image.js

@@ -47,19 +47,31 @@ function Image(props) {
     source,
     style,
     square = false,
+    onLoad,
+    onError,
     ...otherProps
   } = props;
 
   const [failed, setFailed] = _react.default.useState(false);
 
   const styles = useStyles();
+
+  const handleError = () => {
+    if (onError) {
+      onError();
+    }
+
+    setFailed(true);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: (0, _styles.css)([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
   }, otherProps), failed ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, alt) : /*#__PURE__*/_react.default.createElement(_ImageCore.default, {
     alt: alt,
     height: '100%',
     loading: loading,
-    onError: () => setFailed(true),
+    onError: handleError,
+    onLoad: onLoad,
     resizeMode: resizeMode,
     source: source,
     width: '100%'

package/build/commonjs/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Image.tsx"],"names":["useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","React","useState","styles","undefined","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAWA,MAAMA,SAAiC,GAAG,YAAyB;AAC/D,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,OAAO,EAAE;AACLC,MAAAA,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,SADrB;AAELC,MAAAA,QAAQ,EAAE;AAFL,KAFN;AAMHC,IAAAA,WAAW,EAAE;AACTC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAD5B,KANV;AASHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,WAAW,EAAEC,mBAAWC,aADlB;AAENC,MAAAA,WAAW,EAAE,OAFP;AAGNC,MAAAA,WAAW,EAAEjB,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAH3B;AATP,GAAP;AAeH,CAlBD;;AAoBe,SAASO,KAAT,CAAeC,KAAf,EAAkC;AAC7C,QAAM;AACFC,IAAAA,GADE;AAEFC,IAAAA,cAFE;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,OAAO,GAAG,MAJR;AAKFC,IAAAA,gBALE;AAMFC,IAAAA,UAAU,GAAG,OANX;AAOFC,IAAAA,MAPE;AAQFC,IAAAA,KARE;AASFC,IAAAA,MAAM,GAAG,KATP;AAUF,OAAGC;AAVD,MAWFV,KAXJ;;AAaA,QAAM,CAACW,MAAD,EAASC,SAAT,IAAsBC,eAAMC,QAAN,CAAe,KAAf,CAA5B;;AAEA,QAAMC,MAAM,GAAGnC,SAAS,EAAxB;AAEA,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPmC,MAAM,CAACjC,IADA,EAEP,CAACoB,cAAD,GAAkBa,MAAM,CAACtB,QAAzB,GAAoCuB,SAF7B,EAGP,CAACb,kBAAD,GAAsBY,MAAM,CAAC3B,WAA7B,GAA2C4B,SAHpC,EAIP,CAACP,MAAD,GAAUM,MAAM,CAAChC,OAAjB,GAA2BiC,SAJpB,EAKPR,KALO,CAAJ;AADX,KAQQE,UARR,GAUKC,MAAM,gBACH,6BAAC,iBAAD,QAAOV,GAAP,CADG,gBAGH,6BAAC,kBAAD;AACI,IAAA,GAAG,EAAEA,GADT;AAEI,IAAA,MAAM,EAAE,MAFZ;AAGI,IAAA,OAAO,EAAEG,OAHb;AAII,IAAA,OAAO,EAAE,MAAMQ,SAAS,CAAC,IAAD,CAJ5B;AAKI,IAAA,UAAU,EAAEN,UALhB;AAMI,IAAA,MAAM,EAAEC,MANZ;AAOI,IAAA,KAAK,EAAE;AAPX,IAbR,EAwBKF,gBAAgB,gBACb,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEV,mBAAWsB;AAAxB,KACKZ,gBADL,CADa,GAIb,IA5BR,CADJ;AAgCH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n    };\n};\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        disableOutline,\n        disablePlaceholder,\n        loading = 'lazy',\n        overlaidChildren,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = React.useState(false);\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !disablePlaceholder ? styles.placeholder : undefined,\n                !square ? styles.rounded : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {failed ? (\n                <Text>{alt}</Text>\n            ) : (\n                <ImageCore\n                    alt={alt}\n                    height={'100%'}\n                    loading={loading}\n                    onError={() => setFailed(true)}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            )}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Image.tsx"],"names":["useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","onLoad","onError","otherProps","failed","setFailed","React","useState","styles","handleError","undefined","absoluteFill"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAWA,MAAMA,SAAiC,GAAG,YAAyB;AAC/D,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,OAAO,EAAE;AACLC,MAAAA,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,SADrB;AAELC,MAAAA,QAAQ,EAAE;AAFL,KAFN;AAMHC,IAAAA,WAAW,EAAE;AACTC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAD5B,KANV;AASHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,WAAW,EAAEC,mBAAWC,aADlB;AAENC,MAAAA,WAAW,EAAE,OAFP;AAGNC,MAAAA,WAAW,EAAEjB,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAH3B;AATP,GAAP;AAeH,CAlBD;;AAoBe,SAASO,KAAT,CAAeC,KAAf,EAAkC;AAC7C,QAAM;AACFC,IAAAA,GADE;AAEFC,IAAAA,cAFE;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,OAAO,GAAG,MAJR;AAKFC,IAAAA,gBALE;AAMFC,IAAAA,UAAU,GAAG,OANX;AAOFC,IAAAA,MAPE;AAQFC,IAAAA,KARE;AASFC,IAAAA,MAAM,GAAG,KATP;AAUFC,IAAAA,MAVE;AAWFC,IAAAA,OAXE;AAYF,OAAGC;AAZD,MAaFZ,KAbJ;;AAeA,QAAM,CAACa,MAAD,EAASC,SAAT,IAAsBC,eAAMC,QAAN,CAAe,KAAf,CAA5B;;AAEA,QAAMC,MAAM,GAAGrC,SAAS,EAAxB;;AAEA,QAAMsC,WAAW,GAAG,MAAM;AACtB,QAAGP,OAAH,EAAW;AACPA,MAAAA,OAAO;AACV;;AAEDG,IAAAA,SAAS,CAAC,IAAD,CAAT;AACH,GAND;;AAQA,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPG,MAAM,CAACnC,IADA,EAEP,CAACoB,cAAD,GAAkBe,MAAM,CAACxB,QAAzB,GAAoC0B,SAF7B,EAGP,CAAChB,kBAAD,GAAsBc,MAAM,CAAC7B,WAA7B,GAA2C+B,SAHpC,EAIP,CAACV,MAAD,GAAUQ,MAAM,CAAClC,OAAjB,GAA2BoC,SAJpB,EAKPX,KALO,CAAJ;AADX,KAQQI,UARR,GAUKC,MAAM,gBACH,6BAAC,iBAAD,QAAOZ,GAAP,CADG,gBAGH,6BAAC,kBAAD;AACI,IAAA,GAAG,EAAEA,GADT;AAEI,IAAA,MAAM,EAAE,MAFZ;AAGI,IAAA,OAAO,EAAEG,OAHb;AAII,IAAA,OAAO,EAAEc,WAJb;AAKI,IAAA,MAAM,EAAER,MALZ;AAMI,IAAA,UAAU,EAAEJ,UANhB;AAOI,IAAA,MAAM,EAAEC,MAPZ;AAQI,IAAA,KAAK,EAAE;AARX,IAbR,EAyBKF,gBAAgB,gBACb,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEV,mBAAWyB;AAAxB,KACKf,gBADL,CADa,GAIb,IA7BR,CADJ;AAiCH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n    };\n};\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        disableOutline,\n        disablePlaceholder,\n        loading = 'lazy',\n        overlaidChildren,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        onLoad,\n        onError,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = React.useState(false);\n\n    const styles = useStyles();\n\n    const handleError = () => {\n        if(onError){\n            onError();\n        }\n\n        setFailed(true);\n    }\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !disablePlaceholder ? styles.placeholder : undefined,\n                !square ? styles.rounded : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {failed ? (\n                <Text>{alt}</Text>\n            ) : (\n                <ImageCore\n                    alt={alt}\n                    height={'100%'}\n                    loading={loading}\n                    onError={handleError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={source}\n                    width={'100%'}\n                />\n            )}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"]}

package/build/commonjs/Pagination/Pagination.js

@@ -9,10 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _icons = require("@fountain-ui/icons");
-
 var _utils = require("@fountain-ui/utils");
 
+var _icons = require("../internal/icons");
+
 var _styles = require("../styles");
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));

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","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 : firstPage);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page + bundleSize <= lastPage\n            ? page + bundleSize\n            : (infinite ? page + bundleSize - count : lastPage);\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"]}
+{"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 { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { times } from '@fountain-ui/utils';\nimport { ChevronLeft, ChevronRight } from '../internal/icons';\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 : firstPage);\n\n        handleChange(prevPage);\n    };\n\n    const handleNextPress = () => {\n        const nextPage = page + bundleSize <= lastPage\n            ? page + bundleSize\n            : (infinite ? page + bundleSize - count : lastPage);\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/Radio/Radio.js

@@ -19,6 +19,8 @@ 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 ICON_SIZE = 20;
+
 const useStyles = function () {
   return {
     root: {
@@ -56,22 +58,21 @@ function Radio(props) {
   };
 
   const isChecked = (_ref = (context === null || context === void 0 ? void 0 : context.value) === value) !== null && _ref !== void 0 ? _ref : checked;
-  const color = theme.palette.tertiary.main;
-  const checkedColor = theme.palette.primary.main;
+  const icon = isChecked ? /*#__PURE__*/_react.default.createElement(_internal.RadioChecked, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    color: 'primary'
+  }) : /*#__PURE__*/_react.default.createElement(_internal.Radio, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    color: 'tertiary'
+  });
   const rootStyle = (0, _styles.css)([styles.root, style]);
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
     disabled: disabled,
     onPress: handlePress,
     style: rootStyle
-  }, otherProps), isChecked ? /*#__PURE__*/_react.default.createElement(_internal.RadioChecked, {
-    fill: checkedColor,
-    height: 20,
-    width: 20
-  }) : /*#__PURE__*/_react.default.createElement(_internal.Radio, {
-    fill: color,
-    height: 20,
-    width: 20
-  }), children ? children : null);
+  }, otherProps), icon, children ? children : null);
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"sources":["Radio.tsx"],"names":["useStyles","root","alignItems","flexDirection","Radio","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","theme","context","React","useContext","RadioContext","handlePress","isChecked","color","palette","tertiary","main","checkedColor","primary","rootStyle"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAiC,GAAG,YAAyB;AAC/D,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,aAAa,EAAE;AAFb;AADH,GAAP;AAMH,CAPD;;AASe,SAASC,KAAT,CAAeC,KAAf,EAAkC;AAAA;;AAC7C,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,QAAQ,EAAEC,YAJR;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFR,KARJ;AAUA,QAAMS,MAAM,GAAGd,SAAS,EAAxB;AAEA,QAAMe,KAAK,GAAG,uBAAd;;AAEA,QAAMC,OAAO,GAAGC,eAAMC,UAAN,CAAiBC,kCAAjB,CAAhB;;AAEA,QAAMC,WAAW,GAAG,MAAM;AAAA;;AACtB,UAAMX,QAAQ,wBAAGO,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEP,QAAZ,iEAAwBC,YAAtC;;AACA,QAAID,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACG,KAAD,CAAR;AACH;AACJ,GALD;;AAOA,QAAMS,SAAS,WAAG,CAAAL,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEJ,KAAT,MAAmBA,KAAtB,uCAA+BN,OAA9C;AAEA,QAAMgB,KAAK,GAAGP,KAAK,CAACQ,OAAN,CAAcC,QAAd,CAAuBC,IAArC;AACA,QAAMC,YAAY,GAAGX,KAAK,CAACQ,OAAN,CAAcI,OAAd,CAAsBF,IAA3C;AAEA,QAAMG,SAAS,GAAG,iBAAI,CAClBd,MAAM,CAACb,IADW,EAElBU,KAFkB,CAAJ,CAAlB;AAKA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEH,QADd;AAEI,IAAA,OAAO,EAAEY,WAFb;AAGI,IAAA,KAAK,EAAEQ;AAHX,KAIQf,UAJR,GAMKQ,SAAS,gBACN,6BAAC,sBAAD;AACI,IAAA,IAAI,EAAEK,YADV;AAEI,IAAA,MAAM,EAAE,EAFZ;AAGI,IAAA,KAAK,EAAE;AAHX,IADM,gBAON,6BAAC,eAAD;AACI,IAAA,IAAI,EAAEJ,KADV;AAEI,IAAA,MAAM,EAAE,EAFZ;AAGI,IAAA,KAAK,EAAE;AAHX,IAbR,EAmBKf,QAAQ,GAAGA,QAAH,GAAc,IAnB3B,CADJ;AAuBH;;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css, useTheme } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            flexDirection: 'row',\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange: onChangeProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const context = React.useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const color = theme.palette.tertiary.main;\n    const checkedColor = theme.palette.primary.main;\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {isChecked ? (\n                <RadioCheckedIcon\n                    fill={checkedColor}\n                    height={20}\n                    width={20}\n                />\n            ) : (\n                <RadioIcon\n                    fill={color}\n                    height={20}\n                    width={20}\n                />\n            )}\n            {children ? children : null}\n        </ButtonBase>\n    );\n};\n"]}
+{"version":3,"sources":["Radio.tsx"],"names":["ICON_SIZE","useStyles","root","alignItems","flexDirection","Radio","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","theme","context","React","useContext","RadioContext","handlePress","isChecked","icon","rootStyle"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAS,GAAG,EAAlB;;AAEA,MAAMC,SAAiC,GAAG,YAAyB;AAC/D,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,aAAa,EAAE;AAFb;AADH,GAAP;AAMH,CAPD;;AASe,SAASC,KAAT,CAAeC,KAAf,EAAkC;AAAA;;AAC7C,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,QAAQ,EAAEC,YAJR;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFR,KARJ;AAUA,QAAMS,MAAM,GAAGd,SAAS,EAAxB;AAEA,QAAMe,KAAK,GAAG,uBAAd;;AAEA,QAAMC,OAAO,GAAGC,eAAMC,UAAN,CAAiBC,kCAAjB,CAAhB;;AAEA,QAAMC,WAAW,GAAG,MAAM;AAAA;;AACtB,UAAMX,QAAQ,wBAAGO,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEP,QAAZ,iEAAwBC,YAAtC;;AACA,QAAID,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACG,KAAD,CAAR;AACH;AACJ,GALD;;AAOA,QAAMS,SAAS,WAAG,CAAAL,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEJ,KAAT,MAAmBA,KAAtB,uCAA+BN,OAA9C;AAEA,QAAMgB,IAAI,GAAGD,SAAS,gBAChB,6BAAC,sBAAD;AAAkB,IAAA,KAAK,EAAEtB,SAAzB;AAAoC,IAAA,MAAM,EAAEA,SAA5C;AAAuD,IAAA,KAAK,EAAE;AAA9D,IADgB,gBAEhB,6BAAC,eAAD;AAAW,IAAA,KAAK,EAAEA,SAAlB;AAA6B,IAAA,MAAM,EAAEA,SAArC;AAAgD,IAAA,KAAK,EAAE;AAAvD,IAFN;AAIA,QAAMwB,SAAS,GAAG,iBAAI,CAClBT,MAAM,CAACb,IADW,EAElBU,KAFkB,CAAJ,CAAlB;AAKA,sBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEH,QADd;AAEI,IAAA,OAAO,EAAEY,WAFb;AAGI,IAAA,KAAK,EAAEG;AAHX,KAIQV,UAJR,GAMKS,IANL,EAQKf,QAAQ,GAAGA,QAAH,GAAc,IAR3B,CADJ;AAYH;;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css, useTheme } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n    return {\n        root: {\n            alignItems: 'center',\n            flexDirection: 'row',\n        },\n    };\n};\n\nexport default function Radio(props: RadioProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange: onChangeProp,\n        style,\n        value,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const context = React.useContext(RadioContext);\n\n    const handlePress = () => {\n        const onChange = context?.onChange ?? onChangeProp;\n        if (onChange) {\n            onChange(value);\n        }\n    };\n\n    const isChecked = context?.value === value ?? checked;\n\n    const icon = isChecked\n        ? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>\n        : <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;\n\n    const rootStyle = css([\n        styles.root,\n        style,\n    ]);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {icon}\n\n            {children ? children : null}\n        </ButtonBase>\n    );\n};\n"]}