docs: design polish (#8696)

* polish

* finish polish

* change typography

www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx

@@ -6,13 +6,11 @@ import { CheckMini, SquareTwoStack } from "@medusajs/icons"
 export type CodeBlockCopyActionProps = {
   source: string
   inHeader: boolean
-  iconColor: string
 }
 
 export const CodeBlockCopyAction = ({
   source,
   inHeader,
-  iconColor,
 }: CodeBlockCopyActionProps) => {
   const [copied, setCopied] = useState(false)
 
@@ -24,16 +22,27 @@ export const CodeBlockCopyAction = ({
     }
   }, [copied])
 
+  const iconClassName = [
+    "text-medusa-contrast-fg-secondary",
+    "group-hover:text-medusa-contrast-fg-primary",
+    "group-focus:text-medusa-contrast-fg-primary",
+  ]
+
   return (
     <CopyButton
       text={source}
       tooltipClassName="font-base"
-      className={clsx("h-fit", !inHeader && "p-[6px]", inHeader && "p-[4.5px]")}
-      tooltipInnerClassName={clsx(inHeader && "flex")}
+      className={clsx("group")}
+      buttonClassName={clsx(!inHeader && "p-[6px]", inHeader && "p-[4.5px]")}
+      tooltipInnerClassName={clsx(
+        inHeader && "flex",
+        "h-fit rounded-docs_sm",
+        "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
+      )}
       onCopy={() => setCopied(true)}
     >
-      {!copied && <SquareTwoStack className={clsx(iconColor)} />}
-      {copied && <CheckMini className={clsx(iconColor)} />}
+      {!copied && <SquareTwoStack className={clsx(iconClassName)} />}
+      {copied && <CheckMini className={clsx(iconClassName)} />}
     </CopyButton>
   )
 }

www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
 import clsx from "clsx"
-import React, { useMemo } from "react"
-import { CodeBlockStyle, Link, Tooltip } from "@/components"
+import React from "react"
+import { Link, Tooltip } from "@/components"
 import { ExclamationCircle, PlaySolid } from "@medusajs/icons"
-import { useColorMode } from "@/providers"
 import { GITHUB_ISSUES_PREFIX } from "@/constants"
 import { CodeBlockCopyAction } from "./Copy"
 
@@ -16,7 +15,6 @@ export type CodeBlockActionsProps = {
   inInnerCode?: boolean
   isCollapsed: boolean
   canShowApiTesting?: boolean
-  blockStyle: CodeBlockStyle
   onApiTesting: React.Dispatch<React.SetStateAction<boolean>>
   noReport?: boolean
   noCopy?: boolean
@@ -30,23 +28,15 @@ export const CodeBlockActions = ({
   isCollapsed,
   isSingleLine = false,
   canShowApiTesting = false,
-  blockStyle,
   onApiTesting,
   noReport = false,
   noCopy = false,
 }: CodeBlockActionsProps) => {
-  const { colorMode } = useColorMode()
-  const iconColor = useMemo(
-    () =>
-      clsx(
-        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-fg-secondary",
-        ]
-      ),
-    [blockStyle, colorMode]
-  )
+  const iconClassName = [
+    "text-medusa-contrast-fg-secondary",
+    "group-hover:text-medusa-contrast-fg-primary",
+    "group-focus:text-medusa-contrast-fg-primary",
+  ]
 
   return (
     <div
@@ -88,29 +78,35 @@ export const CodeBlockActions = ({
           <Tooltip
             text="Test API"
             tooltipClassName="font-base"
-            className={clsx(
-              "h-fit",
-              !inHeader && "p-[6px]",
-              inHeader && "p-[4.5px]"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
             )}
-            innerClassName={clsx(inHeader && "flex")}
           >
-            <PlaySolid
-              className={clsx("cursor-pointer", iconColor)}
+            <span
+              className={clsx(
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]",
+                "cursor-pointer"
+              )}
               onClick={() => onApiTesting(true)}
-            />
+            >
+              <PlaySolid className={clsx(iconClassName)} />
+            </span>
           </Tooltip>
         )}
         {!noReport && (
           <Tooltip
             text="Report Issue"
             tooltipClassName="font-base"
-            className={clsx(
-              "h-fit",
-              !inHeader && "p-[6px]",
-              inHeader && "p-[4.5px]"
+            className={clsx("group")}
+            innerClassName={clsx(
+              inHeader && "flex",
+              "h-fit rounded-docs_sm",
+              "group-hover:bg-medusa-contrast-bg-base-hover group-focus:bg-medusa-contrast-bg-base-hover"
             )}
-            innerClassName={clsx(inHeader && "flex")}
           >
             <Link
               href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
@@ -120,21 +116,17 @@ export const CodeBlockActions = ({
               className={clsx(
                 "bg-transparent border-none cursor-pointer rounded",
                 "[&:not(:first-child)]:ml-docs_0.5",
-                "inline-flex justify-center items-center invisible xs:visible"
+                "inline-flex justify-center items-center invisible xs:visible",
+                !inHeader && "p-[6px]",
+                inHeader && "p-[4.5px]"
               )}
               rel="noreferrer"
             >
-              <ExclamationCircle className={clsx(iconColor)} />
+              <ExclamationCircle className={clsx(iconClassName)} />
             </Link>
           </Tooltip>
         )}
-        {!noCopy && (
-          <CodeBlockCopyAction
-            source={source}
-            inHeader={inHeader}
-            iconColor={iconColor}
-          />
-        )}
+        {!noCopy && <CodeBlockCopyAction source={source} inHeader={inHeader} />}
       </div>
     </div>
   )

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -262,7 +262,6 @@ export const CodeBlock = ({
       source,
       canShowApiTesting,
       setShowTesting,
-      blockStyle,
       noReport,
       noCopy,
       collapsibleType,

www/packages/docs-ui/src/components/LinkButton/index.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+
+import type { LinkProps as NextLinkProps } from "next/link"
+import Link from "next/link"
+import clsx from "clsx"
+
+type LinkButtonProps = NextLinkProps & {
+  variant?: "base" | "interactive" | "subtle" | "muted"
+  className?: string
+} & React.AllHTMLAttributes<HTMLAnchorElement>
+
+export const LinkButton = ({
+  variant = "base",
+  className,
+  ...linkProps
+}: LinkButtonProps) => {
+  return (
+    <Link
+      {...linkProps}
+      className={clsx(
+        className,
+        "inline-flex justify-center items-center",
+        "gap-docs_0.25 rounded-docs_xs",
+        "text-compact-small-plus disabled:text-medusa-fg-disabled",
+        "focus:shadow-borders-focus no-underline",
+        variant === "base" && [
+          "text-medusa-fg-base hover:text-medusa-fg-subtle",
+          "focus:text-medusa-fg-base",
+        ],
+        variant === "interactive" && [
+          "text-medusa-fg-interactive hover:text-medusa-interactive-hover",
+          "focus:text-medusa-fg-interactive",
+        ],
+        variant === "subtle" && [
+          "text-medusa-fg-subtle hover:text-medusa-fg-base",
+          "focus:text-medusa-fg-subtle",
+        ],
+        variant === "muted" && [
+          "text-medusa-fg-muted hover:text-medusa-fg-subtle",
+          "focus:text-medusa-fg-muted",
+        ]
+      )}
+    />
+  )
+}

www/packages/docs-ui/src/components/MainNav/Breadcrumb/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useMemo } from "react"
-import { CurrentItemsState, useSidebar } from "../../.."
+import { Button, CurrentItemsState, useSidebar } from "../../.."
 import clsx from "clsx"
 import Link from "next/link"
 import { SidebarItemLink } from "types"
@@ -61,22 +61,19 @@ export const MainNavBreadcrumbs = () => {
   return (
     <div
       className={clsx(
-        "flex items-center",
+        "flex items-center gap-docs_0.25",
         "text-medusa-fg-muted text-compact-small"
       )}
     >
       {Array.from(breadcrumbItems).map(([link, title]) => (
         <React.Fragment key={link}>
           <span>/</span>
-          <Link
-            href={link}
-            className={clsx(
-              "hover:text-medusa-fg-base transition-colors",
-              "px-docs_0.5 py-docs_0.25"
-            )}
+          <Button
+            variant="transparent-clear"
+            className="px-docs_0.5 py-docs_0.25"
           >
-            {title}
-          </Link>
+            <Link href={link}>{title}</Link>
+          </Button>
         </React.Fragment>
       ))}
     </div>

www/packages/docs-ui/src/components/MainNav/ColorMode/index.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { useColorMode } from "../../../providers"
-import { Button } from "../../.."
+import { Button, Tooltip } from "../../.."
 import { Moon, Sun } from "@medusajs/icons"
 import clsx from "clsx"
 
@@ -10,13 +10,15 @@ export const MainNavColorMode = () => {
   const { colorMode, toggleColorMode } = useColorMode()
 
   return (
-    <Button
-      variant="transparent-clear"
-      className={clsx("!p-[6.5px] text-medusa-fg-muted")}
-      onClick={toggleColorMode}
-    >
-      {colorMode === "light" && <Sun />}
-      {colorMode === "dark" && <Moon />}
-    </Button>
+    <Tooltip place="bottom" tooltipChildren="Change Theme">
+      <Button
+        variant="transparent-clear"
+        className={clsx("!p-[6.5px] text-medusa-fg-muted")}
+        onClick={toggleColorMode}
+      >
+        {colorMode === "light" && <Sun />}
+        {colorMode === "dark" && <Moon />}
+      </Button>
+    </Tooltip>
   )
 }

www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx

@@ -46,9 +46,9 @@ export const MainNavHelpButton = () => {
     <div className="relative" ref={ref}>
       <Tooltip
         tooltipChildren={
-          <span className="flex gap-[6px]">
+          <span className="flex gap-[6px] items-center">
             <span>Need help?</span>
-            <Kbd>?</Kbd>
+            <Kbd className="w-docs_1 h-docs_1">?</Kbd>
           </span>
         }
         place="bottom"
@@ -56,7 +56,7 @@ export const MainNavHelpButton = () => {
       >
         <Button
           variant="transparent-clear"
-          className="text-medusa-fg-muted"
+          className="text-medusa-fg-muted !px-[6.5px] !py-[6.5px]"
           onClick={() => setShowMenu((prev) => !prev)}
         >
           <QuestionMark />

www/packages/docs-ui/src/components/MainNav/NavigationDropdown/Selected/index.tsx

@@ -9,11 +9,13 @@ import { MainNavigationDropdownIcon } from "../Icon"
 export type MainNavigationDropdownSelectedProps = {
   item: NavigationDropdownItem
   onClick: () => void
+  isActive: boolean
 }
 
 export const MainNavigationDropdownSelected = ({
   item,
   onClick,
+  isActive,
 }: MainNavigationDropdownSelectedProps) => {
   if (item.type === "divider") {
     return <></>
@@ -22,15 +24,22 @@ export const MainNavigationDropdownSelected = ({
   return (
     <div
       className={clsx(
-        "flex justify-between items-center",
-        "cursor-pointer rounded-docs_sm hover:bg-medusa-bg-hover"
+        "flex justify-between items-center gap-docs_0.25",
+        "cursor-pointer rounded-docs_sm group"
       )}
       tabIndex={-1}
       onClick={onClick}
     >
       <MainNavigationDropdownIcon icon={item.icon} />
-      <div className="flex gap-[6px] py-docs_0.25 px-docs_0.5 items-center">
-        <span className="text-medusa-fg-base whitespace-nowrap flex-1">
+      <div
+        className={clsx(
+          "flex gap-[6px] py-docs_0.25 px-docs_0.5",
+          "items-center group-hover:bg-medusa-button-transparent-hover",
+          "rounded-docs_sm",
+          isActive && "bg-medusa-button-transparent-hover"
+        )}
+      >
+        <span className="text-medusa-fg-base whitespace-nowrap flex-1 text-compact-small-plus">
           {item.title}
         </span>
         <TrianglesMini className="text-medusa-fg-muted" />

www/packages/docs-ui/src/components/MainNav/NavigationDropdown/index.tsx

@@ -34,6 +34,7 @@ export const MainNavigationDropdown = () => {
         <MainNavigationDropdownSelected
           item={selectedItem}
           onClick={() => setMenuOpen((prev) => !prev)}
+          isActive={menuOpen}
         />
       )}
       <MainNavigationDropdownMenu

www/packages/docs-ui/src/components/MainNav/index.tsx

@@ -4,9 +4,14 @@ import clsx from "clsx"
 import React from "react"
 import { MainNavigationDropdown } from "./NavigationDropdown"
 import { MainNavBreadcrumbs } from "./Breadcrumb"
-import { Button, SearchModalOpener, useMainNav, useSidebar } from "../.."
+import {
+  Button,
+  LinkButton,
+  SearchModalOpener,
+  useMainNav,
+  useSidebar,
+} from "../.."
 import { MainNavColorMode } from "./ColorMode"
-import Link from "next/link"
 import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
 import { MainNavHelpButton } from "./HelpButton"
@@ -39,7 +44,9 @@ export const MainNav = () => {
       <div className="flex items-center gap-docs_0.75">
         <div className="flex items-center gap-[6px] text-medusa-fg-muted">
           {editDate && <MainNavEditDate date={editDate} />}
-          <Link href={reportIssueLink}>Report Issue</Link>
+          <LinkButton href={reportIssueLink} variant="muted" target="_blank">
+            Report Issue
+          </LinkButton>
         </div>
         <MainNavDivider />
         <div className="flex items-center gap-docs_0.25">

www/packages/docs-ui/src/components/Menu/Action/index.tsx

@@ -10,25 +10,27 @@ export type MenuActionProps = {
 
 export const MenuAction = ({ item }: MenuActionProps) => {
   return (
-    <span
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base cursor-pointer"
-      )}
-      tabIndex={-1}
-      onClick={item.action}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small flex-1">{item.title}</span>
-      {item.shortcut && (
-        <span className="text-medusa-fg-subtle text-compact-small">
-          {item.shortcut}
+    <div className="px-docs_0.25">
+      <span
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base cursor-pointer"
+        )}
+        tabIndex={-1}
+        onClick={item.action}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
         </span>
-      )}
-    </span>
+        <span className="text-compact-small flex-1">{item.title}</span>
+        {item.shortcut && (
+          <span className="text-medusa-fg-subtle text-compact-small">
+            {item.shortcut}
+          </span>
+        )}
+      </span>
+    </div>
   )
 }

www/packages/docs-ui/src/components/Menu/Divider/index.tsx

@@ -3,5 +3,34 @@
 import React from "react"
 
 export const MenuDivider = () => {
-  return <hr className="bg-medusa-border-menu-top mt-[3px] mb-[3px]" />
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 205 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="197"
+        height="8"
+        transform="translate(4)"
+        fill="var(--docs-bg-component)"
+      />
+      <rect
+        x="-4"
+        y="3"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-top)"
+      />
+      <rect
+        x="-4"
+        y="4"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-bot)"
+      />
+    </svg>
+  )
 }

www/packages/docs-ui/src/components/Menu/Item/index.tsx

@@ -11,19 +11,21 @@ export type MenuItemProps = {
 
 export const MenuItem = ({ item }: MenuItemProps) => {
   return (
-    <Link
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base"
-      )}
-      href={item.link}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small">{item.title}</span>
-    </Link>
+    <div className="px-docs_0.25">
+      <Link
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base"
+        )}
+        href={item.link}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
+        </span>
+        <span className="text-compact-small">{item.title}</span>
+      </Link>
+    </div>
   )
 }

www/packages/docs-ui/src/components/Menu/index.tsx

@@ -14,7 +14,7 @@ export const Menu = ({ items, className }: MenuProps) => {
   return (
     <div
       className={clsx(
-        "bg-medusa-bg-component p-docs_0.25 rounded-docs_DEFAULT",
+        "bg-medusa-bg-component py-docs_0.25 rounded-docs_DEFAULT",
         "shadow-elevation-flyout dark:shadow-elevation-flyout-dark",
         className
       )}

www/packages/docs-ui/src/components/Pagination/Card/index.tsx

@@ -21,7 +21,7 @@ export const PaginationCard = ({
   return (
     <div
       className={clsx(
-        "relative flex flex-1 gap-docs_0.75 items-center",
+        "relative flex-1",
         "py-docs_0.5 px-docs_0.75 rounded",
         "bg-medusa-bg-component hover:bg-medusa-bg-component-hover",
         "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
@@ -30,28 +30,30 @@ export const PaginationCard = ({
       )}
     >
       <Link href={link} className="absolute top-0 left-0 w-full h-full" />
-      {type === "previous" && (
-        <TriangleLeftMini className="text-medusa-fg-muted" />
-      )}
-      <div
-        className={clsx(
-          "flex-1",
-          type === "previous" && "text-left",
-          type === "next" && "text-right"
+      <div className={clsx("h-[40px] flex gap-docs_0.75 items-center")}>
+        {type === "previous" && (
+          <TriangleLeftMini className="text-medusa-fg-muted" />
         )}
-      >
-        {parentTitle && (
-          <span className="block text-compact-small text-medusa-fg-subtle">
-            {parentTitle}
+        <div
+          className={clsx(
+            "flex-1",
+            type === "previous" && "text-left",
+            type === "next" && "text-right"
+          )}
+        >
+          {parentTitle && (
+            <span className="block text-compact-small text-medusa-fg-subtle">
+              {parentTitle}
+            </span>
+          )}
+          <span className="block text-compact-small-plus text-medusa-fg-base">
+            {title}
           </span>
+        </div>
+        {type === "next" && (
+          <TriangleRightMini className="text-medusa-fg-muted" />
         )}
-        <span className="block text-compact-small-plus text-medusa-fg-base">
-          {title}
-        </span>
       </div>
-      {type === "next" && (
-        <TriangleRightMini className="text-medusa-fg-muted" />
-      )}
     </div>
   )
 }

www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx

@@ -3,7 +3,7 @@
 import React, { MouseEvent, useMemo } from "react"
 import clsx from "clsx"
 import { useMobile, useSearch } from "@/providers"
-import { Button } from "@/components"
+import { Button, Tooltip } from "@/components"
 import { MagnifyingGlass } from "@medusajs/icons"
 import { useKeyboardShortcut } from "@/hooks"
 
@@ -53,19 +53,21 @@ export const SearchModalOpener = ({
         </Button>
       )}
       {!isMobile && (
-        <Button
-          className={clsx(
-            "relative hover:cursor-pointer group",
-            "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
-            "justify-between items-center text-medusa-fg-muted",
-            className
-          )}
-          variant="transparent-clear"
-          onClick={handleOpen}
-        >
-          <MagnifyingGlass />
-          <span>{isApple ? "⌘" : "Ctrl"}K</span>
-        </Button>
+        <Tooltip place="bottom" tooltipChildren="Ask or search">
+          <Button
+            className={clsx(
+              "relative hover:cursor-pointer group",
+              "flex gap-[6px] !py-docs_0.25 !px-docs_0.5",
+              "justify-between items-center text-medusa-fg-muted",
+              className
+            )}
+            variant="transparent-clear"
+            onClick={handleOpen}
+          >
+            <MagnifyingGlass />
+            <span>{isApple ? "⌘" : "Ctrl"}K</span>
+          </Button>
+        </Tooltip>
       )}
     </>
   )

www/packages/docs-ui/src/components/Sidebar/Item/Category/index.tsx

@@ -69,7 +69,9 @@ export const SidebarItemCategory = ({
   )
 
   return (
-    <div className={clsx("my-docs_0.75 w-full relative", className)}>
+    <div
+      className={clsx("my-docs_0.75 first:!mt-0 w-full relative", className)}
+    >
       <div className="px-docs_0.75">
         <div
           className={clsx(

www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx

@@ -118,7 +118,12 @@ export const SidebarItemLink = ({
           shallow={!item.isPathHref}
           {...item.linkProps}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "inline-block pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -129,7 +134,6 @@ export const SidebarItemLink = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pt-docs_0.125 pb-docs_0.5"
           )}
         >

www/packages/docs-ui/src/components/Sidebar/Item/SubCategory/index.tsx

@@ -116,7 +116,12 @@ export const SidebarItemSubCategory = ({
             className
           )}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -127,7 +132,6 @@ export const SidebarItemSubCategory = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pb-docs_0.5 pt-docs_0.125"
           )}
         >

www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx

@@ -46,7 +46,7 @@ export const SidebarTopMedusaMenu = () => {
         <span className="text-compact-small-plus text-medusa-fg-base flex-1">
           Medusa Docs
         </span>
-        <EllipsisHorizontal className="text-medusa-fg-subtle" />
+        <EllipsisHorizontal className="text-medusa-fg-muted" />
       </div>
       <div
         className={clsx(

www/packages/docs-ui/src/components/Sidebar/Top/index.tsx

@@ -24,7 +24,7 @@ export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
               <SidebarChild item={parentItem} />
             </>
           )}
-          <DottedSeparator className="!my-0" />
+          <DottedSeparator wrapperClassName="!my-0" />
         </div>
       </div>
     )

www/packages/docs-ui/src/components/index.ts

@@ -34,6 +34,7 @@ export * from "./Kbd"
 export * from "./Label"
 export * from "./LearningPath"
 export * from "./Link"
+export * from "./LinkButton"
 export * from "./Loading"
 export * from "./Loading/Dots"
 export * from "./Loading/Spinner"