@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/internal/InputGroup.ts

@@ -4,7 +4,7 @@ import { variants, vars } from '../../zyzz.config.js'
 
 export type Value = { control: RefObject<HTMLInputElement | null>; invalid: boolean }
 
-/** Shared by Input parts and AmountInput so Control and Clear reach the same element. */
+/** Shared by TextInput parts and AmountInput so Control and Clear reach the same element. */
 export const Context = createContext<Value | undefined>(undefined)
 
 /**
@@ -66,7 +66,7 @@ const nudge = keyframes(
     '60%': { transform: 'translateX(-3px) !custom' },
     '80%': { transform: 'translateX(2px) !custom' },
   },
-  { id: 'tds/web/input/nudge' },
+  { id: 'tds/web/text-input/nudge' },
 )
 
 // The OtpField pop shape, scaled down because a full-width field grows far more than a slot.
@@ -75,40 +75,48 @@ const pop = keyframes(
     '0%, 100%': { transform: 'scale(1) !custom' },
     '45%': { transform: 'scale(1.02) !custom' },
   },
-  { id: 'tds/web/input/pop' },
+  { id: 'tds/web/text-input/pop' },
 )
 
 export namespace styles {
   /**
-   * The text field surface of `Input.Group` and `Select.Trigger`. Its `size` scale matches
-   * `Field.styles.field` and the `Button` heights: 32, 40 and 56px.
+   * The 48px text field surface of `TextInput.Group`, `Select.Trigger` and `AmountInput.Root`. It
+   * matches `Field.styles.field`: `default` fills the field and `outlined` draws a 1px line instead.
    */
   export const group = variants(
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
+        backgroundColor: 'container.regular',
+        borderRadius: 'xs',
         borderStyle: 'none',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        columnGap: '8',
         display: 'flex',
+        height: '48',
+        // Forced colors paint transparent outlines, so this outline is the focus ring only there.
         outlineColor: 'transparent !custom',
         outlineOffset: '2',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
+        paddingBlock: '0',
+        paddingInline: '16',
         position: 'relative',
         transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
+        typography: 'body.b2',
         selectors: {
-          // The invalid ring fades in on an inset border, so focus changes only the outline color.
+          // The focus border is inset, so focus never moves the content.
           '&::before': {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2',
+            borderWidth: 'regular',
             boxSizing: 'border-box',
             content: '"" !custom',
+            cornerShape: 'inherit !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
@@ -116,36 +124,35 @@ export namespace styles {
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
-          '&:is(button)': {
-            cursor: 'pointer',
-            paddingBlock: '0',
-            textAlign: 'start',
-            width: '100% !custom',
+          // The success state ends the field with a check, drawn from the `CheckCircle` icon.
+          '&:is([data-success], [data-success] *)::after': {
+            backgroundColor: 'content.primary',
+            content: '"" !custom',
+            flexShrink: '0 !custom',
+            height: '16',
+            mask: 'url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M9.61328 6.0166C9.78817 5.80309 10.1037 5.77154 10.3174 5.94629C10.5306 6.12107 10.562 6.43583 10.3877 6.64941L7.3877 10.3164C7.2983 10.4257 7.16637 10.4919 7.02539 10.499C6.8843 10.5061 6.74637 10.4534 6.64648 10.3535L5.31348 9.01953C5.11845 8.82425 5.11829 8.50768 5.31348 8.3125C5.50869 8.11767 5.82534 8.11759 6.02051 8.3125L6.96191 9.25488L9.61328 6.0166Z%27/%3E%3Cpath fill-rule=%27evenodd%27 d=%27M8 1.33301C11.6817 1.33318 14.666 4.31919 14.666 8.00098C14.6656 11.6824 11.6815 14.6668 8 14.667C4.31837 14.667 1.33345 11.6825 1.33301 8.00098C1.33301 4.31908 4.3181 1.33301 8 1.33301ZM8 2.33398C4.87039 2.33398 2.33301 4.87137 2.33301 8.00098C2.33345 11.1302 4.87066 13.667 8 13.667C11.1292 13.6668 13.6656 11.1301 13.666 8.00098C13.666 4.87147 11.1294 2.33416 8 2.33398Z%27/%3E%3C/svg%3E") center / contain no-repeat !custom',
+            width: '16',
           },
+          '&:is(button)': { cursor: 'pointer', textAlign: 'start', width: '100% !custom' },
           '&:is(button):active:not(:disabled, [data-disabled])': {
             scale: 'press',
             transitionDuration: '100',
           },
-          '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
-            backgroundColor: 'grayAlpha.200',
+          // `:where` keeps hover and focus fills below the invalid and disabled fills.
+          '&:where(:hover:not(:disabled, [data-disabled], :has(input:disabled)))': {
+            backgroundColor: 'container.strong',
           },
-          '&:disabled, &[data-disabled], &:has(input:disabled)': {
-            cursor: 'default',
-            opacity: 'disabled',
+          '&:where(:focus-visible, :has(input:focus-visible))': {
+            backgroundColor: 'background.elevated',
           },
-          '&:focus-visible, &:has(input:focus-visible)': { outlineColor: 'blue.700' },
-          // Success and invalid draw one ring: inset at rest, and the outline instead while focused.
-          '&[data-success], [data-success] &': { backgroundColor: 'green.200' },
-          '&:is([data-success], [data-success] *):hover:not(:disabled, [data-disabled], :has(input:disabled))':
-            { backgroundColor: 'green.300' },
-          '&[data-success]::before, [data-success] &::before': { borderColor: 'green.700' },
-          '&[data-success]:is(:focus-visible, :has(input:focus-visible)), [data-success] &:is(:focus-visible, :has(input:focus-visible))':
-            { outlineColor: 'green.700' },
-          '&[data-invalid]::before, [data-invalid] &::before': { borderColor: 'red.800' },
-          '&[data-invalid]:is(:focus-visible, :has(input:focus-visible)), [data-invalid] &:is(:focus-visible, :has(input:focus-visible))':
-            { outlineColor: 'red.800' },
           '&:is(:focus-visible, :has(input:focus-visible))::before': {
-            borderColor: 'transparent !custom',
+            borderColor: 'border.focus',
+          },
+          '&[data-invalid], [data-invalid] &': { backgroundColor: 'container.negative' },
+          '&:disabled, &[data-disabled], &:has(input:disabled)': {
+            backgroundColor: 'container.subtle',
+            color: 'content.subtle',
+            cursor: 'default',
           },
           '&[data-entered="invalid"]': {
             animation: `${nudge} 360ms ${vars.ease.snappy} !custom`,
@@ -153,28 +160,7 @@ export namespace styles {
           '&[data-entered="success"]': {
             animation: `${pop} 320ms ${vars.ease.overshoot} !custom`,
           },
-          // Card sizes: medium is the default card. Small and large scale the padding and radius.
-          '&[data-variant="card"][data-size="small"]': {
-            borderRadius: '8',
-            paddingBlock: '12',
-            paddingInline: '12',
-          },
-          '&[data-variant="card"][data-size="large"]': {
-            borderRadius: '16',
-            paddingBlock: '24',
-            paddingInline: '24',
-          },
-          '[data-variant="stacked"] > &': { gridArea: '1 / 1' },
-          // A 32px field has no room for the floating label, so a small stacked field takes the medium size.
-          '[data-variant="stacked"] > &[data-size="small"]': {
-            borderRadius: '12',
-            columnGap: '8',
-            height: '40',
-            paddingInline: '16',
-            typography: 'copy.14',
-          },
         },
-        // Forced colors paint transparent outlines, so the ring exists only while focused there.
         '@media (forced-colors: active)': {
           outlineStyle: 'none !custom',
           selectors: {
@@ -189,64 +175,21 @@ export namespace styles {
           },
         },
       },
-      defaultVariants: { size: 'medium', variant: 'default' },
+      defaultVariants: { variant: 'default' },
       variants: {
-        size: {
-          large: {
-            borderRadius: '16',
-            columnGap: '12',
-            height: '56',
-            paddingInline: '20',
-            typography: 'copy.16',
-          },
-          medium: {
-            borderRadius: '12',
-            columnGap: '8',
-            height: '40',
-            paddingInline: '16',
-            typography: 'copy.14',
-          },
-          small: {
-            borderRadius: '8',
-            columnGap: '6',
-            height: '32',
-            paddingInline: '12',
-            typography: 'copy.13',
-          },
-        },
-        // Declared after `size` so card overrides its height, padding and radius.
         variant: {
-          card: {
-            backgroundColor: 'background.surface',
-            borderColor: 'grayAlpha.200',
-            borderRadius: '12',
-            borderStyle: 'solid',
-            borderWidth: '1',
-            height: 'auto !custom',
-            minHeight: '56',
-            paddingBlock: '16',
-            paddingInline: '16',
-            selectors: {
-              '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
-                backgroundColor: 'background.surface',
-                borderColor: 'grayAlpha.400',
-              },
-            },
-          },
           default: {},
-          // Fills only on hover, for a picker inside a row. As a button, it sizes to its content.
-          text: {
+          // A 1px line and no fill. Focus darkens the line, and an invalid value fills it red.
+          outlined: {
             backgroundColor: 'transparent !custom',
             selectors: {
-              '&:is(button)': { width: 'auto !custom' },
-              '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
-                backgroundColor: 'grayAlpha.100',
-              },
+              '&::before': { borderColor: 'line.primary' },
+              '&:is([data-invalid], [data-invalid] *)::before': { borderColor: 'border.negative' },
             },
           },
         },
       },
     },
-    { id: 'tds/web/input/group' },
+    { id: 'tds/web/text-input/group' },
   )
 }

package/src/web/components/internal/Listbox.ts

@@ -3,10 +3,10 @@ import { style, variants } from '../../zyzz.config.js'
 export namespace styles {
   export const empty = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       paddingBlock: '12',
       paddingInline: '16',
-      typography: 'copy.14',
+      typography: 'body.b2',
       selectors: { '&:empty': { display: 'none' } },
     },
     { id: 'tds/web/listbox/empty' },
@@ -19,10 +19,10 @@ export namespace styles {
 
   export const groupLabel = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       paddingBlock: '8',
       paddingInline: '16',
-      typography: 'label.12',
+      typography: 'body.b3',
     },
     { id: 'tds/web/listbox/group-label' },
   )
@@ -54,10 +54,10 @@ export namespace styles {
   export const item = style(
     {
       alignItems: 'center',
-      // Concentric with the popup: its 16px radius minus its 6px padding.
-      borderRadius: '10',
+      // One radius step below the popup, as the design rounds options: its `sm` less its 4px padding.
+      borderRadius: 'xs',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       columnGap: '12',
       cursor: 'pointer',
       display: 'flex',
@@ -68,11 +68,11 @@ export namespace styles {
       transitionDuration: '120',
       transitionProperty: 'background-color, opacity !custom',
       transitionTimingFunction: 'snappy',
-      typography: 'label.14.strong',
+      typography: 'body.b2Strong',
       userSelect: 'none',
       selectors: {
         '&[data-disabled]': { cursor: 'default', opacity: 'disabled', pointerEvents: 'none' },
-        '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
+        '&[data-highlighted]': { backgroundColor: 'container.regular' },
       },
     },
     { id: 'tds/web/listbox/item' },
@@ -86,23 +86,23 @@ export namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'background.raised',
-        borderRadius: '16',
-        boxShadow: 'popover',
+        backgroundColor: 'background.elevated',
+        borderRadius: 'sm',
+        boxShadow: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         maxHeight: 'min(var(--available-height), 20rem) !custom',
         minWidth: 'var(--anchor-width) !custom',
         opacity: '1 !custom',
         outline: 'none !custom',
         overflowY: 'auto',
         overscrollBehavior: 'contain !custom',
-        padding: '6',
+        padding: '4',
         transformOrigin: 'var(--transform-origin) !custom',
         transitionDuration: '240',
         transitionProperty: 'opacity, scale !custom',
         transitionTimingFunction: 'spring',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
           '&[data-ending-style]': {
             opacity: '0 !custom',
@@ -128,7 +128,7 @@ export namespace styles {
         // Options follow the shared control scale: 32, 40 and 56px.
         size: {
           large: {
-            selectors: { '& [role="option"]': { minHeight: '56', typography: 'label.16.strong' } },
+            selectors: { '& [role="option"]': { minHeight: '56', typography: 'body.b1Strong' } },
           },
           medium: {},
           small: {
@@ -136,7 +136,7 @@ export namespace styles {
               '& [role="option"]': {
                 minHeight: '32',
                 paddingBlock: '4',
-                typography: 'label.13.strong',
+                typography: 'body.b3Strong',
               },
             },
           },
@@ -155,7 +155,7 @@ export namespace styles {
 
   export const separator = style(
     {
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'container.strong',
       height: '1',
       marginBlock: '8',
       marginInline: '16',
@@ -165,11 +165,11 @@ export namespace styles {
 
   export const suffix = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       flexShrink: '0 !custom',
       fontVariantNumeric: 'tabular-nums !custom',
       marginInlineStart: 'auto !custom',
-      typography: 'copy.13',
+      typography: 'body.b3',
     },
     { id: 'tds/web/listbox/suffix' },
   )

package/src/web/components/internal/RowDisabled.ts

@@ -0,0 +1,9 @@
+/**
+ * Marks controls inside a disabled static `ListGroup.Row`, whose `fieldset` disables native controls
+ * only, so a `span` control such as `Switch` disables itself.
+ * @module
+ */
+import { createContext } from 'react'
+
+/** Whether the component sits inside a disabled static `ListGroup.Row`. */
+export const Context = createContext(false)

package/src/web/components/internal/RowsSize.ts

@@ -1,10 +1,8 @@
 /**
- * Row size that `Rows.Root` passes to the rows and controls inside it.
+ * Marks controls inside a `ListGroup.Root`, whose 36px rows fit a small control.
  * @module
  */
 import { createContext } from 'react'
 
-export type Size = 'large' | 'medium' | 'small'
-
-/** Size of the enclosing `Rows.Root`, absent outside one. */
-export const Context = createContext<Size | undefined>(undefined)
+/** Whether the component sits inside a `ListGroup.Root`. */
+export const Context = createContext(false)

package/src/web/components/visuals/Passkey.svg

@@ -0,0 +1,21 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="464" height="208" viewBox="0 0 464 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Fingerprint rings" clip-path="url(#clip0_0_5)">
+<g id="Group">
+<path id="Vector" d="M171 208V164C171 159.757 172.686 155.687 175.686 152.686C178.687 149.686 182.757 148 187 148C191.243 148 195.313 149.686 198.314 152.686C201.314 155.687 203 159.757 203 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="30 6"/>
+<path id="Vector_2" d="M155 208V164C155 155.513 158.371 147.374 164.373 141.373C170.374 135.371 178.513 132 187 132C195.487 132 203.626 135.371 209.627 141.373C215.629 147.374 219 155.513 219 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="52 8 14 8"/>
+<path id="Vector_3" d="M123 208V164C123 147.026 129.743 130.747 141.745 118.745C153.747 106.743 170.026 100 187 100C203.974 100 220.252 106.743 232.255 118.745C244.257 130.747 251 147.026 251 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="90 10 40 10"/>
+<path id="Vector_4" d="M107 208V164C107 142.783 115.429 122.434 130.431 107.431C145.434 92.4285 165.783 84 187 84C208.217 84 228.566 92.4285 243.569 107.431C258.571 122.434 267 142.783 267 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="60 12 120 8"/>
+<path id="Vector_5" d="M91 208V164C91 138.539 101.114 114.121 119.118 96.1178C137.121 78.1143 161.539 68 187 68C212.461 68 236.879 78.1143 254.882 96.1178C272.886 114.121 283 138.539 283 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="140 10 50 10"/>
+<path id="Vector_6" d="M75 208V164C75 134.296 86.8 105.808 107.804 84.804C128.808 63.8 157.296 52 187 52C216.704 52 245.192 63.8 266.196 84.804C287.2 105.808 299 134.296 299 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="80 14 160 10"/>
+<path id="Vector_7" d="M59 208V164C59 130.052 72.4857 97.495 96.4903 73.4903C120.495 49.4857 153.052 36 187 36C220.948 36 253.505 49.4857 277.51 73.4903C301.514 97.495 315 130.052 315 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="200 12 60 12"/>
+<path id="Vector_8" d="M43 208V164C43 125.809 58.1714 89.1819 85.1766 62.1766C112.182 35.1714 148.809 20 187 20C225.191 20 261.818 35.1714 288.823 62.1766C315.829 89.1819 331 125.809 331 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="120 16 220 12"/>
+</g>
+<path id="Highlight ring" d="M139 208V164C139 151.27 144.057 139.061 153.059 130.059C162.061 121.057 174.27 116 187 116C199.73 116 211.939 121.057 220.941 130.059C229.943 139.061 235 151.27 235 164V208" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path id="Vector_9" d="M187 169C189.761 169 192 166.761 192 164C192 161.239 189.761 159 187 159C184.239 159 182 161.239 182 164C182 166.761 184.239 169 187 169Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_0_5">
+<rect width="464" height="208" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/index.ts

@@ -1,15 +1,20 @@
 export { Accordion } from './components/Accordion.js'
+export { AgentLogo } from './components/AgentLogo.js'
+export { Alert } from './components/Alert.js'
 export { AlertDialog } from './components/AlertDialog.js'
 export { Amount } from './components/Amount.js'
 export { AmountInput } from './components/AmountInput.js'
 export { AppShell } from './components/AppShell.js'
+export { AssetChip } from './components/AssetChip.js'
 export { Autocomplete } from './components/Autocomplete.js'
 export { Avatar } from './components/Avatar.js'
+export { Badge } from './components/Badge.js'
 export { Banner } from './components/Banner.js'
+export { BarChart } from './components/BarChart.js'
 export { Breadcrumbs } from './components/Breadcrumbs.js'
 export { Button } from './components/Button.js'
+export { ButtonGroup } from './components/ButtonGroup.js'
 export { Calendar } from './components/Calendar.js'
-export { Callout } from './components/Callout.js'
 export { Checkbox } from './components/Checkbox.js'
 export { CheckboxGroup } from './components/CheckboxGroup.js'
 export { Choicebox } from './components/Choicebox.js'
@@ -27,14 +32,15 @@ export { formatHex, Hex } from './components/Hex.js'
 export { Frame } from './components/Frame.js'
 export { Gauge } from './components/Gauge.js'
 export { Grid } from './components/Grid.js'
-export { IconChip } from './components/IconChip.js'
+export { IconTile } from './components/IconTile.js'
 export { Identicon } from './components/Identicon.js'
 export { Inline } from './components/Inline.js'
-export { Input } from './components/Input.js'
 export { Inset } from './components/Inset.js'
 export { Kbd } from './components/Kbd.js'
+export { ListGroup } from './components/ListGroup.js'
 export { LoadingDots } from './components/LoadingDots.js'
 export { Menu } from './components/Menu.js'
+export { NetworkLogo } from './components/NetworkLogo.js'
 export { NumberField } from './components/NumberField.js'
 export { OtpField } from './components/OtpField.js'
 export { Pagination } from './components/Pagination.js'
@@ -42,7 +48,6 @@ export { Popover } from './components/Popover.js'
 export { Progress } from './components/Progress.js'
 export { Qr } from './components/Qr.js'
 export { RadioGroup } from './components/RadioGroup.js'
-export { Rows } from './components/Rows.js'
 export { SecretValue } from './components/SecretValue.js'
 export { Select } from './components/Select.js'
 export { Separator } from './components/Separator.js'
@@ -51,17 +56,24 @@ export { Skeleton } from './components/Skeleton.js'
 export { Slider } from './components/Slider.js'
 export { Snippet } from './components/Snippet.js'
 export { Spinner } from './components/Spinner.js'
+export { SplitBar } from './components/SplitBar.js'
 export { SplitButton } from './components/SplitButton.js'
 export { Stack } from './components/Stack.js'
+export { StatusChip } from './components/StatusChip.js'
+export { StatusRow } from './components/StatusRow.js'
 export { Stepper } from './components/Stepper.js'
 export { style, variants, vars } from './zyzz.config.js'
-export { variables } from './vars.js'
 export { Surface } from './components/Surface.js'
 export { Switch } from './components/Switch.js'
 export { Table } from './components/Table.js'
 export { Tabs } from './components/Tabs.js'
-export { Tag } from './components/Tag.js'
+export { TempoLogo } from './components/TempoLogo.js'
 export { Textarea } from './components/Textarea.js'
+export { TextInput } from './components/TextInput.js'
 export { Toast } from './components/Toast.js'
 export { Token } from './components/Token.js'
+export { TokenLogo } from './components/TokenLogo.js'
 export { Tooltip } from './components/Tooltip.js'
+export { variables } from './vars.js'
+export { VerificationCode } from './components/VerificationCode.js'
+export { Visual } from './components/Visual.js'

package/src/web/logos/Base.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1280)">
+<path d="M4 6.27467C4 5.49467 4 5.10533 4.14667 4.80667C4.288 4.52 4.52 4.28667 4.808 4.14667C5.10667 4 5.496 4 6.27467 4H25.7253C26.5053 4 26.8933 4 27.1933 4.14667C27.48 4.28667 27.712 4.52 27.852 4.80667C28 5.10667 28 5.496 28 6.27467V25.7253C28 26.5053 28 26.8933 27.8533 27.1933C27.712 27.48 27.48 27.712 27.1933 27.852C26.8933 28 26.504 28 25.7253 28H6.27467C5.49467 28 5.10667 28 4.80667 27.8533C4.51999 27.7125 4.28828 27.4803 4.148 27.1933C4 26.8933 4 26.504 4 25.7253V6.27467Z" fill="#0000FF"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1280">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/Ethereum.svg

@@ -0,0 +1,16 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1292)">
+<rect width="32" height="32" fill="#627EEA"/>
+<path d="M16.498 4V12.87L23.995 16.22L16.498 4Z" fill="white" fill-opacity="0.602"/>
+<path d="M16.498 4L9 16.22L16.498 12.87V4Z" fill="white"/>
+<path d="M16.498 21.968V27.995L24 17.616L16.498 21.968Z" fill="white" fill-opacity="0.602"/>
+<path d="M16.498 27.995V21.967L9 17.616L16.498 27.995Z" fill="white"/>
+<path d="M16.498 20.5731L23.995 16.2201L16.498 12.8721V20.5731Z" fill="white" fill-opacity="0.2"/>
+<path d="M9 16.2201L16.498 20.5731V12.8721L9 16.2201Z" fill="white" fill-opacity="0.602"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1292">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/HyperEVM.svg

@@ -0,0 +1,27 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1310)">
+<g clip-path="url(#clip1_201_1310)">
+<rect width="32" height="32" fill="#072723"/>
+<g clip-path="url(#clip2_201_1310)">
+<mask id="mask0_201_1310" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<path d="M0 0H32V32H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_201_1310)">
+<path d="M32 0H0V32H32V0Z" fill="#072723"/>
+<path d="M26.6667 15.9227C26.6831 17.6668 26.3191 19.3936 25.6 20.9827C24.5707 23.276 22.1067 25.152 19.8547 23.156C18.0187 21.5293 17.6787 18.2253 14.928 17.7427C11.2894 17.2987 11.2014 21.548 8.82404 22.028C6.17471 22.5707 5.29604 18.0813 5.33471 16.044C5.37471 14.0053 5.91204 11.14 8.21471 11.14C10.864 11.14 11.0427 15.1813 14.4067 14.9627C17.7374 14.7333 17.796 10.5293 19.972 8.72934C21.8494 7.17468 24.0587 8.31468 25.164 10.1867C26.1894 11.9173 26.64 13.9493 26.6627 15.9227H26.6667Z" fill="#50D2C1"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_201_1310">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_201_1310">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+<clipPath id="clip2_201_1310">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/Polygon.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1322)">
+<rect width="32" height="32" fill="url(#paint0_linear_201_1322)"/>
+<path d="M10.9062 12.4996C11.0974 12.3866 11.3146 12.327 11.5356 12.327C11.7566 12.327 11.9737 12.3866 12.165 12.4996L15.0415 14.252L16.9947 15.3912L19.8767 17.1436C20.2411 17.3714 20.7233 17.3714 21.1288 17.1436L23.4176 15.7754C23.7875 15.5487 24.2353 15.1271 24.2353 14.6714V11.9714C24.2353 11.5157 23.8231 11.0952 23.412 10.8674L21.1644 9.53437C20.9739 9.42258 20.758 9.36375 20.5383 9.36375C20.3186 9.36375 20.1027 9.42258 19.9122 9.53437L17.6591 10.8674C17.2946 11.0941 17.1769 11.5157 17.1769 11.9714V13.717L15.4114 12.5427V10.7835C15.4114 10.3267 15.2937 9.90729 15.7048 9.67946L19.8778 7.16989C20.0683 7.0581 20.2841 6.99927 20.5039 6.99927C20.7236 6.99927 20.9395 7.0581 21.1299 7.16989L25.3708 9.67832C25.5652 9.78677 25.7268 9.94759 25.8379 10.1433C25.949 10.3389 26.0053 10.5619 26.0007 10.788V15.8525C26.0031 16.0774 25.9458 16.2987 25.8349 16.4931C25.724 16.6874 25.5636 16.8476 25.3708 16.9565L21.1299 19.465C20.9395 19.5767 20.7236 19.6356 20.5039 19.6356C20.2841 19.6356 20.0683 19.5767 19.8778 19.465L16.9958 17.7545L15.0426 16.5734L12.1606 14.8618C11.97 14.7498 11.7539 14.6909 11.5339 14.6909C11.314 14.6909 11.0979 14.7498 10.9073 14.8618L8.66079 16.1948C8.28971 16.4226 7.76641 16.8432 7.76641 17.2988V19.9988C7.76641 20.4556 8.25527 20.875 8.66079 21.1029L10.9073 22.471C11.2784 22.7 11.7606 22.7 12.1661 22.471L14.4126 21.1391C14.7837 20.9113 15.4126 20.4908 15.4126 20.0351V18.2895L17.178 19.465V21.2173C17.178 21.673 16.778 22.0935 16.3725 22.3214L12.1194 24.8241C11.755 25.0576 11.2717 25.0576 10.8662 24.8241L6.62538 22.3157C6.43972 22.2006 6.2853 22.0399 6.17622 21.8482C6.06715 21.6565 6.0069 21.44 6.00098 21.2185V16.154C6.00098 15.6972 6.22429 15.2778 6.62982 15.05L10.9062 12.4996Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_201_1322" x1="3.27976e-08" y1="0.00106153" x2="32.0014" y2="31.9975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8F34C2"/>
+<stop offset="1" stop-color="#7442DB"/>
+</linearGradient>
+<clipPath id="clip0_201_1322">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/README.md

@@ -0,0 +1,14 @@
+# Web Logos
+
+The SVGs are the unchanged Figma exports of the `Size=32` variants of the Modal system's Network Logo component set, in the [Web Wallet file](https://www.figma.com/design/7oi8e3B3woViD6NzCyt8NK?node-id=201-1342). The 20px variants scale the same artwork. [`NetworkLogo`](../components/NetworkLogo.tsx) inlines each SVG with per-instance clip, mask, and gradient IDs.
+
+The artwork belongs to each network and keeps its brand colors. Tempo confirmed redistribution rights in `@tempoxyz/ds` on October 23, 2026. These assets retain their original licensing terms.
+
+| File           | Figma node | SHA-256                                                            |
+| -------------- | ---------- | ------------------------------------------------------------------ |
+| `Base.svg`     | `201:1280` | `bea1b6c677c1c7c3bb17b6bf1e50299689f96b55a206c682d7ed672c9e25b596` |
+| `Ethereum.svg` | `201:1292` | `1d8c620178cfc715bd6ecf886df8359cf150af732b4ffd48d06b3486862494eb` |
+| `HyperEVM.svg` | `201:1310` | `8e5337ceb117b97e8c7e1d622ed1d0ea5f3282e535ece0142768421cb208e45d` |
+| `Polygon.svg`  | `201:1322` | `5ead7a5208ee1acdb53586540321780ae54487b9216d3553a66425317a2b5f21` |
+| `Solana.svg`   | `201:1328` | `34535f51388e4939964248e6861d79b3a4248a4f0135664f1ea69c88faaba080` |
+| `Tempo.svg`    | `201:1334` | `276f062a453db9c9efdeb0d4d43d8f36f4f04f7e48192cd5e91016f26202a06d` |

package/src/web/logos/Solana.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1328)">
+<rect width="32" height="32" fill="black"/>
+<path d="M23.482 11.2376C23.3512 11.3577 23.1804 11.4255 23.0025 11.4282H6.17619C5.57883 11.4282 5.27782 10.7485 5.69083 10.35L8.45361 7.69635C8.58203 7.57247 8.75318 7.50222 8.93196 7.5H25.8248C26.428 7.5 26.7231 8.18548 26.3031 8.58515L23.482 11.2376ZM23.482 24.3164C23.3513 24.4359 23.1799 24.5015 23.0025 24.5H6.17619C5.57883 24.5 5.27782 23.8261 5.69083 23.4276L8.45361 20.7682C8.58312 20.6468 8.75414 20.5791 8.93196 20.5788H25.8248C26.428 20.5788 26.7231 21.2585 26.3031 21.657L23.482 24.3164ZM23.482 14.2259C23.3511 14.1068 23.1798 14.0416 23.0025 14.0435H6.17619C5.57883 14.0435 5.27782 14.7173 5.69083 15.1147L8.45361 17.7753C8.58435 17.8947 8.75458 17.9621 8.93196 17.9647H25.8248C26.428 17.9647 26.7231 17.285 26.3031 16.8865L23.482 14.2259Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1328">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/Tempo.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1334)">
+<rect width="32" height="32" fill="black"/>
+<path d="M14.8242 23.5H11.1342L14.5542 13.06H10.1802L11.1342 10H23.3202L22.3662 13.06H18.2262L14.8242 23.5Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1334">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>