@0xsquid/ui 0.9.0 → 0.9.2

package/dist/cjs/index.js

@@ -2986,7 +2986,7 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                 switchCircleSizeClassMap[size], 
                 // disabled and checked styles
                 checked
-                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    ? 'tw-translate-x-0 tw-bg-[#FBFBFD]'
                     : '-tw-translate-x-full tw-bg-grey-500') })] }));
 }
 
@@ -3226,8 +3226,8 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             setDropdownPosition('top');
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
-    return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) }))] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
+    return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3327,7 +3327,7 @@ function InfoBox({ title, description, icon }) {
     return (jsxRuntime.jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
 }
 
-function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, }) {
     const [isOpen, setIsOpen] = react.useState(_isOpen);
     react.useEffect(() => {
         if (_isOpen)
@@ -3347,15 +3347,25 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }
                     onBackdropClick();
                 }
             }
-            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
+const borderTypeClassMap = {
+    border: 'tw-border tw-border-material-light-thin',
+    outline: 'tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin',
+};
+function ModalContent({ children, addGap = false, borderType = 'border', }) {
+    return (jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-full tw-max-h-[535px] tw-w-full tw-flex-col tw-self-stretch tw-overflow-auto tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300', addGap && 'tw-gap-squid-xxs tw-pt-squid-xxs', borderTypeClassMap[borderType]), children: children }));
+}
+
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsxRuntime.jsx(AddressButton, { isLoading: isLoading, onClick: onAddressButtonClick, className: displayButtonShadows
-                                ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                                : undefined, label: label }) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+                            : undefined, variant: "tertiary", size: "md", icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
+                                ? action.labelOrIcon
+                                : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
+                                ? null
+                                : action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
 function ProductCard({ children }) {
@@ -3434,12 +3444,12 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { className: "tw-relative tw-max-h-button tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { className: "tw-relative tw-max-h-button tw-max-w-[400px] tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, children: [newStepIndex > currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-animate-translate-to-bottom tw-absolute -tw-top-full tw-left-0 tw-w-full", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
-                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-animate-translate-to-top tw-absolute tw-left-0 tw-top-full tw-w-full", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                    }, children: [newStepIndex > currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-top-full tw-left-0 tw-w-full tw-animate-translate-to-bottom", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
+                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-absolute tw-left-0 tw-top-full tw-w-full tw-animate-translate-to-top", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                             ? 'tw-animate-slide-to-top'
@@ -3541,6 +3551,7 @@ exports.LoadingSkeleton = LoadingSkeleton;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.ModalContent = ModalContent;
 exports.NavigationBar = NavigationBar;
 exports.NumericInput = NumericInput;
 exports.ProductCard = ProductCard;

package/dist/cjs/types/components/icons/Clock.d.ts

@@ -6,3 +6,7 @@ export declare function ClockOutlineIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsGearIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ interface ModalProps {
     className?: string;
     onBackdropClick?: () => void;
     isOpen?: boolean;
+    maxHeight?: boolean;
 }
-export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type ModalContentBorderType = 'border' | 'outline';
+export declare function ModalContent({ children, addGap, borderType, }: {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    borderType?: ModalContentBorderType;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,8 @@
+/// <reference types="react" />
+type ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+};
 interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
@@ -5,9 +10,7 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
-    onAddressButtonClick?: () => void;
-    label?: string;
-    isLoading?: boolean;
+    actions?: ActionButton[];
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ export * from './ErrorMessage';
 export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
+export * from './ModalContent';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';

package/dist/cjs/types/stories/layout/ModalContent.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ModalContent } from '../../components/layout/ModalContent';
+declare const meta: Meta<typeof ModalContent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithBorder: Story;
+export declare const WithOutline: Story;

package/dist/cjs/types/stories/layout/NavigationBar.stories.d.ts

@@ -7,5 +7,6 @@ export declare const Default: Story;
 export declare const Title: Story;
 export declare const BackButton: Story;
 export declare const Logo: Story;
+export declare const WithActions: Story;
 export declare const AllProps: Story;
 export declare const Transparent: Story;

package/dist/esm/index.js

@@ -2984,7 +2984,7 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                 switchCircleSizeClassMap[size], 
                 // disabled and checked styles
                 checked
-                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    ? 'tw-translate-x-0 tw-bg-[#FBFBFD]'
                     : '-tw-translate-x-full tw-bg-grey-500') })] }));
 }
 
@@ -3224,8 +3224,8 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
             setDropdownPosition('top');
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
-    return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), !!dropdownMenuItems && (jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) }))] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
+    return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-opacity-0 peer-focus:tw-opacity-0'), children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
                     isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
 }
@@ -3325,7 +3325,7 @@ function InfoBox({ title, description, icon }) {
     return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
 }
 
-function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, }) {
     const [isOpen, setIsOpen] = useState(_isOpen);
     useEffect(() => {
         if (_isOpen)
@@ -3345,15 +3345,25 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }
                     onBackdropClick();
                 }
             }
-            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
-function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
+const borderTypeClassMap = {
+    border: 'tw-border tw-border-material-light-thin',
+    outline: 'tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin',
+};
+function ModalContent({ children, addGap = false, borderType = 'border', }) {
+    return (jsx("div", { className: cn('tw-flex tw-h-full tw-max-h-[535px] tw-w-full tw-flex-col tw-self-stretch tw-overflow-auto tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300', addGap && 'tw-gap-squid-xxs tw-pt-squid-xxs', borderTypeClassMap[borderType]), children: children }));
+}
+
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                            : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { isLoading: isLoading, onClick: onAddressButtonClick, className: displayButtonShadows
-                                ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
-                                : undefined, label: label }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+                            : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Button, { size: "md", variant: "tertiary", label: typeof action.labelOrIcon === 'string'
+                                ? action.labelOrIcon
+                                : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
+                                ? null
+                                : action.labelOrIcon, onClick: action.onClick }))) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
 function ProductCard({ children }) {
@@ -3432,12 +3442,12 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxs("button", { className: "tw-relative tw-max-h-button tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxs("button", { className: "tw-relative tw-max-h-button tw-max-w-[400px] tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, children: [newStepIndex > currentStepIndex && (jsx("div", { className: "tw-animate-translate-to-bottom tw-absolute -tw-top-full tw-left-0 tw-w-full", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
-                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsx("div", { className: "tw-animate-translate-to-top tw-absolute tw-left-0 tw-top-full tw-w-full", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                    }, children: [newStepIndex > currentStepIndex && (jsx("div", { className: "tw-absolute -tw-top-full tw-left-0 tw-w-full tw-animate-translate-to-bottom", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
+                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsx("div", { className: "tw-absolute tw-left-0 tw-top-full tw-w-full tw-animate-translate-to-top", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                             ? 'tw-animate-slide-to-top'
@@ -3515,4 +3525,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     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, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };

package/dist/esm/types/components/icons/Clock.d.ts

@@ -6,3 +6,7 @@ export declare function ClockOutlineIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsGearIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ interface ModalProps {
     className?: string;
     onBackdropClick?: () => void;
     isOpen?: boolean;
+    maxHeight?: boolean;
 }
-export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type ModalContentBorderType = 'border' | 'outline';
+export declare function ModalContent({ children, addGap, borderType, }: {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    borderType?: ModalContentBorderType;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,8 @@
+/// <reference types="react" />
+type ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+};
 interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
@@ -5,9 +10,7 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
-    onAddressButtonClick?: () => void;
-    label?: string;
-    isLoading?: boolean;
+    actions?: ActionButton[];
 }
-export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ export * from './ErrorMessage';
 export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
+export * from './ModalContent';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';

package/dist/esm/types/stories/layout/ModalContent.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ModalContent } from '../../components/layout/ModalContent';
+declare const meta: Meta<typeof ModalContent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithBorder: Story;
+export declare const WithOutline: Story;

package/dist/esm/types/stories/layout/NavigationBar.stories.d.ts

@@ -7,5 +7,6 @@ export declare const Default: Story;
 export declare const Title: Story;
 export declare const BackButton: Story;
 export declare const Logo: Story;
+export declare const WithActions: Story;
 export declare const AllProps: Story;
 export declare const Transparent: Story;

package/dist/index.css

@@ -920,10 +920,6 @@ video {
   height: 46px;
 }
 
-.tw-h-\[470px\] {
-  height: 470px;
-}
-
 .tw-h-\[50px\] {
   height: 50px;
 }
@@ -1012,10 +1008,6 @@ video {
   max-height: 540px;
 }
 
-.tw-max-h-\[570px\] {
-  max-height: 570px;
-}
-
 .tw-max-h-\[600px\] {
   max-height: 600px;
 }
@@ -1820,6 +1812,11 @@ video {
   background-color: var(--squid-theme-royal-400) !important;
 }
 
+.tw-bg-\[\#FBFBFD\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 251 253 / var(--tw-bg-opacity));
+}
+
 .tw-bg-blue-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(23 37 84 / var(--tw-bg-opacity));
@@ -2601,6 +2598,10 @@ li {
   color: var(--squid-theme-royal-400);
 }
 
+.focus\:tw-opacity-100:focus {
+  opacity: 1;
+}
+
 .focus\:tw-outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2651,6 +2652,10 @@ li {
   display: block;
 }
 
+.tw-peer:focus ~ .peer-focus\:tw-opacity-0 {
+  opacity: 0;
+}
+
 .aria-disabled\:tw-bg-grey-600[aria-disabled="true"] {
   background-color: var(--squid-theme-grey-600);
 }

package/dist/index.d.ts

@@ -309,9 +309,21 @@ interface ModalProps {
     className?: string;
     onBackdropClick?: () => void;
     isOpen?: boolean;
+    maxHeight?: boolean;
 }
-declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
+type ModalContentBorderType = 'border' | 'outline';
+declare function ModalContent({ children, addGap, borderType, }: {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    borderType?: ModalContentBorderType;
+}): react_jsx_runtime.JSX.Element;
+
+type ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+};
 interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
@@ -319,11 +331,9 @@ interface NavigationBarProps {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
-    onAddressButtonClick?: () => void;
-    label?: string;
-    isLoading?: boolean;
+    actions?: ActionButton[];
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
 
@@ -454,4 +464,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

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