@mysten/dapp-kit 0.1.0 → 0.2.0

package/src/components/ConnectButton.tsx

@@ -6,6 +6,7 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { useCurrentAccount } from '../hooks/wallet/useCurrentAccount.js';
 import { AccountDropdownMenu } from './AccountDropdownMenu.js';
 import { ConnectModal } from './connect-modal/ConnectModal.js';
+import { Button } from './ui/Button.js';
 
 type ConnectButtonProps = {
 	connectText?: ReactNode;
@@ -19,6 +20,6 @@ export function ConnectButton({
 	return currentAccount ? (
 		<AccountDropdownMenu currentAccount={currentAccount} />
 	) : (
-		<ConnectModal trigger={<button {...buttonProps}>{connectText}</button>} />
+		<ConnectModal trigger={<Button {...buttonProps}>{connectText}</Button>} />
 	);
 }

package/src/components/WalletProvider.tsx

@@ -11,8 +11,11 @@ import { useAutoConnectWallet } from '../hooks/wallet/useAutoConnectWallet.js';
 import { useUnsafeBurnerWallet } from '../hooks/wallet/useUnsafeBurnerWallet.js';
 import { useWalletPropertiesChanged } from '../hooks/wallet/useWalletPropertiesChanged.js';
 import { useWalletsChanged } from '../hooks/wallet/useWalletsChanged.js';
+import { lightTheme } from '../themes/lightTheme.js';
+import type { Theme } from '../themes/themeContract.js';
 import { getRegisteredWallets } from '../utils/walletUtils.js';
 import { createWalletStore } from '../walletStore.js';
+import { InjectedThemeStyles } from './styling/InjectedThemeStyles.js';
 
 type WalletProviderProps = {
 	/** A list of wallets that are sorted to the top of the wallet list, if they are available to connect to. By default, wallets are sorted by the order they are loaded in. */
@@ -33,6 +36,9 @@ type WalletProviderProps = {
 	/** The key to use to store the most recently connected wallet account. */
 	storageKey?: string;
 
+	/** The theme to use for styling UI components. Defaults to using the light theme. */
+	theme?: Theme | null;
+
 	children: ReactNode;
 };
 
@@ -51,6 +57,7 @@ export function WalletProvider({
 	storageKey = DEFUALT_STORAGE_KEY,
 	enableUnsafeBurner = false,
 	autoConnect = false,
+	theme = lightTheme,
 	children,
 }: WalletProviderProps) {
 	const storeRef = useRef(
@@ -69,6 +76,8 @@ export function WalletProvider({
 				enableUnsafeBurner={enableUnsafeBurner}
 				autoConnect={autoConnect}
 			>
+				{/* TODO: We ideally don't want to inject styles if people aren't using the UI components */}
+				{theme ? <InjectedThemeStyles theme={theme} /> : null}
 				{children}
 			</WalletConnectionManager>
 		</WalletContext.Provider>

package/src/components/connect-modal/ConnectModal.css.ts

@@ -3,8 +3,11 @@
 
 import { style } from '@vanilla-extract/css';
 
+import { themeVars } from '../../themes/themeContract.js';
+
 export const overlay = style({
-	backgroundColor: 'rgba(24 36 53 / 20%)',
+	backgroundColor: themeVars.backgroundColors.modalOverlay,
+	backdropFilter: themeVars.blurs.modalOverlay,
 	position: 'fixed',
 	inset: 0,
 	zIndex: 999999999,
@@ -15,7 +18,8 @@ export const title = style({
 });
 
 export const content = style({
-	backgroundColor: 'white',
+	backgroundColor: themeVars.backgroundColors.modalPrimary,
+	borderRadius: themeVars.radii.xlarge,
 	position: 'fixed',
 	bottom: 16,
 	left: 16,
@@ -24,7 +28,6 @@ export const content = style({
 	flexDirection: 'column',
 	justifyContent: 'space-between',
 	overflow: 'hidden',
-	borderRadius: 16,
 	minHeight: '50vh',
 	maxHeight: '85vh',
 	maxWidth: 700,
@@ -40,7 +43,7 @@ export const content = style({
 });
 
 export const whatIsAWalletButton = style({
-	backgroundColor: '#F7F8F8',
+	backgroundColor: themeVars.backgroundColors.modalSecondary,
 	padding: 16,
 	'@media': {
 		'screen and (min-width: 768px)': {
@@ -64,21 +67,7 @@ export const selectedViewContainer = style({
 	display: 'flex',
 });
 
-export const triggerButton = style({
-	backgroundColor: '#0284AD',
-	boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-	color: 'white',
-	borderRadius: 12,
-	paddingLeft: 24,
-	paddingRight: 24,
-	paddingTop: 16,
-	paddingBottom: 16,
-	':hover': {
-		backgroundColor: '#007194',
-	},
-});
-
-export const backButton = style({
+export const backButtonContainer = style({
 	position: 'absolute',
 	top: 20,
 	left: 20,
@@ -89,24 +78,22 @@ export const backButton = style({
 	},
 });
 
-export const closeButton = style({
+export const closeButtonContainer = style({
 	position: 'absolute',
-	padding: 7,
 	top: 16,
 	right: 16,
-	borderRadius: 9999,
-	backgroundColor: '#F0F1F2',
 });
 
 export const walletListContent = style({
-	padding: 20,
-	minWidth: 240,
 	display: 'flex',
 	flexDirection: 'column',
+	flexGrow: 1,
 	gap: 24,
+	padding: 20,
+	backgroundColor: themeVars.backgroundColors.modalPrimary,
 	'@media': {
 		'screen and (min-width: 768px)': {
-			backgroundColor: '#F7F8F8',
+			backgroundColor: themeVars.backgroundColors.modalSecondary,
 		},
 	},
 });
@@ -119,7 +106,9 @@ export const walletListContainer = style({
 	'@media': {
 		'screen and (min-width: 768px)': {
 			flexDirection: 'row',
+			flexBasis: 240,
 			flexGrow: 0,
+			flexShrink: 0,
 		},
 	},
 });

package/src/components/connect-modal/ConnectModal.tsx

@@ -11,6 +11,8 @@ import { useConnectWallet } from '../../hooks/wallet/useConnectWallet.js';
 import { BackIcon } from '../icons/BackIcon.js';
 import { CloseIcon } from '../icons/CloseIcon.js';
 import { StyleMarker } from '../styling/StyleMarker.js';
+import { Heading } from '../ui/Heading.js';
+import { IconButton } from '../ui/IconButton.js';
 import * as styles from './ConnectModal.css.js';
 import { ConnectionStatus } from './views/ConnectionStatus.js';
 import { GettingStarted } from './views/GettingStarted.js';
@@ -108,13 +110,17 @@ export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: Conne
 								})}
 							>
 								<div className={styles.walletListContent}>
-									<Dialog.Title className={styles.title}>Connect a Wallet</Dialog.Title>
+									<Dialog.Title className={styles.title} asChild>
+										<Heading as="h2">Connect a Wallet</Heading>
+									</Dialog.Title>
 									<WalletList
 										selectedWalletName={selectedWallet?.name}
 										onPlaceholderClick={() => setCurrentView('getting-started')}
 										onSelect={(wallet) => {
-											setSelectedWallet(wallet);
-											connectWallet(wallet);
+											if (selectedWallet?.name !== wallet.name) {
+												setSelectedWallet(wallet);
+												connectWallet(wallet);
+											}
 										}}
 									/>
 								</div>
@@ -126,24 +132,22 @@ export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: Conne
 									What is a Wallet?
 								</button>
 							</div>
-
 							<div
 								className={clsx(styles.viewContainer, {
 									[styles.selectedViewContainer]: !!currentView,
 								})}
 							>
-								<button
-									className={styles.backButton}
-									onClick={() => resetSelection()}
-									type="button"
-									aria-label="Back"
-								>
-									<BackIcon />
-								</button>
+								<div className={styles.backButtonContainer}>
+									<IconButton type="button" aria-label="Back" onClick={() => resetSelection()}>
+										<BackIcon />
+									</IconButton>
+								</div>
 								{modalContent}
 							</div>
-							<Dialog.Close className={styles.closeButton} aria-label="Close">
-								<CloseIcon />
+							<Dialog.Close className={styles.closeButtonContainer} asChild>
+								<IconButton type="button" aria-label="Close">
+									<CloseIcon />
+								</IconButton>
 							</Dialog.Close>
 						</Dialog.Content>
 					</Dialog.Overlay>

package/src/components/connect-modal/InfoSection.css.ts

@@ -8,7 +8,3 @@ export const container = style({
 	flexDirection: 'column',
 	gap: 4,
 });
-
-export const heading = style({});
-
-export const description = style({});

package/src/components/connect-modal/InfoSection.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { Heading } from '../ui/Heading.js';
+import { Text } from '../ui/Text.js';
 import * as styles from './InfoSection.css.js';
 
 type InfoSectionProps = {
@@ -11,8 +13,12 @@ type InfoSectionProps = {
 export function InfoSection({ title, children }: InfoSectionProps) {
 	return (
 		<section className={styles.container}>
-			<h3 className={styles.heading}>{title}</h3>
-			<div className={styles.description}>{children}</div>
+			<Heading as="h3" size="sm" weight="normal">
+				{title}
+			</Heading>
+			<Text weight="medium" color="muted">
+				{children}
+			</Text>
 		</section>
 	);
 }

package/src/components/connect-modal/views/ConnectionStatus.css.ts

@@ -3,6 +3,8 @@
 
 import { style } from '@vanilla-extract/css';
 
+import { themeVars } from '../../../themes/themeContract.js';
+
 export const container = style({
 	display: 'flex',
 	flexDirection: 'column',
@@ -12,14 +14,13 @@ export const container = style({
 });
 
 export const walletIcon = style({
-	backgroundColor: 'white',
 	objectFit: 'cover',
 	width: 72,
 	height: 72,
-	borderRadius: 16,
+	borderRadius: themeVars.radii.large,
 });
 
-export const walletName = style({
+export const title = style({
 	marginTop: 12,
 });
 
@@ -27,6 +28,8 @@ export const connectionStatus = style({
 	marginTop: 4,
 });
 
-export const connectionStatusWithError = style({
-	color: 'red',
+export const retryButtonContainer = style({
+	position: 'absolute',
+	bottom: 20,
+	right: 20,
 });

package/src/components/connect-modal/views/ConnectionStatus.tsx

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
-import clsx from 'clsx';
 
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
+import { Text } from '../../ui/Text.js';
 import * as styles from './ConnectionStatus.css.js';
 
 type ConnectionStatusProps = {
@@ -24,18 +26,24 @@ export function ConnectionStatus({
 				src={selectedWallet.icon}
 				alt={`${selectedWallet.name} logo`}
 			/>
-			<div className={styles.walletName}>Opening {selectedWallet.name}</div>
-			<div
-				className={clsx(styles.connectionStatus, {
-					[styles.connectionStatusWithError]: hadConnectionError,
-				})}
-			>
-				{hadConnectionError ? 'Connection failed' : 'Confirm connection in the wallet...'}
+			<div className={styles.title}>
+				<Heading as="h2" size="xl">
+					Opening {selectedWallet.name}
+				</Heading>
+			</div>
+			<div className={styles.connectionStatus}>
+				{hadConnectionError ? (
+					<Text color="danger">Connection failed</Text>
+				) : (
+					<Text color="muted">Confirm connection in the wallet...</Text>
+				)}
 			</div>
 			{hadConnectionError ? (
-				<button type="button" onClick={() => onRetryConnection(selectedWallet)}>
-					Retry Connection
-				</button>
+				<div className={styles.retryButtonContainer}>
+					<Button type="button" variant="outline" onClick={() => onRetryConnection(selectedWallet)}>
+						Retry Connection
+					</Button>
+				</div>
 			) : null}
 		</div>
 	);

package/src/components/connect-modal/views/GettingStarted.css.ts

@@ -9,8 +9,6 @@ export const container = style({
 	alignItems: 'center',
 });
 
-export const title = style({});
-
 export const content = style({
 	display: 'flex',
 	flexDirection: 'column',
@@ -20,4 +18,8 @@ export const content = style({
 	padding: 40,
 });
 
-export const installLink = style({});
+export const installButtonContainer = style({
+	position: 'absolute',
+	bottom: 20,
+	right: 20,
+});

package/src/components/connect-modal/views/GettingStarted.tsx

@@ -1,13 +1,15 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { Button } from '../../ui/Button.js';
+import { Heading } from '../../ui/Heading.js';
 import { InfoSection } from '../InfoSection.js';
 import * as styles from './GettingStarted.css.js';
 
 export function GettingStarted() {
 	return (
 		<div className={styles.container}>
-			<h2 className={styles.title}>Get Started with Sui</h2>
+			<Heading as="h2">Get Started with Sui</Heading>
 			<div className={styles.content}>
 				<InfoSection title="Install the Sui Wallet Extension">
 					We recommend pinning Sui Wallet to your taskbar for quicker access.
@@ -19,14 +21,17 @@ export function GettingStarted() {
 				<InfoSection title="Refresh Your Browser">
 					Once you set up your wallet, refresh this window browser to load up the extension.
 				</InfoSection>
-				<a
-					className={styles.installLink}
-					href="https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Install Wallet Extension
-				</a>
+				<div className={styles.installButtonContainer}>
+					<Button variant="outline" asChild>
+						<a
+							href="https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil"
+							target="_blank"
+							rel="noreferrer"
+						>
+							Install Wallet Extension
+						</a>
+					</Button>
+				</div>
 			</div>
 		</div>
 	);

package/src/components/connect-modal/views/WhatIsAWallet.css.ts

@@ -9,8 +9,6 @@ export const container = style({
 	alignItems: 'center',
 });
 
-export const title = style({});
-
 export const content = style({
 	display: 'flex',
 	flexDirection: 'column',

package/src/components/connect-modal/views/WhatIsAWallet.tsx

@@ -1,13 +1,14 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { Heading } from '../../ui/Heading.js';
 import { InfoSection } from '../InfoSection.js';
 import * as styles from './WhatIsAWallet.css.js';
 
 export function WhatIsAWallet() {
 	return (
 		<div className={styles.container}>
-			<h2 className={styles.title}>What is a Wallet</h2>
+			<Heading as="h2">What is a Wallet</Heading>
 			<div className={styles.content}>
 				<InfoSection title="Easy Login">
 					No need to create new accounts and passwords for every website. Just connect your wallet

package/src/components/connect-modal/wallet-list/WalletList.css.ts

@@ -6,5 +6,5 @@ import { style } from '@vanilla-extract/css';
 export const container = style({
 	display: 'flex',
 	flexDirection: 'column',
-	gap: '4px',
+	gap: 4,
 });

package/src/components/connect-modal/wallet-list/WalletListItem.css.ts

@@ -3,34 +3,33 @@
 
 import { style } from '@vanilla-extract/css';
 
-export const container = style({
-	padding: 8,
-	borderRadius: 8,
-});
+import { themeVars } from '../../../themes/themeContract.js';
 
-export const selectedContainer = style({
-	background: '#FFFFFF',
-	boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
+export const container = style({
+	display: 'flex',
 });
 
-export const buttonContainer = style({
-	width: '100%',
+export const walletItem = style({
 	display: 'flex',
 	alignItems: 'center',
-	gap: '8px',
+	flexGrow: 1,
+	padding: 8,
+	gap: 8,
+	borderRadius: themeVars.radii.large,
+	':hover': {
+		backgroundColor: themeVars.backgroundColors.walletItemHover,
+	},
 });
 
-export const walletName = style({
-	overflow: 'hidden',
-	textOverflow: 'ellipsis',
-	whiteSpace: 'nowrap',
+export const selectedWalletItem = style({
+	backgroundColor: themeVars.backgroundColors.walletItemSelected,
+	boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)',
 });
 
 export const walletIcon = style({
 	width: 28,
 	height: 28,
-	borderRadius: 6,
 	flexShrink: 0,
-	background: 'white',
 	objectFit: 'cover',
+	borderRadius: themeVars.radii.small,
 });

package/src/components/connect-modal/wallet-list/WalletListItem.tsx

@@ -4,6 +4,7 @@
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 
+import { Heading } from '../../ui/Heading.js';
 import * as styles from './WalletListItem.css.js';
 
 type WalletListItemProps = {
@@ -15,14 +16,20 @@ type WalletListItemProps = {
 
 export function WalletListItem({ name, icon, onClick, isSelected = false }: WalletListItemProps) {
 	return (
-		<li className={clsx(styles.container, { [styles.selectedContainer]: isSelected })}>
-			<button className={styles.buttonContainer} type="button" onClick={onClick}>
+		<li className={styles.container}>
+			<button
+				className={clsx(styles.walletItem, { [styles.selectedWalletItem]: isSelected })}
+				type="button"
+				onClick={onClick}
+			>
 				{typeof icon === 'string' ? (
 					<img className={styles.walletIcon} src={icon} alt={`${name} logo`} />
 				) : (
 					icon
 				)}
-				<div className={styles.walletName}>{name}</div>
+				<Heading size="md" truncate asChild>
+					<div>{name}</div>
+				</Heading>
 			</button>
 		</li>
 	);

package/src/components/icons/BackIcon.tsx

@@ -3,12 +3,14 @@
 
 import type { ComponentProps } from 'react';
 
+// FIXME: Replace this with a 10x10 icon to match the CheckIcon, or alternatively make the CheckIcon bigger
+// Right now, the icons don't align on mobile :(
 export function BackIcon(props: ComponentProps<'svg'>) {
 	return (
 		<svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 			<path
 				d="M7.57 12.262c0 .341.13.629.403.895l5.175 5.059c.204.205.45.307.751.307.609 0 1.101-.485 1.101-1.087 0-.293-.123-.574-.349-.8L10.14 12.27l4.511-4.375A1.13 1.13 0 0 0 15 7.087C15 6.485 14.508 6 13.9 6c-.295 0-.54.103-.752.308l-5.175 5.058c-.28.28-.404.56-.404.896Z"
-				fill="#383F47"
+				fill="currentColor"
 			/>
 		</svg>
 	);

package/src/components/icons/CheckIcon.tsx

@@ -7,7 +7,7 @@ export function CheckIcon(props: ComponentProps<'svg'>) {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
 			<path
-				fill="#007195"
+				fill="currentColor"
 				d="m11.726 5.048-4.73 5.156-1.722-1.879a.72.72 0 0 0-.529-.23.722.722 0 0 0-.525.24.858.858 0 0 0-.22.573.86.86 0 0 0 .211.576l2.255 2.458c.14.153.332.24.53.24.2 0 .391-.087.532-.24l5.261-5.735A.86.86 0 0 0 13 5.63a.858.858 0 0 0-.22-.572.722.722 0 0 0-.525-.24.72.72 0 0 0-.529.23Z"
 			/>
 		</svg>

package/src/components/styling/InjectedThemeStyles.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { styleDataAttributeSelector } from '../../constants/styleDataAttribute.js';
+import { themeVars } from '../../themes/themeContract.js';
+import type { DynamicTheme, Theme, ThemeVars } from '../../themes/themeContract.js';
+
+type InjectedThemeStylesProps = {
+	theme: Theme;
+};
+
+export function InjectedThemeStyles({ theme }: InjectedThemeStylesProps) {
+	const themeStyles = Array.isArray(theme)
+		? getDynamicThemeStyles(theme)
+		: getStaticThemeStyles(theme);
+
+	return (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: themeStyles,
+			}}
+		/>
+	);
+}
+
+function getDynamicThemeStyles(themes: DynamicTheme[]) {
+	return themes
+		.map(({ mediaQuery, selector, variables }) => {
+			const themeStyles = getStaticThemeStyles(variables);
+			const themeStylesWithSelectorPrefix = selector ? `${selector} ${themeStyles}` : themeStyles;
+
+			return mediaQuery
+				? `@media ${mediaQuery}{${themeStylesWithSelectorPrefix}}`
+				: themeStylesWithSelectorPrefix;
+		})
+		.join(' ');
+}
+
+function getStaticThemeStyles(theme: ThemeVars) {
+	return `${styleDataAttributeSelector} {${cssStringFromTheme(theme)}}`;
+}
+
+function cssStringFromTheme(theme: ThemeVars) {
+	return Object.entries(assignInlineVars(themeVars, theme))
+		.map(([key, value]) => `${key}:${value};`)
+		.join('');
+}

package/src/components/styling/StyleMarker.css.ts

@@ -4,9 +4,17 @@
 import { globalStyle } from '@vanilla-extract/css';
 
 import { styleDataAttributeSelector } from '../../constants/styleDataAttribute.js';
+import { themeVars } from '../../themes/themeContract.js';
 
 globalStyle(createScopedSelector('*'), {
 	boxSizing: 'border-box',
+	color: themeVars.colors.body,
+	fontFamily: themeVars.typography.fontFamily,
+	fontSize: themeVars.fontWeights.normal,
+	fontStyle: themeVars.typography.fontStyle,
+	fontWeight: themeVars.fontWeights.normal,
+	lineHeight: themeVars.typography.lineHeight,
+	letterSpacing: themeVars.typography.letterSpacing,
 });
 
 globalStyle(createScopedSelector('button'), {
@@ -16,7 +24,6 @@ globalStyle(createScopedSelector('button'), {
 	fontFamily: 'inherit',
 	lineHeight: 'inherit',
 	letterSpacing: 'inherit',
-	outline: 'none',
 	color: 'inherit',
 	border: 0,
 	padding: 0,

package/src/components/ui/Button.css.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { themeVars } from '../../themes/themeContract.js';
+
+export const buttonVariants = recipe({
+	base: {
+		display: 'inline-flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		fontWeight: themeVars.fontWeights.medium,
+		':disabled': {
+			opacity: 0.5,
+		},
+	},
+	variants: {
+		variant: {
+			primary: {
+				backgroundColor: themeVars.backgroundColors.primaryButton,
+				color: themeVars.colors.primaryButton,
+				boxShadow: themeVars.shadows.primaryButton,
+				':hover': {
+					backgroundColor: themeVars.backgroundColors.primaryButtonHover,
+				},
+			},
+			outline: {
+				borderWidth: 1,
+				borderStyle: 'solid',
+				borderColor: themeVars.borderColors.outlineButton,
+				color: themeVars.colors.outlineButton,
+				':hover': {
+					backgroundColor: themeVars.backgroundColors.outlineButtonHover,
+				},
+			},
+		},
+		size: {
+			md: { borderRadius: themeVars.radii.medium, padding: '8px 16px' },
+			lg: { borderRadius: themeVars.radii.large, padding: '16px 24px ' },
+		},
+	},
+	defaultVariants: {
+		variant: 'primary',
+		size: 'md',
+	},
+});
+
+export type ButtonVariants = RecipeVariants<typeof buttonVariants>;