zudoku 0.0.0-ee328ec → 0.0.0-efc60ba6

package/src/lib/components/Framed.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import type { PropsWithChildren } from "react";
+import { cn } from "../util/cn.js";
+
+const frameVariants = cva("", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    },
+    align: {
+      center: "mx-auto",
+      start: "me-auto",
+      end: "ms-auto",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    align: "center",
+  },
+});
+
+export const Framed = ({
+  caption,
+  className,
+  size = "xl",
+  align = "center",
+  children,
+}: PropsWithChildren<{
+  caption?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  align?: "center" | "start" | "end";
+}>) => (
+  <figure className={cn(frameVariants({ size, align }), className)}>
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
+      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
+        {children}
+      </div>
+    </div>
+    {caption && (
+      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);

package/src/lib/components/Header.tsx

@@ -19,13 +19,15 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/DropdownMenu.js";
+import { cn } from "../util/cn.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { Banner } from "./Banner.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { MobileTopNavigation } from "./MobileTopNavigation.js";
+import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
 import { TopNavigation } from "./TopNavigation.js";
 
@@ -58,56 +60,57 @@ export const Header = memo(function HeaderInner() {
   const auth = useAuth();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const context = useZudoku();
-  const { page, plugins } = context;
+  const { site, plugins, options } = context;
 
   const accountItems = plugins
     .filter((p) => isProfileMenuPlugin(p))
     .flatMap((p) => p.getProfileMenuItems(context))
     .sort((i) => i.weight ?? 0);
 
+  const logoLightSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.light)
+      ? site.logo.src.light
+      : joinUrl(options.basePath, site.logo.src.light)
+    : undefined;
+  const logoDarkSrc = site?.logo
+    ? /https?:\/\//.test(site.logo.src.dark)
+      ? site.logo.src.dark
+      : joinUrl(options.basePath, site.logo.src.dark)
+    : undefined;
+
+  const borderBottom = "inset-shadow-[0_-1px_0_0_var(--border)]";
+
   return (
-    <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
+    <header
+      className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full"
+      data-pagefind-ignore="all"
+    >
       <Banner />
-      <div className="border-b">
-        <div className="max-w-screen-2xl mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height] border-transparent">
+      <div className={cn(borderBottom, "relative")}>
+        <PageProgress />
+        <div className="max-w-screen-2xl mx-auto flex items-center justify-between h-(--top-header-height) px-4 lg:px-8 border-transparent">
           <div className="flex">
-            <Link to="/">
+            <Link to={site?.logo?.href ?? "/"}>
               <div className="flex items-center gap-3.5">
-                {page?.logo && (
+                {site?.logo && (
                   <>
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.light)
-                          ? page.logo.src.light
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.light,
-                            )
-                      }
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
-                      className="h-10 dark:hidden"
+                      src={logoLightSrc}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
+                      className="max-h-(--top-header-height) dark:hidden"
                       loading="lazy"
                     />
                     <img
-                      src={
-                        /https?:\/\//.test(page.logo.src.dark)
-                          ? page.logo.src.dark
-                          : joinUrl(
-                              import.meta.env.BASE_URL,
-                              page.logo.src.dark,
-                            )
-                      }
-                      alt={page.logo.alt ?? page.pageTitle}
-                      style={{ width: page.logo.width }}
-                      className="h-10 hidden dark:block"
+                      src={logoDarkSrc}
+                      alt={site.logo.alt ?? site.title}
+                      style={{ width: site.logo.width }}
+                      className="max-h-(--top-header-height) hidden dark:block"
                       loading="lazy"
                     />
                   </>
                 )}
-                <span className="font-semibold text-2xl">
-                  {page?.pageTitle}
-                </span>
+                <span className="font-semibold text-2xl">{site?.title}</span>
               </div>
             </Link>
           </div>
@@ -119,10 +122,10 @@ export const Header = memo(function HeaderInner() {
           <div className="flex items-center gap-8">
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
-              <Slotlet name="head-navigation-start" />
+              <Slot.Target name="head-navigation-start" />
               {isAuthEnabled && (
                 <ClientOnly
-                  fallback={<Skeleton className="rounded h-5 w-24 mr-4" />}
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
                 >
                   {!isAuthenticated ? (
                     <Button variant="ghost" onClick={() => auth.login()}>
@@ -133,7 +136,7 @@ export const Header = memo(function HeaderInner() {
                       <DropdownMenu modal={false}>
                         <DropdownMenuTrigger asChild>
                           <Button variant="ghost">
-                            {profile?.name ? `${profile.name}` : "My Account"}
+                            {profile?.name ?? "My Account"}
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent className="w-56">
@@ -175,17 +178,17 @@ export const Header = memo(function HeaderInner() {
                   )}
                 </ClientOnly>
               )}
-              <Slotlet name="head-navigation-end" />
+              <Slot.Target name="head-navigation-end" />
               <ThemeSwitch />
             </div>
           </div>
         </div>
       </div>
-      <div className="border-b hidden lg:block">
-        <div className="max-w-screen-2xl mx-auto border-transparent">
-          <Slotlet name="top-navigation-before" />
+      <div className={cn("hidden lg:block", borderBottom)}>
+        <div className="max-w-screen-2xl mx-auto border-transparent relative">
+          <Slot.Target name="top-navigation-before" />
           <TopNavigation />
-          <Slotlet name="top-navigation-after" />
+          <Slot.Target name="top-navigation-after" />
         </div>
       </div>
     </header>

package/src/lib/components/Heading.tsx

@@ -2,6 +2,8 @@ import type { HTMLAttributes, ReactNode } from "react";
 import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 import { cva, type VariantProps } from "class-variance-authority";
+import { LinkIcon } from "lucide-react";
+import { cn } from "../util/cn.js";
 
 const heading = cva("group relative", {
   variants: {
@@ -44,7 +46,11 @@ export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
     className?: string;
     id?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    registerSidebarAnchor?: boolean;
+    /**
+     * This is to set labels as active when the heading is in the viewport.
+     * It's used in the navigation/toc to highlight the current section.
+     */
+    registerNavigationAnchor?: boolean;
   };
 
 export const Heading = ({
@@ -52,28 +58,30 @@ export const Heading = ({
   children,
   id,
   className,
-  registerSidebarAnchor,
+  registerNavigationAnchor,
 }: HeadingProps) => {
   const Component = getComponent(level ?? 1);
   const { ref } = useRegisterAnchorElement();
 
   return (
     <Component
-      className={heading({ className, level })}
-      ref={registerSidebarAnchor ? ref : undefined}
+      className={heading({
+        className: cn("flex items-center gap-[0.33em]", className),
+        level,
+      })}
+      ref={registerNavigationAnchor ? ref : undefined}
       id={id}
     >
+      {children}
       {id && (
         <a
           href={`#${id}`}
-          className="before:content-['#'] no-underline absolute text-primary -start-[0.8em] pe-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
+          className="rounded text-[0.8em] text-muted-foreground p-0.5 -m-0.5 opacity-0 group-hover:opacity-50 hover:text-primary hover:!opacity-100 transition-opacity duration-200"
           aria-label={`Link to ${id}`}
         >
-          {/* Zero width space */}
-          &#8203;
+          <LinkIcon className="size-[0.75em] min-w-4 min-h-4" />
         </a>
       )}
-      {children}
     </Component>
   );
 };

package/src/lib/components/InlineCode.tsx

@@ -16,7 +16,7 @@ export const InlineCode = ({
   <SelectOnClick asChild enabled={selectOnClick} onClick={onClick}>
     <code
       className={cn(
-        "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
+        "font-mono border p-1 py-0.5 rounded-sm bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
         className,
       )}
     >

package/src/lib/components/Layout.tsx

@@ -9,7 +9,7 @@ import { useZudoku } from "./context/ZudokuContext.js";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
@@ -48,9 +48,9 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         )}
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
       </Helmet>
-      <Slotlet name="layout-before-head" />
+      <Slot.Target name="layout-before-head" />
       <Header />
-      <Slotlet name="layout-after-head" />
+      <Slot.Target name="layout-after-head" />
 
       <div
         className={cn(

package/src/lib/components/Main.tsx

@@ -4,30 +4,30 @@ import { useNavigation } from "react-router";
 import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
 import { cn } from "../util/cn.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { Sidebar } from "./navigation/Sidebar.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Navigation } from "./navigation/Navigation.js";
+import { Slot } from "./Slot.js";
 
 export const Main = ({ children }: PropsWithChildren) => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
-  const { sidebar } = useCurrentNavigation();
-  const hasSidebar = sidebar.length > 0;
+  const { navigation } = useCurrentNavigation();
+  const hasNavigation = navigation.length > 0;
   const isNavigating = useNavigation().state === "loading";
   const { options } = useZudoku();
 
   return (
     <Drawer
-      direction={options.page?.dir === "rtl" ? "right" : "left"}
+      direction={options.site?.dir === "rtl" ? "right" : "left"}
       open={isDrawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
-      {hasSidebar && (
-        <Sidebar
+      {hasNavigation && (
+        <Navigation
           onRequestClose={() => setDrawerOpen(false)}
-          sidebar={sidebar}
+          navigation={navigation}
         />
       )}
-      {hasSidebar && (
-        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 start-0 end-0 border-b">
+      {hasNavigation && (
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
             <span className="text-sm">Menu</span>
@@ -38,13 +38,13 @@ export const Main = ({ children }: PropsWithChildren) => {
         data-pagefind-body
         className={cn(
           "px-4 lg:pe-8 lg:px-8",
-          !hasSidebar && "col-span-full",
+          !hasNavigation && "col-span-full",
           isNavigating && "animate-pulse",
         )}
       >
-        <Slotlet name="zudoku-before-content" />
+        <Slot.Target name="content-before" />
         {children}
-        <Slotlet name="zudoku-after-content" />
+        <Slot.Target name="content-after" />
       </main>
     </Drawer>
   );

package/src/lib/components/Markdown.tsx

@@ -1,37 +1,50 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { visit } from "unist-util-visit";
+import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 import { MdxComponents } from "../util/MdxComponents.js";
-import { ReactMarkdown } from "./ReactMarkdown.js";
-
-// same as in packages/dev-portal/framework/vite.ts
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const rehypeCodeBlockPlugin = () => (tree: any) => {
-  visit(tree, "element", (node, _index, parent) => {
-    if (node.tagName === "code") {
-      node.properties.inline = String(parent?.tagName !== "pre");
-    }
-  });
-};
+import { useZudoku } from "./context/ZudokuContext.js";
+import { Typography } from "./Typography.js";
 
 const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
-
-// other styles are defined in main.css .prose
-export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
 export const Markdown = memo(
-  ({ content, className }: { content: string; className?: string }) => (
-    <ReactMarkdown
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={MdxComponents}
-      className={className}
-    >
-      {content}
-    </ReactMarkdown>
-  ),
+  ({
+    content,
+    className,
+    components,
+  }: {
+    content: string;
+    className?: string;
+    components?: Components;
+  }) => {
+    const { syntaxHighlighting } = useZudoku().options;
+    const rehypePlugins = useMemo(
+      () => [
+        rehypeRaw,
+        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+      ],
+      [syntaxHighlighting?.themes],
+    );
+
+    const mdComponents = useMemo(
+      () => ({ ...MdxComponents, ...components }),
+      [components],
+    );
+
+    return (
+      <Typography className={className}>
+        <ReactMarkdown
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={mdComponents}
+        >
+          {content}
+        </ReactMarkdown>
+      </Typography>
+    );
+  },
 );
 
 Markdown.displayName = "Markdown";

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,6 +1,7 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { MenuIcon } from "lucide-react";
-import { useState } from "react";
+import { Fragment, useState } from "react";
+import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
   Drawer,
@@ -8,20 +9,30 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "../ui/Drawer.js";
+import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
+import { isHiddenItem } from "./navigation/utils.js";
+import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
+import { Slot } from "./Slot.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
+import { TopNavItem, TopNavLink } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation, options } = useZudoku();
-  const { isAuthenticated } = useAuth();
+  const context = useZudoku();
+  const authState = useAuth();
+
+  const { navigation, options, getProfileMenuItems } = context;
+  const { isAuthenticated, profile, isAuthEnabled } = authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const accountItems = getProfileMenuItems();
+  const filteredItems = navigation.filter(isHiddenItem(authState, context));
+
   return (
     <Drawer
-      direction={options.page?.dir === "rtl" ? "left" : "right"}
+      direction={options.site?.dir === "rtl" ? "left" : "right"}
       open={drawerOpen}
       onOpenChange={(open) => setDrawerOpen(open)}
     >
@@ -42,22 +53,69 @@ export const MobileTopNavigation = () => {
             </VisuallyHidden>
             <Search className="flex p-4" />
             <ul className="flex flex-col items-center gap-4 p-4">
+              <li className="empty:hidden">
+                <Slot.Target name="top-navigation-side" />
+              </li>
+
+              {isAuthEnabled && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
+                >
+                  {!isAuthenticated ? (
+                    <li>
+                      <TopNavLink
+                        to="/signin"
+                        onClick={() => setDrawerOpen(false)}
+                      >
+                        Login
+                      </TopNavLink>
+                    </li>
+                  ) : (
+                    Object.values(getProfileMenuItems()).length > 0 && (
+                      <Fragment>
+                        <li>
+                          {profile?.name ? `${profile.name}` : "My Account"}
+                          {profile?.email && (
+                            <div className="font-normal text-muted-foreground">
+                              {profile.email}
+                            </div>
+                          )}
+                        </li>
+                      </Fragment>
+                    )
+                  )}
+                </ClientOnly>
+              )}
+              {filteredItems.map((item) => (
+                <li key={item.label}>
+                  <button type="button" onClick={() => setDrawerOpen(false)}>
+                    <TopNavItem {...item} />
+                  </button>
+                </li>
+              ))}
+              {isAuthEnabled && isAuthenticated && accountItems.length > 0 && (
+                <ClientOnly
+                  fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}
+                >
+                  {accountItems.map((i) => (
+                    <li key={i.label}>
+                      <TopNavLink
+                        to={i.path ?? ""}
+                        onClick={() => setDrawerOpen(false)}
+                      >
+                        {i.label}
+                      </TopNavLink>
+                    </li>
+                  ))}
+                </ClientOnly>
+              )}
               <li>
                 <ThemeSwitch />
               </li>
-              {topNavigation
-                .filter(isHiddenItem(isAuthenticated))
-                .map((item) => (
-                  <li key={item.label}>
-                    <button type="button" onClick={() => setDrawerOpen(false)}>
-                      <TopNavItem {...item} />
-                    </button>
-                  </li>
-                ))}
             </ul>
           </div>
-          {options.page?.showPoweredBy !== false && (
-            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+          {options.site?.showPoweredBy !== false && (
+            <PoweredByZudoku className="grow-0 justify-center gap-1" />
           )}
         </div>
       </DrawerContent>

package/src/lib/components/NotFoundPage.tsx

@@ -3,13 +3,13 @@ import { Link, useParams } from "react-router";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { DeveloperHint } from "./DeveloperHint.js";
 import { Heading } from "./Heading.js";
-import { ProseClasses } from "./Markdown.js";
+import { Typography } from "./Typography.js";
 
 export const NotFoundPage = () => {
   const params = useParams();
 
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <Typography className="h-full pt-(--padding-content-top)">
       <CategoryHeading>404</CategoryHeading>
       <Heading level={1} className="flex gap-3.5 items-center">
         Page not found
@@ -18,9 +18,10 @@ export const NotFoundPage = () => {
       <DeveloperHint>
         Start by adding a file at{" "}
         <code>
-          {"{PROJECT_ROOT}"}/{params["*"]}.mdx
+          {"{DOCUMENT_ROOT}"}/{params["*"]}.mdx
         </code>{" "}
-        and add some content to make this error go away.
+        and add some content to make this error go away. By default{" "}
+        <code>DOCUMENT_ROOT</code> is the `pages` directory.
       </DeveloperHint>
       <p>
         It seems that the page you are looking for does not exist or may have
@@ -28,6 +29,6 @@ export const NotFoundPage = () => {
         menu to find the correct page.
       </p>
       <Link to="/">Go back home</Link>
-    </div>
+    </Typography>
   );
 };

package/src/lib/components/PageProgress.tsx

@@ -0,0 +1,28 @@
+import { useNProgress } from "@tanem/react-nprogress";
+import { useEffect, useState } from "react";
+import { useNavigation } from "react-router";
+
+export const PageProgress = () => {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  // delay the animation to avoid flickering
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isNavigating), 200);
+
+    return () => clearTimeout(timer);
+  }, [isNavigating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
+  return (
+    <div
+      className="absolute w-0 left-0 right-0 bottom-[-1px] h-[2px] bg-primary transition-all duration-300 ease-in-out"
+      style={{
+        opacity: isFinished ? 0 : 1,
+        width: isFinished ? 0 : `${progress * 100}%`,
+      }}
+    />
+  );
+};

package/src/lib/components/Pagination.tsx

@@ -22,26 +22,21 @@ export const Pagination = ({
         prev ? "justify-between" : "justify-end",
         className,
       )}
+      data-pagefind-ignore="all"
     >
       {prev && (
         <Button variant="ghost" asChild>
           <Link to={prev.to} relative="path" className={linkClass}>
-            <ArrowLeftIcon
-              className="ltr:group-hover:motion-safe:animate-bounce-x-start rtl:rotate-180"
-              size={12}
-            />
-            <span className="truncate">{prev.label}</span>
+            <ArrowLeftIcon size={14} strokeWidth={2.5} />
+            <span className="text-lg truncate">{prev.label}</span>
           </Link>
         </Button>
       )}
       {next && (
         <Button variant="ghost" asChild>
           <Link to={next.to} relative="path" className={linkClass}>
-            <span className="truncate ">{next.label}</span>
-            <ArrowRightIcon
-              className="ltr:group-hover:motion-safe:animate-bounce-x-end rtl:rotate-180"
-              size={12}
-            />
+            <span className="text-lg truncate">{next.label}</span>
+            <ArrowRightIcon size={14} strokeWidth={2.5} />
           </Link>
         </Button>
       )}

package/src/lib/components/Search.tsx

@@ -43,7 +43,7 @@ export const Search = ({ className }: { className?: string }) => {
         onClick={() => setIsOpen(true)}
         className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-full sm:w-72"
       >
-        <div className="flex items-center gap-2 flex-grow">
+        <div className="flex items-center gap-2 grow">
           <SearchIcon size={14} />
           Search
         </div>