@ape.swap/bonds-sdk 1.0.76 → 1.0.77-4.0

package/dist/components/uikit/Spinner/index.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-declare const Spinner: ({ size }: {
-    size?: number | undefined;
-}) => import("react").JSX.Element;
-export default Spinner;

package/dist/components/uikit/Spinner/index.js

@@ -1,20 +0,0 @@
-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);
-};
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import Lottie from 'lottie-react';
-import Flex from '../Flex';
-import apeSpinner from './apeSpinner.json';
-var Spinner = function (_a) {
-    var size = _a.size;
-    return (_jsx(Flex, __assign({ sx: { width: size, height: size } }, { children: _jsx(Lottie, { animationData: apeSpinner, loop: true }) })));
-};
-export default Spinner;

package/dist/components/uikit/SwiperDots/index.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const SwiperDots: ({ isActive, onClick }: {
-    isActive: boolean;
-    onClick?: (() => void) | undefined;
-}) => React.JSX.Element;
-export default SwiperDots;

package/dist/components/uikit/SwiperDots/index.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import Flex from '../Flex';
-var SwiperDots = function (_a) {
-    var isActive = _a.isActive, onClick = _a.onClick;
-    return (_jsx(Flex, { sx: {
-            background: isActive ? 'home.title' : 'white4',
-            height: '14px',
-            width: '14px',
-            borderRadius: '50px',
-            margin: '0px 2.5px 0px 2.5px',
-            cursor: 'pointer',
-        }, onClick: onClick }));
-};
-export default SwiperDots;

package/dist/components/uikit/Tabs/Tab.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TabProps } from './types';
-declare const Tab: React.FC<TabProps>;
-export default Tab;

package/dist/components/uikit/Tabs/Tab.js

@@ -1,34 +0,0 @@
-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 __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;
-};
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import React from 'react';
-import { Box } from 'theme-ui';
-import Text from '../Text';
-import { sizes, variants, tabPadding, fontSizes } from './types';
-import styles from './styles';
-// eslint-disable-next-line react/display-name
-var Tab = React.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, index = _a.index, label = _a.label, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, _c = _a.variant, variant = _c === void 0 ? variants.CENTERED : _c, props = __rest(_a, ["onClick", "index", "label", "size", "variant"]);
-    return (_jsx(Box, __assign({ ref: ref }, props, { sx: __assign(__assign({}, styles.tab), { flex: variant === variants.FULLWIDTH ? 1 : undefined, px: tabPadding[size].x, py: tabPadding[size].y, cursor: (props === null || props === void 0 ? void 0 : props.disabled) ? 'not-allowed' : 'pointer' }), onClick: function () { return (props === null || props === void 0 ? void 0 : props.disabled) || onClick(index); } }, { children: _jsx(Text, __assign({ sx: { fontSize: fontSizes[size] }, weight: "bold" }, { children: label })) })));
-});
-export default Tab;

package/dist/components/uikit/Tabs/TabPanel.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TabPanelProps } from './types';
-declare const TabPanel: React.FC<TabPanelProps>;
-export default TabPanel;

package/dist/components/uikit/Tabs/Tabs.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TabsProps } from './types';
-declare const Tabs: React.FC<TabsProps>;
-export default Tabs;

package/dist/components/uikit/Tabs/Tabs.js

@@ -1,67 +0,0 @@
-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 __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;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { Box } from 'theme-ui';
-import { Button } from '../Button';
-import { variants, tabPadding, sizes, fontSizes } from './types';
-import styles from './styles';
-var isBrowser = typeof window === 'object';
-var Tabs = function (_a) {
-    var _b = _a.activeTab, activeTab = _b === void 0 ? 0 : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? variants.CENTERED : _c, _d = _a.size, size = _d === void 0 ? sizes.MEDIUM : _d, props = __rest(_a, ["activeTab", "children", "variant", "size"]);
-    var _e = useState(), label = _e[0], setLabel = _e[1];
-    var activeRef = useRef(null);
-    var _f = useState({}), activeStyle = _f[0], setActiveStyle = _f[1];
-    var getActiveStyles = useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return {
-            width: ((_c = (_b = (_a = activeRef === null || activeRef === void 0 ? void 0 : activeRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.width) || 'fit-content',
-            lineHeight: '17px',
-            left: (activeRef === null || activeRef === void 0 ? void 0 : activeRef.current)
-                ? ((_f = (_e = (_d = activeRef === null || activeRef === void 0 ? void 0 : activeRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f.x) -
-                    ((_k = (_j = (_h = (_g = activeRef === null || activeRef === void 0 ? void 0 : activeRef.current) === null || _g === void 0 ? void 0 : _g.parentNode) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect) === null || _j === void 0 ? void 0 : _j.call(_h)) === null || _k === void 0 ? void 0 : _k.x)
-                : 0,
-        };
-    }, [activeRef]);
-    useEffect(function () {
-        React.Children.forEach(children, function (child) {
-            var _a, _b;
-            if (((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.index) === activeTab) {
-                setLabel((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.label);
-            }
-        });
-        if (size) {
-            setActiveStyle(getActiveStyles());
-        }
-    }, [activeTab, children, getActiveStyles, size]);
-    return (_jsx(Box, __assign({}, props, { sx: __assign(__assign({}, styles.tabs), { justifyContent: variant === variants.CENTERED ? 'center' : null }) }, { children: _jsxs(Box, __assign({ sx: __assign(__assign({}, styles.tabUnderlay), { width: variant === variants.FULLWIDTH ? '100%' : undefined, justifyContent: variant === variants.FULLWIDTH ? 'space-between' : 'center' }) }, { children: [React.Children.map(children, function (child) {
-                    var _a, _b;
-                    return React.cloneElement(child, __assign(__assign({}, child === null || child === void 0 ? void 0 : child.props), { sx: !isBrowser && ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.index) === activeTab
-                            ? {
-                                background: 'yellow',
-                                color: 'primaryBright',
-                            }
-                            : undefined, ref: ((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.index) === activeTab ? activeRef : undefined }));
-                }), activeTab >= 0 && (_jsx(Button, __assign({ sx: __assign(__assign(__assign({ px: tabPadding[size].x, py: tabPadding[size].y, fontSize: fontSizes[size] }, styles.tabButton), activeStyle), { display: isBrowser ? undefined : 'none' }) }, { children: label })))] })) })));
-};
-export default Tabs;

package/dist/components/uikit/Tabs/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Tabs } from './Tabs';
-export { default as Tab } from './Tab';

package/dist/components/uikit/Tabs/index.js

@@ -1,2 +0,0 @@
-export { default as Tabs } from './Tabs';
-export { default as Tab } from './Tab';

package/dist/components/uikit/Tabs/styles.d.ts

@@ -1,3 +0,0 @@
-import { ThemeUIStyleObject } from 'theme-ui';
-declare const styles: Record<string, ThemeUIStyleObject>;
-export default styles;

package/dist/components/uikit/Tabs/styles.js

@@ -1,40 +0,0 @@
-var styles = {
-    tabs: {
-        overflow: 'hidden',
-        display: 'flex',
-        borderRadius: '10px',
-        background: 'transparent',
-    },
-    tabUnderlay: {
-        position: 'relative',
-        display: 'flex',
-        background: 'lvl1',
-        borderRadius: '10px',
-        padding: 0,
-        margin: 0,
-    },
-    tabButton: {
-        position: 'absolute',
-        border: 0,
-        top: 0,
-        height: '100%',
-        transition: 'left 0.2s linear',
-        textTransform: 'none',
-        '&:hover': {
-            filter: 'none',
-        },
-    },
-    tab: {
-        borderRadius: '10px',
-        px: '36px',
-        py: '9px',
-        background: 'white3',
-        color: 'primaryButtonDisable',
-        textAlign: 'center',
-        border: 0,
-        '&:hover': {
-            filter: '20%',
-        },
-    },
-};
-export default styles;

package/dist/components/uikit/Tabs/types.d.ts

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import { BoxProps } from 'theme-ui';
-export declare enum sizes {
-    SMALL = "sm",
-    MEDIUM = "md",
-    LARGE = "lg"
-}
-export declare const tabPadding: {
-    sm: {
-        x: number;
-        y: number;
-    };
-    md: {
-        x: number;
-        y: number;
-    };
-    lg: {
-        x: number;
-        y: number;
-    };
-};
-export declare const fontSizes: {
-    sm: number;
-    md: number;
-    lg: number;
-};
-export declare enum variants {
-    CENTERED = "centered",
-    FULLWIDTH = "fullWidth"
-}
-export type variantProps = `${variants}`;
-export type sizeProps = `${sizes}`;
-export interface TabProps extends Omit<BoxProps, 'onClick'> {
-    index: number;
-    activeTab?: number;
-    label: string;
-    onClick: (activeTab: number) => void;
-    size: sizeProps;
-    variant: variantProps;
-    disabled?: boolean;
-}
-export interface TabsProps {
-    activeTab: number;
-    variant?: variantProps;
-    children?: ReactNode;
-    size?: sizeProps;
-    sx?: any;
-}
-export interface TabPanelProps {
-    index: number;
-    activeTab: number;
-    children?: ReactNode;
-    sx?: any;
-}

package/dist/components/uikit/Tabs/types.js

@@ -1,22 +0,0 @@
-var _a, _b;
-export var sizes;
-(function (sizes) {
-    sizes["SMALL"] = "sm";
-    sizes["MEDIUM"] = "md";
-    sizes["LARGE"] = "lg";
-})(sizes || (sizes = {}));
-export var tabPadding = (_a = {},
-    _a[sizes.SMALL] = { x: 9, y: 2 },
-    _a[sizes.MEDIUM] = { x: 15, y: 3 },
-    _a[sizes.LARGE] = { x: 16, y: 6 },
-    _a);
-export var fontSizes = (_b = {},
-    _b[sizes.SMALL] = 0,
-    _b[sizes.MEDIUM] = 1,
-    _b[sizes.LARGE] = 2,
-    _b);
-export var variants;
-(function (variants) {
-    variants["CENTERED"] = "centered";
-    variants["FULLWIDTH"] = "fullWidth";
-})(variants || (variants = {}));

package/dist/components/uikit/Tag/styles.d.ts

@@ -1,5 +0,0 @@
-import { ThemeUIStyleObject } from 'theme-ui';
-export declare const StyledTag: any;
-export declare const styles: Record<'listTagCont' | 'tagText', (props: {
-    variant?: any;
-}) => ThemeUIStyleObject>;

package/dist/components/uikit/Toggle/index.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ToggleProps } from './types';
-declare const Toggle: React.FC<ToggleProps>;
-export default Toggle;

package/dist/components/uikit/Toggle/index.js

@@ -1,63 +0,0 @@
-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 __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;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Box } from 'theme-ui';
-import { Button } from '../Button';
-import { sizes, togglePadding, fontSizes } from './types';
-import styles from './styles';
-import Text from '../Text';
-var isBrowser = typeof window === 'object';
-var Toggle = function (_a) {
-    var checked = _a.checked, labels = _a.labels, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, className = _a.className, props = __rest(_a, ["checked", "labels", "size", "className"]);
-    var inputRef = useRef(null);
-    var leftRef = useRef(null);
-    var rightRef = useRef(null);
-    var _c = useState(checked), isChecked = _c[0], setIsChecked = _c[1];
-    var _d = useState({}), activeStyle = _d[0], setActiveStyle = _d[1];
-    var getActiveStyles = useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        return isBrowser
-            ? {
-                width: ((_d = (_c = (_b = (_a = (isChecked && size ? rightRef : leftRef)) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect) === null || _c === void 0 ? void 0 : _c.call(_b)) === null || _d === void 0 ? void 0 : _d.width) || 'fit-content',
-                left: isChecked && (rightRef === null || rightRef === void 0 ? void 0 : rightRef.current)
-                    ? ((_g = (_f = (_e = rightRef === null || rightRef === void 0 ? void 0 : rightRef.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect) === null || _f === void 0 ? void 0 : _f.call(_e)) === null || _g === void 0 ? void 0 : _g.x) -
-                        ((_l = (_k = (_j = (_h = rightRef === null || rightRef === void 0 ? void 0 : rightRef.current) === null || _h === void 0 ? void 0 : _h.parentNode) === null || _j === void 0 ? void 0 : _j.getBoundingClientRect) === null || _k === void 0 ? void 0 : _k.call(_j)) === null || _l === void 0 ? void 0 : _l.x)
-                    : 0,
-            }
-            : {
-                right: isChecked ? 0 : undefined,
-                left: isChecked ? undefined : 0,
-            };
-    }, [isChecked, size]);
-    useEffect(function () {
-        setActiveStyle(function () { return getActiveStyles(); });
-    }, [getActiveStyles]);
-    var handleClick = function () {
-        var _a;
-        setIsChecked(!isChecked);
-        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    return (_jsxs(Box, __assign({ className: className, sx: styles.container }, { children: [_jsx(Box, __assign({ ref: leftRef, sx: __assign(__assign({}, styles.switch), { background: 'white3', color: 'primaryButtonDisable', px: togglePadding[size].x, py: togglePadding[size].y, fontSize: fontSizes[size] }), onClick: handleClick }, { children: _jsx(Text, __assign({ variant: "sm", sx: { fontSize: fontSizes[size] }, weight: "bold" }, { children: labels[0] })) })), _jsx(Box, __assign({ ref: rightRef, sx: __assign(__assign({}, styles.switch), { background: 'white3', color: 'primaryButtonDisable', px: togglePadding[size].x, py: togglePadding[size].y, fontSize: fontSizes[size] }), onClick: handleClick }, { children: _jsx(Text, __assign({ variant: "sm", sx: { fontSize: fontSizes[size] }, weight: "bold" }, { children: labels[1] })) })), _jsx(Button, __assign({ sx: __assign(__assign(__assign({}, styles.button), activeStyle), { fontSize: fontSizes[size], px: togglePadding[size].x, py: togglePadding[size].y }) }, { children: isChecked ? labels[1] : labels[0] })), _jsx("input", __assign({ type: "checkbox", ref: inputRef, checked: isChecked, "aria-hidden": "true", tabIndex: -1 }, props, { sx: styles.input }))] })));
-};
-export default Toggle;

package/dist/components/uikit/Toggle/styles.d.ts

@@ -1,3 +0,0 @@
-import { ThemeUIStyleObject } from 'theme-ui';
-declare const styles: Record<string, ThemeUIStyleObject>;
-export default styles;

package/dist/components/uikit/Toggle/styles.js

@@ -1,39 +0,0 @@
-var styles = {
-    container: {
-        display: 'flex',
-        borderRadius: '10px',
-        background: 'white3',
-        width: 'fit-content',
-        position: 'relative',
-        justifyItems: 'center',
-    },
-    switch: {
-        borderRadius: '10px',
-        px: '14px',
-        py: '9px',
-        cursor: 'pointer',
-        '&:hover': {
-            filter: '20%',
-        },
-    },
-    button: {
-        position: 'absolute',
-        border: 0,
-        top: 0,
-        height: '100%',
-        transition: 'left 0.2s linear',
-        textTransform: 'none',
-        '&:hover': {
-            filter: 'none',
-        },
-    },
-    input: {
-        bottom: 0,
-        left: 0,
-        position: 'absolute',
-        opacity: 0,
-        pointerEvents: 'none',
-        width: '100%',
-    },
-};
-export default styles;

package/dist/components/uikit/Toggle/types.d.ts

@@ -1,31 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-export declare enum sizes {
-    SMALL = "sm",
-    MEDIUM = "md",
-    LARGE = "lg"
-}
-export declare const togglePadding: {
-    sm: {
-        x: number;
-        y: number;
-    };
-    md: {
-        x: number;
-        y: number;
-    };
-    lg: {
-        x: number;
-        y: number;
-    };
-};
-export declare const fontSizes: {
-    sm: number;
-    md: number;
-    lg: number;
-};
-export type sizeProps = `${sizes}`;
-export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    checked?: boolean;
-    labels: [string, string];
-    size?: sizeProps;
-}

package/dist/components/uikit/Toggle/types.js

@@ -1,17 +0,0 @@
-var _a, _b;
-export var sizes;
-(function (sizes) {
-    sizes["SMALL"] = "sm";
-    sizes["MEDIUM"] = "md";
-    sizes["LARGE"] = "lg";
-})(sizes || (sizes = {}));
-export var togglePadding = (_a = {},
-    _a[sizes.SMALL] = { x: 4, y: 2 },
-    _a[sizes.MEDIUM] = { x: 6, y: 3 },
-    _a[sizes.LARGE] = { x: 8, y: 4 },
-    _a);
-export var fontSizes = (_b = {},
-    _b[sizes.SMALL] = 0,
-    _b[sizes.MEDIUM] = 1,
-    _b[sizes.LARGE] = 2,
-    _b);

package/dist/components/uikit/TutorialModal/index.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TModalProps } from './types';
-declare const TutorialModal: React.FC<TModalProps>;
-export default TutorialModal;

package/dist/components/uikit/TutorialModal/index.js

@@ -1,52 +0,0 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { useState } from 'react';
-import { Box } from 'theme-ui';
-import { styles, dynamicStyles } from './styles';
-import { Button, Flex, Modal, Text } from '../../uikit';
-import { useIsAbond } from '../../../hooks/useIsAbond';
-var Circle = function (_a) {
-    var index = _a.index, goToStep = _a.goToStep, isActive = _a.isActive;
-    return (_jsx(Flex, { sx: dynamicStyles.allCircle({ isActive: isActive }), onClick: goToStep }, "circle-".concat(index)));
-};
-var TutorialModal = function (_a) {
-    var type = _a.type, title = _a.title, description = _a.description, children = _a.children, onDismiss = _a.onDismiss, t = _a.t, isConnected = _a.isConnected;
-    var _b = useState(0), step = _b[0], setStep = _b[1];
-    var slideNumber = isConnected ? step + 1 : step;
-    var isAbond = useIsAbond();
-    var handleNext = function () {
-        setStep(step + 1);
-    };
-    var renderChildren = function () {
-        return children === null || children === void 0 ? void 0 : children.map(function (element, i) { return (_jsx(Flex, { children: step === i && (_jsx(Flex, __assign({ sx: { width: '100%', flexWrap: 'wrap', mt: ['15px', '15px', '15px', '30px'] } }, { children: element }))) }, i)); });
-    };
-    var renderDots = function () {
-        return __spreadArray([], Array(children === null || children === void 0 ? void 0 : children.length), true).map(function (_, index) { return (_jsx(Circle, { index: index, goToStep: function () { return setStep(index); }, isActive: index === step }, index)); });
-    };
-    return (_jsx(Modal, __assign({ zIndex: 101, onDismiss: onDismiss, sx: {
-            width: ['280px', '280px', '280px', '873px'],
-            minWidth: ['280px', '280px', '280px', '873px'],
-            height: ['', '', '', '500px'],
-            overflow: 'visible',
-        } }, { children: _jsxs(Flex, __assign({ className: "tutorial-modal", sx: styles.modalCon }, { children: [_jsx(Flex, __assign({ width: 22, onClick: onDismiss, sx: { cursor: 'pointer', position: 'absolute', right: '20px' } }, { children: _jsx(Text, { children: "x" }) })), _jsxs(Flex, __assign({ sx: styles.contentBody }, { children: [_jsx(Box, { sx: dynamicStyles.showApe({ slideNumber: slideNumber, type: type, isAbond: isAbond }) }), _jsxs(Flex, __assign({ sx: __assign(__assign({}, styles.rightCon), { maxWidth: ['', '', '', '55%'] }) }, { children: [_jsxs(Flex, __assign({ sx: styles.right }, { children: [_jsxs(Flex, __assign({ sx: styles.modalHeader }, { children: [_jsx(Text, __assign({ sx: styles.title }, { children: t("".concat(title)) })), _jsx(Text, __assign({ sx: styles.description }, { children: t("".concat(description)) }))] })), renderChildren()] })), _jsxs(Flex, __assign({ sx: __assign(__assign({}, styles.modalFooter), { alignItems: ['center', 'center', 'center', 'flex-start'] }) }, { children: [_jsx(Flex, __assign({ sx: styles.circles }, { children: renderDots() })), _jsx(Button, __assign({ onClick: step >= ((children === null || children === void 0 ? void 0 : children.length) || 0) - 1 ? onDismiss : handleNext, sx: styles.readyBtn }, { children: step >= ((children === null || children === void 0 ? void 0 : children.length) || 0) - 1 ? t("I'm Ready") : t('Next') }))] }))] }))] }))] })) })));
-};
-export default TutorialModal;

package/dist/components/uikit/TutorialModal/styles.d.ts

@@ -1,8 +0,0 @@
-import { ThemeUIStyleObject } from 'theme-ui';
-export declare const dynamicStyles: Record<'showApe' | 'allCircle', (props: {
-    slideNumber?: number;
-    type?: string;
-    isActive?: boolean;
-    isAbond?: boolean;
-}) => ThemeUIStyleObject>;
-export declare const styles: Record<'modalCon' | 'contentBody' | 'rightCon' | 'right' | 'modalHeader' | 'title' | 'description' | 'circles' | 'readyBtn' | 'modalFooter', ThemeUIStyleObject>;

package/dist/components/uikit/TutorialModal/styles.js

@@ -1,86 +0,0 @@
-export var dynamicStyles = {
-    showApe: function (_a) {
-        var slideNumber = _a.slideNumber, type = _a.type, isAbond = _a.isAbond;
-        return ({
-            alignSelf: ['center', 'center', ''],
-            width: ['200px', '200px', '200px', '340px'],
-            height: ['200px', '200px', '200px', '340px'],
-            background: isAbond
-                ? "url(images/tutorial-modals/abond/".concat(type, "-").concat(slideNumber, ".svg)")
-                : "url(images/tutorial-modals/".concat(type, "-").concat(slideNumber, ".svg)"),
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-            backgroundSize: 'cover',
-        });
-    },
-    allCircle: function (_a) {
-        var isActive = _a.isActive;
-        return ({
-            width: '8px',
-            height: '8px',
-            background: isActive ? 'home.title' : 'white4',
-            borderRadius: '50%',
-            mr: '10px',
-            cursor: 'pointer',
-            '&.last-child': {
-                mr: 0,
-            },
-        });
-    },
-};
-export var styles = {
-    modalCon: {
-        height: '100%',
-    },
-    contentBody: {
-        flexDirection: ['column', 'column', 'column', 'row'],
-        width: '100%',
-        alignItems: 'center',
-        height: '100%',
-        justifyContent: ['', '', '', 'space-between'],
-    },
-    rightCon: {
-        width: '100%',
-        flexDirection: 'column',
-        flex: 1,
-        mr: ['', '', '', '10px'],
-    },
-    right: {
-        flexDirection: 'column',
-        height: '100%',
-        minHeight: '270px',
-    },
-    modalHeader: {
-        flexDirection: ['column'],
-    },
-    title: {
-        fontWeight: 700,
-        fontSize: ['18px', '18px', '18px', '24px'],
-        lineHeight: ['22px', '22px', '22px', '36px'],
-        textTransform: ['capitalize', 'capitalize', 'capitalize', 'uppercase'],
-        mt: ['10px'],
-    },
-    description: {
-        fontWeight: 400,
-        fontSize: '12px',
-        lineHeight: '18px',
-        textTransform: 'none',
-        opacity: 0.5,
-        mt: ['7px', '7px', '7px', 0],
-    },
-    circles: {
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: ['8px', '8px', '8px', '8px 8px 8px 0px'],
-    },
-    readyBtn: {
-        mt: '10px',
-        textTransform: 'uppercase',
-        height: '40px',
-        width: ['100%', '100%', '100%', '240px'],
-    },
-    modalFooter: {
-        flexDirection: 'column',
-        justifyContent: 'center',
-    },
-};

package/dist/components/uikit/TutorialModal/types.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-export type ActionHandler = () => void;
-export interface TModalProps {
-    t: (key: string) => string;
-    onDismiss: ActionHandler;
-    type: string;
-    title: string;
-    description?: string;
-    children: React.ReactNode[];
-    isConnected: boolean;
-    width?: string;
-}
-export interface CountProps {
-    index: number;
-    goToStep: ActionHandler;
-    isActive: boolean;
-}
-export interface ShowApeType {
-    slideNumber?: number;
-    type?: string;
-    isAbond?: boolean;
-}