From 504f7f93cdc9704c1c97896f492c2599144a6f8a Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 18 Apr 2024 17:37:59 +0200
Subject: [PATCH 1/7] init Dropdown

---
 src/index.tsx                             |  1 +
 src/stories/Dropdown/Dropdown.stories.tsx | 16 ++++++++++++++++
 src/stories/Dropdown/Option.tsx           | 14 ++++++++++++++
 src/stories/Dropdown/index.tsx            | 16 ++++++++++++++++
 src/stories/form/Form.stories.tsx         |  2 +-
 src/stories/table/Table.tsx               |  2 +-
 6 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/stories/Dropdown/Dropdown.stories.tsx
 create mode 100644 src/stories/Dropdown/Option.tsx
 create mode 100644 src/stories/Dropdown/index.tsx

diff --git a/src/index.tsx b/src/index.tsx
index af88a88..88f3361 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -55,6 +55,7 @@ export * from "./stories/pill/Pill";
 export * from "./stories/placesAutocomplete/PlacesAutocomplete";
 export * from "./stories/progress-bar/ProgressBar";
 export * from "./stories/select/Select";
+export * from "./stories/Dropdown";
 export * from "./stories/sidebar/Sidebar";
 export * from "./stories/skeleton/Skeleton";
 export * from "./stories/spinner/Spinner";
diff --git a/src/stories/Dropdown/Dropdown.stories.tsx b/src/stories/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 0000000..6356c8d
--- /dev/null
+++ b/src/stories/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { SelectNew } from ".";
+
+export default {
+  title: "SelectNew",
+  component: SelectNew,
+} as Meta;
+
+const Template: StoryFn<SelectProps> = (args) => {
+  return <SelectNew {...args} />;
+};
+
+export const SelectBase = Template.bind({});
+SelectBase.args = {
+  value: { label: "", value: "" },
+};
diff --git a/src/stories/Dropdown/Option.tsx b/src/stories/Dropdown/Option.tsx
new file mode 100644
index 0000000..baf3083
--- /dev/null
+++ b/src/stories/Dropdown/Option.tsx
@@ -0,0 +1,14 @@
+export interface DropdownOptions
+  extends React.HTMLAttributes<HTMLOptionElement> {
+  value: string;
+  label: string;
+  [key: string]: any;
+}
+
+export const Option = ({ value, label, ...props }: DropdownOptions) => {
+  return (
+    <option value={value} {...props}>
+      {label}
+    </option>
+  );
+};
diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx
new file mode 100644
index 0000000..0264f66
--- /dev/null
+++ b/src/stories/Dropdown/index.tsx
@@ -0,0 +1,16 @@
+import { DropdownOptions, Option } from "./Option";
+
+export interface DropdownProps extends React.HTMLAttributes<HTMLSelectElement> {
+  options: DropdownOptions[];
+}
+
+export const SelectNew = ({ options, ...props }: DropdownProps) => {
+  return (
+    <>
+      <select {...props}></select>
+      {options.map((option) => (
+        <Option key={option.value} {...option} />
+      ))}
+    </>
+  );
+};
diff --git a/src/stories/form/Form.stories.tsx b/src/stories/form/Form.stories.tsx
index c6f0934..c5d5bf7 100644
--- a/src/stories/form/Form.stories.tsx
+++ b/src/stories/form/Form.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Form, Formik, FormikProps } from "formik";
 import * as yup from "yup";
-import { Select } from "../select/Select";
+import { Select } from "../select/SelectNew";
 import { Text } from "../typography/Typography";
 import { ErrorMessageWrapper, Field } from "./Form";
 import { initialValues, validationSchema } from "./_data";
diff --git a/src/stories/table/Table.tsx b/src/stories/table/Table.tsx
index e7a833b..725cfc9 100644
--- a/src/stories/table/Table.tsx
+++ b/src/stories/table/Table.tsx
@@ -6,7 +6,7 @@ import { Column, Order, SortFunction, TableProps } from "./_types";
 import { TableRow } from "./TableRow";
 import { useEffect, useState } from "react";
 import { aqBootstrapTheme } from "../theme/defaultTheme";
-import { Select } from "../select/Select";
+import { Select } from "../select/SelectNew";
 import { useWindowSize } from "../../shared/effects";
 import { Option } from "../select/_types";
 

From 3b0b72a79520c2c305ae58c025c149904128f623 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 18 Apr 2024 18:34:01 +0200
Subject: [PATCH 2/7] Add react-select5 package

---
 package.json |  1 +
 yarn.lock    | 49 +++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 26eed5e..9c58fac 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react-google-places-autocomplete": "^3.3.2",
     "react-input-mask": "^2.0.4",
     "react-select": "^4.3.1",
+    "react-select5": "npm:react-select",
     "use-places-autocomplete": "^1.9.3",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.9"
diff --git a/yarn.lock b/yarn.lock
index d62bd36..ca14eaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1503,7 +1503,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.1.1":
+"@emotion/react@^11.1.1", "@emotion/react@^11.8.1":
   version "11.11.4"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.4.tgz#3a829cac25c1f00e126408fab7f891f00ecc3c1d"
   integrity sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==
@@ -1725,6 +1725,26 @@
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
   integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@googlemaps/js-api-loader@^1.12.3":
   version "1.16.6"
   resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.16.6.tgz#c89970c94b55796d51746c092f0e52953994a171"
@@ -3794,7 +3814,7 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
-"@types/react-transition-group@*", "@types/react-transition-group@^4.4.1":
+"@types/react-transition-group@*", "@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.1":
   version "4.4.10"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
   integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
@@ -9735,6 +9755,11 @@ memoize-one@^5.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -11948,6 +11973,21 @@ react-scripts@^5:
   optionalDependencies:
     fsevents "^2.3.2"
 
+"react-select5@npm:react-select":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
+  integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
 react-select@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
@@ -13948,6 +13988,11 @@ use-debounce@^3.4.3:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-3.4.3.tgz#5df9322322b3f1b1c263d46413f9facf6d8b56ab"
   integrity sha512-nxy+opOxDccWfhMl36J5BSCTpvcj89iaQk2OZWLAtBJQj7ISCtx1gh+rFbdjGfMl6vtCZf6gke/kYvrkVfHMoA==
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-places-autocomplete@^1.9.3:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/use-places-autocomplete/-/use-places-autocomplete-1.11.0.tgz#9a81c63817d0e58a6c5c439b7ff6eca6fc68256e"

From de85f0838791150d32920a02086f716be2718fe0 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 18 Apr 2024 18:46:08 +0200
Subject: [PATCH 3/7] fix wrong SelectNew import

---
 src/stories/form/Form.stories.tsx | 2 +-
 src/stories/table/Table.tsx       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/stories/form/Form.stories.tsx b/src/stories/form/Form.stories.tsx
index c5d5bf7..c6f0934 100644
--- a/src/stories/form/Form.stories.tsx
+++ b/src/stories/form/Form.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Form, Formik, FormikProps } from "formik";
 import * as yup from "yup";
-import { Select } from "../select/SelectNew";
+import { Select } from "../select/Select";
 import { Text } from "../typography/Typography";
 import { ErrorMessageWrapper, Field } from "./Form";
 import { initialValues, validationSchema } from "./_data";
diff --git a/src/stories/table/Table.tsx b/src/stories/table/Table.tsx
index 725cfc9..ba857a1 100644
--- a/src/stories/table/Table.tsx
+++ b/src/stories/table/Table.tsx
@@ -6,7 +6,7 @@ import { Column, Order, SortFunction, TableProps } from "./_types";
 import { TableRow } from "./TableRow";
 import { useEffect, useState } from "react";
 import { aqBootstrapTheme } from "../theme/defaultTheme";
-import { Select } from "../select/SelectNew";
+import { Select } from "../select/Select";
 import { useWindowSize } from "../../shared/effects";
 import { Option } from "../select/_types";
 
@@ -229,12 +229,12 @@ export const SortTableSelect = ({
   };
   useEffect(() => {
     const val = orderByOptions.find(
-      (opt) => opt.value === `${orderBy} ${order}`
+      (opt) => opt.value === `${orderBy} ${order}`,
     );
     setOrderByValue(val);
   }, [orderBy, order]);
   return window.matchMedia(
-    `only screen and (min-width: ${aqBootstrapTheme.grid.breakpoints.lg})`
+    `only screen and (min-width: ${aqBootstrapTheme.grid.breakpoints.lg})`,
   ).matches ? null : (
     <div className="aq-mb-3">
       <Select

From 54f93e78da5cfea50be9af53eba8a7cf802c9652 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 18 Apr 2024 18:46:53 +0200
Subject: [PATCH 4/7] feat(dropdown): Dropdown component and stories

---
 src/stories/Dropdown/Dropdown.stories.tsx |  29 ++-
 src/stories/Dropdown/Option.tsx           |  14 --
 src/stories/Dropdown/data.ts              | 142 ++++++++++++++
 src/stories/Dropdown/index.tsx            | 227 ++++++++++++++++++++--
 src/stories/Dropdown/styles.tsx           |  77 ++++++++
 5 files changed, 455 insertions(+), 34 deletions(-)
 delete mode 100644 src/stories/Dropdown/Option.tsx
 create mode 100644 src/stories/Dropdown/data.ts
 create mode 100644 src/stories/Dropdown/styles.tsx

diff --git a/src/stories/Dropdown/Dropdown.stories.tsx b/src/stories/Dropdown/Dropdown.stories.tsx
index 6356c8d..1c7e94f 100644
--- a/src/stories/Dropdown/Dropdown.stories.tsx
+++ b/src/stories/Dropdown/Dropdown.stories.tsx
@@ -1,16 +1,29 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { SelectNew } from ".";
+import Dropdown, { DropdownProps } from ".";
+import { colourOptions } from "./data";
 
 export default {
-  title: "SelectNew",
-  component: SelectNew,
+  title: "Dropdown",
+  component: Dropdown,
 } as Meta;
 
-const Template: StoryFn<SelectProps> = (args) => {
-  return <SelectNew {...args} />;
+const Template: StoryFn<DropdownProps> = (args) => {
+  return <Dropdown {...args} />;
 };
 
-export const SelectBase = Template.bind({});
-SelectBase.args = {
-  value: { label: "", value: "" },
+export const SingleDropdown = Template.bind({});
+SingleDropdown.args = {
+  className: "basic-single",
+  defaultValue: colourOptions[0],
+  name: "color",
+  options: colourOptions,
+};
+
+export const MultiDropdown = Template.bind({});
+MultiDropdown.args = {
+  isMulti: true,
+  className: "basic-multi",
+  defaultValue: [colourOptions[2], colourOptions[3]],
+  name: "colors",
+  options: colourOptions,
 };
diff --git a/src/stories/Dropdown/Option.tsx b/src/stories/Dropdown/Option.tsx
deleted file mode 100644
index baf3083..0000000
--- a/src/stories/Dropdown/Option.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface DropdownOptions
-  extends React.HTMLAttributes<HTMLOptionElement> {
-  value: string;
-  label: string;
-  [key: string]: any;
-}
-
-export const Option = ({ value, label, ...props }: DropdownOptions) => {
-  return (
-    <option value={value} {...props}>
-      {label}
-    </option>
-  );
-};
diff --git a/src/stories/Dropdown/data.ts b/src/stories/Dropdown/data.ts
new file mode 100644
index 0000000..d369b8b
--- /dev/null
+++ b/src/stories/Dropdown/data.ts
@@ -0,0 +1,142 @@
+export interface ColourOption {
+  readonly value: string;
+  readonly label: string;
+  readonly color: string;
+  readonly isFixed?: boolean;
+  readonly isDisabled?: boolean;
+}
+
+export const colourOptions: readonly ColourOption[] = [
+  { value: "ocean", label: "Ocean", color: "#00B8D9", isFixed: true },
+  { value: "blue", label: "Blue", color: "#0052CC", isDisabled: true },
+  { value: "purple", label: "Purple", color: "#5243AA" },
+  { value: "red", label: "Red", color: "#FF5630", isFixed: true },
+  { value: "orange", label: "Orange", color: "#FF8B00" },
+  { value: "yellow", label: "Yellow", color: "#FFC400" },
+  { value: "green", label: "Green", color: "#36B37E" },
+  { value: "forest", label: "Forest", color: "#00875A" },
+  { value: "slate", label: "Slate", color: "#253858" },
+  { value: "silver", label: "Silver", color: "#666666" },
+];
+
+export interface FlavourOption {
+  readonly value: string;
+  readonly label: string;
+  readonly rating: string;
+}
+
+export const flavourOptions: readonly FlavourOption[] = [
+  { value: "vanilla", label: "Vanilla", rating: "safe" },
+  { value: "chocolate", label: "Chocolate", rating: "good" },
+  { value: "strawberry", label: "Strawberry", rating: "wild" },
+  { value: "salted-caramel", label: "Salted Caramel", rating: "crazy" },
+];
+
+export interface StateOption {
+  readonly value: string;
+  readonly label: string;
+}
+
+export const stateOptions: readonly StateOption[] = [
+  { value: "AL", label: "Alabama" },
+  { value: "AK", label: "Alaska" },
+  { value: "AS", label: "American Samoa" },
+  { value: "AZ", label: "Arizona" },
+  { value: "AR", label: "Arkansas" },
+  { value: "CA", label: "California" },
+  { value: "CO", label: "Colorado" },
+  { value: "CT", label: "Connecticut" },
+  { value: "DE", label: "Delaware" },
+  { value: "DC", label: "District Of Columbia" },
+  { value: "FM", label: "Federated States Of Micronesia" },
+  { value: "FL", label: "Florida" },
+  { value: "GA", label: "Georgia" },
+  { value: "GU", label: "Guam" },
+  { value: "HI", label: "Hawaii" },
+  { value: "ID", label: "Idaho" },
+  { value: "IL", label: "Illinois" },
+  { value: "IN", label: "Indiana" },
+  { value: "IA", label: "Iowa" },
+  { value: "KS", label: "Kansas" },
+  { value: "KY", label: "Kentucky" },
+  { value: "LA", label: "Louisiana" },
+  { value: "ME", label: "Maine" },
+  { value: "MH", label: "Marshall Islands" },
+  { value: "MD", label: "Maryland" },
+  { value: "MA", label: "Massachusetts" },
+  { value: "MI", label: "Michigan" },
+  { value: "MN", label: "Minnesota" },
+  { value: "MS", label: "Mississippi" },
+  { value: "MO", label: "Missouri" },
+  { value: "MT", label: "Montana" },
+  { value: "NE", label: "Nebraska" },
+  { value: "NV", label: "Nevada" },
+  { value: "NH", label: "New Hampshire" },
+  { value: "NJ", label: "New Jersey" },
+  { value: "NM", label: "New Mexico" },
+  { value: "NY", label: "New York" },
+  { value: "NC", label: "North Carolina" },
+  { value: "ND", label: "North Dakota" },
+  { value: "MP", label: "Northern Mariana Islands" },
+  { value: "OH", label: "Ohio" },
+  { value: "OK", label: "Oklahoma" },
+  { value: "OR", label: "Oregon" },
+  { value: "PW", label: "Palau" },
+  { value: "PA", label: "Pennsylvania" },
+  { value: "PR", label: "Puerto Rico" },
+  { value: "RI", label: "Rhode Island" },
+  { value: "SC", label: "South Carolina" },
+  { value: "SD", label: "South Dakota" },
+  { value: "TN", label: "Tennessee" },
+  { value: "TX", label: "Texas" },
+  { value: "UT", label: "Utah" },
+  { value: "VT", label: "Vermont" },
+  { value: "VI", label: "Virgin Islands" },
+  { value: "VA", label: "Virginia" },
+  { value: "WA", label: "Washington" },
+  { value: "WV", label: "West Virginia" },
+  { value: "WI", label: "Wisconsin" },
+  { value: "WY", label: "Wyoming" },
+];
+
+export const optionLength = [
+  { value: 1, label: "general" },
+  {
+    value: 2,
+    label:
+      "Evil is the moment when I lack the strength to be true to the Good that compels me.",
+  },
+  {
+    value: 3,
+    label:
+      "It is now an easy matter to spell out the ethic of a truth: 'Do all that you can to persevere in that which exceeds your perseverance. Persevere in the interruption. Seize in your being that which has seized and broken you.",
+  },
+];
+
+export const dogOptions = [
+  { id: 1, label: "Chihuahua" },
+  { id: 2, label: "Bulldog" },
+  { id: 3, label: "Dachshund" },
+  { id: 4, label: "Akita" },
+];
+
+// let bigOptions = [];
+// for (let i = 0; i < 10000; i++) {
+// 	bigOptions = bigOptions.concat(colourOptions);
+// }
+
+export interface GroupedOption {
+  readonly label: string;
+  readonly options: readonly ColourOption[] | readonly FlavourOption[];
+}
+
+export const groupedOptions: readonly GroupedOption[] = [
+  {
+    label: "Colours",
+    options: colourOptions,
+  },
+  {
+    label: "Flavours",
+    options: flavourOptions,
+  },
+];
diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx
index 0264f66..e0c568f 100644
--- a/src/stories/Dropdown/index.tsx
+++ b/src/stories/Dropdown/index.tsx
@@ -1,16 +1,219 @@
-import { DropdownOptions, Option } from "./Option";
+import ReactSelect, { Props, GroupBase, StylesConfig } from "react-select5";
+import { aqTheme, customComponents } from "./styles";
+import { aqBootstrapTheme } from "../theme/defaultTheme";
 
-export interface DropdownProps extends React.HTMLAttributes<HTMLSelectElement> {
-  options: DropdownOptions[];
-}
+export interface DropdownProps extends Props {}
+
+function Dropdown<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: Props<Option, IsMulti, Group>) {
+  const customStyle: StylesConfig<Option, IsMulti, Group> = {
+    control: (provided, state) => {
+      let borderColor = aqBootstrapTheme.colors.elementGeneric;
+      if (state.isFocused) {
+        borderColor = aqBootstrapTheme.variants.secondary;
+      }
+      if (state.isDisabled && state.hasValue) {
+        borderColor = aqBootstrapTheme.colors.gray100;
+      }
+      const boxShadow = "none";
+      const lineHeight = "1.5";
+      const minHeight = "39px";
+      const background =
+        state.isDisabled && state.hasValue
+          ? `${aqBootstrapTheme.colors.gray100}`
+          : `${aqBootstrapTheme.colors.white}`;
+
+      return {
+        ...provided,
+        background,
+        borderColor,
+        minHeight,
+        boxShadow,
+        lineHeight,
+        ":hover": {
+          borderColor: borderColor,
+        },
+      };
+    },
+    dropdownIndicator: (provided, state) => {
+      let color = aqBootstrapTheme.palette.primary;
+      if (state.isDisabled && !state.hasValue) {
+        color = aqBootstrapTheme.colors.disabledFont;
+      }
+      if (state.selectProps.menuIsOpen) {
+        color = aqBootstrapTheme.palette.secondary;
+      }
+      const fontSize = "20px";
+      const transform = state.selectProps.menuIsOpen ? "rotate(180deg)" : "";
+      const cursor = "pointer";
+      return {
+        ...provided,
+        color,
+        fontSize,
+        transform,
+        cursor,
+      };
+    },
+    menu: (provided) => {
+      const borderColor = `${aqBootstrapTheme.colors.elementGeneric}`;
+      const borderWidth = "1px";
+      const borderStyle = "solid";
+      const borderRadius = `${aqBootstrapTheme.general.borderRadius}`;
+      const boxShadow = `${aqBootstrapTheme.general.boxShadow}`;
+
+      return {
+        ...provided,
+        borderColor,
+        borderRadius,
+        borderWidth,
+        borderStyle,
+        boxShadow,
+      };
+    },
+    menuPortal: (provided) => {
+      const zIndex = "9999";
+      return {
+        ...provided,
+        zIndex,
+      };
+    },
+    groupHeading: (provided) => {
+      const fontFamily = `${aqBootstrapTheme.typography.fontFamily.mono}`;
+      const fontWeight = aqBootstrapTheme.typography.fontWeight.light;
+      const fontSize = `${aqBootstrapTheme.typography.fontSize.small}`;
+      const color = `${aqBootstrapTheme.palette.secondary}`;
+
+      return {
+        ...provided,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        color,
+      };
+    },
+    noOptionsMessage: (provided) => {
+      const color = `${aqBootstrapTheme.colors.disabledFont}`;
+
+      return {
+        ...provided,
+        color,
+      };
+    },
+    option: (provided, state) => {
+      const activeColor = aqBootstrapTheme.variants.secondary;
+      const hoverColor = aqBootstrapTheme.colors.purple100;
+
+      provided = {
+        ...provided,
+        ":hover": {
+          background: hoverColor,
+        },
+      };
+      // focused and not selected
+      if (state.isFocused && !state.isSelected) {
+        return {
+          ...provided,
+          background: hoverColor,
+          ":active": {
+            background: activeColor,
+          },
+        };
+      }
+      // selected
+      if (state.isSelected) {
+        return {
+          ...provided,
+          background: aqBootstrapTheme.variants.secondary,
+          color: aqBootstrapTheme.palette.secondary,
+          ":hover": {
+            background: aqBootstrapTheme.variants.secondary,
+            color: aqBootstrapTheme.palette.secondary,
+          },
+        };
+      }
+
+      return {
+        ...provided,
+        ":active": {
+          background: activeColor,
+        },
+      };
+    },
+    placeholder: (provided, state) => {
+      const color = state.isDisabled
+        ? `${aqBootstrapTheme.colors.disabledFont}`
+        : `${aqBootstrapTheme.colors.gray500}`;
+      const fontWeight = parseInt(
+        `${aqBootstrapTheme.typography.fontWeight.light}`,
+      );
+
+      return {
+        ...provided,
+        color,
+        fontWeight,
+      };
+    },
+    singleValue: (provided, state) => {
+      const color =
+        state.isDisabled && state.hasValue
+          ? aqBootstrapTheme.variants.primary
+          : aqBootstrapTheme.palette.primary;
+      return {
+        ...provided,
+        color,
+      };
+    },
+    multiValue: (provided, state) => {
+      const backgroundColor = `transparent`;
+
+      return {
+        ...provided,
+        backgroundColor,
+      };
+    },
+    multiValueRemove: (provided, state) => {
+      const backgroundColor = aqBootstrapTheme.variants.secondary;
+      const color = `${aqBootstrapTheme.colors.white}`;
+      const borderRadius = `50%`;
+      const float = "right";
+      const padding = "0";
+      const margin = "0 0 0 10px";
+      const alignSelf = "center";
+      const cursor = "pointer";
+
+      return {
+        ...provided,
+        ":hover": {
+          ...provided[":hover"],
+          backgroundColor,
+          color: aqBootstrapTheme.palette.secondary,
+        },
+        alignSelf,
+        borderRadius,
+        backgroundColor,
+        float,
+        padding,
+        margin,
+        color,
+        cursor,
+      };
+    },
+  };
 
-export const SelectNew = ({ options, ...props }: DropdownProps) => {
   return (
-    <>
-      <select {...props}></select>
-      {options.map((option) => (
-        <Option key={option.value} {...option} />
-      ))}
-    </>
+    <ReactSelect
+      theme={(theme) => ({
+        ...theme,
+        ...aqTheme,
+      })}
+      styles={customStyle}
+      {...customComponents}
+      {...props}
+    />
   );
-};
+}
+
+export default Dropdown;
diff --git a/src/stories/Dropdown/styles.tsx b/src/stories/Dropdown/styles.tsx
new file mode 100644
index 0000000..a48cca5
--- /dev/null
+++ b/src/stories/Dropdown/styles.tsx
@@ -0,0 +1,77 @@
+import { ChevronDown, X } from "react-bootstrap-icons";
+import { Theme, components } from "react-select5";
+import { Pill } from "../pill/Pill";
+import { aqBootstrapTheme } from "../theme/defaultTheme";
+
+const aqTheme = (theme: Theme) => ({
+  borderRadius: aqBootstrapTheme.general.borderRadiusNumber,
+  spacing: theme.spacing,
+  colors: {
+    ...theme.colors,
+    primary: aqBootstrapTheme.palette.primary,
+    primary25: aqBootstrapTheme.colors.gray300,
+  },
+});
+
+const IndicatorSeparator = () => null;
+const MultiValueContainer = (
+  props: JSX.LibraryManagedAttributes<
+    typeof components.MultiValueContainer,
+    any
+  >,
+) => {
+  return (
+    <components.MultiValueContainer {...props}>
+      <Pill
+        type="secondary"
+        title={props.data.label}
+        flat
+        style={{
+          maxWidth: "100%",
+        }}
+      >
+        <div style={{ display: "flex" }}>{props.children}</div>
+      </Pill>
+    </components.MultiValueContainer>
+  );
+};
+const MultiValueLabel = (
+  props: JSX.LibraryManagedAttributes<typeof components.MultiValueLabel, any>,
+) => {
+  return (
+    <span
+      style={{
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+      }}
+    >
+      {props.children}
+    </span>
+  );
+};
+const DropdownIndicator = (
+  props: JSX.LibraryManagedAttributes<typeof components.DropdownIndicator, any>,
+) => (
+  <components.DropdownIndicator {...props}>
+    <ChevronDown />
+  </components.DropdownIndicator>
+);
+const ClearIndicator = (
+  props: JSX.LibraryManagedAttributes<typeof components.DropdownIndicator, any>,
+) => (
+  <components.ClearIndicator {...props}>
+    <X />
+  </components.ClearIndicator>
+);
+let customComponents = {
+  components: {
+    IndicatorSeparator,
+    DropdownIndicator,
+    ClearIndicator,
+    MultiValueContainer,
+    MultiValueLabel,
+  },
+};
+
+export { aqTheme, customComponents };

From 49cf611e1547c7dc4e5516d35de0bb915c820e85 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Thu, 18 Apr 2024 18:51:15 +0200
Subject: [PATCH 5/7] Fix changes


From ce879bb9dc1064b5223d525b08a784b14ce402af Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Fri, 19 Apr 2024 11:33:36 +0200
Subject: [PATCH 6/7] Fix Dropdown component export and types

---
 src/stories/Dropdown/Dropdown.stories.tsx | 4 ++--
 src/stories/Dropdown/index.tsx            | 8 ++------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/stories/Dropdown/Dropdown.stories.tsx b/src/stories/Dropdown/Dropdown.stories.tsx
index 1c7e94f..b1bca32 100644
--- a/src/stories/Dropdown/Dropdown.stories.tsx
+++ b/src/stories/Dropdown/Dropdown.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react";
-import Dropdown, { DropdownProps } from ".";
+import { Dropdown } from ".";
 import { colourOptions } from "./data";
 
 export default {
@@ -7,7 +7,7 @@ export default {
   component: Dropdown,
 } as Meta;
 
-const Template: StoryFn<DropdownProps> = (args) => {
+const Template: StoryFn = (args) => {
   return <Dropdown {...args} />;
 };
 
diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx
index e0c568f..4a14043 100644
--- a/src/stories/Dropdown/index.tsx
+++ b/src/stories/Dropdown/index.tsx
@@ -2,13 +2,11 @@ import ReactSelect, { Props, GroupBase, StylesConfig } from "react-select5";
 import { aqTheme, customComponents } from "./styles";
 import { aqBootstrapTheme } from "../theme/defaultTheme";
 
-export interface DropdownProps extends Props {}
-
-function Dropdown<
+export function Dropdown<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
->(props: Props<Option, IsMulti, Group>) {
+>(props: Props<Option, IsMulti, Group>): React.ReactNode {
   const customStyle: StylesConfig<Option, IsMulti, Group> = {
     control: (provided, state) => {
       let borderColor = aqBootstrapTheme.colors.elementGeneric;
@@ -215,5 +213,3 @@ function Dropdown<
     />
   );
 }
-
-export default Dropdown;

From d8c3f31e07dfb28a6e12c2cc4e7eba709ce7402c Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Fri, 19 Apr 2024 11:45:24 +0200
Subject: [PATCH 7/7] Fix Dropdown component return type

---
 src/stories/Dropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx
index 4a14043..3311584 100644
--- a/src/stories/Dropdown/index.tsx
+++ b/src/stories/Dropdown/index.tsx
@@ -6,7 +6,7 @@ export function Dropdown<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
->(props: Props<Option, IsMulti, Group>): React.ReactNode {
+>(props: Props<Option, IsMulti, Group>) {
   const customStyle: StylesConfig<Option, IsMulti, Group> = {
     control: (provided, state) => {
       let borderColor = aqBootstrapTheme.colors.elementGeneric;