@0xsquid/ui 0.7.4 → 0.7.6

package/dist/cjs/index.js

@@ -3113,7 +3113,16 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage = 'Something went wrong', boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }) {
+    const state = react.useMemo(() => {
+        if (errorMessage)
+            return 'error';
+        if (isLoading)
+            return 'loading';
+        if (isEmpty)
+            return 'empty';
+        return 'full';
+    }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
     return (jsxRuntime.jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
@@ -3291,9 +3300,9 @@ function SwapInputsIcon() {
     return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, }) {
     var _a;
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const isInteractive = direction === 'from';
@@ -3402,7 +3411,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
 
 function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     const parsedStyle = getParsedStyle(theme);
-    return (jsxRuntime.jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: clsx('tw-text-base-content tw-group tw-relative tw-font-geist'), children: children }));
+    return (jsxRuntime.jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 
 exports.AddressButton = AddressButton;

package/dist/cjs/types/components/layout/DetailsToolbar.d.ts

@@ -1,6 +1,5 @@
-import { BoostMode, DetailsToolbarState } from '../../types/components';
+import { BoostMode } from '../../types/components';
 interface DetailsToolbarProps {
-    state?: DetailsToolbarState;
     errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -12,10 +11,12 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/layout/SwapConfiguration.d.ts

@@ -25,6 +25,7 @@ interface SwapConfigurationProps {
     error?: {
         message: string;
     };
+    criticalPriceImpactPercentage?: number;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/core/themes.d.ts

@@ -1,10 +1,10 @@
 import { ThemeType } from '../types/components';
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 export type Theme = {
     name: string;
     themeImgPath: string;
     websiteBackgroundColor: string;
-    theme: ConfigTheme;
+    theme: SquidTheme;
     type: ThemeType;
 };
 export declare const themes: Theme[];

package/dist/cjs/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './providers';
 export * from './hooks';
+export * from './types';

package/dist/cjs/types/providers/SquidConfigProvider.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: ConfigTheme;
+    theme: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -1,9 +1,9 @@
-import { ConfigTheme } from '../../types/config';
+import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
  * @param style
  */
-export declare const getParsedStyle: (style?: ConfigTheme) => {
+export declare const getParsedStyle: (style?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/cjs/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface ConfigTheme {
+export interface SquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -41,6 +41,6 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof ConfigTheme, {
+export declare const themeTypesKeys: Record<keyof SquidTheme, {
     cssVariable: string;
 }>;

package/dist/cjs/types/types/index.d.ts

@@ -0,0 +1 @@
+export type { SquidTheme } from './config';

package/dist/esm/index.js

@@ -3111,7 +3111,16 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage = 'Something went wrong', boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }) {
+    const state = useMemo(() => {
+        if (errorMessage)
+            return 'error';
+        if (isLoading)
+            return 'loading';
+        if (isEmpty)
+            return 'empty';
+        return 'full';
+    }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
     return (jsx("aside", { className: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
@@ -3289,9 +3298,9 @@ function SwapInputsIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage = 5, }) {
     var _a;
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
+    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const isInteractive = direction === 'from';
@@ -3400,7 +3409,7 @@ function getHexColorFromOpacityPercentage(color, opacity) {
 
 function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     const parsedStyle = getParsedStyle(theme);
-    return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: clsx('tw-text-base-content tw-group tw-relative tw-font-geist'), children: children }));
+    return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 
 export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useModal };

package/dist/esm/types/components/layout/DetailsToolbar.d.ts

@@ -1,6 +1,5 @@
-import { BoostMode, DetailsToolbarState } from '../../types/components';
+import { BoostMode } from '../../types/components';
 interface DetailsToolbarProps {
-    state?: DetailsToolbarState;
     errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -12,10 +11,12 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/SwapConfiguration.d.ts

@@ -25,6 +25,7 @@ interface SwapConfigurationProps {
     error?: {
         message: string;
     };
+    criticalPriceImpactPercentage?: number;
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/core/themes.d.ts

@@ -1,10 +1,10 @@
 import { ThemeType } from '../types/components';
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 export type Theme = {
     name: string;
     themeImgPath: string;
     websiteBackgroundColor: string;
-    theme: ConfigTheme;
+    theme: SquidTheme;
     type: ThemeType;
 };
 export declare const themes: Theme[];

package/dist/esm/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './providers';
 export * from './hooks';
+export * from './types';

package/dist/esm/types/providers/SquidConfigProvider.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ConfigTheme } from '../types/config';
+import { SquidTheme } from '../types/config';
 import { ThemeType } from '../types/components';
 export declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: ConfigTheme;
+    theme: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/services/internal/colorService.d.ts

@@ -1,9 +1,9 @@
-import { ConfigTheme } from '../../types/config';
+import { SquidTheme } from '../../types/config';
 /**
  * Parsing the user readable config to css variables
  * @param style
  */
-export declare const getParsedStyle: (style?: ConfigTheme) => {
+export declare const getParsedStyle: (style?: SquidTheme) => {
     [key: string]: string | undefined;
 } | undefined;
 export declare function getContrastColor({ r, g, b, }: {

package/dist/esm/types/types/config.d.ts

@@ -2,7 +2,7 @@
  * The color format must be of type #FFFFFF
  */
 export type ColorType = `#${string}${string}${string}${string}${string}${string}`;
-export interface ConfigTheme {
+export interface SquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -41,6 +41,6 @@ export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
-export declare const themeTypesKeys: Record<keyof ConfigTheme, {
+export declare const themeTypesKeys: Record<keyof SquidTheme, {
     cssVariable: string;
 }>;

package/dist/esm/types/types/index.d.ts

@@ -0,0 +1 @@
+export type { SquidTheme } from './config';

package/dist/index.d.ts

@@ -56,7 +56,6 @@ type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
 };
-type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 type ThemeType = 'light' | 'dark';
 
 interface BoostButtonProps {
@@ -152,7 +151,6 @@ interface BoostProps {
 declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
-    state?: DetailsToolbarState;
     errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
@@ -164,12 +162,14 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
 }
-declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -323,8 +323,9 @@ interface SwapConfigurationProps {
     error?: {
         message: string;
     };
+    criticalPriceImpactPercentage?: number;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -368,7 +369,7 @@ interface HeadingTextProps {
 }
 declare function HeadingText({ children, bold, size }: HeadingTextProps): react_jsx_runtime.JSX.Element;
 
-interface ConfigTheme {
+interface SquidTheme {
     'grey-100': string;
     'grey-200': string;
     'grey-300': string;
@@ -405,7 +406,7 @@ interface ConfigTheme {
 }
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: ConfigTheme;
+    theme: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
@@ -420,4 +421,4 @@ declare function useModal(props?: {
     openModalButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "author": "",
   "license": "MIT",
   "scripts": {