@tempoxyz/ds 0.3.9 → 0.3.11

package/dist/docs/products/tempo-wallet.md

@@ -0,0 +1,438 @@
+# Tempo Wallet
+
+Tempo Wallet is the first-party wallet for balances, transfers, and deposits.
+
+> [!NOTE]
+> The reference layouts on this page are compositions of library components and `style`, not shipped components. `@tempoxyz/ds` exports no `WalletOverview` or `SendReview`. Copy a layout into your app and adapt it.
+
+## Overview
+
+Tempo Wallet runs at [wallet.tempo.xyz](https://wallet.tempo.xyz). You sign in with a passkey, then send, receive, deposit, and swap stablecoins, and manage private balances in Zones.
+
+Roles:
+
+* **Account Holders:** Hold, send, and receive stablecoins such as pathUSD and USDC.e.
+* **Developers and Agents (MPP):** Pay for API requests. Access keys permit an app or agent to spend within limits you approve.
+
+## Surfaces
+
+* **Web (@tempoxyz/ds):** wallet.tempo.xyz on desktop browsers.
+* **Mobile Web (@tempoxyz/ds):** The same app in iOS and Android browsers.
+* **Terminal (CLI):** Tempo Wallet CLI, built outside this library.
+
+No native iOS or Android app is documented. The Apple Pay deposit option is the only flow tied to a device. It needs a US debit card and an iOS device.
+
+## Key Screens
+
+### Overview
+
+```tsx
+import { Amount, Button, Grid, Hex, Identicon, ListGroup, style, Surface, TokenLogo, Tooltip } from '@tempoxyz/ds'
+import { AddFunds, ArrowDownLeft, Privacy, Send, SwapHorizontal } from '@tempoxyz/ds/icons'
+
+export const fill = true
+const account = '0x0b2c69c5c1bbd3f8b642c8d8a3c8a903f780f9b2'
+
+const balances = [
+  {
+    address: '0x20c0000000000000000000000000000000000000',
+    amount: '8420.00',
+    name: 'PathUSD',
+    symbol: 'pathUSD',
+    units: '8,420.00',
+  },
+  {
+    address: '0x20c000000000000000000000b9537d11c60e8b50',
+    amount: '3170.32',
+    name: 'Bridged USDC (Stargate)',
+    symbol: 'USDC.e',
+    units: '3,170.32',
+  },
+]
+
+export function Demo() {
+  return (
+    <div {...styles.page()}>
+      <header {...styles.account()}>
+        <Identicon address={account} aria-hidden size="32" />
+        <Hex.Root value={account} {...styles.address()}>
+          <Hex.Text />
+          <Hex.Copy aria-label="Copy wallet address" />
+        </Hex.Root>
+      </header>
+
+      <Surface>
+        <p {...styles.caption()}>Total balance</p>
+        <Amount currency="USD" size="xl" value="12840.32" />
+        <div {...styles.actions()}>
+          <Button>
+            <Send />
+            Send
+          </Button>
+          <Button variant="secondary">
+            <ArrowDownLeft />
+            Receive
+          </Button>
+          <Button variant="secondary">
+            <AddFunds />
+            Deposit
+          </Button>
+          <Button variant="secondary">
+            <SwapHorizontal />
+            Swap
+          </Button>
+        </div>
+      </Surface>
+
+      <Grid fit="large" gap="16">
+        <Surface>
+          <Surface.Header>
+            <Surface.Title>Balances</Surface.Title>
+          </Surface.Header>
+          <ListGroup.Root>
+            {balances.map((balance) => (
+              <ListGroup.Row key={balance.address}>
+                <TokenLogo address={balance.address} />
+                <ListGroup.Info>
+                  <ListGroup.Title>{balance.name}</ListGroup.Title>
+                  <ListGroup.Description>
+                    {balance.units} {balance.symbol}
+                  </ListGroup.Description>
+                </ListGroup.Info>
+                <Amount currency="USD" value={balance.amount} />
+                <Tooltip.Root>
+                  <Tooltip.Trigger
+                    aria-label={`Send ${balance.name}`}
+                    render={<Button shape="icon" size="small" variant="tertiary" />}
+                  >
+                    <Send />
+                  </Tooltip.Trigger>
+                  <Tooltip.Popup>Send {balance.name}</Tooltip.Popup>
+                </Tooltip.Root>
+              </ListGroup.Row>
+            ))}
+            <ListGroup.Row action="navigation" render={<a href="#zones" />}>
+              <span {...styles.zone()}>
+                <Privacy />
+              </span>
+              <ListGroup.Info>
+                <ListGroup.Title>Private balance</ListGroup.Title>
+                <ListGroup.Description>Held in a zone</ListGroup.Description>
+              </ListGroup.Info>
+              <Amount currency="USD" value="1250.00" />
+            </ListGroup.Row>
+          </ListGroup.Root>
+        </Surface>
+
+        <Surface>
+          <Surface.Header>
+            <Surface.Title>Activity</Surface.Title>
+            <Button size="small" variant="tertiary">
+              View all
+            </Button>
+          </Surface.Header>
+          <ListGroup.Root>
+            <ListGroup.Row>
+              <ListGroup.Info>
+                <ListGroup.Title>Received from 0x3c44…93bc</ListGroup.Title>
+                <ListGroup.Description>Today, 9:41 AM</ListGroup.Description>
+              </ListGroup.Info>
+              <Amount sign="+" symbol="pathUSD" value="250.00" />
+            </ListGroup.Row>
+            <ListGroup.Row action="navigation" render={<a href="#access-key-activity" />}>
+              <ListGroup.Info>
+                <ListGroup.Title>Access Key activity</ListGroup.Title>
+                <ListGroup.Description>3 transactions</ListGroup.Description>
+              </ListGroup.Info>
+              <Amount sign="−" symbol="pathUSD" value="0.08" />
+            </ListGroup.Row>
+            <ListGroup.Row>
+              <ListGroup.Info>
+                <ListGroup.Title>Sent to 0x91bd…07e1</ListGroup.Title>
+                <ListGroup.Description>Yesterday, 4:18 PM</ListGroup.Description>
+              </ListGroup.Info>
+              <Amount sign="−" symbol="USDC.e" value="48.50" />
+            </ListGroup.Row>
+          </ListGroup.Root>
+        </Surface>
+      </Grid>
+    </div>
+  )
+}
+
+namespace styles {
+  export const account = style({ alignItems: 'center', columnGap: '12', display: 'flex' })
+
+  export const actions = style({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '8',
+    marginBlockStart: '24',
+  })
+
+  export const address = style({ minWidth: '0' })
+
+  export const caption = style({
+    color: 'content.secondary',
+    margin: '0',
+    marginBlockEnd: '4',
+    typography: 'body.b2',
+  })
+
+  export const page = style({
+    backgroundColor: 'background.primary',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '16',
+    rowGap: '16',
+  })
+
+  export const zone = style({
+    alignItems: 'center',
+    backgroundColor: 'container.strong',
+    borderRadius: 'full',
+    cornerShape: 'round',
+    display: 'inline-flex',
+    flexShrink: '0 !custom',
+    height: '24',
+    justifyContent: 'center',
+    width: '24',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Products/WalletOverview.tsx)
+
+The overview leads with the total balance in USD, then the actions that move funds. On wide screens, Balances and Activity sit side by side. In a narrow column, they stack.
+
+* **Wallet Address (Hex.Copy):** An identicon and the copyable address that others send to.
+* **Total (size=xl):** Shows the total in USD.
+* **Actions (primary):** Send is primary. Receive, Deposit, and Swap are secondary.
+* **Balances (ListGroup):** A token icon, name, units, USD value, and a Send button.
+* **Private Balance (navigation):** A row that opens Zones.
+* **Access Key Activity (navigation):** Opens the list of MPP charges.
+
+Patterns:
+
+* [Payments](/docs/patterns/payments) for the Send, Receive, Deposit, and Swap entry points.
+* [Blockchain Values](/docs/patterns/blockchain-values) for the address, token units, and USD values.
+* [Tables and Lists](/docs/patterns/tables-and-lists) for balance and activity rows.
+
+### Send Review
+
+```tsx
+import { Alert, Amount, Button, Hex, Identicon, ListGroup, style, Surface, TokenLogo } from '@tempoxyz/ds'
+import { useEffect, useState } from 'react'
+
+export const fill = true
+const recipient = '0x3c44cdddb6a900fa2b585dd299e03d12fa4293bc'
+
+export function Demo() {
+  const [state, setState] = useState<'review' | 'sending' | 'sent'>('review')
+
+  useEffect(() => {
+    if (state !== 'sending') return
+    const timer = setTimeout(() => setState('sent'), 1200)
+    return () => clearTimeout(timer)
+  }, [state])
+
+  return (
+    <div {...styles.page()}>
+      <Surface {...styles.panel()}>
+        <Surface.Header>
+          <Surface.Title>{state === 'sent' ? 'Sent' : 'Review send'}</Surface.Title>
+        </Surface.Header>
+
+        <div {...styles.hero()}>
+          <Amount align="center" size="lg" symbol="pathUSD" value="250.00" />
+        </div>
+
+        <ListGroup.Root>
+          <ListGroup.Row>
+            <ListGroup.Label>To</ListGroup.Label>
+            <span {...styles.recipient()}>
+              <Identicon address={recipient} aria-hidden size="24" />
+              <Hex.Root value={recipient} {...styles.hex()}>
+                <Hex.Text />
+                <Hex.Copy aria-label="Copy recipient address" />
+              </Hex.Root>
+            </span>
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Token</ListGroup.Label>
+            <TokenLogo address="0x20c0000000000000000000000000000000000000" size="small" />
+            PathUSD
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Network</ListGroup.Label>
+            Tempo
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Note</ListGroup.Label>
+            Invoice 1042
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Network fee</ListGroup.Label>
+            <Amount currency="USD" precise value="0.001" />
+          </ListGroup.Row>
+        </ListGroup.Root>
+
+        {state === 'sent' ? (
+          <>
+            <Alert intent="positive" {...styles.notice()}>
+              <Alert.Icon />
+              <Alert.Content>Sent 250.00 pathUSD to 0x3c44…93bc.</Alert.Content>
+            </Alert>
+            <div {...styles.actions()}>
+              <Button.Link href="https://explore.tempo.xyz/" variant="secondary">
+                View in explorer
+              </Button.Link>
+              <Button onClick={() => setState('review')}>Done</Button>
+            </div>
+          </>
+        ) : (
+          <>
+            <p {...styles.warning()}>
+              Check the address before you confirm. Funds sent to the wrong address may not be
+              recoverable.
+            </p>
+            <div {...styles.actions()}>
+              <Button disabled={state === 'sending'} variant="secondary">
+                Back
+              </Button>
+              <Button loading={state === 'sending'} onClick={() => setState('sending')}>
+                Confirm send
+              </Button>
+            </div>
+          </>
+        )}
+      </Surface>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({
+    columnGap: '8',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginBlockStart: '24',
+    '@media (max-width: 40rem)': {
+      flexDirection: 'column-reverse',
+      rowGap: '8',
+    },
+  })
+
+  export const hero = style({ paddingBlock: '24' })
+
+  export const hex = style({ minWidth: '0' })
+
+  export const notice = style({ marginBlockStart: '24' })
+
+  export const page = style({
+    backgroundColor: 'background.primary',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: '16',
+  })
+
+  export const panel = style({ maxWidth: '28rem !custom', width: '100% !custom' })
+
+  export const recipient = style({
+    alignItems: 'center',
+    columnGap: '8',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    minWidth: '0',
+  })
+
+  export const warning = style({
+    color: 'content.secondary',
+    margin: '0',
+    marginBlockStart: '24',
+    typography: 'body.b3',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Products/WalletSendReview.tsx)
+
+Send collects a recipient address, amount, token, and optional note. The review shows them with the network fee before you confirm.
+
+* **Transfer Amount (symbol):** Shows the value of the transfer in large type and in token units.
+* **Details (ListGroup.Label):** Lists the recipient, token, network, note, and network fee.
+* **Recipient (Hex):** An identicon beside the address. Both ends stay visible for comparison.
+* **Confirm (loading):** The only primary action. It is busy during the submit. A success alert with an Explorer link replaces it.
+
+Patterns:
+
+* [Payments](/docs/patterns/payments) for the review and confirmation step.
+* [Blockchain Values](/docs/patterns/blockchain-values) for the truncated address and the fee.
+* [Destructive Actions](/docs/patterns/destructive-actions) for what can't be undone.
+
+## Content
+
+### Show USD for Holdings and Token Units for Transfers
+
+* **Holdings:** Show balances in USD.
+* **Transfers:** Show the token amount, since the transaction carries it. The review states 250.00 pathUSD, not $250.00.
+
+### Label Every Address by What It Receives
+
+* **Wallet address:** Receives from other Tempo Wallets.
+* **Deposit address:** Shown in the Deposit crypto flow, for one chain and token.
+
+**Do:** Label each address by purpose, such as Wallet address or Deposit address, and name the chain and
+token beside a deposit address.
+
+**Don't:** Show a bare 0x address without a label, or ask for the wallet address inside a deposit
+flow.
+
+### Say Where a Deposit Option Works
+
+Deposit offers Buy MACH, Fiat/cards, Deposit crypto, and Claim referral code. Availability depends on the country and the enabled onramps.
+
+State a limit beside the option, such as US only for Apple Pay, not after the choice.
+
+### Group Machine Payments
+
+An MPP session can produce several charges. Show the session as one row, such as Access Key activity with 3 transactions. List each charge when the row expands.
+
+### Don't Promise Recovery
+
+Tempo can't recover a deleted passkey, and a transfer to the wrong address may be lost. State both in sign-in and review copy. Tell people to save their passkey in a password manager that syncs across devices.
+
+## Open Gaps
+
+The library has no part for these needs yet. Before you add one, propose it as an issue in the Design System project.
+
+* **Address Field:** Nothing checks a 0x address or suggests recipients. Use an input and an error, or an autocomplete.
+* **QR Scanning:** Renders a QR code but can't read one from the camera.
+* **Mobile Blockchain Parts:** `@tempoxyz/ds/mobile` has no amount, address, identicon, rows, token, or QR counterpart.
+* **Activity Grouping:** Each screen composes grouped MPP rows again. No part names the session or its charge count.
+
+## Related
+
+[Payments](/docs/patterns/payments)
+
+Covers send, receive, and deposit flows.
+
+[Blockchain Values](/docs/patterns/blockchain-values)
+
+Covers addresses, amounts, and fees.
+
+[Amount](/docs/components/amount)
+
+Use for USD and token values.
+
+[Hex](/docs/components/hex)
+
+Use for addresses and hashes.
+
+[ListGroup](/docs/components/list-group)
+
+Use for balances and activity.
+
+[TokenLogo](/docs/components/token-logo)
+
+Use for token icons.

package/dist/web/components/OtpField.css

@@ -1 +1 @@
-.z_tds_2f_web-iELgRU0{appearance:none}.z_tds_2f_web-iELgRU1{background-color:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-iELgRU2{border:none}.z_tds_2f_web-iELgRU3{box-sizing:border-box}.z_tds_2f_web-iELgRU4{caret-color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iELgRU5{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iELgRU6{outline-color:#0000}.z_tds_2f_web-iELgRU7{outline-offset:-1.5px}.z_tds_2f_web-iELgRU8{outline-style:solid}.z_tds_2f_web-iELgRU9{outline-width:1.5px}.z_tds_2f_web-iELgRUa{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iELgRUb{text-align:center}.z_tds_2f_web-iELgRUc{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-iELgRUd{transition-property:background-color,opacity,outline-color}.z_tds_2f_web-iELgRUe{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-iELgRUf{&:disabled{opacity:var(--z-tds_2f_web-opacity-disabled,.32)}}.z_tds_2f_web-iELgRUg{&:where(:hover:not(:disabled)){background-color:var(--z-tds_2f_web-color-container-strong,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-016,#ffffff29)))}}.z_tds_2f_web-iELgRUh{&:focus-visible{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),#1a1a1a))}}.z_tds_2f_web-iELgRUi{&:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-iELgRUj{&[data-invalid],[data-invalid] &{background-color:var(--z-tds_2f_web-color-container-negative,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-red-100,#eb341714),var(--z-tds_2f_web-color-accent-alpha-regular-red-200,#f55c4529)))}}.z_tds_2f_web-iELgRUk{[data-success] &{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_pop .32s var(--z-tds_2f_web-ease-overshoot,cubic-bezier(.34, 1.36, .64, 1)) both}}.z_tds_2f_web-iELgRUl{[data-success] &{background-color:var(--z-tds_2f_web-color-container-positive,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-green-100,#13a96314),var(--z-tds_2f_web-color-accent-alpha-regular-green-200,#59e5a429)))}}.z_tds_2f_web-iELgRUm{[data-success] &:nth-child(2){animation-delay:40ms}}.z_tds_2f_web-iELgRUn{[data-success] &:nth-child(3){animation-delay:80ms}}.z_tds_2f_web-iELgRUo{[data-success] &:nth-child(4){animation-delay:.12s}}.z_tds_2f_web-iELgRUp{[data-success] &:nth-child(5){animation-delay:.16s}}.z_tds_2f_web-iELgRUq{[data-success] &:nth-child(6){animation-delay:.2s}}.z_tds_2f_web-iELgRUr{[data-success] &:nth-child(7){animation-delay:.24s}}.z_tds_2f_web-iELgRUs{[data-success] &:nth-child(8){animation-delay:.28s}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-iELgRUt{[data-success] &{animation:none}}}.z_tds_2f_web-iELgRUu{align-items:center}.z_tds_2f_web-iELgRUv{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iELgRUw{display:flex}.z_tds_2f_web-iELgRUx{flex-wrap:nowrap}.z_tds_2f_web-iELgRUy{max-width:100%}.z_tds_2f_web-iELgRUz{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iELgRU10{&>input{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-iELgRU11{&>input{flex:auto}}.z_tds_2f_web-iELgRU12{&>input{height:var(--z-tds_2f_web-spacing-56,3.5rem)}}.z_tds_2f_web-iELgRU13{&>input{min-width:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-iELgRU14{&>input{font-family:var(--z-tds_2f_web-typography-body-b1Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}.z_tds_2f_web-iELgRU15{&>input{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}.z_tds_2f_web-iELgRU16{&>input{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}.z_tds_2f_web-iELgRU17{&>input{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,-.18px)}}.z_tds_2f_web-iELgRU18{&>input{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}.z_tds_2f_web-iELgRU19{&>input{width:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-iELgRU1a{&>input:focus-visible{width:calc(2.75rem + 3px)}}.z_tds_2f_web-iELgRU1b{&[data-invalid]{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_nudge .36s var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-iELgRU1c{&[data-invalid]{animation:none}}}
+.z_tds_2f_web-iELgRU0{appearance:none}.z_tds_2f_web-iELgRU1{background-color:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-iELgRU2{border:none}.z_tds_2f_web-iELgRU3{box-sizing:border-box}.z_tds_2f_web-iELgRU4{caret-color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iELgRU5{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-iELgRU6{outline-color:#0000}.z_tds_2f_web-iELgRU7{outline-offset:-1.5px}.z_tds_2f_web-iELgRU8{outline-style:solid}.z_tds_2f_web-iELgRU9{outline-width:1.5px}.z_tds_2f_web-iELgRUa{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iELgRUb{text-align:center}.z_tds_2f_web-iELgRUc{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-iELgRUd{transition-property:background-color,opacity,outline-color}.z_tds_2f_web-iELgRUe{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-iELgRUf{&:disabled{opacity:var(--z-tds_2f_web-opacity-disabled,.32)}}.z_tds_2f_web-iELgRUg{&:where(:hover:not(:disabled)){background-color:var(--z-tds_2f_web-color-container-strong,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-016,#ffffff29)))}}.z_tds_2f_web-iELgRUh{&:focus-visible{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),#1a1a1a))}}.z_tds_2f_web-iELgRUi{&:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-iELgRUj{&[data-invalid],[data-invalid] &{background-color:var(--z-tds_2f_web-color-container-negative,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-red-100,#eb341714),var(--z-tds_2f_web-color-accent-alpha-regular-red-200,#f55c4529)))}}.z_tds_2f_web-iELgRUk{[data-success] &{background-color:var(--z-tds_2f_web-color-container-positive,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-green-100,#13a96314),var(--z-tds_2f_web-color-accent-alpha-regular-green-200,#59e5a429)))}}.z_tds_2f_web-iELgRUl{align-items:center}.z_tds_2f_web-iELgRUm{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-iELgRUn{display:flex}.z_tds_2f_web-iELgRUo{flex-wrap:nowrap}.z_tds_2f_web-iELgRUp{max-width:100%}.z_tds_2f_web-iELgRUq{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-iELgRUr{&>input{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-iELgRUs{&>input{flex:auto}}.z_tds_2f_web-iELgRUt{&>input{height:var(--z-tds_2f_web-spacing-56,3.5rem)}}.z_tds_2f_web-iELgRUu{&>input{min-width:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-iELgRUv{&>input{font-family:var(--z-tds_2f_web-typography-body-b1Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}.z_tds_2f_web-iELgRUw{&>input{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}.z_tds_2f_web-iELgRUx{&>input{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}.z_tds_2f_web-iELgRUy{&>input{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,-.18px)}}.z_tds_2f_web-iELgRUz{&>input{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}.z_tds_2f_web-iELgRU10{&>input{width:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-iELgRU11{&>input:focus-visible{width:calc(2.75rem + 3px)}}.z_tds_2f_web-iELgRU12{&[data-invalid]{animation:z-kid-tds_2f_web_2f_otp_2d_field_2f_nudge .36s var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-iELgRU13{&[data-invalid]{animation:none}}}

package/dist/web/components/OtpField.d.ts

@@ -4,7 +4,7 @@ import type * as zyzz from 'zyzz';
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
  * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
- * green and pops them in sequence.
+ * green.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries

package/dist/web/components/OtpField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,KAAK,qBAAqB,EAA6B,MAAM,OAAO,CAAA;AAC7E,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAMjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,yBAAiB,QAAQ,CAAC;IACxB;;;;;;OAMG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAyBrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GACvC,IAAI,CACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EACxB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,UAAU,GACV,MAAM,GACN,WAAW,GACX,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,OAAO,CACV,GAAG;YAAE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;YAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAAE,CAAA;KACvE;IAED;;;OAGG;IACH,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAYvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC9F;CACF;AAqBD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCA2CjB,CAAA;IAEM,MAAM,IAAI,gCA+BhB,CAAA;CACF"}
+{"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,KAAK,qBAAqB,EAA6B,MAAM,OAAO,CAAA;AAC7E,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAMjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,yBAAiB,QAAQ,CAAC;IACxB;;;;;;OAMG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAyBrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GACvC,IAAI,CACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EACxB,cAAc,GACd,YAAY,GACZ,cAAc,GACd,UAAU,GACV,MAAM,GACN,WAAW,GACX,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,OAAO,CACV,GAAG;YAAE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;YAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAAE,CAAA;KACvE;IAED;;;OAGG;IACH,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAYvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC9F;CACF;AAaD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCA6BjB,CAAA;IAEM,MAAM,IAAI,gCA+BhB,CAAA;CACF"}

package/dist/web/components/OtpField.js

@@ -9,7 +9,7 @@ const InvalidContext = createContext(false);
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
  * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
- * green and pops them in sequence.
+ * green.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries
@@ -55,11 +55,10 @@ export var OtpField;
     OtpField.Input = Input;
 })(OtpField || (OtpField = {}));
 const nudge = "z-kid-tds_2f_web_2f_otp_2d_field_2f_nudge";
-const pop = "z-kid-tds_2f_web_2f_otp_2d_field_2f_pop";
 var styles;
 (function (styles) {
-    styles.input = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iELgRU0 z_tds_2f_web-iELgRU1 z_tds_2f_web-iELgRU2 z_tds_2f_web-iELgRU3 z_tds_2f_web-iELgRU4 z_tds_2f_web-iELgRU5 z_tds_2f_web-iELgRU6 z_tds_2f_web-iELgRU7 z_tds_2f_web-iELgRU8 z_tds_2f_web-iELgRU9 z_tds_2f_web-iELgRUa z_tds_2f_web-iELgRUb z_tds_2f_web-iELgRUc z_tds_2f_web-iELgRUd z_tds_2f_web-iELgRUe z_tds_2f_web-iELgRUf z_tds_2f_web-iELgRUg z_tds_2f_web-iELgRUh z_tds_2f_web-iELgRUi z_tds_2f_web-iELgRUj z_tds_2f_web-iELgRUk z_tds_2f_web-iELgRUl z_tds_2f_web-iELgRUm z_tds_2f_web-iELgRUn z_tds_2f_web-iELgRUo z_tds_2f_web-iELgRUp z_tds_2f_web-iELgRUq z_tds_2f_web-iELgRUr z_tds_2f_web-iELgRUs z_tds_2f_web-iELgRUt"});
-    styles.root = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iELgRUu z_tds_2f_web-iELgRUv z_tds_2f_web-iELgRUw z_tds_2f_web-iELgRUx z_tds_2f_web-iELgRUy z_tds_2f_web-iELgRUz z_tds_2f_web-iELgRU10 z_tds_2f_web-iELgRU11 z_tds_2f_web-iELgRU12 z_tds_2f_web-iELgRU13 z_tds_2f_web-iELgRU14 z_tds_2f_web-iELgRU15 z_tds_2f_web-iELgRU16 z_tds_2f_web-iELgRU17 z_tds_2f_web-iELgRU18 z_tds_2f_web-iELgRU19 z_tds_2f_web-iELgRU1a z_tds_2f_web-iELgRU1b z_tds_2f_web-iELgRU1c"});
+    styles.input = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iELgRU0 z_tds_2f_web-iELgRU1 z_tds_2f_web-iELgRU2 z_tds_2f_web-iELgRU3 z_tds_2f_web-iELgRU4 z_tds_2f_web-iELgRU5 z_tds_2f_web-iELgRU6 z_tds_2f_web-iELgRU7 z_tds_2f_web-iELgRU8 z_tds_2f_web-iELgRU9 z_tds_2f_web-iELgRUa z_tds_2f_web-iELgRUb z_tds_2f_web-iELgRUc z_tds_2f_web-iELgRUd z_tds_2f_web-iELgRUe z_tds_2f_web-iELgRUf z_tds_2f_web-iELgRUg z_tds_2f_web-iELgRUh z_tds_2f_web-iELgRUi z_tds_2f_web-iELgRUj z_tds_2f_web-iELgRUk"});
+    styles.root = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-iELgRUl z_tds_2f_web-iELgRUm z_tds_2f_web-iELgRUn z_tds_2f_web-iELgRUo z_tds_2f_web-iELgRUp z_tds_2f_web-iELgRUq z_tds_2f_web-iELgRUr z_tds_2f_web-iELgRUs z_tds_2f_web-iELgRUt z_tds_2f_web-iELgRUu z_tds_2f_web-iELgRUv z_tds_2f_web-iELgRUw z_tds_2f_web-iELgRUx z_tds_2f_web-iELgRUy z_tds_2f_web-iELgRUz z_tds_2f_web-iELgRU10 z_tds_2f_web-iELgRU11 z_tds_2f_web-iELgRU12 z_tds_2f_web-iELgRU13"});
 })(styles || (styles = {}));
 //# sourceMappingURL=OtpField.js.map
 import './OtpField.css';

package/dist/web/components/OtpField.js.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.js","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OtpField.js","sourceRoot":"","sources":["../../../src/web/components/OtpField.tsx"],"names":[],"mappings":"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"}