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/BorderedIcon/index.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import clsx from "clsx"
+import Bordered from "../Bordered/index"
+import IconProps from "../Icons/types"
+import { useColorMode } from "../../providers/color-mode"
+import Image from "next/image"
+
+type BorderedIconProp = {
+  icon?: {
+    light: string
+    dark?: string
+  }
+  IconComponent?: React.FC<IconProps>
+  wrapperClassName?: string
+  iconWrapperClassName?: string
+  iconClassName?: string
+  iconColorClassName?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+const BorderedIcon: React.FC<BorderedIconProp> = ({
+  icon = null,
+  IconComponent = null,
+  wrapperClassName,
+  iconWrapperClassName,
+  iconClassName,
+  iconColorClassName = "",
+}) => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <Bordered wrapperClassName={wrapperClassName}>
+      <span
+        className={clsx(
+          "rounded-xs p-0.125 bg-medusa-bg-component dark:bg-medusa-bg-component-dark inline-flex items-center justify-center",
+          iconWrapperClassName
+        )}
+      >
+        {!IconComponent && (
+          <Image
+            src={(colorMode === "light" ? icon?.light : icon?.dark) || ""}
+            className={clsx(iconClassName, "bordered-icon")}
+            alt=""
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(iconClassName, "bordered-icon")}
+            iconColorClassName={iconColorClassName}
+          />
+        )}
+      </span>
+    </Bordered>
+  )
+}
+
+export default BorderedIcon