Update design system v2.1.11

examples/components/package.json

@@ -8,7 +8,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "@0xsequence/design-system": "2.1.6",
+    "@0xsequence/design-system": "2.1.11",
     "@0xsequence/network": "*",
     "wagmi": "^2.15.0"
   },

examples/components/src/Header.tsx

@@ -108,7 +108,7 @@ const NetworkSelect = () => {
         >
           <div className="flex items-center gap-2">
             <NetworkImage chainId={chainId} size="sm" />
-            <Text display={{ sm: 'none', lg: 'block' }} variant="normal" fontWeight="bold" color="primary">
+            <Text className="hidden lg:block" variant="normal" fontWeight="bold" color="primary">
               {chains.find(chain => chain.id === chainId)?.name || chainId}
             </Text>
           </div>

examples/next/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@0xsequence/checkout": "workspace:*",
     "@0xsequence/connect": "workspace:*",
-    "@0xsequence/design-system": "2.1.6",
+    "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
     "@0xsequence/network": "^2.3.10",
     "@0xsequence/waas": "^2.3.10",

examples/react/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@0xsequence/checkout": "workspace:*",
     "@0xsequence/connect": "workspace:*",
-    "@0xsequence/design-system": "2.1.6",
+    "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
     "@0xsequence/immutable-connector": "workspace:*",
     "@0xsequence/network": "^2.3.10",

examples/react/src/components/Connected.tsx

@@ -702,7 +702,8 @@ export const Connected = () => {
                           <Text variant="xsmall">{formatUnits(BigInt(option.value), option.token.decimals || 0)}</Text>
                         </div>
                         <div className="flex flex-row">
-                          <Text>Wallet balance for {option.token.name}: </Text> <Text>{option.balanceFormatted}</Text>
+                          <Text>Wallet balance for {option.token.name}: </Text>{' '}
+                          <Text>{'balanceFormatted' in option ? option.balanceFormatted : null}</Text>
                         </div>
                       </div>
                     ),
@@ -718,7 +719,7 @@ export const Connected = () => {
                     )
 
                     if (selected?.token.contractAddress !== undefined) {
-                      if (!selected.hasEnoughBalanceForFee) {
+                      if (!('hasEnoughBalanceForFee' in selected) || !selected.hasEnoughBalanceForFee) {
                         setFeeOptionAlert({
                           title: 'Insufficient balance',
                           description: `You do not have enough balance to pay the fee with ${selected.token.name}, please make sure you have enough balance in your wallet for the selected fee option.`,

examples/react/src/components/CustomCheckout/index.tsx

@@ -76,7 +76,7 @@ export const CustomCheckout = () => {
     }
 
     if (orderSummary.error) {
-      return <Text color="error">Error loading order summary</Text>
+      return <Text color="negative">Error loading order summary</Text>
     }
 
     return (
@@ -128,7 +128,7 @@ export const CustomCheckout = () => {
     }
 
     if (creditCardPayment.error) {
-      return <Text color="error">Error loading credit card payment</Text>
+      return <Text color="negative">Error loading credit card payment</Text>
     }
 
     const CreditCardIframe = creditCardPayment.data?.CreditCardIframe
@@ -152,7 +152,7 @@ export const CustomCheckout = () => {
     }
 
     if (cryptoPayment.cryptoOptions.error) {
-      return <Text color="error">Error loading crypto payment</Text>
+      return <Text color="negative">Error loading crypto payment</Text>
     }
 
     return (
@@ -183,15 +183,15 @@ export const CustomCheckout = () => {
   return (
     <div className="flex pt-16 pb-8 px-6 gap-2 flex-col">
       <Text color="primary">The following data is generated by the useCheckoutUI hook</Text>
-      <Text fontSize="large" fontWeight="bold" color="primary">
+      <Text variant="large" fontWeight="bold" color="primary">
         Order Summary section
       </Text>
       <OrderSummary />
-      <Text fontSize="large" fontWeight="bold" color="primary">
+      <Text variant="large" fontWeight="bold" color="primary">
         Crypto Payment section
       </Text>
       <CryptoPayment />
-      <Text fontSize="large" fontWeight="bold" color="primary">
+      <Text variant="large" fontWeight="bold" color="primary">
         Credit Card Payment section
       </Text>
       <CreditCardPayment />

examples/react/src/components/ImmutableCallback.tsx

@@ -24,7 +24,7 @@ export function ImmutableCallback() {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen">
       <Spinner size="lg" />
-      <Text marginTop="4">Processing Immutable login...</Text>
+      <Text className="mt-4">Processing Immutable login...</Text>
     </div>
   )
 }

packages/checkout/package.json

@@ -30,7 +30,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/design-system": "2.1.6",
+    "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
     "@0xsequence/marketplace": "^2.3.10",
     "motion": "^12.9.2",

packages/connect/package.json

@@ -42,7 +42,7 @@
     "@0xsequence/api": "2.3.11",
     "@0xsequence/auth": "^2.3.10",
     "@0xsequence/core": "^2.3.10",
-    "@0xsequence/design-system": "2.1.6",
+    "@0xsequence/design-system": "2.1.11",
     "@0xsequence/ethauth": "^1.0.0",
     "@0xsequence/hooks": "workspace:*",
     "@0xsequence/indexer": "^2.3.10",

packages/connect/src/styles.ts

@@ -454,6 +454,9 @@ export const styles = String.raw`
   .max-h-\[200px\] {
     max-height: 200px;
   }
+  .max-h-\[360px\] {
+    max-height: 360px;
+  }
   .max-h-\[calc\(100dvh-80px\)\] {
     max-height: calc(100dvh - 80px);
   }
@@ -559,6 +562,9 @@ export const styles = String.raw`
   .min-w-6 {
     min-width: calc(var(--spacing) * 6);
   }
+  .min-w-\[var\(--radix-select-trigger-width\)\] {
+    min-width: var(--radix-select-trigger-width);
+  }
   .min-w-full {
     min-width: 100%;
   }
@@ -578,6 +584,9 @@ export const styles = String.raw`
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-skeleton {
+    animation: skeleton 1s ease infinite;
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -777,6 +786,9 @@ export const styles = String.raw`
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-border-error {
+    border-color: var(--seq-color-border-error);
+  }
   .border-border-focus {
     border-color: var(--seq-color-border-focus);
   }
@@ -1222,6 +1234,9 @@ export const styles = String.raw`
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-border-error {
+    --tw-ring-color: var(--seq-color-border-error);
+  }
   .ring-border-focus {
     --tw-ring-color: var(--seq-color-border-focus);
   }
@@ -1610,6 +1625,11 @@ export const styles = String.raw`
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-within\:ring-border-error {
+    &:focus-within {
+      --tw-ring-color: var(--seq-color-border-error);
+    }
+  }
   .focus-within\:ring-border-focus {
     &:focus-within {
       --tw-ring-color: var(--seq-color-border-focus);
@@ -1665,6 +1685,11 @@ export const styles = String.raw`
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-border-error {
+    &:focus {
+      --tw-ring-color: var(--seq-color-border-error);
+    }
+  }
   .focus\:ring-border-focus {
     &:focus {
       --tw-ring-color: var(--seq-color-border-focus);
@@ -1792,6 +1817,11 @@ export const styles = String.raw`
       transition-timing-function: var(--ease-out);
     }
   }
+  .data-\[swipe\=end\]\:animate-swipe-out {
+    &[data-swipe="end"] {
+      animation: swipe-out 200ms ease-out;
+    }
+  }
   .data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\] {
     &[data-swipe="move"] {
       --tw-translate-x: var(--radix-toast-swipe-move-x);
@@ -1898,6 +1928,7 @@ export const styles = String.raw`
   --seq-color-background-raised: rgba(54, 54, 54, 0.7);
   --seq-color-border-normal: rgba(255, 255, 255, 0.25);
   --seq-color-border-focus: rgba(255, 255, 255, 0.5);
+  --seq-color-border-error: rgba(255, 69, 0, 1);
   --seq-color-button-glass: rgba(255, 255, 255, 0.15);
   --seq-color-button-emphasis: rgba(0, 0, 0, 0.5);
   --seq-color-button-inverse: rgba(255, 255, 255, 0.8);
@@ -1945,6 +1976,7 @@ export const styles = String.raw`
   --seq-color-background-raised: rgba(192, 192, 192, 0.7);
   --seq-color-border-normal: rgba(0, 0, 0, 0.25);
   --seq-color-border-focus: rgba(0, 0, 0, 0.5);
+  --seq-color-border-error: rgba(255, 69, 0, 1);
   --seq-color-button-glass: rgba(0, 0, 0, 0.15);
   --seq-color-button-emphasis: rgba(255, 255, 255, 0.5);
   --seq-color-button-inverse: rgba(0, 0, 0, 0.8);
@@ -2243,6 +2275,25 @@ export const styles = String.raw`
     transform: rotate(360deg);
   }
 }
+@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%);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {

packages/wallet-widget/package.json

@@ -30,7 +30,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/design-system": "2.1.6",
+    "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
     "@radix-ui/react-popover": "^1.1.11",
     "dayjs": "^1.11.13",