@tempoxyz/ds 0.3.0 → 0.3.2

package/dist/web/components/AppShell.css

@@ -1 +1 @@
-.z_tds_2f_web-xrJh8e0{background-color:var(--z-tds_2f_web-color-neutral-100,#000)}.z_tds_2f_web-xrJh8e1{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e2{opacity:.6}.z_tds_2f_web-xrJh8e3{position:fixed}.z_tds_2f_web-xrJh8e4{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}.z_tds_2f_web-xrJh8e5{transition-property:opacity}.z_tds_2f_web-xrJh8e6{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-xrJh8e7{z-index:var(--z-tds_2f_web-zIndex-overlay,40)}.z_tds_2f_web-xrJh8e8{&[data-ending-style]{opacity:0}}.z_tds_2f_web-xrJh8e9{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-200,.2s)}}.z_tds_2f_web-xrJh8ea{&[data-starting-style]{opacity:0}}.z_tds_2f_web-xrJh8eb{background-color:currentColor}.z_tds_2f_web-xrJh8ec{border-radius:var(--z-tds_2f_web-radius-full,var(--z-tds_2f_web-spacing-999,62.4375rem))}.z_tds_2f_web-xrJh8ed{corner-shape:round}.z_tds_2f_web-xrJh8ee{height:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-xrJh8ef{inset-inline-start:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8eg{position:absolute}.z_tds_2f_web-xrJh8eh{top:50%}.z_tds_2f_web-xrJh8ei{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-xrJh8ej{transition-property:transform}.z_tds_2f_web-xrJh8ek{width:100%}.z_tds_2f_web-xrJh8el{&:first-child{transform:translateY(-4px)}}.z_tds_2f_web-xrJh8em{&:last-child{transform:translateY(2px)}}.z_tds_2f_web-xrJh8en{[data-popup-open] &:first-child{transform:translateY(-1px)rotate(45deg)}}.z_tds_2f_web-xrJh8eo{[data-popup-open] &:last-child{transform:translateY(-1px)rotate(-45deg)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8ep{transition-property:none}}.z_tds_2f_web-xrJh8eq{display:block}.z_tds_2f_web-xrJh8er{height:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8es{position:relative}.z_tds_2f_web-xrJh8et{width:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8eu{border-inline-start-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-xrJh8ev{border-inline-start-style:solid}.z_tds_2f_web-xrJh8ew{border-inline-start-width:1px}.z_tds_2f_web-xrJh8ex{height:100%}.z_tds_2f_web-xrJh8ey{outline:none}.z_tds_2f_web-xrJh8ez{overflow-y:auto}.z_tds_2f_web-xrJh8e10{transform:translateX(var(--drawer-swipe-movement-x,0px))}.z_tds_2f_web-xrJh8e11{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}.z_tds_2f_web-xrJh8e12{transition-property:transform}.z_tds_2f_web-xrJh8e13{width:min(18rem,85vw)}.z_tds_2f_web-xrJh8e14{&[data-ending-style]{transform:translate(100%)}}.z_tds_2f_web-xrJh8e15{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-200,.2s)}}.z_tds_2f_web-xrJh8e16{&[data-starting-style]{transform:translate(100%)}}.z_tds_2f_web-xrJh8e17{&[data-swiping]{transition-duration:var(--z-tds_2f_web-transitionDuration-0,0s)}}.z_tds_2f_web-xrJh8e18{&[data-swiping]{user-select:none}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8e19{transition-property:opacity}.z_tds_2f_web-xrJh8e1a{&[data-ending-style],&[data-starting-style]{opacity:0}}.z_tds_2f_web-xrJh8e1b{&[data-ending-style],&[data-starting-style]{transform:none}}}.z_tds_2f_web-xrJh8e1c{align-items:center}.z_tds_2f_web-xrJh8e1d{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-100,#000)))}.z_tds_2f_web-xrJh8e1e{border-bottom-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-xrJh8e1f{border-bottom-style:solid}.z_tds_2f_web-xrJh8e1g{border-bottom-width:1px}.z_tds_2f_web-xrJh8e1h{box-sizing:border-box}.z_tds_2f_web-xrJh8e1i{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-xrJh8e1j{display:flex}.z_tds_2f_web-xrJh8e1k{justify-content:space-between}.z_tds_2f_web-xrJh8e1l{margin-bottom:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-xrJh8e1m{margin-inline:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}.z_tds_2f_web-xrJh8e1n{margin-top:var(--z-tds_2f_web-spacing-_2d_20,-1.25rem)}.z_tds_2f_web-xrJh8e1o{min-height:var(--z-tds_2f_web-spacing-56,3.5rem)}.z_tds_2f_web-xrJh8e1p{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e1q{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}@media (width>=640px){.z_tds_2f_web-xrJh8e1r{margin-inline:-2rem}.z_tds_2f_web-xrJh8e1s{padding-inline:var(--z-tds_2f_web-spacing-24,1.5rem)}}@media (width<=1023px){.z_tds_2f_web-xrJh8e1t{padding-inline-end:var(--z-tds_2f_web-spacing-64,4rem)}}.z_tds_2f_web-xrJh8e1u{flex-direction:column}.z_tds_2f_web-xrJh8e1v{max-width:var(--z-tds_2f_web-container-1024,64rem)}.z_tds_2f_web-xrJh8e1w{padding-bottom:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-xrJh8e1x{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e1y{padding-top:var(--z-tds_2f_web-spacing-20,1.25rem)}.z_tds_2f_web-xrJh8e1z{width:100%}@media (width>=640px){.z_tds_2f_web-xrJh8e20{padding-inline:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-xrJh8e21{background-color:var(--z-tds_2f_web-color-background-primary,light-dark(var(--z-tds_2f_web-color-neutral-004,#f5f5f5),var(--z-tds_2f_web-color-neutral-100,#000)))}.z_tds_2f_web-xrJh8e22{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-xrJh8e23{display:flex}.z_tds_2f_web-xrJh8e24{min-height:100dvh}.z_tds_2f_web-xrJh8e25{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-xrJh8e26{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-xrJh8e27{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-xrJh8e28{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-xrJh8e29{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-xrJh8e2a{&:after,&:before{content:""}}.z_tds_2f_web-xrJh8e2b{&:after,&:before{flex:1}}.z_tds_2f_web-xrJh8e2c{&:before{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-100,#000)))}}@media (width<=1023px){.z_tds_2f_web-xrJh8e2d{&:after,&:before{display:none}}}@media (width>=1024px){.z_tds_2f_web-xrJh8e2e{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-outset:0 max(0px, calc((100vw - var(--sidebar-width,16rem) - var(--z-tds_2f_web-container-1024,64rem)) / 2)) 0 0}}}.z_tds_2f_web-xrJh8e2f{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-slice:0 fill}}}.z_tds_2f_web-xrJh8e2g{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-source:linear-gradient(var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-100,#000))) calc(100% - 1px), 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))) 0)}}}.z_tds_2f_web-xrJh8e2h{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-width:0}}}}.z_tds_2f_web-xrJh8e2i{&:where([data-align=start]){&:after,&:before{display:none}}}.z_tds_2f_web-xrJh8e2j{&:where([data-align=start]){&>main{flex:1}}}.z_tds_2f_web-xrJh8e2k{&:where([data-align=start]){&>main{max-width:none}}}.z_tds_2f_web-xrJh8e2l{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-100,#000)))}.z_tds_2f_web-xrJh8e2m{display:flex}.z_tds_2f_web-xrJh8e2n{flex-shrink:0}.z_tds_2f_web-xrJh8e2o{min-height:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e2p{padding-bottom:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e2q{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-xrJh8e2r{row-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e2s{border-inline-end-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-xrJh8e2t{border-inline-end-style:solid}.z_tds_2f_web-xrJh8e2u{border-inline-end-width:1px}.z_tds_2f_web-xrJh8e2v{height:100dvh}.z_tds_2f_web-xrJh8e2w{inset-block-start:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e2x{position:sticky}.z_tds_2f_web-xrJh8e2y{width:var(--sidebar-width,16rem)}@media (width<=1023px){.z_tds_2f_web-xrJh8e2z{display:none}}.z_tds_2f_web-xrJh8e30{--tds-sidebar-scrollbar-thumb: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-xrJh8e31{flex:1}.z_tds_2f_web-xrJh8e32{margin-inline:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}.z_tds_2f_web-xrJh8e33{overscroll-behavior:contain}.z_tds_2f_web-xrJh8e34{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-xrJh8e35{scrollbar-color:var(--tds-sidebar-scrollbar-thumb) transparent}.z_tds_2f_web-xrJh8e36{scrollbar-gutter:stable}.z_tds_2f_web-xrJh8e37{scrollbar-width:thin}.z_tds_2f_web-xrJh8e38{&:after,&:before{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-100,#000)))}}.z_tds_2f_web-xrJh8e39{&:after,&:before{display:block}}.z_tds_2f_web-xrJh8e3a{&:after,&:before{height:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-xrJh8e3b{&:after,&:before{opacity:0}}.z_tds_2f_web-xrJh8e3c{&:after,&:before{pointer-events:none}}.z_tds_2f_web-xrJh8e3d{&:after,&:before{position:sticky}}.z_tds_2f_web-xrJh8e3e{&:after,&:before{z-index:1}}.z_tds_2f_web-xrJh8e3f{&:after{animation-range:calc(100% - 24px) 100%}}.z_tds_2f_web-xrJh8e3g{&:after{bottom:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-xrJh8e3h{&:after{margin-top:-24px}}.z_tds_2f_web-xrJh8e3i{&:after{mask-image:linear-gradient(#0000,#000)}}.z_tds_2f_web-xrJh8e3j{&:before{animation-range:0 24px}}.z_tds_2f_web-xrJh8e3k{&:before{margin-bottom:-24px}}.z_tds_2f_web-xrJh8e3l{&:before{mask-image:linear-gradient(#000,#0000)}}.z_tds_2f_web-xrJh8e3m{&:before{top:var(--z-tds_2f_web-spacing-0,0rem)}}@supports (animation-timeline:scroll()){.z_tds_2f_web-xrJh8e3n{&:after,&:before{animation-fill-mode:both}}.z_tds_2f_web-xrJh8e3o{&:after,&:before{animation-timeline:scroll()}}.z_tds_2f_web-xrJh8e3p{&:after,&:before{animation-timing-function:linear}}.z_tds_2f_web-xrJh8e3q{&:after{animation-name:z-kid-tds_2f_web_2f_app_2d_shell_2f_fade_2d_out}}.z_tds_2f_web-xrJh8e3r{&:before{animation-name:z-kid-tds_2f_web_2f_app_2d_shell_2f_fade_2d_in}}}.z_tds_2f_web-xrJh8e3s{display:flex}.z_tds_2f_web-xrJh8e3t{flex-shrink:0}.z_tds_2f_web-xrJh8e3u{margin-top:auto}.z_tds_2f_web-xrJh8e3v{row-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-xrJh8e3w{padding-top:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e3x{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e3y{font-family:var(--z-tds_2f_web-typography-heading-h2-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-xrJh8e3z{font-size:var(--z-tds_2f_web-typography-heading-h2-fontSize,24px)}.z_tds_2f_web-xrJh8e40{font-weight:var(--z-tds_2f_web-typography-heading-h2-fontWeight,500)}.z_tds_2f_web-xrJh8e41{letter-spacing:var(--z-tds_2f_web-typography-heading-h2-letterSpacing,-.36px)}.z_tds_2f_web-xrJh8e42{line-height:var(--z-tds_2f_web-typography-heading-h2-lineHeight,27.6px)}.z_tds_2f_web-xrJh8e43{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-xrJh8e44{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-xrJh8e45{border-style:solid}.z_tds_2f_web-xrJh8e46{border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}.z_tds_2f_web-xrJh8e47{cursor:pointer}.z_tds_2f_web-xrJh8e48{display:inline-flex}.z_tds_2f_web-xrJh8e49{height:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-xrJh8e4a{inset-block-start:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-xrJh8e4b{inset-inline-end:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e4c{justify-content:center}.z_tds_2f_web-xrJh8e4d{outline-color:#0000}.z_tds_2f_web-xrJh8e4e{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-xrJh8e4f{outline-style:solid}.z_tds_2f_web-xrJh8e4g{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-xrJh8e4h{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e4i{position:fixed}.z_tds_2f_web-xrJh8e4j{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-xrJh8e4k{transition-property:background-color,outline-color,outline-offset,transform}.z_tds_2f_web-xrJh8e4l{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-xrJh8e4m{width:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-xrJh8e4n{z-index:var(--z-tds_2f_web-zIndex-modal,60)}.z_tds_2f_web-xrJh8e4o{&:active{transform:scale(.96)}}.z_tds_2f_web-xrJh8e4p{&: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-xrJh8e4q{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-xrJh8e4r{&: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-xrJh8e4s{&[data-popup-open]{transform:translate(calc(8px - min(18rem,85vw)))}}.z_tds_2f_web-xrJh8e4t{&[data-popup-open]{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}}.z_tds_2f_web-xrJh8e4u{&[data-popup-open]{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}}@media (width>=1024px){.z_tds_2f_web-xrJh8e4v{display:none}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8e4w{transition-property:background-color,outline-color,outline-offset}.z_tds_2f_web-xrJh8e4x{&:active{transform:none}}}.z_tds_2f_web-xrJh8e4y{display:flex}.z_tds_2f_web-xrJh8e4z{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e50{justify-content:flex-end}.z_tds_2f_web-xrJh8e51{z-index:var(--z-tds_2f_web-zIndex-popover,50)}
+.z_tds_2f_web-xrJh8e0{align-items:center}.z_tds_2f_web-xrJh8e1{background-color:var(--z-tds_2f_web-color-inverse-background-secondary,light-dark(var(--z-tds_2f_web-color-neutral-092,#141414),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-xrJh8e2{border-radius:var(--z-tds_2f_web-radius-full,var(--z-tds_2f_web-spacing-999,62.4375rem))}.z_tds_2f_web-xrJh8e3{box-shadow:var(--z-tds_2f_web-shadow-large,0 24px 64px #00000014, 0 8px 48px #00000014, 0 2px 8px #0000000a)}.z_tds_2f_web-xrJh8e4{box-sizing:border-box}.z_tds_2f_web-xrJh8e5{color:var(--z-tds_2f_web-color-inverse-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-100,#000)))}.z_tds_2f_web-xrJh8e6{corner-shape:round}.z_tds_2f_web-xrJh8e7{cursor:pointer}.z_tds_2f_web-xrJh8e8{display:flex}.z_tds_2f_web-xrJh8e9{flex-shrink:0}.z_tds_2f_web-xrJh8ea{height:var(--z-tds_2f_web-spacing-56,3.5rem)}.z_tds_2f_web-xrJh8eb{justify-content:center}.z_tds_2f_web-xrJh8ec{outline-color:#0000}.z_tds_2f_web-xrJh8ed{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-xrJh8ee{outline-style:solid}.z_tds_2f_web-xrJh8ef{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-xrJh8eg{position:relative}.z_tds_2f_web-xrJh8eh{text-decoration:none}.z_tds_2f_web-xrJh8ei{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-xrJh8ej{transition-property:opacity,outline-color,scale}.z_tds_2f_web-xrJh8ek{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-xrJh8el{width:var(--z-tds_2f_web-spacing-56,3.5rem)}.z_tds_2f_web-xrJh8em{&>:first-child{flex-shrink:0}}.z_tds_2f_web-xrJh8en{&>:first-child{font-size:var(--z-tds_2f_web-fontSize-24,1.5rem)}}.z_tds_2f_web-xrJh8eo{&>:not(:first-child){clip-path:inset(50%)}}.z_tds_2f_web-xrJh8ep{&>:not(:first-child){height:1px}}.z_tds_2f_web-xrJh8eq{&>:not(:first-child){overflow:hidden}}.z_tds_2f_web-xrJh8er{&>:not(:first-child){position:absolute}}.z_tds_2f_web-xrJh8es{&>:not(:first-child){white-space:nowrap}}.z_tds_2f_web-xrJh8et{&>:not(:first-child){width:1px}}.z_tds_2f_web-xrJh8eu{&:active{scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-xrJh8ev{&:active{transition-duration:var(--z-tds_2f_web-transitionDuration-100,.1s)}}.z_tds_2f_web-xrJh8ew{&: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-xrJh8ex{&:hover{opacity:.88}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8ey{transition-property:opacity,outline-color}.z_tds_2f_web-xrJh8ez{&:active{scale:none}}}.z_tds_2f_web-xrJh8e10{background-color:var(--z-tds_2f_web-color-neutral-100,#000)}.z_tds_2f_web-xrJh8e11{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e12{opacity:.6}.z_tds_2f_web-xrJh8e13{position:fixed}.z_tds_2f_web-xrJh8e14{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}.z_tds_2f_web-xrJh8e15{transition-property:opacity}.z_tds_2f_web-xrJh8e16{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-xrJh8e17{z-index:var(--z-tds_2f_web-zIndex-overlay,40)}.z_tds_2f_web-xrJh8e18{&[data-ending-style]{opacity:0}}.z_tds_2f_web-xrJh8e19{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-200,.2s)}}.z_tds_2f_web-xrJh8e1a{&[data-starting-style]{opacity:0}}.z_tds_2f_web-xrJh8e1b{background-color:currentColor}.z_tds_2f_web-xrJh8e1c{height:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-xrJh8e1d{inset-inline-start:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e1e{position:absolute}.z_tds_2f_web-xrJh8e1f{top:50%}.z_tds_2f_web-xrJh8e1g{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-xrJh8e1h{transition-property:transform}.z_tds_2f_web-xrJh8e1i{width:100%}.z_tds_2f_web-xrJh8e1j{&:first-child{transform:translateY(-4px)}}.z_tds_2f_web-xrJh8e1k{&:last-child{transform:translateY(2px)}}.z_tds_2f_web-xrJh8e1l{[data-popup-open] &:first-child{transform:translateY(-1px)rotate(45deg)}}.z_tds_2f_web-xrJh8e1m{[data-popup-open] &:last-child{transform:translateY(-1px)rotate(-45deg)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8e1n{transition-property:none}}.z_tds_2f_web-xrJh8e1o{bottom:calc(1rem + env(safe-area-inset-bottom))}.z_tds_2f_web-xrJh8e1p{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-xrJh8e1q{display:none}.z_tds_2f_web-xrJh8e1r{inset-inline:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-xrJh8e1s{position:fixed}.z_tds_2f_web-xrJh8e1t{z-index:39}.z_tds_2f_web-xrJh8e1u{[data-state=open]>&[data-app-shell-menu]{z-index:var(--z-tds_2f_web-zIndex-modal,60)}}.z_tds_2f_web-xrJh8e1v{[data-state=open]>&[data-app-shell-menu]>:not([data-app-shell-menu-trigger]){opacity:0}}.z_tds_2f_web-xrJh8e1w{[data-state=open]>&[data-app-shell-menu]>:not([data-app-shell-menu-trigger]){pointer-events:none}}@media (width<=767px){.z_tds_2f_web-xrJh8e1x{display:flex}}.z_tds_2f_web-xrJh8e1y{display:block}.z_tds_2f_web-xrJh8e1z{height:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e20{position:relative}.z_tds_2f_web-xrJh8e21{width:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e22{border-inline-start-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-xrJh8e23{border-inline-start-style:solid}.z_tds_2f_web-xrJh8e24{border-inline-start-width:1px}.z_tds_2f_web-xrJh8e25{height:100%}.z_tds_2f_web-xrJh8e26{outline:none}.z_tds_2f_web-xrJh8e27{overflow-y:auto}.z_tds_2f_web-xrJh8e28{transform:translateX(var(--drawer-swipe-movement-x,0px))}.z_tds_2f_web-xrJh8e29{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}.z_tds_2f_web-xrJh8e2a{transition-property:transform}.z_tds_2f_web-xrJh8e2b{width:min(18rem,85vw)}.z_tds_2f_web-xrJh8e2c{&[data-ending-style]{transform:translate(100%)}}.z_tds_2f_web-xrJh8e2d{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-200,.2s)}}.z_tds_2f_web-xrJh8e2e{&[data-starting-style]{transform:translate(100%)}}.z_tds_2f_web-xrJh8e2f{&[data-swiping]{transition-duration:var(--z-tds_2f_web-transitionDuration-0,0s)}}.z_tds_2f_web-xrJh8e2g{&[data-swiping]{user-select:none}}.z_tds_2f_web-xrJh8e2h{[data-state]:has(>[data-app-shell-bottom-bar][data-app-shell-menu]) &{padding-block-end:calc(5.5rem + env(safe-area-inset-bottom))}}.z_tds_2f_web-xrJh8e2i{&[hidden]{display:none}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8e2j{transition-property:opacity}.z_tds_2f_web-xrJh8e2k{&[data-ending-style],&[data-starting-style]{opacity:0}}.z_tds_2f_web-xrJh8e2l{&[data-ending-style],&[data-starting-style]{transform:none}}}.z_tds_2f_web-xrJh8e2m{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-096,#0a0a0a)))}.z_tds_2f_web-xrJh8e2n{border-bottom-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-xrJh8e2o{border-bottom-style:solid}.z_tds_2f_web-xrJh8e2p{border-bottom-width:1px}.z_tds_2f_web-xrJh8e2q{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-xrJh8e2r{display:flex}.z_tds_2f_web-xrJh8e2s{justify-content:space-between}.z_tds_2f_web-xrJh8e2t{margin-bottom:var(--z-tds_2f_web-spacing-24,1.5rem)}.z_tds_2f_web-xrJh8e2u{margin-inline:var(--z-tds_2f_web-spacing-_2d_16,-1rem)}.z_tds_2f_web-xrJh8e2v{margin-top:var(--z-tds_2f_web-spacing-_2d_20,-1.25rem)}.z_tds_2f_web-xrJh8e2w{min-height:var(--z-tds_2f_web-spacing-56,3.5rem)}.z_tds_2f_web-xrJh8e2x{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e2y{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}@media (width>=640px){.z_tds_2f_web-xrJh8e2z{margin-inline:-2rem}.z_tds_2f_web-xrJh8e30{padding-inline:var(--z-tds_2f_web-spacing-24,1.5rem)}}@media (width<=1023px){.z_tds_2f_web-xrJh8e31{padding-inline-end:var(--z-tds_2f_web-spacing-64,4rem)}}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-xrJh8e32{[data-app-shell-collapse]>main>&{padding-inline-end:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-xrJh8e33{flex-direction:column}.z_tds_2f_web-xrJh8e34{max-width:var(--z-tds_2f_web-container-1024,64rem)}.z_tds_2f_web-xrJh8e35{padding-bottom:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-xrJh8e36{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e37{padding-top:var(--z-tds_2f_web-spacing-20,1.25rem)}.z_tds_2f_web-xrJh8e38{width:100%}@media (width>=640px){.z_tds_2f_web-xrJh8e39{padding-inline:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-xrJh8e3a{background-color:var(--z-tds_2f_web-color-background-primary,light-dark(var(--z-tds_2f_web-color-neutral-004,#f5f5f5),var(--z-tds_2f_web-color-neutral-100,#000)))}.z_tds_2f_web-xrJh8e3b{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-xrJh8e3c{display:flex}.z_tds_2f_web-xrJh8e3d{min-height:100dvh}.z_tds_2f_web-xrJh8e3e{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-xrJh8e3f{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-xrJh8e3g{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-xrJh8e3h{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-xrJh8e3i{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-xrJh8e3j{&:after,&:before{content:""}}.z_tds_2f_web-xrJh8e3k{&:after,&:before{flex:1}}.z_tds_2f_web-xrJh8e3l{&:before{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-096,#0a0a0a)))}}@media (width<=1023px){.z_tds_2f_web-xrJh8e3m{&:after,&:before{display:none}}}@media (width<=767px){.z_tds_2f_web-xrJh8e3n{&:has(>[data-app-shell-bottom-bar])>main{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}}}@media (width>=1024px){.z_tds_2f_web-xrJh8e3o{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-outset:0 max(0px, calc((100vw - var(--sidebar-width,16rem) - var(--z-tds_2f_web-container-1024,64rem)) / 2)) 0 0}}}.z_tds_2f_web-xrJh8e3p{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-slice:0 fill}}}.z_tds_2f_web-xrJh8e3q{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-source:linear-gradient(var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-096,#0a0a0a))) calc(100% - 1px), 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))) 0)}}}.z_tds_2f_web-xrJh8e3r{&:where([data-align=center]){&>main>[data-app-shell-header]{border-image-width:0}}}}.z_tds_2f_web-xrJh8e3s{&:where([data-align=start]){&:after,&:before{display:none}}}.z_tds_2f_web-xrJh8e3t{&:where([data-align=start]){&>main{flex:1}}}.z_tds_2f_web-xrJh8e3u{&:where([data-align=start]){&>main{max-width:none}}}.z_tds_2f_web-xrJh8e3v{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-096,#0a0a0a)))}.z_tds_2f_web-xrJh8e3w{display:flex}.z_tds_2f_web-xrJh8e3x{flex-shrink:0}.z_tds_2f_web-xrJh8e3y{min-height:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e3z{padding-bottom:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e40{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-xrJh8e41{row-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e42{clip-path:inset(50%)}.z_tds_2f_web-xrJh8e43{height:1px}.z_tds_2f_web-xrJh8e44{overflow:hidden}.z_tds_2f_web-xrJh8e45{position:absolute}.z_tds_2f_web-xrJh8e46{white-space:nowrap}.z_tds_2f_web-xrJh8e47{width:1px}.z_tds_2f_web-xrJh8e48{border-inline-end-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-xrJh8e49{border-inline-end-style:solid}.z_tds_2f_web-xrJh8e4a{border-inline-end-width:1px}.z_tds_2f_web-xrJh8e4b{height:100dvh}.z_tds_2f_web-xrJh8e4c{inset-block-start:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e4d{overflow-y:auto}.z_tds_2f_web-xrJh8e4e{position:sticky}.z_tds_2f_web-xrJh8e4f{width:var(--sidebar-width,16rem)}@media (width<=1023px){.z_tds_2f_web-xrJh8e4g{display:none}}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-xrJh8e4h{&[data-app-shell-rail]{display:flex}}.z_tds_2f_web-xrJh8e4i{&[data-app-shell-rail]{width:4rem}}}.z_tds_2f_web-xrJh8e4j{--tds-sidebar-scrollbar-thumb: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-xrJh8e4k{flex:1}.z_tds_2f_web-xrJh8e4l{margin-inline:var(--z-tds_2f_web-spacing-_2d_12,-.75rem)}.z_tds_2f_web-xrJh8e4m{overscroll-behavior:contain}.z_tds_2f_web-xrJh8e4n{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-xrJh8e4o{scrollbar-color:var(--tds-sidebar-scrollbar-thumb) transparent}.z_tds_2f_web-xrJh8e4p{scrollbar-gutter:stable}.z_tds_2f_web-xrJh8e4q{scrollbar-width:thin}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-xrJh8e4r{[data-app-shell-rail] &{scrollbar-gutter:auto}}.z_tds_2f_web-xrJh8e4s{[data-app-shell-rail] &{scrollbar-width:none}}}.z_tds_2f_web-xrJh8e4t{&:after,&:before{background-color:var(--z-tds_2f_web-color-background-sidebar,light-dark(#fafafa,var(--z-tds_2f_web-color-neutral-096,#0a0a0a)))}}.z_tds_2f_web-xrJh8e4u{&:after,&:before{display:block}}.z_tds_2f_web-xrJh8e4v{&:after,&:before{height:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-xrJh8e4w{&:after,&:before{opacity:0}}.z_tds_2f_web-xrJh8e4x{&:after,&:before{pointer-events:none}}.z_tds_2f_web-xrJh8e4y{&:after,&:before{position:sticky}}.z_tds_2f_web-xrJh8e4z{&:after,&:before{z-index:1}}.z_tds_2f_web-xrJh8e50{&:after{animation-range:calc(100% - 24px) 100%}}.z_tds_2f_web-xrJh8e51{&:after{bottom:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-xrJh8e52{&:after{margin-top:-24px}}.z_tds_2f_web-xrJh8e53{&:after{mask-image:linear-gradient(#0000,#000)}}.z_tds_2f_web-xrJh8e54{&:before{animation-range:0 24px}}.z_tds_2f_web-xrJh8e55{&:before{margin-bottom:-24px}}.z_tds_2f_web-xrJh8e56{&:before{mask-image:linear-gradient(#000,#0000)}}.z_tds_2f_web-xrJh8e57{&:before{top:var(--z-tds_2f_web-spacing-0,0rem)}}@supports (animation-timeline:scroll()){.z_tds_2f_web-xrJh8e58{&:after,&:before{animation-fill-mode:both}}.z_tds_2f_web-xrJh8e59{&:after,&:before{animation-timeline:scroll()}}.z_tds_2f_web-xrJh8e5a{&:after,&:before{animation-timing-function:linear}}.z_tds_2f_web-xrJh8e5b{&:after{animation-name:z-kid-tds_2f_web_2f_app_2d_shell_2f_fade_2d_out}}.z_tds_2f_web-xrJh8e5c{&:before{animation-name:z-kid-tds_2f_web_2f_app_2d_shell_2f_fade_2d_in}}}.z_tds_2f_web-xrJh8e5d{display:flex}.z_tds_2f_web-xrJh8e5e{flex-shrink:0}.z_tds_2f_web-xrJh8e5f{margin-top:auto}.z_tds_2f_web-xrJh8e5g{row-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-xrJh8e5h{padding-top:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e5i{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-064,#ffffffa3)))}.z_tds_2f_web-xrJh8e5j{flex:1}.z_tds_2f_web-xrJh8e5k{height:100%}.z_tds_2f_web-xrJh8e5l{justify-content:center}.z_tds_2f_web-xrJh8e5m{outline-color:#0000}.z_tds_2f_web-xrJh8e5n{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}.z_tds_2f_web-xrJh8e5o{outline-style:solid}.z_tds_2f_web-xrJh8e5p{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-xrJh8e5q{position:relative}.z_tds_2f_web-xrJh8e5r{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-xrJh8e5s{transition-property:background-color,color,outline-color,scale}.z_tds_2f_web-xrJh8e5t{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-xrJh8e5u{&>:first-child{flex-shrink:0}}.z_tds_2f_web-xrJh8e5v{&>:first-child{font-size:var(--z-tds_2f_web-fontSize-24,1.5rem)}}.z_tds_2f_web-xrJh8e5w{&>:not(:first-child){clip-path:inset(50%)}}.z_tds_2f_web-xrJh8e5x{&>:not(:first-child){height:1px}}.z_tds_2f_web-xrJh8e5y{&>:not(:first-child){overflow:hidden}}.z_tds_2f_web-xrJh8e5z{&>:not(:first-child){position:absolute}}.z_tds_2f_web-xrJh8e60{&>:not(:first-child){white-space:nowrap}}.z_tds_2f_web-xrJh8e61{&>:not(:first-child){width:1px}}.z_tds_2f_web-xrJh8e62{&:active{transition-duration:var(--z-tds_2f_web-transitionDuration-100,.1s)}}.z_tds_2f_web-xrJh8e63{&: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-xrJh8e64{&:hover{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-xrJh8e65{transition-property:background-color,color,outline-color}}.z_tds_2f_web-xrJh8e66{&:where([data-active=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-xrJh8e67{&:where([data-active=true]){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-xrJh8e68{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-xrJh8e69{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-xrJh8e6a{border-style:solid}.z_tds_2f_web-xrJh8e6b{border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}.z_tds_2f_web-xrJh8e6c{box-shadow:var(--z-tds_2f_web-shadow-regular,0 8px 48px #0000000a, 0 4px 16px #0000000a, 0 2px 8px #0000000a)}.z_tds_2f_web-xrJh8e6d{flex:1}.z_tds_2f_web-xrJh8e6e{height:var(--z-tds_2f_web-spacing-56,3.5rem)}.z_tds_2f_web-xrJh8e6f{padding-block:var(--z-tds_2f_web-spacing-3,.1875rem)}.z_tds_2f_web-xrJh8e6g{padding-inline:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-xrJh8e6h{transition-duration:var(--z-tds_2f_web-transitionDuration-200,.2s)}.z_tds_2f_web-xrJh8e6i{transition-property:opacity}.z_tds_2f_web-xrJh8e6j{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-xrJh8e6k{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e6l{font-family:var(--z-tds_2f_web-typography-heading-h2-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-xrJh8e6m{font-size:var(--z-tds_2f_web-typography-heading-h2-fontSize,24px)}.z_tds_2f_web-xrJh8e6n{font-weight:var(--z-tds_2f_web-typography-heading-h2-fontWeight,500)}.z_tds_2f_web-xrJh8e6o{letter-spacing:var(--z-tds_2f_web-typography-heading-h2-letterSpacing,-.36px)}.z_tds_2f_web-xrJh8e6p{line-height:var(--z-tds_2f_web-typography-heading-h2-lineHeight,27.6px)}.z_tds_2f_web-xrJh8e6q{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-xrJh8e6r{display:inline-flex}.z_tds_2f_web-xrJh8e6s{height:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-xrJh8e6t{inset-block-start:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-xrJh8e6u{inset-inline-end:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-xrJh8e6v{outline-color:#0000}.z_tds_2f_web-xrJh8e6w{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-xrJh8e6x{outline-style:solid}.z_tds_2f_web-xrJh8e6y{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-xrJh8e6z{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e70{position:fixed}.z_tds_2f_web-xrJh8e71{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-xrJh8e72{transition-property:background-color,outline-color,outline-offset,transform}.z_tds_2f_web-xrJh8e73{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-xrJh8e74{width:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-xrJh8e75{z-index:var(--z-tds_2f_web-zIndex-modal,60)}.z_tds_2f_web-xrJh8e76{&:active{transform:scale(.96)}}.z_tds_2f_web-xrJh8e77{&: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-xrJh8e78{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}.z_tds_2f_web-xrJh8e79{&: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-008,#ffffff14)))}}.z_tds_2f_web-xrJh8e7a{&[data-popup-open]{transform:translate(calc(8px - min(18rem,85vw)))}}.z_tds_2f_web-xrJh8e7b{&[data-popup-open]{transition-duration:var(--z-tds_2f_web-transitionDuration-280,.28s)}}.z_tds_2f_web-xrJh8e7c{&[data-popup-open]{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}}@media (width>=1024px){.z_tds_2f_web-xrJh8e7d{display:none}}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-xrJh8e7e{[data-app-shell-collapse] &{display:none}}}@media (width<=767px){.z_tds_2f_web-xrJh8e7f{&[data-app-shell-tab-bar]{display:none}}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-xrJh8e7g{transition-property:background-color,outline-color,outline-offset}.z_tds_2f_web-xrJh8e7h{&:active{transform:none}}}.z_tds_2f_web-xrJh8e7i{display:flex}.z_tds_2f_web-xrJh8e7j{inset:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-xrJh8e7k{justify-content:flex-end}.z_tds_2f_web-xrJh8e7l{z-index:var(--z-tds_2f_web-zIndex-popover,50)}.z_tds_2f_web-xrJh8e7m{&[hidden]{display:none}}

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

@@ -55,6 +55,13 @@ export declare namespace AppShell {
     function Root(props: Root.Props): import("react").JSX.Element;
     namespace Root {
         type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.root> & {
+            /**
+             * Collapses the inline sidebar to a 64px column of icons from 768px to 1023px, and opens
+             * the drawer only below 768px. Give every `SidebarMenu.Item` an icon as its first child.
+             * Absent, the sidebar opens as a drawer below 1024px.
+             * @default false
+             */
+            collapse?: boolean | undefined;
             /**
              * Initial drawer state when `open` is uncontrolled.
              * @default false
@@ -100,16 +107,29 @@ export declare namespace AppShell {
      * Toggles the sidebar drawer from a button fixed to the top-right corner, above the drawer, whose
      * two bars turn into a close mark while it is open. Hidden from 1024px, where the sidebar is
      * always visible. It is named `Open menu` or `Close menu` and exposes `aria-expanded`. Pass
-     * `aria-label` to replace the name, or `children` to replace the bars.
+     * `aria-label` to replace the name, or `children` to replace the bars. With `tabBar`, the bottom
+     * bar renders it as its floating action button below 768px instead of the top-right button.
+     *
+     * @example
+     * <AppShell.Trigger tabBar />
      */
     function Trigger(props: Trigger.Props): import("react").JSX.Element;
     namespace Trigger {
-        type Props = ComponentPropsWithRef<'button'> & zyzz.Props.Variants<typeof styles.trigger> & Pick<BaseUi.Drawer.Trigger.Props, 'nativeButton' | 'render'>;
+        type Props = ComponentPropsWithRef<'button'> & zyzz.Props.Variants<typeof styles.trigger> & Pick<BaseUi.Drawer.Trigger.Props, 'nativeButton' | 'render'> & {
+            /**
+             * Renders the trigger as the floating action button of the bottom bar below 768px, after
+             * the `action` items, in place of the top-right button. While the drawer is open, the
+             * button stays above it as a close mark, and the other items of the bar fade out.
+             */
+            tabBar?: boolean | undefined;
+        };
     }
 }
 declare namespace styles {
+    const action: zyzz.style.ReturnType<"react">;
     const backdrop: zyzz.style.ReturnType<"react">;
     const bar: zyzz.style.ReturnType<"react">;
+    const bottomBar: zyzz.style.ReturnType<"react">;
     const bars: zyzz.style.ReturnType<"react">;
     const drawer: zyzz.style.ReturnType<"react">;
     const header: zyzz.variants.ReturnType<{
@@ -136,6 +156,13 @@ declare namespace styles {
             readonly '@media (max-width: 1023px)': {
                 readonly paddingInlineEnd: "64";
             };
+            readonly '@media (min-width: 768px) and (max-width: 1023px)': {
+                readonly selectors: {
+                    readonly '[data-app-shell-collapse] > main > &': {
+                        readonly paddingInlineEnd: "24";
+                    };
+                };
+            };
         };
     }, "react">;
     const main: zyzz.variants.ReturnType<{
@@ -178,6 +205,13 @@ declare namespace styles {
                     };
                 };
             };
+            readonly '@media (max-width: 767px)': {
+                readonly selectors: {
+                    readonly '&:has(> [data-app-shell-bottom-bar]) > main': {
+                        readonly paddingBottom: "calc(5.5rem + env(safe-area-inset-bottom)) !custom";
+                    };
+                };
+            };
         };
         readonly defaultVariants: {
             readonly align: "center";
@@ -223,6 +257,7 @@ declare namespace styles {
             readonly rowGap: "16";
         };
     }, "react">;
+    const label: zyzz.style.ReturnType<"react">;
     const inline: zyzz.style.ReturnType<"react">;
     const sidebarBody: zyzz.variants.ReturnType<{
         readonly base: {
@@ -236,6 +271,14 @@ declare namespace styles {
             readonly scrollbarColor: "var(--tds-sidebar-scrollbar-thumb) transparent !custom";
             readonly scrollbarGutter: "stable";
             readonly scrollbarWidth: "thin";
+            readonly '@media (min-width: 768px) and (max-width: 1023px)': {
+                readonly selectors: {
+                    readonly '[data-app-shell-rail] &': {
+                        readonly scrollbarGutter: "auto !custom";
+                        readonly scrollbarWidth: "none !custom";
+                    };
+                };
+            };
             readonly selectors: {
                 readonly '&::after, &::before': {
                     readonly backgroundColor: "background.sidebar";
@@ -292,6 +335,75 @@ declare namespace styles {
             readonly paddingTop: "16";
         };
     }, "react">;
+    const tab: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly borderRadius: "full";
+            readonly boxSizing: "border-box";
+            readonly color: "content.secondary";
+            readonly cornerShape: "round";
+            readonly cursor: "pointer";
+            readonly display: "flex";
+            readonly flex: "1 !custom";
+            readonly height: "100% !custom";
+            readonly justifyContent: "center";
+            readonly minWidth: "0";
+            readonly outlineColor: "transparent !custom";
+            readonly outlineOffset: "-2";
+            readonly outlineStyle: "solid !custom";
+            readonly outlineWidth: "2";
+            readonly position: "relative";
+            readonly textDecoration: "none !custom";
+            readonly transitionDuration: "160";
+            readonly transitionProperty: "background-color, color, outline-color, scale !custom";
+            readonly transitionTimingFunction: "snappy";
+            readonly selectors: {
+                readonly '& > :first-child': {
+                    readonly flexShrink: "0 !custom";
+                    readonly fontSize: "24";
+                };
+                readonly '& > :not(:first-child)': {
+                    readonly clipPath: "inset(50%) !custom";
+                    readonly height: "1px !custom";
+                    readonly overflow: "hidden";
+                    readonly position: "absolute";
+                    readonly whiteSpace: "nowrap";
+                    readonly width: "1px !custom";
+                };
+                readonly '&:active': {
+                    readonly scale: "press";
+                    readonly transitionDuration: "100";
+                };
+                readonly '&:focus-visible': {
+                    readonly outlineColor: "border.focus";
+                };
+                readonly '&:hover': {
+                    readonly color: "content.primary";
+                };
+            };
+            readonly '@media (prefers-reduced-motion: reduce)': {
+                readonly transitionProperty: "background-color, color, outline-color !custom";
+                readonly selectors: {
+                    readonly '&:active': {
+                        readonly scale: "none !custom";
+                    };
+                };
+            };
+        };
+        readonly defaultVariants: {
+            readonly active: false;
+        };
+        readonly variants: {
+            readonly active: {
+                readonly false: {};
+                readonly true: {
+                    readonly backgroundColor: "container.strong";
+                    readonly color: "content.primary";
+                };
+            };
+        };
+    }, "react">;
+    const tabBar: zyzz.style.ReturnType<"react">;
     const title: zyzz.variants.ReturnType<{
         readonly base: {
             readonly color: "content.primary";
@@ -348,6 +460,20 @@ declare namespace styles {
             readonly '@media (min-width: 1024px)': {
                 readonly display: "none !custom";
             };
+            readonly '@media (min-width: 768px) and (max-width: 1023px)': {
+                readonly selectors: {
+                    readonly '[data-app-shell-collapse] &': {
+                        readonly display: "none !custom";
+                    };
+                };
+            };
+            readonly '@media (max-width: 767px)': {
+                readonly selectors: {
+                    readonly '&[data-app-shell-tab-bar]': {
+                        readonly display: "none !custom";
+                    };
+                };
+            };
             readonly '@media (prefers-reduced-motion: reduce)': {
                 readonly transitionProperty: "background-color, outline-color, outline-offset !custom";
                 readonly selectors: {

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

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

package/dist/web/components/AppShell.js

@@ -2,18 +2,25 @@
 import { Props as __zyzzProps } from 'zyzz/runtime';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as BaseUi from '@base-ui/react/drawer';
-import { createContext, use, useState, useSyncExternalStore, } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { createContext, use, useId, useLayoutEffect, useState, useSyncExternalStore, } from 'react';
 
 import { style, variants, vars } from '../zyzz.config.js';
+import * as TabBar from './internal/TabBar.js';
+import * as Text from './internal/Text.js';
 const context = createContext(undefined);
-const compactQuery = '(max-width: 1023px)';
-// The viewport breakpoint is a literal because media queries cannot read CSS variables.
-function useCompact() {
+/** Reads a media query, and `false` on the server and during hydration. */
+function useQuery(query) {
     return useSyncExternalStore((notify) => {
-        const query = window.matchMedia(compactQuery);
-        query.addEventListener('change', notify);
-        return () => query.removeEventListener('change', notify);
-    }, () => window.matchMedia(compactQuery).matches, () => false);
+        const list = window.matchMedia(query);
+        list.addEventListener('change', notify);
+        return () => list.removeEventListener('change', notify);
+    }, () => window.matchMedia(query).matches, () => false);
+}
+// The sidebar opens as a drawer below 1024px, or below 768px when it collapses to its icons from
+// 768px to 1023px. The breakpoints are literals because media queries cannot read CSS variables.
+function useCompact(collapse) {
+    return useQuery(collapse ? '(max-width: 767px)' : '(max-width: 1023px)');
 }
 function useShell() {
     const value = use(context);
@@ -76,12 +83,14 @@ export var AppShell;
      * it. `align` defaults to `center`.
      */
     function Root(props) {
-        const { align, className, defaultOpen = false, onOpenChange, open, ref, vars, ...attributes } = props;
+        const { align, children, className, collapse = false, defaultOpen = false, onOpenChange, open, ref, vars, ...attributes } = props;
         const [handle] = useState(() => BaseUi.Drawer.createHandle());
+        const [tabBar] = useState(TabBar.create);
         const [uncontrolled, setUncontrolled] = useState(defaultOpen);
         const [container, setContainer] = useState(null);
         const current = open ?? uncontrolled;
         return (_jsx(context.Provider, { value: {
+                collapse,
                 container,
                 handle,
                 open: current,
@@ -89,13 +98,13 @@ export var AppShell;
                     setUncontrolled(next);
                     onOpenChange?.(next);
                 },
-            }, children: _jsx("div", { ...attributes, ...styles.root({ align, className, style: props.style, vars }), "data-state": current ? 'open' : 'closed', ref: (node) => {
+            }, children: _jsx("div", { ...attributes, ...styles.root({ align, className, style: props.style, vars }), "data-app-shell-collapse": collapse ? '' : undefined, "data-state": current ? 'open' : 'closed', ref: (node) => {
                     setContainer(node);
                     if (typeof ref === 'function')
                         ref(node);
                     else if (ref)
                         ref.current = node;
-                } }) }));
+                }, children: _jsxs(TabBar.Context.Provider, { value: tabBar, children: [children, _jsx(BottomBar, {})] }) }) }));
     }
     AppShell.Root = Root;
     /**
@@ -107,11 +116,11 @@ export var AppShell;
     function Sidebar(props) {
         const { className, vars, ...attributes } = props;
         const shell = useShell();
-        const compact = useCompact();
+        const compact = useCompact(shell.collapse);
         const sidebar = styles.sidebar({ className, style: props.style, vars });
         if (!compact)
-            return _jsx("aside", { ...attributes, ...styles.inline(sidebar) });
-        return (_jsx(BaseUi.Drawer.Root, { handle: shell.handle, onOpenChange: shell.setOpen, open: shell.open, swipeDirection: "right", children: _jsxs(BaseUi.Drawer.Portal, { container: shell.container, children: [_jsx(BaseUi.Drawer.Backdrop, { ...styles.backdrop() }), _jsx(BaseUi.Drawer.Viewport, { ...styles.viewport(), children: _jsx(BaseUi.Drawer.Popup, { ...attributes, ...styles.drawer(sidebar), render: _jsx("aside", {}) }) })] }) }));
+            return (_jsx("aside", { ...attributes, ...styles.inline(sidebar), "data-app-shell-rail": shell.collapse ? '' : undefined, "data-app-shell-sidebar": "inline" }));
+        return (_jsx(BaseUi.Drawer.Root, { handle: shell.handle, onOpenChange: shell.setOpen, open: shell.open, swipeDirection: "right", children: _jsxs(BaseUi.Drawer.Portal, { container: shell.container, keepMounted: true, children: [_jsx(BaseUi.Drawer.Backdrop, { ...styles.backdrop() }), _jsx(BaseUi.Drawer.Viewport, { ...styles.viewport(), children: _jsx(BaseUi.Drawer.Popup, { ...attributes, ...styles.drawer(sidebar), render: _jsx("aside", {}) }) })] }) }));
     }
     AppShell.Sidebar = Sidebar;
     /** The scrolling middle of the sidebar, between `SidebarHeader` and `SidebarFooter`. */
@@ -142,39 +151,120 @@ export var AppShell;
      * Toggles the sidebar drawer from a button fixed to the top-right corner, above the drawer, whose
      * two bars turn into a close mark while it is open. Hidden from 1024px, where the sidebar is
      * always visible. It is named `Open menu` or `Close menu` and exposes `aria-expanded`. Pass
-     * `aria-label` to replace the name, or `children` to replace the bars.
+     * `aria-label` to replace the name, or `children` to replace the bars. With `tabBar`, the bottom
+     * bar renders it as its floating action button below 768px instead of the top-right button.
+     *
+     * @example
+     * <AppShell.Trigger tabBar />
      */
     function Trigger(props) {
-        const { children, className, vars, ...attributes } = props;
+        const { children, className, ref, tabBar = false, vars, ...attributes } = props;
         const shell = useShell();
-        return (_jsx(BaseUi.Drawer.Trigger, { "aria-label": shell.open ? 'Close menu' : 'Open menu', ...attributes, ...styles.trigger({ className, style: props.style, vars }), handle: shell.handle, children: children ?? (_jsxs("span", { "aria-hidden": "true", ...styles.bars(), children: [_jsx("span", { ...styles.bar() }), _jsx("span", { ...styles.bar() })] })) }));
+        const store = use(TabBar.Context);
+        const id = useId();
+        // The bottom bar shows below 768px, so the ref follows whichever of the two buttons shows.
+        const bar = useQuery('(max-width: 767px)') && tabBar;
+        // Registers on every render, so the bottom bar repeats the current props of the trigger.
+        useLayoutEffect(() => {
+            if (!store)
+                return;
+            if (!tabBar)
+                return store.delete(id);
+            const { style: _, ...rest } = attributes;
+            store.set(id, {
+                active: false,
+                attributes: { ...rest, ref: bar ? ref : undefined },
+                children,
+                variant: 'menu',
+            });
+        });
+        useLayoutEffect(() => {
+            if (!store)
+                return;
+            return () => store.delete(id);
+        }, [id, store]);
+        return (_jsx(BaseUi.Drawer.Trigger, { "aria-label": shell.open ? 'Close menu' : 'Open menu', ...attributes, ...styles.trigger({ className, style: props.style, vars }), "data-app-shell-tab-bar": tabBar ? '' : undefined, handle: shell.handle, ref: bar ? undefined : ref, children: children ?? _jsx(Bars, {}) }));
     }
     AppShell.Trigger = Trigger;
 })(AppShell || (AppShell = {}));
+/** The two bars of a trigger, which cross into a close mark while the drawer is open. */
+function Bars() {
+    return (_jsxs("span", { "aria-hidden": "true", ...styles.bars(), children: [_jsx("span", { ...styles.bar() }), _jsx("span", { ...styles.bar() })] }));
+}
+/**
+ * Repeats the `SidebarMenu.Item`s that set `tabBar` in a bar fixed to the bottom edge below 768px:
+ * `tab` items as icons in a pill `<nav>`, then each `action` item as a floating action button, then
+ * the `AppShell.Trigger` that sets `tabBar`. Renders nothing while nothing registers.
+ */
+function BottomBar() {
+    const store = use(TabBar.Context);
+    const entries = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
+    const tabs = entries.filter(([, entry]) => entry.variant === 'tab');
+    const actions = entries.filter(([, entry]) => entry.variant === 'action');
+    const menus = entries.filter(([, entry]) => entry.variant === 'menu');
+    if (entries.length === 0)
+        return null;
+    return (_jsxs("div", { ...styles.bottomBar(), "data-app-shell-bottom-bar": "", "data-app-shell-menu": menus.length > 0 ? '' : undefined, children: [tabs.length > 0 && (_jsx("nav", { "aria-label": "Main", ...styles.tabBar(), children: tabs.map(([id, entry]) => (_jsx(BottomBarItem, { entry: entry }, id))) })), actions.map(([id, entry]) => (_jsx(BottomBarItem, { entry: entry }, id))), menus.map(([id, entry]) => (_jsx(BottomBarTrigger, { entry: entry }, id)))] }));
+}
+/**
+ * Renders the element of a `SidebarMenu.Item` with the attributes and `render` of the item, and
+ * shows only its first element, such as its icon. Its text stays in the accessible name.
+ */
+function BottomBarItem(props) {
+    const { entry } = props;
+    return useRender({
+        defaultTagName: 'a',
+        props: {
+            ...entry.attributes,
+            'aria-current': entry.active ? 'page' : undefined,
+            ...(entry.variant === 'tab' ? styles.tab({ active: entry.active }) : styles.action()),
+            children: Text.wrap(entry.children, styles.label()),
+        },
+        render: entry.render,
+    });
+}
+/** Renders the `AppShell.Trigger` that sets `tabBar` as a floating action button. */
+function BottomBarTrigger(props) {
+    const { entry } = props;
+    const shell = useShell();
+    return (_jsx(BaseUi.Drawer.Trigger, { "aria-label": shell.open ? 'Close menu' : 'Open menu', ...entry.attributes, ...styles.action(), "data-app-shell-menu-trigger": "", handle: shell.handle, children: entry.children ?? _jsx(Bars, {}) }));
+}
 const fadeIn = "z-kid-tds_2f_web_2f_app_2d_shell_2f_fade_2d_in";
 const fadeOut = "z-kid-tds_2f_web_2f_app_2d_shell_2f_fade_2d_out";
 var styles;
 (function (styles) {
-    styles.backdrop = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e1 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e3 z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e5 z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e7 z_tds_2f_web-xrJh8e8 z_tds_2f_web-xrJh8e9 z_tds_2f_web-xrJh8ea"});
-    styles.bar = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8eb z_tds_2f_web-xrJh8ec z_tds_2f_web-xrJh8ed z_tds_2f_web-xrJh8ee z_tds_2f_web-xrJh8ef z_tds_2f_web-xrJh8eg z_tds_2f_web-xrJh8eh z_tds_2f_web-xrJh8ei z_tds_2f_web-xrJh8ej z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8ek z_tds_2f_web-xrJh8el z_tds_2f_web-xrJh8em z_tds_2f_web-xrJh8en z_tds_2f_web-xrJh8eo z_tds_2f_web-xrJh8ep"});
-    styles.bars = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8eq z_tds_2f_web-xrJh8er z_tds_2f_web-xrJh8es z_tds_2f_web-xrJh8et"});
-    styles.drawer = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8eu z_tds_2f_web-xrJh8ev z_tds_2f_web-xrJh8ew z_tds_2f_web-xrJh8ex z_tds_2f_web-xrJh8ey z_tds_2f_web-xrJh8ez z_tds_2f_web-xrJh8e10 z_tds_2f_web-xrJh8e11 z_tds_2f_web-xrJh8e12 z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e13 z_tds_2f_web-xrJh8e14 z_tds_2f_web-xrJh8e15 z_tds_2f_web-xrJh8e16 z_tds_2f_web-xrJh8e17 z_tds_2f_web-xrJh8e18 z_tds_2f_web-xrJh8e19 z_tds_2f_web-xrJh8e1a z_tds_2f_web-xrJh8e1b"});
+    // The 56px circle of the Platform Floating Action Button.
+    styles.action = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e1 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e3 z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e5 z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e7 z_tds_2f_web-xrJh8e8 z_tds_2f_web-xrJh8e9 z_tds_2f_web-xrJh8ea z_tds_2f_web-xrJh8eb z_tds_2f_web-xrJh8ec z_tds_2f_web-xrJh8ed z_tds_2f_web-xrJh8ee z_tds_2f_web-xrJh8ef z_tds_2f_web-xrJh8eg z_tds_2f_web-xrJh8eh z_tds_2f_web-xrJh8ei z_tds_2f_web-xrJh8ej z_tds_2f_web-xrJh8ek z_tds_2f_web-xrJh8el z_tds_2f_web-xrJh8em z_tds_2f_web-xrJh8en z_tds_2f_web-xrJh8eo z_tds_2f_web-xrJh8ep z_tds_2f_web-xrJh8eq z_tds_2f_web-xrJh8er z_tds_2f_web-xrJh8es z_tds_2f_web-xrJh8et z_tds_2f_web-xrJh8eu z_tds_2f_web-xrJh8ev z_tds_2f_web-xrJh8ew z_tds_2f_web-xrJh8ex z_tds_2f_web-xrJh8ey z_tds_2f_web-xrJh8ez"});
+    styles.backdrop = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e10 z_tds_2f_web-xrJh8e11 z_tds_2f_web-xrJh8e12 z_tds_2f_web-xrJh8e13 z_tds_2f_web-xrJh8e14 z_tds_2f_web-xrJh8e15 z_tds_2f_web-xrJh8e16 z_tds_2f_web-xrJh8e17 z_tds_2f_web-xrJh8e18 z_tds_2f_web-xrJh8e19 z_tds_2f_web-xrJh8e1a"});
+    styles.bar = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e1b z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e1c z_tds_2f_web-xrJh8e1d z_tds_2f_web-xrJh8e1e z_tds_2f_web-xrJh8e1f z_tds_2f_web-xrJh8e1g z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e16 z_tds_2f_web-xrJh8e1i z_tds_2f_web-xrJh8e1j z_tds_2f_web-xrJh8e1k z_tds_2f_web-xrJh8e1l z_tds_2f_web-xrJh8e1m z_tds_2f_web-xrJh8e1n"});
+    // Floats over the content, inset by the 24px page margin of the Mobile layout and 16px from the
+    // bottom edge. It sits below the drawer and its backdrop.
+    styles.bottomBar = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e1o z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e1q z_tds_2f_web-xrJh8e1r z_tds_2f_web-xrJh8e1s z_tds_2f_web-xrJh8e1t z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e1v z_tds_2f_web-xrJh8e1w z_tds_2f_web-xrJh8e1x"});
+    styles.bars = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e1y z_tds_2f_web-xrJh8e1z z_tds_2f_web-xrJh8e20 z_tds_2f_web-xrJh8e21"});
+    styles.drawer = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e22 z_tds_2f_web-xrJh8e23 z_tds_2f_web-xrJh8e24 z_tds_2f_web-xrJh8e25 z_tds_2f_web-xrJh8e26 z_tds_2f_web-xrJh8e27 z_tds_2f_web-xrJh8e28 z_tds_2f_web-xrJh8e29 z_tds_2f_web-xrJh8e2a z_tds_2f_web-xrJh8e16 z_tds_2f_web-xrJh8e2b z_tds_2f_web-xrJh8e2c z_tds_2f_web-xrJh8e2d z_tds_2f_web-xrJh8e2e z_tds_2f_web-xrJh8e2f z_tds_2f_web-xrJh8e2g z_tds_2f_web-xrJh8e2h z_tds_2f_web-xrJh8e2i z_tds_2f_web-xrJh8e2j z_tds_2f_web-xrJh8e2k z_tds_2f_web-xrJh8e2l"});
     // The bar bleeds into the padding of `Main`, so it spans the column and starts at its top edge.
     // The header takes the fill of the sidebar, so the two frame the page.
-    styles.header = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e1c z_tds_2f_web-xrJh8e1d z_tds_2f_web-xrJh8e1e z_tds_2f_web-xrJh8e1f z_tds_2f_web-xrJh8e1g z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e1i z_tds_2f_web-xrJh8e1j z_tds_2f_web-xrJh8e1k z_tds_2f_web-xrJh8e1l z_tds_2f_web-xrJh8e1m z_tds_2f_web-xrJh8e1n z_tds_2f_web-xrJh8e1o z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e1q z_tds_2f_web-xrJh8e1r z_tds_2f_web-xrJh8e1s z_tds_2f_web-xrJh8e1t"+" "+external:"z_tds_2f_web-xrJh8e1c z_tds_2f_web-xrJh8e1d z_tds_2f_web-xrJh8e1e z_tds_2f_web-xrJh8e1f z_tds_2f_web-xrJh8e1g z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e1i z_tds_2f_web-xrJh8e1j z_tds_2f_web-xrJh8e1k z_tds_2f_web-xrJh8e1l z_tds_2f_web-xrJh8e1m z_tds_2f_web-xrJh8e1n z_tds_2f_web-xrJh8e1o z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e1q z_tds_2f_web-xrJh8e1r z_tds_2f_web-xrJh8e1s z_tds_2f_web-xrJh8e1t",result=inline?{className,style:inline}:{className};let value;return result});
-    styles.main = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e1j z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e1v z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e1w z_tds_2f_web-xrJh8e1x z_tds_2f_web-xrJh8e1y z_tds_2f_web-xrJh8e1z z_tds_2f_web-xrJh8e20"+" "+external:"z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e1j z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e1v z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e1w z_tds_2f_web-xrJh8e1x z_tds_2f_web-xrJh8e1y z_tds_2f_web-xrJh8e1z z_tds_2f_web-xrJh8e20",result=inline?{className,style:inline}:{className};let value;return result});
-    styles.root = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e21 z_tds_2f_web-xrJh8e22 z_tds_2f_web-xrJh8e23 z_tds_2f_web-xrJh8e24 z_tds_2f_web-xrJh8es z_tds_2f_web-xrJh8e25 z_tds_2f_web-xrJh8e26 z_tds_2f_web-xrJh8e27 z_tds_2f_web-xrJh8e28 z_tds_2f_web-xrJh8e29 z_tds_2f_web-xrJh8e2a z_tds_2f_web-xrJh8e2b z_tds_2f_web-xrJh8e2c z_tds_2f_web-xrJh8e2d z_tds_2f_web-xrJh8e2e z_tds_2f_web-xrJh8e2f z_tds_2f_web-xrJh8e2g z_tds_2f_web-xrJh8e2h z_tds_2f_web-xrJh8e2i z_tds_2f_web-xrJh8e2j z_tds_2f_web-xrJh8e2k"+" "+external:"z_tds_2f_web-xrJh8e21 z_tds_2f_web-xrJh8e22 z_tds_2f_web-xrJh8e23 z_tds_2f_web-xrJh8e24 z_tds_2f_web-xrJh8es z_tds_2f_web-xrJh8e25 z_tds_2f_web-xrJh8e26 z_tds_2f_web-xrJh8e27 z_tds_2f_web-xrJh8e28 z_tds_2f_web-xrJh8e29 z_tds_2f_web-xrJh8e2a z_tds_2f_web-xrJh8e2b z_tds_2f_web-xrJh8e2c z_tds_2f_web-xrJh8e2d z_tds_2f_web-xrJh8e2e z_tds_2f_web-xrJh8e2f z_tds_2f_web-xrJh8e2g z_tds_2f_web-xrJh8e2h z_tds_2f_web-xrJh8e2i z_tds_2f_web-xrJh8e2j z_tds_2f_web-xrJh8e2k",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"align")?input["align"]:void 0;if(value===void 0)value="center";if(value!==null&&value!==void 0)result["data-align"]=String(value);return result});
-    styles.sidebar = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e2l z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e2m z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e2n z_tds_2f_web-xrJh8e2o z_tds_2f_web-xrJh8e2p z_tds_2f_web-xrJh8e2q z_tds_2f_web-xrJh8e2r"+" "+external:"z_tds_2f_web-xrJh8e2l z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e2m z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e2n z_tds_2f_web-xrJh8e2o z_tds_2f_web-xrJh8e2p z_tds_2f_web-xrJh8e2q z_tds_2f_web-xrJh8e2r",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-xrJh8e0 z_tds_2f_web-xrJh8e2m z_tds_2f_web-xrJh8e2n z_tds_2f_web-xrJh8e2o z_tds_2f_web-xrJh8e2p z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e2q z_tds_2f_web-xrJh8e2r z_tds_2f_web-xrJh8e2s z_tds_2f_web-xrJh8e2t z_tds_2f_web-xrJh8e2u z_tds_2f_web-xrJh8e2v z_tds_2f_web-xrJh8e2w z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e2y z_tds_2f_web-xrJh8e2z z_tds_2f_web-xrJh8e30 z_tds_2f_web-xrJh8e31 z_tds_2f_web-xrJh8e32"+" "+external:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e2m z_tds_2f_web-xrJh8e2n z_tds_2f_web-xrJh8e2o z_tds_2f_web-xrJh8e2p z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e2q z_tds_2f_web-xrJh8e2r z_tds_2f_web-xrJh8e2s z_tds_2f_web-xrJh8e2t z_tds_2f_web-xrJh8e2u z_tds_2f_web-xrJh8e2v z_tds_2f_web-xrJh8e2w z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e2y z_tds_2f_web-xrJh8e2z z_tds_2f_web-xrJh8e30 z_tds_2f_web-xrJh8e31 z_tds_2f_web-xrJh8e32",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.main = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e2r z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e34 z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e35 z_tds_2f_web-xrJh8e36 z_tds_2f_web-xrJh8e37 z_tds_2f_web-xrJh8e38 z_tds_2f_web-xrJh8e39"+" "+external:"z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e2r z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e34 z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e35 z_tds_2f_web-xrJh8e36 z_tds_2f_web-xrJh8e37 z_tds_2f_web-xrJh8e38 z_tds_2f_web-xrJh8e39",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.root = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e3a z_tds_2f_web-xrJh8e3b z_tds_2f_web-xrJh8e3c z_tds_2f_web-xrJh8e3d z_tds_2f_web-xrJh8e20 z_tds_2f_web-xrJh8e3e z_tds_2f_web-xrJh8e3f z_tds_2f_web-xrJh8e3g z_tds_2f_web-xrJh8e3h z_tds_2f_web-xrJh8e3i z_tds_2f_web-xrJh8e3j z_tds_2f_web-xrJh8e3k z_tds_2f_web-xrJh8e3l z_tds_2f_web-xrJh8e3m z_tds_2f_web-xrJh8e3n z_tds_2f_web-xrJh8e3o z_tds_2f_web-xrJh8e3p z_tds_2f_web-xrJh8e3q z_tds_2f_web-xrJh8e3r z_tds_2f_web-xrJh8e3s z_tds_2f_web-xrJh8e3t z_tds_2f_web-xrJh8e3u"+" "+external:"z_tds_2f_web-xrJh8e3a z_tds_2f_web-xrJh8e3b z_tds_2f_web-xrJh8e3c z_tds_2f_web-xrJh8e3d z_tds_2f_web-xrJh8e20 z_tds_2f_web-xrJh8e3e z_tds_2f_web-xrJh8e3f z_tds_2f_web-xrJh8e3g z_tds_2f_web-xrJh8e3h z_tds_2f_web-xrJh8e3i z_tds_2f_web-xrJh8e3j z_tds_2f_web-xrJh8e3k z_tds_2f_web-xrJh8e3l z_tds_2f_web-xrJh8e3m z_tds_2f_web-xrJh8e3n z_tds_2f_web-xrJh8e3o z_tds_2f_web-xrJh8e3p z_tds_2f_web-xrJh8e3q z_tds_2f_web-xrJh8e3r z_tds_2f_web-xrJh8e3s z_tds_2f_web-xrJh8e3t z_tds_2f_web-xrJh8e3u",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"align")?input["align"]:void 0;if(value===void 0)value="center";if(value!==null&&value!==void 0)result["data-align"]=String(value);return result});
+    styles.sidebar = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e3v z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e3w z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e3x z_tds_2f_web-xrJh8e3y z_tds_2f_web-xrJh8e3z z_tds_2f_web-xrJh8e40 z_tds_2f_web-xrJh8e41"+" "+external:"z_tds_2f_web-xrJh8e3v z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e3w z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e3x z_tds_2f_web-xrJh8e3y z_tds_2f_web-xrJh8e3z z_tds_2f_web-xrJh8e40 z_tds_2f_web-xrJh8e41",result=inline?{className,style:inline}:{className};let value;return result});
+    // Keeps the label of a bottom bar item in its accessible name without painting it.
+    styles.label = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e42 z_tds_2f_web-xrJh8e43 z_tds_2f_web-xrJh8e44 z_tds_2f_web-xrJh8e45 z_tds_2f_web-xrJh8e46 z_tds_2f_web-xrJh8e47"});
     // Follows `sidebar`, so its compact `display: none` overrides the sidebar's `display: flex` in
     // server-rendered markup, which always emits the wide layout.
-    styles.inline = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e2s z_tds_2f_web-xrJh8e2t z_tds_2f_web-xrJh8e2u z_tds_2f_web-xrJh8e2v z_tds_2f_web-xrJh8e2w z_tds_2f_web-xrJh8ez z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e2y z_tds_2f_web-xrJh8e2z"});
-    styles.sidebarBody = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e30 z_tds_2f_web-xrJh8e31 z_tds_2f_web-xrJh8e32 z_tds_2f_web-xrJh8e2o z_tds_2f_web-xrJh8ez z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e34 z_tds_2f_web-xrJh8e35 z_tds_2f_web-xrJh8e36 z_tds_2f_web-xrJh8e37 z_tds_2f_web-xrJh8e38 z_tds_2f_web-xrJh8e2a z_tds_2f_web-xrJh8e39 z_tds_2f_web-xrJh8e3a z_tds_2f_web-xrJh8e3b z_tds_2f_web-xrJh8e3c z_tds_2f_web-xrJh8e3d z_tds_2f_web-xrJh8e3e z_tds_2f_web-xrJh8e3f z_tds_2f_web-xrJh8e3g z_tds_2f_web-xrJh8e3h z_tds_2f_web-xrJh8e3i z_tds_2f_web-xrJh8e3j z_tds_2f_web-xrJh8e3k z_tds_2f_web-xrJh8e3l z_tds_2f_web-xrJh8e3m z_tds_2f_web-xrJh8e3n z_tds_2f_web-xrJh8e3o z_tds_2f_web-xrJh8e3p z_tds_2f_web-xrJh8e3q z_tds_2f_web-xrJh8e3r"+" "+external:"z_tds_2f_web-xrJh8e30 z_tds_2f_web-xrJh8e31 z_tds_2f_web-xrJh8e32 z_tds_2f_web-xrJh8e2o z_tds_2f_web-xrJh8ez z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e34 z_tds_2f_web-xrJh8e35 z_tds_2f_web-xrJh8e36 z_tds_2f_web-xrJh8e37 z_tds_2f_web-xrJh8e38 z_tds_2f_web-xrJh8e2a z_tds_2f_web-xrJh8e39 z_tds_2f_web-xrJh8e3a z_tds_2f_web-xrJh8e3b z_tds_2f_web-xrJh8e3c z_tds_2f_web-xrJh8e3d z_tds_2f_web-xrJh8e3e z_tds_2f_web-xrJh8e3f z_tds_2f_web-xrJh8e3g z_tds_2f_web-xrJh8e3h z_tds_2f_web-xrJh8e3i z_tds_2f_web-xrJh8e3j z_tds_2f_web-xrJh8e3k z_tds_2f_web-xrJh8e3l z_tds_2f_web-xrJh8e3m z_tds_2f_web-xrJh8e3n z_tds_2f_web-xrJh8e3o z_tds_2f_web-xrJh8e3p z_tds_2f_web-xrJh8e3q z_tds_2f_web-xrJh8e3r",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.inline = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e48 z_tds_2f_web-xrJh8e49 z_tds_2f_web-xrJh8e4a z_tds_2f_web-xrJh8e4b z_tds_2f_web-xrJh8e4c z_tds_2f_web-xrJh8e4d z_tds_2f_web-xrJh8e4e z_tds_2f_web-xrJh8e4f z_tds_2f_web-xrJh8e4g z_tds_2f_web-xrJh8e4h z_tds_2f_web-xrJh8e4i"});
+    styles.sidebarBody = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e4j z_tds_2f_web-xrJh8e4k z_tds_2f_web-xrJh8e4l z_tds_2f_web-xrJh8e3y z_tds_2f_web-xrJh8e4d z_tds_2f_web-xrJh8e4m z_tds_2f_web-xrJh8e4n z_tds_2f_web-xrJh8e4o z_tds_2f_web-xrJh8e4p z_tds_2f_web-xrJh8e4q z_tds_2f_web-xrJh8e4r z_tds_2f_web-xrJh8e4s z_tds_2f_web-xrJh8e4t z_tds_2f_web-xrJh8e3j z_tds_2f_web-xrJh8e4u z_tds_2f_web-xrJh8e4v z_tds_2f_web-xrJh8e4w z_tds_2f_web-xrJh8e4x z_tds_2f_web-xrJh8e4y z_tds_2f_web-xrJh8e4z z_tds_2f_web-xrJh8e50 z_tds_2f_web-xrJh8e51 z_tds_2f_web-xrJh8e52 z_tds_2f_web-xrJh8e53 z_tds_2f_web-xrJh8e54 z_tds_2f_web-xrJh8e55 z_tds_2f_web-xrJh8e56 z_tds_2f_web-xrJh8e57 z_tds_2f_web-xrJh8e58 z_tds_2f_web-xrJh8e59 z_tds_2f_web-xrJh8e5a z_tds_2f_web-xrJh8e5b z_tds_2f_web-xrJh8e5c"+" "+external:"z_tds_2f_web-xrJh8e4j z_tds_2f_web-xrJh8e4k z_tds_2f_web-xrJh8e4l z_tds_2f_web-xrJh8e3y z_tds_2f_web-xrJh8e4d z_tds_2f_web-xrJh8e4m z_tds_2f_web-xrJh8e4n z_tds_2f_web-xrJh8e4o z_tds_2f_web-xrJh8e4p z_tds_2f_web-xrJh8e4q z_tds_2f_web-xrJh8e4r z_tds_2f_web-xrJh8e4s z_tds_2f_web-xrJh8e4t z_tds_2f_web-xrJh8e3j z_tds_2f_web-xrJh8e4u z_tds_2f_web-xrJh8e4v z_tds_2f_web-xrJh8e4w z_tds_2f_web-xrJh8e4x z_tds_2f_web-xrJh8e4y z_tds_2f_web-xrJh8e4z z_tds_2f_web-xrJh8e50 z_tds_2f_web-xrJh8e51 z_tds_2f_web-xrJh8e52 z_tds_2f_web-xrJh8e53 z_tds_2f_web-xrJh8e54 z_tds_2f_web-xrJh8e55 z_tds_2f_web-xrJh8e56 z_tds_2f_web-xrJh8e57 z_tds_2f_web-xrJh8e58 z_tds_2f_web-xrJh8e59 z_tds_2f_web-xrJh8e5a z_tds_2f_web-xrJh8e5b z_tds_2f_web-xrJh8e5c",result=inline?{className,style:inline}:{className};let value;return result});
     // The automatic top margin keeps the footer at the bottom edge when no `SidebarBody` grows.
-    styles.sidebarFooter = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e3s z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e3t z_tds_2f_web-xrJh8e3u z_tds_2f_web-xrJh8e3v"+" "+external:"z_tds_2f_web-xrJh8e3s z_tds_2f_web-xrJh8e1u z_tds_2f_web-xrJh8e3t z_tds_2f_web-xrJh8e3u z_tds_2f_web-xrJh8e3v",result=inline?{className,style:inline}:{className};let value;return result});
-    styles.sidebarHeader = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e3t z_tds_2f_web-xrJh8e3w"+" "+external:"z_tds_2f_web-xrJh8e3t z_tds_2f_web-xrJh8e3w",result=inline?{className,style:inline}:{className};let 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-xrJh8e22 z_tds_2f_web-xrJh8e3x z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e3y z_tds_2f_web-xrJh8e3z z_tds_2f_web-xrJh8e40 z_tds_2f_web-xrJh8e41 z_tds_2f_web-xrJh8e42"+" "+external:"z_tds_2f_web-xrJh8e22 z_tds_2f_web-xrJh8e3x z_tds_2f_web-xrJh8e1p z_tds_2f_web-xrJh8e3y z_tds_2f_web-xrJh8e3z z_tds_2f_web-xrJh8e40 z_tds_2f_web-xrJh8e41 z_tds_2f_web-xrJh8e42",result=inline?{className,style:inline}:{className};let value;return result});
-    styles.trigger = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e1c z_tds_2f_web-xrJh8e43 z_tds_2f_web-xrJh8e44 z_tds_2f_web-xrJh8ec z_tds_2f_web-xrJh8e45 z_tds_2f_web-xrJh8e46 z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e22 z_tds_2f_web-xrJh8ed z_tds_2f_web-xrJh8e47 z_tds_2f_web-xrJh8e48 z_tds_2f_web-xrJh8e49 z_tds_2f_web-xrJh8e4a z_tds_2f_web-xrJh8e4b z_tds_2f_web-xrJh8e4c z_tds_2f_web-xrJh8e4d z_tds_2f_web-xrJh8e4e z_tds_2f_web-xrJh8e4f z_tds_2f_web-xrJh8e4g z_tds_2f_web-xrJh8e4h z_tds_2f_web-xrJh8e4i z_tds_2f_web-xrJh8e4j z_tds_2f_web-xrJh8e4k z_tds_2f_web-xrJh8e4l z_tds_2f_web-xrJh8e4m z_tds_2f_web-xrJh8e4n z_tds_2f_web-xrJh8e4o z_tds_2f_web-xrJh8e4p z_tds_2f_web-xrJh8e4q z_tds_2f_web-xrJh8e4r z_tds_2f_web-xrJh8e4s z_tds_2f_web-xrJh8e4t z_tds_2f_web-xrJh8e4u z_tds_2f_web-xrJh8e4v z_tds_2f_web-xrJh8e4w z_tds_2f_web-xrJh8e4x"+" "+external:"z_tds_2f_web-xrJh8e1c z_tds_2f_web-xrJh8e43 z_tds_2f_web-xrJh8e44 z_tds_2f_web-xrJh8ec z_tds_2f_web-xrJh8e45 z_tds_2f_web-xrJh8e46 z_tds_2f_web-xrJh8e1h z_tds_2f_web-xrJh8e22 z_tds_2f_web-xrJh8ed z_tds_2f_web-xrJh8e47 z_tds_2f_web-xrJh8e48 z_tds_2f_web-xrJh8e49 z_tds_2f_web-xrJh8e4a z_tds_2f_web-xrJh8e4b z_tds_2f_web-xrJh8e4c z_tds_2f_web-xrJh8e4d z_tds_2f_web-xrJh8e4e z_tds_2f_web-xrJh8e4f z_tds_2f_web-xrJh8e4g z_tds_2f_web-xrJh8e4h z_tds_2f_web-xrJh8e4i z_tds_2f_web-xrJh8e4j z_tds_2f_web-xrJh8e4k z_tds_2f_web-xrJh8e4l z_tds_2f_web-xrJh8e4m z_tds_2f_web-xrJh8e4n z_tds_2f_web-xrJh8e4o z_tds_2f_web-xrJh8e4p z_tds_2f_web-xrJh8e4q z_tds_2f_web-xrJh8e4r z_tds_2f_web-xrJh8e4s z_tds_2f_web-xrJh8e4t z_tds_2f_web-xrJh8e4u z_tds_2f_web-xrJh8e4v z_tds_2f_web-xrJh8e4w z_tds_2f_web-xrJh8e4x",result=inline?{className,style:inline}:{className};let value;return result});
-    styles.viewport = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e4y z_tds_2f_web-xrJh8e4z z_tds_2f_web-xrJh8e50 z_tds_2f_web-xrJh8e4i z_tds_2f_web-xrJh8e51"});
+    styles.sidebarFooter = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e5d z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e5e z_tds_2f_web-xrJh8e5f z_tds_2f_web-xrJh8e5g"+" "+external:"z_tds_2f_web-xrJh8e5d z_tds_2f_web-xrJh8e33 z_tds_2f_web-xrJh8e5e z_tds_2f_web-xrJh8e5f z_tds_2f_web-xrJh8e5g",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.sidebarHeader = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e5e z_tds_2f_web-xrJh8e5h"+" "+external:"z_tds_2f_web-xrJh8e5e z_tds_2f_web-xrJh8e5h",result=inline?{className,style:inline}:{className};let value;return result});
+    // An icon-only item of the Platform Tab Bar, which fills its share of the pill.
+    styles.tab = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e5i z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e7 z_tds_2f_web-xrJh8e5d z_tds_2f_web-xrJh8e5j z_tds_2f_web-xrJh8e5k z_tds_2f_web-xrJh8e5l z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e5m z_tds_2f_web-xrJh8e5n z_tds_2f_web-xrJh8e5o z_tds_2f_web-xrJh8e5p z_tds_2f_web-xrJh8e5q z_tds_2f_web-xrJh8eh z_tds_2f_web-xrJh8e5r z_tds_2f_web-xrJh8e5s z_tds_2f_web-xrJh8e5t z_tds_2f_web-xrJh8e5u z_tds_2f_web-xrJh8e5v z_tds_2f_web-xrJh8e5w z_tds_2f_web-xrJh8e5x z_tds_2f_web-xrJh8e5y z_tds_2f_web-xrJh8e5z z_tds_2f_web-xrJh8e60 z_tds_2f_web-xrJh8e61 z_tds_2f_web-xrJh8eu z_tds_2f_web-xrJh8ez z_tds_2f_web-xrJh8e62 z_tds_2f_web-xrJh8e63 z_tds_2f_web-xrJh8e64 z_tds_2f_web-xrJh8e65 z_tds_2f_web-xrJh8e66 z_tds_2f_web-xrJh8e67"+" "+external:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e5i z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e7 z_tds_2f_web-xrJh8e5d z_tds_2f_web-xrJh8e5j z_tds_2f_web-xrJh8e5k z_tds_2f_web-xrJh8e5l z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e5m z_tds_2f_web-xrJh8e5n z_tds_2f_web-xrJh8e5o z_tds_2f_web-xrJh8e5p z_tds_2f_web-xrJh8e5q z_tds_2f_web-xrJh8eh z_tds_2f_web-xrJh8e5r z_tds_2f_web-xrJh8e5s z_tds_2f_web-xrJh8e5t z_tds_2f_web-xrJh8e5u z_tds_2f_web-xrJh8e5v z_tds_2f_web-xrJh8e5w z_tds_2f_web-xrJh8e5x z_tds_2f_web-xrJh8e5y z_tds_2f_web-xrJh8e5z z_tds_2f_web-xrJh8e60 z_tds_2f_web-xrJh8e61 z_tds_2f_web-xrJh8eu z_tds_2f_web-xrJh8ez z_tds_2f_web-xrJh8e62 z_tds_2f_web-xrJh8e63 z_tds_2f_web-xrJh8e64 z_tds_2f_web-xrJh8e65 z_tds_2f_web-xrJh8e66 z_tds_2f_web-xrJh8e67",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"active")?input["active"]:void 0;if(value===void 0)value="false";if(value!==null&&value!==void 0)result["data-active"]=String(value);return result});
+    // The 56px pill of the Platform Tab Bar, which takes the width beside the action button. Its 48px
+    // items sit 4px inside the 1px border at either end and 3px inside it at the top and bottom.
+    styles.tabBar = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e68 z_tds_2f_web-xrJh8e69 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e6a z_tds_2f_web-xrJh8e6b z_tds_2f_web-xrJh8e6c z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e5d z_tds_2f_web-xrJh8e6d z_tds_2f_web-xrJh8e6e z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e6f z_tds_2f_web-xrJh8e6g z_tds_2f_web-xrJh8e6h z_tds_2f_web-xrJh8e6i z_tds_2f_web-xrJh8e5t"});
+    styles.title = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e6j z_tds_2f_web-xrJh8e6k z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e6l z_tds_2f_web-xrJh8e6m z_tds_2f_web-xrJh8e6n z_tds_2f_web-xrJh8e6o z_tds_2f_web-xrJh8e6p"+" "+external:"z_tds_2f_web-xrJh8e6j z_tds_2f_web-xrJh8e6k z_tds_2f_web-xrJh8e2x z_tds_2f_web-xrJh8e6l z_tds_2f_web-xrJh8e6m z_tds_2f_web-xrJh8e6n z_tds_2f_web-xrJh8e6o z_tds_2f_web-xrJh8e6p",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.trigger = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e6q z_tds_2f_web-xrJh8e69 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e6a z_tds_2f_web-xrJh8e6b z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e6j z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e7 z_tds_2f_web-xrJh8e6r z_tds_2f_web-xrJh8e6s z_tds_2f_web-xrJh8e6t z_tds_2f_web-xrJh8e6u z_tds_2f_web-xrJh8e5l z_tds_2f_web-xrJh8e6v z_tds_2f_web-xrJh8e6w z_tds_2f_web-xrJh8e6x z_tds_2f_web-xrJh8e6y z_tds_2f_web-xrJh8e6z z_tds_2f_web-xrJh8e70 z_tds_2f_web-xrJh8e71 z_tds_2f_web-xrJh8e72 z_tds_2f_web-xrJh8e73 z_tds_2f_web-xrJh8e74 z_tds_2f_web-xrJh8e75 z_tds_2f_web-xrJh8e76 z_tds_2f_web-xrJh8e77 z_tds_2f_web-xrJh8e78 z_tds_2f_web-xrJh8e79 z_tds_2f_web-xrJh8e7a z_tds_2f_web-xrJh8e7b z_tds_2f_web-xrJh8e7c z_tds_2f_web-xrJh8e7d z_tds_2f_web-xrJh8e7e z_tds_2f_web-xrJh8e7f z_tds_2f_web-xrJh8e7g z_tds_2f_web-xrJh8e7h"+" "+external:"z_tds_2f_web-xrJh8e0 z_tds_2f_web-xrJh8e6q z_tds_2f_web-xrJh8e69 z_tds_2f_web-xrJh8e2 z_tds_2f_web-xrJh8e6a z_tds_2f_web-xrJh8e6b z_tds_2f_web-xrJh8e4 z_tds_2f_web-xrJh8e6j z_tds_2f_web-xrJh8e6 z_tds_2f_web-xrJh8e7 z_tds_2f_web-xrJh8e6r z_tds_2f_web-xrJh8e6s z_tds_2f_web-xrJh8e6t z_tds_2f_web-xrJh8e6u z_tds_2f_web-xrJh8e5l z_tds_2f_web-xrJh8e6v z_tds_2f_web-xrJh8e6w z_tds_2f_web-xrJh8e6x z_tds_2f_web-xrJh8e6y z_tds_2f_web-xrJh8e6z z_tds_2f_web-xrJh8e70 z_tds_2f_web-xrJh8e71 z_tds_2f_web-xrJh8e72 z_tds_2f_web-xrJh8e73 z_tds_2f_web-xrJh8e74 z_tds_2f_web-xrJh8e75 z_tds_2f_web-xrJh8e76 z_tds_2f_web-xrJh8e77 z_tds_2f_web-xrJh8e78 z_tds_2f_web-xrJh8e79 z_tds_2f_web-xrJh8e7a z_tds_2f_web-xrJh8e7b z_tds_2f_web-xrJh8e7c z_tds_2f_web-xrJh8e7d z_tds_2f_web-xrJh8e7e z_tds_2f_web-xrJh8e7f z_tds_2f_web-xrJh8e7g z_tds_2f_web-xrJh8e7h",result=inline?{className,style:inline}:{className};let value;return result});
+    styles.viewport = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-xrJh8e7i z_tds_2f_web-xrJh8e7j z_tds_2f_web-xrJh8e7k z_tds_2f_web-xrJh8e70 z_tds_2f_web-xrJh8e7l z_tds_2f_web-xrJh8e7m"});
 })(styles || (styles = {}));
 //# sourceMappingURL=AppShell.js.map
 import './AppShell.css';