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

package/build/commonjs/Dialog/Dialog.js

@@ -35,7 +35,6 @@ function Dialog(props) {
   const {
     animationType = _Modal.ANIMATION_TYPE.SLIDE,
     children,
-    fullScreen = false,
     hideBackdrop,
     onClose,
     style: styleProp,
@@ -44,7 +43,7 @@ function Dialog(props) {
     topElement,
     ...otherProps
   } = props;
-  const styles = (0, _useDialogStyle.default)(size, fullScreen);
+  const styles = (0, _useDialogStyle.default)(size);
   const {
     height: screenHeight
   } = (0, _reactNative.useWindowDimensions)();
@@ -73,7 +72,7 @@ function Dialog(props) {
         toValue: 0,
         type: _Modal.ANIMATION_TYPE.FADE
       }];
-    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE) {
       return [{
         toValue: screenHeight,
         type: _Modal.ANIMATION_TYPE.SLIDE
@@ -89,14 +88,14 @@ function Dialog(props) {
       toValue: screenHeight,
       type: _Modal.ANIMATION_TYPE.SLIDE
     }];
-  }, [animationType, fullScreen, screenHeight]);
+  }, [animationType, screenHeight]);
   const openAnimation = (0, _react.useMemo)(() => {
     if (animationType === _Modal.ANIMATION_TYPE.FADE) {
       return [{
         toValue: 1,
         type: _Modal.ANIMATION_TYPE.FADE
       }];
-    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE) {
       return [{
         toValue: 0,
         type: _Modal.ANIMATION_TYPE.SLIDE
@@ -112,8 +111,8 @@ function Dialog(props) {
       toValue: 0,
       type: _Modal.ANIMATION_TYPE.SLIDE
     }];
-  }, [animationType, fullScreen]);
-  const initialOpacity = animationType === _Modal.ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  }, [animationType]);
+  const initialOpacity = animationType === _Modal.ANIMATION_TYPE.SLIDE ? 1 : undefined;
   const initialTranslateY = animationType === _Modal.ANIMATION_TYPE.FADE ? 0 : undefined;
   const paperStyle = (0, _styles.css)([styles.paper, styleProp]);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
@@ -132,7 +131,7 @@ function Dialog(props) {
       size
     }
   }, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
-    style: fullScreen ? undefined : styles.topElementContainer
+    style: styles.topElementContainer
   }, /*#__PURE__*/_react.default.createElement(_Column.default, {
     style: styles.topElementContent,
     onLayout: handleTopElementLayout

package/build/commonjs/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["TOP_ELEMENT_OFFSET","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","useDialogStyle","height","screenHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","css","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":["TOP_ELEMENT_OFFSET","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","useDialogStyle","height","screenHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","css","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/commonjs/Dialog/DialogProps.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dialogSizes = void 0;
-const dialogSizes = ['small', 'medium', 'large'];
+const dialogSizes = ['small', 'medium', 'large', 'full'];
 exports.dialogSizes = dialogSizes;
 //# sourceMappingURL=DialogProps.js.map

package/build/commonjs/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":";;;;;;AAKO,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":";;;;;;AAKO,MAAMA,WAAW,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6B,MAA7B,CAApB"}

package/build/commonjs/Dialog/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "default", {
     return _Dialog.default;
   }
 });
+Object.defineProperty(exports, "dialogSizes", {
+  enumerable: true,
+  get: function () {
+    return _DialogProps.dialogSizes;
+  }
+});
 Object.defineProperty(exports, "useDialogContext", {
   enumerable: true,
   get: function () {
@@ -30,6 +36,8 @@ Object.defineProperty(exports, "useDialogSectionStyle", {
 
 var _Dialog = _interopRequireDefault(require("./Dialog"));
 
+var _DialogProps = require("./DialogProps");
+
 var _DialogContext = require("./DialogContext");
 
 var _useDialogSectionStyle = _interopRequireDefault(require("./useDialogSectionStyle"));

package/build/commonjs/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Dialog';\nexport type { default as DialogProps } from './DialogProps';\nexport { DialogProvider, useDialogContext } from './DialogContext';\nexport { default as useDialogSectionStyle } from './useDialogSectionStyle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Dialog';\nexport type { default as DialogProps } from './DialogProps';\nexport { dialogSizes } from './DialogProps';\nexport { DialogProvider, useDialogContext } from './DialogContext';\nexport { default as useDialogSectionStyle } from './useDialogSectionStyle';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA"}

package/build/commonjs/Dialog/useDialogSectionStyle.js

@@ -24,15 +24,15 @@ function useDialogSectionStyle() {
   return (0, _react.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/commonjs/Dialog/useDialogSectionStyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDialogSectionStyle","size","useDialogContext","width","windowWidth","useWindowDimensions","theme","useTheme","useMemo","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;;AACA;;AAEA;;AACA;;AAGe,SAASA,qBAAT,GAAiC;EAC5C,MAAM;IAAEC;EAAF,IAAW,IAAAC,+BAAA,GAAjB;EAEA,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAyB,IAAAC,gCAAA,GAA/B;EAEA,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAyB,MAAM;IAClC,MAAMC,wBAA6D,GAAG;MAClEC,KAAK,EAAE;QACHC,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;MADhB,CAD2D;MAIlEC,MAAM,EAAE;QACJ;QACAF,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAcR,WAAW,IAAI,GAAf,GAAqB,CAArB,GAAyB,CAAvC;MAFf,CAJ0D;MAQlEU,KAAK,EAAE;QACHH,iBAAiB,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;MADhB;IAR2D,CAAtE;IAaA,OAAOH,wBAAwB,CAACR,IAAD,CAA/B;EACH,CAfM,EAeJ,CAACA,IAAD,EAAOK,KAAP,EAAcF,WAAd,CAfI,CAAP;AAgBH"}
+{"version":3,"names":["useDialogSectionStyle","size","useDialogContext","width","windowWidth","useWindowDimensions","theme","useTheme","useMemo","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;;AACA;;AAEA;;AACA;;AAGe,SAASA,qBAAT,GAAiC;EAC5C,MAAM;IAAEC;EAAF,IAAW,IAAAC,+BAAA,GAAjB;EAEA,MAAM;IAAEC,KAAK,EAAEC;EAAT,IAAyB,IAAAC,gCAAA,GAA/B;EAEA,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO,IAAAC,cAAA,EAAyB,MAAM;IAClC,MAAMC,wBAA6D,GAAG;MAClEC,KAAK,EAAE;QACHC,iBAAiB,EAAE;MADhB,CAD2D;MAIlEC,MAAM,EAAE;QACJD,iBAAiB,EAAEP,WAAW,IAAI,GAAf,GAAqB,EAArB,GAA0B;MADzC,CAJ0D;MAOlES,KAAK,EAAE;QACHF,iBAAiB,EAAE;MADhB,CAP2D;MAUlEG,IAAI,EAAE;IAV4D,CAAtE;IAaA,OAAOL,wBAAwB,CAACR,IAAD,CAA/B;EACH,CAfM,EAeJ,CAACA,IAAD,EAAOK,KAAP,EAAcF,WAAd,CAfI,CAAP;AAgBH"}

package/build/commonjs/Dialog/useDialogStyle.js

@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
 
 var _styles = require("../styles");
 
-function useDialogStyle(size, fullScreen) {
+function useDialogStyle(size) {
   const theme = (0, _styles.useTheme)();
   const {
     height: windowHeight,
@@ -31,28 +31,29 @@ 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%'
@@ -74,6 +75,6 @@ function useDialogStyle(size, fullScreen) {
         width: '100%'
       }
     };
-  }, [theme, windowHeight, windowWidth, size, fullScreen]);
+  }, [theme, windowHeight, windowWidth, size]);
 }
 //# sourceMappingURL=useDialogStyle.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useDialogStyle","size","fullScreen","theme","useTheme","height","windowHeight","width","windowWidth","useWindowDimensions","useMemo","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;;AACA;;AAEA;;AAYe,SAASA,cAAT,CAAwBC,IAAxB,EAA0CC,UAA1C,EAA6E;EACxF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IACFC,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGF,IAAAC,gCAAA,GAHJ;EAKA,OAAO,IAAAC,cAAA,EAAQ,MAAM;IAAA;;IACjB,MAAMC,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;QAGHT,KAAK,EAAE;MAHJ;IAP+C,CAA1D;IAcA,MAAMU,wBAAwB,GAAGd,KAAK,CAACe,OAAN,CAAc,CAAd,CAAjC;IACA,MAAMC,eAAe,GAAGb,YAAY,GAAGW,wBAAwB,GAAG,CAAlE;IACA,MAAMG,cAAc,yBAAGT,YAAY,CAACV,IAAD,CAAf,uDAAG,mBAAoBY,QAA3C;IAEA,OAAO;MACHQ,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAErB,KAAK,CAACqB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAExB,UAAU,GAAG;QACpBG,MAAM,EAAE,MADY;QAEpBE,KAAK,EAAE;MAFa,CAAH,GAGjB;QACAe,UAAU,EAAE,QADZ;QAEA;QACAK,iBAAiB,EAAExB,KAAK,CAACe,OAAN,CAAcV,WAAW,GAAG,GAAd,GAAoB,CAApB,GAAwB,CAAtC,CAHnB;QAIAoB,eAAe,EAAEX,wBAJjB;QAKAV,KAAK,EAAE;MALP,CATD;MAgBHsB,KAAK,EAAE3B,UAAU,GAAG;QAChB4B,eAAe,EAAE3B,KAAK,CAAC4B,OAAN,CAAcC,OAAd,CAAsBC,IADvB;QAEhB5B,MAAM,EAAE,MAFQ;QAGhBE,KAAK,EAAE;MAHS,CAAH,GAIb;QACAuB,eAAe,EAAE3B,KAAK,CAAC4B,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAE/B,KAAK,CAACgC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEnB,eAHX;QAIAoB,QAAQ,EAAE,QAJV;QAKAhC,KAAK,EAAE,MALP;QAMA,GAAGI,YAAY,CAACV,IAAD;MANf,CApBD;MA4BHuC,mBAAmB,EAAE;QACjB3B,QAAQ,EAAEO,cADO;QAEjBb,KAAK,EAAE;MAFU,CA5BlB;MAgCHkC,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfC,MAAM,EAAE,CAFO;QAGfpC,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CAzDM,EAyDJ,CAACJ,KAAD,EAAQG,YAAR,EAAsBE,WAAtB,EAAmCP,IAAnC,EAAyCC,UAAzC,CAzDI,CAAP;AA0DH"}
+{"version":3,"names":["useDialogStyle","size","theme","useTheme","height","windowHeight","width","windowWidth","useWindowDimensions","useMemo","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;;AACA;;AAEA;;AAYe,SAASA,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAM;IACFC,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGF,IAAAC,gCAAA,GAHJ;EAKA,OAAO,IAAAC,cAAA,EAAQ,MAAM;IAAA;;IACjB,MAAMC,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;QAGHT,KAAK,EAAE;MAHJ,CAP+C;MAYtDU,IAAI,EAAE;IAZgD,CAA1D;IAeA,MAAMC,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGb,YAAY,GAAGY,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGT,YAAY,CAACT,IAAD,CAAf,uDAAG,mBAAoBW,QAA3C;IAEA,MAAMQ,YAAY,GAAGnB,IAAI,KAAK,MAA9B;IAEA,OAAO;MACHoB,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAEtB,KAAK,CAACsB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBhB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAgB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAEpB,WAAW,GAAGL,KAAK,CAAC0B,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAX,KAAK,EAAE;MAJP,CATD;MAeH0B,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBhC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE;MAHW,CAAH,GAIf;QACA2B,eAAe,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAEnC,KAAK,CAACoC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKApC,KAAK,EAAE,MALP;QAMA,GAAGI,YAAY,CAACT,IAAD;MANf,CAnBD;MA2BH0C,mBAAmB,EAAE;QACjB/B,QAAQ,EAAEO,cADO;QAEjBb,KAAK,EAAE;MAFU,CA3BlB;MA+BHsC,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfC,MAAM,EAAE,CAFO;QAGfxC,KAAK,EAAE;MAHQ;IA/BhB,CAAP;EAqCH,CA3DM,EA2DJ,CAACJ,KAAD,EAAQG,YAAR,EAAsBE,WAAtB,EAAmCN,IAAnC,CA3DI,CAAP;AA4DH"}

package/build/commonjs/DialogContent/DialogContent.js

@@ -40,8 +40,7 @@ function DialogContent(props) {
   const sectionStyle = (0, _Dialog.useDialogSectionStyle)();
   const rootStyle = (0, _styles.css)([styles.root, sectionStyle, styleProp]);
   const contentFontStyle = (0, _styles.createFontStyle)(theme, {
-    // TODO: select typography.
-    // selector: (typography) => typography.body2.regular,
+    selector: typography => typography.body2.regular,
     color: theme.palette.text.base
   });
   const contentStyle = (0, _styles.css)([contentFontStyle, {

package/build/commonjs/DialogContent/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","flexGrow","flexShrink","marginVertical","spacing","DialogContent","props","children","style","styleProp","textAlign","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css","contentFontStyle","createFontStyle","color","palette","text","base","contentStyle"],"sources":["DialogContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView, Text, TextStyle } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type DialogContentProps from './DialogContentProps';\n\ntype DialogContentStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<DialogContentStyles> = function (): DialogContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexGrow: 1,\n            flexShrink: 1,\n            marginVertical: theme.spacing(4),\n        },\n    };\n};\n\nexport default function DialogContent(props: DialogContentProps) {\n    const {\n        children,\n        style: styleProp,\n        textAlign = 'left' as TextStyle['textAlign'],\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 contentFontStyle = createFontStyle(theme, {\n        // TODO: select typography.\n        // selector: (typography) => typography.body2.regular,\n        color: theme.palette.text.base,\n    });\n\n    const contentStyle = css([\n        contentFontStyle,\n        { textAlign },\n    ]);\n\n    return (\n        <ScrollView\n            bounces={false}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {typeof children === 'string' ? (\n                <Text style={contentStyle}>\n                    {children}\n                </Text>\n            ) : (children)}\n        </ScrollView>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,SAAyC,GAAG,YAAiC;EAC/E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,QAAQ,EAAE,CADR;MAEFC,UAAU,EAAE,CAFV;MAGFC,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;IAHd;EADH,CAAP;AAOH,CAVD;;AAYe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGFC,SAAS,GAAG,MAHV;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMR,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMa,MAAM,GAAGf,SAAS,EAAxB;EAEA,MAAMgB,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACZ,IADW,EAElBa,YAFkB,EAGlBJ,SAHkB,CAAJ,CAAlB;EAMA,MAAMQ,gBAAgB,GAAG,IAAAC,uBAAA,EAAgBpB,KAAhB,EAAuB;IAC5C;IACA;IACAqB,KAAK,EAAErB,KAAK,CAACsB,OAAN,CAAcC,IAAd,CAAmBC;EAHkB,CAAvB,CAAzB;EAMA,MAAMC,YAAY,GAAG,IAAAP,WAAA,EAAI,CACrBC,gBADqB,EAErB;IAAEP;EAAF,CAFqB,CAAJ,CAArB;EAKA,oBACI,6BAAC,uBAAD;IACI,OAAO,EAAE,KADb;IAEI,KAAK,EAAEK;EAFX,GAGQJ,UAHR,GAKK,OAAOJ,QAAP,KAAoB,QAApB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEgB;EAAb,GACKhB,QADL,CADH,GAIIA,QATT,CADJ;AAaH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","flexGrow","flexShrink","marginVertical","spacing","DialogContent","props","children","style","styleProp","textAlign","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css","contentFontStyle","createFontStyle","selector","typography","body2","regular","color","palette","text","base","contentStyle"],"sources":["DialogContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView, Text, TextStyle } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type DialogContentProps from './DialogContentProps';\n\ntype DialogContentStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<DialogContentStyles> = function (): DialogContentStyles {\n    const theme = useTheme();\n\n    return {\n        root: {\n            flexGrow: 1,\n            flexShrink: 1,\n            marginVertical: theme.spacing(4),\n        },\n    };\n};\n\nexport default function DialogContent(props: DialogContentProps) {\n    const {\n        children,\n        style: styleProp,\n        textAlign = 'left' as TextStyle['textAlign'],\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 contentFontStyle = createFontStyle(theme, {\n        selector: (typography) => typography.body2.regular,\n        color: theme.palette.text.base,\n    });\n\n    const contentStyle = css([\n        contentFontStyle,\n        { textAlign },\n    ]);\n\n    return (\n        <ScrollView\n            bounces={false}\n            style={rootStyle}\n            {...otherProps}\n        >\n            {typeof children === 'string' ? (\n                <Text style={contentStyle}>\n                    {children}\n                </Text>\n            ) : (children)}\n        </ScrollView>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,SAAyC,GAAG,YAAiC;EAC/E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,QAAQ,EAAE,CADR;MAEFC,UAAU,EAAE,CAFV;MAGFC,cAAc,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;IAHd;EADH,CAAP;AAOH,CAVD;;AAYe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGFC,SAAS,GAAG,MAHV;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMR,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMa,MAAM,GAAGf,SAAS,EAAxB;EAEA,MAAMgB,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACZ,IADW,EAElBa,YAFkB,EAGlBJ,SAHkB,CAAJ,CAAlB;EAMA,MAAMQ,gBAAgB,GAAG,IAAAC,uBAAA,EAAgBpB,KAAhB,EAAuB;IAC5CqB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,KAAX,CAAiBC,OADC;IAE5CC,KAAK,EAAEzB,KAAK,CAAC0B,OAAN,CAAcC,IAAd,CAAmBC;EAFkB,CAAvB,CAAzB;EAKA,MAAMC,YAAY,GAAG,IAAAX,WAAA,EAAI,CACrBC,gBADqB,EAErB;IAAEP;EAAF,CAFqB,CAAJ,CAArB;EAKA,oBACI,6BAAC,uBAAD;IACI,OAAO,EAAE,KADb;IAEI,KAAK,EAAEK;EAFX,GAGQJ,UAHR,GAKK,OAAOJ,QAAP,KAAoB,QAApB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEoB;EAAb,GACKpB,QADL,CADH,GAIIA,QATT,CADJ;AAaH;;AAAA"}

package/build/commonjs/DialogTitle/BackButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BackButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _internal = require("../internal");
+
+var _styles = require("@fountain-ui/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    height: 40,
+    left: 20,
+    paddingLeft: 5,
+    paddingRight: 11,
+    paddingVertical: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+
+function BackButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = (0, _styles.css)([styles.root, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_internal.ChevronLeft, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=BackButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"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;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,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;;AAce,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,qBAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}

package/build/commonjs/DialogTitle/CloseButton.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CloseButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _internal = require("../internal");
+
+var _styles = require("@fountain-ui/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    height: 40,
+    left: 20,
+    padding: 8,
+    position: 'absolute',
+    width: 40
+  }
+});
+
+function CloseButton(props) {
+  const {
+    style: styleProp,
+    ...otherProps
+  } = props;
+  const rootStyle = (0, _styles.css)([styles.root, styleProp]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
+    style: rootStyle
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_internal.Close, {
+    color: 'strong',
+    size: 'large'
+  }));
+}
+//# sourceMappingURL=CloseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["styles","StyleSheet","create","root","height","left","padding","position","width","CloseButton","props","style","styleProp","otherProps","rootStyle","css"],"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;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,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;;AAYe,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBf,MAAM,CAACG,IADW,EAElBS,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,eAAD;IACI,KAAK,EAAE,QADX;IAEI,IAAI,EAAE;EAFV,EAJJ,CADJ;AAWH"}

package/build/commonjs/DialogTitle/DialogTitle.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DialogTitle;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,6 +13,10 @@ var _Dialog = require("../Dialog");
 
 var _styles = require("../styles");
 
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+var _CloseButton = _interopRequireDefault(require("./CloseButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -29,7 +33,7 @@ const useStyles = function () {
   };
 };
 
-function DialogTitle(props) {
+const DialogTitle = props => {
   const {
     children,
     style: styleProp,
@@ -49,7 +53,10 @@ function DialogTitle(props) {
   }), typeof children === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: titleStyle
   }, children) : children);
-}
+};
 
-;
+DialogTitle.BackButton = _BackButton.default;
+DialogTitle.CloseButton = _CloseButton.default;
+var _default = DialogTitle;
+exports.default = _default;
 //# sourceMappingURL=DialogTitle.js.map

package/build/commonjs/DialogTitle/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","paddingTop","spacing","title","textAlign","DialogTitle","props","children","style","styleProp","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css","titleFontStyle","createFontStyle","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;;AACA;;AAEA;;AACA;;;;;;AAKA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAEH,KAAK,CAACI,OAAN,CAAc,GAAd;IADV,CADH;IAIHC,KAAK,EAAE;MACHC,SAAS,EAAE;IADR;EAJJ,CAAP;AAQH,CAXD;;AAae,SAASC,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMR,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMY,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAMe,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAJ,CAAlB;EAMA,MAAMO,cAAc,GAAG,IAAAC,uBAAA,EAAgBnB,KAAhB,EAAuB;IAC1CoB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAExB,KAAK,CAACyB,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBJ,MAAM,CAACR,KADY,EAEnBa,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,iBAAD,eACQN,UADR;IAEI,KAAK,EAAEI;EAFX,IAIK,OAAOP,QAAP,KAAoB,QAApB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEmB;EAAb,GACKnB,QADL,CADH,GAIIA,QART,CADJ;AAYH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","paddingTop","spacing","title","textAlign","DialogTitle","props","children","style","styleProp","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","BackButton","CloseButton"],"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;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAEH,KAAK,CAACI,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,MAAMR,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMY,MAAM,GAAGd,SAAS,EAAxB;EAEA,MAAMe,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACX,IADW,EAElBY,YAFkB,EAGlBH,SAHkB,CAAJ,CAAlB;EAMA,MAAMO,cAAc,GAAG,IAAAC,uBAAA,EAAgBnB,KAAhB,EAAuB;IAC1CoB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAExB,KAAK,CAACyB,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBJ,MAAM,CAACR,KADY,EAEnBa,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,iBAAD,eACQN,UADR;IAEI,KAAK,EAAEI;EAFX,IAIK,OAAOP,QAAP,KAAoB,QAApB,gBACG,6BAAC,iBAAD;IAAM,KAAK,EAAEmB;EAAb,GACKnB,QADL,CADH,GAIIA,QART,CADJ;AAYH,CAzCD;;AA2CAF,WAAW,CAACsB,UAAZ,GAAyBA,mBAAzB;AAEAtB,WAAW,CAACuB,WAAZ,GAA0BA,oBAA1B;eAEevB,W"}

package/build/commonjs/Divider/Divider.js

@@ -9,13 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _styles = require("../styles");
+var _styles = require("@fountain-ui/styles");
+
+var _styles2 = require("../styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
 
-const styles = _styles.StyleSheet.create({
+const styles = _styles2.StyleSheet.create({
   container: {
     alignSelf: 'stretch',
     alignItems: 'center'
@@ -39,6 +41,12 @@ function selectBorderColor(theme, variant, vertical) {
 
     case 'strong':
       return vertical ? theme.palette.border.weak : theme.palette.border.base;
+
+    case 'strongStatic':
+      return _styles.commonColors.opacity.white['13'];
+
+    case 'baseStatic':
+      return _styles.commonColors.opacity.white['10'];
   }
 }
 
@@ -54,7 +62,7 @@ function Divider(props) {
     vertical = false,
     ...otherProps
   } = props;
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _styles2.useTheme)();
   const borderWidth = borderWidthProp ?? (vertical ? 1 : 0.5);
   const fontColor = theme.palette.text.weak;
   const borderColor = selectBorderColor(theme, variant, vertical);
@@ -86,8 +94,8 @@ function Divider(props) {
   } : {
     borderBottomWidth: borderWidth
   };
-  const containerStyle = (0, _styles.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
-  const dividerStyle = (0, _styles.css)([borderColorStyle, borderWidthStyle, styles.divider]);
+  const containerStyle = (0, _styles2.css)([insetStyle, marginStyle, styles.container, vertical ? styles.column : styles.row, childrenProp ? undefined : borderColorStyle, childrenProp ? undefined : borderWidthStyle, style]);
+  const dividerStyle = (0, _styles2.css)([borderColorStyle, borderWidthStyle, styles.divider]);
   const dividerMarginSize = theme.spacing(marginBetweenChildren);
   const startDividerStyle = {
     display: elementAlign !== 'start' ? 'flex' : 'none',
@@ -105,17 +113,17 @@ function Divider(props) {
       marginLeft: dividerMarginSize
     })
   };
-  const fontStyle = (0, _styles.createFontStyle)(theme, {
-    selector: typo => typo.caption2,
+  const fontStyle = (0, _styles2.createFontStyle)(theme, {
+    selector: typo => typo.caption2.medium,
     color: fontColor
   });
   const element = typeof childrenProp === 'string' ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: (0, _styles.css)(fontStyle)
+    style: (0, _styles2.css)(fontStyle)
   }, childrenProp) : childrenProp;
   const children = childrenProp ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)([dividerStyle, startDividerStyle])
+    style: (0, _styles2.css)([dividerStyle, startDividerStyle])
   }), element, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: (0, _styles.css)([dividerStyle, endDividerStyle])
+    style: (0, _styles2.css)([dividerStyle, endDividerStyle])
   })) : null;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: containerStyle

package/build/commonjs/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"names":["styles","StyleSheet","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","useTheme","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","createFontStyle","selector","typo","caption2","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,\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":["styles","StyleSheet","create","container","alignSelf","alignItems","row","flexDirection","column","divider","flexGrow","selectBorderColor","theme","variant","vertical","palette","border","weaker","weak","base","commonColors","opacity","white","Divider","props","borderWidth","borderWidthProp","children","childrenProp","elementAlign","inset","marginBetweenChildren","style","otherProps","useTheme","fontColor","text","borderColor","marginSize","spacing","insetSize","marginLeft","marginRight","marginTop","marginBottom","marginStyle","insetStyle","borderColorStyle","borderWidthStyle","borderRightWidth","borderBottomWidth","containerStyle","css","undefined","dividerStyle","dividerMarginSize","startDividerStyle","display","endDividerStyle","fontStyle","createFontStyle","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/commonjs/Divider/DividerProps.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.elementAligns = exports.dividerVariants = void 0;
-const elementAligns = ['start', 'center', 'end'];
-exports.elementAligns = elementAligns;
-const dividerVariants = ['base', 'strong'];
+exports.dividerVariants = exports.dividerElementAligns = void 0;
+const dividerElementAligns = ['start', 'center', 'end'];
+exports.dividerElementAligns = dividerElementAligns;
+const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'];
 exports.dividerVariants = dividerVariants;
 //# sourceMappingURL=DividerProps.js.map