@tempoxyz/ds 0.2.6 → 0.3.1

package/dist/web/components/Surface.css

@@ -1 +1 @@
-.z_tds_2f_web-jv6_qA0{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z_tds_2f_web-jv6_qA1{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-jv6_qA2{&+*{margin-block-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-jv6_qA3{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-jv6_qA4{font-size:var(--z-tds_2f_web-typography-copy-15-fontSize,15px)}.z_tds_2f_web-jv6_qA5{font-weight:var(--z-tds_2f_web-typography-copy-15-fontWeight,450)}.z_tds_2f_web-jv6_qA6{letter-spacing:var(--z-tds_2f_web-typography-copy-15-letterSpacing,-.13px)}.z_tds_2f_web-jv6_qA7{line-height:var(--z-tds_2f_web-typography-copy-15-lineHeight,24px)}.z_tds_2f_web-jv6_qA8{align-items:center}.z_tds_2f_web-jv6_qA9{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-jv6_qAa{display:flex}.z_tds_2f_web-jv6_qAb{justify-content:space-between}.z_tds_2f_web-jv6_qAc{margin-block-end:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-jv6_qAd{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-jv6_qAe{&>[data-variant=text]:not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_20,-1.25rem)}}.z_tds_2f_web-jv6_qAf{&>[data-variant=text][data-size=small]:not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}.z_tds_2f_web-jv6_qAg{&>[data-variant=text][data-size=large]:not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}.z_tds_2f_web-jv6_qAh{[data-surface-size=medium]>&>[data-variant=text]:is([data-size=medium],[data-size=large]):not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}.z_tds_2f_web-jv6_qAi{[data-surface-size=small]>&>[data-variant=text]:is([data-size=medium],[data-size=large]):not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}.z_tds_2f_web-jv6_qAj{align-items:flex-start}.z_tds_2f_web-jv6_qAk{flex-direction:column}.z_tds_2f_web-jv6_qAl{row-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-jv6_qAm{&>:is(a,button){appearance:none}}.z_tds_2f_web-jv6_qAn{&>:is(a,button){background-color:#0000}}.z_tds_2f_web-jv6_qAo{&>:is(a,button){border:none}}.z_tds_2f_web-jv6_qAp{&>:is(a,button){border-radius:var(--z-tds_2f_web-radius-2,.125rem)}}.z_tds_2f_web-jv6_qAq{&>:is(a,button){color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}}.z_tds_2f_web-jv6_qAr{&>:is(a,button){cursor:pointer}}.z_tds_2f_web-jv6_qAs{&>:is(a,button){font:inherit}}.z_tds_2f_web-jv6_qAt{&>:is(a,button){outline-color:#0000}}.z_tds_2f_web-jv6_qAu{&>:is(a,button){outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-jv6_qAv{&>:is(a,button){outline-style:solid}}.z_tds_2f_web-jv6_qAw{&>:is(a,button){outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}}.z_tds_2f_web-jv6_qAx{&>:is(a,button){padding:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-jv6_qAy{&>:is(a,button){text-decoration-color:#0000}}.z_tds_2f_web-jv6_qAz{&>:is(a,button){text-decoration-line:underline}}.z_tds_2f_web-jv6_qA10{&>:is(a,button){text-decoration-thickness:1px}}.z_tds_2f_web-jv6_qA11{&>:is(a,button){text-underline-offset:4px}}.z_tds_2f_web-jv6_qA12{&>:is(a,button){transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}.z_tds_2f_web-jv6_qA13{&>:is(a,button){transition-property:color,outline-color,text-decoration-color}}.z_tds_2f_web-jv6_qA14{&>:is(a,button){transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}.z_tds_2f_web-jv6_qA15{&>:is(a,button):hover{text-decoration-color:currentColor}}.z_tds_2f_web-jv6_qA16{&>:is(a,button):focus-visible{outline-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}}.z_tds_2f_web-jv6_qA17{font-family:var(--z-tds_2f_web-typography-label-16-strong-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-jv6_qA18{font-size:var(--z-tds_2f_web-typography-label-16-strong-fontSize,16px)}.z_tds_2f_web-jv6_qA19{font-weight:var(--z-tds_2f_web-typography-label-16-strong-fontWeight,500)}.z_tds_2f_web-jv6_qA1a{letter-spacing:var(--z-tds_2f_web-typography-label-16-strong-letterSpacing,-.18px)}.z_tds_2f_web-jv6_qA1b{line-height:var(--z-tds_2f_web-typography-label-16-strong-lineHeight,20px)}.z_tds_2f_web-jv6_qA1c{background-color:var(--z-tds_2f_web-color-background-surface,light-dark(#fff,#1a1919))}.z_tds_2f_web-jv6_qA1d{box-sizing:border-box}.z_tds_2f_web-jv6_qA1e{color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}.z_tds_2f_web-jv6_qA1f{display:block}.z_tds_2f_web-jv6_qA1g{outline-color:#0000}.z_tds_2f_web-jv6_qA1h{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-jv6_qA1i{outline-style:solid}.z_tds_2f_web-jv6_qA1j{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-jv6_qA1k{text-align:start}.z_tds_2f_web-jv6_qA1l{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-jv6_qA1m{transition-property:background-color,opacity,outline-color,outline-offset,scale}.z_tds_2f_web-jv6_qA1n{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-jv6_qA1o{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-jv6_qA1p{font-size:var(--z-tds_2f_web-typography-copy-14-fontSize,14px)}.z_tds_2f_web-jv6_qA1q{font-weight:var(--z-tds_2f_web-typography-copy-14-fontWeight,450)}.z_tds_2f_web-jv6_qA1r{letter-spacing:var(--z-tds_2f_web-typography-copy-14-letterSpacing,-.09px)}.z_tds_2f_web-jv6_qA1s{line-height:var(--z-tds_2f_web-typography-copy-14-lineHeight,20px)}.z_tds_2f_web-jv6_qA1t{&:is(button,a[href],[role=button]){border:none}}.z_tds_2f_web-jv6_qA1u{&:is(button,a[href],[role=button]){cursor:pointer}}.z_tds_2f_web-jv6_qA1v{&:is(button,a[href],[role=button]){text-decoration:none}}.z_tds_2f_web-jv6_qA1w{&:is(button,a[href],[role=button]){width:100%}}.z_tds_2f_web-jv6_qA1x{&:is(button,a[href],[role=button]):hover:not(:disabled,[aria-disabled=true]){background-color:var(--z-tds_2f_web-color-gray-100,light-dark(#f2f2f2,#1f1e1e))}}.z_tds_2f_web-jv6_qA1y{&:is(button,a[href],[role=button]):active:not(:disabled,[aria-disabled=true]){background-color:var(--z-tds_2f_web-color-gray-200,light-dark(#ebebeb,#252424))}}.z_tds_2f_web-jv6_qA1z{&:is(button,a[href],[role=button]):active:not(:disabled,[aria-disabled=true]){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-jv6_qA20{&:is(button,a[href],[role=button]):focus-visible{outline-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}}.z_tds_2f_web-jv6_qA21{&:is(button,a[href],[role=button]):focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-jv6_qA22{&:has(>[data-rows]){overflow:hidden}}.z_tds_2f_web-jv6_qA23{&:has(>table){overflow:clip}}.z_tds_2f_web-jv6_qA24{&>table:last-child>caption{padding-block-end:0}}.z_tds_2f_web-jv6_qA25{&>table:last-child:not(:has(>caption))>tbody>tr:last-child>td{height:auto}}.z_tds_2f_web-jv6_qA26{&>table[data-size=large]:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-start:var(--z-tds_2f_web-spacing-18,1.125rem)}}.z_tds_2f_web-jv6_qA27{&>table[data-size=medium]:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-start:var(--z-tds_2f_web-spacing-10,.625rem)}}.z_tds_2f_web-jv6_qA28{&>table[data-size=small]:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-start:var(--z-tds_2f_web-spacing-6,.375rem)}}.z_tds_2f_web-jv6_qA29{&:disabled,&[aria-disabled=true]{cursor:default}}.z_tds_2f_web-jv6_qA2a{&:disabled,&[aria-disabled=true]{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}.z_tds_2f_web-jv6_qA2b{&:disabled,&[aria-disabled=true]{pointer-events:none}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-jv6_qA2c{transition-property:background-color,opacity,outline-color}.z_tds_2f_web-jv6_qA2d{&:is(button,a[href],[role=button]):active:not(:disabled,[aria-disabled=true]){scale:none}}}.z_tds_2f_web-jv6_qA2e{&:where([data-size=large]){border-radius:var(--z-tds_2f_web-radius-16,1rem)}}.z_tds_2f_web-jv6_qA2f{&:where([data-size=large]){padding:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-jv6_qA2g{&:where([data-size=large]){&>table,&>[data-rows]{margin-inline:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2h{&:where([data-size=large]){&>[data-rows]{margin-block:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA2i{&:where([data-size=large]){&>[data-rows]:first-child{margin-block-start:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2j{&:where([data-size=large]){&>[data-rows]:last-child{margin-block-end:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2k{&:where([data-size=large]){&>table{width:calc(100% + var(--z-tds_2f_web-spacing-48,3rem))}}}.z_tds_2f_web-jv6_qA2l{&:where([data-size=large]){&>table>caption,&>table tr>:first-child{padding-inline-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-jv6_qA2m{&:where([data-size=large]){&>table tr>:last-child{padding-inline-end:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-jv6_qA2n{&:where([data-size=large]){&>table:first-child:has(>thead){margin-block-start:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2o{&:where([data-size=large]){&>table:first-child>thead>tr:first-child>th{padding-block-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-jv6_qA2p{&:where([data-size=large]){&>table:last-child:not(:has(>caption)){margin-block-end:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2q{&:where([data-size=large]){&>table:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-end:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-jv6_qA2r{&:where([data-size=medium]){border-radius:var(--z-tds_2f_web-radius-12,.75rem)}}.z_tds_2f_web-jv6_qA2s{&:where([data-size=medium]){padding:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-jv6_qA2t{&:where([data-size=medium]){&>table,&>[data-rows]{margin-inline:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA2u{&:where([data-size=medium]){&>[data-rows]{margin-block:var(--z-tds_2f_web-spacing-_2d_8,-.5rem)}}}.z_tds_2f_web-jv6_qA2v{&:where([data-size=medium]){&>[data-rows]:first-child{margin-block-start:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA2w{&:where([data-size=medium]){&>[data-rows]:last-child{margin-block-end:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA2x{&:where([data-size=medium]){&>table{width:calc(100% + var(--z-tds_2f_web-spacing-32,2rem))}}}.z_tds_2f_web-jv6_qA2y{&:where([data-size=medium]){&>table>caption,&>table tr>:first-child{padding-inline-start:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-jv6_qA2z{&:where([data-size=medium]){&>table tr>:last-child{padding-inline-end:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-jv6_qA30{&:where([data-size=medium]){&>table:first-child:has(>thead){margin-block-start:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA31{&:where([data-size=medium]){&>table:first-child>thead>tr:first-child>th{padding-block-start:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-jv6_qA32{&:where([data-size=medium]){&>table:last-child:not(:has(>caption)){margin-block-end:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA33{&:where([data-size=medium]){&>table:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-end:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-jv6_qA34{&:where([data-size=small]){border-radius:var(--z-tds_2f_web-radius-8,.5rem)}}.z_tds_2f_web-jv6_qA35{&:where([data-size=small]){padding:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-jv6_qA36{&:where([data-size=small]){&>table,&>[data-rows]{margin-inline:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA37{&:where([data-size=small]){&>[data-rows]{margin-block:var(--z-tds_2f_web-spacing-_2d_6,-.375rem)}}}.z_tds_2f_web-jv6_qA38{&:where([data-size=small]){&>[data-rows]:first-child{margin-block-start:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA39{&:where([data-size=small]){&>[data-rows]:last-child{margin-block-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3a{&:where([data-size=small]){&>table{width:calc(100% + var(--z-tds_2f_web-spacing-24,1.5rem))}}}.z_tds_2f_web-jv6_qA3b{&:where([data-size=small]){&>table>caption,&>table tr>:first-child{padding-inline-start:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-jv6_qA3c{&:where([data-size=small]){&>table tr>:last-child{padding-inline-end:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-jv6_qA3d{&:where([data-size=small]){&>table:first-child:has(>thead){margin-block-start:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3e{&:where([data-size=small]){&>table:first-child>thead>tr:first-child>th{padding-block-start:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-jv6_qA3f{&:where([data-size=small]){&>table:last-child:not(:has(>caption)){margin-block-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3g{&:where([data-size=small]){&>table:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-end:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-jv6_qA3h{align-items:center}.z_tds_2f_web-jv6_qA3i{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-jv6_qA3j{display:flex}.z_tds_2f_web-jv6_qA3k{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-jv6_qA3l{&>svg{flex-shrink:0}}.z_tds_2f_web-jv6_qA3m{&>svg{font-size:var(--z-tds_2f_web-fontSize-24,1.5rem)}}.z_tds_2f_web-jv6_qA3n{font-family:var(--z-tds_2f_web-typography-heading-20-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-jv6_qA3o{font-size:var(--z-tds_2f_web-typography-heading-20-fontSize,20px)}.z_tds_2f_web-jv6_qA3p{font-weight:var(--z-tds_2f_web-typography-heading-20-fontWeight,600)}.z_tds_2f_web-jv6_qA3q{letter-spacing:var(--z-tds_2f_web-typography-heading-20-letterSpacing,-.33px)}.z_tds_2f_web-jv6_qA3r{line-height:var(--z-tds_2f_web-typography-heading-20-lineHeight,26px)}
+.z_tds_2f_web-jv6_qA0{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-jv6_qA1{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-jv6_qA2{&+*{margin-block-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-jv6_qA3{font-family:var(--z-tds_2f_web-typography-body-b1-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-jv6_qA4{font-size:var(--z-tds_2f_web-typography-body-b1-fontSize,16px)}.z_tds_2f_web-jv6_qA5{font-weight:var(--z-tds_2f_web-typography-body-b1-fontWeight,400)}.z_tds_2f_web-jv6_qA6{letter-spacing:var(--z-tds_2f_web-typography-body-b1-letterSpacing,.12px)}.z_tds_2f_web-jv6_qA7{line-height:var(--z-tds_2f_web-typography-body-b1-lineHeight,22px)}.z_tds_2f_web-jv6_qA8{align-items:center}.z_tds_2f_web-jv6_qA9{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-jv6_qAa{display:flex}.z_tds_2f_web-jv6_qAb{justify-content:space-between}.z_tds_2f_web-jv6_qAc{margin-block-end:var(--z-tds_2f_web-spacing-20,1.25rem)}.z_tds_2f_web-jv6_qAd{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-jv6_qAe{&>[data-variant=tertiary]:not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}.z_tds_2f_web-jv6_qAf{&>[data-variant=tertiary][data-size=small]:not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}.z_tds_2f_web-jv6_qAg{&>[data-variant=tertiary][data-size=xsmall]:not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}.z_tds_2f_web-jv6_qAh{[data-surface-size=medium]>&>[data-variant=tertiary]:is([data-size=medium],[data-size=large]):not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}.z_tds_2f_web-jv6_qAi{[data-surface-size=small]>&>[data-variant=tertiary]:is([data-size=small],[data-size=medium],[data-size=large]):not([data-shape=icon]):last-child{margin-inline-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}.z_tds_2f_web-jv6_qAj{align-items:flex-start}.z_tds_2f_web-jv6_qAk{flex-direction:column}.z_tds_2f_web-jv6_qAl{row-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-jv6_qAm{&>:is(a,button){appearance:none}}.z_tds_2f_web-jv6_qAn{&>:is(a,button){background-color:#0000}}.z_tds_2f_web-jv6_qAo{&>:is(a,button){border:none}}.z_tds_2f_web-jv6_qAp{&>:is(a,button){border-radius:var(--z-tds_2f_web-radius-3xs,calc(.25rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-jv6_qAq{&>:is(a,button){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-jv6_qAr{&>:is(a,button){cursor:pointer}}.z_tds_2f_web-jv6_qAs{&>:is(a,button){font:inherit}}.z_tds_2f_web-jv6_qAt{&>:is(a,button){outline-color:#0000}}.z_tds_2f_web-jv6_qAu{&>:is(a,button){outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-jv6_qAv{&>:is(a,button){outline-style:solid}}.z_tds_2f_web-jv6_qAw{&>:is(a,button){outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}}.z_tds_2f_web-jv6_qAx{&>:is(a,button){padding:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-jv6_qAy{&>:is(a,button){text-decoration-color:#0000}}.z_tds_2f_web-jv6_qAz{&>:is(a,button){text-decoration-line:underline}}.z_tds_2f_web-jv6_qA10{&>:is(a,button){text-decoration-thickness:1px}}.z_tds_2f_web-jv6_qA11{&>:is(a,button){text-underline-offset:4px}}.z_tds_2f_web-jv6_qA12{&>:is(a,button){transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}.z_tds_2f_web-jv6_qA13{&>:is(a,button){transition-property:color,outline-color,text-decoration-color}}.z_tds_2f_web-jv6_qA14{&>:is(a,button){transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}.z_tds_2f_web-jv6_qA15{&>:is(a,button):hover{text-decoration-color:currentColor}}.z_tds_2f_web-jv6_qA16{&>:is(a,button):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-jv6_qA17{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-jv6_qA18{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}.z_tds_2f_web-jv6_qA19{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}.z_tds_2f_web-jv6_qA1a{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,.12px)}.z_tds_2f_web-jv6_qA1b{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}.z_tds_2f_web-jv6_qA1c{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-jv6_qA1d{border-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-jv6_qA1e{border-style:solid}.z_tds_2f_web-jv6_qA1f{border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}.z_tds_2f_web-jv6_qA1g{box-sizing:border-box}.z_tds_2f_web-jv6_qA1h{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-jv6_qA1i{display:block}.z_tds_2f_web-jv6_qA1j{outline-color:#0000}.z_tds_2f_web-jv6_qA1k{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-jv6_qA1l{outline-style:solid}.z_tds_2f_web-jv6_qA1m{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-jv6_qA1n{text-align:start}.z_tds_2f_web-jv6_qA1o{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-jv6_qA1p{transition-property:background-color,opacity,outline-color,outline-offset,scale}.z_tds_2f_web-jv6_qA1q{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-jv6_qA1r{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-jv6_qA1s{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-jv6_qA1t{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-jv6_qA1u{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-jv6_qA1v{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-jv6_qA1w{&:is(button,a[href],[role=button]){cursor:pointer}}.z_tds_2f_web-jv6_qA1x{&:is(button,a[href],[role=button]){text-decoration:none}}.z_tds_2f_web-jv6_qA1y{&:is(button,a[href],[role=button]){width:100%}}.z_tds_2f_web-jv6_qA1z{&:is(button,a[href],[role=button]):hover:not(:disabled,[aria-disabled=true]){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-jv6_qA20{&:is(button,a[href],[role=button]):active:not(:disabled,[aria-disabled=true]){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-jv6_qA21{&:is(button,a[href],[role=button]):active:not(:disabled,[aria-disabled=true]){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-jv6_qA22{&:is(button,a[href],[role=button]):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-jv6_qA23{&:is(button,a[href],[role=button]):focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-jv6_qA24{&:has(>table){border-style:none}}.z_tds_2f_web-jv6_qA25{&:has(>table){overflow:clip}}.z_tds_2f_web-jv6_qA26{&>[data-list-group][data-variant=plain]{display:grid}}.z_tds_2f_web-jv6_qA27{&>[data-list-group][data-variant=plain]{grid-auto-rows:1fr}}.z_tds_2f_web-jv6_qA28{&>[data-list-group][data-variant=plain]{grid-template-columns:minmax(0,1fr)}}.z_tds_2f_web-jv6_qA29{&>[data-list-group][data-variant=plain]>[data-divider]{border-radius:var(--z-tds_2f_web-radius-none,var(--z-tds_2f_web-spacing-0,0rem))}}.z_tds_2f_web-jv6_qA2a{&>[data-list-group][data-variant=plain]>[data-divider]{min-height:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-jv6_qA2b{&>[data-list-group][data-variant=plain]>[data-divider]{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-jv6_qA2c{&>[data-list-group][data-variant=plain]>[data-divider]:has([data-info]){padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-jv6_qA2d{&>[data-list-group][data-variant=plain]>[data-divider]:has([role=meter]){padding-block:var(--z-tds_2f_web-spacing-10,.625rem)}}.z_tds_2f_web-jv6_qA2e{&>[data-list-group][data-variant=plain]>[data-divider]:is(:hover,:active){box-shadow:none}}.z_tds_2f_web-jv6_qA2f{&>[data-surface-header]+[data-list-group][data-variant=plain]:has(>[data-divider]){margin-block-start:-.875rem}}.z_tds_2f_web-jv6_qA2g{&>table{margin-inline:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}.z_tds_2f_web-jv6_qA2h{&>table{width:calc(100% + var(--z-tds_2f_web-spacing-24,1.5rem))}}.z_tds_2f_web-jv6_qA2i{&>table:last-child>caption{padding-block-end:0}}.z_tds_2f_web-jv6_qA2j{&>table:last-child:not(:has(>caption)){margin-block-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}.z_tds_2f_web-jv6_qA2k{&>table:last-child:not(:has(>caption))>tbody>tr:last-child>td{height:auto}}.z_tds_2f_web-jv6_qA2l{&>table:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-end:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-jv6_qA2m{&>table[data-size=large]:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-start:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-jv6_qA2n{&>table[data-size=medium]:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-start:var(--z-tds_2f_web-spacing-10,.625rem)}}.z_tds_2f_web-jv6_qA2o{&>table[data-size=small]:last-child:not(:has(>caption))>tbody>tr:last-child>td{padding-block-start:var(--z-tds_2f_web-spacing-6,.375rem)}}.z_tds_2f_web-jv6_qA2p{&:disabled,&[aria-disabled=true]{cursor:default}}.z_tds_2f_web-jv6_qA2q{&:disabled,&[aria-disabled=true]{opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}.z_tds_2f_web-jv6_qA2r{&:disabled,&[aria-disabled=true]{pointer-events:none}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-jv6_qA2s{transition-property:background-color,opacity,outline-color}.z_tds_2f_web-jv6_qA2t{&:is(button,a[href],[role=button]):active:not(:disabled,[aria-disabled=true]){scale:none}}}.z_tds_2f_web-jv6_qA2u{&:where([data-size=large]){border-radius:var(--z-tds_2f_web-radius-md,calc(1.5rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-jv6_qA2v{&:where([data-size=large]){padding:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-jv6_qA2w{&:where([data-size=large]){&>table:first-child:has(>thead){margin-block-start:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2x{&:where([data-size=large]){&>[data-list-group][data-variant=plain]{margin-inline:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2y{&:where([data-size=large]){&>[data-list-group][data-variant=plain]:first-child:has(>[data-divider]){margin-block-start:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA2z{&:where([data-size=large]){&>[data-list-group][data-variant=plain]:last-child:has(>[data-divider]){margin-block-end:var(--z-tds_2f_web-spacing-_2d_24,-1.5rem)}}}.z_tds_2f_web-jv6_qA30{&:where([data-size=large]){&>[data-list-group][data-variant=plain]:first-child>[data-divider]:first-child{border-start-end-radius:calc(var(--z-tds_2f_web-radius-md,calc(1.5rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA31{&:where([data-size=large]){&>[data-list-group][data-variant=plain]:first-child>[data-divider]:first-child{border-start-start-radius:calc(var(--z-tds_2f_web-radius-md,calc(1.5rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA32{&:where([data-size=large]){&>[data-list-group][data-variant=plain]:last-child>[data-divider]:last-child{border-end-end-radius:calc(var(--z-tds_2f_web-radius-md,calc(1.5rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA33{&:where([data-size=large]){&>[data-list-group][data-variant=plain]:last-child>[data-divider]:last-child{border-end-start-radius:calc(var(--z-tds_2f_web-radius-md,calc(1.5rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA34{&:where([data-size=large]){&>[data-list-group][data-variant=plain]>[data-divider]{padding-inline:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-jv6_qA35{&:where([data-size=large]){&>table:first-child>thead>tr:first-child>th{padding-block-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-jv6_qA36{&:where([data-size=medium]){border-radius:var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-jv6_qA37{&:where([data-size=medium]){padding:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-jv6_qA38{&:where([data-size=medium]){&>table:first-child:has(>thead){margin-block-start:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA39{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]{margin-inline:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA3a{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]:first-child:has(>[data-divider]){margin-block-start:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA3b{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]:last-child:has(>[data-divider]){margin-block-end:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}}}.z_tds_2f_web-jv6_qA3c{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]:first-child>[data-divider]:first-child{border-start-end-radius:calc(var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3d{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]:first-child>[data-divider]:first-child{border-start-start-radius:calc(var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3e{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]:last-child>[data-divider]:last-child{border-end-end-radius:calc(var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3f{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]:last-child>[data-divider]:last-child{border-end-start-radius:calc(var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3g{&:where([data-size=medium]){&>[data-list-group][data-variant=plain]>[data-divider]{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-jv6_qA3h{&:where([data-size=medium]){&>table:first-child>thead>tr:first-child>th{padding-block-start:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-jv6_qA3i{&:where([data-size=small]){border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-jv6_qA3j{&:where([data-size=small]){padding:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-jv6_qA3k{&:where([data-size=small]){&>table:first-child:has(>thead){margin-block-start:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3l{&:where([data-size=small]){&>[data-list-group][data-variant=plain]{margin-inline:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3m{&:where([data-size=small]){&>[data-list-group][data-variant=plain]:first-child:has(>[data-divider]){margin-block-start:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3n{&:where([data-size=small]){&>[data-list-group][data-variant=plain]:last-child:has(>[data-divider]){margin-block-end:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}}}.z_tds_2f_web-jv6_qA3o{&:where([data-size=small]){&>[data-list-group][data-variant=plain]:first-child>[data-divider]:first-child{border-start-end-radius:calc(var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3p{&:where([data-size=small]){&>[data-list-group][data-variant=plain]:first-child>[data-divider]:first-child{border-start-start-radius:calc(var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3q{&:where([data-size=small]){&>[data-list-group][data-variant=plain]:last-child>[data-divider]:last-child{border-end-end-radius:calc(var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3r{&:where([data-size=small]){&>[data-list-group][data-variant=plain]:last-child>[data-divider]:last-child{border-end-start-radius:calc(var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1))) - 1px)}}}.z_tds_2f_web-jv6_qA3s{&:where([data-size=small]){&>[data-list-group][data-variant=plain]>[data-divider]{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-jv6_qA3t{&:where([data-size=small]){&>table:first-child>thead>tr:first-child>th{padding-block-start:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-jv6_qA3u{align-items:center}.z_tds_2f_web-jv6_qA3v{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-jv6_qA3w{display:flex}.z_tds_2f_web-jv6_qA3x{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-jv6_qA3y{&>svg{flex-shrink:0}}.z_tds_2f_web-jv6_qA3z{&>svg{font-size:var(--z-tds_2f_web-fontSize-24,1.5rem)}}.z_tds_2f_web-jv6_qA40{[data-surface-size]:has(>table)>&,[data-surface-size]:has(>table)>*>&{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-jv6_qA41{[data-surface-size]:has(>table)>&,[data-surface-size]:has(>table)>*>&{font-size:var(--z-tds_2f_web-typography-heading-h3-fontSize,20px)}}.z_tds_2f_web-jv6_qA42{[data-surface-size]:has(>table)>&,[data-surface-size]:has(>table)>*>&{font-weight:var(--z-tds_2f_web-typography-heading-h3-fontWeight,500)}}.z_tds_2f_web-jv6_qA43{[data-surface-size]:has(>table)>&,[data-surface-size]:has(>table)>*>&{letter-spacing:var(--z-tds_2f_web-typography-heading-h3-letterSpacing,-.3px)}}.z_tds_2f_web-jv6_qA44{[data-surface-size]:has(>table)>&,[data-surface-size]:has(>table)>*>&{line-height:var(--z-tds_2f_web-typography-heading-h3-lineHeight,23px)}}.z_tds_2f_web-jv6_qA45{font-family:var(--z-tds_2f_web-typography-body-b2Strong-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-jv6_qA46{font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}.z_tds_2f_web-jv6_qA47{font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}.z_tds_2f_web-jv6_qA48{letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,.14px)}.z_tds_2f_web-jv6_qA49{line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}

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

@@ -2,14 +2,18 @@ import { useRender } from '@base-ui/react/use-render';
 import type { ComponentPropsWithRef } from 'react';
 import type * as zyzz from 'zyzz';
 /**
- * A card container that renders a `div` by default. Pass `render` to swap the element, such as a
- * `section`, `button` or link. A `button`, `a[href]` or `role="button"` surface gains hover, press
- * and focus-visible styles and spans the full width.
+ * A card container that renders a `div` with a 1px border inside its edge by default. Pass
+ * `render` to swap the element, such as a `section`, `button` or link. A `button`, `a[href]` or
+ * `role="button"` surface gains hover, press and focus-visible styles and spans the full width.
  *
- * - `size` sets the corner radius and padding together.
+ * - `size` sets the corner radius and padding together, at the same value.
  * - Name the card with `Surface.Title`, which renders an `h2`, so headings keep the card navigable.
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
- * - A direct child `table` or `Rows` bleeds into the padding, so row fills reach the edges.
+ * - A direct child `table` bleeds 12px into the padding at the sides and the bottom, as rows pad
+ *   their cells, so its text stays on the content edge. The surface draws no border around it.
+ * - A direct child `plain` `ListGroup` bleeds into the padding, so a hover fill reaches the edges.
+ *   Each row is 44px, pads its sides by the surface's padding, and shares the height of the
+ *   tallest row.
  *
  * @example
  * <Surface>
@@ -31,7 +35,10 @@ export declare namespace Surface {
     namespace Description {
         type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.description>;
     }
-    /** A row above the content holding a `Surface.Title` and, at the end, any actions. */
+    /**
+     * A row above the content holding a `Surface.Title` and, at the end, any actions, with 20px of
+     * space below it.
+     */
     function Header(props: Header.Props): import("react").JSX.Element;
     namespace Header {
         type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.header>;
@@ -48,7 +55,10 @@ export declare namespace Surface {
          */
         disabled?: boolean | undefined;
     };
-    /** The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. */
+    /**
+     * The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. In a surface that
+     * holds a direct child `table`, the title renders at the size of a section heading.
+     */
     function Title(props: Title.Props): import("react").JSX.Element;
     namespace Title {
         type Props = ComponentPropsWithRef<'h2'> & zyzz.Props.Variants<typeof styles.title>;
@@ -57,14 +67,14 @@ export declare namespace Surface {
 declare namespace styles {
     const description: zyzz.variants.ReturnType<{
         readonly base: {
-            readonly color: "gray.900";
+            readonly color: "content.secondary";
             readonly margin: "0";
             readonly selectors: {
                 readonly '& + *': {
                     readonly marginBlockStart: "24";
                 };
             };
-            readonly typography: "copy.15";
+            readonly typography: "body.b1";
         };
     }, "react">;
     const header: zyzz.variants.ReturnType<{
@@ -73,22 +83,22 @@ declare namespace styles {
             readonly columnGap: "16";
             readonly display: "flex";
             readonly justifyContent: "space-between";
-            readonly marginBlockEnd: "16";
+            readonly marginBlockEnd: "20";
             readonly minWidth: "0";
             readonly selectors: {
-                readonly '& > [data-variant="text"]:not([data-shape="icon"]):last-child': {
-                    readonly marginInlineEnd: "-20";
+                readonly '& > [data-variant="tertiary"]:not([data-shape="icon"]):last-child': {
+                    readonly marginInlineEnd: "-24";
                 };
-                readonly '& > [data-variant="text"][data-size="small"]:not([data-shape="icon"]):last-child': {
-                    readonly marginInlineEnd: "-12";
+                readonly '& > [data-variant="tertiary"][data-size="small"]:not([data-shape="icon"]):last-child': {
+                    readonly marginInlineEnd: "-16";
                 };
-                readonly '& > [data-variant="text"][data-size="large"]:not([data-shape="icon"]):last-child': {
-                    readonly marginInlineEnd: "-24";
+                readonly '& > [data-variant="tertiary"][data-size="xsmall"]:not([data-shape="icon"]):last-child': {
+                    readonly marginInlineEnd: "-12";
                 };
-                readonly '[data-surface-size="medium"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child': {
+                readonly '[data-surface-size="medium"] > & > [data-variant="tertiary"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child': {
                     readonly marginInlineEnd: "-16";
                 };
-                readonly '[data-surface-size="small"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child': {
+                readonly '[data-surface-size="small"] > & > [data-variant="tertiary"]:is([data-size="small"], [data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child': {
                     readonly marginInlineEnd: "-12";
                 };
             };
@@ -105,8 +115,8 @@ declare namespace styles {
                     readonly appearance: "none !custom";
                     readonly backgroundColor: "transparent !custom";
                     readonly border: "none !custom";
-                    readonly borderRadius: "2";
-                    readonly color: "foreground";
+                    readonly borderRadius: "3xs";
+                    readonly color: "content.primary";
                     readonly cursor: "pointer";
                     readonly font: "inherit !custom";
                     readonly outlineColor: "transparent !custom";
@@ -126,17 +136,20 @@ declare namespace styles {
                     readonly textDecorationColor: "currentColor !custom";
                 };
                 readonly '& > :is(a, button):focus-visible': {
-                    readonly outlineColor: "blue.700";
+                    readonly outlineColor: "border.focus";
                 };
             };
-            readonly typography: "label.16.strong";
+            readonly typography: "body.b1Strong";
         };
     }, "react">;
     const surface: zyzz.variants.ReturnType<{
         readonly base: {
-            readonly backgroundColor: "background.surface";
+            readonly backgroundColor: "background.elevated";
+            readonly borderColor: "line.secondary";
+            readonly borderStyle: "solid";
+            readonly borderWidth: "regular";
             readonly boxSizing: "border-box";
-            readonly color: "foreground";
+            readonly color: "content.primary";
             readonly display: "block";
             readonly outlineColor: "transparent !custom";
             readonly outlineOffset: "0";
@@ -146,39 +159,66 @@ declare namespace styles {
             readonly transitionDuration: "160";
             readonly transitionProperty: "background-color, opacity, outline-color, outline-offset, scale";
             readonly transitionTimingFunction: "snappy";
-            readonly typography: "copy.14";
+            readonly typography: "body.b2";
             readonly selectors: {
                 readonly '&:is(button, a[href], [role="button"])': {
-                    readonly border: "none !custom";
                     readonly cursor: "pointer";
                     readonly textDecoration: "none !custom";
                     readonly width: "100% !custom";
                 };
                 readonly '&:is(button, a[href], [role="button"]):hover:not(:disabled, [aria-disabled="true"])': {
-                    readonly backgroundColor: "gray.100";
+                    readonly backgroundColor: "container.regular";
                 };
                 readonly '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
-                    readonly backgroundColor: "gray.200";
+                    readonly backgroundColor: "container.strong";
                     readonly scale: "press";
                 };
                 readonly '&:is(button, a[href], [role="button"]):focus-visible': {
-                    readonly outlineColor: "blue.700";
+                    readonly outlineColor: "border.focus";
                     readonly outlineOffset: "2";
                 };
-                readonly '&:has(> [data-rows])': {
-                    readonly overflow: "hidden";
-                };
                 readonly '&:has(> table)': {
+                    readonly borderStyle: "none";
                     readonly overflow: "clip !custom";
                 };
+                readonly '& > [data-list-group][data-variant="plain"]': {
+                    readonly display: "grid";
+                    readonly gridAutoRows: "1fr !custom";
+                    readonly gridTemplateColumns: "minmax(0, 1fr) !custom";
+                };
+                readonly '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                    readonly borderRadius: "none";
+                    readonly minHeight: "44";
+                    readonly paddingBlock: "4";
+                };
+                readonly '& > [data-list-group][data-variant="plain"] > [data-divider]:has([data-info])': {
+                    readonly paddingBlock: "12";
+                };
+                readonly '& > [data-list-group][data-variant="plain"] > [data-divider]:has([role="meter"])': {
+                    readonly paddingBlock: "10";
+                };
+                readonly '& > [data-list-group][data-variant="plain"] > [data-divider]:is(:hover, :active)': {
+                    readonly boxShadow: "none !custom";
+                };
+                readonly '& > [data-surface-header] + [data-list-group][data-variant="plain"]:has(> [data-divider])': {
+                    readonly marginBlockStart: "calc((1rem - 2.75rem) / 2) !custom";
+                };
+                readonly '& > table': {
+                    readonly marginInline: "-12";
+                    readonly width: `calc(100% + ${string}) !custom`;
+                };
                 readonly '& > table:last-child > caption': {
                     readonly paddingBlockEnd: "0px !custom";
                 };
+                readonly '& > table:last-child:not(:has(> caption))': {
+                    readonly marginBlockEnd: "-12";
+                };
                 readonly '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
                     readonly height: "auto !custom";
+                    readonly paddingBlockEnd: "12";
                 };
                 readonly '& > table[data-size="large"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                    readonly paddingBlockStart: "18";
+                    readonly paddingBlockStart: "20";
                 };
                 readonly '& > table[data-size="medium"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
                     readonly paddingBlockStart: "10";
@@ -207,120 +247,99 @@ declare namespace styles {
         readonly variants: {
             readonly size: {
                 readonly large: {
-                    readonly borderRadius: "16";
+                    readonly borderRadius: "md";
                     readonly padding: "24";
                     readonly selectors: {
-                        readonly '& > table, & > [data-rows]': {
-                            readonly marginInline: "-24";
+                        readonly '& > table:first-child:has(> thead)': {
+                            readonly marginBlockStart: "-24";
                         };
-                        readonly '& > [data-rows]': {
-                            readonly marginBlock: "-12";
+                        readonly '& > [data-list-group][data-variant="plain"]': {
+                            readonly marginInline: "-24";
                         };
-                        readonly '& > [data-rows]:first-child': {
+                        readonly '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
                             readonly marginBlockStart: "-24";
                         };
-                        readonly '& > [data-rows]:last-child': {
+                        readonly '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
                             readonly marginBlockEnd: "-24";
                         };
-                        readonly '& > table': {
-                            readonly width: `calc(100% + ${string}) !custom`;
+                        readonly '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child': {
+                            readonly borderStartEndRadius: `calc(${string} - 1px) !custom`;
+                            readonly borderStartStartRadius: `calc(${string} - 1px) !custom`;
                         };
-                        readonly '& > table > caption, & > table tr > :first-child': {
-                            readonly paddingInlineStart: "24";
+                        readonly '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child': {
+                            readonly borderEndEndRadius: `calc(${string} - 1px) !custom`;
+                            readonly borderEndStartRadius: `calc(${string} - 1px) !custom`;
                         };
-                        readonly '& > table tr > :last-child': {
-                            readonly paddingInlineEnd: "24";
-                        };
-                        readonly '& > table:first-child:has(> thead)': {
-                            readonly marginBlockStart: "-24";
+                        readonly '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                            readonly paddingInline: "24";
                         };
                         readonly '& > table:first-child > thead > tr:first-child > th': {
                             readonly paddingBlockStart: "24";
                         };
-                        readonly '& > table:last-child:not(:has(> caption))': {
-                            readonly marginBlockEnd: "-24";
-                        };
-                        readonly '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                            readonly paddingBlockEnd: "24";
-                        };
                     };
                 };
                 readonly medium: {
-                    readonly borderRadius: "12";
+                    readonly borderRadius: "sm";
                     readonly padding: "16";
                     readonly selectors: {
-                        readonly '& > table, & > [data-rows]': {
-                            readonly marginInline: "-16";
+                        readonly '& > table:first-child:has(> thead)': {
+                            readonly marginBlockStart: "-16";
                         };
-                        readonly '& > [data-rows]': {
-                            readonly marginBlock: "-8";
+                        readonly '& > [data-list-group][data-variant="plain"]': {
+                            readonly marginInline: "-16";
                         };
-                        readonly '& > [data-rows]:first-child': {
+                        readonly '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
                             readonly marginBlockStart: "-16";
                         };
-                        readonly '& > [data-rows]:last-child': {
+                        readonly '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
                             readonly marginBlockEnd: "-16";
                         };
-                        readonly '& > table': {
-                            readonly width: `calc(100% + ${string}) !custom`;
+                        readonly '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child': {
+                            readonly borderStartEndRadius: `calc(${string} - 1px) !custom`;
+                            readonly borderStartStartRadius: `calc(${string} - 1px) !custom`;
                         };
-                        readonly '& > table > caption, & > table tr > :first-child': {
-                            readonly paddingInlineStart: "16";
+                        readonly '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child': {
+                            readonly borderEndEndRadius: `calc(${string} - 1px) !custom`;
+                            readonly borderEndStartRadius: `calc(${string} - 1px) !custom`;
                         };
-                        readonly '& > table tr > :last-child': {
-                            readonly paddingInlineEnd: "16";
-                        };
-                        readonly '& > table:first-child:has(> thead)': {
-                            readonly marginBlockStart: "-16";
+                        readonly '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                            readonly paddingInline: "16";
                         };
                         readonly '& > table:first-child > thead > tr:first-child > th': {
                             readonly paddingBlockStart: "16";
                         };
-                        readonly '& > table:last-child:not(:has(> caption))': {
-                            readonly marginBlockEnd: "-16";
-                        };
-                        readonly '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                            readonly paddingBlockEnd: "16";
-                        };
                     };
                 };
                 readonly small: {
-                    readonly borderRadius: "8";
+                    readonly borderRadius: "xs";
                     readonly padding: "12";
                     readonly selectors: {
-                        readonly '& > table, & > [data-rows]': {
-                            readonly marginInline: "-12";
+                        readonly '& > table:first-child:has(> thead)': {
+                            readonly marginBlockStart: "-12";
                         };
-                        readonly '& > [data-rows]': {
-                            readonly marginBlock: "-6";
+                        readonly '& > [data-list-group][data-variant="plain"]': {
+                            readonly marginInline: "-12";
                         };
-                        readonly '& > [data-rows]:first-child': {
+                        readonly '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
                             readonly marginBlockStart: "-12";
                         };
-                        readonly '& > [data-rows]:last-child': {
+                        readonly '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
                             readonly marginBlockEnd: "-12";
                         };
-                        readonly '& > table': {
-                            readonly width: `calc(100% + ${string}) !custom`;
+                        readonly '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child': {
+                            readonly borderStartEndRadius: `calc(${string} - 1px) !custom`;
+                            readonly borderStartStartRadius: `calc(${string} - 1px) !custom`;
                         };
-                        readonly '& > table > caption, & > table tr > :first-child': {
-                            readonly paddingInlineStart: "12";
+                        readonly '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child': {
+                            readonly borderEndEndRadius: `calc(${string} - 1px) !custom`;
+                            readonly borderEndStartRadius: `calc(${string} - 1px) !custom`;
                         };
-                        readonly '& > table tr > :last-child': {
-                            readonly paddingInlineEnd: "12";
-                        };
-                        readonly '& > table:first-child:has(> thead)': {
-                            readonly marginBlockStart: "-12";
+                        readonly '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                            readonly paddingInline: "12";
                         };
                         readonly '& > table:first-child > thead > tr:first-child > th': {
                             readonly paddingBlockStart: "12";
                         };
-                        readonly '& > table:last-child:not(:has(> caption))': {
-                            readonly marginBlockEnd: "-12";
-                        };
-                        readonly '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                            readonly paddingBlockEnd: "12";
-                        };
                     };
                 };
             };
@@ -329,7 +348,7 @@ declare namespace styles {
     const title: zyzz.variants.ReturnType<{
         readonly base: {
             readonly alignItems: "center";
-            readonly color: "foreground";
+            readonly color: "content.primary";
             readonly columnGap: "12";
             readonly display: "flex";
             readonly margin: "0";
@@ -339,8 +358,11 @@ declare namespace styles {
                     readonly flexShrink: "0 !custom";
                     readonly fontSize: "24";
                 };
+                readonly '[data-surface-size]:has(> table) > &, [data-surface-size]:has(> table) > * > &': {
+                    readonly typography: "heading.h3";
+                };
             };
-            readonly typography: "heading.20";
+            readonly typography: "body.b2Strong";
         };
     }, "react">;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/web/components/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,8FAc3C;AAED,yBAAiB,OAAO,CAAC;IACvB,yFAAyF;IACzF,SAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,+BAInD;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,sFAAsF;IACtF,SAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,+BAIzC;IAED,UAAiB,MAAM,CAAC;QACtB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAA;KAC7F;IAED,gFAAgF;IAChF,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAIvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC5F;IAED,KAAY,KAAK,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GACjD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG;QAC3C;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAC/B,CAAA;IAEH,mFAAmF;IACnF,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAIvC;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,kBAAU,MAAM,CAAC;IACR,MAAM,WAAW;;;;;;;;;;;eAUvB,CAAA;IAEM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;eA6BlB,CAAA;IAEM,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAoCjB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA0JnB,CAAA;IAEM,MAAM,KAAK;;;;;;;;;;;;;;;;eAcjB,CAAA;CACF"}
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/web/components/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,8FAc3C;AAED,yBAAiB,OAAO,CAAC;IACvB,yFAAyF;IACzF,SAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,+BAInD;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;;;OAGG;IACH,SAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,+BAUzC;IAED,UAAiB,MAAM,CAAC;QACtB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAA;KAC7F;IAED,gFAAgF;IAChF,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAIvC;IAED,UAAiB,KAAK,CAAC;QACrB,KAAY,KAAK,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;KAC5F;IAED,KAAY,KAAK,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GACjD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG;QAC3C;;;WAGG;QACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;KAC/B,CAAA;IAEH;;;OAGG;IACH,SAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAIvC;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,kBAAU,MAAM,CAAC;IACR,MAAM,WAAW;;;;;;;;;;;eAUvB,CAAA;IAEM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;eA6BlB,CAAA;IAEM,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAoCjB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAmNnB,CAAA;IAEM,MAAM,KAAK;;;;;;;;;;;;;;;;;;;eAoBjB,CAAA;CACF"}

package/dist/web/components/Surface.js

@@ -2,14 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRender } from '@base-ui/react/use-render';
 import { variants, vars } from '../zyzz.config.js';
 /**
- * A card container that renders a `div` by default. Pass `render` to swap the element, such as a
- * `section`, `button` or link. A `button`, `a[href]` or `role="button"` surface gains hover, press
- * and focus-visible styles and spans the full width.
+ * A card container that renders a `div` with a 1px border inside its edge by default. Pass
+ * `render` to swap the element, such as a `section`, `button` or link. A `button`, `a[href]` or
+ * `role="button"` surface gains hover, press and focus-visible styles and spans the full width.
  *
- * - `size` sets the corner radius and padding together.
+ * - `size` sets the corner radius and padding together, at the same value.
  * - Name the card with `Surface.Title`, which renders an `h2`, so headings keep the card navigable.
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
- * - A direct child `table` or `Rows` bleeds into the padding, so row fills reach the edges.
+ * - A direct child `table` bleeds 12px into the padding at the sides and the bottom, as rows pad
+ *   their cells, so its text stays on the content edge. The surface draws no border around it.
+ * - A direct child `plain` `ListGroup` bleeds into the padding, so a hover fill reaches the edges.
+ *   Each row is 44px, pads its sides by the surface's padding, and shares the height of the
+ *   tallest row.
  *
  * @example
  * <Surface>
@@ -45,10 +49,13 @@ export function Surface(props) {
         return _jsx("p", { ...attributes, ...styles.description({ className, style: props.style, vars }) });
     }
     Surface.Description = Description;
-    /** A row above the content holding a `Surface.Title` and, at the end, any actions. */
+    /**
+     * A row above the content holding a `Surface.Title` and, at the end, any actions, with 20px of
+     * space below it.
+     */
     function Header(props) {
         const { className, vars, ...attributes } = props;
-        return _jsx("div", { ...attributes, ...styles.header({ className, style: props.style, vars }) });
+        return (_jsx("div", { ...attributes, "data-surface-header": "", ...styles.header({ className, style: props.style, vars }) }));
     }
     Surface.Header = Header;
     /** A column of links, such as follow-up tasks below a `Surface.Description`. */
@@ -57,7 +64,10 @@ export function Surface(props) {
         return _jsx("div", { ...attributes, ...styles.links({ className, style: props.style, vars }) });
     }
     Surface.Links = Links;
-    /** The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. */
+    /**
+     * The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. In a surface that
+     * holds a direct child `table`, the title renders at the size of a section heading.
+     */
     function Title(props) {
         const { className, vars, ...attributes } = props;
         return _jsx("h2", { ...attributes, ...styles.title({ className, style: props.style, vars }) });
@@ -69,8 +79,8 @@ var styles;
     styles.description = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qA0 z_tds_2f_web-jv6_qA1 z_tds_2f_web-jv6_qA2 z_tds_2f_web-jv6_qA3 z_tds_2f_web-jv6_qA4 z_tds_2f_web-jv6_qA5 z_tds_2f_web-jv6_qA6 z_tds_2f_web-jv6_qA7"+" "+external:"z_tds_2f_web-jv6_qA0 z_tds_2f_web-jv6_qA1 z_tds_2f_web-jv6_qA2 z_tds_2f_web-jv6_qA3 z_tds_2f_web-jv6_qA4 z_tds_2f_web-jv6_qA5 z_tds_2f_web-jv6_qA6 z_tds_2f_web-jv6_qA7",result=inline?{className,style:inline}:{className};let value;return result});
     styles.header = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qA8 z_tds_2f_web-jv6_qA9 z_tds_2f_web-jv6_qAa z_tds_2f_web-jv6_qAb z_tds_2f_web-jv6_qAc z_tds_2f_web-jv6_qAd z_tds_2f_web-jv6_qAe z_tds_2f_web-jv6_qAf z_tds_2f_web-jv6_qAg z_tds_2f_web-jv6_qAh z_tds_2f_web-jv6_qAi"+" "+external:"z_tds_2f_web-jv6_qA8 z_tds_2f_web-jv6_qA9 z_tds_2f_web-jv6_qAa z_tds_2f_web-jv6_qAb z_tds_2f_web-jv6_qAc z_tds_2f_web-jv6_qAd z_tds_2f_web-jv6_qAe z_tds_2f_web-jv6_qAf z_tds_2f_web-jv6_qAg z_tds_2f_web-jv6_qAh z_tds_2f_web-jv6_qAi",result=inline?{className,style:inline}:{className};let value;return result});
     styles.links = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qAj z_tds_2f_web-jv6_qAa z_tds_2f_web-jv6_qAk z_tds_2f_web-jv6_qAl z_tds_2f_web-jv6_qAm z_tds_2f_web-jv6_qAn z_tds_2f_web-jv6_qAo z_tds_2f_web-jv6_qAp z_tds_2f_web-jv6_qAq z_tds_2f_web-jv6_qAr z_tds_2f_web-jv6_qAs z_tds_2f_web-jv6_qAt z_tds_2f_web-jv6_qAu z_tds_2f_web-jv6_qAv z_tds_2f_web-jv6_qAw z_tds_2f_web-jv6_qAx z_tds_2f_web-jv6_qAy z_tds_2f_web-jv6_qAz z_tds_2f_web-jv6_qA10 z_tds_2f_web-jv6_qA11 z_tds_2f_web-jv6_qA12 z_tds_2f_web-jv6_qA13 z_tds_2f_web-jv6_qA14 z_tds_2f_web-jv6_qA15 z_tds_2f_web-jv6_qA16 z_tds_2f_web-jv6_qA17 z_tds_2f_web-jv6_qA18 z_tds_2f_web-jv6_qA19 z_tds_2f_web-jv6_qA1a z_tds_2f_web-jv6_qA1b"+" "+external:"z_tds_2f_web-jv6_qAj z_tds_2f_web-jv6_qAa z_tds_2f_web-jv6_qAk z_tds_2f_web-jv6_qAl z_tds_2f_web-jv6_qAm z_tds_2f_web-jv6_qAn z_tds_2f_web-jv6_qAo z_tds_2f_web-jv6_qAp z_tds_2f_web-jv6_qAq z_tds_2f_web-jv6_qAr z_tds_2f_web-jv6_qAs z_tds_2f_web-jv6_qAt z_tds_2f_web-jv6_qAu z_tds_2f_web-jv6_qAv z_tds_2f_web-jv6_qAw z_tds_2f_web-jv6_qAx z_tds_2f_web-jv6_qAy z_tds_2f_web-jv6_qAz z_tds_2f_web-jv6_qA10 z_tds_2f_web-jv6_qA11 z_tds_2f_web-jv6_qA12 z_tds_2f_web-jv6_qA13 z_tds_2f_web-jv6_qA14 z_tds_2f_web-jv6_qA15 z_tds_2f_web-jv6_qA16 z_tds_2f_web-jv6_qA17 z_tds_2f_web-jv6_qA18 z_tds_2f_web-jv6_qA19 z_tds_2f_web-jv6_qA1a z_tds_2f_web-jv6_qA1b",result=inline?{className,style:inline}:{className};let value;return result});
-    styles.surface = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qA1c z_tds_2f_web-jv6_qA1d z_tds_2f_web-jv6_qA1e z_tds_2f_web-jv6_qA1f z_tds_2f_web-jv6_qA1g z_tds_2f_web-jv6_qA1h z_tds_2f_web-jv6_qA1i z_tds_2f_web-jv6_qA1j z_tds_2f_web-jv6_qA1k z_tds_2f_web-jv6_qA1l z_tds_2f_web-jv6_qA1m z_tds_2f_web-jv6_qA1n z_tds_2f_web-jv6_qA1o z_tds_2f_web-jv6_qA1p z_tds_2f_web-jv6_qA1q z_tds_2f_web-jv6_qA1r z_tds_2f_web-jv6_qA1s z_tds_2f_web-jv6_qA1t z_tds_2f_web-jv6_qA1u z_tds_2f_web-jv6_qA1v z_tds_2f_web-jv6_qA1w z_tds_2f_web-jv6_qA1x z_tds_2f_web-jv6_qA1y z_tds_2f_web-jv6_qA1z z_tds_2f_web-jv6_qA20 z_tds_2f_web-jv6_qA21 z_tds_2f_web-jv6_qA22 z_tds_2f_web-jv6_qA23 z_tds_2f_web-jv6_qA24 z_tds_2f_web-jv6_qA25 z_tds_2f_web-jv6_qA26 z_tds_2f_web-jv6_qA27 z_tds_2f_web-jv6_qA28 z_tds_2f_web-jv6_qA29 z_tds_2f_web-jv6_qA2a z_tds_2f_web-jv6_qA2b z_tds_2f_web-jv6_qA2c z_tds_2f_web-jv6_qA2d z_tds_2f_web-jv6_qA2e z_tds_2f_web-jv6_qA2f z_tds_2f_web-jv6_qA2g z_tds_2f_web-jv6_qA2h z_tds_2f_web-jv6_qA2i z_tds_2f_web-jv6_qA2j z_tds_2f_web-jv6_qA2k z_tds_2f_web-jv6_qA2l z_tds_2f_web-jv6_qA2m z_tds_2f_web-jv6_qA2n z_tds_2f_web-jv6_qA2o z_tds_2f_web-jv6_qA2p z_tds_2f_web-jv6_qA2q z_tds_2f_web-jv6_qA2r z_tds_2f_web-jv6_qA2s z_tds_2f_web-jv6_qA2t z_tds_2f_web-jv6_qA2u z_tds_2f_web-jv6_qA2v z_tds_2f_web-jv6_qA2w z_tds_2f_web-jv6_qA2x z_tds_2f_web-jv6_qA2y z_tds_2f_web-jv6_qA2z z_tds_2f_web-jv6_qA30 z_tds_2f_web-jv6_qA31 z_tds_2f_web-jv6_qA32 z_tds_2f_web-jv6_qA33 z_tds_2f_web-jv6_qA34 z_tds_2f_web-jv6_qA35 z_tds_2f_web-jv6_qA36 z_tds_2f_web-jv6_qA37 z_tds_2f_web-jv6_qA38 z_tds_2f_web-jv6_qA39 z_tds_2f_web-jv6_qA3a z_tds_2f_web-jv6_qA3b z_tds_2f_web-jv6_qA3c z_tds_2f_web-jv6_qA3d z_tds_2f_web-jv6_qA3e z_tds_2f_web-jv6_qA3f z_tds_2f_web-jv6_qA3g"+" "+external:"z_tds_2f_web-jv6_qA1c z_tds_2f_web-jv6_qA1d z_tds_2f_web-jv6_qA1e z_tds_2f_web-jv6_qA1f z_tds_2f_web-jv6_qA1g z_tds_2f_web-jv6_qA1h z_tds_2f_web-jv6_qA1i z_tds_2f_web-jv6_qA1j z_tds_2f_web-jv6_qA1k z_tds_2f_web-jv6_qA1l z_tds_2f_web-jv6_qA1m z_tds_2f_web-jv6_qA1n z_tds_2f_web-jv6_qA1o z_tds_2f_web-jv6_qA1p z_tds_2f_web-jv6_qA1q z_tds_2f_web-jv6_qA1r z_tds_2f_web-jv6_qA1s z_tds_2f_web-jv6_qA1t z_tds_2f_web-jv6_qA1u z_tds_2f_web-jv6_qA1v z_tds_2f_web-jv6_qA1w z_tds_2f_web-jv6_qA1x z_tds_2f_web-jv6_qA1y z_tds_2f_web-jv6_qA1z z_tds_2f_web-jv6_qA20 z_tds_2f_web-jv6_qA21 z_tds_2f_web-jv6_qA22 z_tds_2f_web-jv6_qA23 z_tds_2f_web-jv6_qA24 z_tds_2f_web-jv6_qA25 z_tds_2f_web-jv6_qA26 z_tds_2f_web-jv6_qA27 z_tds_2f_web-jv6_qA28 z_tds_2f_web-jv6_qA29 z_tds_2f_web-jv6_qA2a z_tds_2f_web-jv6_qA2b z_tds_2f_web-jv6_qA2c z_tds_2f_web-jv6_qA2d z_tds_2f_web-jv6_qA2e z_tds_2f_web-jv6_qA2f z_tds_2f_web-jv6_qA2g z_tds_2f_web-jv6_qA2h z_tds_2f_web-jv6_qA2i z_tds_2f_web-jv6_qA2j z_tds_2f_web-jv6_qA2k z_tds_2f_web-jv6_qA2l z_tds_2f_web-jv6_qA2m z_tds_2f_web-jv6_qA2n z_tds_2f_web-jv6_qA2o z_tds_2f_web-jv6_qA2p z_tds_2f_web-jv6_qA2q z_tds_2f_web-jv6_qA2r z_tds_2f_web-jv6_qA2s z_tds_2f_web-jv6_qA2t z_tds_2f_web-jv6_qA2u z_tds_2f_web-jv6_qA2v z_tds_2f_web-jv6_qA2w z_tds_2f_web-jv6_qA2x z_tds_2f_web-jv6_qA2y z_tds_2f_web-jv6_qA2z z_tds_2f_web-jv6_qA30 z_tds_2f_web-jv6_qA31 z_tds_2f_web-jv6_qA32 z_tds_2f_web-jv6_qA33 z_tds_2f_web-jv6_qA34 z_tds_2f_web-jv6_qA35 z_tds_2f_web-jv6_qA36 z_tds_2f_web-jv6_qA37 z_tds_2f_web-jv6_qA38 z_tds_2f_web-jv6_qA39 z_tds_2f_web-jv6_qA3a z_tds_2f_web-jv6_qA3b z_tds_2f_web-jv6_qA3c z_tds_2f_web-jv6_qA3d z_tds_2f_web-jv6_qA3e z_tds_2f_web-jv6_qA3f z_tds_2f_web-jv6_qA3g",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"size")?input["size"]:void 0;if(value===void 0)value="large";if(value!==null&&value!==void 0)result["data-size"]=String(value);return result});
-    styles.title = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qA3h z_tds_2f_web-jv6_qA1e z_tds_2f_web-jv6_qA3i z_tds_2f_web-jv6_qA3j z_tds_2f_web-jv6_qA3k z_tds_2f_web-jv6_qAd z_tds_2f_web-jv6_qA3l z_tds_2f_web-jv6_qA3m z_tds_2f_web-jv6_qA3n z_tds_2f_web-jv6_qA3o z_tds_2f_web-jv6_qA3p z_tds_2f_web-jv6_qA3q z_tds_2f_web-jv6_qA3r"+" "+external:"z_tds_2f_web-jv6_qA3h z_tds_2f_web-jv6_qA1e z_tds_2f_web-jv6_qA3i z_tds_2f_web-jv6_qA3j z_tds_2f_web-jv6_qA3k z_tds_2f_web-jv6_qAd z_tds_2f_web-jv6_qA3l z_tds_2f_web-jv6_qA3m z_tds_2f_web-jv6_qA3n z_tds_2f_web-jv6_qA3o z_tds_2f_web-jv6_qA3p z_tds_2f_web-jv6_qA3q z_tds_2f_web-jv6_qA3r",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.surface = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qA1c z_tds_2f_web-jv6_qA1d z_tds_2f_web-jv6_qA1e z_tds_2f_web-jv6_qA1f z_tds_2f_web-jv6_qA1g z_tds_2f_web-jv6_qA1h z_tds_2f_web-jv6_qA1i z_tds_2f_web-jv6_qA1j z_tds_2f_web-jv6_qA1k z_tds_2f_web-jv6_qA1l z_tds_2f_web-jv6_qA1m z_tds_2f_web-jv6_qA1n z_tds_2f_web-jv6_qA1o z_tds_2f_web-jv6_qA1p z_tds_2f_web-jv6_qA1q z_tds_2f_web-jv6_qA1r z_tds_2f_web-jv6_qA1s z_tds_2f_web-jv6_qA1t z_tds_2f_web-jv6_qA1u z_tds_2f_web-jv6_qA1v z_tds_2f_web-jv6_qA1w z_tds_2f_web-jv6_qA1x z_tds_2f_web-jv6_qA1y z_tds_2f_web-jv6_qA1z z_tds_2f_web-jv6_qA20 z_tds_2f_web-jv6_qA21 z_tds_2f_web-jv6_qA22 z_tds_2f_web-jv6_qA23 z_tds_2f_web-jv6_qA24 z_tds_2f_web-jv6_qA25 z_tds_2f_web-jv6_qA26 z_tds_2f_web-jv6_qA27 z_tds_2f_web-jv6_qA28 z_tds_2f_web-jv6_qA29 z_tds_2f_web-jv6_qA2a z_tds_2f_web-jv6_qA2b z_tds_2f_web-jv6_qA2c z_tds_2f_web-jv6_qA2d z_tds_2f_web-jv6_qA2e z_tds_2f_web-jv6_qA2f z_tds_2f_web-jv6_qA2g z_tds_2f_web-jv6_qA2h z_tds_2f_web-jv6_qA2i z_tds_2f_web-jv6_qA2j z_tds_2f_web-jv6_qA2k z_tds_2f_web-jv6_qA2l z_tds_2f_web-jv6_qA2m z_tds_2f_web-jv6_qA2n z_tds_2f_web-jv6_qA2o z_tds_2f_web-jv6_qA2p z_tds_2f_web-jv6_qA2q z_tds_2f_web-jv6_qA2r z_tds_2f_web-jv6_qA2s z_tds_2f_web-jv6_qA2t z_tds_2f_web-jv6_qA2u z_tds_2f_web-jv6_qA2v z_tds_2f_web-jv6_qA2w z_tds_2f_web-jv6_qA2x z_tds_2f_web-jv6_qA2y z_tds_2f_web-jv6_qA2z z_tds_2f_web-jv6_qA30 z_tds_2f_web-jv6_qA31 z_tds_2f_web-jv6_qA32 z_tds_2f_web-jv6_qA33 z_tds_2f_web-jv6_qA34 z_tds_2f_web-jv6_qA35 z_tds_2f_web-jv6_qA36 z_tds_2f_web-jv6_qA37 z_tds_2f_web-jv6_qA38 z_tds_2f_web-jv6_qA39 z_tds_2f_web-jv6_qA3a z_tds_2f_web-jv6_qA3b z_tds_2f_web-jv6_qA3c z_tds_2f_web-jv6_qA3d z_tds_2f_web-jv6_qA3e z_tds_2f_web-jv6_qA3f z_tds_2f_web-jv6_qA3g z_tds_2f_web-jv6_qA3h z_tds_2f_web-jv6_qA3i z_tds_2f_web-jv6_qA3j z_tds_2f_web-jv6_qA3k z_tds_2f_web-jv6_qA3l z_tds_2f_web-jv6_qA3m z_tds_2f_web-jv6_qA3n z_tds_2f_web-jv6_qA3o z_tds_2f_web-jv6_qA3p z_tds_2f_web-jv6_qA3q z_tds_2f_web-jv6_qA3r z_tds_2f_web-jv6_qA3s z_tds_2f_web-jv6_qA3t"+" "+external:"z_tds_2f_web-jv6_qA1c z_tds_2f_web-jv6_qA1d z_tds_2f_web-jv6_qA1e z_tds_2f_web-jv6_qA1f z_tds_2f_web-jv6_qA1g z_tds_2f_web-jv6_qA1h z_tds_2f_web-jv6_qA1i z_tds_2f_web-jv6_qA1j z_tds_2f_web-jv6_qA1k z_tds_2f_web-jv6_qA1l z_tds_2f_web-jv6_qA1m z_tds_2f_web-jv6_qA1n z_tds_2f_web-jv6_qA1o z_tds_2f_web-jv6_qA1p z_tds_2f_web-jv6_qA1q z_tds_2f_web-jv6_qA1r z_tds_2f_web-jv6_qA1s z_tds_2f_web-jv6_qA1t z_tds_2f_web-jv6_qA1u z_tds_2f_web-jv6_qA1v z_tds_2f_web-jv6_qA1w z_tds_2f_web-jv6_qA1x z_tds_2f_web-jv6_qA1y z_tds_2f_web-jv6_qA1z z_tds_2f_web-jv6_qA20 z_tds_2f_web-jv6_qA21 z_tds_2f_web-jv6_qA22 z_tds_2f_web-jv6_qA23 z_tds_2f_web-jv6_qA24 z_tds_2f_web-jv6_qA25 z_tds_2f_web-jv6_qA26 z_tds_2f_web-jv6_qA27 z_tds_2f_web-jv6_qA28 z_tds_2f_web-jv6_qA29 z_tds_2f_web-jv6_qA2a z_tds_2f_web-jv6_qA2b z_tds_2f_web-jv6_qA2c z_tds_2f_web-jv6_qA2d z_tds_2f_web-jv6_qA2e z_tds_2f_web-jv6_qA2f z_tds_2f_web-jv6_qA2g z_tds_2f_web-jv6_qA2h z_tds_2f_web-jv6_qA2i z_tds_2f_web-jv6_qA2j z_tds_2f_web-jv6_qA2k z_tds_2f_web-jv6_qA2l z_tds_2f_web-jv6_qA2m z_tds_2f_web-jv6_qA2n z_tds_2f_web-jv6_qA2o z_tds_2f_web-jv6_qA2p z_tds_2f_web-jv6_qA2q z_tds_2f_web-jv6_qA2r z_tds_2f_web-jv6_qA2s z_tds_2f_web-jv6_qA2t z_tds_2f_web-jv6_qA2u z_tds_2f_web-jv6_qA2v z_tds_2f_web-jv6_qA2w z_tds_2f_web-jv6_qA2x z_tds_2f_web-jv6_qA2y z_tds_2f_web-jv6_qA2z z_tds_2f_web-jv6_qA30 z_tds_2f_web-jv6_qA31 z_tds_2f_web-jv6_qA32 z_tds_2f_web-jv6_qA33 z_tds_2f_web-jv6_qA34 z_tds_2f_web-jv6_qA35 z_tds_2f_web-jv6_qA36 z_tds_2f_web-jv6_qA37 z_tds_2f_web-jv6_qA38 z_tds_2f_web-jv6_qA39 z_tds_2f_web-jv6_qA3a z_tds_2f_web-jv6_qA3b z_tds_2f_web-jv6_qA3c z_tds_2f_web-jv6_qA3d z_tds_2f_web-jv6_qA3e z_tds_2f_web-jv6_qA3f z_tds_2f_web-jv6_qA3g z_tds_2f_web-jv6_qA3h z_tds_2f_web-jv6_qA3i z_tds_2f_web-jv6_qA3j z_tds_2f_web-jv6_qA3k z_tds_2f_web-jv6_qA3l z_tds_2f_web-jv6_qA3m z_tds_2f_web-jv6_qA3n z_tds_2f_web-jv6_qA3o z_tds_2f_web-jv6_qA3p z_tds_2f_web-jv6_qA3q z_tds_2f_web-jv6_qA3r z_tds_2f_web-jv6_qA3s z_tds_2f_web-jv6_qA3t",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"size")?input["size"]:void 0;if(value===void 0)value="large";if(value!==null&&value!==void 0)result["data-size"]=String(value);return result});
+    styles.title = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-jv6_qA3u z_tds_2f_web-jv6_qA1h z_tds_2f_web-jv6_qA3v z_tds_2f_web-jv6_qA3w z_tds_2f_web-jv6_qA3x z_tds_2f_web-jv6_qAd z_tds_2f_web-jv6_qA3y z_tds_2f_web-jv6_qA3z z_tds_2f_web-jv6_qA40 z_tds_2f_web-jv6_qA41 z_tds_2f_web-jv6_qA42 z_tds_2f_web-jv6_qA43 z_tds_2f_web-jv6_qA44 z_tds_2f_web-jv6_qA45 z_tds_2f_web-jv6_qA46 z_tds_2f_web-jv6_qA47 z_tds_2f_web-jv6_qA48 z_tds_2f_web-jv6_qA49"+" "+external:"z_tds_2f_web-jv6_qA3u z_tds_2f_web-jv6_qA1h z_tds_2f_web-jv6_qA3v z_tds_2f_web-jv6_qA3w z_tds_2f_web-jv6_qA3x z_tds_2f_web-jv6_qAd z_tds_2f_web-jv6_qA3y z_tds_2f_web-jv6_qA3z z_tds_2f_web-jv6_qA40 z_tds_2f_web-jv6_qA41 z_tds_2f_web-jv6_qA42 z_tds_2f_web-jv6_qA43 z_tds_2f_web-jv6_qA44 z_tds_2f_web-jv6_qA45 z_tds_2f_web-jv6_qA46 z_tds_2f_web-jv6_qA47 z_tds_2f_web-jv6_qA48 z_tds_2f_web-jv6_qA49",result=inline?{className,style:inline}:{className};let value;return result});
 })(styles || (styles = {}));
 //# sourceMappingURL=Surface.js.map
 import './Surface.css';