@codeleap/mobile 2.3.6 → 2.3.8

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

@@ -1,60 +1,60 @@
-"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.MobileModalStyles = exports.modalTransition = void 0;
-var common_1 = require("@codeleap/common");
-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 });
-        return {
-            wrapper: __assign({ zIndex: 1 }, fullSize),
-            overlay: __assign({ opacity: 0, backgroundColor: theme.colors.black }, fullSize),
-            'overlay:visible': {
-                opacity: 0.5,
-            },
-            innerWrapper: {},
-            innerWrapperScroll: __assign(__assign({ display: 'flex', alignItems: 'center' }, theme.presets.justifyCenter), { minHeight: theme.values.window.height }),
-            box: __assign({ width: '80%', backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.medium }, theme.spacing.padding(2)),
-            touchableBackdrop: __assign({}, fullSize),
-            'box:pose': {
-                opacity: 0,
-                scale: 0.8,
-                transition: exports.modalTransition,
-            },
-            'box:pose: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 () { 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.window.height }, theme.presets.center),
-    }); }) });
+"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.MobileModalStyles = exports.modalTransition = void 0;
+var common_1 = require("@codeleap/common");
+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 });
+        return {
+            wrapper: __assign({ zIndex: 1 }, fullSize),
+            overlay: __assign({ opacity: 0, backgroundColor: theme.colors.black }, fullSize),
+            'overlay:visible': {
+                opacity: 0.5,
+            },
+            innerWrapper: {},
+            innerWrapperScroll: __assign(__assign({ display: 'flex', alignItems: 'center' }, theme.presets.justifyCenter), { minHeight: theme.values.window.height }),
+            box: __assign({ width: '80%', backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.medium }, theme.spacing.padding(2)),
+            touchableBackdrop: __assign({}, fullSize),
+            'box:pose': {
+                opacity: 0,
+                scale: 0.8,
+                transition: exports.modalTransition,
+            },
+            'box:pose: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 () { 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.window.height }, theme.presets.center),
+    }); }) });
 //# sourceMappingURL=styles.js.map

package/dist/components/legacy/Pager/index.d.ts

@@ -1,20 +1,20 @@
-import { ComponentVariants } from '@codeleap/common';
-import React, { ReactNode } from 'react';
-import { StylesOf } from '../../../types/utility';
-import { MobilePagerStyles, PagerComposition } from './styles';
-export * from './styles';
-export declare type PagerProps = {
-    variants?: ComponentVariants<typeof MobilePagerStyles>['variants'];
-    styles?: StylesOf<PagerComposition>;
-    page?: number;
-    loop?: boolean;
-    debug?: boolean;
-    children?: ReactNode;
-    onPageChange?: (page: number) => void;
-};
-export declare type PagerRef = {
-    forward(by?: number): void;
-    back(by?: number): void;
-    to(index?: number): void;
-};
-export declare const Pager: React.ForwardRefExoticComponent<PagerProps & React.RefAttributes<PagerRef>>;
+import { ComponentVariants } from '@codeleap/common';
+import React, { ReactNode } from 'react';
+import { StylesOf } from '../../../types/utility';
+import { MobilePagerStyles, PagerComposition } from './styles';
+export * from './styles';
+export declare type PagerProps = {
+    variants?: ComponentVariants<typeof MobilePagerStyles>['variants'];
+    styles?: StylesOf<PagerComposition>;
+    page?: number;
+    loop?: boolean;
+    debug?: boolean;
+    children?: ReactNode;
+    onPageChange?: (page: number) => void;
+};
+export declare type PagerRef = {
+    forward(by?: number): void;
+    back(by?: number): void;
+    to(index?: number): void;
+};
+export declare const Pager: React.ForwardRefExoticComponent<PagerProps & React.RefAttributes<PagerRef>>;

package/dist/components/legacy/Pager/index.js

@@ -1,168 +1,168 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pager = void 0;
-var common_1 = require("@codeleap/common");
-var react_1 = __importStar(require("react"));
-var react_native_1 = require("react-native");
-var Animated_1 = require("../../Animated");
-var Button_1 = require("../../Button");
-var View_1 = require("../../View");
-var Text_1 = require("../../Text");
-__exportStar(require("./styles"), exports);
-exports.Pager = (0, react_1.forwardRef)(function (pagerProps, ref) {
-    var children = pagerProps.children, styles = pagerProps.styles, variants = pagerProps.variants, propPage = pagerProps.page, debug = pagerProps.debug, loop = pagerProps.loop, onPageChange = pagerProps.onPageChange;
-    var _a = (0, react_1.useState)(function () { return propPage !== null && propPage !== void 0 ? propPage : 0; }), page = _a[0], setPage = _a[1];
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Pager', {
-        styles: styles,
-        transform: react_native_1.StyleSheet.flatten,
-        variants: variants,
-    });
-    var logger = (0, common_1.useCodeleapContext)().logger;
-    var nChildren = react_1.default.Children.count(children);
-    var lastPage = nChildren - 1;
-    var pagerRef = (0, react_1.useRef)({
-        forward: function (by) {
-            if (by === void 0) { by = 1; }
-            setPage(function (currentPage) {
-                if (currentPage < lastPage) {
-                    return currentPage + by;
-                }
-                else if (loop) {
-                    return by - 1;
-                }
-                return currentPage;
-            });
-        },
-        back: function (by) {
-            if (by === void 0) { by = 1; }
-            setPage(function (currentPage) {
-                if (currentPage > 0) {
-                    return currentPage - by;
-                }
-                else if (loop) {
-                    return nChildren - by;
-                }
-                return currentPage;
-            });
-        },
-        to: function (n) {
-            if (n >= 0 && n <= lastPage) {
-                setPage(n);
-            }
-            else {
-                logger.warn('Attempted to go to a page which falls outside range', { currentPage: page, attemptedToGoTo: n, pageRange: [0, lastPage] }, 'Component');
-            }
-        },
-    });
-    (0, common_1.onUpdate)(function () {
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
-    }, [page]);
-    (0, common_1.onUpdate)(function () {
-        if (typeof propPage === 'number') {
-            setPage(propPage);
-        }
-    }, [propPage]);
-    (0, react_1.useImperativeHandle)(ref, function () { return pagerRef.current; });
-    var pagePoses = (0, react_1.useMemo)(function () {
-        return {
-            current: variantStyles['page:pose:current'],
-            next: variantStyles['page:pose:next'],
-            previous: variantStyles['page:pose:previous'],
-        };
-    }, [variantStyles]);
-    return (<View_1.View style={variantStyles.wrapper}>
-      {react_1.default.Children.map(children, function (child, idx) { return (<Page {...pagerProps} idx={idx} lastPage={lastPage} pagePoses={pagePoses} style={[variantStyles.page]} page={page}>
-          {child}
-        </Page>); })}
-
-      {debug && (<View_1.View variants={['absolute']} style={{ bottom: 0, left: 0, right: 0 }}>
-          <Button_1.Button text='previous' debugName='Previous Pager' onPress={pagerRef.current.back}/>
-          <Text_1.Text text={page.toString()}/>
-          <Button_1.Button text='next' debugName='Next Pager' onPress={pagerRef.current.forward}/>
-        </View_1.View>)}
-    </View_1.View>);
-});
-var Page = function (pageProps) {
-    var child = pageProps.children, idx = pageProps.idx, loop = pageProps.loop, lastPage = pageProps.lastPage, page = pageProps.page, style = pageProps.style, pagePoses = pageProps.pagePoses;
-    if (!react_1.default.isValidElement(child))
-        return null;
-    // const isLast = idx === lastPage
-    // const isFirst = idx === 0
-    // const isLoopNext = (loop && isFirst && page === lastPage)
-    // const isLoopPrevious = (loop && isLast && page === 0)
-    // const isCurrent = idx === page
-    // const isSequenceNext = idx ===  page + 1
-    // const isSequencePrevious = idx ===  page  - 1
-    // const isNext = isSequenceNext || isLoopNext
-    // const isPrevious = isSequencePrevious || isLoopPrevious
-    // const isCurrentOrAdjacent = [
-    //     isCurrent,
-    //     isNext,
-    //     isPrevious
-    // ].includes(true)
-    // if(isCurrentOrAdjacent){
-    //     return <Animated
-    //         key={idx}
-    //         component='View'
-    //         config={pagePoses}
-    //         pose={isCurrent ? 'current' : (isNext ? 'next' : 'previous')}
-    //         style={[{
-    //             position: 'absolute',
-    //             top: 0,
-    //         },style]}
-    //     >
-    //         {child}
-    //     </Animated>
-    // }
-    var isCurrent = idx === page;
-    var isNext = idx > page;
-    var _a = (0, react_1.useState)(isCurrent ? 1 : 0), _opacity = _a[0], setOpacity = _a[1];
-    var _b = (0, common_1.useDebounce)(_opacity, 800), opacity = _b[0], resetDebounceTimer = _b[1];
-    (0, common_1.onUpdate)(function () {
-        if (isCurrent) {
-            setOpacity(1);
-        }
-        else {
-            setOpacity(0);
-        }
-        return resetDebounceTimer;
-    }, [idx, page]);
-    return (<Animated_1.Animated key={idx} component='View' config={pagePoses} pose={isCurrent ? 'current' : isNext ? 'next' : 'previous'} style={[
-            {
-                position: 'absolute',
-                top: 0,
-                opacity: isCurrent ? _opacity : opacity,
-            },
-            style,
-        ]}>
-      {child}
-    </Animated_1.Animated>);
-    // return <View style={{display:'none'}} key={idx}>{child}</View>
-};
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pager = void 0;
+var common_1 = require("@codeleap/common");
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var Animated_1 = require("../../Animated");
+var Button_1 = require("../../Button");
+var View_1 = require("../../View");
+var Text_1 = require("../../Text");
+__exportStar(require("./styles"), exports);
+exports.Pager = (0, react_1.forwardRef)(function (pagerProps, ref) {
+    var children = pagerProps.children, styles = pagerProps.styles, variants = pagerProps.variants, propPage = pagerProps.page, debug = pagerProps.debug, loop = pagerProps.loop, onPageChange = pagerProps.onPageChange;
+    var _a = (0, react_1.useState)(function () { return propPage !== null && propPage !== void 0 ? propPage : 0; }), page = _a[0], setPage = _a[1];
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Pager', {
+        styles: styles,
+        transform: react_native_1.StyleSheet.flatten,
+        variants: variants,
+    });
+    var logger = (0, common_1.useCodeleapContext)().logger;
+    var nChildren = react_1.default.Children.count(children);
+    var lastPage = nChildren - 1;
+    var pagerRef = (0, react_1.useRef)({
+        forward: function (by) {
+            if (by === void 0) { by = 1; }
+            setPage(function (currentPage) {
+                if (currentPage < lastPage) {
+                    return currentPage + by;
+                }
+                else if (loop) {
+                    return by - 1;
+                }
+                return currentPage;
+            });
+        },
+        back: function (by) {
+            if (by === void 0) { by = 1; }
+            setPage(function (currentPage) {
+                if (currentPage > 0) {
+                    return currentPage - by;
+                }
+                else if (loop) {
+                    return nChildren - by;
+                }
+                return currentPage;
+            });
+        },
+        to: function (n) {
+            if (n >= 0 && n <= lastPage) {
+                setPage(n);
+            }
+            else {
+                logger.warn('Attempted to go to a page which falls outside range', { currentPage: page, attemptedToGoTo: n, pageRange: [0, lastPage] }, 'Component');
+            }
+        },
+    });
+    (0, common_1.onUpdate)(function () {
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
+    }, [page]);
+    (0, common_1.onUpdate)(function () {
+        if (typeof propPage === 'number') {
+            setPage(propPage);
+        }
+    }, [propPage]);
+    (0, react_1.useImperativeHandle)(ref, function () { return pagerRef.current; });
+    var pagePoses = (0, react_1.useMemo)(function () {
+        return {
+            current: variantStyles['page:pose:current'],
+            next: variantStyles['page:pose:next'],
+            previous: variantStyles['page:pose:previous'],
+        };
+    }, [variantStyles]);
+    return (<View_1.View style={variantStyles.wrapper}>
+      {react_1.default.Children.map(children, function (child, idx) { return (<Page {...pagerProps} idx={idx} lastPage={lastPage} pagePoses={pagePoses} style={[variantStyles.page]} page={page}>
+          {child}
+        </Page>); })}
+
+      {debug && (<View_1.View variants={['absolute']} style={{ bottom: 0, left: 0, right: 0 }}>
+          <Button_1.Button text='previous' debugName='Previous Pager' onPress={pagerRef.current.back}/>
+          <Text_1.Text text={page.toString()}/>
+          <Button_1.Button text='next' debugName='Next Pager' onPress={pagerRef.current.forward}/>
+        </View_1.View>)}
+    </View_1.View>);
+});
+var Page = function (pageProps) {
+    var child = pageProps.children, idx = pageProps.idx, loop = pageProps.loop, lastPage = pageProps.lastPage, page = pageProps.page, style = pageProps.style, pagePoses = pageProps.pagePoses;
+    if (!react_1.default.isValidElement(child))
+        return null;
+    // const isLast = idx === lastPage
+    // const isFirst = idx === 0
+    // const isLoopNext = (loop && isFirst && page === lastPage)
+    // const isLoopPrevious = (loop && isLast && page === 0)
+    // const isCurrent = idx === page
+    // const isSequenceNext = idx ===  page + 1
+    // const isSequencePrevious = idx ===  page  - 1
+    // const isNext = isSequenceNext || isLoopNext
+    // const isPrevious = isSequencePrevious || isLoopPrevious
+    // const isCurrentOrAdjacent = [
+    //     isCurrent,
+    //     isNext,
+    //     isPrevious
+    // ].includes(true)
+    // if(isCurrentOrAdjacent){
+    //     return <Animated
+    //         key={idx}
+    //         component='View'
+    //         config={pagePoses}
+    //         pose={isCurrent ? 'current' : (isNext ? 'next' : 'previous')}
+    //         style={[{
+    //             position: 'absolute',
+    //             top: 0,
+    //         },style]}
+    //     >
+    //         {child}
+    //     </Animated>
+    // }
+    var isCurrent = idx === page;
+    var isNext = idx > page;
+    var _a = (0, react_1.useState)(isCurrent ? 1 : 0), _opacity = _a[0], setOpacity = _a[1];
+    var _b = (0, common_1.useDebounce)(_opacity, 800), opacity = _b[0], resetDebounceTimer = _b[1];
+    (0, common_1.onUpdate)(function () {
+        if (isCurrent) {
+            setOpacity(1);
+        }
+        else {
+            setOpacity(0);
+        }
+        return resetDebounceTimer;
+    }, [idx, page]);
+    return (<Animated_1.Animated key={idx} component='View' config={pagePoses} pose={isCurrent ? 'current' : isNext ? 'next' : 'previous'} style={[
+            {
+                position: 'absolute',
+                top: 0,
+                opacity: isCurrent ? _opacity : opacity,
+            },
+            style,
+        ]}>
+      {child}
+    </Animated_1.Animated>);
+    // return <View style={{display:'none'}} key={idx}>{child}</View>
+};
 //# sourceMappingURL=index.js.map

package/dist/components/legacy/Pager/styles.d.ts

@@ -1,54 +1,54 @@
-export declare type PagerComposition = 'page' | 'page:transition' | 'page:pose:previous' | 'page:pose:next' | 'page:pose:current' | 'wrapper';
-export declare const MobilePagerStyles: {
-    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    pageless: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
-};
+export declare type PagerComposition = 'page' | 'page:transition' | 'page:pose:previous' | 'page:pose:next' | 'page:pose:current' | 'wrapper';
+export declare const MobilePagerStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    pageless: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<PagerComposition, any>>;
+};