docs,api-ref: added search filters (#4830)

* initial implementation of search modal

* added hit and search suggestions

* added support for multiple indices

* updated sample env

* added close when click outside dropdown

* test for mobile

* added mobile design

* added shortcut

* dark mode fixes

* added search to docs

* added plugins filter

* added React import

* moved filters to configurations

* handled error on page load

* change suggestion text

* removed hits limit

* handle select all

* open link in current tab

* change highlight colors

* added support for shortcuts + auto focus

* change header and footer

* redesigned search ui

www/api-reference/components/MDXComponents/Kbd/index.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx"
+
+type KbdProps = React.ComponentProps<"kbd">
+
+const Kbd = ({ children, className, ...props }: KbdProps) => {
+  return (
+    <kbd
+      className={clsx(
+        "h-[22px] w-[22px] rounded-sm p-0",
+        "inline-flex items-center justify-center",
+        "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
+        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+        "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
+        "text-compact-x-small-plus",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  )
+}
+
+export default Kbd

www/api-reference/components/MDXComponents/index.tsx

@@ -4,6 +4,7 @@ import type { OpenAPIV3 } from "openapi-types"
 import Link from "./Link"
 import CodeWrapper from "./CodeWrapper"
 import H2 from "./H2"
+import Kbd from "./Kbd"
 
 export type ScopeType = {
   specs?: OpenAPIV3.Document
@@ -16,6 +17,7 @@ const getCustomComponents = (scope?: ScopeType): MDXComponents => {
     code: CodeWrapper,
     a: Link,
     h2: (props) => <H2 addToSidebar={scope?.addToSidebar} {...props} />,
+    kbd: Kbd,
   }
 }