Merge branch 'master' into fix-warnings

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.13",
+    "version": "2.1.14",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [

src/components/Search.jsx

@@ -37,6 +37,7 @@ export const Search = ({
     shouldStayOpen = false,
     shouldDestroyOnClose = true,
     shouldHideMenu = false,
+    minChars = 0,
     ...rest
 }) => {
     const [showShortcutKey, setShowShortcutKey] = useState(true);
@@ -123,7 +124,7 @@ export const Search = ({
 
     // Show dropdown only when `isOpen` is set to `true` and there are items in the list.
     const open = (isOpen || !canClose || shouldStayOpen) && itemList.length > 0 && !shouldHideMenu;
-    const noResultFound = open && !isLoading && itemList.length <= 1;
+    const noResultFound = open && !isLoading && itemList.length <= 1 && inputValue.length >= minChars;
 
     // Keyboard shortcuts.
     useHotkeys(isOSX ? "cmd+k" : "ctrl+k", (event) => {
@@ -190,7 +191,13 @@ export const Search = ({
                                               highlightedIndex === index ? "bg-blue-light text-white" : "",
                                           )}
                                       >
-                                          Show all results for <strong>{inputValue}</strong>
+                                          {inputValue.length >= minChars ? (
+                                              <>
+                                                  Show all results for <strong>{inputValue}</strong>
+                                              </>
+                                          ) : (
+                                              `Enter at least ${minChars} characters to begin search`
+                                          )}
                                       </div>
 
                                       {isLoading ? (

src/icons/Logos/XIcon.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createIcon } from "../../helpers/icon";
+
+export const XIcon = createIcon((props) => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 30 30" {...props}>
+            <path
+                d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"
+                fill="#000"
+            />
+        </svg>
+    );
+});
+
+XIcon.tags = ["logo", "social media", "x"];

src/index.js

@@ -262,6 +262,7 @@ export { YelpIcon } from "./icons/Logos/YelpIcon";
 export { LogoutIcon } from "./icons/LogoutIcon";
 export { HelpCenterIcon } from "./icons/HelpCenterIcon";
 export { PolicyIcon } from "./icons/PolicyIcon";
+export { XIcon } from "./icons/Logos/XIcon";
 
 export { theme } from "./theme";