@zerodev/wallet-react-ui 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/wallet-react-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React wallet UI kit for ZeroDev (auth + signing flows)",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "web3"
   ],
   "dependencies": {
-    "@zerodev/react-ui": "0.0.3"
+    "@zerodev/react-ui": "0.0.4"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
@@ -67,14 +67,15 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^4.7.0",
-    "postcss": "^8.5.8",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "postcss": "^8.5.16",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "storybook": "^10.3.3",
     "tailwindcss": "^4.2.2",
     "typescript": "5.9.3",
-    "vite": "^6.4.1",
-    "vite-plugin-node-polyfills": "^0.25.0"
+    "vite": "^6.4.3",
+    "vite-plugin-node-polyfills": "^0.25.0",
+    "vocs": "^1.4.1"
   },
   "scripts": {
     "build": "pnpm run clean && pnpm run build:css && pnpm run build:js && pnpm run build:types",

package/src/auth/index.tsx

@@ -1,8 +1,7 @@
+import { Screen, TopNav } from '@zerodev/react-ui'
 import { type ReactNode, useEffect } from 'react'
 import { useStore } from 'zustand'
-import { Screen } from '../shared/components/Screen'
 import { StatusScreen } from '../shared/components/StatusScreen'
-import { TopNav } from '../shared/components/TopNav'
 import { useKitStore } from '../shared/hooks/useKitStore'
 import { useAuth } from './hooks/useAuth'
 import { EmailVerification } from './pages/EmailVerification'
@@ -95,8 +94,8 @@ export function AuthFlow({
       contentClassName={step === 'sign-up' ? 'zd:px-0' : undefined}
       topNav={
         <TopNav
-          {...(goBack !== null && { onBack: goBack })}
-          onClose={handleClose}
+          {...(goBack !== null && { onLeftButtonClick: goBack })}
+          onRightButtonClick={handleClose}
           {...(title && { title })}
           {...(step === 'sign-up' && {
             ...(logo && { logo }),

package/src/auth/pages/EmailVerification.tsx

@@ -1,7 +1,6 @@
-import { Text } from '@zerodev/react-ui'
+import { PoweredBy, Text } from '@zerodev/react-ui'
 import { useSendMagicLink } from '@zerodev/wallet-react'
 import { useEffect, useState } from 'react'
-import { PoweredBy } from '../../shared/components/PoweredBy'
 import { StatusScreen } from '../../shared/components/StatusScreen'
 import { useAuth } from '../hooks/useAuth'
 

package/src/auth/pages/ErrorScreen.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@zerodev/react-ui'
-import { PoweredBy } from '../../shared/components/PoweredBy'
+import { Button, PoweredBy } from '@zerodev/react-ui'
 import { StatusScreen } from '../../shared/components/StatusScreen'
 import { useAuth } from '../hooks/useAuth'
 import { stripMagicLinkCodeFromUrl } from '../utils/url'

package/src/auth/pages/OtpInput.tsx

@@ -1,7 +1,6 @@
-import { Button, Text } from '@zerodev/react-ui'
+import { Button, PoweredBy, Text } from '@zerodev/react-ui'
 import { useSendOTP, useVerifyOTP } from '@zerodev/wallet-react'
 import { useEffect, useState } from 'react'
-import { PoweredBy } from '../../shared/components/PoweredBy'
 import { CodeInput } from '../components/CodeInput'
 import { useAuth } from '../hooks/useAuth'
 

package/src/auth/pages/SignUp.tsx

@@ -1,4 +1,12 @@
-import { Button, Icon, Input, ListItem, Text } from '@zerodev/react-ui'
+import {
+  Button,
+  Icon,
+  Input,
+  ListItem,
+  ListItemChevron,
+  ListItemIcon,
+  Text,
+} from '@zerodev/react-ui'
 import {
   useAuthenticateOAuth,
   useLoginPasskey,
@@ -235,9 +243,9 @@ export function SignUp() {
           <div className="zd:px-4 zd:flex zd:flex-col zd:gap-2">
             {enabledMethods.includes('google') && (
               <ListItem
-                iconName="google"
+                icon={<ListItemIcon name="google" />}
                 title="Google"
-                chevron
+                trailing={<ListItemChevron />}
                 className="zd:rounded-3xl"
                 disabled={anyPending}
                 onClick={handleGoogleAuth}

package/src/auth/pages/Verifying.tsx

@@ -1,7 +1,6 @@
-import { Button } from '@zerodev/react-ui'
+import { Button, PoweredBy } from '@zerodev/react-ui'
 import { useVerifyMagicLink } from '@zerodev/wallet-react'
 import { useEffect, useRef, useState } from 'react'
-import { PoweredBy } from '../../shared/components/PoweredBy'
 import { StatusScreen } from '../../shared/components/StatusScreen'
 import { useAuth } from '../hooks/useAuth'
 import { stripMagicLinkCodeFromUrl } from '../utils/url'

package/src/auth/pages/WalletSelection.tsx

@@ -1,6 +1,5 @@
-import { ListItem, Text } from '@zerodev/react-ui'
+import { ListItem, ListItemIcon, PoweredBy, Text } from '@zerodev/react-ui'
 import { useConnect } from 'wagmi'
-import { PoweredBy } from '../../shared/components/PoweredBy'
 import { useAuth } from '../hooks/useAuth'
 
 export function WalletSelection() {
@@ -36,8 +35,17 @@ export function WalletSelection() {
               <ListItem
                 key={connector.uid}
                 title={connector.name}
-                iconName="walletOutline"
-                {...(connector.icon ? { imageUri: connector.icon } : {})}
+                icon={
+                  connector.icon ? (
+                    <img
+                      src={connector.icon}
+                      alt=""
+                      className="zd:w-6 zd:h-6"
+                    />
+                  ) : (
+                    <ListItemIcon name="walletOutline" />
+                  )
+                }
                 disabled={isPending}
                 onClick={() => handleSelect(connector)}
                 className="zd:rounded-3xl"

package/src/shared/components/SignUpFooter/index.tsx

@@ -1,5 +1,4 @@
-import { Text } from '@zerodev/react-ui'
-import { PoweredBy } from '../PoweredBy'
+import { PoweredBy, Text } from '@zerodev/react-ui'
 
 export function SignUpFooter({
   termsAndConditionsUrl,

package/dist/_types/shared/components/PoweredBy/index.d.ts

@@ -1,6 +0,0 @@
-import type { CSSProperties } from 'react';
-export declare function PoweredBy({ className, style, }: {
-    className?: string;
-    style?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/_types/shared/components/PoweredBy/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/PoweredBy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,2CAiBA"}

package/dist/_types/shared/components/Screen/EllipticalRadial.d.ts

@@ -1,23 +0,0 @@
-interface RadialStop {
-    offset: number;
-    color: string;
-    opacity: number;
-}
-export interface RadialLayer {
-    id: string;
-    matrix: [number, number, number, number, number, number];
-    fillOpacity: number;
-    stops: RadialStop[];
-}
-interface RadialRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export declare function EllipticalRadial({ layer, rect, }: {
-    layer: RadialLayer;
-    rect: RadialRect;
-}): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=EllipticalRadial.d.ts.map

package/dist/_types/shared/components/Screen/EllipticalRadial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EllipticalRadial.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/Screen/EllipticalRadial.tsx"],"names":[],"mappings":"AAAA,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IAGV,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAExD,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,UAAU,EAAE,CAAA;CACpB;AAGD,UAAU,UAAU;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,GACL,EAAE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;CACjB,2CAkCA"}

package/dist/_types/shared/components/Screen/MultiRadialBackground.d.ts

@@ -1,4 +0,0 @@
-export declare function MultiRadialBackground(): import("react/jsx-runtime").JSX.Element;
-export declare function CardGlow(): import("react/jsx-runtime").JSX.Element;
-export declare function WrapperBorder(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MultiRadialBackground.d.ts.map

package/dist/_types/shared/components/Screen/MultiRadialBackground.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiRadialBackground.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/Screen/MultiRadialBackground.tsx"],"names":[],"mappings":"AAYA,wBAAgB,qBAAqB,4CAkBpC;AAYD,wBAAgB,QAAQ,4CAiJvB;AAeD,wBAAgB,aAAa,4CAwH5B"}

package/dist/_types/shared/components/Screen/index.d.ts

@@ -1,10 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-export declare function Screen({ children, className, contentClassName, size, style, topNav, }: {
-    children: ReactNode;
-    className?: string | undefined;
-    contentClassName?: string | undefined;
-    size?: 'sm' | 'md' | 'lg' | undefined;
-    style?: CSSProperties | undefined;
-    topNav?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/_types/shared/components/Screen/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/Screen/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUrD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACjC,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,2CA2DA"}

package/dist/_types/shared/components/TopNav/index.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-export declare const TOP_NAV_HEIGHT = 52;
-export declare function TopNav({ onBack, onClose, title, logo, className, }: {
-    onBack?: () => void;
-    onClose: () => void;
-    title?: string;
-    logo?: ReactNode;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/_types/shared/components/TopNav/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/TopNav/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,eAAO,MAAM,cAAc,KAAK,CAAA;AAEhC,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CA8BA"}

package/src/shared/components/PoweredBy/index.tsx

@@ -1,27 +0,0 @@
-import { cn, Text, ZeroDevLogo } from '@zerodev/react-ui'
-import type { CSSProperties } from 'react'
-
-export function PoweredBy({
-  className,
-  style,
-}: {
-  className?: string
-  style?: CSSProperties
-}) {
-  return (
-    <div
-      className={cn(
-        'zd:gap-1.5 zd:flex zd:flex-row zd:items-center',
-        className,
-      )}
-    >
-      <Text>Powered by</Text>
-      <ZeroDevLogo
-        variant="lockup"
-        tone="black"
-        className="zd:h-4.5 zd:w-auto"
-        style={style}
-      />
-    </div>
-  )
-}

package/src/shared/components/Screen/EllipticalRadial.tsx

@@ -1,65 +0,0 @@
-interface RadialStop {
-  offset: number
-  color: string
-  opacity: number
-}
-
-export interface RadialLayer {
-  id: string
-  // Figma-exported gradientTransform matrix: the unit circle
-  // (center 0,0 radius 1) mapped to a rotated/scaled/translated ellipse.
-  matrix: [number, number, number, number, number, number]
-  // Opacity of the rect the gradient fills (Figma exports this on the <rect>).
-  fillOpacity: number
-  stops: RadialStop[]
-}
-
-// The rect each gradient fills, in the parent SVG's viewBox coordinates.
-interface RadialRect {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export function EllipticalRadial({
-  layer,
-  rect,
-}: {
-  layer: RadialLayer
-  rect: RadialRect
-}) {
-  const { id, matrix, fillOpacity, stops } = layer
-
-  return (
-    <>
-      <defs>
-        <radialGradient
-          id={id}
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform={`matrix(${matrix.join(' ')})`}
-        >
-          {stops.map((s, i) => (
-            <stop
-              key={s.color + i.toString()}
-              offset={s.offset}
-              stopColor={s.color}
-              stopOpacity={s.opacity}
-            />
-          ))}
-        </radialGradient>
-      </defs>
-      <rect
-        x={rect.x}
-        y={rect.y}
-        width={rect.width}
-        height={rect.height}
-        fill={`url(#${id})`}
-        fillOpacity={fillOpacity}
-      />
-    </>
-  )
-}

package/src/shared/components/Screen/MultiRadialBackground.tsx

@@ -1,323 +0,0 @@
-import { useId } from 'react'
-
-import { EllipticalRadial, type RadialLayer } from './EllipticalRadial'
-
-// The design frame: the gradient layers live on a 412×812 rect offset to
-// (-6,-6) so they bleed 6px past the 400×800 card on every side — that 6px
-// reveal is the wrapper's gradient border. The matrices below are the
-// Figma-exported gradientTransform values verbatim, so rendering the SVG with
-// a matching viewBox + preserveAspectRatio="none" reproduces the design 1:1
-// while still scaling to any container size.
-const FRAME_VIEWBOX = '-6 -6 412 812'
-
-export function MultiRadialBackground() {
-  // The colorful gradient now lives entirely in CardGlow. This base layer is
-  // just a flat, soft warm-white fill behind it so CardGlow's colors read
-  // bright and clean, with no gray muddiers underneath.
-  return (
-    <div className="zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none">
-      <svg
-        width="100%"
-        height="100%"
-        viewBox={FRAME_VIEWBOX}
-        preserveAspectRatio="none"
-        role="img"
-        aria-label="Decorative gradient background"
-      >
-        <rect x="-6" y="-6" width="412" height="812" fill="#FBF7F2" />
-      </svg>
-    </div>
-  )
-}
-
-// On-card overlay (400×800), sitting ON TOP of the translucent card body so its
-// color reads at full strength (the card at 0.8 opacity would otherwise wash a
-// behind-card gradient to ~20%). This reproduces the vivid orange + blue that in
-// the source design came from the decorative "Amorphic" blob raster overlaid on
-// the lower card, plus the design's own white card glow (Figma paint6).
-//
-// The orange + blue lobes are NOT verbatim Figma layers — they reconstruct the
-// blob's measured color footprint (orange across the lower card; blue lobe
-// bottom-left ~x 0-150 / y 600-800) as gradients, per the decision to treat the
-// blob as a background effect rather than ship the raster.
-export function CardGlow() {
-  const baseId = useId()
-  // VERBATIM from the Figma `--Background-Brand-Gradient` token (6 stacked
-  // radial-gradients). CSS lists topmost-first; SVG paints last-on-top, so the
-  // array is the CSS list REVERSED. Each matrix is the CSS `rx% ry% at cx% cy%`
-  // converted over the 400×800 frame. An upward linear fade is applied on top
-  // (see the <rect> below) to soften the gradient toward the top.
-  const layers: RadialLayer[] = [
-    {
-      // (CSS #6) blue → top-right. x-radius widened so the lobe reaches further
-      // left; y-radius kept short so it stays up top and doesn't bleed into the
-      // orange band.
-      id: `${baseId}-blue`,
-      matrix: [1850, 0, 0, 645, 381.44, 0],
-      fillOpacity: 1,
-      stops: [
-        { offset: 0, color: '#45ABFB', opacity: 0.66 },
-        { offset: 0.4615, color: '#1E9AFB', opacity: 0.35 },
-        { offset: 1, color: '#45ABFB', opacity: 0 },
-      ],
-    },
-    {
-      // (CSS #5) offWhite → blue, very faint
-      id: `${baseId}-offwhite-tr`,
-      matrix: [55.28, 0, 0, 773.36, 386.68, 13.28],
-      fillOpacity: 1,
-      stops: [
-        { offset: 0, color: '#F7F5F0', opacity: 0.1 },
-        { offset: 1, color: '#45ABFB', opacity: 0 },
-      ],
-    },
-    {
-      // (CSS #4) warmGrey
-      id: `${baseId}-warmgrey`,
-      matrix: [326.72, 0, 0, 855.52, 0, 50.32],
-      fillOpacity: 1,
-      stops: [
-        { offset: 0, color: '#E3CFC3', opacity: 1 },
-        { offset: 1, color: '#E3CFC3', opacity: 0 },
-      ],
-    },
-    {
-      // (CSS #3) orange — spans the full width across the bottom ~30%, uniform.
-      id: `${baseId}-orange`,
-      matrix: [580, 0, 0, 380, 200, 835],
-      fillOpacity: 1,
-      stops: [
-        { offset: 0, color: '#EE6C2E', opacity: 0.8 },
-        { offset: 0.55, color: '#EE6C2E', opacity: 0.6 },
-        { offset: 1, color: '#EE6C2E', opacity: 0.15 },
-      ],
-    },
-    {
-      // (CSS #2) peach — spread further up (~30% of the bottom), a bit more vivid
-      id: `${baseId}-peach`,
-      matrix: [520, 0, 0, 560, 180, 830],
-      fillOpacity: 1,
-      stops: [
-        { offset: 0, color: '#FAC8AC', opacity: 1 },
-        { offset: 1, color: '#F27B3E', opacity: 0 },
-      ],
-    },
-    {
-      // (CSS #1) white glow (topmost of the colour stack)
-      id: `${baseId}-white-bl`,
-      matrix: [90.72, 0, 0, 550.48, 38.04, 702.64],
-      fillOpacity: 1,
-      stops: [
-        { offset: 0, color: 'white', opacity: 0.58 },
-        { offset: 1, color: 'white', opacity: 0 },
-      ],
-    },
-  ]
-
-  return (
-    <div className="zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden">
-      <svg
-        width="100%"
-        height="100%"
-        viewBox="0 0 400 800"
-        preserveAspectRatio="none"
-        role="presentation"
-      >
-        {layers.map((layer) => (
-          <EllipticalRadial
-            key={layer.id}
-            layer={layer}
-            rect={{ x: 0, y: 0, width: 400, height: 800 }}
-          />
-        ))}
-        {/* Vertical white fade — strongest at the bottom, easing linearly to
-            nothing at the top. Softens the lower (most vivid) part of the
-            gradient. A gradient layer (not an opaque card) so the frosted
-            buttons composite over it cleanly. */}
-        <defs>
-          <linearGradient
-            id={`${baseId}-vfade`}
-            x1="0"
-            y1="0"
-            x2="0"
-            y2="800"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0" stopColor="white" stopOpacity="0.55" />
-            <stop offset="0.45" stopColor="white" stopOpacity="0.52" />
-            <stop offset="0.65" stopColor="white" stopOpacity="0.5" />
-            <stop offset="0.85" stopColor="white" stopOpacity="0.5" />
-            <stop offset="1" stopColor="white" stopOpacity="0.5" />
-          </linearGradient>
-        </defs>
-        <rect
-          x="0"
-          y="0"
-          width="400"
-          height="800"
-          fill={`url(#${baseId}-vfade)`}
-        />
-        {/* Blue — a diagonal linear gradient from the bottom-left corner fading
-            to transparent toward the top-right, so it blends smoothly into the
-            orange with no hard edge. On top of the fade so #A7B8E2 reads true. */}
-        <defs>
-          <linearGradient
-            id={`${baseId}-bluefade`}
-            x1="0"
-            y1="800"
-            x2="120"
-            y2="640"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0" stopColor="#A7B8E2" stopOpacity="1" />
-            <stop offset="0.33" stopColor="#A7B8E2" stopOpacity="0.7" />
-            <stop offset="0.66" stopColor="#A7B8E2" stopOpacity="0.35" />
-            <stop offset="1" stopColor="#A7B8E2" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-        <rect
-          x="0"
-          y="0"
-          width="400"
-          height="800"
-          fill={`url(#${baseId}-bluefade)`}
-        />
-      </svg>
-    </div>
-  )
-}
-
-// The wrapper's gradient BORDER. Renders full-frame behind the inner card; the
-// card sits on top with a 6px margin so this gradient shows as the border ring.
-// Uses normalized cx/cy/rx/ry radial gradients (scale-transform) over a #130E0B
-// base — the original border look.
-type BorderLayer = {
-  id: string
-  cx: number
-  cy: number
-  rx: number
-  ry: number
-  stops: { offset: number; color: string; opacity: number }[]
-}
-
-export function WrapperBorder() {
-  const baseId = useId()
-  // VERBATIM from the Figma `--Background-Brand-Gradient` token (6 stacked
-  // radial-gradients). CSS lists topmost-first, SVG paints last-on-top, so the
-  // array is the CSS list REVERSED. Each CSS `rx% ry% at cx% cy%` maps to
-  // normalized cx/cy/rx/ry (÷100); the inline <radialGradient> below applies
-  // the cx=(cx/rx)*100% + scale(rx,ry) convention.
-  const layers: BorderLayer[] = [
-    {
-      id: `${baseId}-g6`, // (CSS #6) blue, top-right
-      cx: 0.9536,
-      cy: 0.0,
-      rx: 0.9385,
-      ry: 1.2256,
-      stops: [
-        { offset: 0, color: '#45ABFB', opacity: 0.6 },
-        { offset: 0.4615, color: '#1E9AFB', opacity: 0.32 },
-        { offset: 1, color: '#45ABFB', opacity: 0 },
-      ],
-    },
-    {
-      id: `${baseId}-g5`, // (CSS #5) faint light, top-right
-      cx: 0.9667,
-      cy: 0.0166,
-      rx: 0.1382,
-      ry: 0.9667,
-      stops: [
-        { offset: 0, color: '#F7F5F0', opacity: 0.1 },
-        { offset: 1, color: '#45ABFB', opacity: 0 },
-      ],
-    },
-    {
-      id: `${baseId}-g4`, // (CSS #4) warm grey, top-left
-      cx: 0.0,
-      cy: 0.0629,
-      rx: 0.8168,
-      ry: 1.0694,
-      stops: [
-        { offset: 0, color: '#E3CFC3', opacity: 1 },
-        { offset: 1, color: '#E3CFC3', opacity: 0 },
-      ],
-    },
-    {
-      id: `${baseId}-g3`, // (CSS #3) orange, bottom-left
-      cx: 0.0393,
-      cy: 1.0,
-      rx: 1.0628,
-      ry: 1.0303,
-      stops: [
-        { offset: 0, color: '#FF6B1F', opacity: 1 },
-        { offset: 0.476, color: '#E76000', opacity: 0.72 },
-        { offset: 1, color: '#E76000', opacity: 0 },
-      ],
-    },
-    {
-      id: `${baseId}-g2`, // (CSS #2) peach, bottom-center
-      cx: 0.3476,
-      cy: 1.0,
-      rx: 0.9614,
-      ry: 0.338,
-      stops: [
-        { offset: 0, color: '#FAC8AC', opacity: 0.7 },
-        { offset: 1, color: '#F27B3E', opacity: 0 },
-      ],
-    },
-    {
-      id: `${baseId}-g1`, // (CSS #1) white glow, bottom-left
-      cx: 0.0951,
-      cy: 0.8783,
-      rx: 0.2268,
-      ry: 0.6881,
-      stops: [
-        { offset: 0, color: '#FFFFFF', opacity: 0.58 },
-        { offset: 1, color: '#FFFFFF', opacity: 0 },
-      ],
-    },
-  ]
-
-  return (
-    <div className="zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden">
-      <svg
-        width="100%"
-        height="100%"
-        preserveAspectRatio="none"
-        role="presentation"
-      >
-        <rect width="100%" height="100%" fill="#130E0B" />
-        <defs>
-          {layers.map((layer) => (
-            <radialGradient
-              key={layer.id}
-              id={layer.id}
-              cx={`${(layer.cx / layer.rx) * 100}%`}
-              cy={`${(layer.cy / layer.ry) * 100}%`}
-              r="100%"
-              gradientUnits="objectBoundingBox"
-              gradientTransform={`scale(${layer.rx}, ${layer.ry})`}
-            >
-              {layer.stops.map((s, i) => (
-                <stop
-                  key={s.color + i.toString()}
-                  offset={s.offset}
-                  stopColor={s.color}
-                  stopOpacity={s.opacity}
-                />
-              ))}
-            </radialGradient>
-          ))}
-        </defs>
-        {layers.map((layer) => (
-          <rect
-            key={`${layer.id}-rect`}
-            width="100%"
-            height="100%"
-            fill={`url(#${layer.id})`}
-          />
-        ))}
-      </svg>
-    </div>
-  )
-}