@ape.swap/bonds-sdk 1.0.61 → 1.0.63

package/dist/components/BondSingle/BondSingle.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import '../../scss/bonds.scss';
+declare const BondSingle: React.FC;
+export default BondSingle;

package/dist/components/BondSingle/BondSingle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import '../../scss/bonds.scss';
+import { useParams } from 'react-router-dom';
+var BondSingle = function (_a) {
+    var billAddress = useParams().billAddress;
+    return (_jsxs("div", { children: ["Bond Clicked", _jsx("p", { children: billAddress })] }));
+};
+export default BondSingle;

package/dist/components/{bonds → Bonds}/Bonds.d.ts

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import '../../scss/bonds.scss';
 declare global {
     interface Window {
         ethereum?: any;

package/dist/components/{bonds → Bonds}/Bonds.js

@@ -56,6 +56,8 @@ import styles, { getColumnDiscountStyle } from './styles';
 import getTimePeriods from '../../utils/getTimePeriods';
 import { defaultTheme } from '../../theme';
 import Svg from '../uikit/Svg';
+import '../../scss/bonds.scss';
+import { useNavigate } from 'react-router-dom';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -132,9 +134,14 @@ var Bonds = function (_a) {
             return b.discount - a.discount;
         }
     });
+    var navigate = useNavigate();
+    var handleRowClick = function (billAddress) {
+        var url = "".concat(window.location.origin, "/bondsingle/").concat(billAddress);
+        window.open(url, '_blank');
+    };
     return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && (_jsx("p", { children: account })), isActive && account && (_jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" }))), _jsxs(Flex, __assign({ className: "container table-container", sx: styles.tableContainer }, { children: [_jsxs(Flex, __assign({ className: "container header-container", sx: styles.headerContainer }, { children: [_jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-header" })] })), sortedBonds.map(function (bond) {
                         var _a, _b, _c, _d;
-                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", sx: styles.bondrowContainer }, { children: [_jsx(Flex, __assign({ className: "column column-token", sx: styles.columnToken }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount", sx: getColumnDiscountStyle((_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0) }, { children: "".concat((_b = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _b === void 0 ? void 0 : _b.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr", sx: styles.columnArr }, { children: "".concat("".concat(((((_c = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _c !== void 0 ? _c : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%")) })), _jsx(Flex, __assign({ className: "column column-term", sx: styles.columnTerm }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining", sx: styles.columnTokensRemaining }, { children: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, __assign({ className: "column column-hotbond", sx: styles.hotBond }, { children: _jsx(Flex, __assign({ className: "icon icon-tooltip" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] })));
+                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return handleRowClick(bond.billAddress); } }, { children: [_jsx(Flex, __assign({ className: "column column-token", sx: styles.columnToken }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount", sx: getColumnDiscountStyle((_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0) }, { children: "".concat((_b = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _b === void 0 ? void 0 : _b.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr", sx: styles.columnArr }, { children: "".concat("".concat(((((_c = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _c !== void 0 ? _c : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%")) })), _jsx(Flex, __assign({ className: "column column-term", sx: styles.columnTerm }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining", sx: styles.columnTokensRemaining }, { children: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, __assign({ className: "column column-hotbond", sx: styles.hotBond }, { children: _jsx(Flex, __assign({ className: "icon icon-tooltip" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] })));
                     })] }))] })));
 };
 export default Bonds;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from './types';
+declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, ...props }: ButtonProps) => React.JSX.Element;
+export default Button;

package/dist/components/uikit/Button/Button.js

@@ -0,0 +1,91 @@
+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 from 'react';
+import { Button as ThemeUIButton, Spinner } from 'theme-ui';
+import { variants, buttonFontSizes, buttonPadding, sizes, buttonLineHeight } from './types';
+var Button = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? variants.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? sizes.MEDIUM : _c, load = _a.load, children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, fullWidth = _a.fullWidth, disabled = _a.disabled, props = __rest(_a, ["variant", "size", "load", "children", "startIcon", "endIcon", "fullWidth", "disabled"]);
+    var hoverStyle = {
+        '&:hover': {
+            '&:not([disabled])': {
+                borderColor: 'var(--theme-ui-colors-primaryButtonHovered)',
+                background: variant === 'primary' && 'var(--theme-ui-colors-primaryButtonHovered)',
+                opacity: 1,
+            },
+            '&:disabled': {},
+        },
+    };
+    if (variant === 'secondary') {
+        hoverStyle = {
+            '&:hover': {
+                '&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],
+                '&:disabled': {
+                    color: 'secondaryButtonDisableColor',
+                    borderColor: 'secondaryButtonDisable',
+                    opacity: 0.6,
+                },
+            },
+        };
+    }
+    if (variant === 'tertiary') {
+        hoverStyle = {
+            '&:hover': {
+                '&:not([disabled])': {
+                    borderColor: 'primaryBtnDisable',
+                    background: 'white4',
+                    opacity: 1,
+                },
+                '&:disabled': {},
+            },
+        };
+    }
+    if (variant === 'success') {
+        hoverStyle = {
+            '&:hover': {
+                '&:not([disabled])': {
+                    borderColor: 'hoveredSuccess',
+                    background: 'hoveredSuccess',
+                    opacity: 1,
+                },
+                '&:disabled': {},
+            },
+        };
+    }
+    if (variant === 'danger') {
+        hoverStyle = {
+            '&:hover': {
+                '&:not([disabled])': {
+                    borderColor: 'hoveredDanger',
+                    background: 'hoveredDanger',
+                    opacity: 1,
+                },
+                '&:disabled': {},
+            },
+        };
+    }
+    return (_jsxs(ThemeUIButton, __assign({ variant: variant, disabled: disabled, sx: __assign(__assign({ variant: "buttons.".concat(variant), textTransform: 'uppercase', fontSize: buttonFontSizes[size], lineHeight: buttonLineHeight[size], px: buttonPadding[size].x, py: buttonPadding[size].y, display: 'flex', justifyContent: 'center', transition: 'all .3s linear', '&:active': {
+                transform: 'scale(0.9)',
+            } }, hoverStyle), { width: fullWidth ? '100%' : 'max-content' }) }, props, { children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && _jsx(Spinner, { size: 16, ml: "5px" }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] })));
+};
+export default Button;

package/dist/components/uikit/Button/IconButton.d.ts

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

package/dist/components/uikit/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", __assign({ sx: { height: iconWidth, width: iconWidth } }, { children: _jsx(Svg, __assign({ color: color, icon: icon }, props, { width: iconWidth })) }))) })));
+};
+export default IconButton;

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

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

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

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

package/dist/components/uikit/Button/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/Button/styles.js

@@ -0,0 +1,30 @@
+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 defaultStyle = {
+    cursor: 'pointer',
+    color: 'primaryBright',
+    border: 'none',
+    transition: 'all .3s linear',
+    '&:hover': {
+        filter: 'brightness(115%)',
+    },
+    '&:active': {
+        transform: 'scale(0.9)',
+    },
+};
+var styles = {
+    primary: __assign({}, defaultStyle),
+    transparent: __assign(__assign({}, defaultStyle), { backgroundColor: 'transparent', backgroundRepeat: 'no-repeat', padding: '0px', border: 'none', cursor: 'pointer', svg: {
+            background: 'transparent',
+        } }),
+};
+export default styles;

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

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ButtonProps as ThemeUIButtonProps } from 'theme-ui';
+import { iconTypes } from '../Svg/types';
+export declare enum sizes {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare const buttonFontSizes: Record<sizes | any, string>;
+export declare const buttonLineHeight: Record<sizes | any, string>;
+export declare const buttonPadding: Record<sizes | any, {
+    x: number;
+    y: number;
+}>;
+export declare enum variants {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    TEXT = "text",
+    SUCCESS = "success",
+    DANGER = "danger"
+}
+export declare enum iconButtonVariants {
+    PRIMARY = "primary",
+    TRANSPARENT = "transparent",
+    CIRCULAR = "circular"
+}
+export type sizeProps = `${sizes}`;
+export type variantProps = `${variants}`;
+export type iconButtonVariantsProps = `${iconButtonVariants}`;
+export interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {
+    variant?: variantProps;
+    size?: sizeProps;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    fullWidth?: boolean;
+    load?: boolean;
+    [key: string]: any;
+}
+export interface IconButtonProps extends Omit<ButtonProps, 'variant'> {
+    variant?: iconButtonVariantsProps;
+    color?: string;
+    background?: string;
+    icon?: iconTypes;
+    iconWidth?: number;
+}

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

@@ -0,0 +1,37 @@
+var _a, _b, _c;
+export var sizes;
+(function (sizes) {
+    sizes["SMALL"] = "sm";
+    sizes["MEDIUM"] = "md";
+    sizes["LARGE"] = "lg";
+})(sizes || (sizes = {}));
+export var buttonFontSizes = (_a = {},
+    _a[sizes.SMALL] = '12px',
+    _a[sizes.MEDIUM] = '16px',
+    _a[sizes.LARGE] = '18px',
+    _a);
+export var buttonLineHeight = (_b = {},
+    _b[sizes.SMALL] = '10px',
+    _b[sizes.MEDIUM] = '24px',
+    _b[sizes.LARGE] = '33px',
+    _b);
+export var buttonPadding = (_c = {},
+    _c[sizes.SMALL] = { x: 5, y: 2 },
+    _c[sizes.MEDIUM] = { x: 7, y: 3 },
+    _c[sizes.LARGE] = { x: 10, y: 6 },
+    _c);
+export var variants;
+(function (variants) {
+    variants["PRIMARY"] = "primary";
+    variants["SECONDARY"] = "secondary";
+    variants["TERTIARY"] = "tertiary";
+    variants["TEXT"] = "text";
+    variants["SUCCESS"] = "success";
+    variants["DANGER"] = "danger";
+})(variants || (variants = {}));
+export var iconButtonVariants;
+(function (iconButtonVariants) {
+    iconButtonVariants["PRIMARY"] = "primary";
+    iconButtonVariants["TRANSPARENT"] = "transparent";
+    iconButtonVariants["CIRCULAR"] = "circular";
+})(iconButtonVariants || (iconButtonVariants = {}));

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+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/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", __assign({ className: className, sx: {
+            display: display,
+            width: scaleSize,
+            height: scaleSize,
+            position: 'relative',
+        } }, { children: [_jsx("input", __assign({ type: "checkbox", sx: { variant: 'checkbox', background: background } }, props)), _jsx("svg", __assign({ 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/Checkbox/types.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+import { ThemeUICSSObject } from 'theme-ui';
+export declare enum scales {
+    SM = "sm",
+    MD = "md"
+}
+export type scaleProps = `${scales}`;
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    scale?: scaleProps;
+    display?: ThemeUICSSObject['display'];
+}

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

@@ -0,0 +1,5 @@
+export var scales;
+(function (scales) {
+    scales["SM"] = "sm";
+    scales["MD"] = "md";
+})(scales || (scales = {}));

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

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

package/dist/components/uikit/Dropdown/Dropdown.js

@@ -0,0 +1,58 @@
+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 } from 'react';
+import { Box, Flex } from 'theme-ui';
+import { AnimatePresence, motion } from 'framer-motion';
+import { dropdownPadding, fontSizes, sizes } from './types';
+import Svg from '../Svg';
+var Dropdown = function (_a) {
+    var component = _a.component, children = _a.children, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, props = __rest(_a, ["component", "children", "size"]);
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var handleClick = function () { return setOpen(function (prev) { return !prev; }); };
+    return (_jsxs(Box, __assign({ sx: {
+            background: 'white2',
+            borderRadius: 'normal',
+            cursor: 'pointer',
+            width: '100%',
+            position: 'relative',
+        }, onClick: handleClick }, props, { children: [_jsxs(Flex, __assign({ sx: {
+                    px: dropdownPadding[size].x,
+                    py: dropdownPadding[size].y,
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    span: {
+                        fontSize: fontSizes[size],
+                    },
+                } }, { children: [component, _jsx(Flex, __assign({ sx: { minWidth: '10px' } }, { children: _jsx(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) }))] })), _jsx(AnimatePresence, { children: open && (_jsx(motion.div, __assign({ initial: { height: '10px' }, animate: { height: 'fit-content' }, exit: { height: '0px' }, sx: {
+                        position: 'absolute',
+                        background: 'white3',
+                        width: 'fit-content',
+                        borderBottomRightRadius: '10px',
+                        borderBottomLeftRadius: '10px',
+                        overflow: 'hidden',
+                        marginTop: '5px',
+                        top: '85%',
+                    } }, { children: children }))) })] })));
+};
+export default Dropdown;

package/dist/components/uikit/Dropdown/DropdownItem.d.ts

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

package/dist/components/uikit/Dropdown/DropdownItem.js

@@ -0,0 +1,47 @@
+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 { Box, NavLink } from 'theme-ui';
+import { dropdownItemPadding, sizes } from './types';
+import { dynamicStyles } from './styles';
+var Element = function (_a) {
+    var onClick = _a.onClick, url = _a.url, active = _a.active, size = _a.size, children = _a.children;
+    var style = dynamicStyles.dropdownItem({ active: active, size: size });
+    return url ? (_jsx(NavLink, __assign({ href: url, onClick: onClick, sx: style }, { children: children }))) : (_jsx(Box, __assign({ onClick: onClick, sx: style }, { children: children })));
+};
+var DropdownItem = function (_a) {
+    var onClick = _a.onClick, url = _a.url, active = _a.active, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, children = _a.children, props = __rest(_a, ["onClick", "url", "active", "size", "children"]);
+    return (_jsx(Box, __assign({ as: "li" }, props, { sx: {
+            px: dropdownItemPadding[size].x,
+            py: dropdownItemPadding[size].y,
+            listStyleType: active ? 'disc' : 'none',
+            cursor: 'pointer',
+            width: '100%',
+            color: 'text',
+            borderRadius: '10px',
+            '&:hover': {
+                backgroundColor: 'white4',
+            },
+        } }, { children: _jsx(Element, __assign({ url: url, onClick: onClick, active: active, size: size }, { children: children })) })));
+};
+export default DropdownItem;

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

@@ -0,0 +1,3 @@
+export { default as Dropdown } from './Dropdown';
+export { default as DropdownItem } from './DropdownItem';
+export type { DropdownProps, DropdownItemProps } from './types';

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { fontSizes } from './types';
+var styles = {};
+export var dynamicStyles = {
+    dropdownItem: function (_a) {
+        var active = _a.active, size = _a.size;
+        return ({
+            display: 'inline-block',
+            marginLeft: active ? '-10px' : undefined,
+            fontSize: fontSizes[size],
+            '*': {
+                fontSize: fontSizes[size],
+            },
+        });
+    },
+};
+export default styles;

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

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+export declare enum sizes {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare const fontSizes: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const dropdownPadding: {
+    sm: {
+        x: number;
+        y: number;
+    };
+    md: {
+        x: number;
+        y: number;
+    };
+    lg: {
+        x: number;
+        y: number;
+    };
+};
+export declare const dropdownItemPadding: {
+    sm: {
+        x: number;
+        y: number;
+    };
+    md: {
+        x: number;
+        y: number;
+    };
+    lg: {
+        x: number;
+        y: number;
+    };
+};
+type sizeProps = `${sizes}`;
+export interface DropdownProps {
+    component: React.ReactNode;
+    size?: sizeProps;
+    [key: string]: any;
+}
+export interface DropdownItemProps {
+    onClick?: () => void;
+    children?: ReactNode;
+    url?: string;
+    active?: boolean;
+    size?: sizeProps;
+    sx?: any;
+}
+export declare type Position = 'top' | 'top-right' | 'bottom';
+export interface PositionProps {
+    position?: Position;
+}
+export {};

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

@@ -0,0 +1,22 @@
+var _a, _b, _c;
+export var sizes;
+(function (sizes) {
+    sizes["SMALL"] = "sm";
+    sizes["MEDIUM"] = "md";
+    sizes["LARGE"] = "lg";
+})(sizes || (sizes = {}));
+export var fontSizes = (_a = {},
+    _a[sizes.SMALL] = 1,
+    _a[sizes.MEDIUM] = 3,
+    _a[sizes.LARGE] = 6,
+    _a);
+export var dropdownPadding = (_b = {},
+    _b[sizes.SMALL] = { x: 2, y: 1 },
+    _b[sizes.MEDIUM] = { x: 5, y: 4 },
+    _b[sizes.LARGE] = { x: 10, y: 8 },
+    _b);
+export var dropdownItemPadding = (_c = {},
+    _c[sizes.SMALL] = { x: 4, y: 1 },
+    _c[sizes.MEDIUM] = { x: 9, y: 2 },
+    _c[sizes.LARGE] = { x: 14, y: 4 },
+    _c);

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

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