refactor: ♻️ transparent search box (#514)

Author: harshzalavadiya

docs/recipes/theming.md

@@ -2,7 +2,6 @@
 
 You can override CSS variables to customize the appearance
 
-
 ```css
 .rmsc {
   --rmsc-main: #4285f4;
@@ -20,3 +19,23 @@ You can override CSS variables to customize the appearance
 <Callout emoji="💡">
   use `!important` if CSS variables are not getting applied
 </Callout>
+
+## Dark Mode
+
+if you are using any UI framework that supports dark mode and want to extend the same to `react-multi-select-component` you can do that by passing override class and styles like below
+
+```jsx
+<MultiSelect className="dark" {...otherProps} />
+```
+
+```css
+.rmsc.dark {
+  --rmsc-main: #4285f4;
+  --rmsc-hover: #0e0c0a;
+  --rmsc-selected: #1d1915;
+  --rmsc-border: #333333;
+  --rmsc-gray: #555555;
+  --rmsc-bg: #000000;
+  color: #fff;
+}
+```

package.json

@@ -34,34 +34,34 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@size-limit/preset-small-lib": "^5.0.4",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@size-limit/preset-small-lib": "^6.0.4",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/react": "^6.3.8",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
-    "babel-loader": "^8.2.2",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-css-import-to-string": "^0.0.2",
-    "concurrently": "^6.2.1",
+    "concurrently": "^6.4.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "husky": "^7.0.2",
+    "husky": "^7.0.4",
     "prettier": "^2.4.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.4"
   },
   "browserslist": [
     "defaults",

src/style.css

@@ -120,6 +120,7 @@
 }
 
 .rmsc .search input {
+  background: none;
   height: var(--rmsc-h);
   padding: 0 var(--rmsc-p);
   width: 100%;