@ape.swap/bonds-sdk 1.0.60 → 1.0.62

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/uikit/Tag/ListTag.js

@@ -0,0 +1,20 @@
+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 { lpTags } from './types';
+import Flex from '../Flex';
+var ListTag = function (_a) {
+    var variant = _a.variant, _b = _a.text, text = _b === void 0 ? '' : _b, styleCustom = _a.styleCustom;
+    return (_jsx(Flex, __assign({ variant: variant, sx: __assign(__assign({}, styles.listTagCont({ variant: variant })), styleCustom) }, { children: text ? (_jsx(Flex, __assign({ sx: styles.tagText({ variant: variant }) }, { children: text }))) : (_jsxs(Flex, __assign({ sx: styles.tagText({ variant: variant }) }, { children: [variant.toUpperCase().replace('_', ' '), " ", lpTags.includes(variant) && 'LP'] }))) })));
+};
+export default ListTag;

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

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

package/dist/components/uikit/Tag/Tag.js

@@ -0,0 +1,42 @@
+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 { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import React from 'react';
+import { StyledTag } from './styles';
+var Tag = function (_a) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, children = _a.children, props = __rest(_a, ["startIcon", "endIcon", "children"]);
+    return (_jsxs(StyledTag, __assign({}, props, { children: [React.isValidElement(startIcon) &&
+                React.cloneElement(startIcon, {
+                    //@ts-ignore
+                    mr: '0.5rem',
+                }), children, React.isValidElement(endIcon) &&
+                React.cloneElement(endIcon, {
+                    //@ts-ignore
+                    ml: '0.5rem',
+                })] })));
+};
+Tag.defaultProps = {
+    variant: 'primary',
+    outline: false,
+};
+export default Tag;

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

@@ -0,0 +1,3 @@
+export { default as Tag } from './Tag';
+export { default as ListTag } from './ListTag';
+export type { TagProps, Variants as TagVariants } from './types';

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

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

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

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

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

@@ -0,0 +1,44 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+var getThemeTextColor = function (_a) {
+    var outline = _a.outline, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    return (outline ? variant : '#ffffff');
+};
+export var StyledTag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: 16px;\n  color: ", ";\n  display: inline-flex;\n  font-size: 14px;\n  font-weight: 300;\n  height: 28px;\n  line-height: 1.5;\n  padding: 0 8px;\n  white-space: nowrap;\n\n  svg {\n    fill: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: 16px;\n  color: ", ";\n  display: inline-flex;\n  font-size: 14px;\n  font-weight: 300;\n  height: 28px;\n  line-height: 1.5;\n  padding: 0 8px;\n  white-space: nowrap;\n\n  svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+    var outline = _a.outline, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    return (outline ? 'transparent' : variant);
+}, function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    return variant;
+}, getThemeTextColor, getThemeTextColor);
+export var styles = {
+    listTagCont: function (_a) {
+        var _b = _a.variant, variant = _b === void 0 ? 'ape' : _b;
+        return ({
+            alignItems: 'center',
+            background: function (theme) { var _a, _b, _c, _d, _e; return (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.listTagBg) === null || _b === void 0 ? void 0 : _b[variant]) !== null && _c !== void 0 ? _c : (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.listTagBg) === null || _e === void 0 ? void 0 : _e.default; },
+            borderRadius: '3px',
+            display: 'inline-flex',
+            height: '15px',
+            padding: '0 5px',
+        });
+    },
+    tagText: function (_a) {
+        var _b = _a.variant, variant = _b === void 0 ? 'ape' : _b;
+        return ({
+            color: function (theme) {
+                var _a, _b, _c, _d, _e;
+                return ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.listTagTextColor) === null || _b === void 0 ? void 0 : _b[variant])
+                    ? (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.listTagTextColor) === null || _d === void 0 ? void 0 : _d[variant]
+                    : (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.primaryBright;
+            },
+            fontSize: '10px',
+            fontWeight: 600,
+            lineHeight: '15px',
+        });
+    },
+};
+var templateObject_1;

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

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { SpaceProps } from 'styled-system';
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const variants: {
+    readonly PRIMARY: "primary";
+    readonly SUCCESS: "success";
+    readonly BINANCE: "binance";
+    readonly ERROR: "error";
+    readonly SECONDARY: "secondary";
+    readonly TEXTDISABLED: "textDisabled";
+    readonly TEXTSUBTLE: "textSubtle";
+};
+export type Variants = (typeof variants)[keyof typeof variants];
+export interface TagProps extends SpaceProps {
+    variant?: Variants;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    children?: ReactNode;
+    outline?: boolean;
+}
+export declare const listTagVariants: {
+    readonly APE: "ape";
+    readonly UNI: "uni";
+    readonly ARK: "ark";
+    readonly NEW: "new";
+    readonly HOT: "hot";
+    readonly AUTO: "auto";
+    readonly MAX: "max";
+    readonly yield: "yield";
+    readonly BETA: "beta";
+    readonly LIQUIDITY: "liquidity";
+    readonly RESERVE: "reserve";
+    readonly LAUNCH: "launch";
+    readonly bondLp: "bondLp";
+    readonly migration: "migration";
+    readonly CEX_FUND: "cex_fund";
+    readonly QuickswapV2: "QuickSwap v2";
+    readonly PancakeSwapV2: "PancakeSwap v2";
+    readonly expired: "expired";
+    readonly permalock: "permalock";
+};
+export type ListTagVariants = (typeof listTagVariants)[keyof typeof listTagVariants];
+export interface ListTagProps extends SpaceProps {
+    variant: ListTagVariants;
+    text?: string;
+    styleCustom?: ThemeUIStyleObject;
+}
+export declare const lpTags: string[];

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

@@ -0,0 +1,34 @@
+var _a;
+import { LiquidityDex } from '@ape.swap/apeswap-lists';
+export var variants = {
+    PRIMARY: 'primary',
+    SUCCESS: 'success',
+    BINANCE: 'binance',
+    ERROR: 'error',
+    SECONDARY: 'secondary',
+    TEXTDISABLED: 'textDisabled',
+    TEXTSUBTLE: 'textSubtle',
+};
+export var listTagVariants = (_a = {
+        APE: 'ape',
+        UNI: 'uni',
+        ARK: 'ark',
+        NEW: 'new',
+        HOT: 'hot',
+        AUTO: 'auto',
+        MAX: 'max',
+        yield: 'yield',
+        BETA: 'beta',
+        LIQUIDITY: 'liquidity',
+        RESERVE: 'reserve',
+        LAUNCH: 'launch',
+        bondLp: 'bondLp',
+        migration: 'migration',
+        CEX_FUND: 'cex_fund'
+    },
+    _a[LiquidityDex.QuickswapV2] = 'QuickSwap v2',
+    _a[LiquidityDex.PancakeSwapV2] = 'PancakeSwap v2',
+    _a.expired = 'expired',
+    _a.permalock = 'permalock',
+    _a);
+export var lpTags = ['ape', 'uni', 'ark'];

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextProps } from './types';
+declare const Text: ({ variant, weight, size, children, color, ...props }: TextProps | any) => React.JSX.Element;
+export default Text;

package/dist/components/uikit/Text/index.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);
+};
+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 { Text as ThemeUIText } from 'theme-ui';
+import { variants } from './types';
+var Text = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? variants.NORMAL : _b, _c = _a.weight, weight = _c === void 0 ? variants.NORMAL : _c, size = _a.size, children = _a.children, _d = _a.color, color = _d === void 0 ? 'text' : _d, props = __rest(_a, ["variant", "weight", "size", "children", "color"]);
+    return (_jsx(ThemeUIText, __assign({}, props, { sx: {
+            variant: variant === variants.LINK ? "flex.".concat(variant) : "text.".concat(variant),
+            color: color,
+            fontWeight: weight,
+            fontSize: size,
+        } }, { children: children })));
+};
+export default Text;

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

@@ -0,0 +1,23 @@
+import { TextProps as ThemeUITextProps } from 'theme-ui';
+export declare enum variants {
+    SMALL = "sm",
+    NORMAL = "md",
+    LARGE = "lg",
+    LINK = "link"
+}
+export declare enum weights {
+    LIGHT = "light",
+    NORMAL = "normal",
+    BOLD = "bold"
+}
+type variantProps = `${variants}`;
+type weightProps = `${weights}` | number;
+type sizeProps = string;
+export interface TextProps extends Omit<ThemeUITextProps, 'sx'> {
+    variant?: variantProps;
+    weight?: weightProps;
+    color?: string;
+    size?: sizeProps;
+    [key: string]: any;
+}
+export {};

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

@@ -0,0 +1,13 @@
+export var variants;
+(function (variants) {
+    variants["SMALL"] = "sm";
+    variants["NORMAL"] = "md";
+    variants["LARGE"] = "lg";
+    variants["LINK"] = "link";
+})(variants || (variants = {}));
+export var weights;
+(function (weights) {
+    weights["LIGHT"] = "light";
+    weights["NORMAL"] = "normal";
+    weights["BOLD"] = "bold";
+})(weights || (weights = {}));

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

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

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

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

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

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

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

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

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

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