feat: new uikit of MultiSelect (#10103) (#10104)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds MultiSelect components to the UI kit and internal widgets.
It also introduces a SearchBox component for filtering.

### Detailed summary
- Added MultiSelect components to UI kit and internal widgets
- Introduced SearchBox component for filtering
- Updated Checkbox component styles
- Added Select and MultiSelect stories for documentation

> The following files were skipped due to too many changes:
`packages/uikit/src/components/MultiSelect/SearchBox.tsx`,
`packages/uikit/src/components/MultiSelect/MultiSelect.tsx`,
`pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->


<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds a `MultiSelect` component and updates the `Checkbox` type. 

### Detailed summary
- Added `MultiSelect` component
- Updated `Checkbox` type to accept string in `scale`
- Added `primereact` dependency
- Updated storybook for `Select` and `MultiSelect`
- Implemented `MultiSelect` component with styling and functionality

> The following files were skipped due to too many changes:
`pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

---------

Co-authored-by: chefjackson <[email protected]>

Author: chef-eric

Diff for: .changeset/flat-seahorses-visit.md

@@ -0,0 +1,5 @@
+---
+'@pancakeswap/uikit': minor
+---
+
+Add MultiSelect Component

Diff for: packages/uikit/package.json

@@ -133,6 +133,7 @@
     "framer-motion": "10.16.4",
     "lightweight-charts": "^4.0.1",
     "lodash": "^4.17.20",
+    "primereact": "^10.6.6",
     "react-popper": "^2.3.0",
     "sonner": "^1.2.4",
     "styled-system": "^5.1.5",

Diff for: packages/uikit/src/__tests__/components/checkbox.test.tsx

@@ -26,6 +26,20 @@ it("renders correctly", () => {
       box-shadow: var(--shadows-inset);
     }
 
+    .c0:before {
+      content: "";
+      position: absolute;
+      border-top: 2px solid;
+      border-color: transparent;
+      top: 50%;
+      left: 50%;
+      width: 33%;
+      height: 0;
+      margin: auto;
+      transform: translate(-50%, -50%);
+      transition: border-color 0.2s ease-in-out;
+    }
+
     .c0:after {
       content: "";
       position: absolute;

Diff for: packages/uikit/src/components/Checkbox/Checkbox.tsx

@@ -1,16 +1,19 @@
 import { styled } from "styled-components";
-import { CheckboxProps, scales } from "./types";
+import { CheckboxProps, Scales, scales } from "./types";
 
 const getScale = ({ scale }: CheckboxProps) => {
-  switch (scale) {
-    case scales.XS:
-      return "20px";
-    case scales.SM:
-      return "24px";
-    case scales.MD:
-    default:
-      return "32px";
+  if (scale && Object.values(scales).includes(scale as Scales)) {
+    switch (scale) {
+      case scales.XS:
+        return "20px";
+      case scales.SM:
+        return "24px";
+      case scales.MD:
+      default:
+        return "32px";
+    }
   }
+  return scale;
 };
 
 const Checkbox = styled.input.attrs({ type: "checkbox" })<CheckboxProps>`
@@ -25,11 +28,30 @@ const Checkbox = styled.input.attrs({ type: "checkbox" })<CheckboxProps>`
   min-width: ${getScale};
   vertical-align: middle;
   transition: background-color 0.2s ease-in-out;
-  border: ${({ theme }) => (theme.isDark ? `solid 1px ${theme.colors.disabled}` : "0")};
+  border: ${({ theme, colors }) =>
+    colors?.border
+      ? `solid 1px ${theme.colors[colors.border]}`
+      : theme.isDark
+      ? `solid 1px ${theme.colors.disabled}`
+      : "0"};
   border-radius: 8px;
-  background-color: ${({ theme }) => theme.colors.cardBorder};
+  background-color: ${({ theme, colors }) => theme.colors[colors?.background ?? "cardBorder"]};
   box-shadow: ${({ theme }) => theme.shadows.inset};
 
+  &:before {
+    content: "";
+    position: absolute;
+    border-top: 2px solid;
+    border-color: transparent;
+    top: 50%;
+    left: 50%;
+    width: 33%;
+    height: 0;
+    margin: auto;
+    transform: translate(-50%, -50%);
+    transition: border-color 0.2s ease-in-out;
+  }
+
   &:after {
     content: "";
     position: absolute;
@@ -46,6 +68,16 @@ const Checkbox = styled.input.attrs({ type: "checkbox" })<CheckboxProps>`
     transition: border-color 0.2s ease-in-out;
   }
 
+  ${({ indeterminate, theme, colors }) =>
+    indeterminate &&
+    `
+    border: 0;
+    background-color: ${theme.colors[colors?.checkedBackground ?? "success"]};
+    &:before {
+      border-color: white;
+    }
+    `}
+
   &:hover:not(:disabled):not(:checked) {
     box-shadow: ${({ theme }) => theme.shadows.focus};
   }
@@ -57,7 +89,7 @@ const Checkbox = styled.input.attrs({ type: "checkbox" })<CheckboxProps>`
 
   &:checked {
     border: 0;
-    background-color: ${({ theme }) => theme.colors.success};
+    background-color: ${({ theme, colors }) => theme.colors[colors?.checkedBackground ?? "success"]};
     &:after {
       border-color: white;
     }

Diff for: packages/uikit/src/components/Checkbox/types.ts

@@ -1,3 +1,5 @@
+import { PancakeTheme } from "../../theme";
+
 export const scales = {
   XS: "xs",
   SM: "sm",
@@ -7,5 +9,11 @@ export const scales = {
 export type Scales = (typeof scales)[keyof typeof scales];
 
 export interface CheckboxProps {
-  scale?: Scales;
+  scale?: Scales | string;
+  colors?: {
+    background?: keyof PancakeTheme["colors"];
+    checkedBackground?: keyof PancakeTheme["colors"];
+    border?: keyof PancakeTheme["colors"];
+  };
+  indeterminate?: boolean;
 }