@openocean.finance/widget 1.0.16 → 1.0.17

package/dist/esm/components/AmountInput/AmountInput.style.js

@@ -0,0 +1,35 @@
+import { Box, InputBase, FormControl as MuiFormControl, inputBaseClasses, styled, } from '@mui/material';
+export const maxInputFontSize = 24;
+export const minInputFontSize = 14;
+export const FormContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(2),
+}));
+export const FormControl = styled(MuiFormControl)(() => ({
+    height: 40,
+}));
+export const Input = styled(InputBase)(({ theme }) => ({
+    fontSize: 24,
+    fontWeight: 700,
+    boxShadow: 'none',
+    lineHeight: 1.5,
+    [`.${inputBaseClasses.input}`]: {
+        height: 24,
+        padding: theme.spacing(0, 0, 0, 2),
+    },
+    '& input[type="number"]::-webkit-outer-spin-button, & input[type="number"]::-webkit-inner-spin-button': {
+        WebkitAppearance: 'none',
+        margin: 0,
+    },
+    '& input[type="number"]': {
+        MozAppearance: 'textfield',
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+        color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+        WebkitTextFillColor: 'unset',
+    },
+}));
+//# sourceMappingURL=AmountInput.style.js.map

package/dist/esm/components/AmountInput/AmountInput.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.style.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInput.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,SAAS,EACT,WAAW,IAAI,cAAc,EAC7B,gBAAgB,EAChB,MAAM,GACP,MAAM,eAAe,CAAA;AAEtB,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAClC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC1B,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,EAAE;CACX,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,GAAG;IACf,CAAC,IAAI,gBAAgB,CAAC,KAAK,EAAE,CAAC,EAAE;QAC9B,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACnC;IACD,sGAAsG,EACpG;QACE,gBAAgB,EAAE,MAAM;QACxB,MAAM,EAAE,CAAC;KACV;IACH,wBAAwB,EAAE;QACxB,aAAa,EAAE,WAAW;KAC3B;IACD,CAAC,KAAK,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAClC,KAAK,EAAE,SAAS;KACjB;IACD,CAAC,IAAI,gBAAgB,CAAC,KAAK,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE;QAC3D,mBAAmB,EAAE,OAAO;KAC7B;CACF,CAAC,CAAC,CAAA"}

package/dist/esm/components/AmountInput/AmountInputAdornment.style.d.ts

@@ -0,0 +1,2 @@
+export declare const MaxButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "size" | "disabled" | "classes" | "variant" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const MaxButtonSkeleton: import("@emotion/styled").StyledComponent<import("@mui/material").SkeletonOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "width" | "height" | "animation" | "children" | "sx" | "style" | "className" | "classes" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/components/AmountInput/AmountInputAdornment.style.js

@@ -0,0 +1,13 @@
+import { Button as MuiButton, Skeleton, styled } from '@mui/material';
+export const MaxButton = styled(MuiButton)(({ theme }) => ({
+    padding: theme.spacing(0.5, 1, 0.625, 1),
+    lineHeight: 1.0715,
+    fontSize: '0.875rem',
+    minWidth: 'unset',
+}));
+export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
+    width: 46,
+    height: 24,
+    borderRadius: theme.shape.borderRadiusSecondary,
+}));
+//# sourceMappingURL=AmountInputAdornment.style.js.map

package/dist/esm/components/AmountInput/AmountInputAdornment.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputAdornment.style.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInputAdornment.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAErE,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACzD,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,OAAO;CAClB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,qBAAqB;CAChD,CAAC,CAAC,CAAA"}

package/dist/esm/components/AmountInput/AmountInputEndAdornment.d.ts

@@ -0,0 +1,2 @@
+import type { FormTypeProps } from '../../stores/form/types.js';
+export declare const AmountInputEndAdornment: ({ formType }: FormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAdornment } from '@mui/material';
+import { CircularProgress } from '@mui/material';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
+import { DebridgeService } from '../../services/DebridgeService.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
+import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style.js';
+export const AmountInputEndAdornment = ({ formType }) => {
+    const { t } = useTranslation();
+    const { getChainById } = useAvailableChains();
+    const { setFieldValue } = useFieldActions();
+    const [isMaxLoading, setIsMaxLoading] = useState(false);
+    const [fromChainId, fromTokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+    const [toChainId, toTokenAddress] = useFieldValues(FormKeyHelper.getChainKey('to'), FormKeyHelper.getTokenKey('to'));
+    const { token, isLoading } = useTokenAddressBalance(fromChainId, fromTokenAddress);
+    // We get gas recommendations for the source chain to make sure that after pressing the Max button
+    // the user will have enough funds remaining to cover gas costs
+    const { data } = useGasRecommendation(fromChainId);
+    const [state] = useSplitSubvariantStore((storeState) => [storeState.state]);
+    const { routes } = useRoutes();
+    const { data: prependedOperatingExpenseCostOne, isLoading: isLoadingPrependedOperatingExpenseCost, } = useQuery({
+        queryKey: [
+            'get-prepended-operating-expense-cost',
+            fromChainId,
+            fromTokenAddress,
+            toChainId,
+            toTokenAddress,
+        ],
+        queryFn: async () => {
+            if (!(fromChainId &&
+                fromTokenAddress &&
+                toChainId &&
+                toTokenAddress &&
+                toChainId !== fromChainId)) {
+                return 0n;
+            }
+            let srcChainTokenInAmount = token.amount || 0;
+            const asUsd = Number(token.priceUSD) * (Number(token.amount) / 10 ** token.decimals);
+            if (asUsd < 5) {
+                srcChainTokenInAmount = BigInt(Number.parseInt((5 / Number(token.priceUSD)) * 10 ** token.decimals + ''));
+            }
+            const prependedOperatingExpenseCost = await getCost({
+                srcChainId: fromChainId === 1151111081099710 ? 7565164 : fromChainId,
+                srcChainTokenIn: fromTokenAddress,
+                srcChainTokenInAmount: srcChainTokenInAmount,
+                dstChainTokenOutAmount: 'auto',
+                dstChainId: toChainId === 1151111081099710 ? 7565164 : toChainId,
+                dstChainTokenOut: toTokenAddress,
+                prependOperatingExpenses: true,
+                additionalTakerRewardBps: 0,
+                tab: new Date().getTime(),
+            });
+            return prependedOperatingExpenseCost;
+        },
+    });
+    let prependedOperatingExpenseCost = prependedOperatingExpenseCostOne || 0;
+    const handleMax = async () => {
+        if (!token?.amount) {
+            return;
+        }
+        const chain = getChainById(fromChainId);
+        let maxAmount = token.amount;
+        let gas = 0n;
+        if (state === 'bridge' &&
+            fromChainId !== toChainId &&
+            fromTokenAddress &&
+            toTokenAddress) {
+            if (routes) {
+                const router = routes[0] || {
+                    toAmount: 0,
+                    toToken: { decimals: 18 },
+                };
+                if (router &&
+                    router.data &&
+                    router.data.prependedOperatingExpenseCost) {
+                    prependedOperatingExpenseCost =
+                        router.data.prependedOperatingExpenseCost;
+                }
+            }
+            gas = BigInt(Number.parseInt((1.15 * Number(prependedOperatingExpenseCost)).toString()));
+            if (chain?.nativeToken.address === fromTokenAddress) {
+                if (fromChainId === 1151111081099710) {
+                    gas += 15000000n + (8157120n + 4000000n + 890880n);
+                }
+                else if (fromChainId === 8453) {
+                    gas += 1000000000000000n + 1000000000000n;
+                }
+            }
+        }
+        if (state === 'swap' || fromChainId === toChainId) {
+            if (chain?.nativeToken.address === fromTokenAddress &&
+                data?.recommended) {
+                gas = BigInt(data.recommended.amount) / 2n;
+            }
+        }
+        if (token.amount > gas) {
+            maxAmount = maxAmount - gas;
+        }
+        else {
+            maxAmount = 0n;
+        }
+        if (maxAmount) {
+            setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), {
+                isTouched: true,
+            });
+        }
+        else {
+            setFieldValue(FormKeyHelper.getAmountKey(formType), '', {
+                isTouched: true,
+            });
+        }
+    };
+    return (_jsx(InputAdornment, { position: "end", children: isLoading && fromTokenAddress ? (_jsx(MaxButtonSkeleton, { variant: "rectangular" })) : formType === 'from' && token?.amount ? (_jsx(MaxButton, { onClick: handleMax, disabled: isMaxLoading, startIcon: isMaxLoading ? _jsx(CircularProgress, { size: 14, color: "inherit" }) : null, children: t('button.max') })) : null }));
+};
+async function getCost(params) {
+    const url = new URL(`${DebridgeService.DEBRIDGE_QUOTE_URL}/dln/order/create-tx`);
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            url.searchParams.append(key, value.toString());
+        }
+    });
+    try {
+        const response = await fetch(url.toString());
+        const data = await response.json();
+        return data.prependedOperatingExpenseCost || 0n;
+    }
+    catch (error) {
+        console.error('getCost error', error);
+        return 0n;
+    }
+}
+//# sourceMappingURL=AmountInputEndAdornment.js.map

package/dist/esm/components/AmountInput/AmountInputEndAdornment.js.map

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

package/dist/esm/components/AmountInput/AmountInputStartAdornment.d.ts

@@ -0,0 +1,2 @@
+import type { FormTypeProps } from '../../stores/form/types.js';
+export declare const AmountInputStartAdornment: React.FC<FormTypeProps>;

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChain } from '../../hooks/useChain.js';
+import { useToken } from '../../hooks/useToken.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { AvatarBadgedDefault } from '../Avatar/Avatar.js';
+import { TokenAvatar } from '../Avatar/TokenAvatar.js';
+export const AmountInputStartAdornment = ({ formType, }) => {
+    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+    const { chain } = useChain(chainId);
+    const { token } = useToken(chainId, tokenAddress);
+    const isSelected = !!(chain && token);
+    return isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(AvatarBadgedDefault, {}));
+};
+//# sourceMappingURL=AmountInputStartAdornment.js.map

package/dist/esm/components/AmountInput/AmountInputStartAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputStartAdornment.js","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInputStartAdornment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,MAAM,CAAC,MAAM,yBAAyB,GAA4B,CAAC,EACjE,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,cAAc,CAC5C,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,EACnC,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CACpC,CAAA;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,CAAA;IAErC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5C,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,KAAG,CACxB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/AmountInput/PriceFormHelperText.d.ts

@@ -0,0 +1,8 @@
+import type { TokenAmount } from '@openocean.finance/widget-sdk';
+import type { FormTypeProps } from '../../stores/form/types.js';
+export declare const PriceFormHelperText: React.FC<FormTypeProps>;
+export declare const PriceFormHelperTextBase: React.FC<FormTypeProps & {
+    isLoading?: boolean;
+    tokenAddress?: string;
+    token?: TokenAmount;
+}>;

package/dist/esm/components/AmountInput/PriceFormHelperText.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormHelperText, Skeleton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js';
+export const PriceFormHelperText = ({ formType }) => {
+    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    return (_jsx(PriceFormHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+};
+export const PriceFormHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+    const { t } = useTranslation();
+    const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType));
+    const tokenAmount = token
+        ? formatTokenAmount(token.amount, token.decimals)
+        : '0';
+    const tokenPrice = formatTokenPrice(amount, token?.priceUSD);
+    let toTokenPrice;
+    if (formType === 'to') {
+        const { routes } = useRoutes();
+        if (routes) {
+            const router = routes[0] || { toAmount: 0, toToken: { decimals: 18 } };
+            const toAmount = formatTokenAmount(BigInt(router.toAmount), router.toToken.decimals);
+            toTokenPrice = formatTokenPrice(toAmount, router.toToken.priceUSD);
+        }
+    }
+    else {
+    }
+    return (_jsxs(FormHelperText, { component: "div", sx: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            margin: 0,
+            marginLeft: 2,
+            marginTop: 0.75,
+            textAlign: 'end',
+            whiteSpace: 'nowrap',
+        }, children: [_jsx(Typography, { sx: {
+                    color: 'text.secondary',
+                    fontWeight: 500,
+                    fontSize: 12,
+                    lineHeight: 1,
+                    flex: 1,
+                }, children: t('format.currency', {
+                    value: tokenPrice || toTokenPrice || '',
+                }) }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 48, height: 12 })) : token?.amount ? (_jsx(Typography, { sx: {
+                    fontWeight: 500,
+                    fontSize: 12,
+                    color: 'text.secondary',
+                    lineHeight: 1,
+                    pl: 0.25,
+                }, title: tokenAmount, children: `/ ${t('format.tokenAmount', {
+                    value: tokenAmount,
+                })}` })) : null] }));
+};
+//# sourceMappingURL=PriceFormHelperText.js.map

package/dist/esm/components/AmountInput/PriceFormHelperText.js.map

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

package/dist/esm/components/AppContainer.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react';
+import type { WidgetVariant } from '../types/widget.js';
+export declare const AppExpandedContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    variant?: WidgetVariant;
+}, {}, {}>;
+export declare const RelativeContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    variant?: WidgetVariant;
+}, {}, {}>;
+export declare const FlexContainer: import("@emotion/styled").StyledComponent<import("@mui/material").ContainerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "fixed" | "maxWidth" | "children" | "sx" | "style" | "className" | "classes" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AppContainer: React.FC<PropsWithChildren>;

package/dist/esm/components/AppContainer.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
+import { defaultMaxHeight } from '../config/constants.js';
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderHeight } from '../stores/header/useHeaderStore.js';
+import { ElementId, createElementId } from '../utils/elements.js';
+// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
+//  be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
+//  A Number of other components and hooks work with height values that are often set on or derived from these elements
+//  if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
+//    - useTokenListHeight
+//    - useSetContentHeight
+//  Also check any code that is using the methods from elements.ts utils file
+export const AppExpandedContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'start',
+    flex: 1,
+    height: theme.container?.display === 'flex'
+        ? '100%'
+        : theme.container?.maxHeight
+            ? 'auto'
+            : theme.container?.height || 'auto',
+    variants: [
+        {
+            props: {
+                variant: 'drawer',
+            },
+            style: {
+                height: 'none',
+            },
+        },
+    ],
+}));
+export const RelativeContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme }) => {
+    return {
+        position: 'relative',
+        boxSizing: 'content-box',
+        width: '100%',
+        minWidth: theme.breakpoints.values.xs,
+        maxWidth: theme.breakpoints.values.sm,
+        background: theme.palette.background.default,
+        overflow: 'auto',
+        flex: 1,
+        zIndex: 0,
+        ...theme.container,
+        maxHeight: theme.container?.display === 'flex' && !theme.container?.height
+            ? '100%'
+            : theme.container?.maxHeight
+                ? theme.container?.maxHeight
+                : theme.container?.height || defaultMaxHeight,
+        variants: [
+            {
+                props: {
+                    variant: 'drawer',
+                },
+                style: {
+                    maxHeight: 'none',
+                    height: '100%',
+                },
+            },
+        ],
+    };
+});
+const CssBaselineContainer = styled(ScopedCssBaseline, {
+    shouldForwardProp: (prop) => !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop),
+})(({ theme, variant, paddingTopAdjustment }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    margin: 0,
+    width: '100%',
+    maxHeight: variant === 'drawer' || theme.container?.display === 'flex'
+        ? 'none'
+        : theme.container?.maxHeight
+            ? theme.container?.maxHeight
+            : theme.container?.height || defaultMaxHeight,
+    overflowY: 'auto',
+    height: theme.container?.display === 'flex' ? 'auto' : '100%',
+    paddingTop: paddingTopAdjustment,
+    // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
+    '&:has(.full-page-container)': {
+        height: theme.container?.maxHeight
+            ? theme.container?.maxHeight
+            : theme.container?.height || defaultMaxHeight,
+    },
+}));
+export const FlexContainer = styled(Container)({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+});
+export const AppContainer = ({ children }) => {
+    // const ref = useRef<HTMLDivElement>(null);
+    const { variant, elementId, theme } = useWidgetConfig();
+    const { headerHeight } = useHeaderHeight();
+    const positionFixedAdjustment = theme?.header?.position === 'fixed' ? headerHeight : 0;
+    return (_jsx(RelativeContainer, { variant: variant, id: createElementId(ElementId.RelativeContainer, elementId), children: _jsx(CssBaselineContainer, { id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, paddingTopAdjustment: positionFixedAdjustment, elementId: elementId, children: _jsx(FlexContainer, { disableGutters: true, children: children }) }) }));
+};
+//# sourceMappingURL=AppContainer.js.map

package/dist/esm/components/AppContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContainer.js","sourceRoot":"","sources":["../../../src/components/AppContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAA;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AAEpE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEjE,0GAA0G;AAC1G,wHAAwH;AACxH,uHAAuH;AACvH,mIAAmI;AACnI,0BAA0B;AAC1B,2BAA2B;AAC3B,6EAA6E;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,EAAE;IAC9C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS;CAChD,CAAC,CAA8B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,OAAO;IACnB,IAAI,EAAE,CAAC;IACP,MAAM,EACJ,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM;QACjC,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS;YAC1B,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,IAAI,MAAM;IACzC,QAAQ,EAAE;QACR;YACE,KAAK,EAAE;gBACL,OAAO,EAAE,QAAQ;aAClB;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,MAAM;aACf;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,EAAE;IAC3C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS;CAChD,CAAC,CAA8B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5C,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACrC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;QACrC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,QAAQ,EAAE,MAAM;QAChB,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,CAAC;QACT,GAAG,KAAK,CAAC,SAAS;QAClB,SAAS,EACP,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM;YAC7D,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS;gBAC1B,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS;gBAC5B,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,IAAI,gBAAgB;QACnD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE;oBACL,OAAO,EAAE,QAAQ;iBAClB;gBACD,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,MAAM,EAAE,MAAM;iBACf;aACF;SACF;KACF,CAAA;AACH,CAAC,CAAC,CAAA;AAQF,MAAM,oBAAoB,GAAG,MAAM,CAAC,iBAAiB,EAAE;IACrD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,SAAS,EAAE,sBAAsB,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7E,CAAC,CAA4B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,oBAAoB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3E,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,CAAC;IACP,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,MAAM;IACb,SAAS,EACP,OAAO,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM;QACzD,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS;YAC1B,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS;YAC5B,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,IAAI,gBAAgB;IACnD,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IAC7D,UAAU,EAAE,oBAAoB;IAChC,2HAA2H;IAC3H,6BAA6B,EAAE;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS;YAChC,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS;YAC5B,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,IAAI,gBAAgB;KAChD;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,CAAC;CACR,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,4CAA4C;IAC5C,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;IACvD,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAA;IAC1C,MAAM,uBAAuB,GAC3B,KAAK,EAAE,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;IAExD,OAAO,CACL,KAAC,iBAAiB,IAChB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,iBAAiB,EAAE,SAAS,CAAC,YAE3D,KAAC,oBAAoB,IACnB,EAAE,EAAE,eAAe,CAAC,SAAS,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAC7D,OAAO,EAAE,OAAO,EAChB,iBAAiB,QACjB,oBAAoB,EAAE,uBAAuB,EAC7C,SAAS,EAAE,SAAS,YAGpB,KAAC,aAAa,IAAC,cAAc,kBAAE,QAAQ,GAAiB,GACnC,GAEL,CACrB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Avatar/AccountAvatar.d.ts

@@ -0,0 +1,10 @@
+import type { Account } from '@openocean.finance/wallet-management';
+import type { ToAddress } from '../../types/widget.js';
+interface AccountAvatarProps {
+    chainId?: number;
+    account?: Account;
+    toAddress?: ToAddress;
+    empty?: boolean;
+}
+export declare const AccountAvatar: ({ chainId, account, empty, toAddress, }: AccountAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Avatar/AccountAvatar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Wallet } from '@mui/icons-material';
+import { Badge } from '@mui/material';
+import { getConnectorIcon } from '@openocean.finance/wallet-management';
+import { useChain } from '../../hooks/useChain.js';
+import { AvatarDefault, AvatarDefaultBadge, AvatarMasked, } from './Avatar.style.js';
+import { SmallAvatar } from './SmallAvatar.js';
+export const AccountAvatar = ({ chainId, account, empty, toAddress, }) => {
+    const { chain } = useChain(chainId);
+    const avatar = empty ? (_jsx(AvatarDefault, {})) : account?.connector || toAddress?.logoURI ? (_jsx(AvatarMasked, { src: toAddress?.logoURI || getConnectorIcon(account?.connector), alt: toAddress?.name || account?.connector?.name, children: (toAddress?.name || account?.connector?.name)?.[0] })) : (_jsx(AvatarDefault, { children: _jsx(Wallet, { sx: { fontSize: 20 } }) }));
+    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? (_jsx(SmallAvatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] })) : (_jsx(AvatarDefaultBadge, {})), children: avatar }));
+};
+//# sourceMappingURL=AccountAvatar.js.map

package/dist/esm/components/Avatar/AccountAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAvatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,YAAY,GACb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAS9C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,OAAO,EACP,KAAK,EACL,SAAS,GACU,EAAE,EAAE;IACvB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CACrB,KAAC,aAAa,KAAG,CAClB,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAC7C,KAAC,YAAY,IACX,GAAG,EAAE,SAAS,EAAE,OAAO,IAAI,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,EAC/D,GAAG,EAAE,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,SAAS,EAAE,IAAI,YAE/C,CAAC,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GACtC,CAChB,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,cACZ,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,GAClB,CACjB,CAAA;IAED,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EACV,KAAK,CAAC,CAAC,CAAC,CACN,KAAC,WAAW,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,YAC7C,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GACF,CACf,CAAC,CAAC,CAAC,CACF,KAAC,kBAAkB,KAAG,CACvB,YAGF,MAAM,GACD,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+import type { SxProps, Theme } from '@mui/material';
+export declare const AvatarBadgedDefault: React.FC<{
+    sx?: SxProps<Theme>;
+}>;
+export declare const AvatarBadgedSkeleton: React.FC<{
+    sx?: SxProps<Theme>;
+}>;
+export declare const AvatarSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Avatar/Avatar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, Skeleton } from '@mui/material';
+import { AvatarDefault, AvatarDefaultBadge, AvatarSkeletonMaskedContainer, } from './Avatar.style.js';
+import { SmallAvatarSkeleton } from './SmallAvatar.js';
+export const AvatarBadgedDefault = ({ sx }) => {
+    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefaultBadge, {}), sx: sx, children: _jsx(AvatarDefault, {}) }));
+};
+export const AvatarBadgedSkeleton = ({ sx }) => {
+    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatarSkeleton, {}), sx: sx, children: _jsx(AvatarSkeleton, {}) }));
+};
+export const AvatarSkeleton = () => {
+    return (_jsx(AvatarSkeletonMaskedContainer, { children: _jsx(Skeleton, { width: 40, height: 40, variant: "circular" }) }));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,6BAA6B,GAC9B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAE3B,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;IACd,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EAAE,KAAC,kBAAkB,KAAG,EACpC,EAAE,EAAE,EAAE,YAEN,KAAC,aAAa,KAAG,GACX,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAE5B,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;IACd,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,EACzD,YAAY,EAAE,KAAC,mBAAmB,KAAG,EACrC,EAAE,EAAE,EAAE,YAEN,KAAC,cAAc,KAAG,GACZ,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,CACL,KAAC,6BAA6B,cAC5B,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,GAAG,GACxB,CACjC,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Avatar/Avatar.style.d.ts

@@ -0,0 +1,6 @@
+export declare const AvatarMasked: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "sx" | "style" | "className" | "classes" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TokenAvatarGroup: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarGroupOwnProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/material").AvatarGroupOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AvatarDefault: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AvatarDefaultBadge: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AvatarSkeletonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AvatarSkeletonMaskedContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/components/Avatar/Avatar.style.js

@@ -0,0 +1,59 @@
+import { AvatarGroup, Box, Avatar as MuiAvatar, avatarClasses, badgeClasses, styled, } from '@mui/material';
+import { avatarMask16 } from './utils.js';
+export const AvatarMasked = styled(MuiAvatar)(() => ({
+    mask: avatarMask16,
+}));
+export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
+    [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {
+        boxSizing: 'border-box',
+    },
+    [`& .${avatarClasses.root}`]: {
+        border: 'none',
+        marginLeft: 0,
+    },
+    [`& .${badgeClasses.root}:first-of-type`]: {
+        marginLeft: theme.spacing(-1),
+        border: 'none',
+    },
+    [`& .${badgeClasses.root}:last-of-type`]: {
+        border: 'none',
+    },
+}));
+export const AvatarDefault = styled(Box)(({ theme }) => {
+    const root = theme.components?.MuiAvatar?.styleOverrides?.root;
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: theme.palette.grey[800],
+        borderRadius: '50%',
+        height: root?.height,
+        width: root?.width,
+        color: theme.palette.text.secondary,
+        mask: avatarMask16,
+        ...theme.applyStyles('light', {
+            background: theme.palette.grey[300],
+        }),
+    };
+});
+export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
+    return {
+        background: theme.palette.grey[800],
+        borderRadius: '50%',
+        height: 16,
+        width: 16,
+        ...theme.applyStyles('light', {
+            background: theme.palette.grey[300],
+        }),
+    };
+});
+export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    borderRadius: '50%',
+}));
+export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    borderRadius: '50%',
+    mask: avatarMask16,
+}));
+//# sourceMappingURL=Avatar.style.js.map

package/dist/esm/components/Avatar/Avatar.style.js.map

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

package/dist/esm/components/Avatar/SmallAvatar.d.ts

@@ -0,0 +1,2 @@
+export declare const SmallAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "sx" | "style" | "className" | "classes" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SmallAvatarSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Avatar/SmallAvatar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, Skeleton, styled } from '@mui/material';
+import { AvatarSkeletonContainer } from './Avatar.style.js';
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 16,
+    height: 16,
+}));
+export const SmallAvatarSkeleton = () => {
+    return (_jsx(AvatarSkeletonContainer, { children: _jsx(Skeleton, { width: 16, height: 16, variant: "circular" }) }));
+};
+//# sourceMappingURL=SmallAvatar.js.map

package/dist/esm/components/Avatar/SmallAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallAvatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/SmallAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAE3D,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAC1C,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;CACX,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,CACL,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,GAAG,GAC9B,CAC3B,CAAA;AACH,CAAC,CAAA"}