@ape.swap/bonds-sdk 1.0.77 → 1.0.78-2.test.11

package/dist/components/ProgressBar/styles.js

@@ -0,0 +1,82 @@
+export var styles = {
+    listCardContainer: {
+        borderRadius: 0,
+        flexDirection: ['column', 'column', 'column', 'row'],
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: 'white2',
+        borderBottom: '1px solid rgba(226, 226, 226, .2)',
+        padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
+        margin: '0 10px 0 10px',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+        width: '100%',
+        height: ['unset', 'unset', 'unset', '86px'],
+    },
+    listViewContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+    },
+    titleContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        my: '5px',
+    },
+    infoContentMobile: {
+        display: ['flex', 'flex', 'flex', 'none'],
+        alignItems: 'center',
+    },
+    tokensContainer: {
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    },
+    valueText: {
+        fontSize: ['12px', '12px', '12px', '14px'],
+        color: 'primaryBright',
+        lineHeight: '16px',
+        fontWeight: 700,
+        mr: '5px',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    secondaryText: {
+        fontSize: '12px',
+        color: 'gray',
+        lineHeight: '16px',
+        fontWeight: 400,
+    },
+    cardContentContainer: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    animationDiv: {
+        position: 'relative',
+        width: '100%',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+    },
+    expandedWrapper: {
+        background: 'white3',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '15px 10px',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BondsDataResponse } from '../../types/bonds';
+import '../../scss/TokenInfoName.scss';
+export declare const NETWORK_COLORS: Partial<Record<number, string>>;
+declare const TokenInfoAndName: ({ bill, vestEnds }: {
+    bill: BondsDataResponse;
+    vestEnds?: string;
+}) => React.JSX.Element;
+export default TokenInfoAndName;

package/dist/components/TokenInfoAndName/index.js

@@ -0,0 +1,40 @@
+var _a;
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex, ListTag, Svg } from '../../components/uikit-sdk';
+import { NETWORK_ICONS } from '../../config/constants/chains';
+import { ChainId } from '../../enum/apeswaplists';
+import Index from '../uikit-sdk/TokenImage';
+// import { CleanedBondsState } from 'state/bills/types'
+// import FavComponent from '../../../components/FavComponent'
+import '../../scss/TokenInfoName.scss';
+export var NETWORK_COLORS = (_a = {},
+    _a[ChainId.BSC] = '#F3BA2F',
+    _a[ChainId.MAINNET] = '#627eea',
+    _a[ChainId.MATIC] = '#8247e5',
+    _a[ChainId.LIGHTLINK] = '#6087ff',
+    _a[ChainId.BASE] = '#0052ff',
+    _a[ChainId.ARBITRUM] = '#289fef',
+    _a[ChainId.LINEA] = '#fff',
+    _a[ChainId.IOTA] = '#fff',
+    _a);
+var TokenInfoAndName = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var bill = _a.bill, vestEnds = _a.vestEnds;
+    return (_jsxs(Flex, { className: "tokeninfoname-border", children: [_jsx(Flex, { className: "tokeninfoname-chain", sx: {
+                    background: NETWORK_COLORS[bill.chainId]
+                }, children: _jsx(Svg, { width: 18, height: 18, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), _jsx(Flex, { className: "tokeninfoname-bordergradient", sx: {
+                    background: NETWORK_COLORS[bill.chainId]
+                } }), _jsxs(Flex, { sx: { pl: '6px', width: '100%', maxWidth: '170px', alignItems: 'center' }, children: [_jsx(Index, { symbol: (_c = bill.showcaseTokenName) !== null && _c !== void 0 ? _c : bill.earnToken.symbol, size: 33 }), _jsxs(Flex, { sx: {
+                            ml: '10px',
+                            fontSize: '16px',
+                            fontWeight: 700,
+                            width: '100%',
+                            flexDirection: 'column',
+                        }, children: [(_d = bill.showcaseTokenName) !== null && _d !== void 0 ? _d : bill.earnToken.symbol, vestEnds && (_jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] })] }), _jsxs(Flex, { children: [_jsx(Flex, { sx: { width: '25px' } }), _jsx(Flex, { sx: {
+                            ml: '10px',
+                            display: ['none', 'none', 'none', 'flex'],
+                            minWidth: '70px',
+                            alignItems: 'center',
+                        }, children: ((_e = bill.tags) === null || _e === void 0 ? void 0 : _e[0]) && (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: ((_f = bill.tags) === null || _f === void 0 ? void 0 : _f[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: (_h = (_g = bill.tags) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.toUpperCase() }) })) })] })] }));
+};
+export default TokenInfoAndName;

package/dist/components/Tooltip/ButtonsRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const ButtonsRow: React.FC<{
+    projectLink: string;
+    twitter: string;
+    bubble?: string;
+    audit?: string;
+}>;
+export default ButtonsRow;

package/dist/components/Tooltip/ButtonsRow.js

@@ -0,0 +1,21 @@
+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, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { styles } from './styles';
+import { Flex, Svg, Text } from '../uikit-sdk';
+import { Link } from 'theme-ui';
+var ButtonsRow = function (_a) {
+    var projectLink = _a.projectLink, twitter = _a.twitter, bubble = _a.bubble, audit = _a.audit;
+    var bubbleURL = "https://app.bubblemaps.io/bsc/token/".concat(bubble);
+    return (_jsxs(Flex, { sx: { justifyContent: 'center' }, children: [_jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: _jsx(Svg, { icon: "URL", width: 18 }) }), _jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: _jsx(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (_jsx(Flex, { sx: styles.iconButton, as: Link, href: bubbleURL, target: "_blank", children: _jsx(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (_jsxs(Flex, { sx: __assign(__assign({}, styles.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [_jsx(Svg, { icon: "audit", width: 18, color: "text" }), _jsx(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
+};
+export default ButtonsRow;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface TooltipProps {
+    valueTitle?: string;
+    valueContent?: string;
+    value2Title?: string;
+    value2Content?: string;
+    tokenContract: string;
+    secondURL?: string;
+    secondURLTitle?: string;
+    projectLink?: string;
+    twitter?: string;
+    audit?: string;
+    thirdURL?: string;
+    thirdURLTitle?: string;
+    chain: number;
+}
+declare const Tooltip: React.FunctionComponent<TooltipProps>;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { styles } from './styles';
+import { BLOCK_EXPLORER } from '../../config/constants/chains';
+import ButtonsRow from './ButtonsRow';
+import { Flex, Text, Svg } from '../uikit-sdk';
+import { Link } from 'theme-ui';
+var Tooltip = function (_a) {
+    var valueTitle = _a.valueTitle, valueContent = _a.valueContent, value2Title = _a.value2Title, value2Content = _a.value2Content, tokenContract = _a.tokenContract, secondURL = _a.secondURL, secondURLTitle = _a.secondURLTitle, projectLink = _a.projectLink, twitter = _a.twitter, audit = _a.audit, thirdURL = _a.thirdURL, thirdURLTitle = _a.thirdURLTitle, chain = _a.chain;
+    var explorerLink = BLOCK_EXPLORER[chain];
+    var tokenLink = "".concat(explorerLink, "/address/").concat(tokenContract);
+    return (_jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [projectLink && twitter && (_jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: tokenContract, audit: audit })), valueTitle && (_jsxs(Flex, { sx: styles.infoRow, children: [_jsxs(Text, { sx: styles.titleText, children: [valueTitle, ": "] }), _jsx(Text, { sx: styles.contentText, children: valueContent })] })), value2Title && (_jsxs(Flex, { sx: styles.infoRow, children: [_jsxs(Text, { sx: styles.titleText, children: [value2Title, ": "] }), _jsx(Text, { sx: styles.contentText, children: value2Content })] })), _jsx(Flex, { sx: { justifyContent: 'center' }, children: _jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [_jsx(Flex, { sx: styles.linkRow, children: _jsxs(Link, { href: tokenLink, sx: styles.link, target: "_blank", children: ['View Token Contract', _jsx(Flex, { sx: { ml: '5px' }, children: _jsx(Svg, { icon: "external", color: "text", width: 10 }) })] }) }), secondURL && (_jsx(Flex, { sx: styles.linkRow, children: _jsxs(Link, { href: secondURL, sx: styles.link, target: "_blank", children: [secondURLTitle, _jsx(Flex, { sx: { ml: '5px' }, children: _jsx(Svg, { icon: "external", color: "text", width: 10 }) })] }) })), thirdURL && (_jsx(Flex, { sx: styles.linkRow, children: _jsx(Link, { href: thirdURL, sx: styles.link, target: "_blank", children: thirdURLTitle }) }))] }) })] }));
+};
+export default Tooltip;

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

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'infoRow' | 'linkRow' | 'titleText' | 'contentText' | 'iconButton' | 'link', ThemeUIStyleObject>;

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,44 @@
+export var styles = {
+    infoRow: {
+        justifyContent: 'space-between',
+        width: '100%',
+        marginBottom: '5px',
+    },
+    linkRow: {
+        width: '100%',
+        marginTop: '5px',
+        justifyContent: 'flex-end',
+        '& svg': { width: '11px' },
+    },
+    titleText: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 500,
+    },
+    contentText: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        fontWeight: 700,
+    },
+    iconButton: {
+        background: 'white3',
+        textDecoration: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 'fit-content',
+        height: '30px',
+        padding: '2px 5px',
+        borderRadius: '8px',
+        margin: '0 5px 5px 0',
+        '&:hover': {
+            cursor: 'pointer',
+        },
+    },
+    link: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        display: 'flex',
+        textDecoration: 'none',
+        '&: hover': { textDecoration: 'underline' },
+    },
+};

package/dist/components/uikit-sdk/Button/IconButton.js

@@ -0,0 +1,33 @@
+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 { Button } from 'theme-ui';
+import Svg from '../Svg';
+import { icons } from '../Svg/types';
+import { iconButtonVariants as variants } from './types';
+import style from './styles';
+var IconButton = function (_a) {
+    var _b = _a.icon, icon = _b === void 0 ? icons.DISCORD : _b, _c = _a.color, color = _c === void 0 ? 'white1' : _c, _d = _a.background, background = _d === void 0 ? 'yellow' : _d, _e = _a.variant, variant = _e === void 0 ? variants.PRIMARY : _e, iconWidth = _a.iconWidth, children = _a.children, props = __rest(_a, ["icon", "color", "background", "variant", "iconWidth", "children"]);
+    return (_jsx(Button, __assign({}, props, { variant: variant, sx: __assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', variant: "buttons.".concat(variant), color: 'primaryBright', background: background }, (variant === variants.PRIMARY ? style.primary : {})), (variant === variants.TRANSPARENT ? style.transparent : {})), children: children || (_jsx("span", { sx: { height: iconWidth, width: iconWidth }, children: _jsx(Svg, __assign({ color: color, icon: icon }, props, { width: iconWidth })) })) })));
+};
+export default IconButton;

package/dist/components/uikit-sdk/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from './types';
+declare const Checkbox: ({ scale, display, className, background, ...props }: CheckboxProps | any) => import("react").JSX.Element;
+export default Checkbox;

package/dist/components/uikit-sdk/Checkbox/index.js

@@ -0,0 +1,46 @@
+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 { scales } from './types';
+var getScale = function (_a) {
+    var scale = _a.scale;
+    switch (scale) {
+        case scales.SM:
+            return '21px';
+        case scales.MD:
+        default:
+            return '32px';
+    }
+};
+var Checkbox = function (_a) {
+    var _b = _a.scale, scale = _b === void 0 ? scales.SM : _b, _c = _a.display, display = _c === void 0 ? 'block' : _c, className = _a.className, background = _a.background, props = __rest(_a, ["scale", "display", "className", "background"]);
+    var scaleSize = getScale({ scale: scale });
+    var svgScale = scale === 'sm' ? 13 : 21;
+    return (_jsxs("span", { className: className, sx: {
+            display: display,
+            width: scaleSize,
+            height: scaleSize,
+            position: 'relative',
+        }, children: [_jsx("input", __assign({ type: "checkbox", sx: { variant: 'checkbox', background: background, borderColor: 'white4' } }, props)), _jsx("svg", { width: svgScale || '13', height: "auto", viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) })] }));
+};
+export default Checkbox;

package/dist/components/uikit-sdk/Flex/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const Flex: ({ children, ...props }: {
+    children: React.ReactNode;
+} | any) => React.JSX.Element;
+export default Flex;

package/dist/components/uikit-sdk/Input/Input.d.ts

@@ -0,0 +1,9 @@
+type variant = 'search' | 'password' | 'text';
+type inputStatus = 'default' | 'error' | 'success';
+declare const Input: ({ variant, width, status, isLoading, ...props }: {
+    variant?: variant;
+    width?: string[];
+    status?: inputStatus;
+    isLoading?: boolean;
+} | any) => import("react").JSX.Element;
+export default Input;

package/dist/components/uikit-sdk/Input/Input.js

@@ -0,0 +1,72 @@
+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 { Input as ThemeInput, Spinner } from 'theme-ui';
+import Flex from '../Flex';
+import Svg from '../Svg';
+import Text from '../Text';
+var colorScheme = {
+    default: 'gray',
+    error: 'red',
+    success: 'green',
+};
+var Input = function (_a) {
+    var variant = _a.variant, width = _a.width, status = _a.status, isLoading = _a.isLoading, props = __rest(_a, ["variant", "width", "status", "isLoading"]);
+    switch (variant) {
+        case 'search':
+            return (_jsxs(Flex, { sx: { position: 'relative', width: width ? width : 'unset' }, children: [_jsx(ThemeInput, __assign({}, props, { sx: {
+                            background: 'white3',
+                            border: 'none',
+                            pl: '10px',
+                            borderRadius: '10px',
+                            ':focus': { outline: 'none' },
+                        } })), _jsx(Flex, { sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' }, children: _jsx(Svg, { icon: "search", color: "grey" }) })] }));
+        case 'password':
+            var statusColor = colorScheme[status];
+            return (_jsxs(Flex, { sx: {
+                    width: width ? width : '100%',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '5px',
+                    position: 'relative',
+                }, children: [_jsx(ThemeInput, __assign({}, props, { type: "password", sx: {
+                            position: 'relative',
+                            background: 'white3',
+                            border: 'none',
+                            borderBottom: "2px solid ".concat(statusColor),
+                            color: statusColor,
+                            pl: '10px',
+                            borderRadius: '10px',
+                            ':focus': { outline: 'none' },
+                        } })), isLoading && (_jsx(Flex, { sx: { position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' }, children: _jsx(Spinner, { width: "20px", height: "20px" }) })), _jsx(Text, { sx: { fontSize: '10px', color: statusColor, visibility: status === 'default' ? 'hidden' : 'visible' }, children: status === 'error' ? 'Wrong Password' : 'Correct Password' })] }));
+        default:
+            return (_jsx(ThemeInput, __assign({}, props, { sx: {
+                    background: 'white3',
+                    border: 'none',
+                    pl: '10px',
+                    borderRadius: '10px',
+                    ':focus': { outline: 'none' },
+                } })));
+    }
+};
+export default Input;

package/dist/components/uikit-sdk/Input/NumericInput.d.ts

@@ -0,0 +1,9 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const NumericInput: ({ onUserInput, value, disabled, style, placeholder, }: {
+    onUserInput?: (input: string) => void;
+    value: string;
+    disabled?: boolean;
+    style?: ThemeUIStyleObject;
+    placeholder?: string;
+}) => import("react").JSX.Element;
+export default NumericInput;

package/dist/components/uikit-sdk/Input/StyledInput.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+//@ts-nocheck
+import styled from '@emotion/styled';
+import Flex from '../Flex';
+import Input from './Input';
+var StyledInputWrapper = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 10px;\n  height: 72px;\n  padding: 0px 16px;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 10px;\n  height: 72px;\n  padding: 0px 16px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white4;
+});
+var StyledInputComponent = styled(Input)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  background: none;\n  border: 0;\n  color: ", ";\n  flex: 1;\n  height: 56px;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  font-weight: 800;\n  font-size: 22px;\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  width: 100%;\n  background: none;\n  border: 0;\n  color: ", ";\n  flex: 1;\n  height: 56px;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  font-weight: 800;\n  font-size: 22px;\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return (theme.isDark ? theme.colors.primaryBright : theme.colors.primary);
+}, function (_a) {
+    var theme = _a.theme;
+    return !theme.isDark && theme.colors.gray;
+});
+var StyledInput = function (_a) {
+    var endAdornment = _a.endAdornment, onChange = _a.onChange, placeholder = _a.placeholder, startAdornment = _a.startAdornment, value = _a.value, height = _a.height;
+    return (_jsxs(StyledInputWrapper, { sx: { height: height !== null && height !== void 0 ? height : null }, children: [!!startAdornment && startAdornment, _jsx(StyledInputComponent, { placeholder: placeholder, value: value, onChange: onChange }), !!endAdornment && endAdornment] }));
+};
+export default StyledInput;
+var templateObject_1, templateObject_2;

package/dist/components/uikit-sdk/Modal/ModalFooter.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useContext } from 'react';
+import { Flex } from 'theme-ui';
+import styles from './styles';
+import Text from '../Text';
+import { Context as ModalContext } from "../../../contexts/ModalContext";
+var ModalFooter = function (_a) {
+    var children = _a.children, onDismiss = _a.onDismiss, t = _a.t;
+    var handleClose = useContext(ModalContext).handleClose;
+    var onClose = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        handleClose();
+    };
+    return (_jsxs(Flex, { sx: styles.modalFooter, children: [children, _jsx(Text, { onClick: onClose, sx: {
+                    textDecoration: 'underline',
+                    color: 'text',
+                    cursor: 'pointer',
+                    fontSize: '16px',
+                }, children: t ? t('Cancel') : 'Cancel' })] }));
+};
+export default ModalFooter;

package/dist/components/uikit-sdk/Modal/ModalHeader.js

@@ -0,0 +1,31 @@
+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, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { Divider, Flex } from 'theme-ui';
+import style from './styles';
+import { IconButton } from '../Button';
+var ModalHeader = function (_a) {
+    var children = _a.children, onDismiss = _a.onDismiss, hideDivider = _a.hideDivider, props = __rest(_a, ["children", "onDismiss", "hideDivider"]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({}, props, { sx: style.modalHead, children: [children, onDismiss && _jsx(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && _jsx(Divider, {})] }));
+};
+export default ModalHeader;

package/dist/components/uikit-sdk/Modal/index.js

@@ -0,0 +1,46 @@
+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 { useContext } from 'react';
+import { Box } from 'theme-ui';
+import { AnimatePresence, motion } from 'framer-motion';
+import style from './styles';
+import ModalHeader from './ModalHeader';
+import { Context as ModalContext } from '../../../contexts/ModalContext';
+import Text from '../Text';
+var Modal = function (_a) {
+    var children = _a.children, onDismiss = _a.onDismiss, _b = _a.open, open = _b === void 0 ? true : _b, title = _a.title, _c = _a.zIndex, zIndex = _c === void 0 ? 'modal' : _c, onAnimationComplete = _a.onAnimationComplete, backdrop = _a.backdrop, props = __rest(_a, ["children", "onDismiss", "open", "title", "zIndex", "onAnimationComplete", "backdrop"]);
+    var handleClose = useContext(ModalContext).handleClose;
+    var onClose = onDismiss || handleClose;
+    return (_jsxs(Box, { id: title, sx: { zIndex: zIndex }, children: [_jsx(AnimatePresence, { children: open && (_jsxs(motion.div, __assign({ initial: {
+                        opacity: 0,
+                        transform: 'translate(-50%, -50%) scale(0.1)',
+                    }, animate: {
+                        opacity: 1,
+                        transform: 'translate(-50%, -50%) scale(1.0)',
+                    }, transition: {
+                        opacity: { duration: 0.2 },
+                        transform: { duration: 0.2 },
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: __assign(__assign({}, style.container), { zIndex: zIndex }), onAnimationComplete: onAnimationComplete, children: [title && (_jsx(ModalHeader, { onDismiss: onClose, children: _jsx(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] }))) }), open && _jsx(Box, { sx: __assign(__assign({}, style.backdrop), backdrop), onClick: onClose })] }));
+};
+export default Modal;

package/dist/components/uikit-sdk/Select/Select.js

@@ -0,0 +1,61 @@
+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, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import React, { useRef, useState } from 'react';
+import { Box, Flex } from 'theme-ui';
+import { AnimatePresence, motion } from 'framer-motion';
+import { selectPadding, sizes, positions, selectedExtraPadding } from './types';
+import Svg from '../Svg';
+import styles from './styles';
+var Select = function (_a) {
+    var children = _a.children, active = _a.active, _b = _a.width, width = _b === void 0 ? 'fit-content' : _b, _c = _a.size, size = _c === void 0 ? sizes.MEDIUM : _c, _d = _a.position, position = _d === void 0 ? positions.BOTTOM : _d, className = _a.className, label = _a.label, props = __rest(_a, ["children", "active", "width", "size", "position", "className", "label"]);
+    var inputRef = useRef(null);
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var handleClick = function () { return setOpen(function (prev) { return !prev; }); };
+    var setNativeInput = function (val) {
+        var _a, _b, _c;
+        var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+        if (input) {
+            (_c = (_b = (_a = Object === null || Object === void 0 ? void 0 : Object.getOwnPropertyDescriptor) === null || _a === void 0 ? void 0 : _a.call(Object, window.HTMLInputElement.prototype, 'value')) === null || _b === void 0 ? void 0 : _b.set) === null || _c === void 0 ? void 0 : _c.call(input, val);
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: __assign(__assign({}, styles.container), { width: width }), onClick: handleClick, className: className, children: [_jsxs(Flex, { sx: {
+                            padding: selectedExtraPadding[size],
+                            pr: selectPadding[size],
+                            columnGap: '10px',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            overflow: 'hidden',
+                        }, children: [label ? (_jsx(Box, { children: label })) : (React.Children.map(children, function (child) {
+                                var _a;
+                                if (((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value) !== active) {
+                                    return null;
+                                }
+                                return React.cloneElement(child, __assign(__assign({}, child === null || child === void 0 ? void 0 : child.props), { active: true }));
+                            })), _jsx(Flex, { sx: { minWidth: '10px' }, children: _jsx(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) })] }), _jsx(AnimatePresence, { children: open && (_jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: __assign(__assign({}, styles.ul), { zIndex: 10, top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined, bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined }), children: React.Children.map(children, function (child) {
+                                return React.cloneElement(child, __assign(__assign({}, child === null || child === void 0 ? void 0 : child.props), { active: false, onClick: function () { var _a; return setNativeInput((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value); } }));
+                            }) })) }), _jsx("input", __assign({ ref: inputRef, value: active || '', "aria-hidden": "true", tabIndex: -1 }, props, { sx: styles.input }))] }), open && _jsx("div", { "aria-hidden": "true", onClick: function () { return setOpen(false); }, sx: styles.backdrop })] }));
+};
+export default Select;

package/dist/components/uikit-sdk/Select/SelectItem.d.ts

@@ -0,0 +1,3 @@
+import { SelectItemProps } from './types';
+declare const SelectItem: ({ onClick, value, active, size, children, ...props }: SelectItemProps) => import("react").JSX.Element;
+export default SelectItem;