@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.30

package/build/module/Chip/useChipStyle.js

@@ -1,36 +1,44 @@
 import { useMemo } from 'react';
 import { createFontStyle, useTheme } from '../styles';
-// TODO: need to refactoring...
-export default function useChipStyle(size, startElementVariant, isEndElement) {
+const closeButtonContainerStyleMap = {
+  small: {
+    marginLeft: 8,
+    paddingTop: 1
+  },
+  large: {
+    marginLeft: 10,
+    paddingTop: 1
+  }
+};
+const closeIconSize = {
+  small: {
+    height: 14,
+    width: 8.17
+  },
+  large: {
+    height: 16,
+    width: 9
+  }
+}; // TODO: need to refactoring...
+
+export default function useChipStyle(size, startElementVariant, color, selected) {
   const theme = useTheme();
   return useMemo(() => {
-    var _variantStyleMap$star, _variantStyleMap$star2;
+    var _variantStyleMap$star, _variantStyleMap$star2, _variantStyleMap$star3;
 
     const fontStyleMap = {
       small: createFontStyle(theme, {
         selector: typography => typography.caption1.medium,
-        color: theme.palette.text.strong
+        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
       }),
       large: createFontStyle(theme, {
         selector: typography => typography.body2.medium,
-        color: theme.palette.text.strong
+        color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong
       })
     };
-    const endElementStyleMap = {
-      small: {
-        height: 14,
-        marginLeft: theme.spacing(2),
-        width: 8.17
-      },
-      large: {
-        height: 16,
-        marginLeft: theme.spacing(2.5),
-        width: 9
-      }
-    };
     const baseContainerStyle = {
       alignItems: 'center',
-      backgroundColor: theme.palette.fill.weaker,
+      backgroundColor: selected ? theme.palette.fill.base : color === 'white' ? theme.palette.surface.base : theme.palette.fill.weaker,
       borderRadius: theme.shape.radius.full,
       flexDirection: 'row',
       overflow: 'hidden'
@@ -45,9 +53,11 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
         },
         startElement: {
           borderRadius: theme.shape.radius.full,
-          height: isLarge ? 24 : 22,
-          marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
-          width: isLarge ? 24 : 22
+          height: isLarge ? 26 : 23,
+          width: isLarge ? 26 : 23
+        },
+        startElementContainer: {
+          marginRight: theme.spacing(isLarge ? 1.5 : 1.25)
         }
       },
       icon: {
@@ -57,11 +67,16 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
           paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25)
         },
         startElement: {
+          color: selected ? theme.palette.icon.strongInverse : theme.palette.icon.strong,
+          height: isLarge ? 17 : 16,
+          width: isLarge ? 17 : 16
+        },
+        startElementContainer: {
           alignItems: 'center',
-          height: isLarge ? 22 : 20,
+          height: isLarge ? 24 : 21,
           justifyContent: 'center',
           marginRight: theme.spacing(isLarge ? 1 : 0.75),
-          width: isLarge ? 22 : 20
+          width: isLarge ? 24 : 21
         }
       },
       image: {
@@ -71,15 +86,18 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
         },
         startElement: {
           borderRadius: theme.shape.radius.full,
-          height: isLarge ? 34 : 30,
-          marginRight: theme.spacing(1.5),
-          width: isLarge ? 45 : 40
+          height: isLarge ? 36 : 31,
+          width: isLarge ? 48 : 40
+        },
+        startElementContainer: {
+          marginRight: theme.spacing(1.5)
         }
       },
       default: {
         container: {
           paddingBottom: theme.spacing(1.75),
-          paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),
+          paddingLeft: theme.spacing(isLarge ? 3.5 : 3),
+          paddingRight: theme.spacing(isLarge ? 3.5 : 3),
           paddingTop: theme.spacing(1.5)
         }
       }
@@ -87,14 +105,16 @@ export default function useChipStyle(size, startElementVariant, isEndElement) {
     return {
       container: { ...baseContainerStyle,
         ...((_variantStyleMap$star = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star === void 0 ? void 0 : _variantStyleMap$star.container),
-        ...(isEndElement ? {
+        ...(selected ? {
           paddingRight: theme.spacing(isLarge ? 2.5 : 2.25)
         } : {})
       },
-      endElement: endElementStyleMap[size],
+      closeButtonContainer: closeButtonContainerStyleMap[size],
+      closeIconSize: closeIconSize[size],
       label: fontStyleMap[size],
-      startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement
+      startElement: (_variantStyleMap$star2 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star2 === void 0 ? void 0 : _variantStyleMap$star2.startElement,
+      startElementContainer: (_variantStyleMap$star3 = variantStyleMap[startElementVariant]) === null || _variantStyleMap$star3 === void 0 ? void 0 : _variantStyleMap$star3.startElementContainer
     };
-  }, [theme, size, startElementVariant]);
+  }, [theme, size, startElementVariant, color, selected]);
 }
 //# sourceMappingURL=useChipStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","createFontStyle","useTheme","useChipStyle","size","startElementVariant","isEndElement","theme","fontStyleMap","small","selector","typography","caption1","medium","color","palette","text","strong","large","body2","endElementStyleMap","height","marginLeft","spacing","width","baseContainerStyle","alignItems","backgroundColor","fill","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","paddingRight","paddingVertical","startElement","marginRight","icon","justifyContent","image","default","paddingBottom","paddingHorizontal","paddingTop","endElement","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    endElement?: FountainUiStyle;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    isEndElement: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: theme.palette.text.strong,\n            }),\n        };\n\n        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {\n            small: {\n                height: 14,\n                marginLeft: theme.spacing(2),\n                width: 8.17,\n            },\n            large: {\n                height: 16,\n                marginLeft: theme.spacing(2.5),\n                width: 9,\n            },\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 24 : 22,\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                    width: isLarge ? 24 : 22,\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    alignItems: 'center',\n                    height: isLarge ? 22 : 20,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 22 : 20,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 34 : 30,\n                    marginRight: theme.spacing(1.5),\n                    width: isLarge ? 45 : 40,\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingHorizontal: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            endElement: endElementStyleMap[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n        };\n    }, [theme, size, startElementVariant]);\n}\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","createFontStyle","useTheme","closeButtonContainerStyleMap","small","marginLeft","paddingTop","large","closeIconSize","height","width","useChipStyle","size","startElementVariant","color","selected","theme","fontStyleMap","selector","typography","caption1","medium","palette","text","strongInverse","strong","body2","baseContainerStyle","alignItems","backgroundColor","fill","base","surface","weaker","borderRadius","shape","radius","full","flexDirection","overflow","isLarge","variantStyleMap","avatar","container","paddingLeft","spacing","paddingRight","paddingVertical","startElement","startElementContainer","marginRight","icon","justifyContent","image","default","paddingBottom","closeButtonContainer","label"],"sources":["useChipStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport type { SvgIconProps } from '../SvgIcon';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';\n\ninterface ChipStyle {\n    container: FountainUiStyle;\n    closeButtonContainer?: FountainUiStyle;\n    closeIconSize?: Pick<SvgIconProps, 'height' | 'width'>;\n    label: TextStyle;\n    startElement?: FountainUiStyle;\n    startElementContainer?: FountainUiStyle;\n}\n\ntype VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;\n\nconst closeButtonContainerStyleMap: Record<ChipSize, FountainUiStyle> = {\n    small: {\n        marginLeft: 8,\n        paddingTop: 1,\n    },\n    large: {\n        marginLeft: 10,\n        paddingTop: 1,\n    },\n};\n\nconst closeIconSize: Record<ChipSize, ChipStyle['closeIconSize']> = {\n    small: {\n        height: 14,\n        width: 8.17,\n    },\n    large: {\n        height: 16,\n        width: 9,\n    },\n};\n\n// TODO: need to refactoring...\nexport default function useChipStyle(\n    size: ChipSize,\n    startElementVariant: ChipStartElementVariant,\n    color: ChipColor,\n    selected: boolean,\n): ChipStyle {\n    const theme = useTheme();\n\n    return useMemo<ChipStyle>(() => {\n        const fontStyleMap: Record<ChipSize, TextStyle> = {\n            small: createFontStyle(theme, {\n                selector: (typography) => typography.caption1.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n            large: createFontStyle(theme, {\n                selector: (typography) => typography.body2.medium,\n                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,\n            }),\n        };\n\n        const baseContainerStyle: FountainUiStyle = {\n            alignItems: 'center',\n            backgroundColor: selected ? theme.palette.fill.base\n                : color === 'white'\n                    ? theme.palette.surface.base\n                    : theme.palette.fill.weaker,\n            borderRadius: theme.shape.radius.full,\n            flexDirection: 'row',\n            overflow: 'hidden',\n        };\n\n        const isLarge = size === 'large';\n\n        const variantStyleMap: VariantStyleMap = {\n            avatar: {\n                container: {\n                    paddingLeft: theme.spacing(isLarge ? 1.5 : 1.25),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.25 : 1),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 26 : 23,\n                    width: isLarge ? 26 : 23,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n            },\n            icon: {\n                container: {\n                    paddingLeft: theme.spacing(1.5),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),\n                },\n                startElement: {\n                    color: selected\n                        ? theme.palette.icon.strongInverse\n                        : theme.palette.icon.strong,\n                    height: isLarge ? 17 : 16,\n                    width: isLarge ? 17 : 16,\n                },\n                startElementContainer: {\n                    alignItems: 'center',\n                    height: isLarge ? 24 : 21,\n                    justifyContent: 'center',\n                    marginRight: theme.spacing(isLarge ? 1 : 0.75),\n                    width: isLarge ? 24 : 21,\n                },\n            },\n            image: {\n                container: {\n                    alignItems: 'center',\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                },\n                startElement: {\n                    borderRadius: theme.shape.radius.full,\n                    height: isLarge ? 36 : 31,\n                    width: isLarge ? 48 : 40,\n                },\n                startElementContainer: {\n                    marginRight: theme.spacing(1.5),\n                },\n            },\n            default: {\n                container: {\n                    paddingBottom: theme.spacing(1.75),\n                    paddingLeft: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingRight: theme.spacing(isLarge ? 3.5 : 3),\n                    paddingTop: theme.spacing(1.5),\n                },\n            },\n        };\n\n        return {\n            container: {\n                ...baseContainerStyle,\n                ...variantStyleMap[startElementVariant]?.container,\n                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),\n            },\n            closeButtonContainer: closeButtonContainerStyleMap[size],\n            closeIconSize: closeIconSize[size],\n            label: fontStyleMap[size],\n            startElement: variantStyleMap[startElementVariant]?.startElement,\n            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,\n        };\n    }, [theme, size, startElementVariant, color, selected]);\n}\n"],"mappings":"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"}

package/build/module/Dialog/Dialog.js

@@ -8,12 +8,11 @@ import Modal, { ANIMATION_TYPE } from '../Modal';
 import ShadowView from '../ShadowView';
 import { DialogProvider } from './DialogContext';
 import useDialogStyle from './useDialogStyle';
-const TOP_ELEMENT_OFFSET = 20;
+const TOP_ELEMENT_HIDDEN_OFFSET = 16;
 export default function Dialog(props) {
   const {
     animationType = ANIMATION_TYPE.SLIDE,
     children,
-    fullScreen = false,
     hideBackdrop,
     onClose,
     style: styleProp,
@@ -22,7 +21,7 @@ export default function Dialog(props) {
     topElement,
     ...otherProps
   } = props;
-  const styles = useDialogStyle(size, fullScreen);
+  const styles = useDialogStyle(size);
   const {
     height: screenHeight
   } = useWindowDimensions();
@@ -40,8 +39,9 @@ export default function Dialog(props) {
       return [];
     }
 
+    const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);
     return [{
-      toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+      toValue: topElementHeightWithoutOffset / 2,
       type: ANIMATION_TYPE.SLIDE
     }];
   }, [topElementHeight]);
@@ -51,7 +51,7 @@ export default function Dialog(props) {
         toValue: 0,
         type: ANIMATION_TYPE.FADE
       }];
-    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+    } else if (animationType === ANIMATION_TYPE.SLIDE) {
       return [{
         toValue: screenHeight,
         type: ANIMATION_TYPE.SLIDE
@@ -67,14 +67,14 @@ export default function Dialog(props) {
       toValue: screenHeight,
       type: ANIMATION_TYPE.SLIDE
     }];
-  }, [animationType, fullScreen, screenHeight]);
+  }, [animationType, screenHeight]);
   const openAnimation = useMemo(() => {
     if (animationType === ANIMATION_TYPE.FADE) {
       return [{
         toValue: 1,
         type: ANIMATION_TYPE.FADE
       }];
-    } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+    } else if (animationType === ANIMATION_TYPE.SLIDE) {
       return [{
         toValue: 0,
         type: ANIMATION_TYPE.SLIDE
@@ -90,8 +90,8 @@ export default function Dialog(props) {
       toValue: 0,
       type: ANIMATION_TYPE.SLIDE
     }];
-  }, [animationType, fullScreen]);
-  const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  }, [animationType]);
+  const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;
   const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
   const paperStyle = css([styles.paper, styleProp]);
   return /*#__PURE__*/React.createElement(Modal, _extends({
@@ -110,7 +110,7 @@ export default function Dialog(props) {
       size
     }
   }, topElement ? /*#__PURE__*/React.createElement(Column, {
-    style: fullScreen ? undefined : styles.topElementContainer
+    style: styles.topElementContainer
   }, /*#__PURE__*/React.createElement(Column, {
     style: styles.topElementContent,
     onLayout: handleTopElementLayout
@@ -119,5 +119,4 @@ export default function Dialog(props) {
     style: paperStyle
   }, children)));
 }
-;
 //# sourceMappingURL=Dialog.js.map

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_HIDDEN_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","topElementHeightWithoutOffset","Math","max","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_HIDDEN_OFFSET = 16;\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        const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n        return [{\n            toValue: (topElementHeightWithoutOffset) / 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,14 +13,16 @@ 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: {
+        paddingHorizontal: windowWidth >= 448 ? 32 : 24
       }
     };
     return sizePaddingHorizontalMap[size];

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                paddingHorizontal: windowWidth >= 448 ? 32 : 24,\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,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;QACFH,iBAAiB,EAAEJ,WAAW,IAAI,GAAf,GAAqB,EAArB,GAA0B;MAD3C;IAV4D,CAAtE;IAeA,OAAOE,wBAAwB,CAACJ,IAAD,CAA/B;EACH,CAjBa,EAiBX,CAACA,IAAD,EAAOG,KAAP,EAAcD,WAAd,CAjBW,CAAd;AAkBH"}

package/build/module/Dialog/useDialogStyle.js

@@ -1,12 +1,17 @@
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../styles';
-export default function useDialogStyle(size, fullScreen) {
+export default function useDialogStyle(size) {
   const theme = useTheme();
   const {
     height: windowHeight,
     width: windowWidth
   } = useWindowDimensions();
+  const {
+    bottom: bottomSafeAreaInset,
+    top: topSafeAreaInset
+  } = useSafeAreaInsets();
   return useMemo(() => {
     var _sizeStyleMap$size;
 
@@ -21,31 +26,36 @@ export default function useDialogStyle(size, fullScreen) {
         maxWidth: 512,
         minHeight: 360,
         width: 512
+      },
+      full: {
+        paddingBottom: bottomSafeAreaInset,
+        paddingTop: Math.max(0, topSafeAreaInset - 3)
       }
     };
-    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%'
+        width: '100%',
+        ...sizeStyleMap[size]
       } : {
         backgroundColor: theme.palette.surface.base,
         borderRadius: theme.shape.radius.xl,
@@ -64,6 +74,6 @@ export default function useDialogStyle(size, fullScreen) {
         width: '100%'
       }
     };
-  }, [theme, windowHeight, windowWidth, size, fullScreen]);
+  }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);
 }
 //# 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","useSafeAreaInsets","useTheme","useDialogStyle","size","theme","height","windowHeight","width","windowWidth","bottom","bottomSafeAreaInset","top","topSafeAreaInset","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","paddingBottom","paddingTop","Math","max","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"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\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    const {\n        bottom: bottomSafeAreaInset,\n        top: topSafeAreaInset,\n    } = useSafeAreaInsets();\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                paddingBottom: bottomSafeAreaInset,\n                paddingTop: Math.max(0, topSafeAreaInset - 3),\n            },\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                ...sizeStyleMap[size],\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, bottomSafeAreaInset, topSafeAreaInset]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,iBAAT,QAAkC,gCAAlC;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,IAGFT,mBAAmB,EAHvB;EAKA,MAAM;IACFU,MAAM,EAAEC,mBADN;IAEFC,GAAG,EAAEC;EAFH,IAGFZ,iBAAiB,EAHrB;EAKA,OAAOF,OAAO,CAAC,MAAM;IAAA;;IACjB,MAAMe,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;QAGHX,KAAK,EAAE;MAHJ,CAP+C;MAYtDY,IAAI,EAAE;QACFC,aAAa,EAAEV,mBADb;QAEFW,UAAU,EAAEC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYX,gBAAgB,GAAG,CAA/B;MAFV;IAZgD,CAA1D;IAkBA,MAAMY,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGnB,YAAY,GAAGkB,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGb,YAAY,CAACV,IAAD,CAAf,uDAAG,mBAAoBY,QAA3C;IAEA,MAAMY,YAAY,GAAGxB,IAAI,KAAK,MAA9B;IAEA,OAAO;MACHyB,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAE3B,KAAK,CAAC2B,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBtB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAsB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAE1B,WAAW,GAAGJ,KAAK,CAAC+B,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAjB,KAAK,EAAE;MAJP,CATD;MAeHgC,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAEpC,KAAK,CAACqC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBtC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE,MAHW;QAIlB,GAAGM,YAAY,CAACV,IAAD;MAJG,CAAH,GAKf;QACAqC,eAAe,EAAEpC,KAAK,CAACqC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAExC,KAAK,CAACyC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKA1C,KAAK,EAAE,MALP;QAMA,GAAGM,YAAY,CAACV,IAAD;MANf,CApBD;MA4BH+C,mBAAmB,EAAE;QACjBnC,QAAQ,EAAEW,cADO;QAEjBnB,KAAK,EAAE;MAFU,CA5BlB;MAgCH4C,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEf3C,MAAM,EAAE,CAFO;QAGfF,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CA/Da,EA+DX,CAACH,KAAD,EAAQE,YAAR,EAAsBE,WAAtB,EAAmCL,IAAnC,EAAyCO,mBAAzC,EAA8DE,gBAA9D,CA/DW,CAAd;AAgEH"}

package/build/module/DialogActions/DialogActions.js

@@ -9,7 +9,6 @@ const useStyles = function () {
   const theme = useTheme();
   return {
     root: {
-      paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(4)
     }
   };

package/build/module/DialogActions/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Column","useDialogSectionStyle","css","useTheme","useStyles","theme","root","paddingTop","spacing","paddingBottom","DialogActions","props","children","style","styleProp","otherProps","styles","sectionStyle","rootStyle"],"sources":["DialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { css, useTheme } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\ntype DialogActionsStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            paddingTop: theme.spacing(2),\n            paddingBottom: theme.spacing(4),\n        },\n    };\n};\n\nexport default function DialogActions(props: DialogActionsProps) {\n    const {\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\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    return (\n        <Column\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n        </Column>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,qBAAT,QAAsC,WAAtC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAKA,MAAMC,SAAyC,GAAG,YAAiC;EAC/E,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd,CADV;MAEFC,aAAa,EAAEJ,KAAK,CAACG,OAAN,CAAc,CAAd;IAFb;EADH,CAAP;AAMH,CATD;;AAWA,eAAe,SAASE,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMK,MAAM,GAAGZ,SAAS,EAAxB;EAEA,MAAMa,YAAY,GAAGhB,qBAAqB,EAA1C;EAEA,MAAMiB,SAAS,GAAGhB,GAAG,CAAC,CAClBc,MAAM,CAACV,IADW,EAElBW,YAFkB,EAGlBH,SAHkB,CAAD,CAArB;EAMA,oBACI,oBAAC,MAAD;IACI,KAAK,EAAEI;EADX,GAEQH,UAFR,GAIKH,QAJL,CADJ;AAQH;AAAA"}
+{"version":3,"names":["React","Column","useDialogSectionStyle","css","useTheme","useStyles","theme","root","paddingBottom","spacing","DialogActions","props","children","style","styleProp","otherProps","styles","sectionStyle","rootStyle"],"sources":["DialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { css, useTheme } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\ntype DialogActionsStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            paddingBottom: theme.spacing(4),\n        },\n    };\n};\n\nexport default function DialogActions(props: DialogActionsProps) {\n    const {\n        children,\n        style: styleProp,\n        ...otherProps\n    } = props;\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    return (\n        <Column\n            style={rootStyle}\n            {...otherProps}\n        >\n            {children}\n        </Column>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,qBAAT,QAAsC,WAAtC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAKA,MAAMC,SAAyC,GAAG,YAAiC;EAC/E,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,aAAa,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd;IADb;EADH,CAAP;AAKH,CARD;;AAUA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMK,MAAM,GAAGX,SAAS,EAAxB;EAEA,MAAMY,YAAY,GAAGf,qBAAqB,EAA1C;EAEA,MAAMgB,SAAS,GAAGf,GAAG,CAAC,CAClBa,MAAM,CAACT,IADW,EAElBU,YAFkB,EAGlBH,SAHkB,CAAD,CAArB;EAMA,oBACI,oBAAC,MAAD;IACI,KAAK,EAAEI;EADX,GAEQH,UAFR,GAIKH,QAJL,CADJ;AAQH;AAAA"}

package/build/module/DialogTitle/DialogLargeTitle.js

@@ -0,0 +1,65 @@
+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, Text, View } from 'react-native';
+import { createFontStyle, css, useTheme } from '../styles';
+import IconButton from '../IconButton';
+import { ChevronLeft, Close } from '../internal';
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    height: 64,
+    justifyContent: 'center',
+    paddingHorizontal: 80,
+    width: '100%'
+  },
+  backButton: {
+    height: 40,
+    left: 20,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  },
+  closeButton: {
+    height: 40,
+    left: 20,
+    padding: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+export default function DialogLargeTitle(props) {
+  const {
+    children,
+    closeButtonType = 'close',
+    onClose,
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const theme = useTheme();
+  const fontStyle = createFontStyle(theme, {
+    selector: typo => typo.header4.semiBold,
+    color: theme.palette.text.strong
+  });
+  const rootStyle = css([styles.root, styleProp]);
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: rootStyle
+  }, otherProps), typeof onClose === 'function' ? closeButtonType === 'back' ? /*#__PURE__*/React.createElement(IconButton, {
+    style: styles.backButton,
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(ChevronLeft, {
+    color: 'strong',
+    size: 'large'
+  })) : /*#__PURE__*/React.createElement(IconButton, {
+    style: styles.closeButton,
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(Close, {
+    color: 'strong',
+    size: 'large'
+  })) : null, /*#__PURE__*/React.createElement(Text, {
+    style: fontStyle
+  }, children));
+}
+//# sourceMappingURL=DialogLargeTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","createFontStyle","css","useTheme","IconButton","ChevronLeft","Close","styles","create","root","alignItems","height","justifyContent","paddingHorizontal","width","backButton","left","paddingLeft","paddingRight","paddingVertical","position","closeButton","padding","DialogLargeTitle","props","children","closeButtonType","onClose","style","styleProp","otherProps","theme","fontStyle","selector","typo","header4","semiBold","color","palette","text","strong","rootStyle"],"sources":["DialogLargeTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport type { DialogProps } from '../Dialog';\nimport type DialogTitleProps from './DialogTitleProps';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport IconButton from '../IconButton';\nimport { ChevronLeft, Close } from '../internal';\n\nconst styles = StyleSheet.create({\n    root: {\n        alignItems: 'center',\n        height: 64,\n        justifyContent: 'center',\n        paddingHorizontal: 80,\n        width: '100%',\n    },\n    backButton: {\n        height: 40,\n        left: 20,\n        paddingLeft: 5,\n        paddingRight: 11,\n        paddingVertical: 8,\n        position: 'absolute',\n        width: 40,\n    },\n    closeButton: {\n        height: 40,\n        left: 20,\n        padding: 8,\n        position: 'absolute',\n        width: 40,\n    },\n});\n\ninterface DialogLargeTitleProps extends DialogTitleProps {\n    closeButtonType?: 'back' | 'close';\n    onClose: DialogProps['onClose'];\n}\n\nexport default function DialogLargeTitle(props: DialogLargeTitleProps) {\n    const {\n        children,\n        closeButtonType = 'close',\n        onClose,\n        style: styleProp,\n        ...otherProps\n    } = props;\n\n    const theme = useTheme();\n\n    const fontStyle = createFontStyle(theme, {\n        selector: (typo) => typo.header4.semiBold,\n        color: theme.palette.text.strong,\n    });\n\n    const rootStyle = css([\n        styles.root,\n        styleProp,\n    ]);\n\n    return (\n        <View\n            style={rootStyle}\n            {...otherProps}\n        >\n            {typeof onClose === 'function' ? (\n                closeButtonType === 'back' ? (\n                    <IconButton\n                        style={styles.backButton}\n                        onPress={onClose}\n                    >\n                        <ChevronLeft\n                            color={'strong'}\n                            size={'large'}\n                        />\n                    </IconButton>\n                ) : (\n                    <IconButton\n                        style={styles.closeButton}\n                        onPress={onClose}\n                    >\n                        <Close\n                            color={'strong'}\n                            size={'large'}\n                        />\n                    </IconButton>\n                )\n            ) : null}\n\n            <Text style={fontStyle}>\n                {children}\n            </Text>\n        </View>\n    );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,EAA2BC,IAA3B,QAAuC,cAAvC;AAGA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,WAAT,EAAsBC,KAAtB,QAAmC,aAAnC;AAEA,MAAMC,MAAM,GAAGT,UAAU,CAACU,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,MAAM,EAAE,EAFN;IAGFC,cAAc,EAAE,QAHd;IAIFC,iBAAiB,EAAE,EAJjB;IAKFC,KAAK,EAAE;EALL,CADuB;EAQ7BC,UAAU,EAAE;IACRJ,MAAM,EAAE,EADA;IAERK,IAAI,EAAE,EAFE;IAGRC,WAAW,EAAE,CAHL;IAIRC,YAAY,EAAE,EAJN;IAKRC,eAAe,EAAE,CALT;IAMRC,QAAQ,EAAE,UANF;IAORN,KAAK,EAAE;EAPC,CARiB;EAiB7BO,WAAW,EAAE;IACTV,MAAM,EAAE,EADC;IAETK,IAAI,EAAE,EAFG;IAGTM,OAAO,EAAE,CAHA;IAITF,QAAQ,EAAE,UAJD;IAKTN,KAAK,EAAE;EALE;AAjBgB,CAAlB,CAAf;AA+BA,eAAe,SAASS,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,QADE;IAEFC,eAAe,GAAG,OAFhB;IAGFC,OAHE;IAIFC,KAAK,EAAEC,SAJL;IAKF,GAAGC;EALD,IAMFN,KANJ;EAQA,MAAMO,KAAK,GAAG5B,QAAQ,EAAtB;EAEA,MAAM6B,SAAS,GAAG/B,eAAe,CAAC8B,KAAD,EAAQ;IACrCE,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,OAAL,CAAaC,QADI;IAErCC,KAAK,EAAEN,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC;EAFW,CAAR,CAAjC;EAKA,MAAMC,SAAS,GAAGvC,GAAG,CAAC,CAClBK,MAAM,CAACE,IADW,EAElBoB,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEY;EADX,GAEQX,UAFR,GAIK,OAAOH,OAAP,KAAmB,UAAnB,GACGD,eAAe,KAAK,MAApB,gBACI,oBAAC,UAAD;IACI,KAAK,EAAEnB,MAAM,CAACQ,UADlB;IAEI,OAAO,EAAEY;EAFb,gBAII,oBAAC,WAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ,gBAWI,oBAAC,UAAD;IACI,KAAK,EAAEpB,MAAM,CAACc,WADlB;IAEI,OAAO,EAAEM;EAFb,gBAII,oBAAC,KAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CAZP,GAsBG,IA1BR,eA4BI,oBAAC,IAAD;IAAM,KAAK,EAAEK;EAAb,GACKP,QADL,CA5BJ,CADJ;AAkCH"}

package/build/module/DialogTitle/DialogTitle.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import DialogLargeTitle from './DialogLargeTitle';
 
 const useStyles = function () {
   const theme = useTheme();
@@ -17,7 +18,7 @@ const useStyles = function () {
   };
 };
 
-export default function DialogTitle(props) {
+const DialogTitle = props => {
   const {
     children,
     style: styleProp,
@@ -37,6 +38,8 @@ export default function DialogTitle(props) {
   }), typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
     style: titleStyle
   }, children) : children);
-}
-;
+};
+
+DialogTitle.Large = DialogLargeTitle;
+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","DialogLargeTitle","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","Large"],"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 DialogLargeTitle from './DialogLargeTitle';\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.Large = DialogLargeTitle;\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,gBAAP,MAA6B,oBAA7B;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,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,GAAGH,QAAQ,EAAtB;EAEA,MAAMe,MAAM,GAAGb,SAAS,EAAxB;EAEA,MAAMc,YAAY,GAAGnB,qBAAqB,EAA1C;EAEA,MAAMoB,SAAS,GAAGlB,GAAG,CAAC,CAClBgB,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAD,CAArB;EAMA,MAAMK,cAAc,GAAGpB,eAAe,CAACK,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,GAAG5B,GAAG,CAAC,CACnBgB,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,CAACmB,KAAZ,GAAoB3B,gBAApB;AAEA,eAAeQ,WAAf"}