@fountain-ui/core 3.0.0-alpha.10 → 3.0.0-alpha.11

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

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

package/build/module/Dialog/DialogProps.js

@@ -1,2 +1,2 @@
-export const dialogSizes = ['small', 'medium', 'large'];
+export const dialogSizes = ['small', 'medium', 'large', 'full'];
 //# sourceMappingURL=DialogProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["dialogSizes"],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\n\nexport const dialogSizes = ['small', 'medium', 'large'] as const;\nexport type DialogSize = typeof dialogSizes[number];\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     * @default 'slide'\n     */\n    animationType?: ANIMATION_TYPE;\n\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * If `true`, the dialog is full-screen.\n     * @default false\n     */\n    fullScreen?: boolean;\n\n    /**\n     * Determines the minWidth of the Dialog.\n     * @default 'medium'\n     */\n    size?: DialogSize;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,CAApB"}
+{"version":3,"names":["dialogSizes"],"sources":["DialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\n\nexport const dialogSizes = ['small', 'medium', 'large', 'full'] as const;\nexport type DialogSize = typeof dialogSizes[number];\n\nexport default interface DialogProps extends OverridableComponentProps<ModalProps, {\n    /**\n     * Type of animation used when the dialog opens and closes.\n     * @default 'slide'\n     */\n    animationType?: ANIMATION_TYPE;\n\n    /**\n     * Dialog children, usually the included sub-components.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Determines the minWidth of the Dialog.\n     * @default 'medium'\n     */\n    size?: DialogSize;\n\n    /**\n     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,WAAW,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,MAA7B,CAApB"}

package/build/module/Dialog/useDialogSectionStyle.js

@@ -13,15 +13,15 @@ export default function useDialogSectionStyle() {
   return useMemo(() => {
     const sizePaddingHorizontalMap = {
       small: {
-        paddingHorizontal: theme.spacing(6)
+        paddingHorizontal: 24
       },
       medium: {
-        // TODO: need to refactor breakpoints.
-        paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6)
+        paddingHorizontal: windowWidth >= 448 ? 32 : 24
       },
       large: {
-        paddingHorizontal: theme.spacing(8)
-      }
+        paddingHorizontal: 32
+      },
+      full: {}
     };
     return sizePaddingHorizontalMap[size];
   }, [size, theme, windowWidth]);

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogContext","useDialogSectionStyle","size","width","windowWidth","theme","sizePaddingHorizontalMap","small","paddingHorizontal","spacing","medium","large"],"sources":["useDialogSectionStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useDialogContext } from './DialogContext';\nimport type { DialogSize } from './DialogProps';\n\nexport default function useDialogSectionStyle() {\n    const { size } = useDialogContext();\n\n    const { width: windowWidth } = useWindowDimensions();\n\n    const theme = useTheme();\n\n    return useMemo<FountainUiStyle>(() => {\n        const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                paddingHorizontal: theme.spacing(6),\n            },\n            medium: {\n                // TODO: need to refactor breakpoints.\n                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),\n            },\n            large: {\n                paddingHorizontal: theme.spacing(8),\n            },\n        };\n\n        return sizePaddingHorizontalMap[size];\n    }, [size, theme, windowWidth]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,gBAAT,QAAiC,iBAAjC;AAGA,eAAe,SAASC,qBAAT,GAAiC;EAC5C,MAAM;IAAEC;EAAF,IAAWF,gBAAgB,EAAjC;EAEA,MAAM;IAAEG,KAAK,EAAEC;EAAT,IAAyBN,mBAAmB,EAAlD;EAEA,MAAMO,KAAK,GAAGN,QAAQ,EAAtB;EAEA,OAAOF,OAAO,CAAkB,MAAM;IAClC,MAAMS,wBAA6D,GAAG;MAClEC,KAAK,EAAE;QACHC,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;MADhB,CAD2D;MAIlEC,MAAM,EAAE;QACJ;QACAF,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAcL,WAAW,IAAI,GAAf,GAAqB,CAArB,GAAyB,CAAvC;MAFf,CAJ0D;MAQlEO,KAAK,EAAE;QACHH,iBAAiB,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;MADhB;IAR2D,CAAtE;IAaA,OAAOH,wBAAwB,CAACJ,IAAD,CAA/B;EACH,CAfa,EAeX,CAACA,IAAD,EAAOG,KAAP,EAAcD,WAAd,CAfW,CAAd;AAgBH"}
+{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogContext","useDialogSectionStyle","size","width","windowWidth","theme","sizePaddingHorizontalMap","small","paddingHorizontal","medium","large","full"],"sources":["useDialogSectionStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { useDialogContext } from './DialogContext';\nimport type { DialogSize } from './DialogProps';\n\nexport default function useDialogSectionStyle() {\n    const { size } = useDialogContext();\n\n    const { width: windowWidth } = useWindowDimensions();\n\n    const theme = useTheme();\n\n    return useMemo<FountainUiStyle>(() => {\n        const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                paddingHorizontal: 24,\n            },\n            medium: {\n                paddingHorizontal: windowWidth >= 448 ? 32 : 24,\n            },\n            large: {\n                paddingHorizontal: 32,\n            },\n            full: {},\n        };\n\n        return sizePaddingHorizontalMap[size];\n    }, [size, theme, windowWidth]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,gBAAT,QAAiC,iBAAjC;AAGA,eAAe,SAASC,qBAAT,GAAiC;EAC5C,MAAM;IAAEC;EAAF,IAAWF,gBAAgB,EAAjC;EAEA,MAAM;IAAEG,KAAK,EAAEC;EAAT,IAAyBN,mBAAmB,EAAlD;EAEA,MAAMO,KAAK,GAAGN,QAAQ,EAAtB;EAEA,OAAOF,OAAO,CAAkB,MAAM;IAClC,MAAMS,wBAA6D,GAAG;MAClEC,KAAK,EAAE;QACHC,iBAAiB,EAAE;MADhB,CAD2D;MAIlEC,MAAM,EAAE;QACJD,iBAAiB,EAAEJ,WAAW,IAAI,GAAf,GAAqB,EAArB,GAA0B;MADzC,CAJ0D;MAOlEM,KAAK,EAAE;QACHF,iBAAiB,EAAE;MADhB,CAP2D;MAUlEG,IAAI,EAAE;IAV4D,CAAtE;IAaA,OAAOL,wBAAwB,CAACJ,IAAD,CAA/B;EACH,CAfa,EAeX,CAACA,IAAD,EAAOG,KAAP,EAAcD,WAAd,CAfW,CAAd;AAgBH"}

package/build/module/Dialog/useDialogStyle.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useTheme } from '../styles';
-export default function useDialogStyle(size, fullScreen) {
+export default function useDialogStyle(size) {
   const theme = useTheme();
   const {
     height: windowHeight,
@@ -21,28 +21,29 @@ export default function useDialogStyle(size, fullScreen) {
         maxWidth: 512,
         minHeight: 360,
         width: 512
-      }
+      },
+      full: {}
     };
-    const containerPaddingVertical = theme.spacing(6);
+    const containerPaddingVertical = 24;
     const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
     const dialogMaxWidth = (_sizeStyleMap$size = sizeStyleMap[size]) === null || _sizeStyleMap$size === void 0 ? void 0 : _sizeStyleMap$size.maxWidth;
+    const isFullScreen = size === 'full';
     return {
       root: {
         alignItems: 'center',
         justifyContent: 'center',
         zIndex: theme.zIndex.dialog
       },
-      container: fullScreen ? {
+      container: isFullScreen ? {
         height: '100%',
         width: '100%'
       } : {
         alignItems: 'center',
-        // TODO: need to refactor breakpoints.
-        paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+        paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,
         paddingVertical: containerPaddingVertical,
         width: '100%'
       },
-      paper: fullScreen ? {
+      paper: isFullScreen ? {
         backgroundColor: theme.palette.surface.base,
         height: '100%',
         width: '100%'
@@ -64,6 +65,6 @@ export default function useDialogStyle(size, fullScreen) {
         width: '100%'
       }
     };
-  }, [theme, windowHeight, windowWidth, size, fullScreen]);
+  }, [theme, windowHeight, windowWidth, size]);
 }
 //# sourceMappingURL=useDialogStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogStyle","size","fullScreen","theme","height","windowHeight","width","windowWidth","sizeStyleMap","small","maxWidth","medium","large","minHeight","containerPaddingVertical","spacing","dialogMaxHeight","dialogMaxWidth","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position","bottom"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles {\n    const theme = useTheme();\n\n    const {\n        height: windowHeight,\n        width: windowWidth,\n    } = useWindowDimensions();\n\n    return useMemo(() => {\n        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                maxWidth: 260,\n            },\n            medium: {\n                maxWidth: 400,\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                width: 512,\n            },\n        };\n\n        const containerPaddingVertical = theme.spacing(6);\n        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n        const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n        return {\n            root: {\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: theme.zIndex.dialog,\n            },\n            container: fullScreen ? {\n                height: '100%',\n                width: '100%',\n            } : {\n                alignItems: 'center',\n                // TODO: need to refactor breakpoints.\n                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),\n                paddingVertical: containerPaddingVertical,\n                width: '100%',\n            },\n            paper: fullScreen ? {\n                backgroundColor: theme.palette.surface.base,\n                height: '100%',\n                width: '100%',\n            } : {\n                backgroundColor: theme.palette.surface.base,\n                borderRadius: theme.shape.radius.xl,\n                maxHeight: dialogMaxHeight,\n                overflow: 'hidden',\n                width: '100%',\n                ...sizeStyleMap[size],\n            },\n            topElementContainer: {\n                maxWidth: dialogMaxWidth,\n                width: '100%',\n            },\n            topElementContent: {\n                position: 'absolute',\n                bottom: 0,\n                width: '100%',\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size, fullScreen]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAYA,eAAe,SAASC,cAAT,CAAwBC,IAAxB,EAA0CC,UAA1C,EAA6E;EACxF,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAM;IACFK,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGFT,mBAAmB,EAHvB;EAKA,OAAOD,OAAO,CAAC,MAAM;IAAA;;IACjB,MAAMW,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHP,KAAK,EAAE;MAHJ;IAP+C,CAA1D;IAcA,MAAMQ,wBAAwB,GAAGX,KAAK,CAACY,OAAN,CAAc,CAAd,CAAjC;IACA,MAAMC,eAAe,GAAGX,YAAY,GAAGS,wBAAwB,GAAG,CAAlE;IACA,MAAMG,cAAc,yBAAGT,YAAY,CAACP,IAAD,CAAf,uDAAG,mBAAoBS,QAA3C;IAEA,OAAO;MACHQ,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAElB,KAAK,CAACkB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAErB,UAAU,GAAG;QACpBE,MAAM,EAAE,MADY;QAEpBE,KAAK,EAAE;MAFa,CAAH,GAGjB;QACAa,UAAU,EAAE,QADZ;QAEA;QACAK,iBAAiB,EAAErB,KAAK,CAACY,OAAN,CAAcR,WAAW,GAAG,GAAd,GAAoB,CAApB,GAAwB,CAAtC,CAHnB;QAIAkB,eAAe,EAAEX,wBAJjB;QAKAR,KAAK,EAAE;MALP,CATD;MAgBHoB,KAAK,EAAExB,UAAU,GAAG;QAChByB,eAAe,EAAExB,KAAK,CAACyB,OAAN,CAAcC,OAAd,CAAsBC,IADvB;QAEhB1B,MAAM,EAAE,MAFQ;QAGhBE,KAAK,EAAE;MAHS,CAAH,GAIb;QACAqB,eAAe,EAAExB,KAAK,CAACyB,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAE5B,KAAK,CAAC6B,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEnB,eAHX;QAIAoB,QAAQ,EAAE,QAJV;QAKA9B,KAAK,EAAE,MALP;QAMA,GAAGE,YAAY,CAACP,IAAD;MANf,CApBD;MA4BHoC,mBAAmB,EAAE;QACjB3B,QAAQ,EAAEO,cADO;QAEjBX,KAAK,EAAE;MAFU,CA5BlB;MAgCHgC,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfC,MAAM,EAAE,CAFO;QAGflC,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CAzDa,EAyDX,CAACH,KAAD,EAAQE,YAAR,EAAsBE,WAAtB,EAAmCN,IAAnC,EAAyCC,UAAzC,CAzDW,CAAd;AA0DH"}
+{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogStyle","size","theme","height","windowHeight","width","windowWidth","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position","bottom"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize): DialogStyles {\n    const theme = useTheme();\n\n    const {\n        height: windowHeight,\n        width: windowWidth,\n    } = useWindowDimensions();\n\n    return useMemo(() => {\n        const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n            small: {\n                maxWidth: 260,\n            },\n            medium: {\n                maxWidth: 400,\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                width: 512,\n            },\n            full: {},\n        };\n\n        const containerPaddingVertical = 24;\n        const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n        const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n        const isFullScreen = size === 'full';\n\n        return {\n            root: {\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: theme.zIndex.dialog,\n            },\n            container: isFullScreen ? {\n                height: '100%',\n                width: '100%',\n            } : {\n                alignItems: 'center',\n                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,\n                paddingVertical: containerPaddingVertical,\n                width: '100%',\n            },\n            paper: isFullScreen ? {\n                backgroundColor: theme.palette.surface.base,\n                height: '100%',\n                width: '100%',\n            } : {\n                backgroundColor: theme.palette.surface.base,\n                borderRadius: theme.shape.radius.xl,\n                maxHeight: dialogMaxHeight,\n                overflow: 'hidden',\n                width: '100%',\n                ...sizeStyleMap[size],\n            },\n            topElementContainer: {\n                maxWidth: dialogMaxWidth,\n                width: '100%',\n            },\n            topElementContent: {\n                position: 'absolute',\n                bottom: 0,\n                width: '100%',\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAYA,eAAe,SAASC,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAM;IACFI,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGFR,mBAAmB,EAHvB;EAKA,OAAOD,OAAO,CAAC,MAAM;IAAA;;IACjB,MAAMU,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHP,KAAK,EAAE;MAHJ,CAP+C;MAYtDQ,IAAI,EAAE;IAZgD,CAA1D;IAeA,MAAMC,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGX,YAAY,GAAGU,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGT,YAAY,CAACN,IAAD,CAAf,uDAAG,mBAAoBQ,QAA3C;IAEA,MAAMQ,YAAY,GAAGhB,IAAI,KAAK,MAA9B;IAEA,OAAO;MACHiB,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAEnB,KAAK,CAACmB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBd,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAc,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAElB,WAAW,GAAGJ,KAAK,CAACuB,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAT,KAAK,EAAE;MAJP,CATD;MAeHwB,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAE5B,KAAK,CAAC6B,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElB9B,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE;MAHW,CAAH,GAIf;QACAyB,eAAe,EAAE5B,KAAK,CAAC6B,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAEhC,KAAK,CAACiC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKAlC,KAAK,EAAE,MALP;QAMA,GAAGE,YAAY,CAACN,IAAD;MANf,CAnBD;MA2BHuC,mBAAmB,EAAE;QACjB/B,QAAQ,EAAEO,cADO;QAEjBX,KAAK,EAAE;MAFU,CA3BlB;MA+BHoC,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfC,MAAM,EAAE,CAFO;QAGftC,KAAK,EAAE;MAHQ;IA/BhB,CAAP;EAqCH,CA3Da,EA2DX,CAACH,KAAD,EAAQE,YAAR,EAAsBE,WAAtB,EAAmCL,IAAnC,CA3DW,CAAd;AA4DH"}

package/build/module/DialogTitle/BackButton.js

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../IconButton';
+import { ChevronLeft } from '../internal';
+import { css } from '@fountain-ui/styles';
+const styles = StyleSheet.create({
+  root: {
+    height: 40,
+    left: 20,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+export default function BackButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = css([styles.root, styleProp]);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/React.createElement(ChevronLeft, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=BackButton.js.map

package/build/module/DialogTitle/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","IconButton","ChevronLeft","css","styles","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport type { IconButtonProps } from '../IconButton';\nimport IconButton from '../IconButton';\nimport { ChevronLeft } from '../internal';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 20,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\ninterface BackButtonProps extends Omit<IconButtonProps, 'children'> {}\n\nexport default function BackButton(props: BackButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <ChevronLeft\n                color={'strong'}\n                size={'large'}\n            />\n        </IconButton>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,WAAT,QAA4B,aAA5B;AACA,SAASC,GAAT,QAAoB,qBAApB;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,EAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;AAcA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAGhB,GAAG,CAAC,CAClBC,MAAM,CAACE,IADW,EAElBW,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,UAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,oBAAC,WAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}

package/build/module/DialogTitle/CloseButton.js

@@ -0,0 +1,30 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../IconButton';
+import { Close } from '../internal';
+import { css } from '@fountain-ui/styles';
+const styles = StyleSheet.create({
+  root: {
+    height: 40,
+    left: 20,
+    padding: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+export default function CloseButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = css([styles.root, styleProp]);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/React.createElement(Close, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=CloseButton.js.map

package/build/module/DialogTitle/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","IconButton","Close","css","styles","create","root","height","left","padding","position","width","CloseButton","props","style","styleProp","otherProps","rootStyle"],"sources":["CloseButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport type { IconButtonProps } from '../IconButton';\nimport IconButton from '../IconButton';\nimport { Close } from '../internal';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n    root: {\n        height: 40,\n        left: 20,\n        padding: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\ninterface CloseButtonProps extends Omit<IconButtonProps, 'children'> {}\n\nexport default function CloseButton(props: CloseButtonProps) {\n    const {\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <IconButton\n            style={rootStyle}\n            {...otherProps}\n        >\n            <Close\n                color={'strong'}\n                size={'large'}\n            />\n        </IconButton>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAT,QAAsB,aAAtB;AACA,SAASC,GAAT,QAAoB,qBAApB;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,EAFJ;IAGFC,OAAO,EAAE,CAHP;IAIFC,QAAQ,EAAE,UAJR;IAKFC,KAAK,EAAE;EALL;AADuB,CAAlB,CAAf;AAYA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAGd,GAAG,CAAC,CAClBC,MAAM,CAACE,IADW,EAElBS,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,UAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,oBAAC,KAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}

package/build/module/DialogTitle/DialogTitle.js

@@ -4,6 +4,8 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import BackButton from './BackButton';
+import CloseButton from './CloseButton';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -17,7 +19,7 @@ const useStyles = function () {
   };
 };
 
-export default function DialogTitle(props) {
+const DialogTitle = props => {
   const {
     children,
     style: styleProp,
@@ -37,6 +39,9 @@ export default function DialogTitle(props) {
   }), typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
     style: titleStyle
   }, children) : children);
-}
-;
+};
+
+DialogTitle.BackButton = BackButton;
+DialogTitle.CloseButton = CloseButton;
+export default DialogTitle;
 //# sourceMappingURL=DialogTitle.js.map

package/build/module/DialogTitle/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","useDialogSectionStyle","createFontStyle","css","useTheme","useStyles","theme","root","paddingTop","spacing","title","textAlign","DialogTitle","props","children","style","styleProp","otherProps","styles","sectionStyle","rootStyle","titleFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle"],"sources":["DialogTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type DialogTitleProps from './DialogTitleProps';\n\ntype DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;\n\nconst useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            paddingTop: theme.spacing(6.5),\n        },\n        title: {\n            textAlign: 'center',\n        },\n    };\n};\n\nexport default function DialogTitle(props: DialogTitleProps) {\n    const {\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const sectionStyle = useDialogSectionStyle();\n\n    const rootStyle = css([\n        styles.root,\n        sectionStyle,\n        styleProp,\n    ]);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const titleStyle = css([\n        styles.title,\n        titleFontStyle,\n    ]);\n\n    return (\n        <View\n            {...otherProps}\n            style={rootStyle}\n        >\n            {typeof children === 'string' ? (\n                <Text style={titleStyle}>\n                    {children}\n                </Text>\n            ) : (children)}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA,SAASC,qBAAT,QAAsC,WAAtC;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAEF,KAAK,CAACG,OAAN,CAAc,GAAd;IADV,CADH;IAIHC,KAAK,EAAE;MACHC,SAAS,EAAE;IADR;EAJJ,CAAP;AAQH,CAXD;;AAaA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMP,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMc,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAMc,YAAY,GAAGlB,qBAAqB,EAA1C;EAEA,MAAMmB,SAAS,GAAGjB,GAAG,CAAC,CAClBe,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAD,CAArB;EAMA,MAAMK,cAAc,GAAGnB,eAAe,CAACI,KAAD,EAAQ;IAC1CgB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAEpB,KAAK,CAACqB,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAG3B,GAAG,CAAC,CACnBe,MAAM,CAACR,KADY,EAEnBW,cAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,IAAD,eACQJ,UADR;IAEI,KAAK,EAAEG;EAFX,IAIK,OAAON,QAAP,KAAoB,QAApB,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEgB;EAAb,GACKhB,QADL,CADH,GAIIA,QART,CADJ;AAYH;AAAA"}
+{"version":3,"names":["React","Text","View","useDialogSectionStyle","createFontStyle","css","useTheme","BackButton","CloseButton","useStyles","theme","root","paddingTop","spacing","title","textAlign","DialogTitle","props","children","style","styleProp","otherProps","styles","sectionStyle","rootStyle","titleFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle"],"sources":["DialogTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport BackButton from './BackButton';\nimport CloseButton from './CloseButton';\nimport type DialogTitleProps from './DialogTitleProps';\n\ntype DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;\n\nconst useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            paddingTop: theme.spacing(6.5),\n        },\n        title: {\n            textAlign: 'center',\n        },\n    };\n};\n\nconst DialogTitle = (props: DialogTitleProps) => {\n    const {\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const sectionStyle = useDialogSectionStyle();\n\n    const rootStyle = css([\n        styles.root,\n        sectionStyle,\n        styleProp,\n    ]);\n\n    const titleFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.header3.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const titleStyle = css([\n        styles.title,\n        titleFontStyle,\n    ]);\n\n    return (\n        <View\n            {...otherProps}\n            style={rootStyle}\n        >\n            {typeof children === 'string' ? (\n                <Text style={titleStyle}>\n                    {children}\n                </Text>\n            ) : (children)}\n        </View>\n    );\n};\n\nDialogTitle.BackButton = BackButton;\n\nDialogTitle.CloseButton = CloseButton;\n\nexport default DialogTitle;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA,SAASC,qBAAT,QAAsC,WAAtC;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,WAAP,MAAwB,eAAxB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,UAAU,EAAEF,KAAK,CAACG,OAAN,CAAc,GAAd;IADV,CADH;IAIHC,KAAK,EAAE;MACHC,SAAS,EAAE;IADR;EAJJ,CAAP;AAQH,CAXD;;AAaA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC7C,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMP,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAMgB,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAMc,YAAY,GAAGpB,qBAAqB,EAA1C;EAEA,MAAMqB,SAAS,GAAGnB,GAAG,CAAC,CAClBiB,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAD,CAArB;EAMA,MAAMK,cAAc,GAAGrB,eAAe,CAACM,KAAD,EAAQ;IAC1CgB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAEpB,KAAK,CAACqB,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAG7B,GAAG,CAAC,CACnBiB,MAAM,CAACR,KADY,EAEnBW,cAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,IAAD,eACQJ,UADR;IAEI,KAAK,EAAEG;EAFX,IAIK,OAAON,QAAP,KAAoB,QAApB,gBACG,oBAAC,IAAD;IAAM,KAAK,EAAEgB;EAAb,GACKhB,QADL,CADH,GAIIA,QART,CADJ;AAYH,CAzCD;;AA2CAF,WAAW,CAACT,UAAZ,GAAyBA,UAAzB;AAEAS,WAAW,CAACR,WAAZ,GAA0BA,WAA1B;AAEA,eAAeQ,WAAf"}

package/build/module/Divider/Divider.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { Text, View } from 'react-native';
+import { commonColors } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 const styles = StyleSheet.create({
   container: {
@@ -27,6 +28,12 @@ function selectBorderColor(theme, variant, vertical) {
 
     case 'strong':
       return vertical ? theme.palette.border.weak : theme.palette.border.base;
+
+    case 'strongStatic':
+      return commonColors.opacity.white['13'];
+
+    case 'baseStatic':
+      return commonColors.opacity.white['10'];
   }
 }
 

package/build/module/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","medium","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n    switch (variant) {\n        default:\n        case 'base':\n            return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n        case 'strong':\n            return vertical ? theme.palette.border.weak : theme.palette.border.base;\n    }\n}\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth: borderWidthProp,\n        children: childrenProp,\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        variant = 'base' as DividerVariant,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n    const fontColor = theme.palette.text.weak;\n    const borderColor = selectBorderColor(theme, variant, vertical);\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2.medium,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","commonColors","createFontStyle","css","StyleSheet","useTheme","styles","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","opacity","white","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","selector","typo","caption2","medium","color","element"],"sources":["Divider.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { commonColors } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { ExtendedStyle } from '../types';\nimport type DividerProps from './DividerProps';\nimport type { DividerVariant } from './DividerProps';\n\nconst styles = StyleSheet.create({\n    container: {\n        alignSelf: 'stretch',\n        alignItems: 'center',\n    },\n    row: {\n        flexDirection: 'row',\n    },\n    column: {\n        flexDirection: 'column',\n    },\n    divider: {\n        flexGrow: 1,\n    },\n});\n\nfunction selectBorderColor(theme: Theme, variant: DividerVariant, vertical: boolean) {\n    switch (variant) {\n        default:\n        case 'base':\n            return vertical ? theme.palette.border.weaker : theme.palette.border.weak;\n        case 'strong':\n            return vertical ? theme.palette.border.weak : theme.palette.border.base;\n        case 'strongStatic':\n            return commonColors.opacity.white['13'];\n        case 'baseStatic':\n            return commonColors.opacity.white['10'];\n    }\n}\n\nexport default function Divider(props: DividerProps) {\n    const {\n        borderWidth: borderWidthProp,\n        children: childrenProp,\n        elementAlign = 'center',\n        inset = 0,\n        marginBetweenChildren = 2,\n        style,\n        variant = 'base' as DividerVariant,\n        vertical = false,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);\n    const fontColor = theme.palette.text.weak;\n    const borderColor = selectBorderColor(theme, variant, vertical);\n    const marginSize = theme.spacing(1);\n    const insetSize = theme.spacing(inset);\n\n    const marginLeft = marginSize;\n    const marginRight = marginSize;\n    const marginTop = marginSize;\n    const marginBottom = marginSize;\n\n    const marginStyle = vertical\n        ? { marginLeft, marginRight }\n        : { marginTop, marginBottom };\n\n    const insetStyle = vertical\n        ? { marginTop: insetSize, marginBottom: insetSize }\n        : { marginLeft: insetSize, marginRight: insetSize };\n\n    const borderColorStyle = { borderColor };\n    const borderWidthStyle = (vertical ? { borderRightWidth: borderWidth } : { borderBottomWidth: borderWidth });\n\n    const containerStyle = css([\n        insetStyle,\n        marginStyle,\n        styles.container,\n        vertical ? styles.column : styles.row,\n        childrenProp ? undefined : borderColorStyle,\n        childrenProp ? undefined : borderWidthStyle,\n        style,\n    ]);\n\n    const dividerStyle = css([\n        borderColorStyle,\n        borderWidthStyle,\n        styles.divider,\n    ]);\n\n    const dividerMarginSize = theme.spacing(marginBetweenChildren);\n    const startDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'start' ? 'flex' : 'none',\n        ...(vertical ? { marginBottom: dividerMarginSize } : { marginRight: dividerMarginSize }),\n    };\n    const endDividerStyle: ExtendedStyle = {\n        display: elementAlign !== 'end' ? 'flex' : 'none',\n        ...(vertical ? { marginTop: dividerMarginSize } : { marginLeft: dividerMarginSize }),\n    };\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.caption2.medium,\n        color: fontColor,\n    });\n\n    const element = typeof childrenProp === 'string'\n        ? <Text style={css(fontStyle)}>{childrenProp}</Text>\n        : childrenProp;\n\n    const children = childrenProp ? (\n        <React.Fragment>\n            <View style={css([dividerStyle, startDividerStyle])}/>\n            {element}\n            <View style={css([dividerStyle, endDividerStyle])}/>\n        </React.Fragment>\n    ) : null;\n\n    return (\n        <View\n            style={containerStyle}\n            {...otherProps}\n        >\n            {children}\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/Divider/DividerProps.js

@@ -1,3 +1,3 @@
 export const dividerElementAligns = ['start', 'center', 'end'];
-export const dividerVariants = ['base', 'strong'];
+export const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'];
 //# sourceMappingURL=DividerProps.js.map

package/build/module/Divider/DividerProps.js.map

@@ -1 +1 @@
-{"version":3,"names":["dividerElementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const dividerElementAligns = ['start', 'center', 'end'] as const;\nexport type DividerElementAlign = typeof dividerElementAligns[number];\n\nexport const dividerVariants = ['base', 'strong'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default if vertical is true 1, otherwise 0.5\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: DividerElementAlign;\n\n    /**\n     * Select the style of the divider based on this value.\n     *  @default base\n     */\n    variant?: DividerVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,oBAAoB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA7B;AAGP,OAAO,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,CAAxB"}
+{"version":3,"names":["dividerElementAligns","dividerVariants"],"sources":["DividerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const dividerElementAligns = ['start', 'center', 'end'] as const;\nexport type DividerElementAlign = typeof dividerElementAligns[number];\n\nexport const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;\nexport type DividerVariant = typeof dividerVariants[number];\n\nexport default interface DividerProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The size of the inset. It works as a multiplier factor based on spacing system.\n     * @default 0\n     */\n    inset?: number;\n\n    /**\n     * If `true`, the divider orientation is set to vertical.\n     * @default false\n     */\n    vertical?: boolean;\n\n    /**\n     * The size of margin between child element and the divider. It works as a multiplier factor based on spacing system.\n     * @default 2\n     */\n    marginBetweenChildren?: number;\n\n    /**\n     *  The size of border width. It works as an actual pixel-based border width value of a divider.\n     *  @default if vertical is true 1, otherwise 0.5\n     */\n    borderWidth?: number;\n\n    /**\n     *  Set position of children.\n     *  @default center\n     */\n    elementAlign?: DividerElementAlign;\n\n    /**\n     * Select the style of the divider based on this value.\n     *  @default base\n     */\n    variant?: DividerVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,oBAAoB,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,KAApB,CAA7B;AAGP,OAAO,MAAMC,eAAe,GAAG,CAAC,MAAD,EAAS,QAAT,EAAmB,YAAnB,EAAiC,cAAjC,CAAxB"}

package/build/module/Pagination/Pagination.js

@@ -50,6 +50,7 @@ export default function Pagination(props) {
   const {
     bundleSize = 1,
     children,
+    color = 'base',
     count,
     disabled = false,
     hideIndicator = false,
@@ -107,6 +108,7 @@ export default function Pagination(props) {
     currentPage: page,
     maxPage: count
   }) : times(i => renderItem({
+    color,
     index: i,
     disabled,
     selected: i === page

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

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

package/build/module/Pagination/PaginationProps.js

@@ -1,2 +1,3 @@
+export const paginationColors = ['base', 'static'];
 export const paginationVariants = ['dot', 'number'];
 //# sourceMappingURL=PaginationProps.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["paginationVariants"],"sources":["PaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const paginationVariants = ['dot', 'number'] as const;\nexport type PaginationVariant = typeof paginationVariants[number];\n\nexport interface PaginationRenderItemParams {\n    /**\n     * Index of the pagination item.\n     */\n    index: number;\n\n    /**\n     * If `true`, the pagination item is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     */\n    selected: boolean;\n}\n\nexport default interface PaginationProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The Number of pages that change when the button is pressed\n     * @default 1\n     */\n    bundleSize?: number,\n\n    /**\n     * The pagination will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * The total number of pages.\n     */\n    count: number,\n\n    /**\n     * If `true`, the pagination is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n\n    /**\n     * If `true`, hide the page indicator.\n     * @default false\n     */\n    hideIndicator?: boolean,\n\n    /**\n     * If `true`, hide the next-page button.\n     * @default false\n     */\n    hideNextButton?: boolean,\n\n    /**\n     * If `true`, hide the previous-page button.\n     * @default false\n     */\n    hidePrevButton?: boolean,\n\n    /**\n     * If `true`, pagination is infinite.\n     * @default false\n     */\n    infinite?: boolean,\n\n    /**\n     * Callback fired when the page is changed.\n     */\n    onChange?: (page: number) => void,\n\n    /**\n     * The current page number.\n     */\n    page: number;\n\n    /**\n     * Render the item.\n     * @default (item) => <PaginationItem {...item} />\n     */\n    renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;\n\n    /**\n     * Determines design variations of the component.\n     * @default 'dot'\n     */\n    variant?: PaginationVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,kBAAkB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA3B"}
+{"version":3,"names":["paginationColors","paginationVariants"],"sources":["PaginationProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport const paginationColors = ['base', 'static'] as const;\nexport type PaginationColor = typeof paginationColors[number];\n\nexport const paginationVariants = ['dot', 'number'] as const;\nexport type PaginationVariant = typeof paginationVariants[number];\n\nexport interface PaginationRenderItemParams {\n    /**\n     * Set color of dot.\n     * @default 'base'\n     */\n    color?: PaginationColor;\n\n    /**\n     * Index of the pagination item.\n     */\n    index: number;\n\n    /**\n     * If `true`, the pagination item is disabled.\n     */\n    disabled: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     */\n    selected: boolean;\n}\n\nexport default interface PaginationProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * The Number of pages that change when the button is pressed\n     * @default 1\n     */\n    bundleSize?: number,\n\n    /**\n     * The pagination will be added relative to this node.\n     */\n    children?: React.ReactNode;\n\n    /**\n     * Set color of dot.\n     * @default 'base'\n     */\n    color?: PaginationColor;\n\n    /**\n     * The total number of pages.\n     */\n    count: number,\n\n    /**\n     * If `true`, the pagination is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n\n    /**\n     * If `true`, hide the page indicator.\n     * @default false\n     */\n    hideIndicator?: boolean,\n\n    /**\n     * If `true`, hide the next-page button.\n     * @default false\n     */\n    hideNextButton?: boolean,\n\n    /**\n     * If `true`, hide the previous-page button.\n     * @default false\n     */\n    hidePrevButton?: boolean,\n\n    /**\n     * If `true`, pagination is infinite.\n     * @default false\n     */\n    infinite?: boolean,\n\n    /**\n     * Callback fired when the page is changed.\n     */\n    onChange?: (page: number) => void,\n\n    /**\n     * The current page number.\n     */\n    page: number;\n\n    /**\n     * Render the item.\n     * @default (item) => <PaginationItem {...item} />\n     */\n    renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;\n\n    /**\n     * Determines design variations of the component.\n     * @default 'dot'\n     */\n    variant?: PaginationVariant;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,gBAAgB,GAAG,CAAC,MAAD,EAAS,QAAT,CAAzB;AAGP,OAAO,MAAMC,kBAAkB,GAAG,CAAC,KAAD,EAAQ,QAAR,CAA3B"}

package/build/module/Pagination/index.js

@@ -1,3 +1,3 @@
 export { default } from './Pagination';
-export { paginationVariants } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["default","paginationVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Pagination';\nexport type { default as PaginationProps } from './PaginationProps';\nexport { paginationVariants } from './PaginationProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,SAASC,kBAAT,QAAmC,mBAAnC"}
+{"version":3,"names":["default","paginationColors","paginationVariants"],"sources":["index.ts"],"sourcesContent":["export { default } from './Pagination';\nexport type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';\nexport { paginationColors, paginationVariants } from './PaginationProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,SAASC,gBAAT,EAA2BC,kBAA3B,QAAqD,mBAArD"}

package/build/module/PaginationItem/PaginationItem.js

@@ -1,38 +1,45 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { commonColors } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
+const DEFAULT_SIZE = 6;
+const styles = StyleSheet.create({
+  root: {
+    width: DEFAULT_SIZE,
+    height: DEFAULT_SIZE,
+    borderRadius: DEFAULT_SIZE * 0.5,
+    marginHorizontal: 4
+  }
+});
 
-const useStyles = function () {
+function getBackgroundColor(color, selected) {
   const theme = useTheme();
-  const size = 6;
-  return {
-    root: {
-      width: size,
-      height: size,
-      borderRadius: size * 0.5,
-      marginHorizontal: theme.spacing(1)
-    },
-    selected: {
-      backgroundColor: theme.palette.fill.base
-    },
-    unselected: {
-      backgroundColor: theme.palette.status.disabled
-    }
-  };
-};
+
+  switch (color) {
+    case 'static':
+      return selected ? commonColors.static.strongInverse : commonColors.static.weakOpacityInverse;
+
+    case 'base':
+    default:
+      return selected ? theme.palette.fill.base : theme.palette.status.disabled;
+  }
+}
 
 function PaginationItem(props) {
   const {
+    color = 'base',
     disabled,
-    selected,
+    selected = false,
     style,
     ...otherProps
   } = props;
-  const styles = useStyles();
+  const backgroundColor = getBackgroundColor(color, selected);
   return /*#__PURE__*/React.createElement(View, _extends({
-    style: css([styles.root, selected ? styles.selected : styles.unselected, style])
+    style: css([styles.root, {
+      backgroundColor
+    }, style])
   }, otherProps));
 }
 

package/build/module/PaginationItem/PaginationItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","css","useTheme","useStyles","theme","size","root","width","height","borderRadius","marginHorizontal","spacing","selected","backgroundColor","palette","fill","base","unselected","status","disabled","PaginationItem","props","style","otherProps","styles","memo"],"sources":["PaginationItem.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type PaginationItemProps from './PaginationItemProps';\n\ntype PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;\n\nconst useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {\n    const theme = useTheme();\n\n    const size = 6;\n\n    return {\n        root: {\n            width: size,\n            height: size,\n            borderRadius: size * 0.5,\n            marginHorizontal: theme.spacing(1),\n        },\n        selected: {\n            backgroundColor: theme.palette.fill.base,\n        },\n        unselected: {\n            backgroundColor: theme.palette.status.disabled,\n        },\n    };\n};\n\nfunction PaginationItem(props: PaginationItemProps) {\n    const {\n        disabled,\n        selected,\n        style,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                selected ? styles.selected : styles.unselected,\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n}\n\nexport default React.memo(PaginationItem);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAKA,MAAMC,SAA0C,GAAG,YAAkC;EACjF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMG,IAAI,GAAG,CAAb;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,KAAK,EAAEF,IADL;MAEFG,MAAM,EAAEH,IAFN;MAGFI,YAAY,EAAEJ,IAAI,GAAG,GAHnB;MAIFK,gBAAgB,EAAEN,KAAK,CAACO,OAAN,CAAc,CAAd;IAJhB,CADH;IAOHC,QAAQ,EAAE;MACNC,eAAe,EAAET,KAAK,CAACU,OAAN,CAAcC,IAAd,CAAmBC;IAD9B,CAPP;IAUHC,UAAU,EAAE;MACRJ,eAAe,EAAET,KAAK,CAACU,OAAN,CAAcI,MAAd,CAAqBC;IAD9B;EAVT,CAAP;AAcH,CAnBD;;AAqBA,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;EAChD,MAAM;IACFF,QADE;IAEFP,QAFE;IAGFU,KAHE;IAIF,GAAGC;EAJD,IAKFF,KALJ;EAOA,MAAMG,MAAM,GAAGrB,SAAS,EAAxB;EAEA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEF,GAAG,CAAC,CACPuB,MAAM,CAAClB,IADA,EAEPM,QAAQ,GAAGY,MAAM,CAACZ,QAAV,GAAqBY,MAAM,CAACP,UAF7B,EAGPK,KAHO,CAAD;EADd,GAMQC,UANR,EADJ;AAUH;;AAED,4BAAexB,KAAK,CAAC0B,IAAN,CAAWL,cAAX,CAAf"}
+{"version":3,"names":["React","StyleSheet","View","commonColors","css","useTheme","DEFAULT_SIZE","styles","create","root","width","height","borderRadius","marginHorizontal","getBackgroundColor","color","selected","theme","static","strongInverse","weakOpacityInverse","palette","fill","base","status","disabled","PaginationItem","props","style","otherProps","backgroundColor","memo"],"sources":["PaginationItem.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View, ViewStyle } from 'react-native';\nimport { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { PaginationColor } from '../Pagination';\nimport { css, useTheme } from '../styles';\nimport type PaginationItemProps from './PaginationItemProps';\n\nconst DEFAULT_SIZE = 6;\n\nconst styles = StyleSheet.create({\n    root: {\n        width: DEFAULT_SIZE,\n        height: DEFAULT_SIZE,\n        borderRadius: DEFAULT_SIZE * 0.5,\n        marginHorizontal: 4,\n    },\n});\n\nfunction getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {\n    const theme = useTheme();\n\n    switch (color) {\n        case 'static':\n            return selected\n                ? commonColors.static.strongInverse\n                : commonColors.static.weakOpacityInverse;\n        case 'base':\n        default:\n            return selected\n                ? theme.palette.fill.base\n                : theme.palette.status.disabled;\n\n    }\n}\n\nfunction PaginationItem(props: PaginationItemProps) {\n    const {\n        color = 'base' as PaginationColor,\n        disabled,\n        selected = false,\n        style,\n        ...otherProps\n    } = props;\n\n    const backgroundColor = getBackgroundColor(color, selected);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                { backgroundColor },\n                style,\n            ])}\n            {...otherProps}\n        />\n    );\n}\n\nexport default React.memo(PaginationItem);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAA4C,cAA5C;AACA,SAASC,YAAT,QAAgE,qBAAhE;AAEA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,MAAMC,YAAY,GAAG,CAArB;AAEA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,KAAK,EAAEJ,YADL;IAEFK,MAAM,EAAEL,YAFN;IAGFM,YAAY,EAAEN,YAAY,GAAG,GAH3B;IAIFO,gBAAgB,EAAE;EAJhB;AADuB,CAAlB,CAAf;;AASA,SAASC,kBAAT,CAA4BC,KAA5B,EAAoDC,QAApD,EAAqG;EACjG,MAAMC,KAAK,GAAGZ,QAAQ,EAAtB;;EAEA,QAAQU,KAAR;IACI,KAAK,QAAL;MACI,OAAOC,QAAQ,GACTb,YAAY,CAACe,MAAb,CAAoBC,aADX,GAEThB,YAAY,CAACe,MAAb,CAAoBE,kBAF1B;;IAGJ,KAAK,MAAL;IACA;MACI,OAAOJ,QAAQ,GACTC,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBC,IADV,GAETN,KAAK,CAACI,OAAN,CAAcG,MAAd,CAAqBC,QAF3B;EAPR;AAYH;;AAED,SAASC,cAAT,CAAwBC,KAAxB,EAAoD;EAChD,MAAM;IACFZ,KAAK,GAAG,MADN;IAEFU,QAFE;IAGFT,QAAQ,GAAG,KAHT;IAIFY,KAJE;IAKF,GAAGC;EALD,IAMFF,KANJ;EAQA,MAAMG,eAAe,GAAGhB,kBAAkB,CAACC,KAAD,EAAQC,QAAR,CAA1C;EAEA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEZ,GAAG,CAAC,CACPG,MAAM,CAACE,IADA,EAEP;MAAEqB;IAAF,CAFO,EAGPF,KAHO,CAAD;EADd,GAMQC,UANR,EADJ;AAUH;;AAED,4BAAe7B,KAAK,CAAC+B,IAAN,CAAWL,cAAX,CAAf"}

package/build/module/PaginationItem/PaginationItemProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["PaginationItemProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\n\nexport default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * If `true`, the pagination item is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["PaginationItemProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport { PaginationColor } from '../Pagination';\n\nexport default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Set color of dot.\n     * @default 'base'\n     */\n    color?: PaginationColor;\n\n    /**\n     * If `true`, the pagination item is disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * If `true` the pagination item is selected.\n     * @default false\n     */\n    selected?: boolean;\n}> {}\n"],"mappings":""}