@tempoxyz/ds 0.2.6 → 0.3.1

package/dist/web/components/SidebarMenu.css

@@ -1 +1 @@
-.z_tds_2f_web-h4TVw80{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z_tds_2f_web-h4TVw81{margin-inline-start:auto}.z_tds_2f_web-h4TVw82{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-h4TVw83{transition-property:transform}.z_tds_2f_web-h4TVw84{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-h4TVw85{[data-panel-open]>&{transform:rotate(90deg)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-h4TVw86{transition-property:none}}.z_tds_2f_web-h4TVw87{display:flex}.z_tds_2f_web-h4TVw88{flex-direction:column}.z_tds_2f_web-h4TVw89{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw8a{*+&{margin-top:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-h4TVw8b{[data-sidebar-menu-size=small] &{row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}}.z_tds_2f_web-h4TVw8c{[data-sidebar-menu-size=small] *+&{margin-top:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-h4TVw8d{&+&{border-top-color:var(--z-tds_2f_web-color-grayAlpha-200,light-dark(#00000014,#ffffff1a))}}.z_tds_2f_web-h4TVw8e{&+&{border-top-style:solid}}.z_tds_2f_web-h4TVw8f{&+&{border-top-width:1px}}.z_tds_2f_web-h4TVw8g{&+&{padding-top:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-h4TVw8h{color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}.z_tds_2f_web-h4TVw8i{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw8j{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-h4TVw8k{[data-sidebar-menu-size=small] &{padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-h4TVw8l{font-family:var(--z-tds_2f_web-typography-label-12-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}.z_tds_2f_web-h4TVw8m{font-size:var(--z-tds_2f_web-typography-label-12-fontSize,12px)}.z_tds_2f_web-h4TVw8n{font-weight:var(--z-tds_2f_web-typography-label-12-fontWeight,450)}.z_tds_2f_web-h4TVw8o{letter-spacing:var(--z-tds_2f_web-typography-label-12-letterSpacing,.01px)}.z_tds_2f_web-h4TVw8p{line-height:var(--z-tds_2f_web-typography-label-12-lineHeight,16px)}.z_tds_2f_web-h4TVw8q{align-items:center}.z_tds_2f_web-h4TVw8r{appearance:none}.z_tds_2f_web-h4TVw8s{background-color:#0000}.z_tds_2f_web-h4TVw8t{border:none}.z_tds_2f_web-h4TVw8u{border-radius:var(--z-tds_2f_web-radius-12,.75rem)}.z_tds_2f_web-h4TVw8v{box-sizing:border-box}.z_tds_2f_web-h4TVw8w{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z_tds_2f_web-h4TVw8x{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-h4TVw8y{cursor:pointer}.z_tds_2f_web-h4TVw8z{font:inherit}.z_tds_2f_web-h4TVw810{min-height:var(--z-tds_2f_web-spacing-40,2.5rem)}.z_tds_2f_web-h4TVw811{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-h4TVw812{outline-color:#0000}.z_tds_2f_web-h4TVw813{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-h4TVw814{outline-style:solid}.z_tds_2f_web-h4TVw815{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-h4TVw816{padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-h4TVw817{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-h4TVw818{text-align:start}.z_tds_2f_web-h4TVw819{text-decoration:none}.z_tds_2f_web-h4TVw81a{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-h4TVw81b{transition-property:background-color,color,outline-color,outline-offset,scale}.z_tds_2f_web-h4TVw81c{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-h4TVw81d{font-family:var(--z-tds_2f_web-typography-label-14-strong-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}.z_tds_2f_web-h4TVw81e{font-size:var(--z-tds_2f_web-typography-label-14-strong-fontSize,14px)}.z_tds_2f_web-h4TVw81f{font-weight:var(--z-tds_2f_web-typography-label-14-strong-fontWeight,500)}.z_tds_2f_web-h4TVw81g{letter-spacing:var(--z-tds_2f_web-typography-label-14-strong-letterSpacing,-.09px)}.z_tds_2f_web-h4TVw81h{line-height:var(--z-tds_2f_web-typography-label-14-strong-lineHeight,20px)}.z_tds_2f_web-h4TVw81i{width:100%}.z_tds_2f_web-h4TVw81j{white-space:nowrap}.z_tds_2f_web-h4TVw81k{&>svg{flex-shrink:0}}.z_tds_2f_web-h4TVw81l{&>svg{font-size:var(--z-tds_2f_web-fontSize-20,1.25rem)}}.z_tds_2f_web-h4TVw81m{[data-sidebar-menu-size=large] &{min-height:var(--z-tds_2f_web-spacing-56,3.5rem)}}.z_tds_2f_web-h4TVw81n{[data-sidebar-menu-size=large] &{font-family:var(--z-tds_2f_web-typography-label-16-strong-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z_tds_2f_web-h4TVw81o{[data-sidebar-menu-size=large] &{font-size:var(--z-tds_2f_web-typography-label-16-strong-fontSize,16px)}}.z_tds_2f_web-h4TVw81p{[data-sidebar-menu-size=large] &{font-weight:var(--z-tds_2f_web-typography-label-16-strong-fontWeight,500)}}.z_tds_2f_web-h4TVw81q{[data-sidebar-menu-size=large] &{letter-spacing:var(--z-tds_2f_web-typography-label-16-strong-letterSpacing,-.18px)}}.z_tds_2f_web-h4TVw81r{[data-sidebar-menu-size=large] &{line-height:var(--z-tds_2f_web-typography-label-16-strong-lineHeight,20px)}}.z_tds_2f_web-h4TVw81s{[data-sidebar-menu-size=small] &{border-radius:var(--z-tds_2f_web-radius-8,.5rem)}}.z_tds_2f_web-h4TVw81t{[data-sidebar-menu-size=small] &{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-h4TVw81u{[data-sidebar-menu-size=small] &{min-height:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-h4TVw81v{[data-sidebar-menu-size=small] &{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-h4TVw81w{[data-sidebar-menu-size=small] &{padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-h4TVw81x{[data-sidebar-menu-size=small] &{font-family:var(--z-tds_2f_web-typography-label-14-strong-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}}.z_tds_2f_web-h4TVw81y{[data-sidebar-menu-size=small] &{font-size:var(--z-tds_2f_web-typography-label-14-strong-fontSize,14px)}}.z_tds_2f_web-h4TVw81z{[data-sidebar-menu-size=small] &{font-weight:var(--z-tds_2f_web-typography-label-14-strong-fontWeight,500)}}.z_tds_2f_web-h4TVw820{[data-sidebar-menu-size=small] &{letter-spacing:var(--z-tds_2f_web-typography-label-14-strong-letterSpacing,-.09px)}}.z_tds_2f_web-h4TVw821{[data-sidebar-menu-size=small] &{line-height:var(--z-tds_2f_web-typography-label-14-strong-lineHeight,20px)}}.z_tds_2f_web-h4TVw822{[data-sidebar-menu-size=small] &>svg{font-size:var(--z-tds_2f_web-fontSize-16,1rem)}}.z_tds_2f_web-h4TVw823{&:active{scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-h4TVw824{&:focus-visible{outline-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}}.z_tds_2f_web-h4TVw825{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}}.z_tds_2f_web-h4TVw826{&:hover{background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}}.z_tds_2f_web-h4TVw827{&:hover{color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-h4TVw828{transition-property:background-color,color,outline-color}.z_tds_2f_web-h4TVw829{&:active{scale:none}}}.z_tds_2f_web-h4TVw82a{&:where([data-active=true]){background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}}.z_tds_2f_web-h4TVw82b{&:where([data-active=true]){color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}}.z_tds_2f_web-h4TVw82c{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw82d{&:where([data-size=small]){row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}}.z_tds_2f_web-h4TVw82e{padding-inline-start:var(--z-tds_2f_web-spacing-32,2rem)}.z_tds_2f_web-h4TVw82f{padding-top:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw82g{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw82h{[data-sidebar-menu-size=small] &{padding-inline-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}.z_tds_2f_web-h4TVw82i{[data-sidebar-menu-size=small] &{padding-top:var(--z-tds_2f_web-spacing-2,.125rem)}}.z_tds_2f_web-h4TVw82j{[data-sidebar-menu-size=small] &{row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}}.z_tds_2f_web-h4TVw82k{height:var(--collapsible-panel-height)}.z_tds_2f_web-h4TVw82l{overflow:hidden}.z_tds_2f_web-h4TVw82m{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-h4TVw82n{transition-property:height,opacity}.z_tds_2f_web-h4TVw82o{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-h4TVw82p{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-180,.18s)}}.z_tds_2f_web-h4TVw82q{&[data-ending-style],&[data-starting-style]{height:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-h4TVw82r{&[data-ending-style],&[data-starting-style]{opacity:0}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-h4TVw82s{transition-property:opacity}}
+.z_tds_2f_web-h4TVw80{border-top-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-h4TVw81{border-top-style:solid}.z_tds_2f_web-h4TVw82{border-top-width:1px}.z_tds_2f_web-h4TVw83{padding-top:calc(.5rem - 1px)}.z_tds_2f_web-h4TVw84{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-h4TVw85{flex-shrink:0}.z_tds_2f_web-h4TVw86{font-size:var(--z-tds_2f_web-fontSize-16,1rem)}.z_tds_2f_web-h4TVw87{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-h4TVw88{transition-property:color}.z_tds_2f_web-h4TVw89{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-h4TVw8a{:hover>&,[data-popup-open]>&{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 (width>=768px) and (width<=1023px){.z_tds_2f_web-h4TVw8b{[data-app-shell-rail] &{display:none}}}.z_tds_2f_web-h4TVw8c{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-h4TVw8d{overflow:hidden}.z_tds_2f_web-h4TVw8e{text-overflow:ellipsis}.z_tds_2f_web-h4TVw8f{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-h4TVw8g{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-h4TVw8h{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-h4TVw8i{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-h4TVw8j{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-h4TVw8k{white-space:nowrap}.z_tds_2f_web-h4TVw8l{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-h4TVw8m{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-h4TVw8n{font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}.z_tds_2f_web-h4TVw8o{font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}.z_tds_2f_web-h4TVw8p{letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,.14px)}.z_tds_2f_web-h4TVw8q{line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}.z_tds_2f_web-h4TVw8r{display:flex}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-h4TVw8s{[data-app-shell-rail] &{column-gap:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-h4TVw8t{[data-app-shell-rail] &{justify-content:center}}.z_tds_2f_web-h4TVw8u{[data-app-shell-rail] &{padding-inline:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-h4TVw8v{align-items:center}.z_tds_2f_web-h4TVw8w{appearance:none}.z_tds_2f_web-h4TVw8x{background-color:#0000}.z_tds_2f_web-h4TVw8y{border:none}.z_tds_2f_web-h4TVw8z{border-radius:var(--z-tds_2f_web-radius-2xs,calc(.5rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-h4TVw810{box-sizing:border-box}.z_tds_2f_web-h4TVw811{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-h4TVw812{cursor:pointer}.z_tds_2f_web-h4TVw813{font:inherit}.z_tds_2f_web-h4TVw814{min-height:var(--z-tds_2f_web-spacing-44,2.75rem)}.z_tds_2f_web-h4TVw815{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-h4TVw816{outline-color:#0000}.z_tds_2f_web-h4TVw817{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-h4TVw818{outline-style:solid}.z_tds_2f_web-h4TVw819{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-h4TVw81a{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw81b{padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-h4TVw81c{text-align:start}.z_tds_2f_web-h4TVw81d{transition-property:background-color,outline-color,outline-offset,scale}.z_tds_2f_web-h4TVw81e{width:100%}.z_tds_2f_web-h4TVw81f{&:active:not(:disabled,[data-disabled]){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-h4TVw81g{&: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-h4TVw81h{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}}.z_tds_2f_web-h4TVw81i{&:focus-visible{padding-inline:var(--z-tds_2f_web-spacing-10,.625rem)}}.z_tds_2f_web-h4TVw81j{&:hover:not(:disabled,[data-disabled]),&[data-popup-open]{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-h4TVw81k{&:is(:disabled,[data-disabled]){cursor:default}}.z_tds_2f_web-h4TVw81l{&:is(:disabled,[data-disabled]){opacity:var(--z-tds_2f_web-opacity-disabled,.4)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-h4TVw81m{transition-property:background-color,outline-color}.z_tds_2f_web-h4TVw81n{&:active:not(:disabled,[data-disabled]){scale:none}}}.z_tds_2f_web-h4TVw81o{flex:1}.z_tds_2f_web-h4TVw81p{flex-direction:column}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-h4TVw81q{[data-app-shell-rail] &{clip-path:inset(50%)}}.z_tds_2f_web-h4TVw81r{[data-app-shell-rail] &{height:1px}}.z_tds_2f_web-h4TVw81s{[data-app-shell-rail] &{overflow:hidden}}.z_tds_2f_web-h4TVw81t{[data-app-shell-rail] &{position:absolute}}.z_tds_2f_web-h4TVw81u{[data-app-shell-rail] &{white-space:nowrap}}.z_tds_2f_web-h4TVw81v{[data-app-shell-rail] &{width:1px}}}.z_tds_2f_web-h4TVw81w{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-h4TVw81x{margin-inline-start:auto}.z_tds_2f_web-h4TVw81y{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-h4TVw81z{transition-property:transform}.z_tds_2f_web-h4TVw820{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-h4TVw821{[data-panel-open]>&{transform:rotate(90deg)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-h4TVw822{transition-property:none}}.z_tds_2f_web-h4TVw823{row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-h4TVw824{*+&{margin-top:1.375rem}}.z_tds_2f_web-h4TVw825{[data-sidebar-menu-size=large] *+&{margin-top:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-h4TVw826{[data-sidebar-menu-size=small] *+&{margin-top:.875rem}}.z_tds_2f_web-h4TVw827{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-h4TVw828{padding-bottom:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-h4TVw829{padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-h4TVw82a{[data-sidebar-menu-size=large] &{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-h4TVw82b{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-h4TVw82c{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-h4TVw82d{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-h4TVw82e{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-h4TVw82f{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-h4TVw82g{[data-app-shell-rail] &{display:none}}}.z_tds_2f_web-h4TVw82h{background-color:#0000}.z_tds_2f_web-h4TVw82i{border:none}.z_tds_2f_web-h4TVw82j{border-radius:var(--z-tds_2f_web-radius-2xs,calc(.5rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-h4TVw82k{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-h4TVw82l{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-h4TVw82m{cursor:pointer}.z_tds_2f_web-h4TVw82n{display:flex}.z_tds_2f_web-h4TVw82o{font:inherit}.z_tds_2f_web-h4TVw82p{min-height:var(--z-tds_2f_web-spacing-36,2.25rem)}.z_tds_2f_web-h4TVw82q{padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-h4TVw82r{padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-h4TVw82s{text-decoration:none}.z_tds_2f_web-h4TVw82t{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-h4TVw82u{transition-property:background-color,color,outline-color,outline-offset,scale}.z_tds_2f_web-h4TVw82v{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-h4TVw82w{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-h4TVw82x{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-h4TVw82y{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-h4TVw82z{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-h4TVw830{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-h4TVw831{width:100%}.z_tds_2f_web-h4TVw832{white-space:nowrap}.z_tds_2f_web-h4TVw833{&>svg{flex-shrink:0}}.z_tds_2f_web-h4TVw834{&>svg{font-size:var(--z-tds_2f_web-fontSize-20,1.25rem)}}.z_tds_2f_web-h4TVw835{[data-sidebar-menu-size=large] &{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-h4TVw836{[data-sidebar-menu-size=large] &{min-height:var(--z-tds_2f_web-spacing-56,3.5rem)}}.z_tds_2f_web-h4TVw837{[data-sidebar-menu-size=large] &{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-h4TVw838{[data-sidebar-menu-size=large] &{font-family:var(--z-tds_2f_web-typography-body-b1-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}}.z_tds_2f_web-h4TVw839{[data-sidebar-menu-size=large] &{font-size:var(--z-tds_2f_web-typography-body-b1-fontSize,16px)}}.z_tds_2f_web-h4TVw83a{[data-sidebar-menu-size=large] &{font-weight:var(--z-tds_2f_web-typography-body-b1-fontWeight,400)}}.z_tds_2f_web-h4TVw83b{[data-sidebar-menu-size=large] &{letter-spacing:var(--z-tds_2f_web-typography-body-b1-letterSpacing,.12px)}}.z_tds_2f_web-h4TVw83c{[data-sidebar-menu-size=large] &{line-height:var(--z-tds_2f_web-typography-body-b1-lineHeight,22px)}}.z_tds_2f_web-h4TVw83d{[data-sidebar-menu-size=small] &{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-h4TVw83e{[data-sidebar-menu-size=small] &{min-height:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-h4TVw83f{[data-sidebar-menu-size=small] &{padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-h4TVw83g{[data-sidebar-menu-size=small] &>svg{font-size:var(--z-tds_2f_web-fontSize-16,1rem)}}.z_tds_2f_web-h4TVw83h{&:active{scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-h4TVw83i{&:focus-visible{padding-inline:var(--z-tds_2f_web-spacing-10,.625rem)}}.z_tds_2f_web-h4TVw83j{[data-sidebar-menu-size=large] &:focus-visible{padding-inline:.875rem}}.z_tds_2f_web-h4TVw83k{&: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-h4TVw83l{&: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-h4TVw83m{transition-property:background-color,color,outline-color}.z_tds_2f_web-h4TVw83n{&:active{scale:none}}}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-h4TVw83o{[data-app-shell-rail] &{column-gap:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-h4TVw83p{[data-app-shell-rail] &{padding-inline:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-h4TVw83q{[data-app-shell-rail] &{position:relative}}.z_tds_2f_web-h4TVw83r{[data-app-shell-rail] &>:not(:first-child){clip-path:inset(50%)}}.z_tds_2f_web-h4TVw83s{[data-app-shell-rail] &>:not(:first-child){height:1px}}.z_tds_2f_web-h4TVw83t{[data-app-shell-rail] &>:not(:first-child){overflow:hidden}}.z_tds_2f_web-h4TVw83u{[data-app-shell-rail] &>:not(:first-child){position:absolute}}.z_tds_2f_web-h4TVw83v{[data-app-shell-rail] &>:not(:first-child){white-space:nowrap}}.z_tds_2f_web-h4TVw83w{[data-app-shell-rail] &>:not(:first-child){width:1px}}}.z_tds_2f_web-h4TVw83x{&:where([data-active=true]){background-color:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}}.z_tds_2f_web-h4TVw83y{&: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-h4TVw83z{&:where([data-active=true]){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-h4TVw840{&:where([data-active=true]){font-size:var(--z-tds_2f_web-typography-body-b2Strong-fontSize,14px)}}.z_tds_2f_web-h4TVw841{&:where([data-active=true]){font-weight:var(--z-tds_2f_web-typography-body-b2Strong-fontWeight,500)}}.z_tds_2f_web-h4TVw842{&:where([data-active=true]){letter-spacing:var(--z-tds_2f_web-typography-body-b2Strong-letterSpacing,.14px)}}.z_tds_2f_web-h4TVw843{&:where([data-active=true]){line-height:var(--z-tds_2f_web-typography-body-b2Strong-lineHeight,20px)}}.z_tds_2f_web-h4TVw844{&:where([data-active=true]){[data-sidebar-menu-size=large] &{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-h4TVw845{&:where([data-active=true]){[data-sidebar-menu-size=large] &{font-size:var(--z-tds_2f_web-typography-body-b1Strong-fontSize,16px)}}}.z_tds_2f_web-h4TVw846{&:where([data-active=true]){[data-sidebar-menu-size=large] &{font-weight:var(--z-tds_2f_web-typography-body-b1Strong-fontWeight,500)}}}.z_tds_2f_web-h4TVw847{&:where([data-active=true]){[data-sidebar-menu-size=large] &{letter-spacing:var(--z-tds_2f_web-typography-body-b1Strong-letterSpacing,.12px)}}}.z_tds_2f_web-h4TVw848{&:where([data-active=true]){[data-sidebar-menu-size=large] &{line-height:var(--z-tds_2f_web-typography-body-b1Strong-lineHeight,22px)}}}.z_tds_2f_web-h4TVw849{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-h4TVw84a{border-radius:var(--z-tds_2f_web-radius-2xs,calc(.5rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-h4TVw84b{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-h4TVw84c{flex-shrink:0}.z_tds_2f_web-h4TVw84d{font-size:var(--z-tds_2f_web-fontSize-20,1.25rem)}.z_tds_2f_web-h4TVw84e{height:var(--z-tds_2f_web-spacing-36,2.25rem)}.z_tds_2f_web-h4TVw84f{justify-content:center}.z_tds_2f_web-h4TVw84g{width:var(--z-tds_2f_web-spacing-36,2.25rem)}.z_tds_2f_web-h4TVw84h{row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-h4TVw84i{&:where([data-size=large]){row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-h4TVw84j{padding-inline-start:var(--z-tds_2f_web-spacing-32,2rem)}.z_tds_2f_web-h4TVw84k{padding-top:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-h4TVw84l{row-gap:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-h4TVw84m{[data-sidebar-menu-size=large] &{padding-top:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-h4TVw84n{[data-sidebar-menu-size=large] &{row-gap:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-h4TVw84o{[data-sidebar-menu-size=small] &{padding-inline-start:var(--z-tds_2f_web-spacing-24,1.5rem)}}@media (width>=768px) and (width<=1023px){.z_tds_2f_web-h4TVw84p{[data-app-shell-rail] &{padding-inline-start:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-h4TVw84q{height:var(--collapsible-panel-height)}.z_tds_2f_web-h4TVw84r{overflow:hidden}.z_tds_2f_web-h4TVw84s{transition-duration:var(--z-tds_2f_web-transitionDuration-240,.24s)}.z_tds_2f_web-h4TVw84t{transition-property:height,opacity}.z_tds_2f_web-h4TVw84u{transition-timing-function:var(--z-tds_2f_web-ease-spring,cubic-bezier(.32, .72, 0, 1))}.z_tds_2f_web-h4TVw84v{&[data-ending-style]{transition-duration:var(--z-tds_2f_web-transitionDuration-180,.18s)}}.z_tds_2f_web-h4TVw84w{&[data-ending-style],&[data-starting-style]{height:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-h4TVw84x{&[data-ending-style],&[data-starting-style]{opacity:0}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-h4TVw84y{transition-property:opacity}}

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

@@ -1,7 +1,8 @@
 import * as BaseUi from '@base-ui/react/collapsible';
 import { useRender } from '@base-ui/react/use-render';
-import { type ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type * as zyzz from 'zyzz';
+import * as TabBar from './internal/TabBar.js';
 /**
  * Vertical navigation of icon and label rows, for sidebars and drawers. It renders a `<nav>`
  * landmark of links, with `aria-current="page"` on the active item. Submenus are Base UI
@@ -29,6 +30,53 @@ import type * as zyzz from 'zyzz';
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
  */
 export declare namespace SidebarMenu {
+    /**
+     * Holds the `AccountRow` at the bottom of a sidebar, under a 1px divider across its full width.
+     * Put it last in `AppShell.SidebarFooter`, after the menu of support links, such as Help.
+     *
+     * @example
+     * <SidebarMenu.Account>
+     *   <Menu.Root>
+     *     <Menu.Trigger render={<SidebarMenu.AccountRow description="ada@tempo.xyz" label="Ada" />}>
+     *       <Avatar size="32">
+     *         <Avatar.Fallback>AL</Avatar.Fallback>
+     *       </Avatar>
+     *     </Menu.Trigger>
+     *   </Menu.Root>
+     * </SidebarMenu.Account>
+     */
+    function Account(props: Account.Props): import("react").JSX.Element;
+    namespace Account {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.account>;
+    }
+    /**
+     * Renders the 44px account `<button>` at the bottom of a sidebar: `children`, such as a 32px
+     * `Avatar`, then `label` over `description`. A row that opens a popup, through `aria-haspopup`,
+     * ends in a chevron. The children are hidden from assistive technology, so `label` names the
+     * account. Pass the row to `Menu.Trigger` through `render` to open the account menu, which sets
+     * `aria-haspopup` and fills the row while it is open. Keyboard focus draws a 2px ring inside the
+     * row and moves its content 2px inward.
+     *
+     * @example
+     * <Menu.Root>
+     *   <Menu.Trigger render={<SidebarMenu.AccountRow description="ada@tempo.xyz" label="Ada" />}>
+     *     <Avatar size="32">
+     *       <Avatar.Fallback>AL</Avatar.Fallback>
+     *     </Avatar>
+     *   </Menu.Trigger>
+     * </Menu.Root>
+     */
+    function AccountRow(props: AccountRow.Props): import("react").JSX.Element;
+    namespace AccountRow {
+        type Props = Omit<ComponentPropsWithRef<'button'>, 'children'> & zyzz.Props.Variants<typeof styles.accountRow> & {
+            /** Leading media, such as a 32px `Avatar`. Absent, the text starts at the row's edge. */
+            children?: ReactNode | undefined;
+            /** Second line in the secondary color, such as the email or address of the account. */
+            description?: ReactNode | undefined;
+            /** First line, which names the account, such as the person's name. */
+            label: ReactNode;
+        };
+    }
     /**
      * Renders a `group` that names itself after its `GroupLabel` when one renders inside it.
      * Without a label, pass `aria-label`.
@@ -44,17 +92,51 @@ export declare namespace SidebarMenu {
     }
     /**
      * Renders a link by default. Pass `render` to use a router link. `active` marks the current page
-     * with `aria-current="page"`.
+     * with `aria-current="page"`, and sets its label in the strong weight. Keyboard focus draws a
+     * 2px ring inside the row and moves its content 2px inward.
+     *
+     * Inside an `AppShell`, `tabBar` repeats the item in the bottom bar below 768px, with the same
+     * `href`, `render` and handlers. In an `AppShell` with `collapse`, the sidebar shows only the
+     * first element of each item from 768px to 1023px, such as its icon, and keeps its text as the
+     * accessible name.
+     *
+     * @example
+     * <SidebarMenu.Item active href="/" tabBar="tab">
+     *   <Home />
+     *   Home
+     * </SidebarMenu.Item>
      */
     function Item(props: Item.Props): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     namespace Item {
         type Props = Omit<useRender.ComponentProps<'a'>, 'color'> & Omit<zyzz.Props.Variants<typeof styles.item>, 'active'> & {
             active?: boolean | undefined;
+            /**
+             * Repeats the item in the bottom bar of an `AppShell` below 768px: `tab` as an icon in the
+             * tab bar, or `action` as the floating action button beside it. Give the tab bar up to
+             * three items and one action. Absent, the item stays in the sidebar drawer only.
+             */
+            tabBar?: TabBar.Variant | undefined;
         };
     }
+    /**
+     * Renders a 36px tile in the primary content color, which centers a logo in the inverse content
+     * color, such as `TempoLogo` with `type="mark"`. Pass it to an `AccountRow` that names a
+     * product or a wallet, in place of an `Avatar`.
+     *
+     * @example
+     * <SidebarMenu.AccountRow description="0xc721…s9dk" label="Tempo Wallet">
+     *   <SidebarMenu.Logo>
+     *     <TempoLogo type="mark" />
+     *   </SidebarMenu.Logo>
+     * </SidebarMenu.AccountRow>
+     */
+    function Logo(props: Logo.Props): import("react").JSX.Element;
+    namespace Logo {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.logo>;
+    }
     /**
      * Renders the `<nav>` landmark, labelled `Main` unless you pass `aria-label`. Give each
-     * landmark on a page a distinct label. `size` sets 32, 40 or 56px rows, and `small` also uses
+     * landmark on a page a distinct label. `size` sets 32, 36 or 56px rows, and `small` also uses
      * 16px icons for long menus.
      */
     function Root(props: Root.Props): import("react").JSX.Element;
@@ -84,42 +166,118 @@ export declare namespace SidebarMenu {
     }
 }
 declare namespace styles {
+    const account: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly borderTopColor: "line.secondary";
+            readonly borderTopStyle: "solid";
+            readonly borderTopWidth: "1px !custom";
+            readonly paddingTop: "calc(0.5rem - 1px) !custom";
+        };
+    }, "react">;
+    const accountChevron: zyzz.style.ReturnType<"react">;
+    const accountDescription: zyzz.style.ReturnType<"react">;
+    const accountLabel: zyzz.style.ReturnType<"react">;
+    const accountMedia: zyzz.style.ReturnType<"react">;
+    const accountRow: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly '@media (min-width: 768px) and (max-width: 1023px)': {
+                readonly selectors: {
+                    readonly '[data-app-shell-rail] &': {
+                        readonly columnGap: "0";
+                        readonly justifyContent: "center";
+                        readonly paddingInline: "0";
+                    };
+                };
+            };
+            readonly alignItems: "center";
+            readonly appearance: "none !custom";
+            readonly backgroundColor: "transparent !custom";
+            readonly border: "none !custom";
+            readonly borderRadius: "2xs";
+            readonly boxSizing: "border-box";
+            readonly color: "content.primary";
+            readonly columnGap: "12";
+            readonly cursor: "pointer";
+            readonly display: "flex";
+            readonly font: "inherit !custom";
+            readonly minHeight: "44";
+            readonly minWidth: "0";
+            readonly outlineColor: "transparent !custom";
+            readonly outlineOffset: "0";
+            readonly outlineStyle: "solid !custom";
+            readonly outlineWidth: "2";
+            readonly paddingBlock: "4";
+            readonly paddingInline: "8";
+            readonly textAlign: "start";
+            readonly transitionDuration: "160";
+            readonly transitionProperty: "background-color, outline-color, outline-offset, scale !custom";
+            readonly transitionTimingFunction: "snappy";
+            readonly width: "100% !custom";
+            readonly selectors: {
+                readonly '&:active:not(:disabled, [data-disabled])': {
+                    readonly scale: "press";
+                };
+                readonly '&:focus-visible': {
+                    readonly outlineColor: "border.focus";
+                    readonly outlineOffset: "-2";
+                    readonly paddingInline: "10";
+                };
+                readonly '&:hover:not(:disabled, [data-disabled]), &[data-popup-open]': {
+                    readonly backgroundColor: "container.regular";
+                };
+                readonly '&:is(:disabled, [data-disabled])': {
+                    readonly cursor: "default";
+                    readonly opacity: "disabled";
+                };
+            };
+            readonly '@media (prefers-reduced-motion: reduce)': {
+                readonly transitionProperty: "background-color, outline-color !custom";
+                readonly selectors: {
+                    readonly '&:active:not(:disabled, [data-disabled])': {
+                        readonly scale: "none !custom";
+                    };
+                };
+            };
+        };
+    }, "react">;
+    const accountText: zyzz.style.ReturnType<"react">;
     const chevron: zyzz.style.ReturnType<"react">;
     const group: zyzz.variants.ReturnType<{
         readonly base: {
             readonly display: "flex";
             readonly flexDirection: "column";
-            readonly rowGap: "4";
+            readonly rowGap: "2";
             readonly selectors: {
                 readonly '* + &': {
-                    readonly marginTop: "20";
+                    readonly marginTop: "1.375rem !custom";
                 };
-                readonly '[data-sidebar-menu-size="small"] &': {
-                    readonly rowGap: "2";
+                readonly '[data-sidebar-menu-size="large"] * + &': {
+                    readonly marginTop: "20";
                 };
                 readonly '[data-sidebar-menu-size="small"] * + &': {
-                    readonly marginTop: "12";
-                };
-                readonly '& + &': {
-                    readonly borderTopColor: "grayAlpha.200";
-                    readonly borderTopStyle: "solid";
-                    readonly borderTopWidth: "1px !custom";
-                    readonly paddingTop: "16";
+                    readonly marginTop: "0.875rem !custom";
                 };
             };
         };
     }, "react">;
     const groupLabel: zyzz.variants.ReturnType<{
         readonly base: {
-            readonly color: "foreground";
-            readonly paddingBlock: "4";
-            readonly paddingInline: "12";
+            readonly color: "content.tertiary";
+            readonly paddingBottom: "4";
+            readonly paddingInline: "8";
             readonly selectors: {
-                readonly '[data-sidebar-menu-size="small"] &': {
-                    readonly paddingInline: "8";
+                readonly '[data-sidebar-menu-size="large"] &': {
+                    readonly paddingInline: "12";
+                };
+            };
+            readonly typography: "body.b3";
+            readonly '@media (min-width: 768px) and (max-width: 1023px)': {
+                readonly selectors: {
+                    readonly '[data-app-shell-rail] &': {
+                        readonly display: "none !custom";
+                    };
                 };
             };
-            readonly typography: "label.12";
         };
     }, "react">;
     const item: zyzz.variants.ReturnType<{
@@ -128,27 +286,27 @@ declare namespace styles {
             readonly appearance: "none !custom";
             readonly backgroundColor: "transparent !custom";
             readonly border: "none !custom";
-            readonly borderRadius: "12";
+            readonly borderRadius: "2xs";
             readonly boxSizing: "border-box";
-            readonly color: "gray.900";
+            readonly color: "content.secondary";
             readonly columnGap: "12";
             readonly cursor: "pointer";
             readonly display: "flex";
             readonly font: "inherit !custom";
-            readonly minHeight: "40";
+            readonly minHeight: "36";
             readonly minWidth: "0";
             readonly outlineColor: "transparent !custom";
             readonly outlineOffset: "0";
             readonly outlineStyle: "solid !custom";
             readonly outlineWidth: "2";
             readonly paddingBlock: "8";
-            readonly paddingInline: "12";
+            readonly paddingInline: "8";
             readonly textAlign: "start";
             readonly textDecoration: "none !custom";
             readonly transitionDuration: "160";
             readonly transitionProperty: "background-color, color, outline-color, outline-offset, scale !custom";
             readonly transitionTimingFunction: "snappy";
-            readonly typography: "label.14.strong";
+            readonly typography: "body.b2";
             readonly width: "100% !custom";
             readonly whiteSpace: "nowrap";
             readonly selectors: {
@@ -157,16 +315,15 @@ declare namespace styles {
                     readonly fontSize: "20";
                 };
                 readonly '[data-sidebar-menu-size="large"] &': {
+                    readonly borderRadius: "xs";
                     readonly minHeight: "56";
-                    readonly typography: "label.16.strong";
+                    readonly paddingInline: "12";
+                    readonly typography: "body.b1";
                 };
                 readonly '[data-sidebar-menu-size="small"] &': {
-                    readonly borderRadius: "8";
                     readonly columnGap: "8";
                     readonly minHeight: "32";
                     readonly paddingBlock: "4";
-                    readonly paddingInline: "8";
-                    readonly typography: "label.14.strong";
                 };
                 readonly '[data-sidebar-menu-size="small"] & > svg': {
                     readonly fontSize: "16";
@@ -175,12 +332,16 @@ declare namespace styles {
                     readonly scale: "press";
                 };
                 readonly '&:focus-visible': {
-                    readonly outlineColor: "blue.700";
+                    readonly outlineColor: "border.focus";
                     readonly outlineOffset: "-2";
+                    readonly paddingInline: "10";
+                };
+                readonly '[data-sidebar-menu-size="large"] &:focus-visible': {
+                    readonly paddingInline: "0.875rem !custom";
                 };
                 readonly '&:hover': {
-                    readonly backgroundColor: "grayAlpha.100";
-                    readonly color: "foreground";
+                    readonly backgroundColor: "container.regular";
+                    readonly color: "content.primary";
                 };
             };
             readonly '@media (prefers-reduced-motion: reduce)': {
@@ -191,6 +352,24 @@ declare namespace styles {
                     };
                 };
             };
+            readonly '@media (min-width: 768px) and (max-width: 1023px)': {
+                readonly selectors: {
+                    readonly '[data-app-shell-rail] &': {
+                        readonly columnGap: "0";
+                        readonly justifyContent: "center";
+                        readonly paddingInline: "0";
+                        readonly position: "relative";
+                    };
+                    readonly '[data-app-shell-rail] & > :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 defaultVariants: {
             readonly active: false;
@@ -199,29 +378,49 @@ declare namespace styles {
             readonly active: {
                 readonly false: {};
                 readonly true: {
-                    readonly backgroundColor: "grayAlpha.100";
-                    readonly color: "foreground";
+                    readonly backgroundColor: "container.regular";
+                    readonly color: "content.primary";
+                    readonly typography: "body.b2Strong";
+                    readonly selectors: {
+                        readonly '[data-sidebar-menu-size="large"] &': {
+                            readonly typography: "body.b1Strong";
+                        };
+                    };
                 };
             };
         };
     }, "react">;
+    const logo: zyzz.variants.ReturnType<{
+        readonly base: {
+            readonly alignItems: "center";
+            readonly backgroundColor: "content.primary";
+            readonly borderRadius: "2xs";
+            readonly color: "inverse.content.primary";
+            readonly display: "flex";
+            readonly flexShrink: "0 !custom";
+            readonly fontSize: "20";
+            readonly height: "36";
+            readonly justifyContent: "center";
+            readonly width: "36";
+        };
+    }, "react">;
     const root: zyzz.variants.ReturnType<{
         readonly base: {
             readonly display: "flex";
             readonly flexDirection: "column";
             readonly minWidth: "0";
-            readonly rowGap: "4";
+            readonly rowGap: "2";
         };
         readonly defaultVariants: {
             readonly size: "medium";
         };
         readonly variants: {
             readonly size: {
-                readonly large: {};
-                readonly medium: {};
-                readonly small: {
-                    readonly rowGap: "2";
+                readonly large: {
+                    readonly rowGap: "4";
                 };
+                readonly medium: {};
+                readonly small: {};
             };
         };
     }, "react">;

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

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