@fountain-ui/core 2.0.0-beta.98 → 3.0.0-alpha.10

package/build/module/Button/Button.js

@@ -16,7 +16,8 @@ const useStyles = function () {
       alignItems: 'center',
       borderRadius: theme.shape.radius.sm,
       flexDirection: 'row',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      minHeight: 32
     },
     fullWidth: {
       width: '100%'
@@ -40,6 +41,9 @@ const useStyles = function () {
     },
     loadingSpinner: {
       position: 'absolute'
+    },
+    iconContainer: {
+      paddingTop: 1
     }
   };
 };
@@ -79,6 +83,7 @@ export default function Button(props) {
     color: colorProp = 'primary',
     disabled: disabledProp = false,
     disableMinWidth = false,
+    disablePadding = false,
     endIcon: endIconProp,
     fullWidth = false,
     href,
@@ -101,21 +106,27 @@ export default function Button(props) {
     labelColor
   } = useVariantStyleMap(variant, color);
   const iconProps = {
-    fill: iconColor
+    fill: iconColor,
+    opacity: isLoading ? 0 : 1
   };
-  const startIcon = cloneElementSafely(startIconProp, iconProps);
-  const endIcon = cloneElementSafely(endIconProp, iconProps);
+  const startIcon = startIconProp ? /*#__PURE__*/React.createElement(View, {
+    style: styles.iconContainer
+  }, cloneElementSafely(startIconProp, iconProps)) : null;
+  const endIcon = endIconProp ? /*#__PURE__*/React.createElement(View, {
+    style: styles.iconContainer
+  }, cloneElementSafely(endIconProp, iconProps)) : null;
   const buttonBaseStyle = css([styles.root, containerStyle, styles[size], fullWidth ? styles.fullWidth : undefined, disableMinWidth ? {
     minWidth: 0
+  } : undefined, disablePadding ? {
+    paddingHorizontal: 0,
+    paddingVertical: 0
   } : undefined, styleProp]);
-  const contentStyle = css({
-    opacity: isLoading ? 0 : 1
-  });
   const fontStyle = createFontStyle(theme, {
     selector: _ => fontStyleMap[size],
     color: labelColor
   });
   const textStyle = css([fontStyle, {
+    opacity: isLoading ? 0 : 1,
     textAlign: 'center'
   }]);
   const modifiedPressEffect = variant !== 'text' && !pressEffect ? 'scale' : pressEffect;
@@ -143,11 +154,9 @@ export default function Button(props) {
     onPress: handlePress,
     style: buttonBaseStyle,
     pressEffect: modifiedPressEffect
-  }, otherProps), /*#__PURE__*/React.createElement(View, {
-    style: contentStyle
-  }, startIcon, /*#__PURE__*/React.createElement(Text, {
+  }, otherProps), startIcon, /*#__PURE__*/React.createElement(Text, {
     style: textStyle
-  }, children), endIcon), isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {
+  }, children), endIcon, isLoading ? /*#__PURE__*/React.createElement(LoadingSpinner, {
     color: loadingSpinnerColor,
     size: size,
     style: styles.loadingSpinner

package/build/module/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Linking","Text","View","typographyOf","ButtonBase","LoadingSpinner","createFontStyle","css","useTheme","cloneElementSafely","useVariantStyleMap","useStyles","theme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","fontStyleMap","fontSize","lineHeight","fontFamily","letterSpacing","getLoadingSpinnerColor","variant","color","Button","props","children","colorProp","disabled","disabledProp","disableMinWidth","endIcon","endIconProp","href","isLoading","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","otherProps","styles","container","containerStyle","iconColor","labelColor","iconProps","fill","buttonBaseStyle","undefined","contentStyle","opacity","fontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text, View } from 'react-native';\nimport type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { LoadingSpinner } from '../internal/icons';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner'>;\n\nconst useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: theme.shape.radius.sm,\n            flexDirection: 'row',\n            justifyContent: 'center',\n        },\n        fullWidth: {\n            width: '100%',\n        },\n        large: {\n            gap: theme.spacing(2),\n            minWidth: 104,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(3.5),\n        },\n        medium: {\n            gap: theme.spacing(1.5),\n            minWidth: 88,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(2.75),\n        },\n        small: {\n            minWidth: 64,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(2),\n        },\n        loadingSpinner: {\n            position: 'absolute',\n        },\n    };\n};\n\nconst fontStyleMap: Record<ButtonSize, FontStyle> = {\n    large: typographyOf({\n        fontSize: 16,\n        lineHeight: 20,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.32,\n    }),\n    medium: typographyOf({\n        fontSize: 15,\n        lineHeight: 19.5,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.3,\n    }),\n    small: typographyOf({\n        fontSize: 13,\n        lineHeight: 16.9,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.26,\n    }),\n};\n\nfunction getLoadingSpinnerColor(variant: ButtonVariant, color: ButtonColor) {\n    if (variant === 'solid' || (variant === 'capsuleSolid' && color !== 'secondary')) {\n        return 'white';\n    }\n    return 'gray';\n}\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        color: colorProp = 'primary' as ButtonColor,\n        disabled: disabledProp = false,\n        disableMinWidth = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        isLoading = false,\n        onPress,\n        pressEffect,\n        size = 'medium' as ButtonSize,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'solid' as ButtonVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const disabled = disabledProp || isLoading;\n\n    const color = disabledProp ? 'disabled' : colorProp;\n    const {\n        container: containerStyle,\n        iconColor,\n        labelColor,\n    } = useVariantStyleMap(variant, color);\n\n    const iconProps = {\n        fill: iconColor,\n    };\n\n    const startIcon = cloneElementSafely(startIconProp, iconProps);\n    const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n    const buttonBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styles[size],\n        fullWidth ? styles.fullWidth : undefined,\n        disableMinWidth ? { minWidth: 0 } : undefined,\n        styleProp,\n    ]);\n\n    const contentStyle = css({\n        opacity: isLoading ? 0 : 1,\n    });\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (_) => fontStyleMap[size],\n        color: labelColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        { textAlign: 'center' },\n    ]);\n\n    const modifiedPressEffect = variant !== 'text' && !pressEffect\n        ? 'scale'\n        : pressEffect;\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    const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            pressEffect={modifiedPressEffect}\n            {...otherProps}\n        >\n            <View style={contentStyle}>\n                {startIcon}\n\n                <Text style={textStyle}>\n                    {children}\n                </Text>\n\n                {endIcon}\n            </View>\n\n            {isLoading ? (\n                <LoadingSpinner\n                    color={loadingSpinnerColor}\n                    size={size}\n                    style={styles.loadingSpinner}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Linking","Text","View","typographyOf","ButtonBase","LoadingSpinner","createFontStyle","css","useTheme","cloneElementSafely","useVariantStyleMap","useStyles","theme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","minHeight","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","iconContainer","paddingTop","fontStyleMap","fontSize","lineHeight","fontFamily","letterSpacing","getLoadingSpinnerColor","variant","color","Button","props","children","colorProp","disabled","disabledProp","disableMinWidth","disablePadding","endIcon","endIconProp","href","isLoading","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","otherProps","styles","container","containerStyle","iconColor","labelColor","iconProps","fill","opacity","buttonBaseStyle","undefined","fontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text, View } from 'react-native';\nimport type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { LoadingSpinner } from '../internal/icons';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner' | 'iconContainer'>;\n\nconst useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            alignItems: 'center',\n            borderRadius: theme.shape.radius.sm,\n            flexDirection: 'row',\n            justifyContent: 'center',\n            minHeight: 32,\n        },\n        fullWidth: {\n            width: '100%',\n        },\n        large: {\n            gap: theme.spacing(2),\n            minWidth: 104,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(3.5),\n        },\n        medium: {\n            gap: theme.spacing(1.5),\n            minWidth: 88,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(2.75),\n        },\n        small: {\n            minWidth: 64,\n            paddingHorizontal: theme.spacing(6),\n            paddingVertical: theme.spacing(2),\n        },\n        loadingSpinner: {\n            position: 'absolute',\n        },\n        iconContainer: {\n            paddingTop: 1,\n        },\n    };\n};\n\nconst fontStyleMap: Record<ButtonSize, FontStyle> = {\n    large: typographyOf({\n        fontSize: 16,\n        lineHeight: 20,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.32,\n    }),\n    medium: typographyOf({\n        fontSize: 15,\n        lineHeight: 19.5,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.3,\n    }),\n    small: typographyOf({\n        fontSize: 13,\n        lineHeight: 16.9,\n        fontFamily: 'LexendDeca-SemiBold',\n        letterSpacing: -0.26,\n    }),\n};\n\nfunction getLoadingSpinnerColor(variant: ButtonVariant, color: ButtonColor) {\n    if (variant === 'solid' || (variant === 'capsuleSolid' && color !== 'secondary')) {\n        return 'white';\n    }\n    return 'gray';\n}\n\nexport default function Button(props: ButtonProps) {\n    const {\n        children,\n        color: colorProp = 'primary' as ButtonColor,\n        disabled: disabledProp = false,\n        disableMinWidth = false,\n        disablePadding = false,\n        endIcon: endIconProp,\n        fullWidth = false,\n        href,\n        isLoading = false,\n        onPress,\n        pressEffect,\n        size = 'medium' as ButtonSize,\n        startIcon: startIconProp,\n        style: styleProp,\n        variant = 'solid' as ButtonVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const disabled = disabledProp || isLoading;\n\n    const color = disabledProp ? 'disabled' : colorProp;\n    const {\n        container: containerStyle,\n        iconColor,\n        labelColor,\n    } = useVariantStyleMap(variant, color);\n\n    const iconProps = {\n        fill: iconColor,\n        opacity: isLoading ? 0 : 1,\n    };\n\n    const startIcon = startIconProp ? (\n        <View style={styles.iconContainer}>\n            {cloneElementSafely(startIconProp, iconProps)}\n        </View>\n    ) : null;\n\n    const endIcon = endIconProp ? (\n        <View style={styles.iconContainer}>\n            {cloneElementSafely(endIconProp, iconProps)}\n        </View>\n    ) : null;\n\n    const buttonBaseStyle = css([\n        styles.root,\n        containerStyle,\n        styles[size],\n        fullWidth ? styles.fullWidth : undefined,\n        disableMinWidth ? { minWidth: 0 } : undefined,\n        disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (_) => fontStyleMap[size],\n        color: labelColor,\n    });\n\n    const textStyle = css([\n        fontStyle,\n        {\n            opacity: isLoading ? 0 : 1,\n            textAlign: 'center',\n        },\n    ]);\n\n    const modifiedPressEffect = variant !== 'text' && !pressEffect\n        ? 'scale'\n        : pressEffect;\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    const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={buttonBaseStyle}\n            pressEffect={modifiedPressEffect}\n            {...otherProps}\n        >\n            {startIcon}\n\n            <Text style={textStyle}>\n                {children}\n            </Text>\n\n            {endIcon}\n\n            {isLoading ? (\n                <LoadingSpinner\n                    color={loadingSpinnerColor}\n                    size={size}\n                    style={styles.loadingSpinner}\n                />\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":"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"}

package/build/module/Button/ButtonProps.js

@@ -1,4 +1,4 @@
-export const ButtonColors = ['accent', 'primary', 'danger', 'disabled', 'secondary', 'accentAlt'];
-export const ButtonSizes = ['small', 'medium', 'large'];
-export const ButtonVariants = ['solid', 'outlined', 'text', 'capsuleSolid', 'capsuleOutlined'];
+export const buttonColors = ['accent', 'primary', 'danger', 'disabled', 'secondary', 'accentAlt'];
+export const buttonSizes = ['small', 'medium', 'large'];
+export const buttonVariants = ['solid', 'outlined', 'text', 'capsuleSolid', 'capsuleOutlined'];
 //# sourceMappingURL=ButtonProps.js.map

package/build/module/Button/ButtonProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["ButtonColors","ButtonSizes","ButtonVariants"],"sources":["ButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const ButtonColors = [\n    'accent',\n    'primary',\n    'danger',\n    'disabled',\n    'secondary',\n    'accentAlt',\n] as const;\nexport type ButtonColor = typeof ButtonColors[number];\n\nexport const ButtonSizes = [\n    'small',\n    'medium',\n    'large',\n] as const;\nexport type ButtonSize = typeof ButtonSizes[number];\n\nexport const ButtonVariants = [\n    'solid',\n    'outlined',\n    'text',\n    'capsuleSolid',\n    'capsuleOutlined',\n] as const;\nexport type ButtonVariant = typeof ButtonVariants[number];\n\nexport default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the button.\n     */\n    children: string;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: ButtonColor;\n\n    /**\n     * Determines whether minWidth should be applied.\n     * @default false\n     */\n    disableMinWidth?: boolean;\n\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * If `true`, the button will take up the full width of its container.\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * The URL to link to when the button is clicked.\n     */\n    href?: string;\n\n    /**\n     * Determines whether to show the loading status or not.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * The size of the button.\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'solid'\n     */\n    variant?: ButtonVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,YAAY,GAAG,CACxB,QADwB,EAExB,SAFwB,EAGxB,QAHwB,EAIxB,UAJwB,EAKxB,WALwB,EAMxB,WANwB,CAArB;AAUP,OAAO,MAAMC,WAAW,GAAG,CACvB,OADuB,EAEvB,QAFuB,EAGvB,OAHuB,CAApB;AAOP,OAAO,MAAMC,cAAc,GAAG,CAC1B,OAD0B,EAE1B,UAF0B,EAG1B,MAH0B,EAI1B,cAJ0B,EAK1B,iBAL0B,CAAvB"}
+{"version":3,"names":["buttonColors","buttonSizes","buttonVariants"],"sources":["ButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport const buttonColors = [\n    'accent',\n    'primary',\n    'danger',\n    'disabled',\n    'secondary',\n    'accentAlt',\n] as const;\nexport type ButtonColor = typeof buttonColors[number];\n\nexport const buttonSizes = [\n    'small',\n    'medium',\n    'large',\n] as const;\nexport type ButtonSize = typeof buttonSizes[number];\n\nexport const buttonVariants = [\n    'solid',\n    'outlined',\n    'text',\n    'capsuleSolid',\n    'capsuleOutlined',\n] as const;\nexport type ButtonVariant = typeof buttonVariants[number];\n\nexport default interface ButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n    /**\n     * The content of the button.\n     */\n    children: string;\n\n    /**\n     * The color of the component. It supports those theme colors that make sense for this component.\n     * @default 'primary'\n     */\n    color?: ButtonColor;\n\n    /**\n     * Determines whether minWidth should be applied.\n     * @default false\n     */\n    disableMinWidth?: boolean;\n\n    /**\n     * Determines whether padding should be applied.\n     * @default false\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Element placed after the children.\n     */\n    endIcon?: React.ReactElement;\n\n    /**\n     * If `true`, the button will take up the full width of its container.\n     * @default false\n     */\n    fullWidth?: boolean;\n\n    /**\n     * The URL to link to when the button is clicked.\n     */\n    href?: string;\n\n    /**\n     * Determines whether to show the loading status or not.\n     * @default false\n     */\n    isLoading?: boolean;\n\n    /**\n     * The size of the button.\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n\n    /**\n     * Element placed before the children.\n     */\n    startIcon?: React.ReactElement;\n\n    /**\n     * The variant to use.\n     * @default 'solid'\n     */\n    variant?: ButtonVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,YAAY,GAAG,CACxB,QADwB,EAExB,SAFwB,EAGxB,QAHwB,EAIxB,UAJwB,EAKxB,WALwB,EAMxB,WANwB,CAArB;AAUP,OAAO,MAAMC,WAAW,GAAG,CACvB,OADuB,EAEvB,QAFuB,EAGvB,OAHuB,CAApB;AAOP,OAAO,MAAMC,cAAc,GAAG,CAC1B,OAD0B,EAE1B,UAF0B,EAG1B,MAH0B,EAI1B,cAJ0B,EAK1B,iBAL0B,CAAvB"}

package/build/module/Button/index.js

@@ -1,2 +1,3 @@
-export { default } from './LegacyButton';
+export { default } from './Button';
+export { buttonColors, buttonSizes, buttonVariants } from './ButtonProps';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyButton';\nexport type { default as ButtonProps } from './LegacyButtonProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}
+{"version":3,"names":["default","buttonColors","buttonSizes","buttonVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Button';\nexport type { default as ButtonProps } from './ButtonProps';\nexport { buttonColors, buttonSizes, buttonVariants } from './ButtonProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,UAAxB;AAEA,SAASC,YAAT,EAAuBC,WAAvB,EAAoCC,cAApC,QAA0D,eAA1D"}

package/build/module/Button/useVariantStyleMap.js

@@ -4,6 +4,8 @@ import { useTheme } from '../styles';
 export default function useVariantStyleMap(variant, color) {
   const theme = useTheme();
   return useMemo(() => {
+    var _variantStyleMap$vari;
+
     const {
       palette
     } = theme;
@@ -81,6 +83,10 @@ export default function useVariantStyleMap(variant, color) {
           labelColor: palette.text.accentAlt,
           iconColor: palette.icon.accentAlt
         },
+        danger: {
+          labelColor: palette.status.danger,
+          iconColor: palette.status.danger
+        },
         disabled: {
           labelColor: palette.status.disabledLabel,
           iconColor: palette.status.disabledLabel
@@ -150,7 +156,7 @@ export default function useVariantStyleMap(variant, color) {
       }
     };
 
-    if (variantStyleMap[variant][color]) {
+    if ((_variantStyleMap$vari = variantStyleMap[variant]) !== null && _variantStyleMap$vari !== void 0 && _variantStyleMap$vari[color]) {
       return variantStyleMap[variant][color];
     }
 

package/build/module/Button/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","commonColors","useTheme","useVariantStyleMap","variant","color","theme","palette","variantStyleMap","solid","accent","container","backgroundColor","fill","labelColor","static","strongInverse","iconColor","primary","base","text","icon","danger","status","disabled","onDisabled","outlined","borderColor","border","borderWidth","disabledLabel","strong","secondary","accentAlt","capsuleSolid","borderRadius","shape","radius","full","capsuleOutlined","process","env","NODE_ENV","console","warn"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { commonColors } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ButtonColor, ButtonVariant } from './ButtonProps';\n\ntype UseVariantStyleMapReturns = {\n    container?: FountainUiStyle;\n    iconColor?: string;\n    labelColor?: string;\n}\n\ntype VariantStyleMap = {\n    [variant in ButtonVariant]: {\n        [color in ButtonColor]?: UseVariantStyleMapReturns;\n    }\n};\n\nexport default function useVariantStyleMap(variant: ButtonVariant, color: ButtonColor): UseVariantStyleMapReturns {\n    const theme = useTheme();\n\n    return useMemo(() => {\n        const { palette } = theme;\n\n        const variantStyleMap: VariantStyleMap = {\n            solid: {\n                accent: {\n                    container: {\n                        backgroundColor: palette.fill.accent,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                primary: {\n                    container: {\n                        backgroundColor: palette.fill.base,\n                    },\n                    labelColor: palette.text.strongInverse,\n                    iconColor: palette.icon.strongInverse,\n                },\n                danger: {\n                    container: {\n                        backgroundColor: palette.status.danger,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                disabled: {\n                    container: {\n                        backgroundColor: palette.status.disabled,\n                    },\n                    labelColor: palette.status.onDisabled,\n                    iconColor: palette.status.onDisabled,\n                },\n            },\n            outlined: {\n                accent: {\n                    container: {\n                        borderColor: palette.border.accent,\n                        borderWidth: 1,\n                    },\n                    labelColor: palette.text.accent,\n                    iconColor: palette.icon.accent,\n                },\n                primary: {\n                    container: {\n                        borderColor: palette.border.base,\n                        borderWidth: 1,\n                    },\n                    labelColor: palette.text.base,\n                    iconColor: palette.icon.base,\n                },\n                disabled: {\n                    container: {\n                        borderColor: palette.status.disabled,\n                        borderWidth: 1,\n                    },\n                    labelColor: palette.status.disabledLabel,\n                    iconColor: palette.status.disabledLabel,\n                },\n            },\n            text: {\n                primary: {\n                    labelColor: palette.text.strong,\n                    iconColor: palette.icon.strong,\n                },\n                secondary: {\n                    labelColor: palette.text.base,\n                    iconColor: palette.icon.base,\n                },\n                accent: {\n                    labelColor: palette.text.accent,\n                    iconColor: palette.icon.accent,\n                },\n                accentAlt: {\n                    labelColor: palette.text.accentAlt,\n                    iconColor: palette.icon.accentAlt,\n                },\n                disabled: {\n                    labelColor: palette.status.disabledLabel,\n                    iconColor: palette.status.disabledLabel,\n                },\n            },\n            capsuleSolid: {\n                accent: {\n                    container: {\n                        backgroundColor: theme.palette.fill.accent,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                primary: {\n                    container: {\n                        backgroundColor: theme.palette.fill.base,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: palette.text.strongInverse,\n                    iconColor: palette.icon.strongInverse,\n                },\n                danger: {\n                    container: {\n                        backgroundColor: theme.palette.status.danger,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                secondary: {\n                    container: {\n                        backgroundColor: commonColors.static.strongInverse,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: theme.palette.text.strong,\n                    iconColor: theme.palette.icon.strong,\n                },\n                disabled: {\n                    container: {\n                        backgroundColor: theme.palette.status.disabled,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: theme.palette.status.onDisabled,\n                    iconColor: theme.palette.status.onDisabled,\n                },\n            },\n            capsuleOutlined: {\n                primary: {\n                    container: {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: 1,\n                    },\n                    labelColor: theme.palette.text.strong,\n                    iconColor: theme.palette.icon.strong,\n                },\n                disabled: {\n                    container: {\n                        borderColor: theme.palette.status.disabled,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: 1,\n                    },\n                    labelColor: theme.palette.status.disabledLabel,\n                    iconColor: theme.palette.status.disabledLabel,\n                },\n            },\n        };\n\n        if (variantStyleMap[variant][color]) {\n            return variantStyleMap[variant][color] as UseVariantStyleMapReturns;\n        }\n\n        if (process.env.NODE_ENV !== 'production') {\n            console.warn('The selected color is not supported for the chosen variant.');\n        }\n\n        return {};\n    }, [theme, variant, color]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","commonColors","useTheme","useVariantStyleMap","variant","color","theme","palette","variantStyleMap","solid","accent","container","backgroundColor","fill","labelColor","static","strongInverse","iconColor","primary","base","text","icon","danger","status","disabled","onDisabled","outlined","borderColor","border","borderWidth","disabledLabel","strong","secondary","accentAlt","capsuleSolid","borderRadius","shape","radius","full","capsuleOutlined","process","env","NODE_ENV","console","warn"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { commonColors } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ButtonColor, ButtonVariant } from './ButtonProps';\n\ntype UseVariantStyleMapReturns = {\n    container?: FountainUiStyle;\n    iconColor?: string;\n    labelColor?: string;\n}\n\ntype VariantStyleMap = {\n    [variant in ButtonVariant]: {\n        [color in ButtonColor]?: UseVariantStyleMapReturns;\n    }\n};\n\nexport default function useVariantStyleMap(variant: ButtonVariant, color: ButtonColor): UseVariantStyleMapReturns {\n    const theme = useTheme();\n\n    return useMemo(() => {\n        const { palette } = theme;\n\n        const variantStyleMap: VariantStyleMap = {\n            solid: {\n                accent: {\n                    container: {\n                        backgroundColor: palette.fill.accent,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                primary: {\n                    container: {\n                        backgroundColor: palette.fill.base,\n                    },\n                    labelColor: palette.text.strongInverse,\n                    iconColor: palette.icon.strongInverse,\n                },\n                danger: {\n                    container: {\n                        backgroundColor: palette.status.danger,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                disabled: {\n                    container: {\n                        backgroundColor: palette.status.disabled,\n                    },\n                    labelColor: palette.status.onDisabled,\n                    iconColor: palette.status.onDisabled,\n                },\n            },\n            outlined: {\n                accent: {\n                    container: {\n                        borderColor: palette.border.accent,\n                        borderWidth: 1,\n                    },\n                    labelColor: palette.text.accent,\n                    iconColor: palette.icon.accent,\n                },\n                primary: {\n                    container: {\n                        borderColor: palette.border.base,\n                        borderWidth: 1,\n                    },\n                    labelColor: palette.text.base,\n                    iconColor: palette.icon.base,\n                },\n                disabled: {\n                    container: {\n                        borderColor: palette.status.disabled,\n                        borderWidth: 1,\n                    },\n                    labelColor: palette.status.disabledLabel,\n                    iconColor: palette.status.disabledLabel,\n                },\n            },\n            text: {\n                primary: {\n                    labelColor: palette.text.strong,\n                    iconColor: palette.icon.strong,\n                },\n                secondary: {\n                    labelColor: palette.text.base,\n                    iconColor: palette.icon.base,\n                },\n                accent: {\n                    labelColor: palette.text.accent,\n                    iconColor: palette.icon.accent,\n                },\n                accentAlt: {\n                    labelColor: palette.text.accentAlt,\n                    iconColor: palette.icon.accentAlt,\n                },\n                danger: {\n                    labelColor: palette.status.danger,\n                    iconColor: palette.status.danger,\n                },\n                disabled: {\n                    labelColor: palette.status.disabledLabel,\n                    iconColor: palette.status.disabledLabel,\n                },\n            },\n            capsuleSolid: {\n                accent: {\n                    container: {\n                        backgroundColor: theme.palette.fill.accent,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                primary: {\n                    container: {\n                        backgroundColor: theme.palette.fill.base,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: palette.text.strongInverse,\n                    iconColor: palette.icon.strongInverse,\n                },\n                danger: {\n                    container: {\n                        backgroundColor: theme.palette.status.danger,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: commonColors.static.strongInverse,\n                    iconColor: commonColors.static.strongInverse,\n                },\n                secondary: {\n                    container: {\n                        backgroundColor: commonColors.static.strongInverse,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: theme.palette.text.strong,\n                    iconColor: theme.palette.icon.strong,\n                },\n                disabled: {\n                    container: {\n                        backgroundColor: theme.palette.status.disabled,\n                        borderRadius: theme.shape.radius.full,\n                    },\n                    labelColor: theme.palette.status.onDisabled,\n                    iconColor: theme.palette.status.onDisabled,\n                },\n            },\n            capsuleOutlined: {\n                primary: {\n                    container: {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: 1,\n                    },\n                    labelColor: theme.palette.text.strong,\n                    iconColor: theme.palette.icon.strong,\n                },\n                disabled: {\n                    container: {\n                        borderColor: theme.palette.status.disabled,\n                        borderRadius: theme.shape.radius.full,\n                        borderWidth: 1,\n                    },\n                    labelColor: theme.palette.status.disabledLabel,\n                    iconColor: theme.palette.status.disabledLabel,\n                },\n            },\n        };\n\n        if (variantStyleMap[variant]?.[color]) {\n            return variantStyleMap[variant][color] as UseVariantStyleMapReturns;\n        }\n\n        if (process.env.NODE_ENV !== 'production') {\n            console.warn('The selected color is not supported for the chosen variant.');\n        }\n\n        return {};\n    }, [theme, variant, color]);\n}\n"],"mappings":"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"}

package/build/module/Checkbox/Checkbox.js

@@ -19,13 +19,14 @@ export default function Checkbox(props) {
   } = props;
   const theme = useTheme();
   const {
+    checkboxContainerStyle,
     checkboxStyle,
     containerStyle,
     iconColor
   } = useVariantStyleMap(variant, checked);
   const rootStyle = css([children ? containerStyle : undefined, styleProp]);
   const fontStyle = createFontStyle(theme, {
-    // TODO: apply typo select.
+    selector: typography => typography.body2.regular,
     color: theme.palette.text.strong
   });
 
@@ -40,13 +41,14 @@ export default function Checkbox(props) {
     onPress: handlePress,
     style: rootStyle
   }, otherProps), /*#__PURE__*/React.createElement(View, {
+    style: checkboxContainerStyle
+  }, /*#__PURE__*/React.createElement(View, {
     style: checkboxStyle
   }, checked ? /*#__PURE__*/React.createElement(CheckboxOnIcon, {
     fill: iconColor,
-    enableV2: true,
     height: 7.5,
     width: 11
-  }) : null), children ? /*#__PURE__*/React.createElement(Row, {
+  }) : null)), children ? /*#__PURE__*/React.createElement(Row, {
     flexGrow: 1,
     flexShrink: 1
   }, /*#__PURE__*/React.createElement(Text, {

package/build/module/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","ButtonBase","CheckboxOn","CheckboxOnIcon","Row","createFontStyle","css","useTheme","useVariantStyleMap","Checkbox","props","checked","children","disabled","onChange","style","styleProp","variant","otherProps","theme","checkboxStyle","containerStyle","iconColor","rootStyle","undefined","fontStyle","color","palette","text","strong","handlePress"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { CheckboxOn as CheckboxOnIcon } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type CheckboxProps from './CheckboxProps';\nimport type { CheckboxVariant } from './CheckboxProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nexport default function Checkbox(props: CheckboxProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange,\n        style: styleProp,\n        variant = 'square' as CheckboxVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const {\n        checkboxStyle,\n        containerStyle,\n        iconColor,\n    } = useVariantStyleMap(variant, checked);\n\n    const rootStyle = css([\n        children ? containerStyle : undefined,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        // TODO: apply typo select.\n        color: theme.palette.text.strong,\n    });\n\n    const handlePress = () => {\n        if (onChange) {\n            onChange(!checked);\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <View style={checkboxStyle}>\n                {checked ? (\n                    <CheckboxOnIcon\n                        fill={iconColor}\n                        enableV2={true}\n                        height={7.5}\n                        width={11}\n                    />\n                ) : null}\n            </View>\n\n            {children ? (\n                <Row\n                    flexGrow={1}\n                    flexShrink={1}\n                >\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,UAAU,IAAIC,cAAvB,QAA6C,mBAA7C;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,QAAQ,GAAG,KAHT;IAIFC,QAJE;IAKFC,KAAK,EAAEC,SALL;IAMFC,OAAO,GAAG,QANR;IAOF,GAAGC;EAPD,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,MAAM;IACFa,aADE;IAEFC,cAFE;IAGFC;EAHE,IAIFd,kBAAkB,CAACS,OAAD,EAAUN,OAAV,CAJtB;EAMA,MAAMY,SAAS,GAAGjB,GAAG,CAAC,CAClBM,QAAQ,GAAGS,cAAH,GAAoBG,SADV,EAElBR,SAFkB,CAAD,CAArB;EAKA,MAAMS,SAAS,GAAGpB,eAAe,CAACc,KAAD,EAAQ;IACrC;IACAO,KAAK,EAAEP,KAAK,CAACQ,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIhB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAEiB,WAFb;IAGI,KAAK,EAAEP;EAHX,GAIQL,UAJR,gBAMI,oBAAC,IAAD;IAAM,KAAK,EAAEE;EAAb,GACKT,OAAO,gBACJ,oBAAC,cAAD;IACI,IAAI,EAAEW,SADV;IAEI,QAAQ,EAAE,IAFd;IAGI,MAAM,EAAE,GAHZ;IAII,KAAK,EAAE;EAJX,EADI,GAOJ,IARR,CANJ,EAiBKV,QAAQ,gBACL,oBAAC,GAAD;IACI,QAAQ,EAAE,CADd;IAEI,UAAU,EAAE;EAFhB,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEA,QADd;IAEI,KAAK,EAAEa;EAFX,EAJJ,CADK,GAUL,IA3BR,CADJ;AA+BH;AAAA"}
+{"version":3,"names":["React","Text","View","ButtonBase","CheckboxOn","CheckboxOnIcon","Row","createFontStyle","css","useTheme","useVariantStyleMap","Checkbox","props","checked","children","disabled","onChange","style","styleProp","variant","otherProps","theme","checkboxContainerStyle","checkboxStyle","containerStyle","iconColor","rootStyle","undefined","fontStyle","selector","typography","body2","regular","color","palette","text","strong","handlePress"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { CheckboxOn as CheckboxOnIcon } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type CheckboxProps from './CheckboxProps';\nimport type { CheckboxVariant } from './CheckboxProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nexport default function Checkbox(props: CheckboxProps) {\n    const {\n        checked = false,\n        children,\n        disabled = false,\n        onChange,\n        style: styleProp,\n        variant = 'square' as CheckboxVariant,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const {\n        checkboxContainerStyle,\n        checkboxStyle,\n        containerStyle,\n        iconColor,\n    } = useVariantStyleMap(variant, checked);\n\n    const rootStyle = css([\n        children ? containerStyle : undefined,\n        styleProp,\n    ]);\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body2.regular,\n        color: theme.palette.text.strong,\n    });\n\n    const handlePress = () => {\n        if (onChange) {\n            onChange(!checked);\n        }\n    };\n\n    return (\n        <ButtonBase\n            disabled={disabled}\n            onPress={handlePress}\n            style={rootStyle}\n            {...otherProps}\n        >\n            <View style={checkboxContainerStyle}>\n                <View style={checkboxStyle}>\n                    {checked ? (\n                        <CheckboxOnIcon\n                            fill={iconColor}\n                            height={7.5}\n                            width={11}\n                        />\n                    ) : null}\n                </View>\n            </View>\n\n            {children ? (\n                <Row\n                    flexGrow={1}\n                    flexShrink={1}\n                >\n                    <Text\n                        children={children}\n                        style={fontStyle}\n                    />\n                </Row>\n            ) : null}\n        </ButtonBase>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,UAAU,IAAIC,cAAvB,QAA6C,mBAA7C;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAEA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,OAAO,GAAG,KADR;IAEFC,QAFE;IAGFC,QAAQ,GAAG,KAHT;IAIFC,QAJE;IAKFC,KAAK,EAAEC,SALL;IAMFC,OAAO,GAAG,QANR;IAOF,GAAGC;EAPD,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGZ,QAAQ,EAAtB;EAEA,MAAM;IACFa,sBADE;IAEFC,aAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFf,kBAAkB,CAACS,OAAD,EAAUN,OAAV,CALtB;EAOA,MAAMa,SAAS,GAAGlB,GAAG,CAAC,CAClBM,QAAQ,GAAGU,cAAH,GAAoBG,SADV,EAElBT,SAFkB,CAAD,CAArB;EAKA,MAAMU,SAAS,GAAGrB,eAAe,CAACc,KAAD,EAAQ;IACrCQ,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCC,KAAK,EAAEZ,KAAK,CAACa,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIrB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAEsB,WAFb;IAGI,KAAK,EAAEX;EAHX,GAIQN,UAJR,gBAMI,oBAAC,IAAD;IAAM,KAAK,EAAEE;EAAb,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAEC;EAAb,GACKV,OAAO,gBACJ,oBAAC,cAAD;IACI,IAAI,EAAEY,SADV;IAEI,MAAM,EAAE,GAFZ;IAGI,KAAK,EAAE;EAHX,EADI,GAMJ,IAPR,CADJ,CANJ,EAkBKX,QAAQ,gBACL,oBAAC,GAAD;IACI,QAAQ,EAAE,CADd;IAEI,UAAU,EAAE;EAFhB,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEA,QADd;IAEI,KAAK,EAAEc;EAFX,EAJJ,CADK,GAUL,IA5BR,CADJ;AAgCH;AAAA"}

package/build/module/Checkbox/index.js

@@ -1,2 +1,3 @@
-export { default } from './LegacyCheckbox';
+export { default } from './Checkbox';
+export { checkboxVariants } from './CheckboxProps';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyCheckbox';\nexport type { default as CheckboxProps } from './LegacyCheckboxProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,kBAAxB"}
+{"version":3,"names":["default","checkboxVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Checkbox';\nexport type { default as CheckboxProps } from './CheckboxProps';\nexport { checkboxVariants } from './CheckboxProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AAEA,SAASC,gBAAT,QAAiC,iBAAjC"}

package/build/module/Checkbox/useVariantStyleMap.js

@@ -14,6 +14,10 @@ export default function useVariantStyleMap(variant, checked) {
   switch (variant) {
     case 'square':
       return {
+        checkboxContainerStyle: {
+          alignSelf: 'flex-start',
+          paddingTop: 3
+        },
         checkboxStyle: css([styles.checkbox, {
           borderColor: theme.palette.border.base,
           borderRadius: theme.shape.radius.xs,
@@ -25,9 +29,9 @@ export default function useVariantStyleMap(variant, checked) {
           } : {})
         }]),
         containerStyle: {
-          alignItems: 'center',
           flexDirection: 'row',
-          gap: theme.spacing(3)
+          gap: theme.spacing(3),
+          paddingVertical: theme.spacing(2)
         },
         iconColor: theme.palette.fill.baseAlt
       };
@@ -46,8 +50,11 @@ export default function useVariantStyleMap(variant, checked) {
         }]),
         containerStyle: {
           alignItems: 'center',
+          borderBottomColor: theme.palette.border.weak,
+          borderBottomWidth: 0.5,
           flexDirection: 'row-reverse',
-          gap: theme.spacing(8)
+          gap: theme.spacing(8),
+          paddingVertical: theme.spacing(3.5)
         },
         iconColor: commonColors.static.strongInverse
       };

package/build/module/Checkbox/useVariantStyleMap.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","commonColors","css","useTheme","styles","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","checkboxStyle","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","iconColor","baseAlt","full","accent","static","strongInverse"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport { commonColors, FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { CheckboxVariant } from './CheckboxProps';\n\nconst styles = StyleSheet.create({\n    checkbox: {\n        alignItems: 'center',\n        borderWidth: 1,\n        justifyContent: 'center',\n    },\n});\n\ntype useVariantStyleMapReturns = {\n    checkboxStyle?: FountainUiStyle;\n    containerStyle?: FountainUiStyle;\n    iconColor?: string;\n};\n\nexport default function useVariantStyleMap(variant: CheckboxVariant, checked: boolean): useVariantStyleMapReturns {\n    const theme = useTheme();\n\n    switch (variant) {\n        case 'square':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.xs,\n                        height: 18,\n                        width: 18,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.base,\n                            borderColor: theme.palette.fill.base,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    flexDirection: 'row',\n                    gap: theme.spacing(3),\n                },\n                iconColor: theme.palette.fill.baseAlt,\n            };\n        case 'round':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.full,\n                        height: 20,\n                        width: 20,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.accent,\n                            borderColor: theme.palette.fill.accent,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    flexDirection: 'row-reverse',\n                    gap: theme.spacing(8),\n                },\n                iconColor: commonColors.static.strongInverse,\n            };\n        default:\n            return {};\n    }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,YAAT,QAA8C,qBAA9C;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;AAcA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAGV,QAAQ,EAAtB;;EAEA,QAAQQ,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHG,aAAa,EAAEZ,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIS,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIZ,OAAO,GAAG;YACVa,eAAe,EAAEZ,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHS,cAAc,EAAE;UACZpB,UAAU,EAAE,QADA;UAEZqB,aAAa,EAAE,KAFH;UAGZC,GAAG,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd;QAHO,CAdb;QAmBHC,SAAS,EAAElB,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBM;MAnB3B,CAAP;;IAqBJ,KAAK,OAAL;MACI,OAAO;QACHlB,aAAa,EAAEZ,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIS,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAEN,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmBY,IAFrC;UAGIV,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIZ,OAAO,GAAG;YACVa,eAAe,EAAEZ,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBQ,MAD1B;YAEVnB,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBQ;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHP,cAAc,EAAE;UACZpB,UAAU,EAAE,QADA;UAEZqB,aAAa,EAAE,aAFH;UAGZC,GAAG,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd;QAHO,CAdb;QAmBHC,SAAS,EAAE9B,YAAY,CAACkC,MAAb,CAAoBC;MAnB5B,CAAP;;IAqBJ;MACI,OAAO,EAAP;EA9CR;AAgDH"}
+{"version":3,"names":["StyleSheet","commonColors","css","useTheme","styles","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","checkboxContainerStyle","alignSelf","paddingTop","checkboxStyle","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","paddingVertical","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","static","strongInverse"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport { commonColors, FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { CheckboxVariant } from './CheckboxProps';\n\nconst styles = StyleSheet.create({\n    checkbox: {\n        alignItems: 'center',\n        borderWidth: 1,\n        justifyContent: 'center',\n    },\n});\n\ntype useVariantStyleMapReturns = {\n    checkboxContainerStyle?: FountainUiStyle;\n    checkboxStyle?: FountainUiStyle;\n    containerStyle?: FountainUiStyle;\n    iconColor?: string;\n};\n\nexport default function useVariantStyleMap(variant: CheckboxVariant, checked: boolean): useVariantStyleMapReturns {\n    const theme = useTheme();\n\n    switch (variant) {\n        case 'square':\n            return {\n                checkboxContainerStyle: {\n                    alignSelf: 'flex-start',\n                    paddingTop: 3,\n                },\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.xs,\n                        height: 18,\n                        width: 18,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.base,\n                            borderColor: theme.palette.fill.base,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    flexDirection: 'row',\n                    gap: theme.spacing(3),\n                    paddingVertical: theme.spacing(2),\n                },\n                iconColor: theme.palette.fill.baseAlt,\n            };\n        case 'round':\n            return {\n                checkboxStyle: css([\n                    styles.checkbox,\n                    {\n                        borderColor: theme.palette.border.base,\n                        borderRadius: theme.shape.radius.full,\n                        height: 20,\n                        width: 20,\n                        ...(checked ? {\n                            backgroundColor: theme.palette.fill.accent,\n                            borderColor: theme.palette.fill.accent,\n                        } : {}),\n                    },\n                ]),\n                containerStyle: {\n                    alignItems: 'center',\n                    borderBottomColor: theme.palette.border.weak,\n                    borderBottomWidth: 0.5,\n                    flexDirection: 'row-reverse',\n                    gap: theme.spacing(8),\n                    paddingVertical: theme.spacing(3.5),\n                },\n                iconColor: commonColors.static.strongInverse,\n            };\n        default:\n            return {};\n    }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,YAAT,QAA8C,qBAA9C;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;AAeA,eAAe,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAGV,QAAQ,EAAtB;;EAEA,QAAQQ,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHG,sBAAsB,EAAE;UACpBC,SAAS,EAAE,YADS;UAEpBC,UAAU,EAAE;QAFQ,CADrB;QAKHC,aAAa,EAAEf,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIY,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAET,KAAK,CAACU,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIf,OAAO,GAAG;YACVgB,eAAe,EAAEf,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CALf;QAkBHS,cAAc,EAAE;UACZC,aAAa,EAAE,KADH;UAEZC,GAAG,EAAEnB,KAAK,CAACoB,OAAN,CAAc,CAAd,CAFO;UAGZC,eAAe,EAAErB,KAAK,CAACoB,OAAN,CAAc,CAAd;QAHL,CAlBb;QAuBHE,SAAS,EAAEtB,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBO;MAvB3B,CAAP;;IAyBJ,KAAK,OAAL;MACI,OAAO;QACHnB,aAAa,EAAEf,GAAG,CAAC,CACfE,MAAM,CAACE,QADQ,EAEf;UACIY,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAET,KAAK,CAACU,KAAN,CAAYC,MAAZ,CAAmBa,IAFrC;UAGIX,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIf,OAAO,GAAG;YACVgB,eAAe,EAAEf,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBS,MAD1B;YAEVpB,WAAW,EAAEL,KAAK,CAACM,OAAN,CAAcU,IAAd,CAAmBS;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHR,cAAc,EAAE;UACZvB,UAAU,EAAE,QADA;UAEZgC,iBAAiB,EAAE1B,KAAK,CAACM,OAAN,CAAcC,MAAd,CAAqBoB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZV,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAEnB,KAAK,CAACoB,OAAN,CAAc,CAAd,CALO;UAMZC,eAAe,EAAErB,KAAK,CAACoB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHE,SAAS,EAAElC,YAAY,CAACyC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EArDR;AAuDH"}

package/build/module/Chip/index.js

@@ -1,2 +1,3 @@
-export { default } from './LegacyChip';
+export { default } from './Chip';
+export { chipSizes, chipStartElementVariants } from './ChipProps';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyChip';\nexport type { default as ChipProps } from './LegacyChipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}
+{"version":3,"names":["default","chipSizes","chipStartElementVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Chip';\nexport type { default as ChipProps } from './ChipProps';\nexport { chipSizes, chipStartElementVariants } from './ChipProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AAEA,SAASC,SAAT,EAAoBC,wBAApB,QAAoD,aAApD"}

package/build/module/Chip/useChipStyle.js

@@ -8,13 +8,11 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
 
     const fontStyleMap = {
       small: createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.caption1.medium,
+        selector: typography => typography.caption1.medium,
         color: theme.palette.text.strong
       }),
       large: createFontStyle(theme, {
-        // TODO: select typography.
-        // selector: (typography) => typography.body2.medium,
+        selector: typography => typography.body2.medium,
         color: theme.palette.text.strong
       })
     };
@@ -35,9 +33,7 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
       backgroundColor: theme.palette.fill.weaker,
       borderRadius: theme.shape.radius.full,
       flexDirection: 'row',
-      height: 'fit-content',
-      overflow: 'hidden',
-      width: 'fit-content'
+      overflow: 'hidden'
     };
     const isLarge = size === 'large';
     const variantStyleMap = {

package/build/module/Chip/useChipStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","createFontStyle","useTheme","useChipStyle","size","startElementVariant","isEndElement","theme","fontStyleMap","small","color","palette","text","strong","large","endElementStyleMap","height","marginLeft","spacing","width","baseContainerStyle","alignItems","backgroundColor","fill","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","paddingRight","paddingVertical","startElement","marginRight","icon","justifyContent","image","default","paddingBottom","paddingHorizontal","paddingTop","endElement","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    endElement?: FountainUiStyle;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    isEndElement: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                // TODO: select typography.\n                // selector: (typography) => typography.caption1.medium,\n                color: theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                // TODO: select typography.\n                // selector: (typography) => typography.body2.medium,\n                color: theme.palette.text.strong,\n            }),\n        };\n\n        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {\n            small: {\n                height: 14,\n                marginLeft: theme.spacing(2),\n                width: 8.17,\n            },\n            large: {\n                height: 16,\n                marginLeft: theme.spacing(2.5),\n                width: 9,\n            },\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            height: 'fit-content',\n            overflow: 'hidden',\n            width: 'fit-content',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 24 : 22,\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                    width: isLarge ? 24 : 22,\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    alignItems: 'center',\n                    height: isLarge ? 22 : 20,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 22 : 20,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 34 : 30,\n                    marginRight: theme.spacing(1.5),\n                    width: isLarge ? 45 : 40,\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            endElement: endElementStyleMap[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n        };\n    }, [theme, size, startElementVariant]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAGA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;AAYA;AACA,eAAe,SAASC,YAAT,CACXC,IADW,EAEXC,mBAFW,EAGXC,YAHW,EAIF;EACT,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,OAAOF,OAAO,CAAY,MAAM;IAAA;;IAC5B,MAAMQ,YAAyC,GAAG;MAC9CC,KAAK,EAAER,eAAe,CAACM,KAAD,EAAQ;QAC1B;QACA;QACAG,KAAK,EAAEH,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC;MAHA,CAAR,CADwB;MAM9CC,KAAK,EAAEb,eAAe,CAACM,KAAD,EAAQ;QAC1B;QACA;QACAG,KAAK,EAAEH,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC;MAHA,CAAR;IANwB,CAAlD;IAaA,MAAME,kBAAqD,GAAG;MAC1DN,KAAK,EAAE;QACHO,MAAM,EAAE,EADL;QAEHC,UAAU,EAAEV,KAAK,CAACW,OAAN,CAAc,CAAd,CAFT;QAGHC,KAAK,EAAE;MAHJ,CADmD;MAM1DL,KAAK,EAAE;QACHE,MAAM,EAAE,EADL;QAEHC,UAAU,EAAEV,KAAK,CAACW,OAAN,CAAc,GAAd,CAFT;QAGHC,KAAK,EAAE;MAHJ;IANmD,CAA9D;IAaA,MAAMC,kBAAmC,GAAG;MACxCC,UAAU,EAAE,QAD4B;MAExCC,eAAe,EAAEf,KAAK,CAACI,OAAN,CAAcY,IAAd,CAAmBC,MAFI;MAGxCC,YAAY,EAAElB,KAAK,CAACmB,KAAN,CAAYC,MAAZ,CAAmBC,IAHO;MAIxCC,aAAa,EAAE,KAJyB;MAKxCb,MAAM,EAAE,aALgC;MAMxCc,QAAQ,EAAE,QAN8B;MAOxCX,KAAK,EAAE;IAPiC,CAA5C;IAUA,MAAMY,OAAO,GAAG3B,IAAI,KAAK,OAAzB;IAEA,MAAM4B,eAAgC,GAAG;MACrCC,MAAM,EAAE;QACJC,SAAS,EAAE;UACPC,WAAW,EAAE5B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,IAA9B,CADN;UAEPK,YAAY,EAAE7B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,CAA9B,CAFP;UAGPM,eAAe,EAAE9B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,IAAH,GAAU,CAA/B;QAHV,CADP;QAMJO,YAAY,EAAE;UACVb,YAAY,EAAElB,KAAK,CAACmB,KAAN,CAAYC,MAAZ,CAAmBC,IADvB;UAEVZ,MAAM,EAAEe,OAAO,GAAG,EAAH,GAAQ,EAFb;UAGVQ,WAAW,EAAEhC,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,IAA9B,CAHH;UAIVZ,KAAK,EAAEY,OAAO,GAAG,EAAH,GAAQ;QAJZ;MANV,CAD6B;MAcrCS,IAAI,EAAE;QACFN,SAAS,EAAE;UACPC,WAAW,EAAE5B,KAAK,CAACW,OAAN,CAAc,GAAd,CADN;UAEPkB,YAAY,EAAE7B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,CAA9B,CAFP;UAGPM,eAAe,EAAE9B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,IAA9B;QAHV,CADT;QAMFO,YAAY,EAAE;UACVjB,UAAU,EAAE,QADF;UAEVL,MAAM,EAAEe,OAAO,GAAG,EAAH,GAAQ,EAFb;UAGVU,cAAc,EAAE,QAHN;UAIVF,WAAW,EAAEhC,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,CAAH,GAAO,IAA5B,CAJH;UAKVZ,KAAK,EAAEY,OAAO,GAAG,EAAH,GAAQ;QALZ;MANZ,CAd+B;MA4BrCW,KAAK,EAAE;QACHR,SAAS,EAAE;UACPb,UAAU,EAAE,QADL;UAEPe,YAAY,EAAE7B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,CAA9B;QAFP,CADR;QAKHO,YAAY,EAAE;UACVb,YAAY,EAAElB,KAAK,CAACmB,KAAN,CAAYC,MAAZ,CAAmBC,IADvB;UAEVZ,MAAM,EAAEe,OAAO,GAAG,EAAH,GAAQ,EAFb;UAGVQ,WAAW,EAAEhC,KAAK,CAACW,OAAN,CAAc,GAAd,CAHH;UAIVC,KAAK,EAAEY,OAAO,GAAG,EAAH,GAAQ;QAJZ;MALX,CA5B8B;MAwCrCY,OAAO,EAAE;QACLT,SAAS,EAAE;UACPU,aAAa,EAAErC,KAAK,CAACW,OAAN,CAAc,IAAd,CADR;UAEP2B,iBAAiB,EAAEtC,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,CAA9B,CAFZ;UAGPe,UAAU,EAAEvC,KAAK,CAACW,OAAN,CAAc,GAAd;QAHL;MADN;IAxC4B,CAAzC;IAiDA,OAAO;MACHgB,SAAS,EAAE,EACP,GAAGd,kBADI;QAEP,6BAAGY,eAAe,CAAC3B,mBAAD,CAAlB,0DAAG,sBAAsC6B,SAAzC,CAFO;QAGP,IAAI5B,YAAY,GAAG;UAAE8B,YAAY,EAAE7B,KAAK,CAACW,OAAN,CAAca,OAAO,GAAG,GAAH,GAAS,IAA9B;QAAhB,CAAH,GAA2D,EAA3E;MAHO,CADR;MAMHgB,UAAU,EAAEhC,kBAAkB,CAACX,IAAD,CAN3B;MAOH4C,KAAK,EAAExC,YAAY,CAACJ,IAAD,CAPhB;MAQHkC,YAAY,4BAAEN,eAAe,CAAC3B,mBAAD,CAAjB,2DAAE,uBAAsCiC;IARjD,CAAP;EAUH,CAlGa,EAkGX,CAAC/B,KAAD,EAAQH,IAAR,EAAcC,mBAAd,CAlGW,CAAd;AAmGH"}
+{"version":3,"names":["useMemo","createFontStyle","useTheme","useChipStyle","size","startElementVariant","isEndElement","theme","fontStyleMap","small","selector","typography","caption1","medium","color","palette","text","strong","large","body2","endElementStyleMap","height","marginLeft","spacing","width","baseContainerStyle","alignItems","backgroundColor","fill","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","paddingRight","paddingVertical","startElement","marginRight","icon","justifyContent","image","default","paddingBottom","paddingHorizontal","paddingTop","endElement","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    endElement?: FountainUiStyle;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    isEndElement: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: theme.palette.text.strong,\n            }),\n        };\n\n        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {\n            small: {\n                height: 14,\n                marginLeft: theme.spacing(2),\n                width: 8.17,\n            },\n            large: {\n                height: 16,\n                marginLeft: theme.spacing(2.5),\n                width: 9,\n            },\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 24 : 22,\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                    width: isLarge ? 24 : 22,\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    alignItems: 'center',\n                    height: isLarge ? 22 : 20,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 22 : 20,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 34 : 30,\n                    marginRight: theme.spacing(1.5),\n                    width: isLarge ? 45 : 40,\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            endElement: endElementStyleMap[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n        };\n    }, [theme, size, startElementVariant]);\n}\n"],"mappings":"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"}

package/build/module/Dialog/Dialog.js

@@ -1,13 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { Children, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { css } from '@fountain-ui/styles';
 import Column from '../Column';
-import DialogMedia from '../DialogMedia/DialogMedia';
 import Modal, { ANIMATION_TYPE } from '../Modal';
-import Paper from '../Paper';
-import { cloneElementSafely } from '../utils';
+import ShadowView from '../ShadowView';
+import { DialogProvider } from './DialogContext';
 import useDialogStyle from './useDialogStyle';
 const TOP_ELEMENT_OFFSET = 20;
 export default function Dialog(props) {
@@ -95,16 +94,6 @@ export default function Dialog(props) {
   const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
   const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
   const paperStyle = css([styles.paper, styleProp]);
-  const contents = Children.map(children, child => {
-    // @ts-ignore
-    if (child.type === DialogMedia) {
-      return cloneElementSafely(child, {
-        style: styles.mediaWrapper
-      });
-    }
-
-    return child;
-  });
   return /*#__PURE__*/React.createElement(Modal, _extends({
     animationStyle: styles.container,
     closeAnimation: closeAnimation,
@@ -116,16 +105,19 @@ export default function Dialog(props) {
     offsetAnimation: offsetAnimation,
     visible: visible,
     style: styles.root
-  }, otherProps), /*#__PURE__*/React.createElement(React.Fragment, null, topElement ? /*#__PURE__*/React.createElement(Column, {
+  }, otherProps), /*#__PURE__*/React.createElement(DialogProvider, {
+    value: {
+      size
+    }
+  }, topElement ? /*#__PURE__*/React.createElement(Column, {
     style: fullScreen ? undefined : styles.topElementContainer
   }, /*#__PURE__*/React.createElement(Column, {
     style: styles.topElementContent,
     onLayout: handleTopElementLayout
-  }, topElement)) : null, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 6,
-    square: fullScreen,
+  }, topElement)) : null, /*#__PURE__*/React.createElement(ShadowView, {
+    variant: 600,
     style: paperStyle
-  }, contents)));
+  }, children)));
 }
 ;
 //# sourceMappingURL=Dialog.js.map

package/build/module/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","useMemo","useState","useWindowDimensions","css","Column","DialogMedia","Modal","ANIMATION_TYPE","Paper","cloneElementSafely","useDialogStyle","TOP_ELEMENT_OFFSET","Dialog","props","animationType","SLIDE","children","fullScreen","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","contents","map","child","mediaWrapper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { Children, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport DialogMedia from '../DialogMedia/DialogMedia';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { cloneElementSafely, FalsyReactElement } from '../utils';\nimport type DialogProps from './DialogProps';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size, fullScreen);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    const contents = Children.map(children, (child) => {\n        // @ts-ignore\n        if (child.type === DialogMedia) {\n            return cloneElementSafely(child as FalsyReactElement, { style: styles.mediaWrapper });\n        }\n        return child;\n    });\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={paperStyle}\n                >\n                    {contents}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_OFFSET","Dialog","props","animationType","SLIDE","children","fullScreen","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size, fullScreen);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <DialogProvider value={{ size }}>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <ShadowView\n                    variant={600}\n                    style={paperStyle}\n                >\n                    {children}\n                </ShadowView>\n            </DialogProvider>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/module/Dialog/DialogContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const DialogContext = /*#__PURE__*/createContext({
+  size: 'medium'
+});
+export const DialogProvider = DialogContext.Provider;
+export const useDialogContext = () => useContext(DialogContext);
+//# sourceMappingURL=DialogContext.js.map

package/build/module/Dialog/DialogContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","DialogContext","size","DialogProvider","Provider","useDialogContext"],"sources":["DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { DialogSize } from './DialogProps';\n\nexport type Context = {\n    size: DialogSize;\n};\n\nconst DialogContext = createContext<Context>({\n    size: 'medium',\n});\n\nexport const DialogProvider = DialogContext.Provider;\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAOA,MAAMC,aAAa,gBAAGF,aAAa,CAAU;EACzCG,IAAI,EAAE;AADmC,CAAV,CAAnC;AAIA,OAAO,MAAMC,cAAc,GAAGF,aAAa,CAACG,QAArC;AAEP,OAAO,MAAMC,gBAAgB,GAAG,MAAML,UAAU,CAACC,aAAD,CAAzC"}