@ape.swap/bonds-sdk 1.0.60 → 1.0.62

package/dist/components/uikit/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 { Text } from '../../uikit';
+import Flex from '../Flex';
+import Svg from '../Svg';
+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, __assign({ 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, __assign({ sx: { position: 'absolute', right: 5, justifyContent: 'center', height: '100%' } }, { children: _jsx(Svg, { icon: "search" }) }))] })));
+        case 'password':
+            var statusColor = colorScheme[status];
+            return (_jsxs(Flex, __assign({ 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, __assign({ sx: { position: 'absolute', top: '5px', right: '5px', justifyContent: 'center', height: '100%' } }, { children: _jsx(Spinner, { width: "20px", height: "20px" }) }))), _jsx(Text, __assign({ 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/Input/NumericInput.d.ts

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

package/dist/components/uikit/Input/NumericInput.js

@@ -0,0 +1,35 @@
+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 { isNumber } from '../../../utils/numbers';
+import Input from './Input';
+var NumericInput = function (_a) {
+    var onUserInput = _a.onUserInput, value = _a.value, disabled = _a.disabled, style = _a.style, _b = _a.placeholder, placeholder = _b === void 0 ? '0.0' : _b;
+    return (_jsx(Input, { sx: __assign({ border: 'none', padding: '0px 0px', position: 'relative', width: '100%', display: 'inline-block', fontSize: ['19px', '19px', '22px', '22px'], ':focus': { outline: 'none' } }, style), disabled: disabled, value: value, onChange: function (e) {
+            onUserInput && onUserInput(e.target.value);
+        }, placeholder: placeholder, pattern: "^[0-9]*[.,]?[0-9]*$", onInput: function (v) {
+            if (v.currentTarget.value.includes(',')) {
+                v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
+            }
+            if (v.currentTarget.value.includes('%')) {
+                v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
+            }
+            if (v.currentTarget.value === '.') {
+                v.currentTarget.value = '0.';
+            }
+            v.currentTarget.value =
+                !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
+                    ? v.currentTarget.value
+                    : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
+        } }));
+};
+export default NumericInput;

package/dist/components/uikit/Input/StyledInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface InputProps {
+    endAdornment?: React.ReactNode;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    startAdornment?: React.ReactNode;
+    value: string;
+    height?: string;
+}
+declare const StyledInput: React.FC<InputProps>;
+export default StyledInput;

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

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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";
+//@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, __assign({ 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/Input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NumericInput } from './NumericInput';
+export { default as Input } from './Input';
+export { default as StyledInput } from './StyledInput';

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

@@ -0,0 +1,3 @@
+export { default as NumericInput } from './NumericInput';
+export { default as Input } from './Input';
+export { default as StyledInput } from './StyledInput';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { LinkProps } from 'next/link';
+import { ThemeUIStyleObject } from 'theme-ui';
+interface LinkTypes extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>, LinkProps {
+    children: React.ReactNode;
+    sx?: ThemeUIStyleObject;
+}
+declare const Link: ({ children, ...props }: LinkTypes | any) => import("react").JSX.Element;
+export default Link;

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

@@ -0,0 +1,29 @@
+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 { default as NextLink } from 'next/link';
+var Link = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (_jsx(NextLink, __assign({}, props, { sx: __assign(__assign({}, props === null || props === void 0 ? void 0 : props.sx), { color: 'text', textDecoration: 'underline', border: 'none', ':visited': { textDecoration: 'none' }, ':active': { textDecoration: 'none' } }) }, { children: children })));
+};
+export default Link;

package/dist/components/uikit/Modal/ModalFooter.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InternalProps } from './types';
+declare const ModalFooter: ({ children, onDismiss, t }: InternalProps) => React.JSX.Element;
+export default ModalFooter;

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

@@ -0,0 +1,32 @@
+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 { 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, __assign({ sx: styles.modalFooter }, { children: [children, _jsx(Text, __assign({ onClick: onClose, sx: {
+                    textDecoration: 'underline',
+                    color: 'text',
+                    cursor: 'pointer',
+                    fontSize: '16px',
+                } }, { children: t ? t('Cancel') : 'Cancel' }))] })));
+};
+export default ModalFooter;

package/dist/components/uikit/Modal/ModalHeader.d.ts

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

package/dist/components/uikit/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/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from './types';
+declare const Modal: ({ children, onDismiss, open, title, zIndex, onAnimationComplete, backdrop, ...props }: ModalProps) => React.JSX.Element;
+export default Modal;

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

@@ -0,0 +1,55 @@
+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, { 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, __assign({ 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, __assign({ onDismiss: onClose }, { children: _jsx(Text, __assign({ sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' } }, { children: title })) }))), React.Children.map(children, function (child) {
+                            if (React.isValidElement(child)) {
+                                return React.cloneElement(child, __assign(__assign({}, child === null || child === void 0 ? void 0 : child.props), { onDismiss: function () {
+                                        var _a, _b;
+                                        ;
+                                        (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a), onClose();
+                                    } }));
+                            }
+                            return child;
+                        })] }))) }), open && _jsx(Box, { sx: __assign(__assign({}, style.backdrop), backdrop), onClick: onClose })] })));
+};
+export default Modal;

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

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

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

@@ -0,0 +1,62 @@
+var styles = {
+    container: {
+        padding: '20px',
+        background: 'white2',
+        borderRadius: 'normal',
+        color: 'text',
+        hr: {
+            background: '#DCD9D9',
+        },
+        position: 'fixed',
+        display: 'block',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '380px',
+        minWidth: ['95%', 'min(360px, 90%)', '320px'],
+        overflowY: 'auto',
+        maxHeight: 'calc(100% - 30px)',
+        maxWidth: '95vw',
+    },
+    backdrop: {
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: 'modalOverlay',
+        width: '100%',
+        height: '100%',
+        zIndex: 100,
+        transition: 'all 1s ease',
+    },
+    modalHead: {
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        svg: {
+            fill: 'text',
+            marginLeft: 'auto',
+            cursor: 'pointer',
+        },
+        button: {
+            ml: 'auto',
+        },
+    },
+    modalFooter: {
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pt: 9,
+        gap: 4,
+    },
+    cancelButton: {
+        background: 'transparent',
+        textDecoration: 'underline',
+        color: 'text',
+        cursor: 'pointer',
+        fontSize: 0,
+        fontWeight: 'normal',
+        p: 0,
+    },
+};
+export default styles;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeUIStyleObject, SxProp } from 'theme-ui';
+export interface InternalProps {
+    children?: React.ReactNode;
+    onDismiss?: () => void;
+    onAnimationComplete?: () => void;
+    t?: (key: string) => string;
+    hideDivider?: boolean;
+}
+export interface ModalProps extends InternalProps {
+    children: React.ReactNode;
+    open?: boolean;
+    title?: string;
+    zIndex?: string | number;
+    sx?: ThemeUIStyleObject;
+    backdrop?: SxProp['sx'];
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectProps } from './types';
+declare const Select: ({ children, active, width, size, position, className, label, ...props }: SelectProps) => React.JSX.Element;
+export default Select;

package/dist/components/uikit/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, __assign({ sx: __assign(__assign({}, styles.container), { width: width }), onClick: handleClick, className: className }, { children: [_jsxs(Flex, __assign({ 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, __assign({ sx: { minWidth: '10px' } }, { children: _jsx(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) }))] })), _jsx(AnimatePresence, { children: open && (_jsx(motion.div, __assign({ 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/Select/SelectItem.d.ts

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

package/dist/components/uikit/Select/SelectItem.js

@@ -0,0 +1,40 @@
+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 { selectItemPadding, sizes } from './types';
+import { dynamicStyles } from './styles';
+import Flex from '../Flex';
+var SelectItem = function (_a) {
+    var onClick = _a.onClick, value = _a.value, active = _a.active, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, children = _a.children, props = __rest(_a, ["onClick", "value", "active", "size", "children"]);
+    var style = dynamicStyles.dropdownItem({ size: size });
+    return (_jsx(Flex, __assign({ as: "li" }, props, { onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(value); }, sx: {
+            padding: selectItemPadding[size],
+            listStyleType: 'none',
+            cursor: 'pointer',
+            borderRadius: '10px',
+            '&:hover': {
+                backgroundColor: !active ? 'white3' : undefined,
+            },
+        } }, { children: _jsx(Flex, __assign({ sx: style }, { children: children })) })));
+};
+export default SelectItem;

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<'container' | 'ul' | 'backdrop' | 'input', ThemeUIStyleObject>;
+export declare const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject>;
+export default styles;

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

@@ -0,0 +1,50 @@
+import { fontSizes } from './types';
+var styles = {
+    container: {
+        background: 'white3',
+        borderRadius: '10px',
+        cursor: 'pointer',
+        width: 'fit-content',
+        height: 'fit-content',
+        position: 'relative',
+    },
+    ul: {
+        position: 'absolute',
+        background: 'white2',
+        borderRadius: '10px',
+        cursor: 'pointer',
+        minWidth: '100%',
+        width: 'max-content',
+        overflow: 'hidden',
+        boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
+    },
+    backdrop: {
+        width: '98vw',
+        height: '100vh',
+        position: 'fixed',
+        background: 'transparent',
+        top: 0,
+        left: 0,
+    },
+    input: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+        width: '100%',
+    },
+};
+export var dynamicStyles = {
+    dropdownItem: function (_a) {
+        var size = _a.size;
+        return ({
+            width: '100%',
+            fontSize: fontSizes[size],
+            '*': {
+                fontSize: fontSizes[size],
+            },
+        });
+    },
+};
+export default styles;