0xtrails 0.6.0 → 0.6.2

package/src/widget/hooks/useSendForm.ts

@@ -11,7 +11,11 @@ import {
   zeroAddress,
 } from "viem"
 import { useAccount } from "wagmi"
-import { getChainInfo, useSupportedChains } from "../../chains.js"
+import {
+  getChainInfo,
+  useSupportedChains,
+  useChainRpcClient,
+} from "../../chains.js"
 import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
 import {
   prepareSend,
@@ -263,14 +267,26 @@ export function useSendForm({
     chainId: selectedDestinationChain?.id,
   })
 
+  // Get RPC clients for known chainIds using hooks (reads from TrailsProvider context)
+  const destinationChainPublicClient = useChainRpcClient(
+    selectedDestinationChain?.id,
+  )
+  const originChainPublicClient = useChainRpcClient(selectedToken?.chainId)
+
   // Check if recipient is a contract address
   useEffect(() => {
     const checkRecipientContract = async () => {
-      if (recipient && isAddress(recipient) && selectedDestinationChain?.id) {
+      if (
+        recipient &&
+        isAddress(recipient) &&
+        selectedDestinationChain?.id &&
+        destinationChainPublicClient
+      ) {
         try {
           const isContract = await getIsContract(
             recipient as `0x${string}`,
             selectedDestinationChain.id,
+            destinationChainPublicClient,
           )
           logger.console.log("[trails-sdk] isRecipientContract:", isContract)
           setIsRecipientContract(isContract)
@@ -287,16 +303,21 @@ export function useSendForm({
     }
 
     checkRecipientContract()
-  }, [recipient, selectedDestinationChain?.id])
+  }, [recipient, selectedDestinationChain?.id, destinationChainPublicClient])
 
   // Check if sender is a contract address on origin chain
   useEffect(() => {
     const checkSenderContractOnOrigin = async () => {
-      if (account?.address && selectedToken?.chainId) {
+      if (
+        account?.address &&
+        selectedToken?.chainId &&
+        originChainPublicClient
+      ) {
         try {
           const isContract = await getIsContract(
             account.address as `0x${string}`,
             selectedToken.chainId,
+            originChainPublicClient,
           )
           logger.console.log(
             "[trails-sdk] isSenderContractOnOrigin:",
@@ -316,16 +337,21 @@ export function useSendForm({
     }
 
     checkSenderContractOnOrigin()
-  }, [account?.address, selectedToken?.chainId])
+  }, [account?.address, selectedToken?.chainId, originChainPublicClient])
 
   // Check if sender is a contract address on destination chain
   useEffect(() => {
     const checkSenderContractOnDestination = async () => {
-      if (account?.address && selectedDestinationChain?.id) {
+      if (
+        account?.address &&
+        selectedDestinationChain?.id &&
+        destinationChainPublicClient
+      ) {
         try {
           const isContract = await getIsContract(
             account.address as `0x${string}`,
             selectedDestinationChain.id,
+            destinationChainPublicClient,
           )
           logger.console.log(
             "[trails-sdk] isSenderContractOnDestination:",
@@ -345,7 +371,11 @@ export function useSendForm({
     }
 
     checkSenderContractOnDestination()
-  }, [account?.address, selectedDestinationChain?.id])
+  }, [
+    account?.address,
+    selectedDestinationChain?.id,
+    destinationChainPublicClient,
+  ])
 
   const isCustomToken = useMemo(() => toToken?.startsWith("0x"), [toToken])
 
@@ -886,6 +916,8 @@ export function useSendForm({
         walletId,
         sequenceIndexerUrl,
         sequenceProjectAccessKey: trailsApiKey,
+        originPublicClient: originChainPublicClient ?? undefined,
+        destinationPublicClient: destinationChainPublicClient ?? undefined,
       }
 
       logger.console.log(
@@ -975,14 +1007,18 @@ export function useSendForm({
     selectedFeeOption,
     walletId,
     buildQuoteInputsFingerprint,
+    originChainPublicClient,
+    destinationChainPublicClient,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
   // biome-ignore lint/correctness/useExhaustiveDependencies: getQuote is intentionally excluded to prevent infinite loop
   useEffect(() => {
     // Only trigger if we have the essential inputs
+    // Block empty string or exactly "0"
     if (
       !amount ||
+      amount === "0" ||
       !destinationTokenAddress ||
       !isValidRecipient ||
       !selectedDestToken?.symbol ||

package/src/widget/index.css

@@ -1,11 +1,9 @@
 @config "../../tailwind.config.ts";
-@import "@0xsequence/design-system/preset";
 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
 *:focus {
   outline: none;
 }
@@ -13,7 +11,10 @@
 /* Trails Widget Theme Variables - Easy to customize */
 :root {
   /* Font Family - Customizable font for the entire widget */
-  --trails-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --trails-font-family: ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
 
   /* Border Radius - Customizable border radius for the widget */
   --trails-border-radius-widget: 32px; /* Main widget container border radius */
@@ -30,20 +31,36 @@
 
   /* Primary Colors - These apply to both themes */
   --trails-primary: rgb(21 93 252); /* #155DFC - Change this to customize */
-  --trails-primary-hover: rgb(17 75 202); /* Darker shade of #155DFC - Change this for hover state */
+  --trails-primary-hover: rgb(
+    17 75 202
+  ); /* Darker shade of #155DFC - Change this for hover state */
   --trails-primary-disabled: rgb(212 212 216); /* #D4D4D8 - Disabled state */
-  --trails-primary-disabled-text: rgb(107 114 128); /* gray-500 - Disabled text */
+  --trails-primary-disabled-text: rgb(
+    107 114 128
+  ); /* gray-500 - Disabled text */
 
   /* Modal Button Colors - Customizable modal trigger button */
-  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* Defaults to primary color */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Defaults to primary hover */
+  --trails-modal-button-bg: var(
+    --trails-primary,
+    rgb(21 93 252)
+  ); /* Defaults to primary color */
+  --trails-modal-button-hover-bg: var(
+    --trails-primary-hover,
+    rgb(17 75 202)
+  ); /* Defaults to primary hover */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow */
 
   /* Percentage Button Colors - Customizable percentage buttons */
-  --trails-percentage-button-bg: rgb(228 228 231); /* #E4E4E7 - Light gray background */
-  --trails-percentage-button-text: rgb(113 113 123); /* #71717B - Dark gray text */
-  --trails-percentage-button-hover-bg: rgb(212 212 216); /* #D4D4D8 - Slightly darker on hover */
+  --trails-percentage-button-bg: rgb(
+    228 228 231
+  ); /* #E4E4E7 - Light gray background */
+  --trails-percentage-button-text: rgb(
+    113 113 123
+  ); /* #71717B - Dark gray text */
+  --trails-percentage-button-hover-bg: rgb(
+    212 212 216
+  ); /* #D4D4D8 - Slightly darker on hover */
 }
 
 /* Utility Classes that use CSS Variables */
@@ -127,8 +144,6 @@
   background-color: var(--trails-percentage-button-hover-bg);
 }
 
-
-
 /* Font Family Utility Class */
 .trails-font {
   font-family: var(--trails-font-family);
@@ -197,8 +212,14 @@
 }
 
 .trails-dropdown:focus {
-  border-color: var(--trails-dropdown-focus-border, var(--trails-dropdown-border));
-  --tw-ring-color: var(--trails-dropdown-focus-border, var(--trails-dropdown-border));
+  border-color: var(
+    --trails-dropdown-focus-border,
+    var(--trails-dropdown-border)
+  );
+  --tw-ring-color: var(
+    --trails-dropdown-focus-border,
+    var(--trails-dropdown-border)
+  );
 }
 
 .trails-dropdown-item {
@@ -242,7 +263,9 @@
   --trails-bg-primary: rgb(255 255 255); /* white */
   --trails-bg-secondary: rgb(244 244 245); /* #F4F4F5 */
   --trails-bg-secondary-hover: rgb(228 228 231); /* #E4E4E7 */
-  --trails-bg-secondary-focus-border: rgb(244 244 245); /* #F4F4F5 - same as secondary bg */
+  --trails-bg-secondary-focus-border: rgb(
+    244 244 245
+  ); /* #F4F4F5 - same as secondary bg */
   --trails-bg-tertiary: rgb(243 244 246); /* gray-100 */
   --trails-bg-card: rgb(255 255 255); /* white */
   --trails-bg-overlay: rgb(255 255 255); /* white */
@@ -277,11 +300,19 @@
   --trails-dropdown-hover-bg: rgb(249 250 251); /* gray-50 */
   --trails-dropdown-selected-bg: rgb(243 244 246); /* gray-100 */
   --trails-dropdown-selected-text: rgb(17 24 39); /* gray-900 */
-  --trails-dropdown-focus-border: rgb(21 93 252); /* #155DFC - matches input focus border */
+  --trails-dropdown-focus-border: rgb(
+    21 93 252
+  ); /* #155DFC - matches input focus border */
 
   /* Modal Button Colors - Light Mode */
-  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* #155DFC for light mode */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for light mode */
+  --trails-modal-button-bg: var(
+    --trails-primary,
+    rgb(21 93 252)
+  ); /* #155DFC for light mode */
+  --trails-modal-button-hover-bg: var(
+    --trails-primary-hover,
+    rgb(17 75 202)
+  ); /* Darker shade of #155DFC for light mode */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow for light mode */
 
@@ -319,13 +350,18 @@
   --trails-error-border: rgb(254 202 202); /* red-200 */
 
   /* Shadow */
-  --trails-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --trails-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
   /* Percentage Button Colors - Light Mode */
-  --trails-percentage-button-bg: rgb(228 228 231); /* #E4E4E7 - Light gray background */
-  --trails-percentage-button-text: rgb(113 113 123); /* #71717B - Dark gray text */
-  --trails-percentage-button-hover-bg: rgb(212 212 216); /* #D4D4D8 - Slightly darker on hover */
+  --trails-percentage-button-bg: rgb(
+    228 228 231
+  ); /* #E4E4E7 - Light gray background */
+  --trails-percentage-button-text: rgb(
+    113 113 123
+  ); /* #71717B - Dark gray text */
+  --trails-percentage-button-hover-bg: rgb(
+    212 212 216
+  ); /* #D4D4D8 - Slightly darker on hover */
 }
 
 /* Dark Mode Theme Variables */
@@ -334,7 +370,9 @@
   --trails-bg-primary: rgb(17 24 39); /* gray-900 */
   --trails-bg-secondary: rgb(31 41 55); /* gray-800 */
   --trails-bg-secondary-hover: rgb(55 65 81); /* gray-700 */
-  --trails-bg-secondary-focus-border: rgb(31 41 55); /* gray-800 - same as secondary bg */
+  --trails-bg-secondary-focus-border: rgb(
+    31 41 55
+  ); /* gray-800 - same as secondary bg */
   --trails-bg-tertiary: rgb(55 65 81); /* gray-700 */
   --trails-bg-card: rgb(31 41 55); /* gray-800 */
   --trails-bg-overlay: rgb(17 24 39); /* gray-900 */
@@ -369,20 +407,30 @@
   --trails-dropdown-hover-bg: rgb(55 65 81); /* gray-700 */
   --trails-dropdown-selected-bg: rgb(55 65 81); /* gray-700 */
   --trails-dropdown-selected-text: rgb(255 255 255); /* white */
-  --trails-dropdown-focus-border: rgb(21 93 252); /* #155DFC - matches input focus border */
+  --trails-dropdown-focus-border: rgb(
+    21 93 252
+  ); /* #155DFC - matches input focus border */
 
   /* Modal Button Colors - Dark Mode */
-  --trails-modal-button-bg: var(--trails-primary, rgb(21 93 252)); /* #155DFC for dark mode */
-  --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for dark mode */
+  --trails-modal-button-bg: var(
+    --trails-primary,
+    rgb(21 93 252)
+  ); /* #155DFC for dark mode */
+  --trails-modal-button-hover-bg: var(
+    --trails-primary-hover,
+    rgb(17 75 202)
+  ); /* Darker shade of #155DFC for dark mode */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1); /* subtle shadow for dark mode */
 
-    /* Token List Colors */
+  /* Token List Colors */
   --trails-list-bg: rgb(31 41 55); /* gray-800 background for token list */
   --trails-list-border: rgb(55 65 81); /* gray-700 border - good balance */
   --trails-list-hover-bg: rgb(55 65 81); /* gray-700 hover */
   --trails-list-item-bg: transparent; /* transparent background for list items */
-  --trails-list-item-selected-bg: rgb(30 58 138); /* blue-800 selected for dark mode */
+  --trails-list-item-selected-bg: rgb(
+    30 58 138
+  ); /* blue-800 selected for dark mode */
 
   /* Widget Border - Customizable widget border */
   --trails-widget-border: none; /* Default widget border */
@@ -411,13 +459,18 @@
   --trails-error-border: rgb(239 68 68 / 0.3); /* red-500 with opacity */
 
   /* Shadow */
-  --trails-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+  --trails-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
 
   /* Percentage Button Colors - Dark Mode */
-  --trails-percentage-button-bg: rgb(55 65 81); /* gray-700 - Dark gray background */
-  --trails-percentage-button-text: rgb(209 213 219); /* gray-300 - Light gray text */
-  --trails-percentage-button-hover-bg: rgb(75 85 99); /* gray-600 - Slightly lighter on hover */
+  --trails-percentage-button-bg: rgb(
+    55 65 81
+  ); /* gray-700 - Dark gray background */
+  --trails-percentage-button-text: rgb(
+    209 213 219
+  ); /* gray-300 - Light gray text */
+  --trails-percentage-button-hover-bg: rgb(
+    75 85 99
+  ); /* gray-600 - Slightly lighter on hover */
 }
 
 /* Custom Scrollbar Styles */
@@ -489,7 +542,10 @@
 
 /* Dark mode primary button */
 .dark .bg-blue-500 {
-  background-color: var(--trails-primary, rgb(21 93 252)); /* #155DFC for dark mode */
+  background-color: var(
+    --trails-primary,
+    rgb(21 93 252)
+  ); /* #155DFC for dark mode */
 }
 
 /* Light mode hover */
@@ -499,7 +555,10 @@
 
 /* Dark mode hover */
 .dark .hover\:bg-blue-600:hover {
-  background-color: var(--trails-primary-hover, rgb(17 75 202)); /* Darker shade of #155DFC for dark mode */
+  background-color: var(
+    --trails-primary-hover,
+    rgb(17 75 202)
+  ); /* Darker shade of #155DFC for dark mode */
 }
 
 /* Light mode disabled background */
@@ -542,7 +601,10 @@
 
 /* Modal Button Utility Classes */
 .trails-modal-button {
-  background-color: var(--trails-modal-button-bg, var(--trails-primary, rgb(59 130 246)));
+  background-color: var(
+    --trails-modal-button-bg,
+    var(--trails-primary, rgb(59 130 246))
+  );
   color: var(--trails-modal-button-text, rgb(255 255 255));
   box-shadow: var(--trails-modal-button-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
   transition: all 0.2s ease-in-out;
@@ -550,5 +612,8 @@
 }
 
 .trails-modal-button:hover {
-  background-color: var(--trails-modal-button-hover-bg, var(--trails-primary-hover, rgb(37 99 235)));
+  background-color: var(
+    --trails-modal-button-hover-bg,
+    var(--trails-primary-hover, rgb(37 99 235))
+  );
 }

package/src/widget/widget.tsx

@@ -1,4 +1,3 @@
-import "@0xsequence/design-system/preset"
 import { AaveClient, AaveProvider } from "@aave/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AnimatePresence, motion } from "motion/react"
@@ -16,7 +15,7 @@ import React, {
 } from "react"
 import { createPortal } from "react-dom"
 import type { Chain, WalletClient } from "viem"
-import { createWalletClient, custom, http, isAddress } from "viem"
+import { createWalletClient, custom, defineChain, http, isAddress } from "viem"
 import type { Connector } from "wagmi"
 import {
   createConfig,
@@ -88,6 +87,7 @@ import type { MeshConnectProps } from "./components/MeshConnectIframe.js"
 import Modal from "./components/Modal.js"
 import { Pay } from "./components/Pay.js"
 import QRCodeDeposit from "./components/QRCodeDeposit.js"
+import QRCodeOptions from "./components/QRCodeOptions.js"
 import QRCodeWalletSelect from "./components/QRCodeWalletSelect.js"
 import Receipt from "./components/Receipt.js"
 import { Receive } from "./components/Receive.js"
@@ -306,9 +306,34 @@ const useWalletManager = (
         const activeProvider = await connector.getProvider()
 
         if (activeProvider && address && chainId) {
-          const chain = getChainInfo(chainId)
+          let chain = getChainInfo(chainId)
+
+          // If chain is not supported, create a minimal chain object.
+          // This allows walletClient to be created even on unsupported networks.
+          // The Problem:
+          // When Metamask is on a network not supported by the wagmi config, useWalletManager
+          // in widget.tsx calls getChainInfo(chainId), which returns null for unsupported chains.
+          // The function then returns early without creating a walletClient, so walletClient?.account is undefined,
+          // causing the "Connect your wallet" message in the button.
           if (!chain) {
-            return
+            logger.console.warn(
+              `[trails-sdk] Chain ${chainId} not found in supported chains, creating minimal chain object`,
+            )
+            // Create a minimal chain definition for unsupported chains
+            chain = defineChain({
+              id: chainId,
+              name: `Chain ${chainId}`,
+              nativeCurrency: {
+                name: "Ether",
+                symbol: "ETH",
+                decimals: 18,
+              },
+              rpcUrls: {
+                default: {
+                  http: [],
+                },
+              },
+            }) as Chain
           }
 
           const client = createWalletClient({
@@ -969,6 +994,13 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
         address,
       )
 
+      // Clear fee option preference from localStorage when wallet changes
+      try {
+        localStorage.removeItem("trails-fee-option-preference")
+      } catch {
+        // Ignore localStorage errors (e.g., in private browsing mode)
+      }
+
       // Check if we're on screens that should reset when account changes
       const screensToReset = [
         "send-form",
@@ -1334,7 +1366,8 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
     setPrepareSendQuote(null)
     setTotalCompletionSeconds(null)
     clearHistory()
-    // Reset selected fee token for new checkout
+    // Clear selected fee option, but localStorage preference is preserved
+    // Auto-selection will use the preference when fee options render next time
     clearSelectedFeeOption()
   }, [
     setSelectedFundMethod,
@@ -1642,6 +1675,16 @@ const WidgetContent = forwardRef<TrailsWidgetRef>((_, ref) => {
               setCurrentScreen("home")
             }}
             onSelectQrCode={() => {
+              setCurrentScreen("qrcode-options")
+            }}
+          />
+        )
+      case "qrcode-options":
+        return (
+          <QRCodeOptions
+            onBack={handleBack}
+            onSelectWalletConnect={handleSelectWalletConnect}
+            onSelectQRCode={() => {
               setSelectedFundMethod("qr-code")
               setCurrentScreen("home")
             }}

package/dist/0xtrails.css

@@ -1 +0,0 @@
-@source "./";:root,[data-theme=dark]{--seq-color-positive: #1fc266;--seq-color-negative: #c2501f;--seq-color-info: #0076cc;--seq-color-warning: #f4b03e;--seq-color-primary: rgba(255, 255, 255, 1);--seq-color-secondary: rgba(255, 255, 255, .8);--seq-color-muted: rgba(255, 255, 255, .5);--seq-color-inverse: rgba(0, 0, 0, 1);--seq-color-background-primary: rgba(0, 0, 0, 1);--seq-color-background-secondary: rgba(255, 255, 255, .1);--seq-color-background-contrast: rgba(0, 0, 0, .5);--seq-color-background-muted: rgba(255, 255, 255, .05);--seq-color-background-control: rgba(255, 255, 255, .25);--seq-color-background-inverse: rgba(255, 255, 255, 1);--seq-color-background-backdrop: rgba(34, 34, 34, .9);--seq-color-background-overlay: rgba(0, 0, 0, .7);--seq-color-background-raised: rgba(54, 54, 54, .7);--seq-color-border-normal: rgba(255, 255, 255, .25);--seq-color-border-focus: rgba(255, 255, 255, .5);--seq-color-border-error: rgba(255, 69, 0, 1);--seq-color-button-glass: rgba(255, 255, 255, .15);--seq-color-button-emphasis: rgba(0, 0, 0, .5);--seq-color-button-inverse: rgba(255, 255, 255, .8);--seq-color-gradient-backdrop: linear-gradient( 243.18deg, rgba(86, 52, 189, .85) 0%, rgba(49, 41, 223, .85) 63.54%, rgba(7, 98, 149, .85) 100% );--seq-color-gradient-primary: linear-gradient( 89.69deg, #4411e1 .27%, #7537f9 99.73% );--seq-color-gradient-secondary: linear-gradient( 32.51deg, #951990 -15.23%, #3a35b1 48.55%, #20a8b0 100% );--seq-color-gradient-skeleton: linear-gradient( -45deg, transparent, var(--seq-color-background-secondary), transparent )}[data-theme=light]{--seq-color-positive: #1fc266;--seq-color-negative: #c2501f;--seq-color-info: #0076cc;--seq-color-warning: #f4b03e;--seq-color-primary: rgba(0, 0, 0, 1);--seq-color-secondary: rgba(0, 0, 0, .8);--seq-color-muted: rgba(0, 0, 0, .5);--seq-color-inverse: rgba(255, 255, 255, 1);--seq-color-background-primary: rgba(244, 244, 244, 1);--seq-color-background-secondary: rgba(0, 0, 0, .1);--seq-color-background-contrast: rgba(244, 244, 244, .5);--seq-color-background-muted: rgba(0, 0, 0, .05);--seq-color-background-control: rgba(0, 0, 0, .25);--seq-color-background-inverse: rgba(0, 0, 0, 1);--seq-color-background-backdrop: rgba(221, 221, 221, .9);--seq-color-background-overlay: rgba(244, 244, 244, .7);--seq-color-background-raised: rgba(192, 192, 192, .7);--seq-color-border-normal: rgba(0, 0, 0, .25);--seq-color-border-focus: rgba(0, 0, 0, .5);--seq-color-border-error: rgba(255, 69, 0, 1);--seq-color-button-glass: rgba(0, 0, 0, .15);--seq-color-button-emphasis: rgba(255, 255, 255, .5);--seq-color-button-inverse: rgba(0, 0, 0, .8);--seq-color-gradient-backdrop: linear-gradient( 243.18deg, rgba(86, 52, 189, .85) 0%, rgba(49, 41, 223, .85) 63.54%, rgba(7, 98, 149, .85) 100% );--seq-color-gradient-primary: linear-gradient( 89.69deg, #4411e1 .27%, #7537f9 99.73% );--seq-color-gradient-secondary: linear-gradient( 32.51deg, #951990 -15.23%, #3a35b1 48.55%, #20a8b0 100% );--seq-color-gradient-skeleton: linear-gradient( -45deg, transparent, var(--seq-color-background-secondary), transparent )}@theme inline{ --font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: "Roboto", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-primary: var(--seq-color-primary); --color-secondary: var(--seq-color-secondary); --color-muted: var(--seq-color-muted); --color-inverse: var(--seq-color-inverse); --color-positive: var(--seq-color-positive); --color-negative: var(--seq-color-negative); --color-info: var(--seq-color-info); --color-warning: var(--seq-color-warning); --color-background-primary: var(--seq-color-background-primary); --color-background-secondary: var(--seq-color-background-secondary); --color-background-contrast: var(--seq-color-background-contrast); --color-background-muted: var(--seq-color-background-muted); --color-background-control: var(--seq-color-background-control); --color-background-inverse: var(--seq-color-background-inverse); --color-background-backdrop: var(--seq-color-background-backdrop); --color-background-overlay: var(--seq-color-background-overlay); --color-background-raised: var(--seq-color-background-raised); --color-border-normal: var(--seq-color-border-normal); --color-border-focus: var(--seq-color-border-focus); --color-border-error: var(--seq-color-border-error); --color-button-glass: var(--seq-color-button-glass); --color-button-emphasis: var(--seq-color-button-emphasis); --color-button-inverse: var(--seq-color-button-inverse); --background-image-gradient-backdrop: var(--seq-color-gradient-backdrop); --background-image-gradient-primary: var(--seq-color-gradient-primary); --background-image-gradient-secondary: var(--seq-color-gradient-secondary); --background-image-gradient-skeleton: var(--seq-color-gradient-skeleton); --animate-skeleton: skeleton 1s ease infinite; --animate-swipe-out: swipe-out .2s ease-out; @keyframes skeleton { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes swipe-out { from { transform: translateX(var(--radix-toast-swipe-end-x)); } to { transform: translateX(100%); } } }