@codeleap/mobile 1.9.26 → 1.9.29

package/dist/components/Modal/index.js

@@ -55,13 +55,14 @@ var Button_1 = require("../Button");
 var Scroll_1 = require("../Scroll");
 var common_1 = require("@codeleap/common");
 var react_native_1 = require("react-native");
-var Touchable_1 = require("../Touchable");
+var moti_1 = require("moti");
+var Backdrop_1 = require("../Backdrop");
+var hooks_1 = require("../../utils/hooks");
 var Text_1 = require("../Text");
-var Animated_1 = require("../Animated");
 __exportStar(require("./styles"), exports);
 var Modal = function (modalProps) {
-    var _a = modalProps.variants, variants = _a === void 0 ? [] : _a, _b = modalProps.styles, styles = _b === void 0 ? {} : _b, visible = modalProps.visible, showClose = modalProps.showClose, _c = modalProps.closable, closable = _c === void 0 ? true : _c, title = modalProps.title, 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.closeIconName, closeIconName = _f === void 0 ? 'close' : _f, debugName = modalProps.debugName, _g = modalProps.scroll, scroll = _g === void 0 ? true : _g, _h = modalProps.keyboardAware, keyboardAware = _h === void 0 ? true : _h, props = __rest(modalProps, ["variants", "styles", "visible", "showClose", "closable", "title", "footer", "children", "toggle", "dismissOnBackdrop", "closeIconName", "debugName", "scroll", "keyboardAware"]);
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('Modal', {
+    var _a = modalProps.variants, variants = _a === void 0 ? [] : _a, _b = modalProps.styles, styles = _b === void 0 ? {} : _b, visible = modalProps.visible, showClose = modalProps.showClose, _c = modalProps.closable, closable = _c === void 0 ? true : _c, title = modalProps.title, 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.closeIconName, closeIconName = _f === void 0 ? 'close' : _f, debugName = modalProps.debugName, _g = modalProps.scroll, scroll = _g === void 0 ? true : _g, _h = modalProps.keyboardAware, keyboardAware = _h === void 0 ? true : _h, _j = modalProps.zIndex, zIndex = _j === void 0 ? null : _j, props = __rest(modalProps, ["variants", "styles", "visible", "showClose", "closable", "title", "footer", "children", "toggle", "dismissOnBackdrop", "closeIconName", "debugName", "scroll", "keyboardAware", "zIndex"]);
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Modal', {
         variants: variants,
         transform: react_native_1.StyleSheet.flatten,
         styles: styles,
@@ -70,41 +71,40 @@ var Modal = function (modalProps) {
         var s = [
             variantStyles[key],
             styles[key],
-            visible ? variantStyles[key + ':visible'] : {},
-            visible ? styles[key + ':visible'] : {},
         ];
-        return s;
+        return react_native_1.StyleSheet.flatten(s);
     }
-    var buttonStyles = React.useMemo(function () {
-        var buttonEntries = {};
-        for (var _i = 0, _a = Object.entries(variantStyles); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], style = _b[1];
-            if (key.startsWith('closeButton')) {
-                buttonEntries[(0, common_1.capitalize)(key.replace('closeButton', ''), true)] = style;
-            }
-        }
-        return buttonEntries;
-    }, [variantStyles]);
-    var boxAnimation = {
-        hidden: __assign(__assign({}, variantStyles['box:pose']), styles['box:pose']),
-        visible: __assign(__assign({}, variantStyles['box:pose:visible']), styles['box:pose:visible']),
-    };
-    return (<View_1.View style={getStyles('wrapper')} pointerEvents={visible ? 'auto' : 'none'}>
-      <View_1.AnimatedView style={getStyles('overlay')} transition={'opacity'}/>
+    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');
+    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'}>
+
       <Scroll_1.Scroll style={getStyles('innerWrapper')} contentContainerStyle={getStyles('innerWrapperScroll')} scrollEnabled={scroll} keyboardAware={keyboardAware}>
-        {dismissOnBackdrop && (<Touchable_1.Touchable debugName={"".concat(debugName, " modal backdrop")} activeOpacity={1} onPress={function () { return toggle(); }} style={getStyles('touchableBackdrop')}/>)}
-        <Animated_1.Animated component='View' config={boxAnimation} pose={visible ? 'visible' : 'hidden'} style={getStyles('box')}>
+        <Backdrop_1.Backdrop visible={visible} debugName={"Modal ".concat(debugName, " backdrop")} styles={{
+            'wrapper:hidden': variantStyles['backdrop:hidden'],
+            'wrapper:visible': variantStyles['backdrop:visible'],
+            wrapper: variantStyles.backdrop,
+        }} onPress={(dismissOnBackdrop && closable) ? toggle : (function () { })} wrapperProps={{
+            transition: __assign({}, variantStyles['backdrop:transition']),
+        }}/>
+        <View_1.View animated state={boxAnimation} style={getStyles('box')} transition={__assign({}, variantStyles['box:transition'])} {...props}>
           {(title || showClose) && (<View_1.View style={getStyles('header')}>
               {typeof title === 'string' ? (<Text_1.Text text={title} style={getStyles('title')}/>) : (title)}
 
-              {showClose && closable && (<Button_1.Button debugName={"".concat(debugName, " modal close button")} icon={closeIconName} variants={['icon']} onPress={toggle} styles={buttonStyles}/>)}
+              {(showClose && closable) && (<Button_1.Button debugName={"".concat(debugName, " modal close button")} icon={closeIconName} variants={['icon']} onPress={toggle} styles={buttonStyles}/>)}
             </View_1.View>)}
 
           <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>)}
-        </Animated_1.Animated>
+        </View_1.View>
       </Scroll_1.Scroll>
     </View_1.View>);
 };

package/dist/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,gCAAuD;AACvD,oCAA+C;AAC/C,oCAAkC;AAClC,2CAOyB;AAMzB,6CAAyC;AAGzC,0CAAwC;AACxC,gCAA8B;AAC9B,wCAAsC;AAEtC,2CAAwB;AAoBjB,IAAM,KAAK,GAAyB,UAAC,UAAU;IAElD,IAAA,KAeE,UAAU,SAfC,EAAb,QAAQ,mBAAG,EAAE,KAAA,EACb,KAcE,UAAU,OAdD,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,OAAO,GAaL,UAAU,QAbL,EACP,SAAS,GAYP,UAAU,UAZH,EACT,KAWE,UAAU,SAXG,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,KAAK,GAUH,UAAU,MAVP,EACL,MAAM,GASJ,UAAU,OATN,EACN,QAAQ,GAQN,UAAU,SARJ,EACR,KAOE,UAAU,OAPO,EAAnB,MAAM,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACnB,KAME,UAAU,kBANY,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,KAKE,UAAU,cALW,EAAvB,aAAa,mBAAG,OAAO,KAAA,EACvB,SAAS,GAIP,UAAU,UAJH,EACT,KAGE,UAAU,OAHC,EAAb,MAAM,mBAAG,IAAI,KAAA,EACb,KAEE,UAAU,cAFQ,EAApB,aAAa,mBAAG,IAAI,KAAA,EACjB,KAAK,UACN,UAAU,EAhBR,iLAgBL,CADS,CACI;IAEd,IAAM,aAAa,GAAG,IAAA,iCAAwB,EAAC,OAAO,EAAE;QACtD,QAAQ,EAAE,QAAe;QACzB,SAAS,EAAE,yBAAU,CAAC,OAAO;QAC7B,MAAM,QAAA;KACP,CAAyB,CAAA;IAE1B,SAAS,SAAS,CAAC,GAAqB;QACtC,IAAM,CAAC,GAAG;YACR,aAAa,CAAC,GAAG,CAAC;YAClB,MAAM,CAAC,GAAG,CAAC;YACX,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;YAC9C,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;SACxC,CAAA;QAED,OAAO,CAAC,CAAA;IACV,CAAC;IAED,IAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;QACjC,IAAM,aAAa,GAAG,EAAE,CAAA;QAExB,KAA2B,UAA6B,EAA7B,KAAA,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,EAA7B,cAA6B,EAA7B,IAA6B,EAAE;YAA/C,IAAA,WAAY,EAAX,GAAG,QAAA,EAAE,KAAK,QAAA;YACpB,IAAI,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE;gBACjC,aAAa,CAAC,IAAA,mBAAU,EAAC,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,KAAK,CAAA;aACxE;SACF;QACD,OAAO,aAAa,CAAA;IACtB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAM,YAAY,GAAG;QACnB,MAAM,wBACD,aAAa,CAAC,UAAU,CAAC,GACzB,MAAM,CAAC,UAAU,CAAC,CACtB;QACD,OAAO,wBACF,aAAa,CAAC,kBAAkB,CAAC,GACjC,MAAM,CAAC,kBAAkB,CAAC,CAC9B;KACF,CAAA;IAED,OAAO,CACL,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAC5B,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAEzC;MAAA,CAAC,mBAAY,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,EACjE;MAAA,CAAC,eAAM,CACL,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CACjC,qBAAqB,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CACvD,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,aAAa,CAAC,CAAC,aAAa,CAAC,CAE7B;QAAA,CAAC,iBAAiB,IAAI,CACpB,CAAC,qBAAS,CACR,SAAS,CAAC,CAAC,UAAG,SAAS,oBAAiB,CAAC,CACzC,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,OAAO,CAAC,CAAC,cAAM,OAAA,MAAM,EAAE,EAAR,CAAQ,CAAC,CACxB,KAAK,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,EACtC,CACH,CACD;QAAA,CAAC,mBAAQ,CACP,SAAS,CAAC,MAAM,CAChB,MAAM,CAAC,CAAC,YAAY,CAAC,CACrB,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CACrC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAExB;UAAA,CAAC,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,CACvB,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAC/B;cAAA,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,CAAC,WAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAG,CACjD,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAED;;cAAA,CAAC,SAAS,IAAI,QAAQ,IAAI,CACxB,CAAC,eAAM,CACL,SAAS,CAAC,CAAC,UAAG,SAAS,wBAAqB,CAAC,CAC7C,IAAI,CAAC,CAAC,aAAgC,CAAC,CACvC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CACnB,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,MAAM,CAAC,CAAC,YAAY,CAAC,EACrB,CACH,CACH;YAAA,EAAE,WAAI,CAAC,CACR,CAED;;UAAA,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,WAAI,CAChD;UAAA,CAAC,MAAM,IAAI,CACT,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAC/B;cAAA,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAG,CAAC,CAAC,CAAC,MAAM,CAC/D;YAAA,EAAE,WAAI,CAAC,CACR,CACH;QAAA,EAAE,mBAAQ,CACZ;MAAA,EAAE,eAAM,CACV;IAAA,EAAE,WAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAlHY,QAAA,KAAK,SAkHjB;AAED,kBAAe,aAAK,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,7 @@
-import { ButtonComposition, ModalComposition } from '@codeleap/common';
-export declare const backgroundTransition: {
-    duration: number;
-    ease: string;
-    useNativeDriver: boolean;
-};
-export declare const modalTransition: {
-    duration: number;
-    ease: string;
-    useNativeDriver: boolean;
-};
-export declare type MobileModalParts = 'wrapper' | 'overlay' | 'innerWrapper' | 'innerWrapperScroll' | 'box' | 'footer' | 'body' | 'header' | 'touchableBackdrop' | 'box:pose' | 'title' | `closeButton${Capitalize<ButtonComposition>}`;
-export declare type MobileModalComposition = MobileModalParts | `${MobileModalParts}:visible`;
+import { ButtonComposition } from '@codeleap/common';
+export declare type AnimatableParts = 'box' | 'backdrop';
+export declare type MobileModalParts = AnimatableParts | 'wrapper' | 'innerWrapper' | 'innerWrapperScroll' | 'body' | 'footer' | 'header' | 'title' | `closeButton${Capitalize<ButtonComposition>}`;
+export declare type MobileModalComposition = MobileModalParts | `${AnimatableParts}:visible` | `${AnimatableParts}:hidden` | `${AnimatableParts}:transition`;
 export declare const MobileModalStyles: {
     default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileModalComposition, any>>;
     popup: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileModalComposition, any>>;
@@ -64,6 +55,4 @@ export declare const MobileModalStyles: {
     debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileModalComposition, any>>;
     debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileModalComposition, any>>;
     debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<MobileModalComposition, any>>;
-    roundish: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
-    dynamicHandler: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ModalComposition, any>>;
 };

package/dist/components/Modal/styles.js

@@ -11,49 +11,53 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileModalStyles = exports.modalTransition = exports.backgroundTransition = void 0;
+exports.MobileModalStyles = void 0;
 var common_1 = require("@codeleap/common");
-exports.backgroundTransition = {
-    duration: 200,
-    ease: 'easeOut',
-    useNativeDriver: false,
-};
-exports.modalTransition = {
-    duration: 150,
-    ease: 'easeOut',
-    useNativeDriver: false,
-};
 var createModalStyle = (0, common_1.createDefaultVariantFactory)();
 var presets = (0, common_1.includePresets)(function (style) { return createModalStyle(function () { return ({ body: style }); }); });
-var defaultModalStyles = common_1.ModalStyles;
-exports.MobileModalStyles = __assign(__assign(__assign({}, defaultModalStyles), presets), { default: createModalStyle(function (Theme) {
-        var _a, _b;
-        var fullSize = __assign(__assign({}, Theme.presets.whole), { position: 'absolute', width: (_a = Theme === null || Theme === void 0 ? void 0 : Theme.values) === null || _a === void 0 ? void 0 : _a.width, height: (_b = Theme === null || Theme === void 0 ? void 0 : Theme.values) === null || _b === void 0 ? void 0 : _b.height });
+exports.MobileModalStyles = __assign(__assign({}, presets), { default: createModalStyle(function (Theme) {
+        var fullSize = __assign(__assign({}, Theme.presets.whole), { position: 'absolute' });
         return {
             wrapper: __assign({ zIndex: 1 }, fullSize),
-            overlay: __assign({ opacity: 0, backgroundColor: Theme.colors.black }, fullSize),
-            'overlay:visible': {
+            'box:transition': {
+                scale: {
+                    duration: Theme.values.transitions.modal.duration,
+                    type: 'timing',
+                },
+                opacity: {
+                    duration: Theme.values.transitions.modal.duration,
+                    type: 'timing',
+                },
+            },
+            'backdrop:transition': {
+                opacity: {
+                    duration: Theme.values.transitions.modal.duration,
+                    type: 'timing',
+                },
+            },
+            backdrop: __assign({ backgroundColor: Theme.colors.black }, fullSize),
+            'backdrop:visible': {
                 opacity: 0.5,
             },
+            'backdrop:hidden': {
+                opacity: 0,
+            },
             innerWrapper: {},
             innerWrapperScroll: __assign(__assign({ display: 'flex', alignItems: 'center' }, Theme.presets.justifyCenter), { minHeight: Theme.values.height }),
             box: __assign({ width: '80%', backgroundColor: Theme.colors.background, borderRadius: Theme.borderRadius.medium }, Theme.spacing.padding(2)),
-            touchableBackdrop: __assign({}, fullSize),
-            'box:pose': {
+            'box:hidden': {
                 opacity: 0,
                 scale: 0.8,
-                transition: exports.modalTransition,
             },
-            'box:pose:visible': {
+            'box:visible': {
                 opacity: 1,
                 scale: 1,
-                transition: exports.modalTransition,
             },
             header: __assign(__assign({ flexDirection: 'row' }, Theme.presets.justifySpaceBetween), Theme.presets.alignCenter),
             closeButtonWrapper: __assign({ alignSelf: 'center' }, Theme.spacing.marginLeft('auto')),
             title: __assign(__assign(__assign(__assign({}, Theme.presets.textCenter), (0, common_1.assignTextStyle)('h3')(Theme).text), Theme.spacing.paddingBottom(1)), { flex: 1 }),
         };
-    }), popup: createModalStyle(function (theme) { return ({}); }), fullscreen: createModalStyle(function (theme) { return ({
+    }), popup: createModalStyle(function () { return ({}); }), fullscreen: createModalStyle(function (theme) { return ({
         overlay: {
             backgroundColor: theme.colors.background,
         },

package/dist/components/Modal/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAOyB;AAEZ,QAAA,oBAAoB,GAAG;IAClC,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,KAAK;CACvB,CAAA;AAEY,QAAA,eAAe,GAAG;IAC7B,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,KAAK;CACvB,CAAA;AAoBD,IAAM,gBAAgB,GAAG,IAAA,oCAA2B,GAA0B,CAAA;AAE9E,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,KAAK,IAAK,OAAA,gBAAgB,CAAC,cAAM,OAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAjB,CAAiB,CAAC,EAAzC,CAAyC,CAClF,CAAA;AAED,IAAM,kBAAkB,GAAG,oBAAW,CAAA;AAEzB,QAAA,iBAAiB,kCACzB,kBAAkB,GAClB,OAAO,KACV,OAAO,EAAE,gBAAgB,CAAC,UAAC,KAAK;;QAC9B,IAAM,QAAQ,yBACT,KAAK,CAAC,OAAO,CAAC,KAAK,KACtB,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,EAC3B,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,MAAM,GAC9B,CAAA;QAED,OAAO;YACL,OAAO,aACL,MAAM,EAAE,CAAC,IAEN,QAAQ,CACZ;YAED,OAAO,aACL,OAAO,EAAE,CAAC,EAEV,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAChC,QAAQ,CACZ;YACD,iBAAiB,EAAE;gBACjB,OAAO,EAAE,GAAG;aACb;YACD,YAAY,EAAE,EAAE;YAChB,kBAAkB,sBAChB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,IACjB,KAAK,CAAC,OAAO,CAAC,aAAa,KAC9B,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAC/B;YACD,GAAG,aACD,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EACxC,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,IACpC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAC5B;YACD,iBAAiB,eACZ,QAAQ,CACZ;YACD,UAAU,EAAE;gBACV,OAAO,EAAE,CAAC;gBACV,KAAK,EAAE,GAAG;gBACV,UAAU,EAAE,uBAAe;aAC5B;YACD,kBAAkB,EAAE;gBAClB,OAAO,EAAE,CAAC;gBACV,KAAK,EAAE,CAAC;gBACR,UAAU,EAAE,uBAAe;aAC5B;YACD,MAAM,sBACJ,aAAa,EAAE,KAAK,IACjB,KAAK,CAAC,OAAO,CAAC,mBAAmB,GACjC,KAAK,CAAC,OAAO,CAAC,WAAW,CAC7B;YACD,kBAAkB,aAChB,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CACpC;YACD,KAAK,0CACA,KAAK,CAAC,OAAO,CAAC,UAAU,GACxB,IAAA,wBAAe,EAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,GACjC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,KACjC,IAAI,EAAE,CAAC,GACR;SACF,CAAA;IACH,CAAC,CAAC,EACF,KAAK,EAAE,gBAAgB,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC,EAAE,CAAC,EAAJ,CAAI,CAAC,EACxC,UAAU,EAAE,gBAAgB,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC;QACvC,OAAO,EAAE;YACP,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;SACzC;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,CAAC;SACX;QACD,GAAG,aACD,IAAI,EAAE,CAAC,EACP,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EACzB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,IACxB,KAAK,CAAC,OAAO,CAAC,MAAM,CACxB;KACF,CAAC,EAdsC,CActC,CAAC,IACJ"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ViewProps } from '../View';
+import { ButtonProps } from '../Button';
+import { ComponentVariants, IconPlaceholder } from '@codeleap/common';
+import { NewMobileModalComposition, NewMobileModalStyles } from './styles';
+import { StylesOf } from '../../types/utility';
+export * from './styles';
+export declare type NewModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
+    variants?: ComponentVariants<typeof NewMobileModalStyles>['variants'];
+    styles?: StylesOf<NewMobileModalComposition>;
+    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;
+    keyboardAware?: boolean;
+};
+export declare const NewModal: React.FC<NewModalProps>;
+export default NewModal;

package/dist/components/NewModal/index.js

@@ -0,0 +1,99 @@
+"use strict";
+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.NewModal = 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");
+__exportStar(require("./styles"), exports);
+var NewModal = function (modalProps) {
+    var _a = modalProps.variants, variants = _a === void 0 ? [] : _a, _b = modalProps.styles, styles = _b === void 0 ? {} : _b, visible = modalProps.visible, showClose = modalProps.showClose, _c = modalProps.closable, closable = _c === void 0 ? true : _c, title = modalProps.title, 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.closeIconName, closeIconName = _f === void 0 ? 'close' : _f, debugName = modalProps.debugName, _g = modalProps.scroll, scroll = _g === void 0 ? true : _g, _h = modalProps.keyboardAware, keyboardAware = _h === void 0 ? true : _h, _j = modalProps.zIndex, zIndex = _j === void 0 ? null : _j, props = __rest(modalProps, ["variants", "styles", "visible", "showClose", "closable", "title", "footer", "children", "toggle", "dismissOnBackdrop", "closeIconName", "debugName", "scroll", "keyboardAware", "zIndex"]);
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:NewModal', {
+        variants: variants,
+        transform: react_native_1.StyleSheet.flatten,
+        styles: styles,
+    });
+    function getStyles(key) {
+        var s = [
+            variantStyles[key],
+            styles[key],
+        ];
+        return 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]);
+    return (<View_1.View style={getStyles('wrapper')} pointerEvents={visible ? 'auto' : 'none'}>
+
+      <Scroll_1.Scroll style={getStyles('innerWrapper')} contentContainerStyle={getStyles('innerWrapperScroll')} scrollEnabled={scroll} keyboardAware={keyboardAware}>
+        <Backdrop_1.Backdrop visible={visible} debugName={"Modal ".concat(debugName, " backdrop")} styles={{
+            'wrapper:hidden': variantStyles['backdrop:hidden'],
+            'wrapper:visible': variantStyles['backdrop:visible'],
+            wrapper: variantStyles.backdrop,
+        }} onPress={(dismissOnBackdrop && closable) ? toggle : (function () { })}/>
+        <View_1.View animated state={boxAnimation} style={getStyles('box')}>
+          {(title || showClose) && (<View_1.View style={getStyles('header')}>
+              {typeof title === 'string' ? (<Text_1.Text text={title} style={getStyles('title')}/>) : (title)}
+
+              {(showClose && closable) && (<Button_1.Button debugName={"".concat(debugName, " modal close button")} icon={closeIconName} variants={['icon']} onPress={toggle} styles={buttonStyles}/>)}
+            </View_1.View>)}
+
+          <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>
+      </Scroll_1.Scroll>
+    </View_1.View>);
+};
+exports.NewModal = NewModal;
+exports.default = exports.NewModal;
+//# sourceMappingURL=index.js.map

package/dist/components/NewModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NewModal/index.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/components/NewModal/styles.js

@@ -0,0 +1,58 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewMobileModalStyles = void 0;
+var common_1 = require("@codeleap/common");
+var modalTransition = {
+    duration: 150,
+    ease: 'easeOut',
+    useNativeDriver: false,
+};
+var createModalStyle = (0, common_1.createDefaultVariantFactory)();
+var presets = (0, common_1.includePresets)(function (style) { return createModalStyle(function () { return ({ body: style }); }); });
+exports.NewMobileModalStyles = __assign(__assign({}, presets), { default: createModalStyle(function (Theme) {
+        var fullSize = __assign(__assign({}, Theme.presets.whole), { position: 'absolute' });
+        return {
+            wrapper: __assign({ zIndex: 1 }, fullSize),
+            backdrop: __assign({ backgroundColor: Theme.colors.black }, fullSize),
+            'backdrop:visible': {
+                opacity: 0.5,
+            },
+            'backdrop:hidden': {
+                opacity: 0,
+            },
+            innerWrapper: {},
+            innerWrapperScroll: __assign(__assign({ display: 'flex', alignItems: 'center' }, Theme.presets.justifyCenter), { minHeight: Theme.values.height }),
+            box: __assign({ width: '80%', backgroundColor: Theme.colors.background, borderRadius: Theme.borderRadius.medium }, Theme.spacing.padding(2)),
+            'box:hidden': {
+                opacity: 0,
+                scale: 0.8,
+            },
+            'box:visible': {
+                opacity: 1,
+                scale: 1,
+            },
+            header: __assign(__assign({ flexDirection: 'row' }, Theme.presets.justifySpaceBetween), Theme.presets.alignCenter),
+            closeButtonWrapper: __assign({ alignSelf: 'center' }, Theme.spacing.marginLeft('auto')),
+            title: __assign(__assign(__assign(__assign({}, Theme.presets.textCenter), (0, common_1.assignTextStyle)('h3')(Theme).text), Theme.spacing.paddingBottom(1)), { flex: 1 }),
+        };
+    }), popup: createModalStyle(function () { return ({}); }), fullscreen: createModalStyle(function (theme) { return ({
+        overlay: {
+            backgroundColor: theme.colors.background,
+        },
+        'overlay:visible': {
+            opacity: 1,
+        },
+        box: __assign({ flex: 1, borderRadius: 0, width: theme.values.width, height: theme.values.height }, theme.presets.center),
+    }); }) });
+//# sourceMappingURL=styles.js.map

package/dist/components/NewModal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/NewModal/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAKyB;AAEzB,IAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,KAAK;CACvB,CAAA;AAmBD,IAAM,gBAAgB,GAAG,IAAA,oCAA2B,GAA6B,CAAA;AAEjF,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,KAAK,IAAK,OAAA,gBAAgB,CAAC,cAAM,OAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAjB,CAAiB,CAAC,EAAzC,CAAyC,CAAC,CAAA;AAEvE,QAAA,oBAAoB,yBAE5B,OAAO,KACV,OAAO,EAAE,gBAAgB,CAAC,UAAC,KAAK;QAC9B,IAAM,QAAQ,yBACT,KAAK,CAAC,OAAO,CAAC,KAAK,KACtB,QAAQ,EAAE,UAAU,GACrB,CAAA;QAED,OAAO;YACL,OAAO,aACL,MAAM,EAAE,CAAC,IAEN,QAAQ,CACZ;YAED,QAAQ,aAEN,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAChC,QAAQ,CACZ;YACD,kBAAkB,EAAE;gBAClB,OAAO,EAAE,GAAG;aACb;YACD,iBAAiB,EAAE;gBACjB,OAAO,EAAE,CAAC;aACX;YACD,YAAY,EAAE,EAAE;YAChB,kBAAkB,sBAChB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,IACjB,KAAK,CAAC,OAAO,CAAC,aAAa,KAC9B,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAC/B;YACD,GAAG,aACD,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EACxC,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,IACpC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAC5B;YAED,YAAY,EAAE;gBACZ,OAAO,EAAE,CAAC;gBACV,KAAK,EAAE,GAAG;aAEX;YACD,aAAa,EAAE;gBACb,OAAO,EAAE,CAAC;gBACV,KAAK,EAAE,CAAC;aACT;YACD,MAAM,sBACJ,aAAa,EAAE,KAAK,IACjB,KAAK,CAAC,OAAO,CAAC,mBAAmB,GACjC,KAAK,CAAC,OAAO,CAAC,WAAW,CAC7B;YACD,kBAAkB,aAChB,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CACpC;YACD,KAAK,0CACA,KAAK,CAAC,OAAO,CAAC,UAAU,GACxB,IAAA,wBAAe,EAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,GACjC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,KACjC,IAAI,EAAE,CAAC,GACR;SACF,CAAA;IACH,CAAC,CAAC,EACF,KAAK,EAAE,gBAAgB,CAAC,cAAM,OAAA,CAAC,EAAE,CAAC,EAAJ,CAAI,CAAC,EACnC,UAAU,EAAE,gBAAgB,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC;QACvC,OAAO,EAAE;YACP,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;SACzC;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,CAAC;SACX;QACD,GAAG,aACD,IAAI,EAAE,CAAC,EACP,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EACzB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,IACxB,KAAK,CAAC,OAAO,CAAC,MAAM,CACxB;KACF,CAAC,EAdsC,CActC,CAAC,IACJ"}

package/dist/components/NewPager/index.js

@@ -35,8 +35,7 @@ var react_native_1 = require("react-native");
 var View_1 = require("../View");
 __exportStar(require("./styles"), exports);
 var NewPager = function (pagerProps) {
-    var styles = pagerProps.styles, variants = pagerProps.variants, page = pagerProps.page, _a = pagerProps.style, style = _a === void 0 ? {} : _a, _b = pagerProps.returnEarly, returnEarly = _b === void 0 ? true : _b, renderPageWrapper = pagerProps.renderPageWrapper, _c = pagerProps.pageWrapperProps, pageWrapperProps = _c === void 0 ? {} : _c;
-    var children = pagerProps.children;
+    var styles = pagerProps.styles, variants = pagerProps.variants, page = pagerProps.page, _a = pagerProps.style, style = _a === void 0 ? {} : _a, _b = pagerProps.returnEarly, returnEarly = _b === void 0 ? true : _b, renderPageWrapper = pagerProps.renderPageWrapper, _c = pagerProps.pageWrapperProps, pageWrapperProps = _c === void 0 ? {} : _c, children = pagerProps.children;
     var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Pager', {
         styles: styles,
         transform: react_native_1.StyleSheet.flatten,
@@ -44,12 +43,12 @@ var NewPager = function (pagerProps) {
     });
     var nChildren = react_1.default.Children.count(children);
     var lastPage = nChildren - 1;
-    children = Array.isArray(children) ? children : [children];
+    var childArr = react_1.default.Children.toArray(children);
     var WrapperComponent = renderPageWrapper || View_1.View;
     // Reamimated seems to glitch if this is not done
     variantStyles = JSON.parse(JSON.stringify(variantStyles));
     return (<View_1.View style={[variantStyles.wrapper, style]}>
-      {children.map(function (child, index) {
+      {childArr.map(function (child, index) {
             var isActive = index === page;
             var isLast = index === lastPage;
             var isFirst = index === 0;
@@ -77,9 +76,6 @@ var NewPager = function (pagerProps) {
                 index: index,
                 page: page,
             };
-            console.log({
-                child: child,
-            });
             var content = typeof child === 'function' ? child(pageProps) : child;
             var wrapperProps = __assign({ key: index, style: variantStyles.page, animated: true, transition: variantStyles['page:transition'], animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos] }, pageWrapperProps);
             return (<WrapperComponent {...wrapperProps}>

package/dist/components/NewPager/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NewPager/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NewPager/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Overlay.js

@@ -42,6 +42,7 @@ var Button_1 = require("./Button");
 var View_1 = require("./View");
 var react_native_1 = require("react-native");
 var Touchable_1 = require("./Touchable");
+var moti_1 = require("moti");
 var Overlay = function (overlayProps) {
     var showClose = overlayProps.showClose, title = overlayProps.title, children = overlayProps.children, visible = overlayProps.visible, _a = overlayProps.styles, styles = _a === void 0 ? {} : _a, style = overlayProps.style, variants = overlayProps.variants, props = __rest(overlayProps, ["showClose", "title", "children", "visible", "styles", "style", "variants"]);
     var variantStyles = (0, common_1.useDefaultComponentStyle)('Overlay', {
@@ -49,22 +50,25 @@ var Overlay = function (overlayProps) {
         transform: react_native_1.StyleSheet.flatten,
         variants: variants,
     });
-    var touchableStyle = [
+    var animation = (0, moti_1.useAnimationState)({
+        visible: variantStyles['wrapper:visible'],
+        hidden: styles['wrapper:visible'],
+    });
+    (0, common_1.onUpdate)(function () {
+        animation.transitionTo(visible ? 'visible' : 'hidden');
+    }, [visible]);
+    var viewStyles = [
         variantStyles.wrapper,
         styles.wrapper,
-        visible && variantStyles['wrapper:visible'],
-        visible && styles['wrapper:visible'],
     ];
-    return (<Touchable_1.AnimatedTouchable 
-    // @ts-ignore
-    transition={'opacity'} style={touchableStyle} {...props}>
-      <View_1.View>
+    return (<View_1.View animated state={animation} style={viewStyles}>
+      <Touchable_1.Touchable feedbackVariant='none' variants={['whole', 'full', 'absolute']} {...props}>
         {(title || showClose) && (<View_1.View style={variantStyles.header}>
             <TextInput_1.InputLabel style={variantStyles.title} label={title}/>
             {showClose && (<Button_1.Button variants={['icon']} icon={'close'} style={variantStyles.closeButton} debugName={'Close icon'}/>)}
           </View_1.View>)}
-      </View_1.View>
-    </Touchable_1.AnimatedTouchable>);
+      </Touchable_1.Touchable>
+    </View_1.View>);
 };
 exports.Overlay = Overlay;
 //# sourceMappingURL=Overlay.js.map