@tempoxyz/ds 0.2.6 → 0.3.0

package/dist/web/components/ListGroup.css

@@ -0,0 +1 @@
+.z_tds_2f_web-hM-B9c0{column-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-hM-B9c1{display:flex}.z_tds_2f_web-hM-B9c2{flex-wrap:wrap}.z_tds_2f_web-hM-B9c3{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-hM-B9c4{align-items:center}.z_tds_2f_web-hM-B9c5{border:none}.z_tds_2f_web-hM-B9c6{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-hM-B9c7{flex-grow:1}.z_tds_2f_web-hM-B9c8{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-hM-B9c9{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-hM-B9ca{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-hM-B9cb{text-align:start}.z_tds_2f_web-hM-B9cc{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-hM-B9cd{display:block}.z_tds_2f_web-hM-B9ce{font-family:var(--z-tds_2f_web-typography-body-b3-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-hM-B9cf{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-hM-B9cg{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-hM-B9ch{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-hM-B9ci{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-hM-B9cj{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}.z_tds_2f_web-hM-B9ck{padding-block-end:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-hM-B9cl{font-family:var(--z-tds_2f_web-typography-body-b3Strong-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-hM-B9cm{font-size:var(--z-tds_2f_web-typography-body-b3Strong-fontSize,12px)}.z_tds_2f_web-hM-B9cn{font-weight:var(--z-tds_2f_web-typography-body-b3Strong-fontWeight,500)}.z_tds_2f_web-hM-B9co{letter-spacing:var(--z-tds_2f_web-typography-body-b3Strong-letterSpacing,.15px)}.z_tds_2f_web-hM-B9cp{line-height:var(--z-tds_2f_web-typography-body-b3Strong-lineHeight,16px)}.z_tds_2f_web-hM-B9cq{display:inline-flex}.z_tds_2f_web-hM-B9cr{flex-shrink:0}.z_tds_2f_web-hM-B9cs{font-size:var(--z-tds_2f_web-fontSize-16,1rem)}.z_tds_2f_web-hM-B9ct{&>svg{height:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-hM-B9cu{&>svg{width:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-hM-B9cv{display:flex}.z_tds_2f_web-hM-B9cw{flex-direction:column}.z_tds_2f_web-hM-B9cx{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-hM-B9cy{&:where([data-size=large]){row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}}.z_tds_2f_web-hM-B9cz{&:where([data-size=large]){&>[data-description]{font-family:var(--z-tds_2f_web-typography-mono-m1-fontFamily,var(--z-tds_2f_web-fontFamily-mono,"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace))}}}.z_tds_2f_web-hM-B9c10{&:where([data-size=large]){&>[data-description]{font-size:var(--z-tds_2f_web-typography-mono-m1-fontSize,12px)}}}.z_tds_2f_web-hM-B9c11{&:where([data-size=large]){&>[data-description]{font-weight:var(--z-tds_2f_web-typography-mono-m1-fontWeight,400)}}}.z_tds_2f_web-hM-B9c12{&:where([data-size=large]){&>[data-description]{letter-spacing:var(--z-tds_2f_web-typography-mono-m1-letterSpacing,0px)}}}.z_tds_2f_web-hM-B9c13{&:where([data-size=large]){&>[data-description]{line-height:var(--z-tds_2f_web-typography-mono-m1-lineHeight,16px)}}}.z_tds_2f_web-hM-B9c14{&:where([data-size=large]){&>[data-title]{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-hM-B9c15{&:where([data-size=large]){&>[data-title]{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}}.z_tds_2f_web-hM-B9c16{&:where([data-size=large]){&>[data-title]{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}}.z_tds_2f_web-hM-B9c17{&:where([data-size=large]){&>[data-title]{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,.12px)}}}.z_tds_2f_web-hM-B9c18{&:where([data-size=large]){&>[data-title]{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}}.z_tds_2f_web-hM-B9c19{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-hM-B9c1a{margin-inline-end:auto}.z_tds_2f_web-hM-B9c1b{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-hM-B9c1c{background-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-hM-B9c1d{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-hM-B9c1e{transition-property:width}.z_tds_2f_web-hM-B9c1f{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-hM-B9c1g{transition-property:none}}.z_tds_2f_web-hM-B9c1h{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-hM-B9c1i{border-radius:var(--z-tds_2f_web-radius-full,var(--z-tds_2f_web-spacing-999,62.4375rem))}.z_tds_2f_web-hM-B9c1j{corner-shape:round}.z_tds_2f_web-hM-B9c1k{height:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-hM-B9c1l{overflow:hidden}.z_tds_2f_web-hM-B9c1m{width:var(--z-tds_2f_web-spacing-64,4rem)}.z_tds_2f_web-hM-B9c1n{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-hM-B9c1o{min-width:7rem}.z_tds_2f_web-hM-B9c1p{text-align:end}.z_tds_2f_web-hM-B9c1q{font-family:var(--z-tds_2f_web-typography-body-b3-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-hM-B9c1r{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-hM-B9c1s{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-hM-B9c1t{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-hM-B9c1u{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-hM-B9c1v{white-space:nowrap}.z_tds_2f_web-hM-B9c1w{box-shadow:inset 0 0 0 1.5px}.z_tds_2f_web-hM-B9c1x{box-sizing:border-box}.z_tds_2f_web-hM-B9c1y{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-hM-B9c1z{display:block}.z_tds_2f_web-hM-B9c20{height:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-hM-B9c21{outline:none}.z_tds_2f_web-hM-B9c22{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-hM-B9c23{transition-property:box-shadow,color}.z_tds_2f_web-hM-B9c24{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-hM-B9c25{width:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-hM-B9c26{&[data-checked]{box-shadow:inset 0 0 0 5px}}.z_tds_2f_web-hM-B9c27{&[data-checked]{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)))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-hM-B9c28{transition-property:color}}.z_tds_2f_web-hM-B9c29{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-hM-B9c2a{display:flex}.z_tds_2f_web-hM-B9c2b{row-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-hM-B9c2c{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-hM-B9c2d{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-hM-B9c2e{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-hM-B9c2f{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-hM-B9c2g{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-hM-B9c2h{display:block}.z_tds_2f_web-hM-B9c2i{font-family:var(--z-tds_2f_web-typography-body-b3-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-hM-B9c2j{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-hM-B9c2k{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-hM-B9c2l{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-hM-B9c2m{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-hM-B9c2n{& [data-divider]{position:relative}}.z_tds_2f_web-hM-B9c2o{& [data-divider]:before{background-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-hM-B9c2p{& [data-divider]:before{content:""}}.z_tds_2f_web-hM-B9c2q{& [data-divider]:before{height:var(--z-tds_2f_web-spacing-1,1px)}}.z_tds_2f_web-hM-B9c2r{& [data-divider]:before{inset-block-start:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-hM-B9c2s{& [data-divider]:before{inset-inline:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-hM-B9c2t{& [data-divider]:before{pointer-events:none}}.z_tds_2f_web-hM-B9c2u{& [data-divider]:before{position:absolute}}.z_tds_2f_web-hM-B9c2v{&>[data-divider]:first-child:before{display:none}}.z_tds_2f_web-hM-B9c2w{& [data-divider]:has([data-info]){padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-hM-B9c2x{& [data-divider]:has([role=meter]){padding-block:var(--z-tds_2f_web-spacing-10,.625rem)}}.z_tds_2f_web-hM-B9c2y{& [data-divider]:is(a[href],button,[role=button],:has(a[href],button,input,select,textarea)):not(:disabled,[data-disabled]):hover:before{display:none}}.z_tds_2f_web-hM-B9c2z{& [data-divider]:is(a[href],button,[role=button],:has(a[href],button,input,select,textarea)):not(:disabled,[data-disabled]):hover+[data-divider]:before{display:none}}.z_tds_2f_web-hM-B9c30{&:where([data-dividers=false]){& [data-divider]:before{display:none}}}.z_tds_2f_web-hM-B9c31{&:where([data-variant=boxed]){background-color:var(--z-tds_2f_web-color-background-secondary,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}}.z_tds_2f_web-hM-B9c32{&:where([data-variant=boxed]){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-hM-B9c33{&:where([data-variant=boxed]){border-radius:var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-hM-B9c34{&:where([data-variant=boxed]){border-style:solid}}.z_tds_2f_web-hM-B9c35{&:where([data-variant=boxed]){border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}}.z_tds_2f_web-hM-B9c36{&:where([data-variant=boxed]){padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-hM-B9c37{&:where([data-variant=boxed]){padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-hM-B9c38{&:where([data-variant=boxed]){&>[data-divider]:first-child:has([data-info][data-size=large]){padding-block-start:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-hM-B9c39{&:where([data-variant=spaced]){background-color:var(--z-tds_2f_web-color-background-secondary,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}}.z_tds_2f_web-hM-B9c3a{&:where([data-variant=spaced]){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-hM-B9c3b{&:where([data-variant=spaced]){border-radius:var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-hM-B9c3c{&:where([data-variant=spaced]){border-style:solid}}.z_tds_2f_web-hM-B9c3d{&:where([data-variant=spaced]){border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}}.z_tds_2f_web-hM-B9c3e{&:where([data-variant=spaced]){display:flex}}.z_tds_2f_web-hM-B9c3f{&:where([data-variant=spaced]){flex-direction:column}}.z_tds_2f_web-hM-B9c3g{&:where([data-variant=spaced]){padding:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-hM-B9c3h{&:where([data-variant=spaced]){row-gap:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-hM-B9c3i{&:where([data-variant=spaced]){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-hM-B9c3j{&:where([data-variant=spaced]){font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}}.z_tds_2f_web-hM-B9c3k{&:where([data-variant=spaced]){font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}}.z_tds_2f_web-hM-B9c3l{&:where([data-variant=spaced]){letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}}.z_tds_2f_web-hM-B9c3m{&:where([data-variant=spaced]){line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}}.z_tds_2f_web-hM-B9c3n{&:where([data-variant=spaced]){& [data-divider]:before{display:none}}}.z_tds_2f_web-hM-B9c3o{&:where([data-variant=spaced]){& [data-divider],& [data-divider]:is(:has([data-info]),:has([role=meter])){min-height:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-hM-B9c3p{&:where([data-variant=spaced]){& [data-divider],& [data-divider]:is(:has([data-info]),:has([role=meter])){padding-block:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-hM-B9c3q{background-color:#0000}.z_tds_2f_web-hM-B9c3r{border:none}.z_tds_2f_web-hM-B9c3s{color:inherit}.z_tds_2f_web-hM-B9c3t{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-hM-B9c3u{display:flex}.z_tds_2f_web-hM-B9c3v{font:inherit}.z_tds_2f_web-hM-B9c3w{min-height:var(--z-tds_2f_web-spacing-36,2.25rem)}.z_tds_2f_web-hM-B9c3x{outline-color:#0000}.z_tds_2f_web-hM-B9c3y{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-hM-B9c3z{outline-style:solid}.z_tds_2f_web-hM-B9c40{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-hM-B9c41{padding-block:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-hM-B9c42{padding-inline:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-hM-B9c43{text-align:start}.z_tds_2f_web-hM-B9c44{text-decoration:none}.z_tds_2f_web-hM-B9c45{transition-property:background-color,opacity,outline-color,outline-offset}.z_tds_2f_web-hM-B9c46{width:100%}.z_tds_2f_web-hM-B9c47{&:is(a[href],button,[role=button],:has(a[href],button,input,select,textarea)):not([data-radio]){border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-hM-B9c48{&:is(a[href],button,[role=button],:has(a[href],button,input,select,textarea)):not(:disabled,[data-disabled],[data-radio]):hover{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-012,#ffffff1f)))}}.z_tds_2f_web-hM-B9c49{&:is(a[href],button,[role=button]):not(:disabled,[data-disabled]){cursor:pointer}}.z_tds_2f_web-hM-B9c4a{&:is(a[href],button,[role=button]):not(:disabled,[data-disabled]):active{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-hM-B9c4b{&:is(a[href],button,[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-hM-B9c4c{&:is(a[href],button,[role=button]):focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}}.z_tds_2f_web-hM-B9c4d{&[data-radio]{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-hM-B9c4e{&[data-radio]{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-hM-B9c4f{&[data-radio]{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-hM-B9c4g{&[data-radio]{border-style:solid}}.z_tds_2f_web-hM-B9c4h{&[data-radio]{border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}}.z_tds_2f_web-hM-B9c4i{&[data-radio]{cursor:pointer}}.z_tds_2f_web-hM-B9c4j{&[data-radio]{padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-hM-B9c4k{&[data-radio]{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-hM-B9c4l{&[data-radio]{transition-property:background-color,border-color,opacity,scale}}.z_tds_2f_web-hM-B9c4m{&[data-radio]{user-select:none}}.z_tds_2f_web-hM-B9c4n{&[data-radio]:hover:not(:has(>[data-checked],>:focus-visible,>[data-disabled])){border-color:var(--z-tds_2f_web-color-line-primary,light-dark(var(--z-tds_2f_web-color-neutral-shade-016,#00000029),var(--z-tds_2f_web-color-neutral-tint-024,#ffffff3d)))}}.z_tds_2f_web-hM-B9c4o{&[data-radio]:has(>[data-checked]){border-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-hM-B9c4p{&[data-radio]:has(>[data-checked]){border-width:1.5px}}.z_tds_2f_web-hM-B9c4q{&[data-radio]:has(>[data-checked]):hover:not(:has(>[data-disabled])){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-012,#ffffff1f)))}}.z_tds_2f_web-hM-B9c4r{&[data-radio]:has(>[role=radio]:focus-visible){border-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-hM-B9c4s{&[data-radio]:has(>[role=radio]:focus-visible){border-width:var(--z-tds_2f_web-borderWidth-thick,var(--z-tds_2f_web-spacing-2,.125rem))}}.z_tds_2f_web-hM-B9c4t{&[data-radio]:active:not(:has(>[data-disabled])){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-hM-B9c4u{&[data-disabled],&[data-radio]:has(>[data-disabled]){cursor:default}}.z_tds_2f_web-hM-B9c4v{&[data-disabled],&[data-radio]:has(>[data-disabled]){opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-hM-B9c4w{transition-property:background-color,opacity,outline-color}.z_tds_2f_web-hM-B9c4x{&[data-radio]{transition-property:background-color,border-color,opacity}}.z_tds_2f_web-hM-B9c4y{&[data-radio]:active{scale:none}}}.z_tds_2f_web-hM-B9c4z{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-hM-B9c50{display:block}.z_tds_2f_web-hM-B9c51{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-hM-B9c52{font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}.z_tds_2f_web-hM-B9c53{font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}.z_tds_2f_web-hM-B9c54{letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,.14px)}.z_tds_2f_web-hM-B9c55{line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}

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

@@ -0,0 +1,483 @@
+import * as BaseUiMeter from '@base-ui/react/meter';
+import * as BaseUiRadioGroup from '@base-ui/react/radio-group';
+import { useRender } from '@base-ui/react/use-render';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type * as zyzz from 'zyzz';
+/**
+ * A stack of rows for the facts a person checks, the choices they tap, and short checklists.
+ * `ListGroup` renders `ListGroup.Root`. A row is a `button` when it has an `action` or `onClick`, any element
+ * passed to `render` (such as a link), a `label` around a radio when it has a `value`, and a plain
+ * `div` otherwise.
+ *
+ * - Name each group with a `ListGroup.Heading` placed right before it.
+ * - Write row text that names the destination, since the chevron is hidden from assistive
+ *   technology.
+ * - Avoid nesting buttons or links inside a pressable row.
+ * - Put rows that pick one option, each with a `value`, in a `ListGroup.RadioGroup`.
+ *
+ * @example
+ * <ListGroup.Heading>Fees</ListGroup.Heading>
+ * <ListGroup variant="boxed">
+ *   <ListGroup.Row>
+ *     <ListGroup.Label>Network fee</ListGroup.Label>
+ *     0.001 USDC
+ *   </ListGroup.Row>
+ * </ListGroup>
+ *
+ * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
+ * @see {@link https://base-ui.com/react/components/radio | Base UI Radio}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | WAI-ARIA APG Radio Group pattern}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role | MDN list role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html | WCAG 2.2 Target Size (Minimum)}
+ */
+export declare function ListGroup(props: ListGroup.Props): import("react").JSX.Element;
+export declare namespace ListGroup {
+    type Props = Root.Props;
+    /**
+     * Lays out `AssetChip` elements in a row 4px apart, under a `ListGroup.Title` in
+     * `ListGroup.Info`, such as the assets that a network supports. It wraps onto more lines when
+     * the chips run out of room.
+     */
+    function Chips(props: Chips.Props): import("react").JSX.Element;
+    namespace Chips {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.chips>;
+    }
+    /** Secondary text under a `ListGroup.Title`, usually inside `ListGroup.Info`. */
+    function Description(props: Description.Props): import("react").JSX.Element;
+    namespace Description {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.description>;
+    }
+    /**
+     * Names the group of rows that follows it, such as Fees or Contacts, with 8px below. Renders a
+     * `div`. Pass a heading element through `render`, such as `<h3 />`, when the group starts a
+     * section.
+     */
+    function Heading(props: Heading.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    namespace Heading {
+        type Props = useRender.ComponentProps<'div'> & zyzz.Props.Variants<typeof styles.heading>;
+    }
+    /**
+     * A leading 16px icon in `content.tertiary`, such as the globe before a suggested prompt. It sets
+     * `aria-hidden`, so the row text carries the meaning.
+     */
+    function Icon(props: Icon.Props): import("react").JSX.Element;
+    namespace Icon {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.icon>;
+    }
+    /**
+     * Stacks a `ListGroup.Title` above a `ListGroup.Description`, beside a leading avatar or logo and a
+     * trailing control. A row that holds it pads 12px above and below. `large` sets a 16px title 2px
+     * above a monospace description, for the row that introduces a `boxed` group, such as a wallet
+     * above its address. Defaults to `size="medium"`.
+     */
+    function Info(props: Info.Props): import("react").JSX.Element;
+    namespace Info {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.info>;
+    }
+    /** The key of a key-value row. It keeps its width and pushes the content after it to the end. */
+    function Label(props: Label.Props): import("react").JSX.Element;
+    namespace Label {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.label>;
+    }
+    /**
+     * A 64px bar that fills to `value` between `min` (0) and `max` (100), followed by its value in
+     * a 112px column, so the bars of neighboring rows line up. It renders a Base UI `meter`, such as
+     * the share of a spending limit that an agent used.
+     *
+     * - Name it with `aria-label` or `aria-labelledby`, since the row title does not name it.
+     * - The visible value is hidden from assistive technology, which reads `aria-valuetext`. Pass
+     *   `getAriaValueText` to read the same text, such as `0.001 of 10 USDC`.
+     *
+     * @example
+     * <ListGroup.Row>
+     *   <AgentLogo agent="claude" />
+     *   <ListGroup.Info>
+     *     <ListGroup.Title>Claude</ListGroup.Title>
+     *   </ListGroup.Info>
+     *   <ListGroup.Meter aria-label="Spending limit used" value={66}>
+     *     6.60 USDC
+     *   </ListGroup.Meter>
+     * </ListGroup.Row>
+     */
+    function Meter(props: Meter.Props): import("react").JSX.Element;
+    namespace Meter {
+        type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.meter> & Pick<BaseUiMeter.Meter.Root.Props, 'format' | 'getAriaValueText' | 'locale' | 'max' | 'min' | 'value'> & {
+            /** Visible value after the bar, such as an amount. Absent, it shows the percentage of the range. */
+            children?: ReactNode | undefined;
+        };
+    }
+    /**
+     * Holds the selected `value` of the rows inside it, each a radio with its own `value`, in a
+     * `radiogroup` element. The rows stack 12px apart, each in its own bordered block. The group is
+     * one Tab stop, and arrow keys move focus and selection together. Pass the choices as a type
+     * argument, such as `ListGroup.RadioGroup<'maya' | 'acme'>`, to narrow `value`, `defaultValue`
+     * and `onValueChange`.
+     *
+     * - Name it with `aria-label` or `aria-labelledby`, phrased as the question it answers.
+     * - Each row's text becomes the accessible name of its radio.
+     *
+     * @example
+     * <ListGroup.RadioGroup aria-label="Account" defaultValue="maya">
+     *   <ListGroup.Row value="maya">
+     *     <ListGroup.Info>
+     *       <ListGroup.Title>Maya Rao</ListGroup.Title>
+     *       <ListGroup.Description>maya@studio.co</ListGroup.Description>
+     *     </ListGroup.Info>
+     *   </ListGroup.Row>
+     * </ListGroup.RadioGroup>
+     */
+    function RadioGroup<const value extends string = string>(props: RadioGroup.Props<value>): import("react").JSX.Element;
+    namespace RadioGroup {
+        type Props<value extends string = string> = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'> & zyzz.Props.Variants<typeof styles.radioGroup> & Pick<BaseUiRadioGroup.RadioGroup.Props<NoInfer<value>>, 'defaultValue' | 'disabled' | 'form' | 'inputRef' | 'name' | 'onValueChange' | 'readOnly' | 'required' | 'value'>;
+    }
+    /**
+     * `variant` sets the container. `plain` rows have none and line up with the content around them.
+     * `boxed` rows sit in a bordered block with 16px sides and 8px above and below. `spaced` rows
+     * sit in the same block with 16px all round, 12px apart, with 14px text and no row padding.
+     *
+     * Rows are 36px with 12px text, which fits a 32px control. `dividers={false}` drops the line
+     * between rows, which `spaced` never draws. Variants default to `dividers`, `variant="plain"`.
+     */
+    function Root(props: Root.Props): import("react").JSX.Element;
+    namespace Root {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.root>;
+    }
+    /**
+     * Renders a button when pressable, a `label` around a radio when it has a `value`, or a link or
+     * other element through `render`. `ref` and attributes reach that element. Children sit 12px
+     * apart, such as an `Avatar`, a `ListGroup.Info` and a trailing `Button`. A pressable row's hover
+     * fill covers the row, flush with its content. A static row that holds a control, such as a Copy
+     * `Button`, takes the same fill on hover and stays static, so the control is the only target.
+     *
+     * A row with a `value` is a radio of the `ListGroup.RadioGroup` around it, in a 12px block with
+     * 16px sides. A press anywhere on the row selects it, and a 16px ring at its end shows the
+     * selection.
+     *
+     * @example
+     * <ListGroup>
+     *   <ListGroup.Row action="navigation" render={<a href="/activity" />}>
+     *     Activity
+     *   </ListGroup.Row>
+     * </ListGroup>
+     */
+    function Row(props: Row.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    namespace Row {
+        type Props = Omit<useRender.ComponentProps<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.row> & {
+            /**
+             * `navigation` shows a trailing chevron for a row that opens something, and makes the row a
+             * button unless `render` is set. A row with a `value` ignores it.
+             * @default 'none'
+             */
+            action?: 'navigation' | 'none' | undefined;
+            /** Content of the row, laid out 12px apart. */
+            children?: ReactNode | undefined;
+            /**
+             * Dims the row to 40% and disables it: a button row sets `disabled`, a radio row disables
+             * its radio and ignores presses, and any other row sets `aria-disabled` and ignores
+             * presses. A static row also disables the native controls inside it, such as a Copy
+             * `Button`, and every `Switch` and `Checkbox`, which leave the Tab order and ignore presses
+             * and input. Its children receive no presses, and its text stays readable.
+             * @default false
+             */
+            disabled?: boolean | undefined;
+            /**
+             * Makes the row a radio of the `ListGroup.RadioGroup` around it, identified by this value.
+             * A radio row ignores `render`. Absent, the row is a button, a link or static content.
+             */
+            value?: string | undefined;
+        };
+    }
+    /** Primary text of a row, usually inside `ListGroup.Info` above a `ListGroup.Description`. */
+    function Title(props: Title.Props): import("react").JSX.Element;
+    namespace Title {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>;
+    }
+}
+declare namespace styles {
+    const chips: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly columnGap: "4";
+            readonly display: "flex";
+            readonly flexWrap: "wrap";
+            readonly rowGap: "4";
+        };
+    }, "react">;
+    const content: zyzz.style.ReturnType<"react">;
+    const description: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.secondary";
+            readonly display: "block";
+            readonly typography: "body.b3";
+        };
+    }, "react">;
+    const heading: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.tertiary";
+            readonly display: "block";
+            readonly margin: "0";
+            readonly paddingBlockEnd: "8";
+            readonly typography: "body.b3Strong";
+        };
+    }, "react">;
+    const icon: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.tertiary";
+            readonly display: "inline-flex";
+            readonly flexShrink: "0 !custom";
+            readonly fontSize: "16";
+            readonly selectors: {
+                readonly '& > svg': {
+                    readonly height: "16";
+                    readonly width: "16";
+                };
+            };
+        };
+    }, "react">;
+    const indicator: zyzz.style.ReturnType<"react">;
+    const info: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly flexGrow: "1 !custom";
+            readonly minWidth: "0";
+            readonly rowGap: "4";
+        };
+        readonly defaultVariants: {
+            readonly size: "medium";
+        };
+        readonly variants: {
+            readonly size: {
+                readonly large: {
+                    readonly rowGap: "2";
+                    readonly selectors: {
+                        readonly '& > [data-description]': {
+                            readonly typography: "mono.m1";
+                        };
+                        readonly '& > [data-title]': {
+                            readonly typography: "body.b1Strong";
+                        };
+                    };
+                };
+                readonly medium: {};
+            };
+        };
+    }, "react">;
+    const label: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.secondary";
+            readonly flexShrink: "0 !custom";
+            readonly marginInlineEnd: "auto !custom";
+        };
+    }, "react">;
+    const meter: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly columnGap: "12";
+            readonly display: "flex";
+            readonly flexShrink: "0 !custom";
+        };
+    }, "react">;
+    const meterIndicator: zyzz.style.ReturnType<"react">;
+    const meterTrack: zyzz.style.ReturnType<"react">;
+    const meterValue: zyzz.style.ReturnType<"react">;
+    const radio: zyzz.style.ReturnType<"react">;
+    const radioGroup: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.primary";
+            readonly display: "flex";
+            readonly flexDirection: "column";
+            readonly rowGap: "12";
+            readonly typography: "body.b2";
+        };
+    }, "react">;
+    const root: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly display: "block";
+            readonly typography: "body.b3";
+            readonly selectors: {
+                readonly '& [data-divider]': {
+                    readonly position: "relative";
+                };
+                readonly '& [data-divider]::before': {
+                    readonly backgroundColor: "line.secondary";
+                    readonly content: "\"\" !custom";
+                    readonly height: "1";
+                    readonly insetBlockStart: "0";
+                    readonly insetInline: "0";
+                    readonly pointerEvents: "none";
+                    readonly position: "absolute";
+                };
+                readonly '& > [data-divider]:first-child::before': {
+                    readonly display: "none";
+                };
+                readonly '& [data-divider]:has([data-info])': {
+                    readonly paddingBlock: "12";
+                };
+                readonly '& [data-divider]:has([role="meter"])': {
+                    readonly paddingBlock: "10";
+                };
+                readonly '& [data-divider]:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled]):hover::before': {
+                    readonly display: "none";
+                };
+                readonly '& [data-divider]:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled]):hover + [data-divider]::before': {
+                    readonly display: "none";
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly dividers: true;
+            readonly variant: "plain";
+        };
+        readonly variants: {
+            readonly dividers: {
+                readonly false: {
+                    readonly selectors: {
+                        readonly '& [data-divider]::before': {
+                            readonly display: "none";
+                        };
+                    };
+                };
+                readonly true: {};
+            };
+            readonly variant: {
+                readonly boxed: {
+                    readonly backgroundColor: "background.secondary";
+                    readonly borderColor: "line.secondary";
+                    readonly borderRadius: "sm";
+                    readonly borderStyle: "solid";
+                    readonly borderWidth: "regular";
+                    readonly paddingBlock: "8";
+                    readonly paddingInline: "16";
+                    readonly selectors: {
+                        readonly '& > [data-divider]:first-child:has([data-info][data-size="large"])': {
+                            readonly paddingBlockStart: "0";
+                        };
+                    };
+                };
+                readonly plain: {};
+                readonly spaced: {
+                    readonly backgroundColor: "background.secondary";
+                    readonly borderColor: "line.secondary";
+                    readonly borderRadius: "sm";
+                    readonly borderStyle: "solid";
+                    readonly borderWidth: "regular";
+                    readonly display: "flex";
+                    readonly flexDirection: "column";
+                    readonly padding: "16";
+                    readonly rowGap: "12";
+                    readonly typography: "body.b2";
+                    readonly selectors: {
+                        readonly '& [data-divider]::before': {
+                            readonly display: "none";
+                        };
+                        readonly '& [data-divider], & [data-divider]:is(:has([data-info]), :has([role="meter"]))': {
+                            readonly minHeight: "0";
+                            readonly paddingBlock: "0";
+                        };
+                    };
+                };
+            };
+        };
+    }, "react">;
+    const row: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly backgroundColor: "transparent !custom";
+            readonly border: "none !custom";
+            readonly boxSizing: "border-box";
+            readonly color: "inherit !custom";
+            readonly columnGap: "12";
+            readonly display: "flex";
+            readonly font: "inherit !custom";
+            readonly minHeight: "36";
+            readonly outlineColor: "transparent !custom";
+            readonly outlineOffset: "0";
+            readonly outlineStyle: "solid !custom";
+            readonly outlineWidth: "2";
+            readonly paddingBlock: "2";
+            readonly paddingInline: "0";
+            readonly textAlign: "start";
+            readonly textDecoration: "none !custom";
+            readonly transitionDuration: "160";
+            readonly transitionProperty: "background-color, opacity, outline-color, outline-offset";
+            readonly transitionTimingFunction: "snappy";
+            readonly width: "100% !custom";
+            readonly selectors: {
+                readonly '&:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not([data-radio])': {
+                    readonly borderRadius: "xs";
+                };
+                readonly '&:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled], [data-radio]):hover': {
+                    readonly backgroundColor: "container.regular";
+                };
+                readonly '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled])': {
+                    readonly cursor: "pointer";
+                };
+                readonly '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active': {
+                    readonly backgroundColor: "container.strong";
+                };
+                readonly '&:is(a[href], button, [role="button"]):focus-visible': {
+                    readonly outlineColor: "border.focus";
+                    readonly outlineOffset: "-2";
+                };
+                readonly '&[data-radio]': {
+                    readonly backgroundColor: "background.elevated";
+                    readonly borderColor: "line.secondary";
+                    readonly borderRadius: "xs";
+                    readonly borderStyle: "solid";
+                    readonly borderWidth: "regular";
+                    readonly cursor: "pointer";
+                    readonly paddingBlock: "12";
+                    readonly paddingInline: "16";
+                    readonly transitionProperty: "background-color, border-color, opacity, scale !custom";
+                    readonly userSelect: "none";
+                };
+                readonly '&[data-radio]:hover:not(:has(> [data-checked], > :focus-visible, > [data-disabled]))': {
+                    readonly borderColor: "line.primary";
+                };
+                readonly '&[data-radio]:has(> [data-checked])': {
+                    readonly borderColor: "content.primary";
+                    readonly borderWidth: "1.5px !custom";
+                };
+                readonly '&[data-radio]:has(> [data-checked]):hover:not(:has(> [data-disabled]))': {
+                    readonly backgroundColor: "container.regular";
+                };
+                readonly '&[data-radio]:has(> [role="radio"]:focus-visible)': {
+                    readonly borderColor: "border.focus";
+                    readonly borderWidth: "thick";
+                };
+                readonly '&[data-radio]:active:not(:has(> [data-disabled]))': {
+                    readonly scale: "press";
+                };
+                readonly '&[data-disabled], &[data-radio]:has(> [data-disabled])': {
+                    readonly cursor: "default";
+                    readonly opacity: "disabled";
+                };
+            };
+            readonly '@media (prefers-reduced-motion: reduce)': {
+                readonly transitionProperty: "background-color, opacity, outline-color";
+                readonly selectors: {
+                    readonly '&[data-radio]': {
+                        readonly transitionProperty: "background-color, border-color, opacity";
+                    };
+                    readonly '&[data-radio]:active': {
+                        readonly scale: "none !custom";
+                    };
+                };
+            };
+        };
+    }, "react">;
+    const title: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly color: "content.primary";
+            readonly display: "block";
+            readonly typography: "body.b2Strong";
+        };
+    }, "react">;
+}
+export {};
+//# sourceMappingURL=ListGroup.d.ts.map

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

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