@0xsquid/ui 0.22.0 → 0.22.1

package/dist/cjs/index.js

@@ -2984,9 +2984,13 @@ function Chip(_a) {
 }
 
 const baseButtonClassName = 'tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center';
+const buttonWidthClassnameMap = {
+    md: 'tw-min-w-[60px]',
+    lg: 'tw-w-full',
+};
 const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-min-w-[60px] tw-h-squid-xl',
-    lg: 'tw-p-1 tw-h-button tw-w-full',
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-h-squid-xl',
+    lg: 'tw-p-1 tw-h-button',
 };
 const roundedClassMap = {
     md: 'tw-rounded-squid-m',
@@ -3002,7 +3006,7 @@ const buttonVariantClassMap = {
 const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
 const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link, isLoading = false, chip } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip"]);
+    var { label, disabled, size, variant, icon, link, isLoading = false, chip, containerClassName } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip", "containerClassName"]);
     const chipElement = chip ? (jsxRuntime.jsx(Chip, Object.assign({}, chip, { className: cn('tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10', chip.className) }))) : null;
     const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size] })), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
@@ -3011,15 +3015,16 @@ function Button$1(_a) {
                 isLoading ? null : (icon)) : (
                 // icon and label
                 jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonWidthClassnameMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
     disabled && buttonDisabledClass, isLoading && 'tw-cursor-not-allowed', 
     // custom classes from props
     props.className);
+    const ButtonWrapper = ({ children }) => (jsxRuntime.jsx("div", { className: cn('tw-relative', buttonWidthClassnameMap[size], roundedClassMap[size], containerClassName), children: children }));
     if (link) {
-        return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full", children: [jsxRuntime.jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }), chipElement] }));
+        return (jsxRuntime.jsxs(ButtonWrapper, { children: [jsxRuntime.jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }), chipElement] }));
     }
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full", children: [jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
+    return (jsxRuntime.jsxs(ButtonWrapper, { children: [jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsxRuntime.jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
@@ -18225,7 +18230,7 @@ const SwapStepsCollapsed = React.forwardRef((props, ref) => {
                                         scrollbarWidth: 'none',
                                     }, className: "tw-relative tw-flex tw-w-modal-compact tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs mobile-lg:tw-w-modal-large", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, 
                                         // show separator for all steps except the first one
-                                        showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full" }) })] }) })] }) }) }));
+                                        showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
 
 const WIDTH_SM = '69';
@@ -25053,11 +25058,11 @@ function MainView({ isLoading }) {
 }
 
 function RecipientView({ type }) {
-    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: type === 'paymentMethod' ? 'Pay' : 'Receive', displayBackButton: true }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsx(FlexContainer, { children: type === 'paymentMethod' || type === 'recipientEmpty' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle, { title: "Your wallet", icon: jsxRuntime.jsx(PunkIcon, {}) }), jsxRuntime.jsx(ListItem, { itemTitle: "so-so.eth", subtitle: "0x2276\u2026F3c56", mainImageUrl: "/assets/images/avatar.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { }, detail: "Connected" }), jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full" }) })] })) : type === 'recipientTypingEns' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsxRuntime.jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === 'recipientTypingAddress' ? (jsxRuntime.jsx(SearchAddress, { type: type })) : null }) }), type === 'paymentMethod' ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SectionTitle, { title: 'Centralized Exchange', icon: type === 'paymentMethod' ? jsxRuntime.jsx(BankIcon, {}) : jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx(DepositSection, {})] }) })) : type === 'recipientEmpty' ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-px-squid-xxl tw-py-squid-xl", children: jsxRuntime.jsx(CaptionText, { className: "tw-max-w-[200px] tw-text-center tw-text-grey-500", children: "Wallets you add and swap to will appear here" }) })] }) })) : type === 'recipientTypingEns' || type === 'recipientTypingAddress' ? (jsxRuntime.jsx("div", {})) : null, ' '] }));
+    return (jsxRuntime.jsxs(ProductCard, { children: [jsxRuntime.jsx(NavigationBar, { title: type === 'paymentMethod' ? 'Pay' : 'Receive', displayBackButton: true }), jsxRuntime.jsx(BorderedContainer, { children: jsxRuntime.jsx(FlexContainer, { children: type === 'paymentMethod' || type === 'recipientEmpty' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle, { title: "Your wallet", icon: jsxRuntime.jsx(PunkIcon, {}) }), jsxRuntime.jsx(ListItem, { itemTitle: "so-so.eth", subtitle: "0x2276\u2026F3c56", mainImageUrl: "/assets/images/avatar.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { }, detail: "Connected" }), jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full", containerClassName: "tw-w-full" }) })] })) : type === 'recipientTypingEns' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsxRuntime.jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === 'recipientTypingAddress' ? (jsxRuntime.jsx(SearchAddress, { type: type })) : null }) }), type === 'paymentMethod' ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SectionTitle, { title: 'Centralized Exchange', icon: type === 'paymentMethod' ? jsxRuntime.jsx(BankIcon, {}) : jsxRuntime.jsx(WalletIcon, {}) }), jsxRuntime.jsx(DepositSection, {})] }) })) : type === 'recipientEmpty' ? (jsxRuntime.jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SearchAddress, { type: type }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-px-squid-xxl tw-py-squid-xl", children: jsxRuntime.jsx(CaptionText, { className: "tw-max-w-[200px] tw-text-center tw-text-grey-500", children: "Wallets you add and swap to will appear here" }) })] }) })) : type === 'recipientTypingEns' || type === 'recipientTypingAddress' ? (jsxRuntime.jsx("div", {})) : null, ' '] }));
 }
-const FlexContainer = ({ children }) => (jsxRuntime.jsx("div", { className: "mobile-lg:tw-px-squid-xs tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0", children: children }));
+const FlexContainer = ({ children }) => (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0 mobile-lg:tw-px-squid-xs", children: children }));
 const DepositSection = () => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsxRuntime.jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.jsx(CaptionText, { className: "tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: "In case of swapping from a centralized exchange, you can send your tokens to a temporary deposit account that will handle the swap instead." }), jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full" }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsxRuntime.jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsxRuntime.jsx(CaptionText, { className: "tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: "In case of swapping from a centralized exchange, you can send your tokens to a temporary deposit account that will handle the swap instead." }), jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full", containerClassName: "tw-w-full" }) })] }));
 };
 const SearchAddress = ({ type }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle, { title: 'Custom wallet', icon: jsxRuntime.jsx(WalletIcon, {}), accessory: type === 'recipientTypingEns'

package/dist/cjs/types/components/buttons/Button.d.ts

@@ -10,6 +10,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     link?: string;
     isLoading?: boolean;
     chip?: ChipProps;
+    containerClassName?: string;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, containerClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/index.js

@@ -2964,9 +2964,13 @@ function Chip(_a) {
 }
 
 const baseButtonClassName = 'tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center';
+const buttonWidthClassnameMap = {
+    md: 'tw-min-w-[60px]',
+    lg: 'tw-w-full',
+};
 const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-min-w-[60px] tw-h-squid-xl',
-    lg: 'tw-p-1 tw-h-button tw-w-full',
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-h-squid-xl',
+    lg: 'tw-p-1 tw-h-button',
 };
 const roundedClassMap = {
     md: 'tw-rounded-squid-m',
@@ -2982,7 +2986,7 @@ const buttonVariantClassMap = {
 const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
 const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link, isLoading = false, chip } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip"]);
+    var { label, disabled, size, variant, icon, link, isLoading = false, chip, containerClassName } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip", "containerClassName"]);
     const chipElement = chip ? (jsx(Chip, Object.assign({}, chip, { className: cn('tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10', chip.className) }))) : null;
     const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (jsx(ButtonHoverOverlay, { className: roundedClassMap[size] })), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
@@ -2991,15 +2995,16 @@ function Button$1(_a) {
                 isLoading ? null : (icon)) : (
                 // icon and label
                 jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonWidthClassnameMap[size], buttonVariantClassMap[variant], 'tw-border-material-light-thin', !disabled && !isLoading && 'hover:tw-border-material-light-average', roundedClassMap[size], 
     // disabled styles
     disabled && buttonDisabledClass, isLoading && 'tw-cursor-not-allowed', 
     // custom classes from props
     props.className);
+    const ButtonWrapper = ({ children }) => (jsx("div", { className: cn('tw-relative', buttonWidthClassnameMap[size], roundedClassMap[size], containerClassName), children: children }));
     if (link) {
-        return (jsxs("div", { className: "tw-relative tw-w-full", children: [jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }), chipElement] }));
+        return (jsxs(ButtonWrapper, { children: [jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }), chipElement] }));
     }
-    return (jsxs("div", { className: "tw-relative tw-w-full", children: [jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
+    return (jsxs(ButtonWrapper, { children: [jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
@@ -18205,7 +18210,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
                                         scrollbarWidth: 'none',
                                     }, className: "tw-relative tw-flex tw-w-modal-compact tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs mobile-lg:tw-w-modal-large", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, 
                                         // show separator for all steps except the first one
-                                        showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full" }) })] }) })] }) }) }));
+                                        showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
 
 const WIDTH_SM = '69';
@@ -25033,11 +25038,11 @@ function MainView({ isLoading }) {
 }
 
 function RecipientView({ type }) {
-    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: type === 'paymentMethod' ? 'Pay' : 'Receive', displayBackButton: true }), jsx(BorderedContainer, { children: jsx(FlexContainer, { children: type === 'paymentMethod' || type === 'recipientEmpty' ? (jsxs(Fragment, { children: [jsx(SectionTitle, { title: "Your wallet", icon: jsx(PunkIcon, {}) }), jsx(ListItem, { itemTitle: "so-so.eth", subtitle: "0x2276\u2026F3c56", mainImageUrl: "/assets/images/avatar.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { }, detail: "Connected" }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full" }) })] })) : type === 'recipientTypingEns' ? (jsxs(Fragment, { children: [jsx(SearchAddress, { type: type }), jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === 'recipientTypingAddress' ? (jsx(SearchAddress, { type: type })) : null }) }), type === 'paymentMethod' ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SectionTitle, { title: 'Centralized Exchange', icon: type === 'paymentMethod' ? jsx(BankIcon, {}) : jsx(WalletIcon, {}) }), jsx(DepositSection, {})] }) })) : type === 'recipientEmpty' ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SearchAddress, { type: type }), jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-px-squid-xxl tw-py-squid-xl", children: jsx(CaptionText, { className: "tw-max-w-[200px] tw-text-center tw-text-grey-500", children: "Wallets you add and swap to will appear here" }) })] }) })) : type === 'recipientTypingEns' || type === 'recipientTypingAddress' ? (jsx("div", {})) : null, ' '] }));
+    return (jsxs(ProductCard, { children: [jsx(NavigationBar, { title: type === 'paymentMethod' ? 'Pay' : 'Receive', displayBackButton: true }), jsx(BorderedContainer, { children: jsx(FlexContainer, { children: type === 'paymentMethod' || type === 'recipientEmpty' ? (jsxs(Fragment, { children: [jsx(SectionTitle, { title: "Your wallet", icon: jsx(PunkIcon, {}) }), jsx(ListItem, { itemTitle: "so-so.eth", subtitle: "0x2276\u2026F3c56", mainImageUrl: "/assets/images/avatar.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { }, detail: "Connected" }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "primary", label: "Change wallet", className: "tw-w-full", containerClassName: "tw-w-full" }) })] })) : type === 'recipientTypingEns' ? (jsxs(Fragment, { children: [jsx(SearchAddress, { type: type }), jsx(ListItem, { itemTitle: "souljabags.eth", subtitle: "0x25c9\u202623d5", mainImageUrl: "/assets/images/punks.png", size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(ListItem, { itemTitle: "souljaboy.eth", subtitle: "0x0ec8\u202604c1", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(PunkIcon, { size: "30" }) }), size: "large", className: "tw-w-full tw-max-w-none", onClick: () => { } })] })) : type === 'recipientTypingAddress' ? (jsx(SearchAddress, { type: type })) : null }) }), type === 'paymentMethod' ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SectionTitle, { title: 'Centralized Exchange', icon: type === 'paymentMethod' ? jsx(BankIcon, {}) : jsx(WalletIcon, {}) }), jsx(DepositSection, {})] }) })) : type === 'recipientEmpty' ? (jsx(BorderedContainer, { className: "tw-flex-1 tw-pt-squid-xs", children: jsxs(FlexContainer, { children: [jsx(SearchAddress, { type: type }), jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch tw-px-squid-xxl tw-py-squid-xl", children: jsx(CaptionText, { className: "tw-max-w-[200px] tw-text-center tw-text-grey-500", children: "Wallets you add and swap to will appear here" }) })] }) })) : type === 'recipientTypingEns' || type === 'recipientTypingAddress' ? (jsx("div", {})) : null, ' '] }));
 }
-const FlexContainer = ({ children }) => (jsx("div", { className: "mobile-lg:tw-px-squid-xs tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0", children: children }));
+const FlexContainer = ({ children }) => (jsx("div", { className: "tw-flex tw-h-full tw-flex-1 tw-flex-col tw-items-center tw-gap-squid-xxs tw-px-0 mobile-lg:tw-px-squid-xs", children: children }));
 const DepositSection = () => {
-    return (jsxs(Fragment, { children: [jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(CaptionText, { className: "tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: "In case of swapping from a centralized exchange, you can send your tokens to a temporary deposit account that will handle the swap instead." }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full" }) })] }));
+    return (jsxs(Fragment, { children: [jsx(ListItem, { itemTitle: "Deposit", mainIcon: jsx("div", { className: "tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-grey-100", children: jsx(CoinsAddIcon, {}) }), className: "tw-w-full tw-max-w-none", onClick: () => { } }), jsx(CaptionText, { className: "tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: "In case of swapping from a centralized exchange, you can send your tokens to a temporary deposit account that will handle the swap instead." }), jsx("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-center tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", children: jsx(Button$1, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-w-full", containerClassName: "tw-w-full" }) })] }));
 };
 const SearchAddress = ({ type }) => {
     return (jsxs(Fragment, { children: [jsx(SectionTitle, { title: 'Custom wallet', icon: jsx(WalletIcon, {}), accessory: type === 'recipientTypingEns'

package/dist/esm/types/components/buttons/Button.d.ts

@@ -10,6 +10,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     link?: string;
     isLoading?: boolean;
     chip?: ChipProps;
+    containerClassName?: string;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, containerClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -272,8 +272,9 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     link?: string;
     isLoading?: boolean;
     chip?: ChipProps;
+    containerClassName?: string;
 }
-declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, containerClassName, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     feeInUsd?: string;

package/package.json

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