@lifi/widget 1.13.2 → 1.13.3

package/cjs/App.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { AppProps } from './AppProvider';
+export declare const App: React.FC<AppProps>;
+export declare const AppDefault: () => JSX.Element;

package/cjs/App.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppDefault = exports.App = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const AppProvider_1 = require("./AppProvider");
+const AppContainer_1 = require("./components/AppContainer");
+const Header_1 = require("./components/Header");
+const Initializer_1 = require("./components/Initializer");
+const NotFound_1 = require("./components/NotFound");
+const PoweredBy_1 = require("./components/PoweredBy");
+const MainPage_1 = require("./pages/MainPage");
+const SelectTokenPage_1 = require("./pages/SelectTokenPage");
+const SelectWalletPage_1 = require("./pages/SelectWalletPage");
+const SettingsPage_1 = require("./pages/SettingsPage");
+const SwapDetailsPage_1 = require("./pages/SwapDetailsPage");
+const SwapHistoryPage_1 = require("./pages/SwapHistoryPage");
+const SwapPage_1 = require("./pages/SwapPage");
+const SwapRoutesPage_1 = require("./pages/SwapRoutesPage");
+const utils_1 = require("./utils");
+const App = ({ config }) => {
+    return ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })));
+};
+exports.App = App;
+const AppDefault = () => {
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(AppRoutes, {}) })), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }));
+};
+exports.AppDefault = AppDefault;
+const AppRoutes = () => {
+    const element = (0, react_router_dom_1.useRoutes)([
+        {
+            path: '/',
+            element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.settings,
+            element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.fromToken,
+            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
+        },
+        {
+            path: utils_1.navigationRoutes.toToken,
+            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
+        },
+        {
+            path: utils_1.navigationRoutes.swapRoutes,
+            element: (0, jsx_runtime_1.jsx)(SwapRoutesPage_1.SwapRoutesPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.swapHistory,
+            element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
+        },
+        {
+            path: `${utils_1.navigationRoutes.swapHistory}/${utils_1.navigationRoutes.swapDetails}`,
+            element: (0, jsx_runtime_1.jsx)(SwapDetailsPage_1.SwapDetailsPage, {}),
+        },
+        ...[
+            utils_1.navigationRoutes.selectWallet,
+            `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
+            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
+        })),
+        ...[
+            utils_1.navigationRoutes.swapExecution,
+            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SwapPage_1.SwapPage, {}),
+        })),
+        {
+            path: '*',
+            element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}),
+        },
+    ]);
+    return element;
+};

package/cjs/AppDrawer.d.ts

@@ -0,0 +1,14 @@
+import { DrawerProps } from '@mui/material';
+import { RefObject } from 'react';
+import { WidgetConfig } from './types';
+export declare type AppDrawerProps = DrawerProps & {
+    elementRef?: RefObject<HTMLDivElement>;
+    config?: WidgetConfig;
+};
+export interface AppDrawerBase {
+    isOpen(): void;
+    toggleDrawer(): void;
+    openDrawer(): void;
+    closeDrawer(): void;
+}
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<Pick<AppDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<AppDrawerBase>>;

package/cjs/AppDrawer.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+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) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const openRef = (0, react_1.useRef)(open);
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
+    const toggleDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen((open) => !open);
+    }, []);
+    const openDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(false);
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isOpen: () => openRef.current,
+        toggleDrawer,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer, toggleDrawer]);
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, Object.assign({ config: config }, { children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, Object.assign({ variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config === null || config === void 0 ? void 0 : config.containerStyle }, { children: [drawerOpen ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowLeft, {}), (0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] })), (0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+                    sx: {
+                        backgroundColor: 'rgb(0 0 0 / 48%)',
+                        backdropFilter: 'blur(3px)',
+                    },
+                }, PaperProps: {
+                    sx: {
+                        width: (_b = (_a = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : '100%',
+                        minWidth: (_d = (_c = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _c === void 0 ? void 0 : _c.minWidth) !== null && _d !== void 0 ? _d : 375,
+                        maxWidth: (_f = (_e = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : 392,
+                    },
+                }, keepMounted: true }, { children: (0, jsx_runtime_1.jsx)(App_1.AppDefault, {}) }))] })));
+});

package/cjs/AppDrawer.style.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | 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;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | 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<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    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" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    open?: boolean | undefined;
+    drawerProps?: {
+        width?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+    } | undefined;
+}, {}, {}>;
+export declare const DrawerButtonTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "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?: "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;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    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/AppDrawer.style.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerButtonTypography = exports.DrawerButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const getButtonTransformWidth = (drawerWidth, drawerMaxWidth) => {
+    if (typeof drawerWidth === 'number') {
+        return `${drawerWidth}px`;
+    }
+    if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+        return drawerWidth;
+    }
+    if (typeof drawerMaxWidth === 'number') {
+        return `${drawerMaxWidth}px`;
+    }
+    if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+        return drawerMaxWidth;
+    }
+    return '392px';
+};
+exports.DrawerButton = (0, styles_1.styled)(material_1.Button, {
+    shouldForwardProp: (prop) => !['open', 'drawerProps'].includes(prop),
+})(({ theme, open, drawerProps }) => ({
+    background: theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+    color: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    alignItems: 'center',
+    borderRadius: `${theme.shape.borderRadiusSecondary}px 0 0 ${theme.shape.borderRadiusSecondary}px`,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: 144,
+    minWidth: 40,
+    padding: theme.spacing(1, 0, 1, 0),
+    position: 'absolute',
+    right: 0,
+    top: 'calc(50% - 74px)',
+    transform: `translate3d(calc(${open
+        ? getButtonTransformWidth(drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.width, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.maxWidth)
+        : '0px'} * -1), 0, 0)`,
+    transition: theme.transitions.create(['transform'], {
+        duration: open
+            ? theme.transitions.duration.enteringScreen
+            : theme.transitions.duration.leavingScreen,
+        easing: open
+            ? theme.transitions.easing.easeOut
+            : theme.transitions.easing.sharp,
+    }),
+    zIndex: 1500,
+    '&:hover': {
+        background: theme.palette.mode === 'light'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
+    },
+}));
+exports.DrawerButtonTypography = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+    borderRadius: `0 ${theme.shape.borderRadiusSecondary}px ${theme.shape.borderRadiusSecondary}px 0`,
+    background: theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+    color: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1),
+    position: 'relative',
+    textTransform: 'none',
+    transform: 'rotateZ(180deg)',
+    writingMode: 'vertical-rl',
+}));

package/cjs/AppProvider.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { WidgetConfig } from '.';
+export interface AppProps {
+    config?: WidgetConfig;
+}
+export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
+export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
+export declare const TelemetryProvider: React.FC<{
+    children: React.ReactElement<any, any> | null;
+    disabled?: boolean;
+}>;

package/cjs/AppProvider.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelemetryProvider = exports.AppRouter = exports.AppProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable camelcase */
+/* eslint-disable react/jsx-pascal-case */
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const queryClient_1 = require("./config/queryClient");
+const hooks_1 = require("./hooks");
+const SwapFormProvider_1 = require("./providers/SwapFormProvider");
+const ThemeProvider_1 = require("./providers/ThemeProvider");
+const WalletProvider_1 = require("./providers/WalletProvider");
+const WidgetProvider_1 = require("./providers/WidgetProvider");
+const QueryProvider = react_query_1.QueryClientProvider;
+const AppProvider = ({ children, config, }) => {
+    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(exports.TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: (0, jsx_runtime_1.jsx)(WalletProvider_1.WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: (0, jsx_runtime_1.jsx)(WidgetProvider_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(SwapFormProvider_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) })) })) })) })));
+};
+exports.AppProvider = AppProvider;
+const AppRouter = ({ children }) => {
+    const inRouterContext = (0, react_router_dom_1.useInRouterContext)();
+    const Router = inRouterContext ? react_1.Fragment : react_router_dom_1.MemoryRouter;
+    return (0, jsx_runtime_1.jsx)(Router, { children: children });
+};
+exports.AppRouter = AppRouter;
+const TelemetryProvider = ({ children, disabled }) => {
+    (0, hooks_1.useTelemetry)(disabled);
+    return children;
+};
+exports.TelemetryProvider = TelemetryProvider;

package/cjs/components/AppContainer.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, RefObject } from 'react';
+export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material").Breakpoint | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const AppContainer: React.FC<PropsWithChildren<{}>>;
+export declare const ScrollToLocation: React.FC<{
+    elementRef: RefObject<HTMLElement>;
+}>;

package/cjs/components/AppContainer.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollToLocation = exports.AppContainer = exports.FlexContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const WidgetProvider_1 = require("../providers/WidgetProvider");
+const utils_1 = require("../utils");
+const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme }) => ({
+    // height: '100%',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    marginRight: 0,
+    width: '100%',
+}));
+const RelativeContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    position: 'relative',
+    width: '100%',
+    minWidth: 375,
+    maxWidth: 392,
+    background: theme.palette.background.default,
+    overflow: 'auto',
+    flex: 1,
+    boxSizing: 'border-box',
+    zIndex: 0,
+}));
+const ScrollableContainer = (0, styles_1.styled)(material_1.Box)({
+    // position: 'fixed',
+    overflowY: 'auto',
+    height: '100%',
+    flex: 1,
+    display: 'flex',
+});
+exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    flexGrow: 1,
+});
+const AppContainer = ({ children }) => {
+    const ref = (0, react_1.useRef)(null);
+    const { containerStyle } = (0, WidgetProvider_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(RelativeContainer, Object.assign({ sx: containerStyle }, { children: [(0, jsx_runtime_1.jsx)(ScrollableContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, ref: ref }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })), (0, jsx_runtime_1.jsx)(exports.ScrollToLocation, { elementRef: ref })] })));
+};
+exports.AppContainer = AppContainer;
+const ScrollToLocation = ({ elementRef }) => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+    }, [elementRef, pathname]);
+    return null;
+};
+exports.ScrollToLocation = ScrollToLocation;

package/cjs/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BottomSheetBase, BottomSheetProps } from './types';
+export declare const BottomSheet: import("react").ForwardRefExoticComponent<Pick<BottomSheetProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<BottomSheetBase>>;

package/cjs/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open }, ref) => {
+    const openRef = (0, react_1.useRef)(open);
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
+    const containerElement = (0, hooks_1.useScrollableContainer)();
+    const openDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(true);
+    }, []);
+    const closeDrawer = (0, react_1.useCallback)(() => {
+        setDrawerOpen(false);
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isOpen: () => openRef.current,
+        openDrawer,
+        closeDrawer,
+    }), [closeDrawer, openDrawer]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ container: containerElement, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: closeDrawer, ModalProps: {
+            sx: {
+                position: 'absolute',
+                overflow: 'hidden',
+            },
+            keepMounted: true,
+        }, PaperProps: {
+            sx: (theme) => ({
+                position: 'absolute',
+                backgroundImage: 'none',
+                borderTopLeftRadius: theme.shape.borderRadius,
+                borderTopRightRadius: theme.shape.borderRadius,
+            }),
+        }, BackdropProps: {
+            sx: {
+                position: 'absolute',
+                backgroundColor: 'rgb(0 0 0 / 48%)',
+                backdropFilter: 'blur(3px)',
+            },
+        }, SlideProps: {
+            container: containerElement,
+        } }, { children: children })));
+});

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

@@ -0,0 +1,2 @@
+export * from './BottomSheet';
+export * from './types';

package/cjs/components/BottomSheet/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("./BottomSheet"), exports);
+__exportStar(require("./types"), exports);

package/cjs/components/BottomSheet/types.d.ts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { RefObject } from 'react';
+export declare type BottomSheetProps = DrawerProps & {
+    elementRef?: RefObject<HTMLDivElement>;
+};
+export interface BottomSheetBase {
+    isOpen(): void;
+    openDrawer(): void;
+    closeDrawer(): void;
+}

package/cjs/components/BottomSheet/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+export declare const Card: 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;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "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> & {
+    variant?: "default" | "error" | undefined;
+    dense?: boolean | undefined;
+    indented?: boolean | undefined;
+    onClick?: MouseEventHandler<HTMLDivElement> | undefined;
+}, {}, {}>;

package/cjs/components/Card/Card.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Card = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => !['dense', 'variant', 'indented'].includes(prop),
+})(({ theme, variant, dense, indented, onClick }) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid`,
+    borderColor: variant === 'error'
+        ? theme.palette.error.main
+        : theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+    borderRadius: dense
+        ? theme.shape.borderRadiusSecondary
+        : theme.shape.borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    padding: indented ? theme.spacing(2) : 0,
+    boxSizing: 'border-box',
+    '&:hover': {
+        cursor: onClick ? 'pointer' : 'default',
+        backgroundColor: onClick
+            ? theme.palette.mode === 'light'
+                ? (0, styles_1.darken)(theme.palette.background.paper, 0.02)
+                : (0, styles_1.lighten)(theme.palette.background.paper, 0.02)
+            : theme.palette.background.paper,
+    },
+    transition: theme.transitions.create(['background-color'], {
+        duration: theme.transitions.duration.enteringScreen,
+        easing: theme.transitions.easing.easeOut,
+    }),
+}));

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const CardHeader: import("@emotion/styled").StyledComponent<{
+    action?: import("react").ReactNode;
+    avatar?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
+    disableTypography?: boolean | undefined;
+    subheader?: import("react").ReactNode;
+    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    title?: import("react").ReactNode;
+    titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Card/CardHeader.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardHeader = void 0;
+const material_1 = require("@mui/material");
+const CardHeader_1 = require("@mui/material/CardHeader");
+const styles_1 = require("@mui/material/styles");
+exports.CardHeader = (0, styles_1.styled)(material_1.CardHeader)(({ theme }) => ({
+    [`.${CardHeader_1.cardHeaderClasses.action}`]: {
+        marginTop: -2,
+        alignSelf: 'center',
+    },
+    [`.${CardHeader_1.cardHeaderClasses.title}`]: {
+        fontWeight: '500',
+        fontSize: '1.125rem',
+        lineHeight: '1.2778',
+        color: theme.palette.text.primary,
+    },
+    [`.${CardHeader_1.cardHeaderClasses.subheader}`]: {
+        fontWeight: '400',
+        fontSize: '0.75rem',
+        color: theme.palette.text.secondary,
+    },
+}));