@fountain-ui/core 3.0.0-alpha.6 → 3.0.0-alpha.7

package/build/commonjs/Button/Button.js

@@ -95,6 +95,7 @@ function Button(props) {
     color: colorProp = 'primary',
     disabled: disabledProp = false,
     disableMinWidth = false,
+    disablePadding = false,
     endIcon: endIconProp,
     fullWidth = false,
     href,
@@ -124,6 +125,9 @@ function Button(props) {
   const endIcon = (0, _utils.cloneElementSafely)(endIconProp, iconProps);
   const buttonBaseStyle = (0, _styles2.css)([styles.root, containerStyle, styles[size], fullWidth ? styles.fullWidth : undefined, disableMinWidth ? {
     minWidth: 0
+  } : undefined, disablePadding ? {
+    paddingHorizontal: 0,
+    paddingVertical: 0
   } : undefined, styleProp]);
   const fontStyle = (0, _styles2.createFontStyle)(theme, {
     selector: _ => fontStyleMap[size],

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","fontStyleMap","typographyOf","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","useVariantStyleMap","iconProps","fill","opacity","cloneElementSafely","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } 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        opacity: isLoading ? 0 : 1,\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 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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"}
+{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","fontStyleMap","typographyOf","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","useVariantStyleMap","iconProps","fill","opacity","cloneElementSafely","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } 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        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 = 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        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/commonjs/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":";;;;;;AAIO,MAAMA,YAAY,GAAG,CACxB,QADwB,EAExB,SAFwB,EAGxB,QAHwB,EAIxB,UAJwB,EAKxB,WALwB,EAMxB,WANwB,CAArB;;AAUA,MAAMC,WAAW,GAAG,CACvB,OADuB,EAEvB,QAFuB,EAGvB,OAHuB,CAApB;;AAOA,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":";;;;;;AAIO,MAAMA,YAAY,GAAG,CACxB,QADwB,EAExB,SAFwB,EAGxB,QAHwB,EAIxB,UAJwB,EAKxB,WALwB,EAMxB,WANwB,CAArB;;AAUA,MAAMC,WAAW,GAAG,CACvB,OADuB,EAEvB,QAFuB,EAGvB,OAHuB,CAApB;;AAOA,MAAMC,cAAc,GAAG,CAC1B,OAD0B,EAE1B,UAF0B,EAG1B,MAH0B,EAI1B,cAJ0B,EAK1B,iBAL0B,CAAvB"}

package/build/commonjs/Checkbox/Checkbox.js

@@ -35,6 +35,7 @@ function Checkbox(props) {
   } = props;
   const theme = (0, _styles.useTheme)();
   const {
+    checkboxContainerStyle,
     checkboxStyle,
     containerStyle,
     iconColor
@@ -56,12 +57,14 @@ function Checkbox(props) {
     onPress: handlePress,
     style: rootStyle
   }, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: checkboxContainerStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: checkboxStyle
   }, checked ? /*#__PURE__*/_react.default.createElement(_icons.CheckboxOn, {
     fill: iconColor,
     height: 7.5,
     width: 11
-  }) : null), children ? /*#__PURE__*/_react.default.createElement(_Row.default, {
+  }) : null)), children ? /*#__PURE__*/_react.default.createElement(_Row.default, {
     flexGrow: 1,
     flexShrink: 1
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {

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

@@ -1 +1 @@
-{"version":3,"names":["Checkbox","props","checked","children","disabled","onChange","style","styleProp","variant","otherProps","theme","useTheme","checkboxStyle","containerStyle","iconColor","useVariantStyleMap","rootStyle","css","undefined","fontStyle","createFontStyle","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        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={checkboxStyle}>\n                {checked ? (\n                    <CheckboxOnIcon\n                        fill={iconColor}\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;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,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,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IACFC,aADE;IAEFC,cAFE;IAGFC;EAHE,IAIF,IAAAC,2BAAA,EAAmBP,OAAnB,EAA4BN,OAA5B,CAJJ;EAMA,MAAMc,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBd,QAAQ,GAAGU,cAAH,GAAoBK,SADV,EAElBX,SAFkB,CAAJ,CAAlB;EAKA,MAAMY,SAAS,GAAG,IAAAC,uBAAA,EAAgBV,KAAhB,EAAuB;IACrCW,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCC,KAAK,EAAEf,KAAK,CAACgB,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAvB,CAAlB;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIxB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAEyB,WAFb;IAGI,KAAK,EAAEb;EAHX,GAIQP,UAJR,gBAMI,6BAAC,iBAAD;IAAM,KAAK,EAAEG;EAAb,GACKV,OAAO,gBACJ,6BAAC,iBAAD;IACI,IAAI,EAAEY,SADV;IAEI,MAAM,EAAE,GAFZ;IAGI,KAAK,EAAE;EAHX,EADI,GAMJ,IAPR,CANJ,EAgBKX,QAAQ,gBACL,6BAAC,YAAD;IACI,QAAQ,EAAE,CADd;IAEI,UAAU,EAAE;EAFhB,gBAII,6BAAC,iBAAD;IACI,QAAQ,EAAEA,QADd;IAEI,KAAK,EAAEgB;EAFX,EAJJ,CADK,GAUL,IA1BR,CADJ;AA8BH;;AAAA"}
+{"version":3,"names":["Checkbox","props","checked","children","disabled","onChange","style","styleProp","variant","otherProps","theme","useTheme","checkboxContainerStyle","checkboxStyle","containerStyle","iconColor","useVariantStyleMap","rootStyle","css","undefined","fontStyle","createFontStyle","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;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;;;;;AAEe,SAASA,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,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IACFC,sBADE;IAEFC,aAFE;IAGFC,cAHE;IAIFC;EAJE,IAKF,IAAAC,2BAAA,EAAmBR,OAAnB,EAA4BN,OAA5B,CALJ;EAOA,MAAMe,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBf,QAAQ,GAAGW,cAAH,GAAoBK,SADV,EAElBZ,SAFkB,CAAJ,CAAlB;EAKA,MAAMa,SAAS,GAAG,IAAAC,uBAAA,EAAgBX,KAAhB,EAAuB;IACrCY,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCC,KAAK,EAAEhB,KAAK,CAACiB,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAvB,CAAlB;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIzB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAE0B,WAFb;IAGI,KAAK,EAAEb;EAHX,GAIQR,UAJR,gBAMI,6BAAC,iBAAD;IAAM,KAAK,EAAEG;EAAb,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEC;EAAb,GACKX,OAAO,gBACJ,6BAAC,iBAAD;IACI,IAAI,EAAEa,SADV;IAEI,MAAM,EAAE,GAFZ;IAGI,KAAK,EAAE;EAHX,EADI,GAMJ,IAPR,CADJ,CANJ,EAkBKZ,QAAQ,gBACL,6BAAC,YAAD;IACI,QAAQ,EAAE,CADd;IAEI,UAAU,EAAE;EAFhB,gBAII,6BAAC,iBAAD;IACI,QAAQ,EAAEA,QADd;IAEI,KAAK,EAAEiB;EAFX,EAJJ,CADK,GAUL,IA5BR,CADJ;AAgCH;;AAAA"}

package/build/commonjs/Checkbox/useVariantStyleMap.js

@@ -25,6 +25,10 @@ function useVariantStyleMap(variant, checked) {
   switch (variant) {
     case 'square':
       return {
+        checkboxContainerStyle: {
+          alignSelf: 'flex-start',
+          paddingTop: 3
+        },
         checkboxStyle: (0, _styles2.css)([styles.checkbox, {
           borderColor: theme.palette.border.base,
           borderRadius: theme.shape.radius.xs,
@@ -36,7 +40,6 @@ function useVariantStyleMap(variant, checked) {
           } : {})
         }]),
         containerStyle: {
-          alignItems: 'center',
           flexDirection: 'row',
           gap: theme.spacing(3),
           paddingVertical: theme.spacing(2)

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

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","useTheme","checkboxStyle","css","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","paddingVertical","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","commonColors","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                    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;;AACA;;AACA;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;;AAce,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;;EAEA,QAAQH,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHI,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfb,MAAM,CAACG,QADQ,EAEf;UACIW,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAER,KAAK,CAACS,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAId,OAAO,GAAG;YACVe,eAAe,EAAEd,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHS,cAAc,EAAE;UACZtB,UAAU,EAAE,QADA;UAEZuB,aAAa,EAAE,KAFH;UAGZC,GAAG,EAAElB,KAAK,CAACmB,OAAN,CAAc,CAAd,CAHO;UAIZC,eAAe,EAAEpB,KAAK,CAACmB,OAAN,CAAc,CAAd;QAJL,CAdb;QAoBHE,SAAS,EAAErB,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBO;MApB3B,CAAP;;IAsBJ,KAAK,OAAL;MACI,OAAO;QACHpB,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfb,MAAM,CAACG,QADQ,EAEf;UACIW,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAER,KAAK,CAACS,KAAN,CAAYC,MAAZ,CAAmBa,IAFrC;UAGIX,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAId,OAAO,GAAG;YACVe,eAAe,EAAEd,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBS,MAD1B;YAEVpB,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcU,IAAd,CAAmBS;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHR,cAAc,EAAE;UACZtB,UAAU,EAAE,QADA;UAEZ+B,iBAAiB,EAAEzB,KAAK,CAACK,OAAN,CAAcC,MAAd,CAAqBoB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZV,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAElB,KAAK,CAACmB,OAAN,CAAc,CAAd,CALO;UAMZC,eAAe,EAAEpB,KAAK,CAACmB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHE,SAAS,EAAEO,oBAAA,CAAaC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EAlDR;AAoDH"}
+{"version":3,"names":["styles","StyleSheet","create","checkbox","alignItems","borderWidth","justifyContent","useVariantStyleMap","variant","checked","theme","useTheme","checkboxContainerStyle","alignSelf","paddingTop","checkboxStyle","css","borderColor","palette","border","base","borderRadius","shape","radius","xs","height","width","backgroundColor","fill","containerStyle","flexDirection","gap","spacing","paddingVertical","iconColor","baseAlt","full","accent","borderBottomColor","weak","borderBottomWidth","commonColors","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;;AACA;;AACA;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,QAAQ,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,WAAW,EAAE,CAFP;IAGNC,cAAc,EAAE;EAHV;AADmB,CAAlB,CAAf;;AAee,SAASC,kBAAT,CAA4BC,OAA5B,EAAsDC,OAAtD,EAAmG;EAC9G,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;;EAEA,QAAQH,OAAR;IACI,KAAK,QAAL;MACI,OAAO;QACHI,sBAAsB,EAAE;UACpBC,SAAS,EAAE,YADS;UAEpBC,UAAU,EAAE;QAFQ,CADrB;QAKHC,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfhB,MAAM,CAACG,QADQ,EAEf;UACIc,WAAW,EAAEP,KAAK,CAACQ,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBC,EAFrC;UAGIC,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIjB,OAAO,GAAG;YACVkB,eAAe,EAAEjB,KAAK,CAACQ,OAAN,CAAcU,IAAd,CAAmBR,IAD1B;YAEVH,WAAW,EAAEP,KAAK,CAACQ,OAAN,CAAcU,IAAd,CAAmBR;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CALZ;QAkBHS,cAAc,EAAE;UACZC,aAAa,EAAE,KADH;UAEZC,GAAG,EAAErB,KAAK,CAACsB,OAAN,CAAc,CAAd,CAFO;UAGZC,eAAe,EAAEvB,KAAK,CAACsB,OAAN,CAAc,CAAd;QAHL,CAlBb;QAuBHE,SAAS,EAAExB,KAAK,CAACQ,OAAN,CAAcU,IAAd,CAAmBO;MAvB3B,CAAP;;IAyBJ,KAAK,OAAL;MACI,OAAO;QACHpB,aAAa,EAAE,IAAAC,YAAA,EAAI,CACfhB,MAAM,CAACG,QADQ,EAEf;UACIc,WAAW,EAAEP,KAAK,CAACQ,OAAN,CAAcC,MAAd,CAAqBC,IADtC;UAEIC,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,MAAZ,CAAmBa,IAFrC;UAGIX,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIjB,OAAO,GAAG;YACVkB,eAAe,EAAEjB,KAAK,CAACQ,OAAN,CAAcU,IAAd,CAAmBS,MAD1B;YAEVpB,WAAW,EAAEP,KAAK,CAACQ,OAAN,CAAcU,IAAd,CAAmBS;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAJ,CADZ;QAcHR,cAAc,EAAE;UACZzB,UAAU,EAAE,QADA;UAEZkC,iBAAiB,EAAE5B,KAAK,CAACQ,OAAN,CAAcC,MAAd,CAAqBoB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZV,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAErB,KAAK,CAACsB,OAAN,CAAc,CAAd,CALO;UAMZC,eAAe,EAAEvB,KAAK,CAACsB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHE,SAAS,EAAEO,oBAAA,CAAaC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EArDR;AAuDH"}

package/build/commonjs/Pagination/NumberPagination.js

@@ -46,7 +46,7 @@ function NumberPagination(props) {
   const typography = (0, _styles.typographyOf)({
     fontSize: 9.5,
     lineHeight: 11.4,
-    fontFamily: 'Pretendard-SemiBold',
+    fontFamily: 'PretendardStd-SemiBold',
     letterSpacing: -0.19
   });
   const currentFontStyle = (0, _styles2.createFontStyle)(theme, {

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

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","commonColors","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","createFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'Pretendard-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text style={currentFontStyle}>\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEC,oBAAA,CAAaC,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEP,KAAK,CAACQ,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAEZ,oBAAA,CAAaC,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMuB,UAAU,GAAG,IAAAC,oBAAA,EAAa;IAC5BC,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,qBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAb,CAAnB;EAOA,MAAMC,gBAAgB,GAAG,IAAAC,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC5CgC,QAAQ,EAAGC,CAAD,IAAOT,UAD2B;IAE5CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoB8B;EAFiB,CAAvB,CAAzB;EAKA,MAAMC,cAAc,GAAG,IAAAL,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC1CgC,QAAQ,EAAGC,CAAD,IAAOT,UADyB;IAE1CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoBgC;EAFe,CAAvB,CAAvB;EAKA,oBACI,6BAAC,YAAD;IAAK,KAAK,EAAEd,MAAM,CAACrB;EAAnB,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE4B;EAAb,GACKT,WAAW,GAAG,CADnB,CADJ,eAKI,6BAAC,gBAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EALJ,eAUI,6BAAC,iBAAD;IAAM,KAAK,EAAEsB;EAAb,GACKd,OADL,CAVJ,CADJ;AAgBH"}
+{"version":3,"names":["useStyles","theme","useTheme","root","backgroundColor","commonColors","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","createFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text style={currentFontStyle}>\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,eAAe,EAAEC,oBAAA,CAAaC,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEP,KAAK,CAACQ,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEb,KAAK,CAACY,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAEZ,oBAAA,CAAaC,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGxB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAG,IAAAC,iBAAA,GAAd;EAEA,MAAMuB,UAAU,GAAG,IAAAC,oBAAA,EAAa;IAC5BC,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,wBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAb,CAAnB;EAOA,MAAMC,gBAAgB,GAAG,IAAAC,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC5CgC,QAAQ,EAAGC,CAAD,IAAOT,UAD2B;IAE5CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoB8B;EAFiB,CAAvB,CAAzB;EAKA,MAAMC,cAAc,GAAG,IAAAL,wBAAA,EAAgB/B,KAAhB,EAAuB;IAC1CgC,QAAQ,EAAGC,CAAD,IAAOT,UADyB;IAE1CU,KAAK,EAAE9B,oBAAA,CAAaC,MAAb,CAAoBgC;EAFe,CAAvB,CAAvB;EAKA,oBACI,6BAAC,YAAD;IAAK,KAAK,EAAEd,MAAM,CAACrB;EAAnB,gBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE4B;EAAb,GACKT,WAAW,GAAG,CADnB,CADJ,eAKI,6BAAC,gBAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EALJ,eAUI,6BAAC,iBAAD;IAAM,KAAK,EAAEsB;EAAb,GACKd,OADL,CAVJ,CADJ;AAgBH"}

package/build/commonjs/hooks/useContentContainerStyle.js

@@ -9,16 +9,14 @@ var _styles = require("@fountain-ui/styles");
 
 var _styles2 = require("../styles");
 
-function getMaxWidth(theme, breakpoint) {
+function getMaxWidth(theme, breakpoint, customMaxWidth) {
   switch (breakpoint) {
     case 'lg':
-      return theme.breakpoints.values['lg'];
-
     case 'md':
-      return theme.breakpoints.values['md'];
+      return customMaxWidth ?? theme.breakpoints.values[breakpoint];
 
     default:
-      return 'none';
+      return undefined;
   }
 }
 
@@ -34,16 +32,19 @@ function getPaddingHorizontal(theme, breakpoint) {
 
 function useContentContainerStyle(config) {
   const {
-    maxWidth,
+    maxWidth: customMaxWidth,
     styleProvider
   } = config;
   const theme = (0, _styles2.useTheme)();
   const currentBreakpoint = (0, _styles.useBreakpointByWidth)();
   const additionalStyle = styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider(theme);
+  const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);
+  const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);
+  const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;
   return (0, _styles2.css)([{
     alignSelf: 'center',
-    maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
-    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+    maxWidth: resolvedMaxWidth,
+    paddingHorizontal,
     width: '100%'
   }, additionalStyle]);
 }

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

@@ -1 +1 @@
-{"version":3,"names":["getMaxWidth","theme","breakpoint","breakpoints","values","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","useTheme","currentBreakpoint","useBreakpointByWidth","additionalStyle","css","alignSelf","paddingHorizontal","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { ViewStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n    maxWidth?: number;\n    styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'lg':\n            return theme.breakpoints.values['lg'];\n        case 'md':\n            return theme.breakpoints.values['md'];\n        default:\n            return 'none';\n    }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['paddingHorizontal'] {\n    switch (breakpoint) {\n        case 'sm':\n            return theme.spacing(6);\n        default:\n            return theme.spacing(4);\n    }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n    const {\n        maxWidth,\n        styleProvider,\n    } = config;\n\n    const theme = useTheme();\n\n    const currentBreakpoint = useBreakpointByWidth();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    return css([\n        {\n            alignSelf: 'center',\n            maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),\n            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),\n            width: '100%',\n        },\n        additionalStyle,\n    ]);\n};\n"],"mappings":";;;;;;;AAEA;;AACA;;AAUA,SAASA,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAAkF;EAC9E,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOH,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ;MACI,OAAO,MAAP;EANR;AAQH;;AAED,SAASC,oBAAT,CAA8BJ,KAA9B,EAA4CC,UAA5C,EAAoG;EAChG,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACK,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOL,KAAK,CAACK,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAEc,SAASC,wBAAT,CAAkCC,MAAlC,EAAmE;EAC9E,MAAM;IACFC,QADE;IAEFC;EAFE,IAGFF,MAHJ;EAKA,MAAMP,KAAK,GAAG,IAAAU,iBAAA,GAAd;EAEA,MAAMC,iBAAiB,GAAG,IAAAC,4BAAA,GAA1B;EAEA,MAAMC,eAAe,GAAGJ,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGT,KAAH,CAArC;EAEA,OAAO,IAAAc,YAAA,EAAI,CACP;IACIC,SAAS,EAAE,QADf;IAEIP,QAAQ,EAAEA,QAAQ,IAAIT,WAAW,CAACC,KAAD,EAAQW,iBAAR,CAFrC;IAGIK,iBAAiB,EAAEZ,oBAAoB,CAACJ,KAAD,EAAQW,iBAAR,CAH3C;IAIIM,KAAK,EAAE;EAJX,CADO,EAOPJ,eAPO,CAAJ,CAAP;AASH;;AAAA"}
+{"version":3,"names":["getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","useTheme","currentBreakpoint","useBreakpointByWidth","additionalStyle","paddingHorizontal","resolvedMaxWidth","css","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n    maxWidth?: number;\n    styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n    switch (breakpoint) {\n        case 'lg':\n        case 'md':\n            return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n        default:\n            return undefined;\n    }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n    switch (breakpoint) {\n        case 'sm':\n            return theme.spacing(6);\n        default:\n            return theme.spacing(4);\n    }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n    const {\n        maxWidth: customMaxWidth,\n        styleProvider,\n    } = config;\n\n    const theme = useTheme();\n\n    const currentBreakpoint = useBreakpointByWidth();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);\n    const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);\n\n    const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;\n\n    return css([\n        {\n            alignSelf: 'center',\n            maxWidth: resolvedMaxWidth,\n            paddingHorizontal,\n            width: '100%',\n        },\n        additionalStyle,\n    ]);\n};\n"],"mappings":";;;;;;;AACA;;AACA;;AAUA,SAASA,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAEc,SAASC,wBAAT,CAAkCC,MAAlC,EAAmE;EAC9E,MAAM;IACFC,QAAQ,EAAER,cADR;IAEFS;EAFE,IAGFF,MAHJ;EAKA,MAAMT,KAAK,GAAG,IAAAY,iBAAA,GAAd;EAEA,MAAMC,iBAAiB,GAAG,IAAAC,4BAAA,GAA1B;EAEA,MAAMC,eAAe,GAAGJ,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGX,KAAH,CAArC;EAEA,MAAMU,QAAQ,GAAGX,WAAW,CAACC,KAAD,EAAQa,iBAAR,EAA2BX,cAA3B,CAA5B;EACA,MAAMc,iBAAiB,GAAGV,oBAAoB,CAACN,KAAD,EAAQa,iBAAR,CAA9C;EAEA,MAAMI,gBAAgB,GAAG,OAAOP,QAAP,KAAoB,QAApB,GAA+BA,QAAQ,GAAGM,iBAAiB,GAAG,CAA9D,GAAkEX,SAA3F;EAEA,OAAO,IAAAa,YAAA,EAAI,CACP;IACIC,SAAS,EAAE,QADf;IAEIT,QAAQ,EAAEO,gBAFd;IAGID,iBAHJ;IAIII,KAAK,EAAE;EAJX,CADO,EAOPL,eAPO,CAAJ,CAAP;AASH;;AAAA"}

package/build/module/Button/Button.js

@@ -79,6 +79,7 @@ export default function Button(props) {
     color: colorProp = 'primary',
     disabled: disabledProp = false,
     disableMinWidth = false,
+    disablePadding = false,
     endIcon: endIconProp,
     fullWidth = false,
     href,
@@ -108,6 +109,9 @@ export default function Button(props) {
   const endIcon = cloneElementSafely(endIconProp, iconProps);
   const buttonBaseStyle = css([styles.root, containerStyle, styles[size], fullWidth ? styles.fullWidth : undefined, disableMinWidth ? {
     minWidth: 0
+  } : undefined, disablePadding ? {
+    paddingHorizontal: 0,
+    paddingVertical: 0
   } : undefined, styleProp]);
   const fontStyle = createFontStyle(theme, {
     selector: _ => fontStyleMap[size],

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

@@ -1 +1 @@
-{"version":3,"names":["React","Linking","Text","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","opacity","buttonBaseStyle","undefined","fontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } 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        opacity: isLoading ? 0 : 1,\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 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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"}
+{"version":3,"names":["React","Linking","Text","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","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 } 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        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 = 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        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.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/Checkbox/Checkbox.js

@@ -19,6 +19,7 @@ export default function Checkbox(props) {
   } = props;
   const theme = useTheme();
   const {
+    checkboxContainerStyle,
     checkboxStyle,
     containerStyle,
     iconColor
@@ -40,12 +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,
     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","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        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={checkboxStyle}>\n                {checked ? (\n                    <CheckboxOnIcon\n                        fill={iconColor}\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;IACrCO,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADN;IAErCC,KAAK,EAAEX,KAAK,CAACY,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;;EAKA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIpB,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAACH,OAAF,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEE,QADd;IAEI,OAAO,EAAEqB,WAFb;IAGI,KAAK,EAAEX;EAHX,GAIQL,UAJR,gBAMI,oBAAC,IAAD;IAAM,KAAK,EAAEE;EAAb,GACKT,OAAO,gBACJ,oBAAC,cAAD;IACI,IAAI,EAAEW,SADV;IAEI,MAAM,EAAE,GAFZ;IAGI,KAAK,EAAE;EAHX,EADI,GAMJ,IAPR,CANJ,EAgBKV,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,IA1BR,CADJ;AA8BH;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/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,7 +29,6 @@ export default function useVariantStyleMap(variant, checked) {
           } : {})
         }]),
         containerStyle: {
-          alignItems: 'center',
           flexDirection: 'row',
           gap: theme.spacing(3),
           paddingVertical: theme.spacing(2)

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","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    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                    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;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,CAHO;UAIZC,eAAe,EAAElB,KAAK,CAACiB,OAAN,CAAc,CAAd;QAJL,CAdb;QAoBHE,SAAS,EAAEnB,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBO;MApB3B,CAAP;;IAsBJ,KAAK,OAAL;MACI,OAAO;QACHnB,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,CAAmBa,IAFrC;UAGIX,MAAM,EAAE,EAHZ;UAIIC,KAAK,EAAE,EAJX;UAKI,IAAIZ,OAAO,GAAG;YACVa,eAAe,EAAEZ,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBS,MAD1B;YAEVpB,WAAW,EAAEF,KAAK,CAACG,OAAN,CAAcU,IAAd,CAAmBS;UAFtB,CAAH,GAGP,EAHJ;QALJ,CAFe,CAAD,CADf;QAcHR,cAAc,EAAE;UACZpB,UAAU,EAAE,QADA;UAEZ6B,iBAAiB,EAAEvB,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBoB,IAF5B;UAGZC,iBAAiB,EAAE,GAHP;UAIZV,aAAa,EAAE,aAJH;UAKZC,GAAG,EAAEhB,KAAK,CAACiB,OAAN,CAAc,CAAd,CALO;UAMZC,eAAe,EAAElB,KAAK,CAACiB,OAAN,CAAc,GAAd;QANL,CAdb;QAsBHE,SAAS,EAAE/B,YAAY,CAACsC,MAAb,CAAoBC;MAtB5B,CAAP;;IAwBJ;MACI,OAAO,EAAP;EAlDR;AAoDH"}
+{"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/Pagination/NumberPagination.js

@@ -32,7 +32,7 @@ export default function NumberPagination(props) {
   const typography = typographyOf({
     fontSize: 9.5,
     lineHeight: 11.4,
-    fontFamily: 'Pretendard-SemiBold',
+    fontFamily: 'PretendardStd-SemiBold',
     letterSpacing: -0.19
   });
   const currentFontStyle = createFontStyle(theme, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","commonColors","typographyOf","Divider","Row","createFontStyle","useTheme","useStyles","theme","root","backgroundColor","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'Pretendard-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text style={currentFontStyle}>\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,YAAT,EAAuBC,YAAvB,QAA2C,qBAA3C;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,eAAe,EAAET,YAAY,CAACU,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEL,KAAK,CAACM,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAET,KAAK,CAACU,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEX,KAAK,CAACU,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAErB,YAAY,CAACU,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBA,eAAe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGtB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMwB,UAAU,GAAG5B,YAAY,CAAC;IAC5B6B,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,qBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAD,CAA/B;EAOA,MAAMC,gBAAgB,GAAG9B,eAAe,CAACG,KAAD,EAAQ;IAC5C4B,QAAQ,EAAGC,CAAD,IAAOP,UAD2B;IAE5CQ,KAAK,EAAErC,YAAY,CAACU,MAAb,CAAoB4B;EAFiB,CAAR,CAAxC;EAKA,MAAMC,cAAc,GAAGnC,eAAe,CAACG,KAAD,EAAQ;IAC1C4B,QAAQ,EAAGC,CAAD,IAAOP,UADyB;IAE1CQ,KAAK,EAAErC,YAAY,CAACU,MAAb,CAAoB8B;EAFe,CAAR,CAAtC;EAKA,oBACI,oBAAC,GAAD;IAAK,KAAK,EAAEZ,MAAM,CAACpB;EAAnB,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAE0B;EAAb,GACKR,WAAW,GAAG,CADnB,CADJ,eAKI,oBAAC,OAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EALJ,eAUI,oBAAC,IAAD;IAAM,KAAK,EAAEoB;EAAb,GACKZ,OADL,CAVJ,CADJ;AAgBH"}
+{"version":3,"names":["React","Text","commonColors","typographyOf","Divider","Row","createFontStyle","useTheme","useStyles","theme","root","backgroundColor","static","weakOpacity","borderRadius","shape","radius","full","paddingHorizontal","spacing","paddingVertical","divider","alignSelf","borderColor","weakOpacityInverse","height","NumberPagination","props","currentPage","maxPage","styles","typography","fontSize","lineHeight","fontFamily","letterSpacing","currentFontStyle","selector","_","color","strongInverse","countFontStyle","baseOpacityInverse"],"sources":["NumberPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { commonColors, typographyOf } from '@fountain-ui/styles';\nimport Divider from '../Divider';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type PaginationProps from './PaginationProps';\n\ntype NumberPaginationStyles = NamedStylesStringUnion<'root' | 'divider'>;\n\nconst useStyles: UseStyles<NumberPaginationStyles> = function (): NumberPaginationStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            backgroundColor: commonColors.static.weakOpacity,\n            borderRadius: theme.shape.radius.full,\n            paddingHorizontal: theme.spacing(1.25),\n            paddingVertical: theme.spacing(0.5),\n        },\n        divider: {\n            alignSelf: 'center',\n            borderColor: commonColors.static.weakOpacityInverse,\n            height: 6,\n        },\n    };\n};\n\ninterface NumberPaginationProps {\n    currentPage: PaginationProps['page'];\n    maxPage: PaginationProps['count'];\n}\n\nexport default function NumberPagination(props: NumberPaginationProps) {\n    const {\n        currentPage,\n        maxPage,\n    } = props;\n\n    const styles = useStyles();\n\n    const theme = useTheme();\n\n    const typography = typographyOf({\n        fontSize: 9.5,\n        lineHeight: 11.4,\n        fontFamily: 'PretendardStd-SemiBold',\n        letterSpacing: -0.19,\n    });\n\n    const currentFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.strongInverse,\n    });\n\n    const countFontStyle = createFontStyle(theme, {\n        selector: (_) => typography,\n        color: commonColors.static.baseOpacityInverse,\n    });\n\n    return (\n        <Row style={styles.root}>\n            <Text style={currentFontStyle}>\n                {currentPage + 1}\n            </Text>\n\n            <Divider\n                style={styles.divider}\n                vertical={true}\n            />\n\n            <Text style={countFontStyle}>\n                {maxPage}\n            </Text>\n        </Row>\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,YAAT,EAAuBC,YAAvB,QAA2C,qBAA3C;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,QAA1B,QAA0C,WAA1C;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,eAAe,EAAET,YAAY,CAACU,MAAb,CAAoBC,WADnC;MAEFC,YAAY,EAAEL,KAAK,CAACM,KAAN,CAAYC,MAAZ,CAAmBC,IAF/B;MAGFC,iBAAiB,EAAET,KAAK,CAACU,OAAN,CAAc,IAAd,CAHjB;MAIFC,eAAe,EAAEX,KAAK,CAACU,OAAN,CAAc,GAAd;IAJf,CADH;IAOHE,OAAO,EAAE;MACLC,SAAS,EAAE,QADN;MAELC,WAAW,EAAErB,YAAY,CAACU,MAAb,CAAoBY,kBAF5B;MAGLC,MAAM,EAAE;IAHH;EAPN,CAAP;AAaH,CAhBD;;AAuBA,eAAe,SAASC,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,WADE;IAEFC;EAFE,IAGFF,KAHJ;EAKA,MAAMG,MAAM,GAAGtB,SAAS,EAAxB;EAEA,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMwB,UAAU,GAAG5B,YAAY,CAAC;IAC5B6B,QAAQ,EAAE,GADkB;IAE5BC,UAAU,EAAE,IAFgB;IAG5BC,UAAU,EAAE,wBAHgB;IAI5BC,aAAa,EAAE,CAAC;EAJY,CAAD,CAA/B;EAOA,MAAMC,gBAAgB,GAAG9B,eAAe,CAACG,KAAD,EAAQ;IAC5C4B,QAAQ,EAAGC,CAAD,IAAOP,UAD2B;IAE5CQ,KAAK,EAAErC,YAAY,CAACU,MAAb,CAAoB4B;EAFiB,CAAR,CAAxC;EAKA,MAAMC,cAAc,GAAGnC,eAAe,CAACG,KAAD,EAAQ;IAC1C4B,QAAQ,EAAGC,CAAD,IAAOP,UADyB;IAE1CQ,KAAK,EAAErC,YAAY,CAACU,MAAb,CAAoB8B;EAFe,CAAR,CAAtC;EAKA,oBACI,oBAAC,GAAD;IAAK,KAAK,EAAEZ,MAAM,CAACpB;EAAnB,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAE0B;EAAb,GACKR,WAAW,GAAG,CADnB,CADJ,eAKI,oBAAC,OAAD;IACI,KAAK,EAAEE,MAAM,CAACT,OADlB;IAEI,QAAQ,EAAE;EAFd,EALJ,eAUI,oBAAC,IAAD;IAAM,KAAK,EAAEoB;EAAb,GACKZ,OADL,CAVJ,CADJ;AAgBH"}

package/build/module/hooks/useContentContainerStyle.js

@@ -1,16 +1,14 @@
 import { useBreakpointByWidth } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 
-function getMaxWidth(theme, breakpoint) {
+function getMaxWidth(theme, breakpoint, customMaxWidth) {
   switch (breakpoint) {
     case 'lg':
-      return theme.breakpoints.values['lg'];
-
     case 'md':
-      return theme.breakpoints.values['md'];
+      return customMaxWidth ?? theme.breakpoints.values[breakpoint];
 
     default:
-      return 'none';
+      return undefined;
   }
 }
 
@@ -26,16 +24,19 @@ function getPaddingHorizontal(theme, breakpoint) {
 
 export default function useContentContainerStyle(config) {
   const {
-    maxWidth,
+    maxWidth: customMaxWidth,
     styleProvider
   } = config;
   const theme = useTheme();
   const currentBreakpoint = useBreakpointByWidth();
   const additionalStyle = styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider(theme);
+  const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);
+  const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);
+  const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;
   return css([{
     alignSelf: 'center',
-    maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
-    paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+    maxWidth: resolvedMaxWidth,
+    paddingHorizontal,
     width: '100%'
   }, additionalStyle]);
 }

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

@@ -1 +1 @@
-{"version":3,"names":["useBreakpointByWidth","css","useTheme","getMaxWidth","theme","breakpoint","breakpoints","values","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","currentBreakpoint","additionalStyle","alignSelf","paddingHorizontal","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { ViewStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n    maxWidth?: number;\n    styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {\n    switch (breakpoint) {\n        case 'lg':\n            return theme.breakpoints.values['lg'];\n        case 'md':\n            return theme.breakpoints.values['md'];\n        default:\n            return 'none';\n    }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['paddingHorizontal'] {\n    switch (breakpoint) {\n        case 'sm':\n            return theme.spacing(6);\n        default:\n            return theme.spacing(4);\n    }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n    const {\n        maxWidth,\n        styleProvider,\n    } = config;\n\n    const theme = useTheme();\n\n    const currentBreakpoint = useBreakpointByWidth();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    return css([\n        {\n            alignSelf: 'center',\n            maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),\n            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),\n            width: '100%',\n        },\n        additionalStyle,\n    ]);\n};\n"],"mappings":"AAEA,SAASA,oBAAT,QAAqC,qBAArC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAUA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAAkF;EAC9E,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOH,KAAK,CAACE,WAAN,CAAkBC,MAAlB,CAAyB,IAAzB,CAAP;;IACJ;MACI,OAAO,MAAP;EANR;AAQH;;AAED,SAASC,oBAAT,CAA8BJ,KAA9B,EAA4CC,UAA5C,EAAoG;EAChG,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACK,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOL,KAAK,CAACK,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAED,eAAe,SAASC,wBAAT,CAAkCC,MAAlC,EAAmE;EAC9E,MAAM;IACFC,QADE;IAEFC;EAFE,IAGFF,MAHJ;EAKA,MAAMP,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMY,iBAAiB,GAAGd,oBAAoB,EAA9C;EAEA,MAAMe,eAAe,GAAGF,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGT,KAAH,CAArC;EAEA,OAAOH,GAAG,CAAC,CACP;IACIe,SAAS,EAAE,QADf;IAEIJ,QAAQ,EAAEA,QAAQ,IAAIT,WAAW,CAACC,KAAD,EAAQU,iBAAR,CAFrC;IAGIG,iBAAiB,EAAET,oBAAoB,CAACJ,KAAD,EAAQU,iBAAR,CAH3C;IAIII,KAAK,EAAE;EAJX,CADO,EAOPH,eAPO,CAAD,CAAV;AASH;AAAA"}
+{"version":3,"names":["useBreakpointByWidth","css","useTheme","getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getPaddingHorizontal","spacing","useContentContainerStyle","config","maxWidth","styleProvider","currentBreakpoint","additionalStyle","paddingHorizontal","resolvedMaxWidth","alignSelf","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointByWidth } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n    maxWidth?: number;\n    styleProvider?: (theme: Theme) => FountainUiStyle;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n    switch (breakpoint) {\n        case 'lg':\n        case 'md':\n            return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n        default:\n            return undefined;\n    }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n    switch (breakpoint) {\n        case 'sm':\n            return theme.spacing(6);\n        default:\n            return theme.spacing(4);\n    }\n}\n\nexport default function useContentContainerStyle(config: Config): FountainUiStyle {\n    const {\n        maxWidth: customMaxWidth,\n        styleProvider,\n    } = config;\n\n    const theme = useTheme();\n\n    const currentBreakpoint = useBreakpointByWidth();\n\n    const additionalStyle = styleProvider?.(theme);\n\n    const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);\n    const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);\n\n    const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;\n\n    return css([\n        {\n            alignSelf: 'center',\n            maxWidth: resolvedMaxWidth,\n            paddingHorizontal,\n            width: '100%',\n        },\n        additionalStyle,\n    ]);\n};\n"],"mappings":"AACA,SAASA,oBAAT,QAAqC,qBAArC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAUA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,oBAAT,CAA8BN,KAA9B,EAA4CC,UAA5C,EAA4E;EACxE,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAED,eAAe,SAASC,wBAAT,CAAkCC,MAAlC,EAAmE;EAC9E,MAAM;IACFC,QAAQ,EAAER,cADR;IAEFS;EAFE,IAGFF,MAHJ;EAKA,MAAMT,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMc,iBAAiB,GAAGhB,oBAAoB,EAA9C;EAEA,MAAMiB,eAAe,GAAGF,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGX,KAAH,CAArC;EAEA,MAAMU,QAAQ,GAAGX,WAAW,CAACC,KAAD,EAAQY,iBAAR,EAA2BV,cAA3B,CAA5B;EACA,MAAMY,iBAAiB,GAAGR,oBAAoB,CAACN,KAAD,EAAQY,iBAAR,CAA9C;EAEA,MAAMG,gBAAgB,GAAG,OAAOL,QAAP,KAAoB,QAApB,GAA+BA,QAAQ,GAAGI,iBAAiB,GAAG,CAA9D,GAAkET,SAA3F;EAEA,OAAOR,GAAG,CAAC,CACP;IACImB,SAAS,EAAE,QADf;IAEIN,QAAQ,EAAEK,gBAFd;IAGID,iBAHJ;IAIIG,KAAK,EAAE;EAJX,CADO,EAOPJ,eAPO,CAAD,CAAV;AASH;AAAA"}

package/build/typescript/Button/ButtonProps.d.ts

@@ -22,6 +22,11 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
      * @default false
      */
     disableMinWidth?: boolean;
+    /**
+     * Determines whether padding should be applied.
+     * @default false
+     */
+    disablePadding?: boolean;
     /**
      * Element placed after the children.
      */

package/build/typescript/Checkbox/useVariantStyleMap.d.ts

@@ -1,6 +1,7 @@
 import { FountainUiStyle } from '@fountain-ui/styles';
 import type { CheckboxVariant } from './CheckboxProps';
 declare type useVariantStyleMapReturns = {
+    checkboxContainerStyle?: FountainUiStyle;
     checkboxStyle?: FountainUiStyle;
     containerStyle?: FountainUiStyle;
     iconColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.7",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "548815f22e2a9f858f3f95f442f885a0207f813e"
+  "gitHead": "5c2c59a7fa856f9be83761deb52fc0cbe233f57a"
 }

package/src/Button/Button.tsx

@@ -82,6 +82,7 @@ export default function Button(props: ButtonProps) {
         color: colorProp = 'primary' as ButtonColor,
         disabled: disabledProp = false,
         disableMinWidth = false,
+        disablePadding = false,
         endIcon: endIconProp,
         fullWidth = false,
         href,
@@ -122,6 +123,7 @@ export default function Button(props: ButtonProps) {
         styles[size],
         fullWidth ? styles.fullWidth : undefined,
         disableMinWidth ? { minWidth: 0 } : undefined,
+        disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,
         styleProp,
     ]);
 

package/src/Button/ButtonProps.ts

@@ -46,6 +46,12 @@ export default interface ButtonProps extends OverridableComponentProps<ButtonBas
      */
     disableMinWidth?: boolean;
 
+    /**
+     * Determines whether padding should be applied.
+     * @default false
+     */
+    disablePadding?: boolean;
+
     /**
      * Element placed after the children.
      */

package/src/Checkbox/Checkbox.tsx

@@ -22,6 +22,7 @@ export default function Checkbox(props: CheckboxProps) {
     const theme = useTheme();
 
     const {
+        checkboxContainerStyle,
         checkboxStyle,
         containerStyle,
         iconColor,
@@ -50,14 +51,16 @@ export default function Checkbox(props: CheckboxProps) {
             style={rootStyle}
             {...otherProps}
         >
-            <View style={checkboxStyle}>
-                {checked ? (
-                    <CheckboxOnIcon
-                        fill={iconColor}
-                        height={7.5}
-                        width={11}
-                    />
-                ) : null}
+            <View style={checkboxContainerStyle}>
+                <View style={checkboxStyle}>
+                    {checked ? (
+                        <CheckboxOnIcon
+                            fill={iconColor}
+                            height={7.5}
+                            width={11}
+                        />
+                    ) : null}
+                </View>
             </View>
 
             {children ? (

package/src/Checkbox/useVariantStyleMap.ts

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
 });
 
 type useVariantStyleMapReturns = {
+    checkboxContainerStyle?: FountainUiStyle;
     checkboxStyle?: FountainUiStyle;
     containerStyle?: FountainUiStyle;
     iconColor?: string;
@@ -23,6 +24,10 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
     switch (variant) {
         case 'square':
             return {
+                checkboxContainerStyle: {
+                    alignSelf: 'flex-start',
+                    paddingTop: 3,
+                },
                 checkboxStyle: css([
                     styles.checkbox,
                     {
@@ -37,7 +42,6 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                     },
                 ]),
                 containerStyle: {
-                    alignItems: 'center',
                     flexDirection: 'row',
                     gap: theme.spacing(3),
                     paddingVertical: theme.spacing(2),

package/src/Pagination/NumberPagination.tsx

@@ -45,7 +45,7 @@ export default function NumberPagination(props: NumberPaginationProps) {
     const typography = typographyOf({
         fontSize: 9.5,
         lineHeight: 11.4,
-        fontFamily: 'Pretendard-SemiBold',
+        fontFamily: 'PretendardStd-SemiBold',
         letterSpacing: -0.19,
     });
 

package/src/hooks/useContentContainerStyle.ts

@@ -1,4 +1,3 @@
-import type { ViewStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { useBreakpointByWidth } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
@@ -11,18 +10,17 @@ export interface Config {
     styleProvider?: (theme: Theme) => FountainUiStyle;
 }
 
-function getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {
+function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
     switch (breakpoint) {
         case 'lg':
-            return theme.breakpoints.values['lg'];
         case 'md':
-            return theme.breakpoints.values['md'];
+            return customMaxWidth ?? theme.breakpoints.values[breakpoint];
         default:
-            return 'none';
+            return undefined;
     }
 }
 
-function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['paddingHorizontal'] {
+function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
     switch (breakpoint) {
         case 'sm':
             return theme.spacing(6);
@@ -33,7 +31,7 @@ function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['
 
 export default function useContentContainerStyle(config: Config): FountainUiStyle {
     const {
-        maxWidth,
+        maxWidth: customMaxWidth,
         styleProvider,
     } = config;
 
@@ -43,11 +41,16 @@ export default function useContentContainerStyle(config: Config): FountainUiStyl
 
     const additionalStyle = styleProvider?.(theme);
 
+    const maxWidth = getMaxWidth(theme, currentBreakpoint, customMaxWidth);
+    const paddingHorizontal = getPaddingHorizontal(theme, currentBreakpoint);
+
+    const resolvedMaxWidth = typeof maxWidth === 'number' ? maxWidth + paddingHorizontal * 2 : undefined;
+
     return css([
         {
             alignSelf: 'center',
-            maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
-            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+            maxWidth: resolvedMaxWidth,
+            paddingHorizontal,
             width: '100%',
         },
         additionalStyle,