chore: move @blueprintjs/select to peer dependencies and misc

.storybook/preview.ts

@@ -4,6 +4,7 @@ import { RootLayoutDecorator } from '../stories/utils.js';
 import '../styles/storybook-globals.css';
 import '../styles/preflight.css';
 import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/select/lib/css/blueprint-select.css';
 import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 
 const preview: Preview = {

README.md

@@ -21,11 +21,19 @@ React components to build scientific applications UI.
 
 ### Global css
 
-If you use tailwindcss and already you added `@tailwind base;` to your tailwind stylesheet, you can skip this step.
+Import the preflight css stylesheet, unless you use tailwindcss and you already added `@tailwind base;` to your tailwind stylesheet:
 
-Otherwise, import the global styles in your application:
+```js
+import 'react-science/styles/preflight.css';
+```
+
+Then import the blueprint stylesheets:
 
-`import 'react-science/styles/preflight.css';`
+```js
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/select/lib/css/blueprint-select.css';
+import '@blueprintjs/icons/lib/css/blueprint-icons.css';
+```
 
 ## Introduction
 

package.json

@@ -50,12 +50,12 @@
   "peerDependencies": {
     "@blueprintjs/core": "^5.16.0",
     "@blueprintjs/icons": "^5.15.0",
+    "@blueprintjs/select": "^5.3.5",
     "fifo-logger": "^1.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/select": "^5.3.5",
     "@emotion/styled": "^11.13.5",
     "@tanstack/react-table": "^8.20.5",
     "@tanstack/react-virtual": "^3.10.9",
@@ -70,6 +70,7 @@
   "devDependencies": {
     "@blueprintjs/core": "^5.16.0",
     "@blueprintjs/icons": "^5.15.0",
+    "@blueprintjs/select": "^5.3.5",
     "@floating-ui/react": "^0.26.28",
     "@playwright/experimental-ct-react": "^1.49.0",
     "@playwright/test": "^1.49.0",

src/pages/demo/App.tsx

@@ -11,6 +11,7 @@ import {
 import MainLayout from './MainLayout.js';
 
 import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/select/lib/css/blueprint-select.css';
 import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 import { queryClient } from './query_client.js';
 

stories/components/select.stories.tsx

@@ -387,10 +387,12 @@ export function WithCustomStyle() {
   );
 }
 
-const Row = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-});
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+`;
 
 const Tag = styled.div({
   borderRadius: '25px',
@@ -417,7 +419,7 @@ export function WithCustomRenderItem() {
         >
           <span>{label.charAt(0)}</span>
         </Tag>
-        <span style={{ flex: 1, padding: '0 5px' }}>{label}</span>
+        <span style={{ flex: 1 }}>{label}</span>
         <Tag
           style={{
             border: `${color} 1px solid`,