@lifi/widget 3.7.0-beta.10 → 3.7.0-beta.12

package/dist/esm/components/AlertMessage/types.d.ts

@@ -0,0 +1 @@
+export type Severity = 'info' | 'warning';

package/dist/esm/components/AlertMessage/types.js

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

package/dist/esm/components/AlertMessage/types.js.map

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

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

@@ -0,0 +1,12 @@
+import type { Token } from '@lifi/sdk';
+import type { CardProps } from '@mui/material';
+import type { ReactNode } from 'react';
+import { type FormTypeProps } from '../../stores/form/types.js';
+export declare const AmountInput: React.FC<FormTypeProps & CardProps>;
+export declare const AmountInputBase: React.FC<FormTypeProps & CardProps & {
+    token?: Token;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    bottomAdornment?: ReactNode;
+    disabled?: boolean;
+}>;

package/dist/esm/components/AmountInput/AmountInput.jsx

@@ -0,0 +1,59 @@
+import { useLayoutEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useToken } from '../../hooks/useToken.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldController } from '../../stores/form/useFieldController.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { DisabledUI } from '../../types/widget.js';
+import { formatInputAmount } from '../../utils/format.js';
+import { fitInputText } from '../../utils/input.js';
+import { CardTitle } from '../Card/CardTitle.js';
+import { InputCard } from '../Card/InputCard.js';
+import { FormContainer, FormControl, Input, maxInputFontSize, minInputFontSize, } from './AmountInput.style.js';
+import { AmountInputEndAdornment } from './AmountInputEndAdornment.js';
+import { AmountInputStartAdornment } from './AmountInputStartAdornment.js';
+import { PriceFormHelperText } from './PriceFormHelperText.js';
+export const AmountInput = ({ formType, ...props }) => {
+    const { disabledUI } = useWidgetConfig();
+    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+    const { token } = useToken(chainId, tokenAddress);
+    const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+    return (<AmountInputBase formType={formType} token={token} endAdornment={!disabled ? <AmountInputEndAdornment formType={formType}/> : undefined} bottomAdornment={<PriceFormHelperText formType={formType}/>} disabled={disabled} {...props}/>);
+};
+export const AmountInputBase = ({ formType, token, startAdornment, endAdornment, bottomAdornment, disabled, ...props }) => {
+    const { t } = useTranslation();
+    const ref = useRef(null);
+    const amountKey = FormKeyHelper.getAmountKey(formType);
+    const { onChange, onBlur, value } = useFieldController({ name: amountKey });
+    const handleChange = (event) => {
+        const { value } = event.target;
+        const formattedAmount = formatInputAmount(value, token?.decimals, true);
+        onChange(formattedAmount);
+    };
+    const handleBlur = (event) => {
+        const { value } = event.target;
+        const formattedAmount = formatInputAmount(value, token?.decimals);
+        onChange(formattedAmount);
+        onBlur();
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: we need to run effect on value change
+    useLayoutEffect(() => {
+        if (ref.current) {
+            fitInputText(maxInputFontSize, minInputFontSize, ref.current);
+        }
+    }, [value]);
+    return (<InputCard {...props}>
+      <CardTitle>{t('header.send')}</CardTitle>
+      <FormContainer>
+        <AmountInputStartAdornment formType={formType}/>
+        <FormControl fullWidth>
+          <Input inputRef={ref} size="small" autoComplete="off" placeholder="0" startAdornment={startAdornment} endAdornment={endAdornment} inputProps={{
+            inputMode: 'decimal',
+        }} onChange={handleChange} onBlur={handleBlur} value={value} name={amountKey} disabled={disabled} required/>
+          {bottomAdornment}
+        </FormControl>
+      </FormContainer>
+    </InputCard>);
+};
+//# sourceMappingURL=AmountInput.jsx.map

package/dist/esm/components/AmountInput/AmountInput.jsx.map

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

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

@@ -0,0 +1,9 @@
+export declare const maxInputFontSize = 24;
+export declare const minInputFontSize = 14;
+export declare const FormContainer: 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").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const FormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "color" | "margin" | "children" | "sx" | "style" | "className" | "disabled" | "required" | "size" | "classes" | "variant" | "error" | "fullWidth" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -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.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.style.jsx","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,6 @@
+export declare const MaxButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "href" | "disabled" | "action" | "size" | "classes" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "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.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "height" | "animation" | "children" | "sx" | "style" | "className" | "classes" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -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.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputAdornment.style.jsx","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.Element;

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

@@ -0,0 +1,42 @@
+import { InputAdornment } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatUnits } from 'viem';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useGasRecommendation } from '../../hooks/useGasRecommendation.js';
+import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js';
+import { FormKeyHelper } from '../../stores/form/types.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style.js';
+export const AmountInputEndAdornment = ({ formType }) => {
+    const { t } = useTranslation();
+    const { getChainById } = useAvailableChains();
+    const { setFieldValue } = useFieldActions();
+    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
+    // 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(chainId);
+    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    const handleMax = () => {
+        if (!token?.amount) {
+            return;
+        }
+        const chain = getChainById(chainId);
+        let maxAmount = token.amount;
+        if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+            const recommendedAmount = BigInt(data.recommended.amount) / 2n;
+            if (token.amount > recommendedAmount) {
+                maxAmount = token.amount - recommendedAmount;
+            }
+        }
+        if (maxAmount) {
+            setFieldValue(FormKeyHelper.getAmountKey(formType), formatUnits(maxAmount, token.decimals), {
+                isTouched: true,
+            });
+        }
+    };
+    return (<InputAdornment position="end">
+      {isLoading && tokenAddress ? (<MaxButtonSkeleton variant="rectangular"/>) : formType === 'from' && token?.amount ? (<MaxButton onClick={handleMax}>{t('button.max')}</MaxButton>) : null}
+    </InputAdornment>);
+};
+//# sourceMappingURL=AmountInputEndAdornment.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputEndAdornment.jsx","sourceRoot":"","sources":["../../../../src/components/AmountInput/AmountInputEndAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAE9E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAAiB,EAAE,EAAE;IACrE,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAC7C,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAE3C,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,kGAAkG;IAClG,+DAA+D;IAC/D,MAAM,EAAE,IAAI,EAAE,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAA;IAE9C,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IAE1E,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QACD,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;QACnC,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAA;QAC5B,IAAI,KAAK,EAAE,WAAW,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,EAAE,WAAW,EAAE,CAAC;YACrE,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE,CAAA;YAC9D,IAAI,KAAK,CAAC,MAAM,GAAG,iBAAiB,EAAE,CAAC;gBACrC,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,iBAAiB,CAAA;YAC9C,CAAC;QACH,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,aAAa,CACX,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,EACpC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,EACtC;gBACE,SAAS,EAAE,IAAI;aAChB,CACF,CAAA;QACH,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAC5B;MAAA,CAAC,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,CAC3B,CAAC,iBAAiB,CAAC,OAAO,CAAC,aAAa,EAAG,CAC5C,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CACzC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAC7D,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,cAAc,CAAC,CAClB,CAAA;AACH,CAAC,CAAA"}

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.jsx

@@ -0,0 +1,14 @@
+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 ? (<TokenAvatar token={token} chain={chain}/>) : (<AvatarBadgedDefault />);
+};
+//# sourceMappingURL=AmountInputStartAdornment.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputStartAdornment.jsx","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,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAC5C,CAAC,CAAC,CAAC,CACF,CAAC,mBAAmB,CAAC,AAAD,EAAG,CACxB,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,8 @@
+import type { TokenAmount } from '@lifi/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.jsx

@@ -0,0 +1,38 @@
+import { FormHelperText, Skeleton, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+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 (<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 fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
+    return (<FormHelperText component="div" sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            margin: 0,
+            marginLeft: 2,
+            marginTop: 0.75,
+        }}>
+      <Typography color="text.secondary" fontWeight={500} fontSize={12} lineHeight={1} flex={1} sx={{
+            wordBreak: 'break-word',
+            overflowWrap: 'break-word',
+        }}>
+        {t('format.currency', {
+            value: fromAmountTokenPrice,
+        })}
+      </Typography>
+      {isLoading && tokenAddress ? (<Skeleton variant="text" width={48} height={12}/>) : token?.amount ? (<Typography fontWeight={500} fontSize={12} color="text.secondary" lineHeight={1} pl={0.25}>
+          {`/ ${t('format.number', {
+                value: formatTokenAmount(token.amount, token.decimals),
+            })}`}
+        </Typography>) : null}
+    </FormHelperText>);
+};
+//# sourceMappingURL=PriceFormHelperText.jsx.map

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

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

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

@@ -0,0 +1,16 @@
+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<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "maxWidth" | "children" | "sx" | "style" | "className" | "fixed" | "classes" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AppContainer: React.FC<PropsWithChildren>;

package/dist/esm/components/AppContainer.jsx

@@ -0,0 +1,105 @@
+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, variant }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'start',
+    flex: 1,
+    height: variant === 'drawer'
+        ? 'none'
+        : theme.container?.display === 'flex'
+            ? '100%'
+            : theme.container?.maxHeight
+                ? 'auto'
+                : theme.container?.height || 'auto',
+}));
+export const RelativeContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme, variant }) => {
+    const container = { ...theme.container };
+    if (variant === 'drawer') {
+        container.height = '100%';
+    }
+    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,
+        ...container,
+        maxHeight: variant === 'drawer'
+            ? 'none'
+            : theme.container?.display === 'flex' && !theme.container?.height
+                ? '100%'
+                : theme.container?.maxHeight
+                    ? theme.container?.maxHeight
+                    : theme.container?.height || defaultMaxHeight,
+    };
+});
+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 (<RelativeContainer variant={variant} id={createElementId(ElementId.RelativeContainer, elementId)}>
+      <CssBaselineContainer id={createElementId(ElementId.ScrollableContainer, elementId)} variant={variant} enableColorScheme paddingTopAdjustment={positionFixedAdjustment} elementId={elementId}>
+        <FlexContainer disableGutters>{children}</FlexContainer>
+      </CssBaselineContainer>
+      {/* <ScrollToLocation elementRef={ref} /> */}
+    </RelativeContainer>);
+};
+// export const ScrollToLocation: React.FC<{
+//   elementRef: RefObject<HTMLElement>;
+// }> = ({ elementRef }) => {
+//   const { pathname } = useLocation();
+//   useLayoutEffect(() => {
+//     elementRef.current?.scrollTo(0, 0);
+//   }, [elementRef, pathname]);
+//   return null;
+// };
+//# sourceMappingURL=AppContainer.jsx.map

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

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

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

@@ -0,0 +1,10 @@
+import type { Account } from '@lifi/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.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import { getConnectorIcon } from '@lifi/wallet-management';
+import { Wallet } from '@mui/icons-material';
+import { Badge } from '@mui/material';
+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 ? (<AvatarDefault />) : account?.connector || toAddress?.logoURI ? (<AvatarMasked src={toAddress?.logoURI || getConnectorIcon(account?.connector)} alt={toAddress?.name || account?.connector?.name}>
+      {(toAddress?.name || account?.connector?.name)?.[0]}
+    </AvatarMasked>) : (<AvatarDefault>
+      <Wallet sx={{ fontSize: 20 }}/>
+    </AvatarDefault>);
+    return (<Badge overlap="circular" anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} badgeContent={chain ? (<SmallAvatar src={chain.logoURI} alt={chain.name}>
+            {chain.name[0]}
+          </SmallAvatar>) : (<AvatarDefaultBadge />)}>
+      {avatar}
+    </Badge>);
+};
+//# sourceMappingURL=AccountAvatar.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAvatar.jsx","sourceRoot":"","sources":["../../../../src/components/Avatar/AccountAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,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,CAAC,aAAa,CAAC,AAAD,EAAG,CAClB,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAC7C,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,IAAI,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAChE,GAAG,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,CAEjD;MAAA,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CACrD;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC,CAAC,CAAC,CACF,CAAC,aAAa,CACZ;MAAA,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAC/B;IAAA,EAAE,aAAa,CAAC,CACjB,CAAA;IAED,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,UAAU,CAClB,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAC1D,YAAY,CAAC,CACX,KAAK,CAAC,CAAC,CAAC,CACN,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAC/C;YAAA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAChB;UAAA,EAAE,WAAW,CAAC,CACf,CAAC,CAAC,CAAC,CACF,CAAC,kBAAkB,CAAC,AAAD,EAAG,CAE1B,CAAC,CAED;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,KAAK,CAAC,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.Element;

package/dist/esm/components/Avatar/Avatar.jsx

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.jsx","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,CAAC,KAAK,CACJ,OAAO,CAAC,UAAU,CAClB,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAC1D,YAAY,CAAC,CAAC,CAAC,kBAAkB,CAAC,AAAD,EAAG,CAAC,CACrC,EAAE,CAAC,CAAC,EAAE,CAAC,CAEP;MAAA,CAAC,aAAa,CAAC,AAAD,EAChB;IAAA,EAAE,KAAK,CAAC,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAE5B,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;IACd,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,UAAU,CAClB,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAC1D,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,AAAD,EAAG,CAAC,CACtC,EAAE,CAAC,CAAC,EAAE,CAAC,CAEP;MAAA,CAAC,cAAc,CAAC,AAAD,EACjB;IAAA,EAAE,KAAK,CAAC,CACT,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,CACL,CAAC,6BAA6B,CAC5B;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EACrD;IAAA,EAAE,6BAA6B,CAAC,CACjC,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,16 @@
+export declare const AvatarMasked: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "sx" | "style" | "className" | "alt" | "src" | "sizes" | "srcSet" | "classes" | "variant" | "imgProps" | "slots" | "slotProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TokenAvatarGroup: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarGroupProps & 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<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,57 @@
+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-child .${avatarClasses.root}`]: {
+        boxSizing: 'border-box',
+    },
+    [`& .${avatarClasses.root}`]: {
+        border: 'none',
+        marginLeft: 0,
+    },
+    [`& .${badgeClasses.root}:first-child`]: {
+        marginLeft: theme.spacing(-1),
+        border: 'none',
+    },
+    [`& .${badgeClasses.root}:last-child`]: {
+        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.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+        borderRadius: '50%',
+        height: root?.height,
+        width: root?.width,
+        color: theme.palette.text.secondary,
+        mask: avatarMask16,
+    };
+});
+export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
+    return {
+        background: theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+        borderRadius: '50%',
+        height: 16,
+        width: 16,
+    };
+});
+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.jsx.map