import { DefaultChild } from "@brevity-builder/models"; import InternalLink from "./InternalLink"; export default { name: "Sidebar", acceptsChildren: true, category: "Container", optionalLayers: [ { id: "Sidebar", name: "Sidebar", acceptsChildren: true, additionalStates: [ { label: "Is expanded", value: '[data-state="expanded"]', }, { label: "Is collapsed", value: '[data-state="collapsed"]', }, { label: "Is collapsed to icon", value: '[data-collapsible="icon"]', }, ], optionalLayers: [ { id: "Header", name: "Header", acceptsChildren: true, props: [], defaultStyles: { "": { display: "flex", "flex-direction": "column", gap: "8px", "padding-top": "8px", "padding-bottom": "8px", "padding-right": "8px", "padding-left": "8px", }, }, }, { id: "Footer", name: "Footer", acceptsChildren: true, props: [], defaultStyles: { "": { display: "flex", "flex-direction": "column", gap: "8px", "padding-top": "8px", "padding-bottom": "8px", "padding-right": "8px", "padding-left": "8px", }, }, }, { id: "Separator", name: "Separator", acceptsChildren: false, props: [], defaultStyles: { "": { height: "1px", "margin-left": "8px", "margin-right": "8px", width: "auto", "flex-shrink": "0", "background-color": "var(--theme-border-default)", }, }, }, { id: "Content", name: "Content", acceptsChildren: true, props: [], defaultStyles: { "": { display: "flex", "min-height": "0", "flex-grow": "1", "flex-shrink": "1", "flex-basis": "0%", "flex-direction": "column", gap: "8px", overflow: "auto", }, '[data-collapsible="icon"] &': { overflow: "hidden", }, }, }, { id: "Group", name: "Group", acceptsChildren: true, props: [], defaultChildren: [ { kind: "Sidebar$Brevity.Sidebar.Group.GroupLabel", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Group Label", }, styleProps: { size: "inherit", }, children: [], }, ], }, { kind: "Sidebar$Brevity.Sidebar.Group.GroupContent", props: {}, styleProps: {}, children: [], }, ], optionalLayers: [ { id: "GroupLabel", name: "Group Label", acceptsChildren: true, props: [], defaultStyles: { ":focus-visible": { "box-shadow": "var(--theme-shadows-outline)", }, "": { display: "flex", height: "32px", "flex-shrink": "0", "border-radius": "var(--theme-radii-md)", "align-items": "center", "font-size": "var(--theme-font-sizes-sm)", "font-weight": "var(--theme-font-weights-semibold)", "line-height": "var(--theme-line-heights-sm)", "letter-spacing": "var(--theme-letter-spacings-sm)", "text-transform": "uppercase", color: "var(--theme-fg-muted)", "padding-left": "8px", "padding-right": "8px", outline: "none", }, '[data-collapsible="icon"] &': { "margin-top": "-2rem", opacity: "0", }, " > svg": { width: "16px", height: "16px", "flex-shrink": "0", }, }, }, { id: "GroupAction", name: "Group Action", acceptsChildren: true, props: [ { label: "asChild", name: "asChild", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether the button should be rendered as it's child", }, ], defaultStyles: { "--bp-md": { "::after": { display: "none", }, }, "--bp-all": { // Increases the hit area of the button on mobile. "::after": { content: '""', position: "absolute", top: "-8px", right: "-8px", bottom: "-8px", left: "-8px", }, ":hover": { "background-color": "var(--theme-brand-neutral-muted)", color: "var(--theme-brand-neutral-fg)", }, ":focus-visible": { "box-shadow": "var(--theme-shadows-outline)", }, "": { position: "absolute", right: "12px", top: "14px", display: "flex", width: "20px", height: "20px", "align-items": "center", "justify-content": "center", "padding-left": "0", "padding-top": "0", "padding-right": "0", "padding-bottom": "0", color: "var(--theme-fg-default)", outline: "none", "border-radius": "var(--theme-radii-md)", }, '[data-collapsible="icon"] &': { display: "none", }, " > svg": { width: "16px", height: "16px", "flex-shrink": "0", }, }, }, }, { id: "GroupContent", name: "Group Content", acceptsChildren: true, props: [], defaultStyles: { "": { width: "100%", "font-size": "var(--theme-fontSizes-sm)", }, }, }, ], defaultStyles: { "": { position: "relative", display: "flex", width: "100%", "min-width": "0", "flex-direction": "column", "padding-top": "8px", "padding-bottom": "8px", "padding-right": "8px", "padding-left": "8px", }, }, }, { id: "Menu", name: "Menu", acceptsChildren: true, props: [], defaultChildren: [ { kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem", props: {}, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton", props: { tooltip: "", }, styleProps: {}, children: [ { kind: "Icon$Brevity", props: { children: { __type: "icon", icon: "draft", pack: "materialsymbolsoutlined", }, }, styleProps: {}, children: [], }, { kind: "Text$Brevity", props: { value: "Menu Item", }, styleProps: { size: "inherit", }, children: [], }, ], }, ], }, ], optionalLayers: [ { id: "MenuItem", name: "Menu Item", acceptsChildren: true, props: [], defaultChildren: [ { kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton", props: { tooltip: "", }, styleProps: {}, children: [ { kind: "Icon$Brevity", props: { children: { __type: "icon", icon: "draft", pack: "materialsymbolsoutlined", }, }, styleProps: {}, children: [], }, { kind: "Text$Brevity", props: { value: "Menu Item", }, styleProps: { size: "inherit", }, children: [], }, ], }, ], optionalLayers: [ { id: "MenuLink", name: "Menu Link", acceptsChildren: true, props: [ ...InternalLink.props, { label: "Tooltip", name: "tooltip", type: { kind: "text", isDynamic: true }, required: false, isDefault: true, default: null, placeholder: "Optional tooltip", help: "Optional tooltip", }, ], additionalStates: InternalLink.additionalStates, events: InternalLink.events, styleProps: [ { label: "Variant", name: "variant", type: { kind: "select" }, options: [ { label: "Solid", value: "solid", selector: '._active[data-variant="solid"]', styles: { "": { "background-color": "var(--palette-solid)", color: "var(--palette-contrast)", }, " svg": { color: "var(--palette-contrast)", }, ":hover": { "background-color": "var(--palette-solid)", }, }, }, { label: "Subtle", value: "subtle", selector: '._active[data-variant="subtle"]', styles: { "": { "background-color": { __type: "color", color: "var(--palette-muted)", opacity: 65, }, }, " svg": { color: "var(--palette-fg)", }, ":hover": { "background-color": { __type: "color", color: "var(--palette-muted)", opacity: 65, }, }, }, }, { label: "Outline", value: "outline", selector: '._active[data-variant="outline"]', styles: { "": { "background-color": "transparent", "border-width": "1px", "border-color": "var(--theme-brand-neutral-muted)", }, " svg": { color: "var(--palette-fg)", }, ":hover": { "background-color": "transparent", }, }, }, { label: "Elevated", value: "elevated", selector: '._active[data-variant="elevated"]', styles: { "": { "border-width": "1px", "border-color": "var(--theme-brand-neutral-muted)", "background-color": "var(--theme-bg-default)", "box-shadow": "var(--theme-shadows-sm)", }, " svg": { color: "var(--palette-fg)", }, ":hover": { "background-color": "var(--theme-bg-default)", }, }, }, ], default: "subtle", }, { label: "Color Palette", name: "data-palette", type: { kind: "palette" }, default: "neutral", help: "The color scheme of the button", }, ], defaultStyles: { ":hover": { "background-color": "var(--theme-brand-neutral-muted)", color: "var(--theme-brand-neutral-fg)", }, ":focus-visible": { "box-shadow": "var(--theme-shadows-outline)", }, ":disabled": { "pointer-events": "none", opacity: 0.5, }, "._active": { "background-color": "var(--theme-brand-brand-solid)", color: "var(--theme-brand-brand-contrast)", }, " > span": { "line-height": "1", overflow: "hidden", "white-space": "nowrap", }, " > span:last-child": { "text-overflow": "ellipsis", overflow: "hidden", "white-space": "nowrap", }, " > svg": { color: "var(--theme-fg-muted)", width: "16px", height: "16px", "flex-shrink": "0", }, '[data-sidebar="menuitem"]:has([data-sidebar="menu-action"]) &': { "padding-right": "32px", }, "": { color: "var(--theme-fg-default)", "font-weight": "var(--theme-fontWeights-medium)", display: "flex", width: "100%", "align-items": "center", gap: "8px", overflow: "hidden", "border-width": "1px", "border-color": "transparent", "border-radius": "var(--theme-radii-md)", "padding-left": "8px", "padding-right": "8px", "padding-top": "8px", "padding-bottom": "8px", "text-align": "left", "font-size": "var(--theme-fontSizes-sm)", outline: "none", transition: "width 200ms linear, padding 200ms linear, height 200ms linear", }, '[data-collapsible="icon"] &': { width: "32px !important", height: "32px !important", "padding-top": "8px !important", "padding-bottom": "8px !important", "padding-left": "8px !important", "padding-right": "8px !important", }, }, }, { id: "MenuButton", name: "Menu Button", acceptsChildren: true, props: [ { label: "Tooltip", name: "tooltip", type: { kind: "text", isDynamic: true }, required: false, isDefault: true, default: null, placeholder: "Optional tooltip", help: "Optional tooltip", }, { label: "isActive", name: "isActive", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether the button should be rendered in its active state", }, { label: "asChild", name: "asChild", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether the button should be rendered as it's child", }, ], styleProps: [ { label: "Variant", name: "variant", type: { kind: "select" }, options: [ { label: "Solid", value: "solid", selector: '[data-active][data-variant="solid"]', styles: { "": { "background-color": "var(--palette-solid)", color: "var(--palette-contrast)", }, " svg": { color: "var(--palette-contrast)", }, }, }, { label: "Subtle", value: "subtle", selector: '[data-active][data-variant="subtle"]', styles: { "": { "background-color": { __type: "color", color: "var(--palette-muted)", opacity: 65, }, }, " svg": { color: "var(--palette-fg)", }, }, }, { label: "Outline", value: "outline", selector: '[data-active][data-variant="outline"]', styles: { "": { "background-color": "transparent", "border-width": "1px", "border-color": "var(--theme-brand-neutral-muted)", }, " svg": { color: "var(--palette-fg)", }, ":hover": { "background-color": "transparent", }, }, }, { label: "Elevated", value: "elevated", selector: '[data-active][data-variant="elevated"]', styles: { "": { "border-width": "1px", "border-color": "var(--theme-brand-neutral-muted)", "background-color": "var(--theme-bg-default)", "box-shadow": "var(--theme-shadows-sm)", }, " svg": { color: "var(--palette-fg)", }, }, }, ], default: "subtle", }, { label: "Color Palette", name: "data-palette", type: { kind: "palette" }, default: "neutral", help: "The color scheme of the button", }, ], defaultStyles: { ":hover": { "background-color": "var(--theme-brand-neutral-subtle)", }, ":focus-visible": { "outline-width": "1px", "outline-style": "solid", "outline-color": "var(--palette-ring)", }, ":disabled": { "pointer-events": "none", opacity: 0.5, }, " > span": { "line-height": "1", overflow: "hidden", "white-space": "nowrap", }, " > span:last-child": { "text-overflow": "ellipsis", overflow: "hidden", "white-space": "nowrap", }, " > svg": { color: "var(--theme-fg-muted)", width: "16px", height: "16px", "flex-shrink": "0", }, '[data-sidebar="menuitem"]:has([data-sidebar="menu-action"]) &': { "padding-right": "32px", }, "": { color: "var(--theme-fg-default)", display: "flex", width: "100%", "align-items": "center", gap: "8px", overflow: "hidden", "border-width": "1px", "border-color": "transparent", "font-weight": "var(--theme-fontWeights-medium)", "border-radius": "var(--theme-radii-md)", "padding-left": "8px", "padding-right": "8px", "padding-top": "8px", "padding-bottom": "8px", "text-align": "left", "font-size": "var(--theme-fontSizes-sm)", outline: "none", transition: "width 200ms linear, padding 200ms linear, height 200ms linear", }, '[data-collapsible="icon"] &': { width: "32px !important", height: "32px !important", "padding-top": "8px !important", "padding-bottom": "8px !important", "padding-left": "8px !important", "padding-right": "8px !important", }, }, }, { id: "MenuAction", name: "Menu Action", acceptsChildren: true, props: [ { label: "asChild", name: "asChild", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether the button should be rendered as it's child", }, ], defaultStyles: { "--bp-md": { "[data-show-on-hover]": { opacity: 0, }, "::after": { display: "none", }, }, "--bp-all": { ":focus-visible": { "box-shadow": "var(--theme-shadows-outline)", }, ":hover": { "background-color": "var(--theme-brand-neutral-muted)", color: "var(--theme-brand-neutral-fg)", }, "::after": { content: '""', position: "absolute", top: "-8px", right: "-8px", bottom: "-8px", left: "-8px", }, "": { position: "absolute", right: "4px", top: "6px", display: "flex", width: "20px", height: "20px", "align-items": "center", "justify-content": "center", "padding-left": "0", "padding-top": "0", "padding-right": "0", "padding-bottom": "0", color: "var(--theme-fg-default)", outline: "none", "border-radius": "var(--theme-radii-md)", }, '[data-size="sm"] ~ &': { top: "4px", }, '[data-size="default"] ~ &': { top: "6px", }, '[data-size="lg"] ~ &': { top: "10px", }, '[data-active="true"]': { color: "white", }, " > svg": { width: "16px", height: "16px", "flex-shrink": "0", }, '[data-collapsible="icon"] &': { display: "none", }, '[data-sidebar="menu-button"]:hover ~ &': { color: "white", }, '[data-sidebar="menu-item"]:hover &[data-show-on-hover]': { opacity: 1, }, '[data-sidebar="menu-item"]:focus-within &[data-show-on-hover]': { opacity: 1, }, '[data-state="open"][data-show-on-hover]': { opacity: 1, }, '[data-sidebar="menu-button"][data-active="true"] ~ &[data-show-on-hover]': { color: "white", }, }, }, }, { id: "MenuBadge", name: "Menu Badge", acceptsChildren: false, props: [], defaultStyles: { "": { position: "absolute", right: "4px", top: "6px", display: "flex", height: "20px", "min-width": "20px", "align-items": "center", "justify-content": "center", "padding-left": "4px", "padding-right": "4px", "font-size": "var(--theme-fontSizes-xs)", "font-weight": "var(--theme-fontWeights-semibold)", "border-radius": "6px", "font-variant-numeric": "tabular-nums", "user-select": "none", "pointer-events": "none", }, '[data-size="sm"]': { top: "4px", }, '[data-size="lg"]': { top: "10px", }, '[data-active="true"]': { color: "white", }, '[data-collapsible="icon"] &': { display: "none", }, '[data-sidebar="menu-button"]:hover &': { color: "white", }, '[data-sidebar="menu-button"]:focus &': { color: "white", }, }, }, { id: "MenuSub", name: "Menu Sub", acceptsChildren: true, props: [], optionalLayers: [ { id: "MenuSubItem", name: "Menu Sub Item", acceptsChildren: true, props: [], defaultStyles: { "": { position: "relative", }, }, }, { id: "MenuSubButton", name: "Menu Sub Button", acceptsChildren: true, props: [ { label: "asChild", name: "asChild", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether the button should be rendered as it's child", }, ], defaultStyles: { ":hover": { "background-color": "var(--theme-brand-neutral-muted)", color: "var(--theme-brand-neutral-fg)", }, ":focus-visible": { "box-shadow": "var(--theme-shadows-outline)", }, ":disabled": { "pointer-events": "none", opacity: 0.5, }, " > span": { "line-height": "1", }, " > span:last-child": { "text-overflow": "ellipsis", overflow: "hidden", "white-space": "nowrap", }, " > svg": { width: "16px", height: "16px", "flex-shrink": "0", color: "white", }, "": { display: "flex", width: "100%", "align-items": "center", gap: "8px", overflow: "hidden", "border-radius": "var(--theme-radii-md)", "padding-left": "8px", "padding-right": "8px", "padding-top": "8px", "padding-bottom": "8px", "text-align": "left", "font-size": "var(--theme-fontSizes-sm)", outline: "none", transition: "width 200ms linear, padding 200ms linear, height 200ms linear", }, '[data-collapsible="icon"] &': { display: "none", }, }, }, ], defaultStyles: { "": { display: "flex", "flex-direction": "column", gap: "4px", "min-width": "0", "border-left-width": "1px", "margin-left": "14px", "margin-right": "14px", "padding-left": "10px", "padding-top": "2px", "padding-bottom": "2px", }, "[data-collapsible='icon'] &": { display: "none", }, }, }, ], defaultStyles: { "": { position: "relative", }, }, }, { id: "MenuSkeleton", name: "Menu Skeleton", acceptsChildren: false, props: [ { label: "Show Icon", name: "showIcon", type: { kind: "boolean" }, default: false, placeholder: "", help: "Whether to show the icon", }, ], defaultStyles: { '[data-state="collapsed"] &': { display: "none", }, "": { display: "flex", height: "32px", "align-items": "center", gap: "8px", "padding-left": "8px", "padding-right": "8px", "border-radius": "6px", }, }, }, ], defaultStyles: { "": { display: "flex", width: "100%", "min-width": "0", "flex-direction": "column", gap: "4px", }, }, }, { id: "Rail", name: "Rail", acceptsChildren: false, props: [], defaultStyles: { "--bp-sm": { ":hover::after": { "background-color": "var(--theme-border-default)", }, "": { display: "none", }, }, "--bp-all": { "::after": { content: '""', position: "absolute", top: "0", bottom: "0", left: "50%", width: "2px", }, "": { display: "flex", position: "absolute", top: "0", bottom: "0", "z-index": "20", width: "16px", transform: "translateX(-50%)", transition: "transform 200ms linear", }, '[data-side="left"] &': { right: "-16px", cursor: "w-resize", }, '[data-side="right"] &': { left: "0", cursor: "e-resize", }, '[data-collapsible="offcanvas"] &': { transform: "translateX(0)", }, '[data-collapsible="offcanvas"] &::after': { left: "100%", }, '[data-collapsible="offcanvas"] &:hover': { "background-color": "var(--theme-bg-subtle)", }, '[data-collapsible="offcanvas"][data-size="left"] &': { right: "-0.5rem", }, '[data-collapsible="offcanvas"][data-size="right"] &': { left: "-0.5rem", }, }, }, }, ], props: [ { label: "Side", name: "side", type: { kind: "select" }, options: [ { label: "Left", value: "left" }, { label: "Right", value: "right" }, ], default: "left", isDefault: true, placeholder: "", help: "Position of the sidebar", }, { label: "Collapsible", name: "collapsible", type: { kind: "select" }, options: [ { label: "Offcanvas", value: "offcanvas" }, { label: "Icon", value: "icon" }, { label: "None", value: "none" }, ], default: "offcanvas", isDefault: true, placeholder: "", help: "Collapsible behavior of the sidebar", }, { label: "Variant", name: "variant", type: { kind: "select" }, options: [ { label: "Sidebar (default)", value: "sidebar" }, { label: "Floating", value: "floating" }, { label: "Inset", value: "inset" }, ], default: "sidebar", isDefault: true, placeholder: "", help: "The variant of the sidebar", }, ], defaultStyles: { "--bp-all": { "": { display: "flex", "flex-direction": "column", "background-color": "var(--theme-bg-subtle)", color: "var(--theme-fg-default)", }, '[data-collapsible="none"]': { display: "flex", height: "100%", width: "var(--sidebar-width)", "flex-direction": "column", "background-color": "var(--theme-bg-subtle)", color: "var(--theme-fg-default)", }, '[data-mobile="true"]': { width: "var(--sidebar-width)", "background-color": "var(--theme-bg-subtle)", color: "var(--theme-fg-default)", "padding-top": "0px", "padding-right": "0px", "padding-left": "0px", "padding-bottom": "0px", }, '[data-mobile="true"] > button': { display: "none", }, ' [data-mobile="false"]': { position: "fixed", top: "0", bottom: "0", width: "var(--sidebar-width)", height: "100svh", transition: "left 200ms linear, right 200ms linear, width 200ms linear", }, '[data-side="left"]& [data-mobile="false"]': { left: "0", }, '[data-side="left"][data-collapsible="offcanvas"]& [data-mobile="false"]': { left: "calc(-1 * var(--sidebar-width))", }, '[data-side="right"]& [data-mobile="false"]': { right: "0", }, '[data-side="right"][data-collapsible="offcanvas"]& [data-mobile="false"]': { right: "calc(-1 * var(--sidebar-width))", }, '[data-variant="floating"]& [data-mobile="false"]': { "padding-top": "8px", "padding-right": "8px", "padding-left": "8px", "padding-bottom": "8px", }, '[data-variant="floating"][data-collapsible="icon"]& [data-mobile="false"]': { width: "calc(var(--sidebar-width-icon) + 1rem + 2px)", }, '[data-variant="inset"][data-collapsible="icon"]& [data-mobile="false"]': { width: "calc(var(--sidebar-width-icon) + 1rem + 2px)", }, '[data-variant="sidebar"][data-collapsible="icon"]& [data-mobile="false"]': { width: "var(--sidebar-width-icon)", }, '[data-variant="sidebar"][data-side="left"]& [data-mobile="false"]': { "border-right-width": "1px", }, '[data-variant="sidebar"][data-side="right"]& [data-mobile="false"]': { "border-left-width": "1px", }, }, "--bp-md": { "": { display: "none", }, }, }, }, { id: "Inset", name: "Inset", acceptsChildren: true, props: [], defaultStyles: { "--bp-md": { '[data-variant="inset"][data-state="collapsed"] ~ &': { "margin-left": "8px", }, }, "--bp-all": { '[data-variant="inset"] ~ &': { "margin-left": "0px", "margin-right": "8px", "margin-top": "8px", "margin-bottom": "8px", "background-color": "var(--theme-bg-default)", "border-radius": "var(--theme-radii-xl)", "box-shadow": "var(--theme-shadows-base)", "min-height": "calc(100svh - 1rem)", }, "": { position: "relative", display: "flex", "flex-direction": "column", "min-height": "100svh", "flex-basis": "0%", "flex-grow": "1", "flex-shrink": "1", }, }, }, }, { id: "Trigger", name: "Trigger", acceptsChildren: true, props: [], defaultStyles: { "": { width: "28px", height: "28px", }, }, }, ], props: [ { label: "Initially Open", name: "defaultOpen", type: { kind: "boolean" }, default: true, placeholder: "", help: "Whether the sidebar should be open by default", }, ], events: [], defaultStyles: { ":has(> [data-variant='inset'])": { "background-color": "var(--theme-bg-subtle)", }, "": { display: "flex", "flex-direction": "row", "min-height": "100svh", width: "100%", }, }, sources: [], actions: [], defaultChildren: [ { kind: "Sidebar$Brevity.Sidebar", props: { side: "left", collapsible: "offcanvas", variant: "sidebar", }, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Header", props: {}, styleProps: {}, children: [], }, { kind: "Sidebar$Brevity.Sidebar.Content", props: {}, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Group", props: {}, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Group.GroupLabel", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Group Label", }, styleProps: { size: "inherit", }, children: [], }, ], }, { kind: "Sidebar$Brevity.Sidebar.Group.GroupAction", props: {}, styleProps: {}, children: [ { kind: "Icon$Brevity", props: { children: { __type: "icon", icon: "more_horiz", pack: "materialsymbolsoutlined", }, }, styleProps: {}, children: [], }, ], }, { kind: "Sidebar$Brevity.Sidebar.Group.GroupContent", props: {}, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Menu", props: {}, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem", props: {}, styleProps: {}, children: [ { kind: "Sidebar$Brevity.Sidebar.Menu.MenuItem.MenuButton", props: { tooltip: "", }, styleProps: {}, children: [ { kind: "Icon$Brevity", props: { children: { __type: "icon", icon: "draft", pack: "materialsymbolsoutlined", }, }, styleProps: {}, children: [], }, { kind: "Text$Brevity", props: { value: "Menu Item", }, styleProps: { size: "inherit", }, children: [], }, ], }, ], }, ], }, ], }, ], }, ], }, { kind: "Sidebar$Brevity.Sidebar.Footer", props: {}, styleProps: {}, children: [], }, { kind: "Sidebar$Brevity.Sidebar.Rail", props: {}, styleProps: {}, children: [], }, ], }, { kind: "Sidebar$Brevity.Inset", props: {}, styleProps: {}, children: [ { kind: "Text$Brevity", props: { value: "Main Content Area", }, styleProps: { size: "inherit", }, children: [], }, ], }, ] satisfies DefaultChild[], };