decentraland-ui2 0.27.1-17417413495.commit-7bcaed9 → 0.28.0

package/dist/components/Blockie/Blockie.styled.d.ts

@@ -0,0 +1,13 @@
+declare const StyledCanvas: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & {
+    scale: number;
+    size: number;
+}, import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, {}>;
+declare const StyledBlockieChildrenWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export { StyledBlockieChildrenWrapper, StyledCanvas };

package/dist/components/Blockie/Blockie.styled.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
+const StyledCanvas = styled("canvas")((props) => {
+    const { scale, size } = props;
+    return {
+        borderRadius: 6,
+        verticalAlign: "text-bottom",
+        lineHeight: "0.5em",
+        marginLeft: "0.1em",
+        ...(scale * size <= 16 && { borderRadius: 1.5 }),
+        ...(scale * size <= 24 && { borderRadius: 3 }),
+        ...(scale * size <= 36 && { borderRadius: 4 }),
+    };
+});
+const StyledBlockieChildrenWrapper = styled(Box)({
+    marginLeft: "0.5em",
+});
+export { StyledBlockieChildrenWrapper, StyledCanvas };
+//# sourceMappingURL=Blockie.styled.js.map

package/dist/components/Blockie/Blockie.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blockie.styled.js","sourceRoot":"","sources":["../../../src/components/Blockie/Blockie.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,CAAC,CAGlC,CAAC,KAAK,EAAE,EAAE;IACX,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAE7B,OAAO;QACL,YAAY,EAAE,CAAC;QACf,aAAa,EAAE,aAAa;QAC5B,UAAU,EAAE,OAAO;QACnB,UAAU,EAAE,OAAO;QACnB,GAAG,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC;QAChD,GAAG,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;QAC9C,GAAG,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;KAC/C,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/C,UAAU,EAAE,OAAO;CACpB,CAAC,CAAA;AAEF,OAAO,EAAE,4BAA4B,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Blockie/Blockie.types.d.ts

@@ -0,0 +1,10 @@
+type BlockieProps = {
+    seed: string;
+    color?: string;
+    spotcolor?: string;
+    bgcolor?: string;
+    size?: number;
+    scale?: number;
+    children?: React.ReactNode;
+};
+export { BlockieProps };

package/dist/components/Blockie/Blockie.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Blockie.types.js.map

package/dist/components/Blockie/Blockie.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blockie.types.js","sourceRoot":"","sources":["../../../src/components/Blockie/Blockie.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export * from "./Blockie";
+export * from "./Blockie.types";

package/dist/components/Blockie/index.js

@@ -0,0 +1,3 @@
+export * from "./Blockie";
+export * from "./Blockie.types";
+//# sourceMappingURL=index.js.map

package/dist/components/Blockie/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Blockie/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA"}

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from "./Button.types";
+export declare const Button: ({ children, startIcon, endIcon, loading, loadingIcon, loadingPosition, disabled, size, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress, Button as MuiButton } from "@mui/material";
+const SPINNER_SIZES = {
+    small: 16,
+    medium: 20,
+    large: 24,
+};
+export const Button = ({ children, startIcon, endIcon, loading = false, loadingIcon, loadingPosition = "center", disabled = false, size = "medium", ...props }) => {
+    const defaultLoadingIcon = (_jsx(CircularProgress, { color: "inherit", size: SPINNER_SIZES[size] }));
+    const loadingElement = loadingIcon || defaultLoadingIcon;
+    const buttonChildren = loading && loadingPosition === "center" ? loadingElement : children;
+    return (_jsx(MuiButton, { disabled: disabled || loading, startIcon: loading && loadingPosition === "start" ? loadingElement : startIcon, endIcon: loading && loadingPosition === "end" ? loadingElement : endIcon, size: size, ...props, children: buttonChildren }));
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAA;AAGrE,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACD,CAAA;AAEV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,OAAO,GAAG,KAAK,EACf,WAAW,EACX,eAAe,GAAG,QAAQ,EAC1B,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACI,EAAE,EAAE;IAChB,MAAM,kBAAkB,GAAG,CACzB,KAAC,gBAAgB,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAChE,CAAA;IAED,MAAM,cAAc,GAAG,WAAW,IAAI,kBAAkB,CAAA;IAExD,MAAM,cAAc,GAClB,OAAO,IAAI,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAA;IAErE,OAAO,CACL,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,SAAS,EACP,OAAO,IAAI,eAAe,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAErE,OAAO,EAAE,OAAO,IAAI,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACxE,IAAI,EAAE,IAAI,KACN,KAAK,YAER,cAAc,GACL,CACb,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,51 @@
+import { ButtonProps } from "./Button.types";
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: ({ children, startIcon, endIcon, loading, loadingIcon, loadingPosition, disabled, size, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        variant: {
+            description: string;
+            control: string;
+            options: string[];
+            defaultValue: string;
+        };
+        loading: {
+            description: string;
+            control: string;
+            defaultValue: boolean;
+        };
+        disabled: {
+            description: string;
+            control: string;
+            defaultValue: boolean;
+        };
+        size: {
+            description: string;
+            control: string;
+            options: string[];
+            defaultValue: string;
+        };
+        color: {
+            description: string;
+            control: string;
+            options: string[];
+            defaultValue: string;
+        };
+        children: {
+            description: string;
+            control: string;
+            defaultValue: string;
+        };
+    };
+};
+type Story = StoryObj<ButtonProps>;
+declare const Basic: Story;
+declare const Variants: Story;
+declare const Colors: Story;
+declare const Sizes: Story;
+declare const Loading: Story;
+declare const Disabled: Story;
+export default meta;
+export { Basic, Variants, Colors, Sizes, Loading, Disabled };

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { Button } from "./Button";
+const meta = {
+    title: "Decentraland UI/Button",
+    component: Button,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            description: "The variant to use",
+            control: "select",
+            options: ["text", "outlined", "contained"],
+            defaultValue: "contained",
+        },
+        loading: {
+            description: "If true, the loading indicator is shown",
+            control: "boolean",
+            defaultValue: false,
+        },
+        disabled: {
+            description: "If true, the button is disabled",
+            control: "boolean",
+            defaultValue: false,
+        },
+        size: {
+            description: "The size of the button",
+            control: "select",
+            options: ["small", "medium", "large"],
+            defaultValue: "medium",
+        },
+        color: {
+            description: "The color of the button",
+            control: "select",
+            options: ["primary", "secondary", "error", "info", "success", "warning"],
+            defaultValue: "primary",
+        },
+        children: {
+            description: "The content of the button",
+            control: "text",
+            defaultValue: "Button",
+        },
+    },
+};
+// Story definitions
+const Basic = {
+    args: {
+        children: "Button",
+        variant: "contained",
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Basic button with default settings",
+            },
+            source: {
+                code: `
+<Button variant="contained">
+  Button
+</Button>
+`,
+            },
+        },
+    },
+};
+const Variants = {
+    render: () => (_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { variant: "contained", children: "Contained" }), _jsx(Button, { variant: "outlined", children: "Outlined" }), _jsx(Button, { variant: "text", children: "Text" })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "The Button component comes with three variants: contained (default), outlined, and text.",
+            },
+            source: {
+                code: `
+<Button variant="contained">Contained</Button>
+<Button variant="outlined">Outlined</Button>
+<Button variant="text">Text</Button>
+`,
+            },
+        },
+    },
+};
+const Colors = {
+    render: () => (_jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [_jsx(Button, { color: "primary", children: "Primary" }), _jsx(Button, { color: "secondary", children: "Secondary" }), _jsx(Button, { color: "error", children: "Error" }), _jsx(Button, { color: "warning", children: "Warning" }), _jsx(Button, { color: "info", children: "Info" }), _jsx(Button, { color: "success", children: "Success" })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "The Button component supports different colors to indicate different purposes.",
+            },
+            source: {
+                code: `
+<Button color="primary">Primary</Button>
+<Button color="secondary">Secondary</Button>
+<Button color="error">Error</Button>
+<Button color="warning">Warning</Button>
+<Button color="info">Info</Button>
+<Button color="success">Success</Button>
+`,
+            },
+        },
+    },
+};
+const Sizes = {
+    render: () => (_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(Button, { size: "small", children: "Small" }), _jsx(Button, { size: "medium", children: "Medium" }), _jsx(Button, { size: "large", children: "Large" })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "The Button component comes in three sizes: small, medium (default), and large.",
+            },
+            source: {
+                code: `
+<Button size="small">Small</Button>
+<Button size="medium">Medium</Button>
+<Button size="large">Large</Button>
+`,
+            },
+        },
+    },
+};
+const Loading = {
+    render: () => (_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { loading: true, variant: "contained", children: "Loading" }), _jsx(Button, { loading: true, variant: "outlined", children: "Loading" }), _jsx(Button, { loading: true, variant: "text", children: "Loading" })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "Buttons can show a loading state when processing an action.",
+            },
+            source: {
+                code: `
+<Button loading variant="contained">Loading</Button>
+<Button loading variant="outlined">Loading</Button>
+<Button loading variant="text">Loading</Button>
+`,
+            },
+        },
+    },
+};
+const Disabled = {
+    render: () => (_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { disabled: true, variant: "contained", children: "Disabled" }), _jsx(Button, { disabled: true, variant: "outlined", children: "Disabled" }), _jsx(Button, { disabled: true, variant: "text", children: "Disabled" })] })),
+    parameters: {
+        docs: {
+            description: {
+                story: "Buttons can be disabled to indicate that they are not interactive.",
+            },
+            source: {
+                code: `
+<Button disabled variant="contained">Disabled</Button>
+<Button disabled variant="outlined">Disabled</Button>
+<Button disabled variant="text">Disabled</Button>
+`,
+            },
+        },
+    },
+};
+// We need to keep the default export for Storybook to work properly
+// eslint-disable-next-line import/no-default-export
+export default meta;
+export { Basic, Variants, Colors, Sizes, Loading, Disabled };
+//# sourceMappingURL=Button.stories.js.map

package/dist/components/Button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { ButtonProps as MuiButtonProps } from "@mui/material";
+type LoadingPosition = "start" | "center" | "end";
+interface ButtonProps extends Omit<MuiButtonProps, "loading"> {
+    loading?: boolean;
+    loadingIcon?: ReactNode;
+    loadingPosition?: LoadingPosition;
+}
+export type { ButtonProps, LoadingPosition };

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./Button.types";
+export { Button } from "./Button";

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/ChainSelector/ChainSelector.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { type ChainSelectorProps } from "./ChainSelector.types";
+export declare const ChainSelector: React.MemoExoticComponent<(props: ChainSelectorProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/ChainSelector/ChainSelector.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ChainId, getChainName } from "@dcl/schemas";
+import ClearRoundedIcon from "@mui/icons-material/ClearRounded";
+import { Modal, Typography } from "@mui/material";
+import { IconChain } from "../IconChain/IconChain";
+import { useTabletAndBelowMediaQuery } from "../Media";
+import { ChainNameIconMap, } from "./ChainSelector.types";
+import { ChainButton, ChainSelectorCloseButton, ChainSelectorContainer, ChainSelectorModalTitleContainer, ChainSelectorWrapper, ConfirmLabel, ConnectedLabel, SelectorButton, } from "./ChainSelector.styled";
+export const ChainSelector = React.memo((props) => {
+    const { chains, selectedChain, chainBeingConfirmed, i18n, onSelectChain } = props;
+    const chainBeingConfirmedRef = useRef(chainBeingConfirmed);
+    const isMobileOrTablet = useTabletAndBelowMediaQuery();
+    // This effect is used to close the modal when the chain being confirmed changes
+    useEffect(() => {
+        if (selectedChain && selectedChain === chainBeingConfirmedRef.current) {
+            chainBeingConfirmedRef.current = undefined;
+            setShowModal(false);
+        }
+    }, [selectedChain]);
+    const [showModal, setShowModal] = useState(false);
+    const title = i18n?.title || "Select Network";
+    const onButtonClick = useCallback(() => {
+        setShowModal(!showModal);
+    }, []);
+    const onSelectChainHandler = useCallback((chainId) => {
+        onSelectChain(chainId);
+        chainBeingConfirmedRef.current = chainId;
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SelectorButton, { variant: "contained", color: "secondary", startIcon: _jsx(IconChain, { icon: ChainNameIconMap[selectedChain] }), onClick: onButtonClick, children: !isMobileOrTablet
+                    ? selectedChain === ChainId.ETHEREUM_MAINNET
+                        ? "Ethereum"
+                        : getChainName(selectedChain)
+                    : null }), _jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: _jsxs(ChainSelectorContainer, { elevation: 1, children: [_jsxs(ChainSelectorModalTitleContainer, { children: [title && _jsx(Typography, { variant: "h5", children: title }), _jsx(ChainSelectorCloseButton, { "aria-label": "close", size: "large", onClick: () => setShowModal(false), children: _jsx(ClearRoundedIcon, {}) })] }), _jsx(ChainSelectorWrapper, { children: chains.map((chain) => {
+                                const chainName = chain === ChainId.ETHEREUM_MAINNET
+                                    ? "Ethereum"
+                                    : getChainName(chain);
+                                return (_jsxs(ChainButton, { variant: "text", color: "secondary", startIcon: _jsx(IconChain, { icon: ChainNameIconMap[chain] }), onClick: () => onSelectChainHandler(chain), isSelected: selectedChain === chain, children: [chainName, selectedChain === chain ? (_jsx(ConnectedLabel, { children: i18n.connected })) : chainBeingConfirmed && chain === chainBeingConfirmed ? (_jsx(ConfirmLabel, { children: i18n.confirmInWallet })) : null] }, chain));
+                            }) })] }) })] }));
+});
+//# sourceMappingURL=ChainSelector.js.map

package/dist/components/ChainSelector/ChainSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSelector.js","sourceRoot":"","sources":["../../../src/components/ChainSelector/ChainSelector.tsx"],"names":[],"mappings":"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"}

package/dist/components/ChainSelector/ChainSelector.stories.d.ts

@@ -0,0 +1,8 @@
+import { ChainSelectorProps } from "./ChainSelector.types";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+type Story = StoryObj<ChainSelectorProps>;
+declare const Simple: Story;
+declare const Confirmed: Story;
+export default meta;
+export { Simple, Confirmed };

package/dist/components/ChainSelector/ChainSelector.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChainId } from "@dcl/schemas";
+import { ChainSelector } from "./ChainSelector";
+const meta = {
+    component: ChainSelector,
+    title: "Decentraland UI/Chain Selector",
+    argTypes: {
+        chains: {
+            table: {
+                disable: true,
+            },
+        },
+        i18n: {
+            description: "Internationalization",
+            control: "object",
+        },
+    },
+    render: (args) => (_jsx(ChainSelector, { onSelectChain: (chain) => console.log(chain), selectedChain: ChainId.ETHEREUM_MAINNET, chains: [
+            ChainId.ETHEREUM_MAINNET,
+            ChainId.MATIC_MAINNET,
+            ChainId.ARBITRUM_MAINNET,
+            ChainId.OPTIMISM_MAINNET,
+            ChainId.BSC_MAINNET,
+            ChainId.FANTOM_MAINNET,
+            ChainId.AVALANCHE_MAINNET,
+        ], i18n: {
+            title: "Select Network",
+            connected: "Connected",
+            confirmInWallet: "Confirm in wallet",
+        }, ...args })),
+};
+const Simple = {};
+const Confirmed = {
+    name: "With chain being confirmed",
+    args: {
+        chainBeingConfirmed: ChainId.MATIC_MAINNET,
+    },
+};
+// eslint-disable-next-line import/no-default-export
+export default meta;
+export { Simple, Confirmed };
+//# sourceMappingURL=ChainSelector.stories.js.map

package/dist/components/ChainSelector/ChainSelector.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSelector.stories.js","sourceRoot":"","sources":["../../../src/components/ChainSelector/ChainSelector.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAI/C,MAAM,IAAI,GAAS;IACjB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,gCAAgC;IACvC,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;aACd;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,sBAAsB;YACnC,OAAO,EAAE,QAAQ;SAClB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,KAAC,aAAa,IACZ,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAC5C,aAAa,EAAE,OAAO,CAAC,gBAAgB,EACvC,MAAM,EAAE;YACN,OAAO,CAAC,gBAAgB;YACxB,OAAO,CAAC,aAAa;YACrB,OAAO,CAAC,gBAAgB;YACxB,OAAO,CAAC,gBAAgB;YACxB,OAAO,CAAC,WAAW;YACnB,OAAO,CAAC,cAAc;YACtB,OAAO,CAAC,iBAAiB;SAC1B,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE,WAAW;YACtB,eAAe,EAAE,mBAAmB;SACrC,KACG,IAAI,GACR,CACH;CACF,CAAA;AAID,MAAM,MAAM,GAAU,EAAE,CAAA;AACxB,MAAM,SAAS,GAAU;IACvB,IAAI,EAAE,4BAA4B;IAClC,IAAI,EAAE;QACJ,mBAAmB,EAAE,OAAO,CAAC,aAAa;KAC3C;CACF,CAAA;AAED,oDAAoD;AACpD,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ChainSelector/ChainSelector.styled.d.ts

@@ -0,0 +1,53 @@
+interface ChainButtonProps {
+    isSelected?: boolean;
+    isActive?: boolean;
+    isDisabled?: boolean;
+}
+declare const SelectorButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "size"> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    children?: import("react").ReactNode | undefined;
+}, {}, {}>;
+declare const ChainButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "size"> & {
+    theme?: import("@emotion/react").Theme;
+} & ChainButtonProps, {}, {}>;
+declare const ConnectedLabel: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "typography" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ConfirmLabel: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "typography" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    children?: import("react").ReactNode | undefined;
+}, {}, {}>;
+declare const ChainSelectorModal: import("@emotion/styled").StyledComponent<import("../Modal").ModalProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ChainSelectorContainer: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "elevation" | "className" | "style" | "classes" | "children" | "square" | "sx" | "variant"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ChainSelectorWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ChainSelectorModalTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const ChainSelectorCloseButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export { SelectorButton, ChainButton, ConnectedLabel, ConfirmLabel, ChainSelectorModal, ChainSelectorContainer, ChainSelectorWrapper, ChainSelectorModalTitleContainer, ChainSelectorCloseButton, };