livemark 0.23.0 → 0.24.0

package/source/components/SidebarArticles.tsx

@@ -1,11 +1,7 @@
 import { config } from "livemark:virtual"
 import { Link, useLocation } from "@tanstack/react-router"
 import { ChevronRight } from "lucide-react"
-import {
-  articleTree,
-  currentSection,
-  sectionArticleTrees,
-} from "../content/article.ts"
+import { articleTree, currentSection, sectionArticleTrees } from "../content/article.ts"
 import {
   Collapsible,
   CollapsibleContent,
@@ -61,11 +57,7 @@ function isActive(articlePathname: string, currentPath: string) {
   return articlePathname === normalized
 }
 
-function NavNode(props: {
-  node: ArticleNode
-  currentPath: string
-  depth?: number
-}) {
+function NavNode(props: { node: ArticleNode; currentPath: string; depth?: number }) {
   const { node, currentPath, depth = 0 } = props
   const Icon = resolveArticleIcon(node.icon)
   const active = isActive(node.path, currentPath)
@@ -79,11 +71,7 @@ function NavNode(props: {
   if (node.children.length === 0) {
     return (
       <Item>
-        <Button
-          isActive={active}
-          className={active ? "" : "opacity-75"}
-          render={link}
-        >
+        <Button isActive={active} className={active ? "" : "opacity-75"} render={link}>
           {!isSub && Icon && <Icon className="size-4" />}
           {label}
         </Button>
@@ -94,11 +82,7 @@ function NavNode(props: {
   return (
     <Item>
       <Collapsible defaultOpen className="group/collapsible">
-        <Button
-          isActive={active}
-          className={active ? "" : "opacity-75"}
-          render={link}
-        >
+        <Button isActive={active} className={active ? "" : "opacity-75"} render={link}>
           {!isSub && Icon && <Icon className="size-4" />}
           {label}
         </Button>

package/source/components/SidebarLinks.tsx

@@ -19,9 +19,7 @@ export function SidebarLinks() {
   const pathname = useLocation({ select: l => l.pathname })
   const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const links =
-    config.links?.filter(
-      link => !link.prefix || link.prefix === section?.prefix,
-    ) ?? []
+    config.links?.filter(link => !link.prefix || link.prefix === section?.prefix) ?? []
 
   if (!links.length) return null
   const hasDesktopItems = links.some(l => l.position === "sidebar")
@@ -44,9 +42,7 @@ export function SidebarLinks() {
                   className="text-muted-foreground"
                   render={<a href={prefixUrl(link.url, config.base)} />}
                 >
-                  {link.icon && (
-                    <DynamicIcon name={link.icon} className="size-4" />
-                  )}
+                  {link.icon && <DynamicIcon name={link.icon} className="size-4" />}
                   <span>{link.title}</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>

package/source/components/TagIndex.tsx

@@ -30,9 +30,7 @@ export function TagIndex(props: { sectionPrefix: string; tag: string }) {
       const parts = [`## ${post.title}`]
       if (post.date) parts.push(formatDate(post.date))
       if (post.author) {
-        parts.push(
-          Array.isArray(post.author) ? post.author.join(", ") : post.author,
-        )
+        parts.push(Array.isArray(post.author) ? post.author.join(", ") : post.author)
       }
       if (post.description) parts.push("", post.description)
       return parts.join("\n")
@@ -76,16 +74,12 @@ export function TagIndex(props: { sectionPrefix: string; tag: string }) {
                   {post.date && <span>{formatDate(post.date)}</span>}
                   {post.author && (
                     <span>
-                      {Array.isArray(post.author)
-                        ? post.author.join(", ")
-                        : post.author}
+                      {Array.isArray(post.author) ? post.author.join(", ") : post.author}
                     </span>
                   )}
                 </p>
                 {post.description && (
-                  <p className="text-muted-foreground mt-2">
-                    {post.description}
-                  </p>
+                  <p className="text-muted-foreground mt-2">{post.description}</p>
                 )}
               </article>
             ))}

package/source/components/Toc.tsx

@@ -63,10 +63,7 @@ export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
   const title = active?.title ?? props.items[0]?.title ?? "Contents"
 
   return (
-    <div
-      ref={wrapperRef}
-      className="xl:hidden sticky top-16 z-20 border-b bg-background"
-    >
+    <div ref={wrapperRef} className="xl:hidden sticky top-16 z-20 border-b bg-background">
       <button
         type="button"
         onClick={() => setOpen(v => !v)}
@@ -91,9 +88,7 @@ export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
                     <li key={item.url}>
                       <a
                         href={item.url}
-                        data-active={
-                          activeId === item.url.slice(1) || undefined
-                        }
+                        data-active={activeId === item.url.slice(1) || undefined}
                         onClick={() => setOpen(false)}
                         className={`-ms-px block border-l border-transparent py-1.5 text-muted-foreground transition-colors hover:text-foreground data-[active]:border-primary data-[active]:font-medium data-[active]:text-primary ${item.depth <= 2 ? "ps-3" : item.depth === 3 ? "ps-6" : "ps-8"}`}
                       >

package/source/content/article.ts

@@ -54,8 +54,7 @@ if (routedSections.length) {
     const sorted =
       section?.type === "blog" || section?.type === "changelog"
         ? [...bucket].sort(
-            (a, b) =>
-              new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
+            (a, b) => new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
           )
         : bucket
     const tree = buildArticleTree(sorted)

package/source/content-collections.ts

@@ -53,15 +53,12 @@ import { extractToc } from "./helpers/toc.ts"
 
 const config = await loadConfig()
 
-const changelogSections =
-  config.sections?.filter(s => s.type === "changelog") ?? []
+const changelogSections = config.sections?.filter(s => s.type === "changelog") ?? []
 for (const section of changelogSections) {
   await buildChangelog(section, config)
 }
 
-const configInclude = Array.isArray(config.include)
-  ? config.include
-  : [config.include]
+const configInclude = Array.isArray(config.include) ? config.include : [config.include]
 const include = changelogSections.length
   ? [...configInclude, cacheIncludeGlob(config)]
   : configInclude

package/source/elements/alert-dialog.tsx

@@ -9,15 +9,11 @@ function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
 }
 
 function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
 }
 
 function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
 }
 
 function AlertDialogOverlay({
@@ -59,10 +55,7 @@ function AlertDialogContent({
   )
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-header"
@@ -75,10 +68,7 @@ function AlertDialogHeader({
   )
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
@@ -91,10 +81,7 @@ function AlertDialogFooter({
   )
 }
 
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-media"
@@ -139,17 +126,8 @@ function AlertDialogDescription({
   )
 }
 
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />
 }
 
 function AlertDialogCancel({

package/source/elements/alert.tsx

@@ -45,10 +45,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"

package/source/elements/avatar.tsx

@@ -27,19 +27,13 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn(
-        "aspect-square size-full rounded-full object-cover",
-        className,
-      )}
+      className={cn("aspect-square size-full rounded-full object-cover", className)}
       {...props}
     />
   )
 }
 
-function AvatarFallback({
-  className,
-  ...props
-}: AvatarPrimitive.Fallback.Props) {
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
@@ -81,10 +75,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="avatar-group-count"
@@ -97,11 +88,4 @@ function AvatarGroupCount({
   )
 }
 
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge }

package/source/elements/badge.tsx

@@ -9,14 +9,12 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
           "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
     },

package/source/elements/breadcrumb.tsx

@@ -37,11 +37,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
   )
 }
 
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"a">) {
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
   return useRender({
     defaultTagName: "a",
     props: mergeProps<"a">(
@@ -88,19 +84,13 @@ function BreadcrumbSeparator({
   )
 }
 
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      className={cn(
-        "size-5 [&>svg]:size-4 flex items-center justify-center",
-        className,
-      )}
+      className={cn("size-5 [&>svg]:size-4 flex items-center justify-center", className)}
       {...props}
     >
       <MoreHorizontalIcon />

package/source/elements/button-group.tsx

@@ -79,9 +79,4 @@ function ButtonGroupSeparator({
   )
 }
 
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }

package/source/elements/calendar.tsx

@@ -5,11 +5,7 @@ import {
   type DayButton,
   type Locale,
 } from "react-day-picker"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 import { cn } from "../utils/style.ts"
 import { Button, buttonVariants } from "./button.tsx"
@@ -47,10 +43,7 @@ function Calendar({
       }}
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months,
-        ),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
@@ -78,10 +71,7 @@ function Calendar({
           "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root,
         ),
-        dropdown: cn(
-          "absolute inset-0 bg-popover opacity-0",
-          defaultClassNames.dropdown,
-        ),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
           "font-medium select-none",
           captionLayout === "label"
@@ -128,10 +118,7 @@ function Calendar({
           "text-muted-foreground aria-selected:text-muted-foreground",
           defaultClassNames.outside,
         ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled,
-        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
@@ -165,13 +152,9 @@ function Calendar({
             )
           }
 
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          return <ChevronDownIcon className={cn("size-4", className)} {...props} />
         },
-        DayButton: ({ ...props }) => (
-          <CalendarDayButton locale={locale} {...props} />
-        ),
+        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>

package/source/elements/carousel.tsx

@@ -1,7 +1,5 @@
 import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 import { cn } from "../utils/style.ts"
@@ -108,8 +106,7 @@ function Carousel({
         carouselRef,
         api: api,
         opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -134,11 +131,7 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
       <div
         className={cn(
           "flex",

package/source/elements/chart.tsx

@@ -46,9 +46,7 @@ function ChartContainer({
   ...props
 }: React.ComponentProps<"div"> & {
   config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
   initialDimension?: {
     width: number
     height: number
@@ -69,9 +67,7 @@ function ChartContainer({
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer
-          initialDimension={initialDimension}
-        >
+        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>
           {children}
         </RechartsPrimitive.ResponsiveContainer>
       </div>
@@ -99,8 +95,7 @@ ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color
     return color ? `  --color-${key}: ${color};` : null
   })
   .join("\n")}
@@ -137,10 +132,7 @@ function ChartTooltipContent({
     nameKey?: string
     labelKey?: string
   } & Omit<
-    RechartsPrimitive.DefaultTooltipContentProps<
-      TooltipValueType,
-      TooltipNameType
-    >,
+    RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>,
     "accessibilityLayer"
   >) {
   const { config } = useChart()
@@ -171,15 +163,7 @@ function ChartTooltipContent({
     }
 
     return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
 
   if (!active || !payload?.length) {
     return null
@@ -326,11 +310,7 @@ function ChartLegendContent({
   )
 }
 
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string,
-) {
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
   if (typeof payload !== "object" || payload === null) {
     return undefined
   }
@@ -344,19 +324,14 @@ function getPayloadConfigFromPayload(
 
   let configLabelKey: string = key
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
     configLabelKey = payload[key as keyof typeof payload] as string
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
   }
 
   return configLabelKey in config ? config[configLabelKey] : config[key]

package/source/elements/collapsible.tsx

@@ -5,15 +5,11 @@ function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
 }
 
 function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
-  return (
-    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
-  )
+  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
 }
 
 function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
-  return (
-    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
-  )
+  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
 }
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/source/elements/command.tsx

@@ -12,10 +12,7 @@ import {
 } from "./dialog.tsx"
 import { InputGroup, InputGroupAddon } from "./input-group.tsx"
 
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
@@ -53,10 +50,7 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn(
-          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
-          className,
-        )}
+        className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
         showCloseButton={showCloseButton}
       >
         <Command shouldFilter={shouldFilter} loop={loop}>
@@ -181,10 +175,7 @@ function CommandItem({
   )
 }
 
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"

package/source/elements/context-menu.tsx

@@ -9,15 +9,10 @@ function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
 }
 
 function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
 }
 
-function ContextMenuTrigger({
-  className,
-  ...props
-}: ContextMenuPrimitive.Trigger.Props) {
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
   return (
     <ContextMenuPrimitive.Trigger
       data-slot="context-menu-trigger"
@@ -62,9 +57,7 @@ function ContextMenuContent({
 }
 
 function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
 }
 
 function ContextMenuLabel({
@@ -111,9 +104,7 @@ function ContextMenuItem({
 }
 
 function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
-  return (
-    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
-  )
+  return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
 }
 
 function ContextMenuSubTrigger({
@@ -183,14 +174,9 @@ function ContextMenuCheckboxItem({
   )
 }
 
-function ContextMenuRadioGroup({
-  ...props
-}: ContextMenuPrimitive.RadioGroup.Props) {
+function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {
   return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
+    <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
   )
 }
 
@@ -235,10 +221,7 @@ function ContextMenuSeparator({
   )
 }
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="context-menu-shortcut"