@fountain-ui/core 2.0.0-beta.94 → 2.0.0-beta.95

package/build/commonjs/Dialog/Dialog.js

@@ -13,11 +13,15 @@ var _styles = require("@fountain-ui/styles");
 
 var _Column = _interopRequireDefault(require("../Column"));
 
+var _DialogMedia = _interopRequireDefault(require("../DialogMedia/DialogMedia"));
+
 var _Modal = _interopRequireWildcard(require("../Modal"));
 
 var _Paper = _interopRequireDefault(require("../Paper"));
 
-var _styles2 = require("../styles");
+var _utils = require("../utils");
+
+var _useDialogStyle = _interopRequireDefault(require("./useDialogStyle"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,50 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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 DIALOG_MAX_WIDTH = 328;
 const TOP_ELEMENT_OFFSET = 20;
 
-const useStyles = function () {
-  const theme = (0, _styles2.useTheme)();
-  const {
-    width
-  } = (0, _reactNative.useWindowDimensions)();
-  const margin = theme.spacing(4);
-  const dialogWidth = width - margin * 2;
-  return {
-    root: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: theme.zIndex.dialog
-    },
-    paper: {
-      borderRadius: theme.shape.roundnessExtra,
-      margin,
-      maxWidth: DIALOG_MAX_WIDTH,
-      overflow: 'hidden',
-      width: dialogWidth
-    },
-    paperFullScreen: {
-      flexGrow: 1
-    },
-    animation: {},
-    animationFullScreen: {
-      width: '100%',
-      height: '100%'
-    },
-    topElementSize: {
-      marginHorizontal: margin,
-      maxWidth: DIALOG_MAX_WIDTH,
-      width: dialogWidth
-    },
-    topElementPosition: {
-      position: 'absolute',
-      bottom: -1 * theme.spacing(4),
-      width: '100%'
-    }
-  };
-};
-
 function Dialog(props) {
   const {
     animationType = _Modal.ANIMATION_TYPE.SLIDE,
@@ -78,12 +40,13 @@ function Dialog(props) {
     fullScreen = false,
     hideBackdrop,
     onClose,
-    style = {},
+    style: styleProp,
+    size = 'medium',
     visible,
     topElement,
     ...otherProps
   } = props;
-  const styles = useStyles();
+  const styles = (0, _useDialogStyle.default)(size, fullScreen);
   const {
     height: screenHeight
   } = (0, _reactNative.useWindowDimensions)();
@@ -154,8 +117,21 @@ function Dialog(props) {
   }, [animationType, fullScreen]);
   const initialOpacity = animationType === _Modal.ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
   const initialTranslateY = animationType === _Modal.ANIMATION_TYPE.FADE ? 0 : undefined;
+  const paperStyle = (0, _styles.css)([styles.paper, styleProp]);
+
+  const contents = _react.Children.map(children, child => {
+    // @ts-ignore
+    if (child.type === _DialogMedia.default) {
+      return (0, _utils.cloneElementSafely)(child, {
+        style: styles.mediaWrapper
+      });
+    }
+
+    return child;
+  });
+
   return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
-    animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
+    animationStyle: styles.container,
     closeAnimation: closeAnimation,
     hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
     initialOpacity: initialOpacity,
@@ -166,15 +142,15 @@ function Dialog(props) {
     visible: visible,
     style: styles.root
   }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
-    style: fullScreen ? undefined : styles.topElementSize
+    style: fullScreen ? undefined : styles.topElementContainer
   }, /*#__PURE__*/_react.default.createElement(_Column.default, {
-    style: styles.topElementPosition,
+    style: styles.topElementContent,
     onLayout: handleTopElementLayout
   }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
     elevation: 6,
     square: fullScreen,
-    style: (0, _styles.css)([fullScreen ? styles.paperFullScreen : styles.paper, style])
-  }, children)));
+    style: paperStyle
+  }, contents)));
 }
 
 ;

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

@@ -1 +1 @@
-{"version":3,"names":["DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","hideBackdrop","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './DialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            borderRadius: theme.shape.roundnessExtra,\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\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 = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\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    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column\n                            style={styles.topElementPosition}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}
+{"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","contents","Children","map","child","DialogMedia","cloneElementSafely","mediaWrapper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { Children, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport DialogMedia from '../DialogMedia/DialogMedia';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { cloneElementSafely, FalsyReactElement } from '../utils';\nimport type DialogProps from './DialogProps';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n    const {\n        animationType = ANIMATION_TYPE.SLIDE,\n        children,\n        fullScreen = false,\n        hideBackdrop,\n        onClose,\n        style: styleProp,\n        size = 'medium',\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useDialogStyle(size, fullScreen);\n\n    const { height: screenHeight } = useWindowDimensions();\n\n    const [topElementHeight, setTopElementHeight] = useState(0);\n    const handleTopElementLayout = (event: LayoutChangeEvent) => {\n        const { height } = event.nativeEvent.layout;\n        setTopElementHeight(height);\n    };\n\n    const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n        if (topElementHeight === 0) {\n            return [];\n        }\n\n        return [{\n            toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [topElementHeight]);\n\n    const closeAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 0,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: screenHeight,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    duration: 150,\n                    toValue: 0,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            duration: 150,\n            toValue: screenHeight,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen, screenHeight]);\n\n    const openAnimation = useMemo<AnimationUnit[]>(() => {\n        if (animationType === ANIMATION_TYPE.FADE) {\n            return [{\n                toValue: 1,\n                type: ANIMATION_TYPE.FADE,\n            }];\n        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {\n            return [\n                {\n                    toValue: 0,\n                    type: ANIMATION_TYPE.SLIDE,\n                },\n                {\n                    delay: 50,\n                    duration: 150,\n                    toValue: 1,\n                    type: ANIMATION_TYPE.FADE,\n                },\n            ];\n        }\n\n        return [{\n            toValue: 0,\n            type: ANIMATION_TYPE.SLIDE,\n        }];\n    }, [animationType, fullScreen]);\n\n    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;\n\n    const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n    const paperStyle = css([\n        styles.paper,\n        styleProp,\n    ]);\n\n    const contents = Children.map(children, (child) => {\n        // @ts-ignore\n        if (child.type === DialogMedia) {\n            return cloneElementSafely(child as FalsyReactElement, { style: styles.mediaWrapper });\n        }\n        return child;\n    });\n\n    return (\n        <Modal\n            animationStyle={styles.container}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementContainer}>\n                        <Column\n                            style={styles.topElementContent}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={paperStyle}\n                >\n                    {contents}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Dialog/DialogProps.js

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"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 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     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":""}
+{"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"}

package/build/commonjs/Dialog/LegacyDialog.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Dialog;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _styles = require("@fountain-ui/styles");
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+var _Modal = _interopRequireWildcard(require("../Modal"));
+
+var _Paper = _interopRequireDefault(require("../Paper"));
+
+var _styles2 = require("../styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 DIALOG_MAX_WIDTH = 328;
+const TOP_ELEMENT_OFFSET = 20;
+
+const useStyles = function () {
+  const theme = (0, _styles2.useTheme)();
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const margin = theme.spacing(4);
+  const dialogWidth = width - margin * 2;
+  return {
+    root: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: theme.zIndex.dialog
+    },
+    paper: {
+      borderRadius: theme.shape.roundnessExtra,
+      margin,
+      maxWidth: DIALOG_MAX_WIDTH,
+      overflow: 'hidden',
+      width: dialogWidth
+    },
+    paperFullScreen: {
+      flexGrow: 1
+    },
+    animation: {},
+    animationFullScreen: {
+      width: '100%',
+      height: '100%'
+    },
+    topElementSize: {
+      marginHorizontal: margin,
+      maxWidth: DIALOG_MAX_WIDTH,
+      width: dialogWidth
+    },
+    topElementPosition: {
+      position: 'absolute',
+      bottom: -1 * theme.spacing(4),
+      width: '100%'
+    }
+  };
+};
+
+function Dialog(props) {
+  const {
+    animationType = _Modal.ANIMATION_TYPE.SLIDE,
+    children,
+    fullScreen = false,
+    hideBackdrop,
+    onClose,
+    style = {},
+    visible,
+    topElement,
+    ...otherProps
+  } = props;
+  const styles = useStyles();
+  const {
+    height: screenHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const [topElementHeight, setTopElementHeight] = (0, _react.useState)(0);
+
+  const handleTopElementLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTopElementHeight(height);
+  };
+
+  const offsetAnimation = (0, _react.useMemo)(() => {
+    if (topElementHeight === 0) {
+      return [];
+    }
+
+    return [{
+      toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 2,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [topElementHeight]);
+  const closeAnimation = (0, _react.useMemo)(() => {
+    if (animationType === _Modal.ANIMATION_TYPE.FADE) {
+      return [{
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    } else if (animationType === _Modal.ANIMATION_TYPE.SLIDE && !fullScreen) {
+      return [{
+        toValue: screenHeight,
+        type: _Modal.ANIMATION_TYPE.SLIDE
+      }, {
+        duration: 150,
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      duration: 150,
+      toValue: screenHeight,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen, 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) {
+      return [{
+        toValue: 0,
+        type: _Modal.ANIMATION_TYPE.SLIDE
+      }, {
+        delay: 50,
+        duration: 150,
+        toValue: 1,
+        type: _Modal.ANIMATION_TYPE.FADE
+      }];
+    }
+
+    return [{
+      toValue: 0,
+      type: _Modal.ANIMATION_TYPE.SLIDE
+    }];
+  }, [animationType, fullScreen]);
+  const initialOpacity = animationType === _Modal.ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+  const initialTranslateY = animationType === _Modal.ANIMATION_TYPE.FADE ? 0 : undefined;
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
+    animationStyle: fullScreen ? styles.animationFullScreen : styles.animation,
+    closeAnimation: closeAnimation,
+    hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
+    initialOpacity: initialOpacity,
+    initialTranslateY: initialTranslateY,
+    onClose: onClose,
+    openAnimation: openAnimation,
+    offsetAnimation: offsetAnimation,
+    visible: visible,
+    style: styles.root
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement ? /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: fullScreen ? undefined : styles.topElementSize
+  }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+    style: styles.topElementPosition,
+    onLayout: handleTopElementLayout
+  }, topElement)) : null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+    elevation: 6,
+    square: fullScreen,
+    style: (0, _styles.css)([fullScreen ? styles.paperFullScreen : styles.paper, style])
+  }, children)));
+}
+
+;
+//# sourceMappingURL=LegacyDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["DIALOG_MAX_WIDTH","TOP_ELEMENT_OFFSET","useStyles","theme","useTheme","width","useWindowDimensions","margin","spacing","dialogWidth","root","alignItems","justifyContent","zIndex","dialog","paper","borderRadius","shape","roundnessExtra","maxWidth","overflow","paperFullScreen","flexGrow","animation","animationFullScreen","height","topElementSize","marginHorizontal","topElementPosition","position","bottom","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","fullScreen","hideBackdrop","onClose","style","visible","topElement","otherProps","styles","screenHeight","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","css"],"sources":["LegacyDialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport Paper from '../Paper';\nimport { useTheme } from '../styles';\nimport type DialogProps from './LegacyDialogProps';\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'paper'\n    | 'paperFullScreen'\n    | 'animation'\n    | 'animationFullScreen'\n    | 'topElementSize'\n    | 'topElementPosition';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nconst DIALOG_MAX_WIDTH = 328;\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nconst useStyles: UseStyles<DialogStyles> = function (): DialogStyles {\n    const theme = useTheme();\n\n    const { width } = useWindowDimensions();\n\n    const margin = theme.spacing(4);\n    const dialogWidth = width - margin * 2;\n\n    return {\n        root: {\n            alignItems: 'center',\n            justifyContent: 'center',\n            zIndex: theme.zIndex.dialog,\n        },\n        paper: {\n            borderRadius: theme.shape.roundnessExtra,\n            margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            overflow: 'hidden',\n            width: dialogWidth,\n        },\n        paperFullScreen: {\n            flexGrow: 1,\n        },\n        animation: {},\n        animationFullScreen: {\n            width: '100%',\n            height: '100%',\n        },\n        topElementSize: {\n            marginHorizontal: margin,\n            maxWidth: DIALOG_MAX_WIDTH,\n            width: dialogWidth,\n        },\n        topElementPosition: {\n            position: 'absolute',\n            bottom: -1 * theme.spacing(4),\n            width: '100%',\n        },\n    };\n};\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 = {},\n        visible,\n        topElement,\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\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    return (\n        <Modal\n            animationStyle={fullScreen ? styles.animationFullScreen : styles.animation}\n            closeAnimation={closeAnimation}\n            hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n            initialOpacity={initialOpacity}\n            initialTranslateY={initialTranslateY}\n            onClose={onClose}\n            openAnimation={openAnimation}\n            offsetAnimation={offsetAnimation}\n            visible={visible}\n            style={styles.root}\n            {...otherProps}\n        >\n            <React.Fragment>\n                {topElement ? (\n                    <Column style={fullScreen ? undefined : styles.topElementSize}>\n                        <Column\n                            style={styles.topElementPosition}\n                            onLayout={handleTopElementLayout}\n                        >\n                            {topElement}\n                        </Column>\n                    </Column>\n                ) : null}\n\n                <Paper\n                    elevation={6}\n                    square={fullScreen}\n                    style={css([\n                        fullScreen ? styles.paperFullScreen : styles.paper,\n                        style,\n                    ])}\n                >\n                    {children}\n                </Paper>\n            </React.Fragment>\n        </Modal>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Dialog/LegacyDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=LegacyDialogProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LegacyDialogProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ModalProps } from '../Modal';\nimport type { OverridableComponentProps } from '../types';\nimport { ANIMATION_TYPE } from '../Modal';\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     * Top element for displaying additional information on the dialog.\n     */\n    topElement?: React.ReactNode;\n}> {}\n"],"mappings":""}

package/build/commonjs/Dialog/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _Dialog.default;
+    return _LegacyDialog.default;
   }
 });
 
-var _Dialog = _interopRequireDefault(require("./Dialog"));
+var _LegacyDialog = _interopRequireDefault(require("./LegacyDialog"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyDialog';\nexport type { default as DialogProps } from './LegacyDialogProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/Dialog/useDialogStyle.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDialogStyle;
+
+var _react = require("react");
+
+var _reactNative = require("react-native");
+
+var _styles = require("../styles");
+
+function useDialogStyle(size, fullScreen) {
+  const theme = (0, _styles.useTheme)();
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  return (0, _react.useMemo)(() => {
+    var _sizeStyleMap$size, _sizeStyleMap$size2;
+
+    const sizeStyleMap = {
+      small: {
+        maxWidth: 260,
+        paddingHorizontal: theme.spacing(6)
+      },
+      medium: {
+        maxWidth: 400,
+        // TODO: need to refactor breakpoints.
+        paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6)
+      },
+      large: {
+        maxWidth: 512,
+        minHeight: 360,
+        paddingHorizontal: theme.spacing(8),
+        width: 512
+      }
+    };
+    const marginVertical = theme.spacing(6);
+    const dialogMaxHeight = windowHeight - marginVertical * 2;
+    const paddingHorizontal = (_sizeStyleMap$size = sizeStyleMap[size]) === null || _sizeStyleMap$size === void 0 ? void 0 : _sizeStyleMap$size.paddingHorizontal;
+    const dialogMaxWidth = (_sizeStyleMap$size2 = sizeStyleMap[size]) === null || _sizeStyleMap$size2 === void 0 ? void 0 : _sizeStyleMap$size2.maxWidth;
+    return {
+      root: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: theme.zIndex.dialog
+      },
+      container: fullScreen ? {
+        height: '100%',
+        width: '100%'
+      } : {
+        // TODO: need to refactor breakpoints.
+        marginHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4)
+      },
+      paper: fullScreen ? {
+        flexGrow: 1
+      } : {
+        marginVertical,
+        maxHeight: dialogMaxHeight,
+        overflow: 'hidden',
+        width: '100%',
+        ...sizeStyleMap[size]
+      },
+      topElementContainer: {
+        maxWidth: dialogMaxWidth,
+        width: '100%'
+      },
+      topElementContent: {
+        position: 'absolute',
+        bottom: -1 * theme.spacing(4),
+        width: '100%'
+      },
+      mediaWrapper: {
+        marginHorizontal: theme.spacing(4) - (paddingHorizontal ?? 0)
+      }
+    };
+  }, [theme, windowHeight, windowWidth, size, fullScreen]);
+}
+//# sourceMappingURL=useDialogStyle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useDialogStyle","size","fullScreen","theme","useTheme","height","windowHeight","width","windowWidth","useWindowDimensions","useMemo","sizeStyleMap","small","maxWidth","paddingHorizontal","spacing","medium","large","minHeight","marginVertical","dialogMaxHeight","dialogMaxWidth","root","alignItems","justifyContent","zIndex","dialog","container","marginHorizontal","paper","flexGrow","maxHeight","overflow","topElementContainer","topElementContent","position","bottom","mediaWrapper"],"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 SizeStyleMap = FountainUiStyle & {\n    maxWidth: number;\n    paddingHorizontal: number;\n}\n\ntype DialogStyleKeys =\n    | 'root'\n    | 'container'\n    | 'paper'\n    | 'topElementContainer'\n    | 'topElementContent'\n    | 'mediaWrapper';\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, SizeStyleMap> = {\n            small: {\n                maxWidth: 260,\n                paddingHorizontal: theme.spacing(6),\n            },\n            medium: {\n                maxWidth: 400,\n                // TODO: need to refactor breakpoints.\n                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),\n            },\n            large: {\n                maxWidth: 512,\n                minHeight: 360,\n                paddingHorizontal: theme.spacing(8),\n                width: 512,\n            },\n        };\n\n        const marginVertical = theme.spacing(6);\n        const dialogMaxHeight = windowHeight - marginVertical * 2;\n        const paddingHorizontal = sizeStyleMap[size]?.paddingHorizontal;\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                // TODO: need to refactor breakpoints.\n                marginHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),\n            },\n            paper: fullScreen ? {\n                flexGrow: 1,\n            } : {\n                marginVertical,\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: -1 * theme.spacing(4),\n                width: '100%',\n            },\n            mediaWrapper: {\n                marginHorizontal: theme.spacing(4) - (paddingHorizontal ?? 0),\n            },\n        };\n    }, [theme, windowHeight, windowWidth, size, fullScreen]);\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAkBe,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,YAA8C,GAAG;MACnDC,KAAK,EAAE;QACHC,QAAQ,EAAE,GADP;QAEHC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd;MAFhB,CAD4C;MAKnDC,MAAM,EAAE;QACJH,QAAQ,EAAE,GADN;QAEJ;QACAC,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAcP,WAAW,IAAI,GAAf,GAAqB,CAArB,GAAyB,CAAvC;MAHf,CAL2C;MAUnDS,KAAK,EAAE;QACHJ,QAAQ,EAAE,GADP;QAEHK,SAAS,EAAE,GAFR;QAGHJ,iBAAiB,EAAEX,KAAK,CAACY,OAAN,CAAc,CAAd,CAHhB;QAIHR,KAAK,EAAE;MAJJ;IAV4C,CAAvD;IAkBA,MAAMY,cAAc,GAAGhB,KAAK,CAACY,OAAN,CAAc,CAAd,CAAvB;IACA,MAAMK,eAAe,GAAGd,YAAY,GAAGa,cAAc,GAAG,CAAxD;IACA,MAAML,iBAAiB,yBAAGH,YAAY,CAACV,IAAD,CAAf,uDAAG,mBAAoBa,iBAA9C;IACA,MAAMO,cAAc,0BAAGV,YAAY,CAACV,IAAD,CAAf,wDAAG,oBAAoBY,QAA3C;IAEA,OAAO;MACHS,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAEtB,KAAK,CAACsB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEzB,UAAU,GAAG;QACpBG,MAAM,EAAE,MADY;QAEpBE,KAAK,EAAE;MAFa,CAAH,GAGjB;QACA;QACAqB,gBAAgB,EAAEzB,KAAK,CAACY,OAAN,CAAcP,WAAW,GAAG,GAAd,GAAoB,CAApB,GAAwB,CAAtC;MAFlB,CATD;MAaHqB,KAAK,EAAE3B,UAAU,GAAG;QAChB4B,QAAQ,EAAE;MADM,CAAH,GAEb;QACAX,cADA;QAEAY,SAAS,EAAEX,eAFX;QAGAY,QAAQ,EAAE,QAHV;QAIAzB,KAAK,EAAE,MAJP;QAKA,GAAGI,YAAY,CAACV,IAAD;MALf,CAfD;MAsBHgC,mBAAmB,EAAE;QACjBpB,QAAQ,EAAEQ,cADO;QAEjBd,KAAK,EAAE;MAFU,CAtBlB;MA0BH2B,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfC,MAAM,EAAE,CAAC,CAAD,GAAKjC,KAAK,CAACY,OAAN,CAAc,CAAd,CAFE;QAGfR,KAAK,EAAE;MAHQ,CA1BhB;MA+BH8B,YAAY,EAAE;QACVT,gBAAgB,EAAEzB,KAAK,CAACY,OAAN,CAAc,CAAd,KAAoBD,iBAAiB,IAAI,CAAzC;MADR;IA/BX,CAAP;EAmCH,CA3DM,EA2DJ,CAACX,KAAD,EAAQG,YAAR,EAAsBE,WAAtB,EAAmCP,IAAnC,EAAyCC,UAAzC,CA3DI,CAAP;AA4DH"}

package/build/commonjs/DialogActions/DialogActions.js

@@ -22,8 +22,8 @@ function DialogActions(props) {
   } = props;
   return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({
     alignItems: 'center',
-    insets: _styles.EdgeInsets.all(6)
-  }, otherProps), /*#__PURE__*/_react.default.createElement(_Column.default, null, children));
+    insets: _styles.EdgeInsets.fromLTRB(0, 2, 0, 4)
+  }, otherProps), children);
 }
 
 ;

package/build/commonjs/DialogActions/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["DialogActions","props","children","otherProps","EdgeInsets","all"],"sources":["DialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport Column from '../Column';\nimport { EdgeInsets } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\nexport default function DialogActions(props: DialogActionsProps) {\n    const {\n        children,\n        ...otherProps\n    } = props;\n\n    return (\n        <Column\n            alignItems={'center'}\n            insets={EdgeInsets.all(6)}\n            {...otherProps}\n        >\n            <Column>\n                {children}\n            </Column>\n        </Column>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,oBACI,6BAAC,eAAD;IACI,UAAU,EAAE,QADhB;IAEI,MAAM,EAAEG,kBAAA,CAAWC,GAAX,CAAe,CAAf;EAFZ,GAGQF,UAHR,gBAKI,6BAAC,eAAD,QACKD,QADL,CALJ,CADJ;AAWH;;AAAA"}
+{"version":3,"names":["DialogActions","props","children","otherProps","EdgeInsets","fromLTRB"],"sources":["DialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport Column from '../Column';\nimport { EdgeInsets } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\nexport default function DialogActions(props: DialogActionsProps) {\n    const {\n        children,\n        ...otherProps\n    } = props;\n\n    return (\n        <Column\n            alignItems={'center'}\n            insets={EdgeInsets.fromLTRB(0, 2, 0, 4)}\n            {...otherProps}\n        >\n            {children}\n        </Column>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,oBACI,6BAAC,eAAD;IACI,UAAU,EAAE,QADhB;IAEI,MAAM,EAAEG,kBAAA,CAAWC,QAAX,CAAoB,CAApB,EAAuB,CAAvB,EAA0B,CAA1B,EAA6B,CAA7B;EAFZ,GAGQF,UAHR,GAKKD,QALL,CADJ;AASH;;AAAA"}

package/build/commonjs/DialogActions/LegacyDialogActions.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DialogActions;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+var _styles = 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); }
+
+function DialogActions(props) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({
+    alignItems: 'center',
+    insets: _styles.EdgeInsets.all(6)
+  }, otherProps), /*#__PURE__*/_react.default.createElement(_Column.default, null, children));
+}
+
+;
+//# sourceMappingURL=LegacyDialogActions.js.map

package/build/commonjs/DialogActions/LegacyDialogActions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DialogActions","props","children","otherProps","EdgeInsets","all"],"sources":["LegacyDialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport Column from '../Column';\nimport { EdgeInsets } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\nexport default function DialogActions(props: DialogActionsProps) {\n    const {\n        children,\n        ...otherProps\n    } = props;\n\n    return (\n        <Column\n            alignItems={'center'}\n            insets={EdgeInsets.all(6)}\n            {...otherProps}\n        >\n            <Column>\n                {children}\n            </Column>\n        </Column>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGe,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEF,GAAGC;EAFD,IAGFF,KAHJ;EAKA,oBACI,6BAAC,eAAD;IACI,UAAU,EAAE,QADhB;IAEI,MAAM,EAAEG,kBAAA,CAAWC,GAAX,CAAe,CAAf;EAFZ,GAGQF,UAHR,gBAKI,6BAAC,eAAD,QACKD,QADL,CALJ,CADJ;AAWH;;AAAA"}

package/build/commonjs/DialogActions/index.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _DialogActions.default;
+    return _LegacyDialogActions.default;
   }
 });
 
-var _DialogActions = _interopRequireDefault(require("./DialogActions"));
+var _LegacyDialogActions = _interopRequireDefault(require("./LegacyDialogActions"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './DialogActions';\nexport type { default as DialogActionsProps } from './DialogActionsProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './LegacyDialogActions';\nexport type { default as DialogActionsProps } from './DialogActionsProps';\n"],"mappings":";;;;;;;;;;;;AAAA"}