@lifi/widget 1.32.7 → 2.0.0-alpha.0

package/App.js

@@ -9,9 +9,9 @@ import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
 import { useExpandableVariant } from './hooks';
-export const App = forwardRef(({ elementRef, open, ...other }, ref) => {
-    const config = useMemo(() => ({ ...other, ...other.config }), [other]);
-    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
+export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
+    const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
+    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { integrator: integrator, config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
 });
 export const AppDefault = () => {
     const expandable = useExpandableVariant();

package/AppDrawer.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
-export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
+export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
     const toggleDrawer = useCallback(() => {
@@ -27,12 +27,13 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
     }), [closeDrawer, openDrawer, toggleDrawer]);
     const drawerConfig = useMemo(() => ({
         ...config,
+        integrator,
         containerStyle: {
             ...config?.containerStyle,
             height: '100%',
         },
-    }), [config]);
-    return (_jsxs(AppProvider, { config: drawerConfig, children: [_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonText, { open: drawerOpen })] }), _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    }), [config, integrator]);
+    return (_jsxs(AppProvider, { integrator: integrator, config: drawerConfig, children: [_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonText, { open: drawerOpen })] }), _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

package/AppDrawer.style.d.ts

@@ -2,17 +2,17 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -46,8 +46,8 @@ export declare const DrawerButtonTypography: import("@emotion/styled").StyledCom
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/App.js

@@ -12,9 +12,9 @@ const Initializer_1 = require("./components/Initializer");
 const PoweredBy_1 = require("./components/PoweredBy");
 const SwapRoutes_1 = require("./components/SwapRoutes");
 const hooks_1 = require("./hooks");
-exports.App = (0, react_1.forwardRef)(({ elementRef, open, ...other }, ref) => {
-    const config = (0, react_1.useMemo)(() => ({ ...other, ...other.config }), [other]);
-    return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
+exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other }, ref) => {
+    const config = (0, react_1.useMemo)(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
+    return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { integrator: integrator, config: config, children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
 });
 const AppDefault = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();

package/cjs/AppDrawer.js

@@ -10,7 +10,7 @@ const react_i18next_1 = require("react-i18next");
 const App_1 = require("./App");
 const AppDrawer_style_1 = require("./AppDrawer.style");
 const AppProvider_1 = require("./AppProvider");
-exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref) => {
+exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, config }, ref) => {
     const openRef = (0, react_1.useRef)(open);
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
     const toggleDrawer = (0, react_1.useCallback)(() => {
@@ -30,12 +30,13 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref)
     }), [closeDrawer, openDrawer, toggleDrawer]);
     const drawerConfig = (0, react_1.useMemo)(() => ({
         ...config,
+        integrator,
         containerStyle: {
             ...config?.containerStyle,
             height: '100%',
         },
-    }), [config]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: drawerConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    }), [config, integrator]);
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { integrator: integrator, config: drawerConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

package/cjs/AppDrawer.style.d.ts

@@ -2,17 +2,17 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -46,8 +46,8 @@ export declare const DrawerButtonTypography: import("@emotion/styled").StyledCom
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -39,17 +39,17 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/cjs/components/Card/CardIconButton.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const CardIconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "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;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Card/CardIconButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardIconButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.CardIconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => {
+    const backgroundColor = theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white;
+    return {
+        padding: theme.spacing(0.5),
+        backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.04),
+        '&:hover': {
+            backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.08),
+        },
+    };
+});

package/cjs/components/Card/CardLabel.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    type?: "active" | "insurance" | "insurance-icon" | undefined;
+}, {}, {}>;
+export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
+} & 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;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    type?: "icon" | undefined;
+}, {}, {}>;

package/cjs/components/Card/CardLabel.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardLabelTypography = exports.CardLabel = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.CardLabel = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'type',
+})(({ theme, type }) => ({
+    backgroundColor: type === 'active'
+        ? theme.palette.mode === 'light'
+            ? theme.palette.secondary.main
+            : (0, styles_1.alpha)(theme.palette.secondary.main, 0.32)
+        : type?.includes('insurance')
+            ? (0, styles_1.alpha)(theme.palette.success.main, theme.palette.mode === 'light' ? 0.12 : 0.24)
+            : theme.palette.mode === 'light'
+                ? (0, styles_1.alpha)(theme.palette.common.black, 0.12)
+                : (0, styles_1.alpha)(theme.palette.common.white, 0.16),
+    borderRadius: theme.shape.borderRadius,
+    color: type?.includes('insurance')
+        ? (0, styles_1.lighten)(theme.palette.success.main, theme.palette.mode === 'light' ? 0 : 0.24)
+        : theme.palette.text.primary,
+    padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    minWidth: 24,
+    userSelect: 'none',
+    fontSize: '1rem',
+    marginRight: theme.spacing(1),
+}));
+exports.CardLabelTypography = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => prop !== 'type',
+})(({ theme, type }) => ({
+    padding: type === 'icon'
+        ? theme.spacing(0.75, 0, 0.75, 0.75)
+        : theme.spacing(0.75, 1.5),
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: '600',
+    textTransform: 'lowercase',
+    '&::first-letter': {
+        textTransform: 'uppercase',
+    },
+}));

package/cjs/components/Card/CardTitle.d.ts

@@ -7,8 +7,8 @@ export declare const CardTitle: import("@emotion/styled").StyledComponent<import
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {

package/cjs/components/Card/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Card';
 export * from './CardHeader';
+export * from './CardIconButton';
+export * from './CardLabel';
 export * from './CardTitle';

package/cjs/components/Card/index.js

@@ -16,4 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Card"), exports);
 __exportStar(require("./CardHeader"), exports);
+__exportStar(require("./CardIconButton"), exports);
+__exportStar(require("./CardLabel"), exports);
 __exportStar(require("./CardTitle"), exports);

package/cjs/components/GasMessage/FundsSufficiencyMessage.d.ts

@@ -0,0 +1 @@
+export declare const FundsSufficiencyMessage: () => JSX.Element;

package/cjs/components/GasMessage/FundsSufficiencyMessage.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FundsSufficiencyMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const GasMessage_style_1 = require("./GasMessage.style");
+const FundsSufficiencyMessage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { display: "flex", children: [(0, jsx_runtime_1.jsx)(GasMessage_style_1.WarningMessageCardTitle, { children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { sx: {
+                        marginTop: 2,
+                        marginLeft: 2,
+                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`swap.warning.message.insufficientFunds`) })] }));
+};
+exports.FundsSufficiencyMessage = FundsSufficiencyMessage;

package/cjs/components/{GasSufficiencyMessage/GasSufficiencyMessage.d.ts → GasMessage/GasMessage.d.ts}

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import type { Route } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-export declare const GasSufficiencyMessage: React.FC<{
+interface GasMessageProps extends BoxProps {
     route?: Route;
-} & BoxProps>;
+}
+export declare const GasMessage: React.FC<GasMessageProps>;
+export {};

package/cjs/components/GasMessage/GasMessage.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const FundsSufficiencyMessage_1 = require("./FundsSufficiencyMessage");
+const GasSufficiencyMessage_1 = require("./GasSufficiencyMessage");
+const GasMessage = ({ route, ...props }) => {
+    const { insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
+    const { insufficientFunds } = (0, hooks_1.useFundsSufficiency)(route);
+    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = (0, hooks_1.useGasRefuel)();
+    const enabledRefuel = enabled && enabledAutoRefuel;
+    const showGasSufficiencyMessage = insufficientGas?.length && !isRefuelLoading && !enabledRefuel;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || showGasSufficiencyMessage), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFunds ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : showGasSufficiencyMessage ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+};
+exports.GasMessage = GasMessage;

package/cjs/components/GasMessage/GasMessage.style.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const WarningMessageCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const WarningMessageCardTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const InfoMessageCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const InfoMessageCardTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const InfoMessageSwitch: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/GasMessage/GasMessage.style.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoMessageSwitch = exports.InfoMessageCardTitle = exports.InfoMessageCard = exports.WarningMessageCardTitle = exports.WarningMessageCard = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Switch_1 = require("@mui/material/Switch");
+const Switch_2 = require("../Switch");
+const MessageCard = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    position: 'relative',
+    whiteSpace: 'pre-line',
+}));
+exports.WarningMessageCard = (0, styles_1.styled)(MessageCard)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? (0, styles_1.alpha)(theme.palette.warning.main, 0.32)
+        : (0, styles_1.alpha)(theme.palette.warning.main, 0.16),
+}));
+exports.WarningMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? (0, styles_1.darken)(theme.palette.warning.main, 0.36)
+        : (0, styles_1.alpha)(theme.palette.warning.main, 1),
+}));
+exports.InfoMessageCard = (0, styles_1.styled)(MessageCard)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? (0, styles_1.alpha)(theme.palette.info.main, 0.12)
+        : (0, styles_1.alpha)(theme.palette.info.main, 0.16),
+}));
+exports.InfoMessageCardTitle = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? theme.palette.info.main
+        : (0, styles_1.lighten)(theme.palette.info.main, 0.24),
+}));
+exports.InfoMessageSwitch = (0, styles_1.styled)(Switch_2.Switch)(({ theme }) => ({
+    [`.${Switch_1.switchClasses.switchBase}`]: {
+        [`&.${Switch_1.switchClasses.checked}`]: {
+            [`& + .${Switch_1.switchClasses.track}`]: {
+                backgroundColor: theme.palette.mode === 'light'
+                    ? theme.palette.info.main
+                    : (0, styles_1.alpha)(theme.palette.info.main, 0.84),
+            },
+        },
+        [`&.Mui-focusVisible .${Switch_1.switchClasses.thumb}`]: {
+            color: theme.palette.mode === 'light'
+                ? theme.palette.info.main
+                : (0, styles_1.alpha)(theme.palette.info.main, 0.84),
+        },
+    },
+}));

package/cjs/components/GasMessage/GasRefuelMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export declare const GasRefuelMessage: React.FC<BoxProps>;

package/cjs/components/GasMessage/GasRefuelMessage.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasRefuelMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const GasMessage_style_1 = require("./GasMessage.style");
+const GasRefuelMessage = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const setValue = (0, stores_1.useSettingsStore)((state) => state.setValue);
+    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
+    const { enabled, chain, isLoading: isRefuelLoading } = (0, hooks_1.useGasRefuel)();
+    const onChange = (_, checked) => {
+        setValue('enabledAutoRefuel', checked);
+    };
+    const showGasRefuelMessage = chain && enabled && !isRefuelLoading;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: showGasRefuelMessage, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(GasMessage_style_1.InfoMessageCard, { ...props, children: [(0, jsx_runtime_1.jsxs)(GasMessage_style_1.InfoMessageCardTitle, { display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EvStation_1.default, { sx: {
+                                        marginRight: 1,
+                                    } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`swap.info.title.autoRefuel`) })] }), (0, jsx_runtime_1.jsx)(GasMessage_style_1.InfoMessageSwitch, { checked: enabledAutoRefuel, onChange: onChange })] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabledAutoRefuel, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, children: t(`swap.info.message.autoRefuel`, {
+                            chainName: chain?.name,
+                        }) }) })] }) }));
+};
+exports.GasRefuelMessage = GasRefuelMessage;

package/cjs/components/GasMessage/GasSufficiencyMessage.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { GasSufficiency } from '../../hooks';
+interface GasSufficiencyMessageProps {
+    insufficientGas?: GasSufficiency[];
+}
+export declare const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps>;
+export {};

package/cjs/components/GasMessage/GasSufficiencyMessage.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasSufficiencyMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const GasMessage_style_1 = require("./GasMessage.style");
+const GasSufficiencyMessage = ({ insufficientGas, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { children: [(0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCardTitle, { display: "flex", alignItems: "center", px: 2, pt: 2, children: [(0, jsx_runtime_1.jsx)(EvStation_1.default, { sx: {
+                            marginRight: 1,
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`swap.warning.title.insufficientGas`) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pt: 1, children: t(`swap.warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography
+            // eslint-disable-next-line react/no-array-index-key
+            , { variant: "body2", px: 2, pb: insufficientGas?.length - 1 === index ? 2 : 0, pt: 0.5, children: t(`swap.tokenOnChainAmount`, {
+                    amount: item.insufficientAmount?.toString(),
+                    tokenSymbol: item.token.symbol,
+                    chainName: item.chain?.name,
+                }) }, index)))] }));
+};
+exports.GasSufficiencyMessage = GasSufficiencyMessage;

package/cjs/components/GasMessage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GasMessage';
+export * from './GasRefuelMessage';

package/cjs/components/GasMessage/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./GasMessage"), exports);
+__exportStar(require("./GasRefuelMessage"), exports);