From 91e78ad214eb2e107521f6f89913d4634582429c Mon Sep 17 00:00:00 2001
From: Leesa Ward <leesa@doubleedesign.com.au>
Date: Sat, 14 Sep 2024 10:54:21 +1000
Subject: [PATCH 1/3] Install and implement Jest-Axe for accessibility testing
 in unit tests (#18)

---
 jest.setup.ts                                 |   3 +
 jest.utils.tsx                                |   1 +
 package-lock.json                             | 144 ++++++++++++++++++
 package.json                                  |   2 +
 src/components/Alert/Alert.test.tsx           |  20 +++
 src/components/Button/Button.test.tsx         |  30 ++++
 .../ImageSlider/ImageSlider.test.tsx          |  10 ++
 src/components/Label/Label.test.tsx           |  20 +++
 src/components/LinkButton/LinkButton.test.tsx |  30 ++++
 .../TruncatedText/TruncatedText.test.tsx      |   8 +
 src/types.ts                                  |   1 +
 templates/TemplateName.test.tsx               |  10 +-
 12 files changed, 278 insertions(+), 1 deletion(-)

diff --git a/jest.setup.ts b/jest.setup.ts
index 2bda4ca..6c7a1b9 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -1,6 +1,9 @@
 import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
 
 jest.mock('./src/providers/RedbackUiThemeProvider/GlobalStyle.tsx', () => ({
 	GlobalStyle: () => null
 }));
 
+// Ref: https://github.com/NickColley/jest-axe?tab=readme-ov-file#testing-react-with-react-testing-library
+expect.extend(toHaveNoViolations);
\ No newline at end of file
diff --git a/jest.utils.tsx b/jest.utils.tsx
index ff69b5f..56793b4 100644
--- a/jest.utils.tsx
+++ b/jest.utils.tsx
@@ -20,3 +20,4 @@ export const renderWithDeps = (component: ReactNode) => {
 			</RedbackUiThemeProvider>
 		</DiProvider>);
 };
+
diff --git a/package-lock.json b/package-lock.json
index 49e805c..6c54475 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.2",
         "@types/jest": "^29.5.12",
+        "@types/jest-axe": "^3.5.9",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -49,6 +50,7 @@
         "eslint-plugin-react-refresh": "^0.4.6",
         "eslint-plugin-storybook": "^0.8.0",
         "jest": "^29.7.0",
+        "jest-axe": "^9.0.0",
         "jest-environment-jsdom": "^29.7.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -5047,6 +5049,25 @@
         "pretty-format": "^29.0.0"
       }
     },
+    "node_modules/@types/jest-axe": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/@types/jest-axe/-/jest-axe-3.5.9.tgz",
+      "integrity": "sha512-z98CzR0yVDalCEuhGXXO4/zN4HHuSebAukXDjTLJyjEAgoUf1H1i+sr7SUB/mz8CRS/03/XChsx0dcLjHkndoQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/jest": "*",
+        "axe-core": "^3.5.5"
+      }
+    },
+    "node_modules/@types/jest-axe/node_modules/axe-core": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.6.tgz",
+      "integrity": "sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/jest/node_modules/ansi-styles": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
@@ -9886,6 +9907,129 @@
         }
       }
     },
+    "node_modules/jest-axe": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/jest-axe/-/jest-axe-9.0.0.tgz",
+      "integrity": "sha512-Xt7O0+wIpW31lv0SO1wQZUTyJE7DEmnDEZeTt9/S9L5WUywxrv8BrgvTuQEqujtfaQOcJ70p4wg7UUgK1E2F5g==",
+      "dev": true,
+      "dependencies": {
+        "axe-core": "4.9.1",
+        "chalk": "4.1.2",
+        "jest-matcher-utils": "29.2.2",
+        "lodash.merge": "4.6.2"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      }
+    },
+    "node_modules/jest-axe/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-axe/node_modules/axe-core": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz",
+      "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/jest-axe/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-axe/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-axe/node_modules/jest-matcher-utils": {
+      "version": "29.2.2",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz",
+      "integrity": "sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^29.2.1",
+        "jest-get-type": "^29.2.0",
+        "pretty-format": "^29.2.1"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-axe/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-axe/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-axe/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true
+    },
+    "node_modules/jest-axe/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jest-changed-files": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz",
diff --git a/package.json b/package.json
index baf771b..16a1fec 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -63,6 +64,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
+    "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
index f5630fb..02868d9 100644
--- a/src/components/Alert/Alert.test.tsx
+++ b/src/components/Alert/Alert.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { Alert } from './Alert';
+import { axe } from 'jest-axe';
 
 describe('<Alert />', () => {
 	it('renders', () => {
@@ -8,4 +9,23 @@ describe('<Alert />', () => {
 
 		expect( screen.getByText('Example alert')).toBeInTheDocument();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<Alert>Example alert</Alert>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		['success', 'info', 'warning', 'error'].forEach(type => {
+			it(`has no accessibility violations for type "${type}" in default theme`, async () => {
+				// @ts-expect-error TS2322: Type string is not assignable to type 'success' | 'info' | 'warning' | 'error' | undefined
+				const { container } = renderWithDeps(<Alert type={type}>Example alert</Alert>);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
 });
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index cabf915..219bbdf 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -1,6 +1,9 @@
 import { screen, fireEvent }  from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { Button } from './Button';
+import { axe } from 'jest-axe';
+import { themes } from '../../themes';
+import { ThemeColor } from '../../types';
 
 const mockClick = jest.fn();
 
@@ -11,6 +14,33 @@ describe('<Button />', () => {
 		expect(screen.getByRole('button', { name: 'Test button' })).toBeVisible();
 	});
 
+	it('has no accessibility violations (default props)', async () => {
+		const { container } = renderWithDeps(<Button label="Test button" onClick={mockClick}/>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - solid style`, async () => {
+				const { container } = renderWithDeps(<Button color={color} appearance="solid" label="Test button" onClick={mockClick} />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - outline stype`, async () => {
+				const { container } = renderWithDeps(<Button color={color} appearance="outline" label="Test button" onClick={mockClick} />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
+
 	it('calls the click handler',  () => {
 		renderWithDeps(<Button label="Test button" onClick={mockClick}/>);
 
diff --git a/src/components/ImageSlider/ImageSlider.test.tsx b/src/components/ImageSlider/ImageSlider.test.tsx
index 13b3c5a..f367eb8 100644
--- a/src/components/ImageSlider/ImageSlider.test.tsx
+++ b/src/components/ImageSlider/ImageSlider.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import ImageSlider from './ImageSlider';
+import { axe } from 'jest-axe';
 
 describe('<ImageSlider />', () => {
 	const images = [
@@ -16,4 +17,13 @@ describe('<ImageSlider />', () => {
 
 		expect(templateName).toBeVisible();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<ImageSlider size="small" images={images} />);
+		const results = await axe(container);
+
+		// TODO: Fix the violation and replace this with
+		// expect(results).toHaveNoViolations();
+		expect(results.violations.length).toBe(1);
+	});
 });
diff --git a/src/components/Label/Label.test.tsx b/src/components/Label/Label.test.tsx
index 631b3e8..aef5e41 100644
--- a/src/components/Label/Label.test.tsx
+++ b/src/components/Label/Label.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { Label } from './Label';
+import { axe } from 'jest-axe';
 
 describe('<Label />', () => {
 	it('renders', () => {
@@ -8,4 +9,23 @@ describe('<Label />', () => {
 
 		expect(screen.getByText('Test label')).toBeVisible();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<Label type="info" text="Test label"/>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		['success', 'info', 'warning', 'error'].forEach(type => {
+			it(`has no accessibility violations for type "${type}" in default theme`, async () => {
+				// @ts-expect-error TS2322: Type string is not assignable to type 'success' | 'info' | 'warning' | 'error' | undefined
+				const { container } = renderWithDeps(<Label type={type} text="Test label"/>);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
 });
diff --git a/src/components/LinkButton/LinkButton.test.tsx b/src/components/LinkButton/LinkButton.test.tsx
index 49214df..dfa8910 100644
--- a/src/components/LinkButton/LinkButton.test.tsx
+++ b/src/components/LinkButton/LinkButton.test.tsx
@@ -1,6 +1,9 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { LinkButton } from './LinkButton';
+import { axe } from 'jest-axe';
+import { themes } from '../../themes';
+import { ThemeColor } from '../../types';
 
 describe('<LinkButton />', () => {
 	it('renders', () => {
@@ -8,4 +11,31 @@ describe('<LinkButton />', () => {
 
 		expect(screen.getByRole('link', { name: 'Test link' })).toBeVisible();
 	});
+
+	it('has no accessibility violations (default props)', async () => {
+		const { container } = renderWithDeps(<LinkButton label="Test link" href="#" />);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+
+	describe('default theme accessibility', () => {
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - solid style`, async () => {
+				const { container } = renderWithDeps(<LinkButton color={color} appearance="solid" label="Test link" href="#" />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+
+		Object.keys(themes.default.colors).forEach((color: ThemeColor) => {
+			it(`has no accessibility violations for "${String(color)}" colour in default theme - outline stype`, async () => {
+				const { container } = renderWithDeps(<LinkButton color={color} appearance="outline" label="Test link" href="#" />);
+				const results = await axe(container);
+
+				expect(results).toHaveNoViolations();
+			});
+		});
+	});
 });
diff --git a/src/components/TruncatedText/TruncatedText.test.tsx b/src/components/TruncatedText/TruncatedText.test.tsx
index dc2d6ca..6b9ac3d 100644
--- a/src/components/TruncatedText/TruncatedText.test.tsx
+++ b/src/components/TruncatedText/TruncatedText.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { renderWithDeps } from '../../../jest.utils';
 import { TruncatedText } from './TruncatedText';
+import { axe } from 'jest-axe';
 
 const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis faucibus mattis. Sed eget magna urna. Quisque posuere vehicula pharetra. Pellentesque bibendum condimentum lacus, at elementum justo ultrices ut. Ut at ipsum vel metus condimentum venenatis. Ut varius nisi in massa porttitor mollis. Pellentesque ac auctor quam.';
 
@@ -10,4 +11,11 @@ describe('<TruncatedText />', () => {
 
 		expect(screen.getByText('Lorem ipsum dolor sit amet', { exact:false })).toBeVisible();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<TruncatedText text={text} lines={1}/>);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
 });
diff --git a/src/types.ts b/src/types.ts
index 31d2770..fb082f7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,6 +2,7 @@ import { themes } from './themes';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 
+// @ts-expect-error TS2339: Property default does not exist on type {}
 export type RedbackUiTheme = typeof themes.default;
 export type RedbackUiThemeName = keyof typeof themes;
 
diff --git a/templates/TemplateName.test.tsx b/templates/TemplateName.test.tsx
index 501e973..ff6ee92 100644
--- a/templates/TemplateName.test.tsx
+++ b/templates/TemplateName.test.tsx
@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
-import { renderWithDeps } from '../../../jest.utils.tsx';
+import { renderWithDeps } from '../../../jest.utils';
 import TemplateName from './TemplateName';
+import { axe } from 'jest-axe';
 
 describe('<TemplateName />', () => {
 	it('renders', () => {
@@ -10,4 +11,11 @@ describe('<TemplateName />', () => {
 
 		expect(templateName).toBeInTheDocument();
 	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<TemplateName />);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
 });

From 5edeb7e588c519be9ea5aea2e2254b3f7a8e68cc Mon Sep 17 00:00:00 2001
From: Leesa Ward <leesa@doubleedesign.com.au>
Date: Mon, 16 Sep 2024 14:03:10 +1000
Subject: [PATCH 2/3] Number/value picker component (#19)

---
 .storybook/main.ts                            |   1 +
 jest.utils.tsx                                |   9 +-
 package-lock.json                             | 305 ++++++++++++++++--
 package.json                                  |   3 +-
 .../ValuePicker/ValuePicker.stories.ts        |  49 +++
 .../ValuePicker/ValuePicker.style.ts          |  46 +++
 .../ValuePicker/ValuePicker.test.tsx          |  83 +++++
 src/components/ValuePicker/ValuePicker.tsx    |  62 ++++
 8 files changed, 534 insertions(+), 24 deletions(-)
 create mode 100644 src/components/ValuePicker/ValuePicker.stories.ts
 create mode 100644 src/components/ValuePicker/ValuePicker.style.ts
 create mode 100644 src/components/ValuePicker/ValuePicker.test.tsx
 create mode 100644 src/components/ValuePicker/ValuePicker.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index b831b6b..0cacf79 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -41,6 +41,7 @@ const config: StorybookConfig = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-docs',
 		'@storybook/addon-a11y',
+		'@storybook/addon-actions',
 		'storybook-dark-mode',
 		'@storybook/addon-mdx-gfm'
 	],
diff --git a/jest.utils.tsx b/jest.utils.tsx
index 56793b4..cba5e77 100644
--- a/jest.utils.tsx
+++ b/jest.utils.tsx
@@ -1,4 +1,4 @@
-import { DiProvider, injectable } from 'react-magnetic-di';
+import { DiProvider, Injectable, injectable } from 'react-magnetic-di';
 import { ThemeProvider } from 'styled-components';
 import { ReactNode } from 'react';
 import { themes } from './src';
@@ -12,12 +12,13 @@ const commonDeps = [
 ];
 
 
-export const renderWithDeps = (component: ReactNode) => {
+export const renderWithDeps = (component: ReactNode, deps: Injectable[] = []) => {
 	return render(
-		<DiProvider use={commonDeps}>
+		<DiProvider use={[...commonDeps, ...deps]}>
 			<RedbackUiThemeProvider theme={themes.default}>
 				{component}
 			</RedbackUiThemeProvider>
-		</DiProvider>);
+		</DiProvider>
+	);
 };
 
diff --git a/package-lock.json b/package-lock.json
index 6c54475..bf4c180 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "lucide-react": "^0.378.0",
         "polished": "^4.3.1",
         "react-icons": "^5.2.1",
+        "react-select": "^5.8.0",
         "styled-components": "^6.1.8"
       },
       "devDependencies": {
@@ -54,7 +55,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-magnetic-di": "^3.1.2",
+        "react-magnetic-di": "^3.1.3",
         "storybook": "^8.2.9",
         "storybook-dark-mode": "^4.0.2",
         "typescript": "^5.2.2",
@@ -2037,6 +2038,85 @@
         "yarn": ">=1.22.18"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -2050,6 +2130,56 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.13.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.1.tgz",
+      "integrity": "sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
@@ -2063,6 +2193,16 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -2531,6 +2671,28 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -5161,6 +5323,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -5194,6 +5361,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.6",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
@@ -6094,6 +6269,20 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.11",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
@@ -6413,7 +6602,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -6885,6 +7073,21 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -7298,6 +7501,15 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -7368,7 +7580,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -8574,6 +8785,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -9179,7 +9395,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -9195,7 +9410,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -9381,8 +9595,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
@@ -11835,8 +12048,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -11921,8 +12133,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -12342,6 +12553,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -13343,7 +13559,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13575,7 +13790,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -13587,7 +13801,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -13659,7 +13872,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -13850,7 +14062,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14088,9 +14299,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-magnetic-di": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/react-magnetic-di/-/react-magnetic-di-3.1.2.tgz",
-      "integrity": "sha512-FutzndjzqiuhsIeRDwICKOxl3VhAsN0BQi5oOfnAkde8WCua796ojAf1Qm+vUgAGpcdWaEd8kuN5ShkRiLBJ0Q==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/react-magnetic-di/-/react-magnetic-di-3.1.3.tgz",
+      "integrity": "sha512-D/8cjLQAhwcvmIXmIhyc3ZF1dQi3tH91S/xxVksFzxxlJQmJMomHokl+ywLQp7cJFWmrMHRMsB+2KGhJI6OQ/Q==",
       "dev": true,
       "engines": {
         "node": ">=10.16.0"
@@ -14114,6 +14325,41 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -15767,6 +16013,19 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@@ -16174,6 +16433,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index 16a1fec..255987f 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "lucide-react": "^0.378.0",
     "polished": "^4.3.1",
     "react-icons": "^5.2.1",
+    "react-select": "^5.8.0",
     "styled-components": "^6.1.8"
   },
   "peerDependencies": {
@@ -68,7 +69,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-magnetic-di": "^3.1.2",
+    "react-magnetic-di": "^3.1.3",
     "storybook": "^8.2.9",
     "storybook-dark-mode": "^4.0.2",
     "typescript": "^5.2.2",
diff --git a/src/components/ValuePicker/ValuePicker.stories.ts b/src/components/ValuePicker/ValuePicker.stories.ts
new file mode 100644
index 0000000..0f1ee0e
--- /dev/null
+++ b/src/components/ValuePicker/ValuePicker.stories.ts
@@ -0,0 +1,49 @@
+import { ValuePicker } from './ValuePicker';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+const meta = {
+	title: 'Components/ValuePicker',
+	component: ValuePicker,
+} satisfies Meta<typeof ValuePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultProps = {
+	label: 'Select value',
+	options: [
+		{ value: 'option-1', label: 'Option 1' },
+		{ value: 'option-2', label: 'Option 2' },
+		{ value: 'option-3', label: 'Option 3' },
+		{ value: 'option-4', label: 'Option 4' },
+		{ value: 'option-5', label: 'Option 5' }
+	],
+	onChange: action('Selection changed'),
+	defaultValue: 'option-2'
+};
+
+const disableControls = {
+	parameters: {
+		controls: {
+			disable: true
+		},
+		actions: {
+			disable: false
+		},
+	}
+};
+
+export const Demo: Story = {
+	args: {
+		...defaultProps
+	},
+	tags: ['excludeFromSidebar']
+};
+
+export const Default: Story = {
+	args: {
+		...defaultProps
+	},
+	...disableControls
+};
diff --git a/src/components/ValuePicker/ValuePicker.style.ts b/src/components/ValuePicker/ValuePicker.style.ts
new file mode 100644
index 0000000..c727bb8
--- /dev/null
+++ b/src/components/ValuePicker/ValuePicker.style.ts
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { readableColor, transparentize } from 'polished';
+
+export const StyledValuePicker = styled.div`
+	label > div > div {
+        background: ${props => props.theme.colors.background};
+        color: ${props => readableColor(props.theme.colors.background)};
+        cursor: pointer;
+		
+		[data-value])	{
+            color: ${props => readableColor(props.theme.colors.background)} !important;
+		}
+    }
+	
+	[role="listbox"] {
+		border: 1px solid ${props => props.theme.colors.subtle};
+        background: ${props => props.theme.colors.background};
+        color: ${props => readableColor(props.theme.colors.background)};
+        cursor: pointer;
+		
+		[role="option"] {
+			color: ${props => readableColor(props.theme.colors.background)};
+			cursor: pointer;
+			text-decoration: underline;
+			text-decoration-color: transparent;
+			
+			&:hover, &:focus, &:focus-visible, &:active {
+				background: ${props => transparentize(0.2, props.theme.colors.subtle)};
+                color: ${props => readableColor(transparentize(0.8, props.theme.colors.subtle))};
+				text-decoration-color: currentColor;
+			}
+			
+			&[aria-selected="true"] {
+				background: ${props => props.theme.colors.primary};
+				color: ${props => readableColor(props.theme.colors.primary)};
+			}
+		}
+	}
+`;
+
+export const StyledValuePickerLabel = styled.label`
+	span {
+		font-size: ${props => props.theme.fontSizes.sm};
+		display: block;
+	}
+`;
\ No newline at end of file
diff --git a/src/components/ValuePicker/ValuePicker.test.tsx b/src/components/ValuePicker/ValuePicker.test.tsx
new file mode 100644
index 0000000..04d915c
--- /dev/null
+++ b/src/components/ValuePicker/ValuePicker.test.tsx
@@ -0,0 +1,83 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithDeps } from '../../../jest.utils';
+import { ValuePicker } from './ValuePicker';
+import { injectable } from 'react-magnetic-di';
+import Select from 'react-select';
+
+const mockChange = jest.fn();
+const defaultProps = {
+	label: 'Select value',
+	options: [
+		{ value: 'option-1', label: 'Option 1' },
+		{ value: 'option-2', label: 'Option 2' },
+		{ value: 'option-3', label: 'Option 3' },
+		{ value: 'option-4', label: 'Option 4' },
+		{ value: 'option-5', label: 'Option 5' }
+	],
+	onChange: mockChange,
+	defaultValue: 'option-2'
+};
+
+describe('<ValuePicker />', () => {
+	it('renders the component', () => {
+		renderWithDeps(<ValuePicker {...defaultProps} />);
+
+		expect(screen.getByTestId('ValuePicker')).toBeVisible();
+	});
+
+	it('has an accessible label', () => {
+		renderWithDeps(<ValuePicker {...defaultProps} />);
+
+		expect(screen.getByRole('combobox')).toHaveAccessibleName('Select value Option 2');
+	});
+
+	it('displays the default value on initial render', () => {
+		renderWithDeps(<ValuePicker {...defaultProps} />);
+
+		expect(screen.getByText('Option 2')).toBeVisible();
+		expect(screen.queryByText('Option 1')).toBeNull();
+	});
+
+	it('supports number options', () => {
+		renderWithDeps(
+			<ValuePicker {...defaultProps}
+				options={[
+					{ value: 100, label: '100' },
+					{ value: 200, label: '200' },
+					{ value: 300, label: '300' }
+				]}
+				defaultValue={200}
+			/>
+		);
+
+		expect(screen.getByText('200')).toBeVisible();
+	});
+
+	it('calls the change handler with the new selection on click', () => {
+		renderWithDeps(
+			<ValuePicker {...defaultProps} />,
+			// Open the menu by default for this test
+			[injectable(Select, (props) => <Select {...props} menuIsOpen />)]
+		);
+
+		screen.getByRole('option', { name: 'Option 3' }).click();
+
+		expect(mockChange).toHaveBeenCalledWith('option-3');
+	});
+
+	it('supports making a selection with keyboard navigation', () => {
+		renderWithDeps(
+			<ValuePicker {...defaultProps} />,
+			// Open the menu by default and move focus to it for this test
+			[injectable(Select, (props) => <Select {...props} menuIsOpen autoFocus />)]
+		);
+
+		const select = screen.getByRole('listbox');
+
+		fireEvent.keyDown(select, { key: 'ArrowDown' });
+		fireEvent.keyDown(select, { key: 'ArrowDown' });
+		fireEvent.keyDown(select, { key: 'Enter' });
+
+		expect(mockChange).toHaveBeenCalledWith('option-4');
+	});
+});
diff --git a/src/components/ValuePicker/ValuePicker.tsx b/src/components/ValuePicker/ValuePicker.tsx
new file mode 100644
index 0000000..7750a42
--- /dev/null
+++ b/src/components/ValuePicker/ValuePicker.tsx
@@ -0,0 +1,62 @@
+import { FC, useCallback, useState } from 'react';
+import { StyledValuePicker, StyledValuePickerLabel } from './ValuePicker.style';
+import Select, { SingleValue } from 'react-select';
+import { useTheme } from 'styled-components';
+
+type ValuePickerOption = {
+	value: number | string;
+	label: string;
+};
+
+type ValuePickerProps = {
+	label: string;
+	options: ValuePickerOption[];
+	// The function to call when the selected value changes; it receives the newly selected value as an argument
+	onChange: (value: number | string) => void;
+	defaultValue?: number | string;
+}
+
+export const ValuePicker: FC<ValuePickerProps> = ({ label, options, onChange, defaultValue }) => {
+	const redbackTheme = useTheme();
+
+	const [selectedOption, setSelectedOption] = useState<ValuePickerOption>(
+		options.find(option => option.value === defaultValue) || options[0]
+	);
+
+	const handleChange = useCallback(
+		(selected: SingleValue<ValuePickerOption>) => {
+			if (selected) {
+				setSelectedOption(selected);
+				onChange(selected.value);
+			}
+		},
+		[onChange]
+	);
+
+	return (
+		<StyledValuePicker data-testid="ValuePicker">
+			<StyledValuePickerLabel>
+				<span>{label}</span>
+				<Select
+					defaultValue={selectedOption}
+					onChange={handleChange}
+					options={options}
+					theme={(theme) => {
+						return ({
+							...theme,
+							colors: {
+								...theme.colors,
+								// 'primary25' is used for the background colour when focused using keyboard arrow navigation,
+								// which there is no way to properly target to override within the styled component or vanilla CSS;
+								// but we can override react-select's theme object here
+								// Ref: https://react-select.com/styles#overriding-the-theme
+								primary25: redbackTheme.colors.subtle,
+								primary: redbackTheme.colors.primary,
+							},
+						});
+					}}
+				/>
+			</StyledValuePickerLabel>
+		</StyledValuePicker>
+	);
+};

From 290454d542948b40cbf4fcbddd42b96e6a506faa Mon Sep 17 00:00:00 2001
From: Leesa Ward <leesa@doubleedesign.com.au>
Date: Mon, 16 Sep 2024 14:06:34 +1000
Subject: [PATCH 3/3] Markdown rendering component (#17)

---
 .../MarkdownContent.stories.ts                | 40 +++++++++++++++++++
 .../MarkdownContent/MarkdownContent.style.ts  | 21 ++++++++++
 .../MarkdownContent/MarkdownContent.test.tsx  | 22 ++++++++++
 .../MarkdownContent/MarkdownContent.tsx       | 15 +++++++
 .../MarkdownContentDemoFile.mdx               | 35 ++++++++++++++++
 vite.config.ts                                |  2 +-
 6 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 src/components/MarkdownContent/MarkdownContent.stories.ts
 create mode 100644 src/components/MarkdownContent/MarkdownContent.style.ts
 create mode 100644 src/components/MarkdownContent/MarkdownContent.test.tsx
 create mode 100644 src/components/MarkdownContent/MarkdownContent.tsx
 create mode 100644 src/components/MarkdownContent/MarkdownContentDemoFile.mdx

diff --git a/src/components/MarkdownContent/MarkdownContent.stories.ts b/src/components/MarkdownContent/MarkdownContent.stories.ts
new file mode 100644
index 0000000..7d8353f
--- /dev/null
+++ b/src/components/MarkdownContent/MarkdownContent.stories.ts
@@ -0,0 +1,40 @@
+import { MarkdownContent } from './MarkdownContent';
+import type { Meta, StoryObj } from '@storybook/react';
+import demoContent from './MarkdownContentDemoFile.mdx';
+
+const meta = {
+	title: 'Components/MarkdownContent',
+	component: MarkdownContent,
+} satisfies Meta<typeof MarkdownContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultProps = {
+	markdown: demoContent
+};
+
+const disableControls = {
+	parameters: {
+		controls: {
+			disable: true
+		},
+		actions: {
+			disable: true
+		},
+	}
+};
+
+export const Demo: Story = {
+	args: {
+		...defaultProps
+	},
+	tags: ['excludeFromSidebar']
+};
+
+export const Default: Story = {
+	args: {
+		...defaultProps
+	},
+	...disableControls
+};
diff --git a/src/components/MarkdownContent/MarkdownContent.style.ts b/src/components/MarkdownContent/MarkdownContent.style.ts
new file mode 100644
index 0000000..e2be591
--- /dev/null
+++ b/src/components/MarkdownContent/MarkdownContent.style.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { shade } from 'polished';
+
+export const StyledMarkdownContent = styled.div`
+	background: ${props => props.theme.colors.background};
+	padding: ${props => props.theme.spacing.md};
+	
+	p {
+		margin-top: 0;
+	}
+	
+	pre:has(code) {
+		padding: ${props => props.theme.spacing.sm};
+		background: ${props => shade(0.05, props.theme.colors.background)};
+		
+		code {
+            font-family: 'Fira Code', 'Source Code Pro', 'Courier New', 'Courier', monospace;
+            font-size: ${props => props.theme.fontSizes.sm};
+		}
+	}
+`;
diff --git a/src/components/MarkdownContent/MarkdownContent.test.tsx b/src/components/MarkdownContent/MarkdownContent.test.tsx
new file mode 100644
index 0000000..4b87161
--- /dev/null
+++ b/src/components/MarkdownContent/MarkdownContent.test.tsx
@@ -0,0 +1,22 @@
+import { screen } from '@testing-library/react';
+import { renderWithDeps } from '../../../jest.utils';
+import { MarkdownContent } from './MarkdownContent';
+
+const mockContent = '## Demo Markdown Content';
+
+const mockMarkdown = jest.fn().mockImplementation(() => {
+	const convertedContent = mockContent.replace(/^##\s(.*)$/, '<h2>$1</h2>');
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(convertedContent, 'text/html');
+	const htmlContent = doc.body.innerHTML;
+
+	return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
+});
+
+describe('<MarkdownContent />', () => {
+	it('renders the content', () => {
+		renderWithDeps(<MarkdownContent markdown={mockMarkdown} />);
+
+		expect(screen.getByRole('heading', { name: 'Demo Markdown Content' })).toBeVisible();
+	});
+});
diff --git a/src/components/MarkdownContent/MarkdownContent.tsx b/src/components/MarkdownContent/MarkdownContent.tsx
new file mode 100644
index 0000000..b27993a
--- /dev/null
+++ b/src/components/MarkdownContent/MarkdownContent.tsx
@@ -0,0 +1,15 @@
+import { FC, type ReactNode } from 'react';
+import { StyledMarkdownContent } from './MarkdownContent.style';
+
+type MarkdownWrapperProps = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	markdown: (props: any) => ReactNode;
+};
+
+export const MarkdownContent: FC<MarkdownWrapperProps> = ({ markdown }) => {
+	return (
+		<StyledMarkdownContent data-testid="MarkdownWrapper">
+			{markdown({})}
+		</StyledMarkdownContent>
+	);
+};
diff --git a/src/components/MarkdownContent/MarkdownContentDemoFile.mdx b/src/components/MarkdownContent/MarkdownContentDemoFile.mdx
new file mode 100644
index 0000000..4f41094
--- /dev/null
+++ b/src/components/MarkdownContent/MarkdownContentDemoFile.mdx
@@ -0,0 +1,35 @@
+# Markdown content example
+
+This is some placeholder text for testing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ante risus. Aliquam id purus vel lectus rhoncus tempus. Morbi posuere dignissim placerat.
+
+## Usage
+
+Note that to run this in an app, you may need to install additional dependencies and adjust your Vite config. Below is one suggested way:
+
+```bash
+npm install @mdx-js/mdx @mdx-js/react @mdx-js/rollup
+```
+
+```javascript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import relay from 'vite-plugin-relay';
+import mdx from '@mdx-js/rollup';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		react(),
+		relay,
+		mdx(),
+	],
+});
+```
+
+## Subheading
+
+The below is some more placeholder text to test different formatting, such as lists.
+
+- Proin diam felis, dapibus accumsan lacus quis, dapibus ullamcorper ante.
+- Nam auctor libero eu quam gravida sagittis eu vitae lorem. Cras sed tristique massa.
+- Fusce egestas, erat id facilisis suscipit, nunc tortor pulvinar eros, quis congue erat arcu nec ex. Donec neque arcu, dapibus id tincidunt et, laoreet nec mauris.
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index a73824b..b99eb0f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,7 +6,7 @@ export default defineConfig({
 	plugins: [
 		react({
 			include: ['**/*.tsx', '**/*.ts']
-		})
+		}),
 	],
 	server: {
 		watch: {