@0xsquid/ui 0.9.0 → 0.9.1

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,17 @@ 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, }) {
+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 +3436,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'

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/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,17 @@ 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, }) {
+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 +3434,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'

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/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,14 @@ 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 ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+};
 interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
@@ -319,11 +324,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;
 

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.1",
   "author": "",
   "license": "MIT",
   "scripts": {