@tempoxyz/ds 0.2.6 → 0.3.0

package/dist/web/components/Dialog.css

@@ -1 +1 @@
-.z_tds_2f_web-C59jJV0{background-color:var(--z-tds_2f_web-color-black,#000)}.z_tds_2f_web-C59jJV1{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJV2{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}.z_tds_2f_web-C59jJV3{position:fixed}.z_tds_2f_web-C59jJV4{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-C59jJV5{transition-property:opacity}.z_tds_2f_web-C59jJV6{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-C59jJV7{&[data-ending-style]{opacity:0}}.z_tds_2f_web-C59jJV8{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}.z_tds_2f_web-C59jJV9{&[data-starting-style]{opacity:0}}.z_tds_2f_web-C59jJVa{height:var(--z-tds_2f_web-spacing-36,2.25rem)}.z_tds_2f_web-C59jJVb{inset-block-start:var(--z-tds_2f_web-spacing-22,1.375rem)}.z_tds_2f_web-C59jJVc{inset-inline-end:var(--z-tds_2f_web-spacing-22,1.375rem)}.z_tds_2f_web-C59jJVd{position:absolute}.z_tds_2f_web-C59jJVe{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z_tds_2f_web-C59jJVf{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJVg{font-family:var(--z-tds_2f_web-typography-copy-15-fontFamily,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-C59jJVh{font-size:var(--z-tds_2f_web-typography-copy-15-fontSize,15px)}.z_tds_2f_web-C59jJVi{font-weight:var(--z-tds_2f_web-typography-copy-15-fontWeight,450)}.z_tds_2f_web-C59jJVj{letter-spacing:var(--z-tds_2f_web-typography-copy-15-letterSpacing,-.13px)}.z_tds_2f_web-C59jJVk{line-height:var(--z-tds_2f_web-typography-copy-15-lineHeight,24px)}.z_tds_2f_web-C59jJVl{background-color:var(--z-tds_2f_web-color-background-raised,light-dark(#fff,#1f1e1e))}.z_tds_2f_web-C59jJVm{border-radius:var(--z-tds_2f_web-radius-16,1rem)}.z_tds_2f_web-C59jJVn{box-shadow:var(--z-tds_2f_web-shadow-modal,0 32px 64px -16px #00000047)}.z_tds_2f_web-C59jJVo{box-sizing:border-box}.z_tds_2f_web-C59jJVp{color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}.z_tds_2f_web-C59jJVq{max-width:var(--z-tds_2f_web-container-448,28rem)}.z_tds_2f_web-C59jJVr{outline:none}.z_tds_2f_web-C59jJVs{padding:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-C59jJVt{position:relative}.z_tds_2f_web-C59jJVu{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}.z_tds_2f_web-C59jJVv{transition-property:opacity,scale,transform}.z_tds_2f_web-C59jJVw{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-C59jJVx{font-family:var(--z-tds_2f_web-typography-copy-14-fontFamily,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-C59jJVy{font-size:var(--z-tds_2f_web-typography-copy-14-fontSize,14px)}.z_tds_2f_web-C59jJVz{font-weight:var(--z-tds_2f_web-typography-copy-14-fontWeight,450)}.z_tds_2f_web-C59jJV10{letter-spacing:var(--z-tds_2f_web-typography-copy-14-letterSpacing,-.09px)}.z_tds_2f_web-C59jJV11{line-height:var(--z-tds_2f_web-typography-copy-14-lineHeight,20px)}.z_tds_2f_web-C59jJV12{width:100%}.z_tds_2f_web-C59jJV13{&[data-ending-style]{opacity:0}}.z_tds_2f_web-C59jJV14{&[data-ending-style]{scale:var(--z-tds_2f_web-scale-enter,.96)}}.z_tds_2f_web-C59jJV15{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-180,.18s)}}.z_tds_2f_web-C59jJV16{&[data-starting-style]{opacity:0}}.z_tds_2f_web-C59jJV17{&[data-starting-style]{scale:var(--z-tds_2f_web-scale-enter,.96)}}@media (width<=40rem){.z_tds_2f_web-C59jJV18{border-bottom-left-radius:var(--z-tds_2f_web-radius-0,0rem)}.z_tds_2f_web-C59jJV19{border-bottom-right-radius:var(--z-tds_2f_web-radius-0,0rem)}.z_tds_2f_web-C59jJV1a{max-width:none}.z_tds_2f_web-C59jJV1b{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}.z_tds_2f_web-C59jJV1c{&[data-ending-style]{scale:none}}.z_tds_2f_web-C59jJV1d{&[data-ending-style]{transform:translateY(100%)}}.z_tds_2f_web-C59jJV1e{&[data-starting-style]{scale:none}}.z_tds_2f_web-C59jJV1f{&[data-starting-style]{transform:translateY(100%)}}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-C59jJV1g{transition-property:opacity}.z_tds_2f_web-C59jJV1h{&[data-ending-style],&[data-starting-style]{scale:none}}.z_tds_2f_web-C59jJV1i{&[data-ending-style],&[data-starting-style]{transform:none}}}.z_tds_2f_web-C59jJV1j{font-family:var(--z-tds_2f_web-typography-heading-24-fontFamily,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-C59jJV1k{font-size:var(--z-tds_2f_web-typography-heading-24-fontSize,24px)}.z_tds_2f_web-C59jJV1l{font-weight:var(--z-tds_2f_web-typography-heading-24-fontWeight,600)}.z_tds_2f_web-C59jJV1m{letter-spacing:var(--z-tds_2f_web-typography-heading-24-letterSpacing,-.47px)}.z_tds_2f_web-C59jJV1n{line-height:var(--z-tds_2f_web-typography-heading-24-lineHeight,32px)}.z_tds_2f_web-C59jJV1o{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJV1p{margin-bottom:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-C59jJV1q{[data-close-button] &{padding-inline-end:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-C59jJV1r{align-items:center}.z_tds_2f_web-C59jJV1s{display:grid}.z_tds_2f_web-C59jJV1t{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJV1u{justify-items:center}.z_tds_2f_web-C59jJV1v{overflow-y:auto}.z_tds_2f_web-C59jJV1w{padding:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-C59jJV1x{position:fixed}@media (width<=40rem){.z_tds_2f_web-C59jJV1y{align-items:end}.z_tds_2f_web-C59jJV1z{padding:var(--z-tds_2f_web-spacing-0,0rem)}}
+.z_tds_2f_web-C59jJV0{background-color:var(--z-tds_2f_web-color-neutral-100,#000)}.z_tds_2f_web-C59jJV1{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJV2{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}.z_tds_2f_web-C59jJV3{position:fixed}.z_tds_2f_web-C59jJV4{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-C59jJV5{transition-property:opacity}.z_tds_2f_web-C59jJV6{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-C59jJV7{&[data-ending-style]{opacity:0}}.z_tds_2f_web-C59jJV8{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}.z_tds_2f_web-C59jJV9{&[data-starting-style]{opacity:0}}.z_tds_2f_web-C59jJVa{display:flex}.z_tds_2f_web-C59jJVb{flex-direction:column}.z_tds_2f_web-C59jJVc{margin-bottom:var(--z-tds_2f_web-spacing-20,1.25rem)}.z_tds_2f_web-C59jJVd{margin-inline:var(--z-tds_2f_web-spacing-_2d_4,-.25rem)}.z_tds_2f_web-C59jJVe{margin-top:var(--z-tds_2f_web-spacing-_2d_4,-.25rem)}.z_tds_2f_web-C59jJVf{max-height:26.25rem}.z_tds_2f_web-C59jJVg{overflow-y:auto}.z_tds_2f_web-C59jJVh{overscroll-behavior:contain}.z_tds_2f_web-C59jJVi{padding:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-C59jJVj{row-gap:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-C59jJVk{[data-dialog-size=small] &{margin-bottom:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-C59jJVl{[data-dialog-size] &:last-child,[data-close-button]>&:nth-last-child(2){margin-bottom:var(--z-tds_2f_web-spacing-_2d_4,-.25rem)}}.z_tds_2f_web-C59jJVm{inset-block-start:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-C59jJVn{inset-inline-end:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-C59jJVo{position:absolute}.z_tds_2f_web-C59jJVp{[data-dialog-size=large]>&,[data-dialog-size=medium]>&{inset-block-start:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-C59jJVq{[data-dialog-size=large]>&,[data-dialog-size=medium]>&{inset-inline-end:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-C59jJVr{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-C59jJVs{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJVt{font-family:var(--z-tds_2f_web-typography-body-b2-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-C59jJVu{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-C59jJVv{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-C59jJVw{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-C59jJVx{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-C59jJVy{h2+&{margin-top:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-C59jJVz{margin-bottom:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-C59jJV10{&>:not(h2,p,[data-dialog-nav]){margin-bottom:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-C59jJV11{[data-dialog-size] &:last-child,[data-close-button]>&:nth-last-child(2){margin-bottom:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-C59jJV12{[data-dialog-size=small] &{margin-bottom:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-C59jJV13{&:where([data-layout=centered]){align-items:center}}.z_tds_2f_web-C59jJV14{&:where([data-layout=centered]){text-align:center}}.z_tds_2f_web-C59jJV15{&:where([data-layout=centered]){&>:is(div,h2,p){align-self:stretch}}}.z_tds_2f_web-C59jJV16{&:where([data-layout=inline]){[data-close-button] &{padding-inline-end:var(--z-tds_2f_web-spacing-56,3.5rem)}}}.z_tds_2f_web-C59jJV17{&:where([data-layout=inline]){[data-close-button] &{padding-top:var(--z-tds_2f_web-spacing-8,.5rem)}}}.z_tds_2f_web-C59jJV18{align-items:center}.z_tds_2f_web-C59jJV19{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-C59jJV1a{display:grid}.z_tds_2f_web-C59jJV1b{grid-template-columns:2.5rem 1fr 2.5rem}.z_tds_2f_web-C59jJV1c{height:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-C59jJV1d{margin-bottom:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-C59jJV1e{&>*{grid-column:2}}.z_tds_2f_web-C59jJV1f{&>*{justify-self:center}}.z_tds_2f_web-C59jJV1g{&>[data-dialog-back]{grid-column:1}}.z_tds_2f_web-C59jJV1h{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}.z_tds_2f_web-C59jJV1i{box-shadow:0 1px 2px #0000000a,0 16px 48px -12px #00000024}.z_tds_2f_web-C59jJV1j{box-sizing:border-box}.z_tds_2f_web-C59jJV1k{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-C59jJV1l{outline:none}.z_tds_2f_web-C59jJV1m{position:relative}.z_tds_2f_web-C59jJV1n{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}.z_tds_2f_web-C59jJV1o{transition-property:opacity,scale,transform}.z_tds_2f_web-C59jJV1p{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-C59jJV1q{width:100%}.z_tds_2f_web-C59jJV1r{&[data-ending-style]{opacity:0}}.z_tds_2f_web-C59jJV1s{&[data-ending-style]{scale:var(--z-tds_2f_web-scale-enter,.96)}}.z_tds_2f_web-C59jJV1t{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-180,.18s)}}.z_tds_2f_web-C59jJV1u{&[data-starting-style]{opacity:0}}.z_tds_2f_web-C59jJV1v{&[data-starting-style]{scale:var(--z-tds_2f_web-scale-enter,.96)}}@media (width<=37.5rem){.z_tds_2f_web-C59jJV1w{&[data-dialog-size]{max-width:none}}.z_tds_2f_web-C59jJV1x{&[data-ending-style]{scale:none}}.z_tds_2f_web-C59jJV1y{&[data-ending-style]{transform:translateY(calc(100% + 1rem))}}.z_tds_2f_web-C59jJV1z{&[data-starting-style]{scale:none}}.z_tds_2f_web-C59jJV20{&[data-starting-style]{transform:translateY(calc(100% + 1rem))}}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-C59jJV21{transition-property:opacity}.z_tds_2f_web-C59jJV22{&[data-ending-style],&[data-starting-style]{scale:none}}.z_tds_2f_web-C59jJV23{&[data-ending-style],&[data-starting-style]{transform:none}}}.z_tds_2f_web-C59jJV24{&:where([data-size=large]){border-radius:var(--z-tds_2f_web-radius-lg,calc(2rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-C59jJV25{&:where([data-size=large]){max-width:38.75rem}}.z_tds_2f_web-C59jJV26{&:where([data-size=large]){padding:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-C59jJV27{&:where([data-size=medium]){border-radius:var(--z-tds_2f_web-radius-lg,calc(2rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-C59jJV28{&:where([data-size=medium]){max-width:28.75rem}}.z_tds_2f_web-C59jJV29{&:where([data-size=medium]){padding:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-C59jJV2a{&:where([data-size=small]){border-radius:var(--z-tds_2f_web-radius-md,calc(1.5rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-C59jJV2b{&:where([data-size=small]){max-width:25rem}}.z_tds_2f_web-C59jJV2c{&:where([data-size=small]){padding:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-C59jJV2d{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJV2e{font-family:var(--z-tds_2f_web-typography-heading-h3-fontFamily,var(--z-tds_2f_web-fontFamily-heading,Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif))}.z_tds_2f_web-C59jJV2f{font-size:var(--z-tds_2f_web-typography-heading-h3-fontSize,20px)}.z_tds_2f_web-C59jJV2g{font-weight:var(--z-tds_2f_web-typography-heading-h3-fontWeight,500)}.z_tds_2f_web-C59jJV2h{letter-spacing:var(--z-tds_2f_web-typography-heading-h3-letterSpacing,-.3px)}.z_tds_2f_web-C59jJV2i{line-height:var(--z-tds_2f_web-typography-heading-h3-lineHeight,23px)}.z_tds_2f_web-C59jJV2j{[data-dialog-size=large] &,[data-dialog-size=medium] &{font-family:var(--z-tds_2f_web-typography-heading-h1-fontFamily,var(--z-tds_2f_web-fontFamily-heading,Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif))}}.z_tds_2f_web-C59jJV2k{[data-dialog-size=large] &,[data-dialog-size=medium] &{font-size:var(--z-tds_2f_web-typography-heading-h1-fontSize,32px)}}.z_tds_2f_web-C59jJV2l{[data-dialog-size=large] &,[data-dialog-size=medium] &{font-weight:var(--z-tds_2f_web-typography-heading-h1-fontWeight,500)}}.z_tds_2f_web-C59jJV2m{[data-dialog-size=large] &,[data-dialog-size=medium] &{letter-spacing:var(--z-tds_2f_web-typography-heading-h1-letterSpacing,-.48px)}}.z_tds_2f_web-C59jJV2n{[data-dialog-size=large] &,[data-dialog-size=medium] &{line-height:var(--z-tds_2f_web-typography-heading-h1-lineHeight,36.8px)}}.z_tds_2f_web-C59jJV2o{align-items:center}.z_tds_2f_web-C59jJV2p{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-C59jJV2q{justify-items:center}.z_tds_2f_web-C59jJV2r{padding:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-C59jJV2s{position:fixed}@media (width<=37.5rem){.z_tds_2f_web-C59jJV2t{align-items:end}.z_tds_2f_web-C59jJV2u{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}}

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

@@ -1,22 +1,30 @@
 import * as BaseUi from '@base-ui/react/dialog';
 import type { ComponentPropsWithRef } from 'react';
 import type * as zyzz from 'zyzz';
+import { Button } from './Button.js';
 /**
  * A `role="dialog"` popup over a dimmed backdrop. Base UI makes it modal by default: focus is
  * trapped, page scroll is locked, Escape and outside presses close it, and focus returns to the
- * trigger. Viewports up to 40rem wide present it as a bottom sheet.
+ * trigger. Viewports up to 37.5rem wide present it at the bottom, full width with a 16px gutter.
  *
  * - Always render a `Dialog.Title`. Base UI points `aria-labelledby` at it to name the dialog.
- * - Keep each dialog to one task, and avoid opening a dialog from another dialog.
+ * - Pick `size` from what the dialog holds, and keep one size for every step of a flow.
+ * - Stack `Dialog.Header`, `Dialog.Body` and a `ButtonGroup` of `large` buttons in the popup.
+ * - Keep each dialog to one task. Swap its content for the next step instead of opening another.
  * - Include a visible close control, such as `closeButton` or a `Dialog.Close` action.
- * - Use `AlertDialog` for destructive confirmations that need an explicit decision.
  *
  * @example
  * <Dialog.Root>
- *   <Dialog.Trigger render={<Button />}>Rename wallet</Dialog.Trigger>
- *   <Dialog.Popup closeButton>
- *     <Dialog.Title>Rename wallet</Dialog.Title>
- *     <Dialog.Description>The name is only visible to you.</Dialog.Description>
+ *   <Dialog.Trigger render={<Button />}>Revoke all</Dialog.Trigger>
+ *   <Dialog.Popup closeButton size="small">
+ *     <Dialog.Header>
+ *       <Dialog.Title>Revoke all connections?</Dialog.Title>
+ *       <Dialog.Description>Apps and agents lose access right away.</Dialog.Description>
+ *     </Dialog.Header>
+ *     <ButtonGroup>
+ *       <Dialog.Close render={<Button size="large" variant="secondary" />}>Cancel</Dialog.Close>
+ *       <Button size="large">Revoke all</Button>
+ *     </ButtonGroup>
  *   </Dialog.Popup>
  * </Dialog.Root>
  *
@@ -29,16 +37,23 @@ import type * as zyzz from 'zyzz';
 export declare namespace Dialog {
     /** Closes the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
     const Close: import("react").ForwardRefExoticComponent<Omit<BaseUi.DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    /**
-     * Owns the open state and renders no element. Pass `open` and `onOpenChange` to control it.
-     * Set `modal` to `false` to keep the page interactive, or to `'trap-focus'` to trap focus
-     * without locking scroll.
-     */
-    const Root: <Payload>(props: BaseUi.Dialog.Root.Props<Payload>) => import("react").JSX.Element;
     /** Opens the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
     const Trigger: BaseUi.DialogTrigger;
-    namespace Root {
-        type Props = BaseUi.Dialog.Root.Props;
+    /**
+     * Renders a 40px circular `Button` labelled "Back" with a left arrow, for step 2 onward of a
+     * flow. Place it first in a `Dialog.Nav`, and handle `onClick` to show the previous step.
+     */
+    function Back(props: Back.Props): import("react").JSX.Element;
+    namespace Back {
+        type Props = Omit<Button.Props, 'children' | 'shape' | 'size' | 'variant'>;
+    }
+    /**
+     * Renders the content `<div>` between the header and the footer, with sections 24px apart. Past
+     * 420px it scrolls, while the header and the footer stay in place.
+     */
+    function Body(props: Body.Props): import("react").JSX.Element;
+    namespace Body {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.body>;
     }
     /** Renders a `<p>` that Base UI references from the popup's `aria-describedby`. */
     function Description(props: Description.Props): import("react").JSX.Element;
@@ -46,9 +61,36 @@ export declare namespace Dialog {
         type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.description>;
     }
     /**
-     * Renders the portal, scrim, viewport and popup. Narrow viewports present a bottom sheet.
-     * `ref`, `className` and `style` reach the popup. `initialFocus` and `finalFocus` override
-     * where focus moves on open and on close.
+     * Renders the `<div>` that holds a `Dialog.Title`, an optional `Dialog.Description`, and above
+     * them an optional `Dialog.Nav` and one hero, such as an `IconTile` or a `Visual`. The title
+     * renders at 20px in a `small` popup and 32px otherwise.
+     *
+     * `layout` places the parts:
+     * - `inline` (default): keeps the text clear of `closeButton`, for single-step dialogs.
+     * - `stacked`: puts a `Dialog.Nav` above left-aligned text, for step 2 onward of a flow.
+     * - `centered`: centers the hero and the text below a `Dialog.Nav`, for acknowledgments,
+     *   onboarding, progress and success.
+     */
+    function Header(props: Header.Props): import("react").JSX.Element;
+    namespace Header {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.header>;
+    }
+    /**
+     * Renders the 40px `<div>` row at the top of a `stacked` or `centered` header. A `Dialog.Back`
+     * takes the first cell, any other child, such as a `Stepper`, centers in the middle, and the last
+     * cell stays clear for `closeButton`.
+     */
+    function Nav(props: Nav.Props): import("react").JSX.Element;
+    namespace Nav {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.nav>;
+    }
+    /**
+     * Renders the portal, scrim, viewport and popup. `size` sets the width with the radius and
+     * padding: `small` is 400px with radius `md` and 24px padding, for one decision or outcome.
+     * `medium` (default) is 460px and `large` is 620px, both with radius `lg` and 32px padding. Viewports up to 37.5rem
+     * wide present every size at the bottom, full width with a 16px gutter. `ref`, `className` and
+     * `style` reach the popup. `initialFocus` and `finalFocus` override where focus moves on open and
+     * on close.
      */
     function Popup(props: Popup.Props): import("react").JSX.Element;
     namespace Popup {
@@ -61,7 +103,18 @@ export declare namespace Dialog {
             closeButton?: boolean | undefined;
         };
     }
-    /** Renders an `<h2>` that Base UI references from the popup's `aria-labelledby`. */
+    /**
+     * Owns the open state and renders no element. Pass `open` and `onOpenChange` to control it. The
+     * dialog is always modal: it traps focus, locks page scroll and makes the page behind inert.
+     */
+    function Root(props: Root.Props): import("react").JSX.Element;
+    namespace Root {
+        type Props = Omit<BaseUi.Dialog.Root.Props, 'modal'>;
+    }
+    /**
+     * Renders an `<h2>` that Base UI references from the popup's `aria-labelledby`, at 20px in a
+     * `small` popup and 32px otherwise.
+     */
     function Title(props: Title.Props): import("react").JSX.Element;
     namespace Title {
         type Props = ComponentPropsWithRef<'h2'> & zyzz.Props.Variants<typeof styles.title>;
@@ -69,9 +122,125 @@ export declare namespace Dialog {
 }
 export declare namespace styles {
     const backdrop: zyzz.style.ReturnType<"react">;
+    const body: zyzz.style.ReturnType<"react">;
     const close: zyzz.style.ReturnType<"react">;
     const description: zyzz.style.ReturnType<"react">;
-    const popup: zyzz.style.ReturnType<"react">;
+    const header: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly marginBottom: "24";
+            readonly selectors: {
+                readonly '& > :not(h2, p, [data-dialog-nav])': {
+                    readonly marginBottom: "24";
+                };
+                readonly '[data-dialog-size] &:last-child, [data-close-button] > &:nth-last-child(2)': {
+                    readonly marginBottom: "0";
+                };
+                readonly '[data-dialog-size="small"] &': {
+                    readonly marginBottom: "20";
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly layout: "inline";
+        };
+        readonly variants: {
+            readonly layout: {
+                readonly centered: {
+                    readonly alignItems: "center";
+                    readonly textAlign: "center";
+                    readonly selectors: {
+                        readonly '& > :is(div, h2, p)': {
+                            readonly alignSelf: "stretch";
+                        };
+                    };
+                };
+                readonly inline: {
+                    readonly selectors: {
+                        readonly '[data-close-button] &': {
+                            readonly paddingInlineEnd: "56";
+                            readonly paddingTop: "8";
+                        };
+                    };
+                };
+                readonly stacked: {};
+            };
+        };
+    }, "react">;
+    const nav: zyzz.style.ReturnType<"react">;
+    const popup: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly backgroundColor: "background.elevated";
+            readonly boxShadow: "0 1px 2px #0000000a, 0 16px 48px -12px #00000024 !custom";
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly outline: "none !custom";
+            readonly position: "relative";
+            readonly transitionDuration: "280";
+            readonly transitionProperty: "opacity, scale, transform";
+            readonly transitionTimingFunction: "spring";
+            readonly typography: "body.b2";
+            readonly width: "100% !custom";
+            readonly selectors: {
+                readonly '&[data-ending-style]': {
+                    readonly opacity: "0 !custom";
+                    readonly scale: "enter";
+                    readonly transitionDuration: "180";
+                };
+                readonly '&[data-starting-style]': {
+                    readonly opacity: "0 !custom";
+                    readonly scale: "enter";
+                };
+            };
+            readonly '@media (max-width: 37.5rem)': {
+                readonly selectors: {
+                    readonly '&[data-dialog-size]': {
+                        readonly maxWidth: "none !custom";
+                    };
+                    readonly '&[data-ending-style]': {
+                        readonly scale: "none !custom";
+                        readonly transform: "translateY(calc(100% + 1rem)) !custom";
+                    };
+                    readonly '&[data-starting-style]': {
+                        readonly scale: "none !custom";
+                        readonly transform: "translateY(calc(100% + 1rem)) !custom";
+                    };
+                };
+            };
+            readonly '@media (prefers-reduced-motion: reduce)': {
+                readonly transitionProperty: "opacity";
+                readonly selectors: {
+                    readonly '&[data-ending-style], &[data-starting-style]': {
+                        readonly scale: "none !custom";
+                        readonly transform: "none !custom";
+                    };
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly size: "medium";
+        };
+        readonly variants: {
+            readonly size: {
+                readonly large: {
+                    readonly borderRadius: "lg";
+                    readonly maxWidth: "38.75rem !custom";
+                    readonly padding: "32";
+                };
+                readonly medium: {
+                    readonly borderRadius: "lg";
+                    readonly maxWidth: "28.75rem !custom";
+                    readonly padding: "32";
+                };
+                readonly small: {
+                    readonly borderRadius: "md";
+                    readonly maxWidth: "25rem !custom";
+                    readonly padding: "24";
+                };
+            };
+        };
+    }, "react">;
     const title: zyzz.style.ReturnType<"react">;
     const viewport: zyzz.style.ReturnType<"react">;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/web/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAA;AAC/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAKjC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,yBAAiB,MAAM,CAAC;IACtB,6FAA6F;IACtF,MAAM,KAAK,oIAAsB,CAAA;IAExC;;;;OAIG;IACI,MAAM,IAAI,oFAAqB,CAAA;IAEtC,4FAA4F;IACrF,MAAM,OAAO,sBAAwB,CAAA;IAE5C,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;KAC7C;IAED,mFAAmF;IACnF,SAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,+BASnD;IAED,UAAiB,WAAW,CAAC;QAC3B,KAAY,KAAK,GAAG,qBAAqB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC,CAAA;KAChG;IAED;;;;OAIG;IACH,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BA4BvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,GACxC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,GAAG,QAAQ,CAAC,GAAG;YAC1E;;;;eAIG;YACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;SAClC,CAAA;KACJ;IAED,oFAAoF;IACpF,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BASvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC3F;CACF;AAED,yBAAiB,MAAM,CAAC;IACf,MAAM,QAAQ,gCAepB,CAAA;IAGM,MAAM,KAAK,gCAQjB,CAAA;IAEM,MAAM,WAAW,gCAOvB,CAAA;IAEM,MAAM,KAAK,gCAmDjB,CAAA;IAEM,MAAM,KAAK,gCAQjB,CAAA;IAEM,MAAM,QAAQ,gCAapB,CAAA;CACF"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/web/components/Dialog.tsx"],"names":[],"mappings":"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"}

package/dist/web/components/Dialog.js

@@ -2,25 +2,33 @@
 import { Props as __zyzzProps } from 'zyzz/runtime';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as BaseUi from '@base-ui/react/dialog';
+import { ArrowLeft } from '../icons/ArrowLeft.js';
 import { Close as CloseIcon } from '../icons/Close.js';
-import { style } from '../zyzz.config.js';
+import { style, variants } from '../zyzz.config.js';
 import { Button } from './Button.js';
 /**
  * A `role="dialog"` popup over a dimmed backdrop. Base UI makes it modal by default: focus is
  * trapped, page scroll is locked, Escape and outside presses close it, and focus returns to the
- * trigger. Viewports up to 40rem wide present it as a bottom sheet.
+ * trigger. Viewports up to 37.5rem wide present it at the bottom, full width with a 16px gutter.
  *
  * - Always render a `Dialog.Title`. Base UI points `aria-labelledby` at it to name the dialog.
- * - Keep each dialog to one task, and avoid opening a dialog from another dialog.
+ * - Pick `size` from what the dialog holds, and keep one size for every step of a flow.
+ * - Stack `Dialog.Header`, `Dialog.Body` and a `ButtonGroup` of `large` buttons in the popup.
+ * - Keep each dialog to one task. Swap its content for the next step instead of opening another.
  * - Include a visible close control, such as `closeButton` or a `Dialog.Close` action.
- * - Use `AlertDialog` for destructive confirmations that need an explicit decision.
  *
  * @example
  * <Dialog.Root>
- *   <Dialog.Trigger render={<Button />}>Rename wallet</Dialog.Trigger>
- *   <Dialog.Popup closeButton>
- *     <Dialog.Title>Rename wallet</Dialog.Title>
- *     <Dialog.Description>The name is only visible to you.</Dialog.Description>
+ *   <Dialog.Trigger render={<Button />}>Revoke all</Dialog.Trigger>
+ *   <Dialog.Popup closeButton size="small">
+ *     <Dialog.Header>
+ *       <Dialog.Title>Revoke all connections?</Dialog.Title>
+ *       <Dialog.Description>Apps and agents lose access right away.</Dialog.Description>
+ *     </Dialog.Header>
+ *     <ButtonGroup>
+ *       <Dialog.Close render={<Button size="large" variant="secondary" />}>Cancel</Dialog.Close>
+ *       <Button size="large">Revoke all</Button>
+ *     </ButtonGroup>
  *   </Dialog.Popup>
  * </Dialog.Root>
  *
@@ -34,14 +42,25 @@ export var Dialog;
 (function (Dialog) {
     /** Closes the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
     Dialog.Close = BaseUi.Dialog.Close;
-    /**
-     * Owns the open state and renders no element. Pass `open` and `onOpenChange` to control it.
-     * Set `modal` to `false` to keep the page interactive, or to `'trap-focus'` to trap focus
-     * without locking scroll.
-     */
-    Dialog.Root = BaseUi.Dialog.Root;
     /** Opens the dialog when pressed. Renders a `<button>` unless `render` supplies another. */
     Dialog.Trigger = BaseUi.Dialog.Trigger;
+    /**
+     * Renders a 40px circular `Button` labelled "Back" with a left arrow, for step 2 onward of a
+     * flow. Place it first in a `Dialog.Nav`, and handle `onClick` to show the previous step.
+     */
+    function Back(props) {
+        return (_jsx(Button, { "aria-label": "Back", ...props, "data-dialog-back": "", shape: "icon", size: "medium", variant: "secondary", children: _jsx(ArrowLeft, {}) }));
+    }
+    Dialog.Back = Back;
+    /**
+     * Renders the content `<div>` between the header and the footer, with sections 24px apart. Past
+     * 420px it scrolls, while the header and the footer stay in place.
+     */
+    function Body(props) {
+        const { className, vars, ...attributes } = props;
+        return _jsx("div", { ...attributes, ...styles.body({ className, style: props.style, vars }) });
+    }
+    Dialog.Body = Body;
     /** Renders a `<p>` that Base UI references from the popup's `aria-describedby`. */
     function Description(props) {
         const { className, vars, ...attributes } = props;
@@ -49,31 +68,79 @@ export var Dialog;
     }
     Dialog.Description = Description;
     /**
-     * Renders the portal, scrim, viewport and popup. Narrow viewports present a bottom sheet.
-     * `ref`, `className` and `style` reach the popup. `initialFocus` and `finalFocus` override
-     * where focus moves on open and on close.
+     * Renders the `<div>` that holds a `Dialog.Title`, an optional `Dialog.Description`, and above
+     * them an optional `Dialog.Nav` and one hero, such as an `IconTile` or a `Visual`. The title
+     * renders at 20px in a `small` popup and 32px otherwise.
+     *
+     * `layout` places the parts:
+     * - `inline` (default): keeps the text clear of `closeButton`, for single-step dialogs.
+     * - `stacked`: puts a `Dialog.Nav` above left-aligned text, for step 2 onward of a flow.
+     * - `centered`: centers the hero and the text below a `Dialog.Nav`, for acknowledgments,
+     *   onboarding, progress and success.
+     */
+    function Header(props) {
+        const { className, layout, vars, ...attributes } = props;
+        return (_jsx("div", { ...attributes, ...styles.header({ className, layout, style: props.style, vars }) }));
+    }
+    Dialog.Header = Header;
+    /**
+     * Renders the 40px `<div>` row at the top of a `stacked` or `centered` header. A `Dialog.Back`
+     * takes the first cell, any other child, such as a `Stepper`, centers in the middle, and the last
+     * cell stays clear for `closeButton`.
+     */
+    function Nav(props) {
+        const { className, vars, ...attributes } = props;
+        return (_jsx("div", { ...attributes, "data-dialog-nav": "", ...styles.nav({ className, style: props.style, vars }) }));
+    }
+    Dialog.Nav = Nav;
+    /**
+     * Renders the portal, scrim, viewport and popup. `size` sets the width with the radius and
+     * padding: `small` is 400px with radius `md` and 24px padding, for one decision or outcome.
+     * `medium` (default) is 460px and `large` is 620px, both with radius `lg` and 32px padding. Viewports up to 37.5rem
+     * wide present every size at the bottom, full width with a 16px gutter. `ref`, `className` and
+     * `style` reach the popup. `initialFocus` and `finalFocus` override where focus moves on open and
+     * on close.
      */
     function Popup(props) {
-        const { children, className, closeButton = false, vars, ...attributes } = props;
-        return (_jsxs(BaseUi.Dialog.Portal, { children: [_jsx(BaseUi.Dialog.Backdrop, { ...styles.backdrop() }), _jsx(BaseUi.Dialog.Viewport, { ...styles.viewport(), children: _jsxs(BaseUi.Dialog.Popup, { ...attributes, "data-close-button": closeButton || undefined, ...styles.popup({ className, style: props.style, vars }), children: [children, closeButton && (_jsx(BaseUi.Dialog.Close, { "aria-label": "Close", render: _jsx(Button, { shape: "icon", size: "medium", variant: "secondary", ...styles.close() }), children: _jsx(CloseIcon, {}) }))] }) })] }));
+        const { children, className, closeButton = false, size, vars, ...attributes } = props;
+        return (_jsxs(BaseUi.Dialog.Portal, { children: [_jsx(BaseUi.Dialog.Backdrop, { ...styles.backdrop() }), _jsx(BaseUi.Dialog.Viewport, { ...styles.viewport(), children: _jsxs(BaseUi.Dialog.Popup, { ...attributes, "data-close-button": closeButton || undefined, "data-dialog-size": size ?? 'medium', ...styles.popup({ className, size, style: props.style, vars }), children: [children, closeButton && (_jsx(BaseUi.Dialog.Close, { "aria-label": "Close", render: _jsx(Button, { shape: "icon", size: "medium", variant: "secondary", ...styles.close() }), children: _jsx(CloseIcon, {}) }))] }) })] }));
     }
     Dialog.Popup = Popup;
-    /** Renders an `<h2>` that Base UI references from the popup's `aria-labelledby`. */
+    /**
+     * Owns the open state and renders no element. Pass `open` and `onOpenChange` to control it. The
+     * dialog is always modal: it traps focus, locks page scroll and makes the page behind inert.
+     */
+    function Root(props) {
+        return _jsx(BaseUi.Dialog.Root, { ...props });
+    }
+    Dialog.Root = Root;
+    /**
+     * Renders an `<h2>` that Base UI references from the popup's `aria-labelledby`, at 20px in a
+     * `small` popup and 32px otherwise.
+     */
     function Title(props) {
         const { className, vars, ...attributes } = props;
         return (_jsx(BaseUi.Dialog.Title, { ...attributes, ...styles.title({ className, style: props.style, vars }) }));
     }
     Dialog.Title = Title;
 })(Dialog || (Dialog = {}));
+// Drawer shares `close`, `description` and `title`. Outside a sized popup, they take the values of
+// the `small` size.
 export var styles;
 (function (styles) {
     styles.backdrop = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJV0 z_tds_2f_web-C59jJV1 z_tds_2f_web-C59jJV2 z_tds_2f_web-C59jJV3 z_tds_2f_web-C59jJV4 z_tds_2f_web-C59jJV5 z_tds_2f_web-C59jJV6 z_tds_2f_web-C59jJV7 z_tds_2f_web-C59jJV8 z_tds_2f_web-C59jJV9"});
-    // The 36px close circle is inset 22px, so it centres on the first line of the 24px-padded title.
-    styles.close = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJVa z_tds_2f_web-C59jJVb z_tds_2f_web-C59jJVc z_tds_2f_web-C59jJVd"});
-    styles.description = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJVe z_tds_2f_web-C59jJVf z_tds_2f_web-C59jJVg z_tds_2f_web-C59jJVh z_tds_2f_web-C59jJVi z_tds_2f_web-C59jJVj z_tds_2f_web-C59jJVk"});
-    styles.popup = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJVl z_tds_2f_web-C59jJVm z_tds_2f_web-C59jJVn z_tds_2f_web-C59jJVo z_tds_2f_web-C59jJVp z_tds_2f_web-C59jJVq z_tds_2f_web-C59jJVr z_tds_2f_web-C59jJVs z_tds_2f_web-C59jJVt z_tds_2f_web-C59jJVu z_tds_2f_web-C59jJVv z_tds_2f_web-C59jJVw z_tds_2f_web-C59jJVx z_tds_2f_web-C59jJVy z_tds_2f_web-C59jJVz z_tds_2f_web-C59jJV10 z_tds_2f_web-C59jJV11 z_tds_2f_web-C59jJV12 z_tds_2f_web-C59jJV13 z_tds_2f_web-C59jJV14 z_tds_2f_web-C59jJV15 z_tds_2f_web-C59jJV16 z_tds_2f_web-C59jJV17 z_tds_2f_web-C59jJV18 z_tds_2f_web-C59jJV19 z_tds_2f_web-C59jJV1a z_tds_2f_web-C59jJV1b z_tds_2f_web-C59jJV1c z_tds_2f_web-C59jJV1d z_tds_2f_web-C59jJV1e z_tds_2f_web-C59jJV1f z_tds_2f_web-C59jJV1g z_tds_2f_web-C59jJV1h z_tds_2f_web-C59jJV1i"});
-    styles.title = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJV1j z_tds_2f_web-C59jJV1k z_tds_2f_web-C59jJV1l z_tds_2f_web-C59jJV1m z_tds_2f_web-C59jJV1n z_tds_2f_web-C59jJV1o z_tds_2f_web-C59jJV1p z_tds_2f_web-C59jJV1q"});
-    styles.viewport = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJV1r z_tds_2f_web-C59jJVo z_tds_2f_web-C59jJV1s z_tds_2f_web-C59jJV1t z_tds_2f_web-C59jJV1u z_tds_2f_web-C59jJV1v z_tds_2f_web-C59jJV1w z_tds_2f_web-C59jJV1x z_tds_2f_web-C59jJV1y z_tds_2f_web-C59jJV1z"});
+    // Bleeds 4px into the popup padding with matching padding, so the scroll container keeps room
+    // for focus rings. The bottom margins are the section gaps less those 4px.
+    styles.body = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJVa z_tds_2f_web-C59jJVb z_tds_2f_web-C59jJVc z_tds_2f_web-C59jJVd z_tds_2f_web-C59jJVe z_tds_2f_web-C59jJVf z_tds_2f_web-C59jJVg z_tds_2f_web-C59jJVh z_tds_2f_web-C59jJVi z_tds_2f_web-C59jJVj z_tds_2f_web-C59jJVk z_tds_2f_web-C59jJVl"});
+    // The 40px circle sits in the popup's padding corner, which the header keeps clear.
+    styles.close = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJVm z_tds_2f_web-C59jJVn z_tds_2f_web-C59jJVo z_tds_2f_web-C59jJVp z_tds_2f_web-C59jJVq"});
+    styles.description = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJVr z_tds_2f_web-C59jJVs z_tds_2f_web-C59jJVt z_tds_2f_web-C59jJVu z_tds_2f_web-C59jJVv z_tds_2f_web-C59jJVw z_tds_2f_web-C59jJVx z_tds_2f_web-C59jJVy"});
+    styles.header = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-C59jJVa z_tds_2f_web-C59jJVb z_tds_2f_web-C59jJVz z_tds_2f_web-C59jJV10 z_tds_2f_web-C59jJV11 z_tds_2f_web-C59jJV12 z_tds_2f_web-C59jJV13 z_tds_2f_web-C59jJV14 z_tds_2f_web-C59jJV15 z_tds_2f_web-C59jJV16 z_tds_2f_web-C59jJV17"+" "+external:"z_tds_2f_web-C59jJVa z_tds_2f_web-C59jJVb z_tds_2f_web-C59jJVz z_tds_2f_web-C59jJV10 z_tds_2f_web-C59jJV11 z_tds_2f_web-C59jJV12 z_tds_2f_web-C59jJV13 z_tds_2f_web-C59jJV14 z_tds_2f_web-C59jJV15 z_tds_2f_web-C59jJV16 z_tds_2f_web-C59jJV17",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"layout")?input["layout"]:void 0;if(value===void 0)value="inline";if(value!==null&&value!==void 0)result["data-layout"]=String(value);return result});
+    styles.nav = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJV18 z_tds_2f_web-C59jJV19 z_tds_2f_web-C59jJV1a z_tds_2f_web-C59jJV1b z_tds_2f_web-C59jJV1c z_tds_2f_web-C59jJV1d z_tds_2f_web-C59jJV1e z_tds_2f_web-C59jJV1f z_tds_2f_web-C59jJV1g"});
+    // The Wallet Modal shadow has no Platform equivalent, so it stays a literal.
+    styles.popup = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-C59jJV1h z_tds_2f_web-C59jJV1i z_tds_2f_web-C59jJV1j z_tds_2f_web-C59jJV1k z_tds_2f_web-C59jJV1l z_tds_2f_web-C59jJV1m z_tds_2f_web-C59jJV1n z_tds_2f_web-C59jJV1o z_tds_2f_web-C59jJV1p z_tds_2f_web-C59jJVt z_tds_2f_web-C59jJVu z_tds_2f_web-C59jJVv z_tds_2f_web-C59jJVw z_tds_2f_web-C59jJVx z_tds_2f_web-C59jJV1q z_tds_2f_web-C59jJV1r z_tds_2f_web-C59jJV1s z_tds_2f_web-C59jJV1t z_tds_2f_web-C59jJV1u z_tds_2f_web-C59jJV1v z_tds_2f_web-C59jJV1w z_tds_2f_web-C59jJV1x z_tds_2f_web-C59jJV1y z_tds_2f_web-C59jJV1z z_tds_2f_web-C59jJV20 z_tds_2f_web-C59jJV21 z_tds_2f_web-C59jJV22 z_tds_2f_web-C59jJV23 z_tds_2f_web-C59jJV24 z_tds_2f_web-C59jJV25 z_tds_2f_web-C59jJV26 z_tds_2f_web-C59jJV27 z_tds_2f_web-C59jJV28 z_tds_2f_web-C59jJV29 z_tds_2f_web-C59jJV2a z_tds_2f_web-C59jJV2b z_tds_2f_web-C59jJV2c"+" "+external:"z_tds_2f_web-C59jJV1h z_tds_2f_web-C59jJV1i z_tds_2f_web-C59jJV1j z_tds_2f_web-C59jJV1k z_tds_2f_web-C59jJV1l z_tds_2f_web-C59jJV1m z_tds_2f_web-C59jJV1n z_tds_2f_web-C59jJV1o z_tds_2f_web-C59jJV1p z_tds_2f_web-C59jJVt z_tds_2f_web-C59jJVu z_tds_2f_web-C59jJVv z_tds_2f_web-C59jJVw z_tds_2f_web-C59jJVx z_tds_2f_web-C59jJV1q z_tds_2f_web-C59jJV1r z_tds_2f_web-C59jJV1s z_tds_2f_web-C59jJV1t z_tds_2f_web-C59jJV1u z_tds_2f_web-C59jJV1v z_tds_2f_web-C59jJV1w z_tds_2f_web-C59jJV1x z_tds_2f_web-C59jJV1y z_tds_2f_web-C59jJV1z z_tds_2f_web-C59jJV20 z_tds_2f_web-C59jJV21 z_tds_2f_web-C59jJV22 z_tds_2f_web-C59jJV23 z_tds_2f_web-C59jJV24 z_tds_2f_web-C59jJV25 z_tds_2f_web-C59jJV26 z_tds_2f_web-C59jJV27 z_tds_2f_web-C59jJV28 z_tds_2f_web-C59jJV29 z_tds_2f_web-C59jJV2a z_tds_2f_web-C59jJV2b z_tds_2f_web-C59jJV2c",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"size")?input["size"]:void 0;if(value===void 0)value="medium";if(value!==null&&value!==void 0)result["data-size"]=String(value);return result});
+    styles.title = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJV2d z_tds_2f_web-C59jJV2e z_tds_2f_web-C59jJV2f z_tds_2f_web-C59jJV2g z_tds_2f_web-C59jJV2h z_tds_2f_web-C59jJV2i z_tds_2f_web-C59jJV2j z_tds_2f_web-C59jJV2k z_tds_2f_web-C59jJV2l z_tds_2f_web-C59jJV2m z_tds_2f_web-C59jJV2n"});
+    styles.viewport = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-C59jJV2o z_tds_2f_web-C59jJV1j z_tds_2f_web-C59jJV1a z_tds_2f_web-C59jJV2p z_tds_2f_web-C59jJV2q z_tds_2f_web-C59jJVg z_tds_2f_web-C59jJV2r z_tds_2f_web-C59jJV2s z_tds_2f_web-C59jJV2t z_tds_2f_web-C59jJV2u"});
 })(styles || (styles = {}));
 //# sourceMappingURL=Dialog.js.map
 import './Dialog.css';

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

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