@codeleap/mobile 2.3.6 → 2.3.8

package/dist/components/Modal/index.d.ts

@@ -1,41 +1,41 @@
-import * as React from 'react';
-import { ViewProps } from '../View';
-import { ButtonProps } from '../Button';
-import { Scroll } from '../Scroll';
-import { ComponentVariants, IconPlaceholder, PropsOf } from '@codeleap/common';
-import { ModalComposition, ModalStyles } from './styles';
-import { StylesOf } from '../../types/utility';
-import { TextProps } from '../Text';
-import { GetKeyboardAwarePropsOptions } from '../../utils';
-export * from './styles';
-export declare type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-    variants?: ComponentVariants<typeof ModalStyles>['variants'];
-    styles?: StylesOf<ModalComposition>;
-    dismissOnBackdrop?: boolean;
-    buttonProps?: ButtonProps;
-    accessible?: boolean;
-    showClose?: boolean;
-    closable?: boolean;
-    footer?: React.ReactNode;
-    title?: React.ReactNode;
-    debugName: string;
-    closeIconName?: IconPlaceholder;
-    visible: boolean;
-    toggle?: () => void;
-    zIndex?: number;
-    scroll?: boolean;
-    header?: React.ReactElement;
-    closeOnHardwareBackPress?: boolean;
-    renderHeader?: (props: ModalHeaderProps) => React.ReactElement;
-    keyboardAware?: GetKeyboardAwarePropsOptions;
-    scrollProps?: PropsOf<typeof Scroll>;
-};
-export declare type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
-    styles: {
-        wrapper: ViewProps['style'];
-        title: TextProps['style'];
-        closeButton: ButtonProps['styles'];
-    };
-};
-export declare const Modal: React.FC<ModalProps>;
-export default Modal;
+import * as React from 'react';
+import { ViewProps } from '../View';
+import { ButtonProps } from '../Button';
+import { Scroll } from '../Scroll';
+import { ComponentVariants, IconPlaceholder, PropsOf } from '@codeleap/common';
+import { ModalComposition, ModalStyles } from './styles';
+import { StylesOf } from '../../types/utility';
+import { TextProps } from '../Text';
+import { GetKeyboardAwarePropsOptions } from '../../utils';
+export * from './styles';
+export declare type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
+    variants?: ComponentVariants<typeof ModalStyles>['variants'];
+    styles?: StylesOf<ModalComposition>;
+    dismissOnBackdrop?: boolean;
+    buttonProps?: ButtonProps;
+    accessible?: boolean;
+    showClose?: boolean;
+    closable?: boolean;
+    footer?: React.ReactNode;
+    title?: React.ReactNode;
+    debugName: string;
+    closeIconName?: IconPlaceholder;
+    visible: boolean;
+    toggle?: () => void;
+    zIndex?: number;
+    scroll?: boolean;
+    header?: React.ReactElement;
+    closeOnHardwareBackPress?: boolean;
+    renderHeader?: (props: ModalHeaderProps) => React.ReactElement;
+    keyboardAware?: GetKeyboardAwarePropsOptions;
+    scrollProps?: PropsOf<typeof Scroll>;
+};
+export declare type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
+    styles: {
+        wrapper: ViewProps['style'];
+        title: TextProps['style'];
+        closeButton: ButtonProps['styles'];
+    };
+};
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Modal/index.js

@@ -1,144 +1,144 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
-var React = __importStar(require("react"));
-var View_1 = require("../View");
-var Button_1 = require("../Button");
-var Scroll_1 = require("../Scroll");
-var common_1 = require("@codeleap/common");
-var react_native_1 = require("react-native");
-var moti_1 = require("moti");
-var Backdrop_1 = require("../Backdrop");
-var hooks_1 = require("../../utils/hooks");
-var Text_1 = require("../Text");
-var Touchable_1 = require("../Touchable");
-__exportStar(require("./styles"), exports);
-var DefaultHeader = function (props) {
-    var styles = props.styles, _a = props.title, title = _a === void 0 ? null : _a, _b = props.showClose, showClose = _b === void 0 ? false : _b, closable = props.closable, debugName = props.debugName, _c = props.closeIconName, closeIconName = _c === void 0 ? 'close' : _c, toggle = props.toggle;
-    return <>
-    {(title || showClose) && (<View_1.View style={styles.wrapper}>
-        {typeof title === 'string' ? (<Text_1.Text text={title} style={styles.title}/>) : (title)}
-
-        {(showClose && closable) && (<Button_1.Button debugName={"".concat(debugName, " modal close button")} icon={closeIconName} variants={['icon']} onPress={toggle} styles={styles.closeButton}/>)}
-      </View_1.View>)}</>;
-};
-var Modal = function (modalProps) {
-    var _a = modalProps.variants, variants = _a === void 0 ? [] : _a, _b = modalProps.styles, styles = _b === void 0 ? {} : _b, visible = modalProps.visible, _c = modalProps.closable, closable = _c === void 0 ? true : _c, footer = modalProps.footer, children = modalProps.children, _d = modalProps.toggle, toggle = _d === void 0 ? function () { return null; } : _d, _e = modalProps.dismissOnBackdrop, dismissOnBackdrop = _e === void 0 ? true : _e, _f = modalProps.header, header = _f === void 0 ? null : _f, debugName = modalProps.debugName, _g = modalProps.scroll, scroll = _g === void 0 ? true : _g, renderHeader = modalProps.renderHeader, _h = modalProps.zIndex, zIndex = _h === void 0 ? null : _h, _j = modalProps.scrollProps, scrollProps = _j === void 0 ? {} : _j, _k = modalProps.closeOnHardwareBackPress, closeOnHardwareBackPress = _k === void 0 ? true : _k, props = __rest(modalProps, ["variants", "styles", "visible", "closable", "footer", "children", "toggle", "dismissOnBackdrop", "header", "debugName", "scroll", "renderHeader", "zIndex", "scrollProps", "closeOnHardwareBackPress"]);
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Modal', {
-        variants: variants,
-        transform: react_native_1.StyleSheet.flatten,
-        styles: styles,
-    });
-    function getStyles(key) {
-        var s = [
-            variantStyles[key],
-            styles[key],
-        ];
-        return react_native_1.StyleSheet.flatten(s);
-    }
-    var buttonStyles = React.useMemo(function () { return (0, common_1.getNestedStylesByKey)('closeButton', variantStyles); }, [variantStyles]);
-    var boxAnimationStates = (0, hooks_1.useStaticAnimationStyles)(variantStyles, ['box:hidden', 'box:visible']);
-    var boxAnimation = (0, moti_1.useDynamicAnimation)(function () {
-        return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'];
-    });
-    (0, common_1.onUpdate)(function () {
-        boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']);
-    }, [visible]);
-    var wrapperStyle = getStyles('wrapper');
-    var ScrollComponent = scroll ? Scroll_1.Scroll : View_1.View;
-    var scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper');
-    var headerProps = __assign(__assign({}, modalProps), { styles: {
-            wrapper: getStyles('header'),
-            title: getStyles('title'),
-            closeButton: buttonStyles,
-        } });
-    var Header = renderHeader || DefaultHeader;
-    (0, hooks_1.useBackButton)(function () {
-        if (visible && closeOnHardwareBackPress) {
-            toggle();
-            return true;
-        }
-    }, [visible, toggle, closeOnHardwareBackPress]);
-    return (<View_1.View style={[wrapperStyle, { zIndex: common_1.TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.zIndex }]} pointerEvents={visible ? 'auto' : 'none'}>
-
-      <Backdrop_1.Backdrop visible={visible} debugName={"Modal ".concat(debugName, " backdrop")} styles={{
-            'wrapper:hidden': variantStyles['backdrop:hidden'],
-            'wrapper:visible': variantStyles['backdrop:visible'],
-            wrapper: variantStyles.backdrop,
-        }} wrapperProps={{
-            transition: __assign({}, variantStyles['backdrop:transition']),
-        }}/>
-      <ScrollComponent style={scrollStyle} contentContainerStyle={getStyles('scrollContent')} keyboardAware={{
-            adapt: 'marginBottom',
-            baseStyleProp: 'style',
-            animated: true,
-            enabled: visible,
-            enableOnAndroid: true,
-        }} animated {...scrollProps}>
-        {dismissOnBackdrop &&
-            <Touchable_1.Touchable onPress={closable ? toggle : (function () { })} debounce={400} debugName={'Modal backdrop touchable'} style={variantStyles.backdropTouchable} android_ripple={null} noFeedback/>}
-
-        <View_1.View animated state={boxAnimation} style={getStyles('box')} transition={__assign({}, variantStyles['box:transition'])} {...props}>
-
-          {header ? header : <Header {...headerProps}/>}
-
-          <View_1.View style={getStyles('body')}>{children}</View_1.View>
-          {footer && (<View_1.View style={getStyles('footer')}>
-              {typeof footer === 'string' ? <Text_1.Text text={footer}/> : footer}
-            </View_1.View>)}
-        </View_1.View>
-
-      </ScrollComponent>
-    </View_1.View>);
-};
-exports.Modal = Modal;
-exports.default = exports.Modal;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+var React = __importStar(require("react"));
+var View_1 = require("../View");
+var Button_1 = require("../Button");
+var Scroll_1 = require("../Scroll");
+var common_1 = require("@codeleap/common");
+var react_native_1 = require("react-native");
+var moti_1 = require("moti");
+var Backdrop_1 = require("../Backdrop");
+var hooks_1 = require("../../utils/hooks");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+__exportStar(require("./styles"), exports);
+var DefaultHeader = function (props) {
+    var styles = props.styles, _a = props.title, title = _a === void 0 ? null : _a, _b = props.showClose, showClose = _b === void 0 ? false : _b, closable = props.closable, debugName = props.debugName, _c = props.closeIconName, closeIconName = _c === void 0 ? 'close' : _c, toggle = props.toggle;
+    return <>
+    {(title || showClose) && (<View_1.View style={styles.wrapper}>
+        {typeof title === 'string' ? (<Text_1.Text text={title} style={styles.title}/>) : (title)}
+
+        {(showClose && closable) && (<Button_1.Button debugName={"".concat(debugName, " modal close button")} icon={closeIconName} variants={['icon']} onPress={toggle} styles={styles.closeButton}/>)}
+      </View_1.View>)}</>;
+};
+var Modal = function (modalProps) {
+    var _a = modalProps.variants, variants = _a === void 0 ? [] : _a, _b = modalProps.styles, styles = _b === void 0 ? {} : _b, visible = modalProps.visible, _c = modalProps.closable, closable = _c === void 0 ? true : _c, footer = modalProps.footer, children = modalProps.children, _d = modalProps.toggle, toggle = _d === void 0 ? function () { return null; } : _d, _e = modalProps.dismissOnBackdrop, dismissOnBackdrop = _e === void 0 ? true : _e, _f = modalProps.header, header = _f === void 0 ? null : _f, debugName = modalProps.debugName, _g = modalProps.scroll, scroll = _g === void 0 ? true : _g, renderHeader = modalProps.renderHeader, _h = modalProps.zIndex, zIndex = _h === void 0 ? null : _h, _j = modalProps.scrollProps, scrollProps = _j === void 0 ? {} : _j, _k = modalProps.closeOnHardwareBackPress, closeOnHardwareBackPress = _k === void 0 ? true : _k, props = __rest(modalProps, ["variants", "styles", "visible", "closable", "footer", "children", "toggle", "dismissOnBackdrop", "header", "debugName", "scroll", "renderHeader", "zIndex", "scrollProps", "closeOnHardwareBackPress"]);
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Modal', {
+        variants: variants,
+        transform: react_native_1.StyleSheet.flatten,
+        styles: styles,
+    });
+    function getStyles(key) {
+        var s = [
+            variantStyles[key],
+            styles[key],
+        ];
+        return react_native_1.StyleSheet.flatten(s);
+    }
+    var buttonStyles = React.useMemo(function () { return (0, common_1.getNestedStylesByKey)('closeButton', variantStyles); }, [variantStyles]);
+    var boxAnimationStates = (0, hooks_1.useStaticAnimationStyles)(variantStyles, ['box:hidden', 'box:visible']);
+    var boxAnimation = (0, moti_1.useDynamicAnimation)(function () {
+        return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'];
+    });
+    (0, common_1.onUpdate)(function () {
+        boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']);
+    }, [visible]);
+    var wrapperStyle = getStyles('wrapper');
+    var ScrollComponent = scroll ? Scroll_1.Scroll : View_1.View;
+    var scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper');
+    var headerProps = __assign(__assign({}, modalProps), { styles: {
+            wrapper: getStyles('header'),
+            title: getStyles('title'),
+            closeButton: buttonStyles,
+        } });
+    var Header = renderHeader || DefaultHeader;
+    (0, hooks_1.useBackButton)(function () {
+        if (visible && closeOnHardwareBackPress) {
+            toggle();
+            return true;
+        }
+    }, [visible, toggle, closeOnHardwareBackPress]);
+    return (<View_1.View style={[wrapperStyle, { zIndex: common_1.TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.zIndex }]} pointerEvents={visible ? 'auto' : 'none'}>
+
+      <Backdrop_1.Backdrop visible={visible} debugName={"Modal ".concat(debugName, " backdrop")} styles={{
+            'wrapper:hidden': variantStyles['backdrop:hidden'],
+            'wrapper:visible': variantStyles['backdrop:visible'],
+            wrapper: variantStyles.backdrop,
+        }} wrapperProps={{
+            transition: __assign({}, variantStyles['backdrop:transition']),
+        }}/>
+      <ScrollComponent style={scrollStyle} contentContainerStyle={getStyles('scrollContent')} keyboardAware={{
+            adapt: 'marginBottom',
+            baseStyleProp: 'style',
+            animated: true,
+            enabled: visible,
+            enableOnAndroid: true,
+        }} animated {...scrollProps}>
+        {dismissOnBackdrop &&
+            <Touchable_1.Touchable onPress={closable ? toggle : (function () { })} debounce={400} debugName={'Modal backdrop touchable'} style={variantStyles.backdropTouchable} android_ripple={null} noFeedback/>}
+
+        <View_1.View animated state={boxAnimation} style={getStyles('box')} transition={__assign({}, variantStyles['box:transition'])} {...props}>
+
+          {header ? header : <Header {...headerProps}/>}
+
+          <View_1.View style={getStyles('body')}>{children}</View_1.View>
+          {footer && (<View_1.View style={getStyles('footer')}>
+              {typeof footer === 'string' ? <Text_1.Text text={footer}/> : footer}
+            </View_1.View>)}
+        </View_1.View>
+
+      </ScrollComponent>
+    </View_1.View>);
+};
+exports.Modal = Modal;
+exports.default = exports.Modal;
 //# sourceMappingURL=index.js.map

package/dist/components/Modal/styles.d.ts

@@ -1,58 +1,58 @@
-import { ButtonComposition } from '@codeleap/common';
-export declare type AnimatableParts = 'box' | 'backdrop';
-export declare type ModalParts = AnimatableParts | 'wrapper' | 'innerWrapper' | 'scrollContent' | 'scroll' | 'body' | 'footer' | 'header' | 'backdropTouchable' | 'title' | `closeButton${Capitalize<ButtonComposition>}`;
-export declare type ModalComposition = ModalParts | `${AnimatableParts}:visible` | `${AnimatableParts}:hidden` | `${AnimatableParts}:transition`;
-export declare const ModalStyles: {
-    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    popup: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullscreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-};
+import { ButtonComposition } from '@codeleap/common';
+export declare type AnimatableParts = 'box' | 'backdrop';
+export declare type ModalParts = AnimatableParts | 'wrapper' | 'innerWrapper' | 'scrollContent' | 'scroll' | 'body' | 'footer' | 'header' | 'backdropTouchable' | 'title' | `closeButton${Capitalize<ButtonComposition>}`;
+export declare type ModalComposition = ModalParts | `${AnimatableParts}:visible` | `${AnimatableParts}:hidden` | `${AnimatableParts}:transition`;
+export declare const ModalStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    popup: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullscreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
+};