Merge branch 'next' into add-dark-mode

# Conflicts:
#	src/components/Datepicker/Datepicker.tsx
#	src/components/InfoBanner/InfoBanner.tsx
#	src/components/Input/BoxedInput.ts
#	src/components/SelectList/SelectList.tsx
#	src/components/SelectList/docs/SelectList.stories.tsx
#	src/components/Tag/Tag.tsx
#	src/components/Text/Text.tsx
#	src/components/Tooltip/Tooltip.tsx

.eslintignore

@@ -12,3 +12,5 @@ assets/
 fixtures/
 
 src/icons/
+
+src/codemods/

.github/workflows/library.yml

@@ -29,7 +29,7 @@ jobs:
               run: npm run test
 
     release:
-        if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/next'
+        if: github.ref == 'refs/heads/main'
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3

.storybook/preview-head.html

@@ -3,5 +3,12 @@
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 <link rel="manifest" href="/site.webmanifest" />
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+<link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,600,600i,700,800" rel="stylesheet" />
 <meta name="msapplication-TileColor" content="#da532c" />
 <meta name="theme-color" content="#ffffff" />
+
+<style>
+    body {
+        font-family: 'Open Sans', sans-serif;
+    }
+</style>

.stylelintignore

@@ -0,0 +1,2 @@
+node_modules/
+src/codemods/__testfixtures__/

docs/components/PlacementMappingsTable.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table, TableCell, TableHeaderCell, TableRow } from '../../src/components/Table';
+
+export const PlacementMappingsTable: React.FC = () => (
+    <Table rowStyle="zebra" rowSize="small">
+        <thead>
+            <TableRow>
+                <TableHeaderCell>react-tether</TableHeaderCell>
+                <TableHeaderCell>react-popper (new)</TableHeaderCell>
+            </TableRow>
+        </thead>
+        <tbody>
+            <TableRow>
+                <TableCell>bottom-left</TableCell>
+                <TableCell>bottom-start</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>bottom-center</TableCell>
+                <TableCell>bottom</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>bottom-right</TableCell>
+                <TableCell>bottom-end</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>top-left</TableCell>
+                <TableCell>top-start</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>top-center</TableCell>
+                <TableCell>top</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>top-right</TableCell>
+                <TableCell>top-end</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>center-left</TableCell>
+                <TableCell>left</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell>center-right</TableCell>
+                <TableCell>right</TableCell>
+            </TableRow>
+        </tbody>
+    </Table>
+);

docs/migrating.storybook.mdx

@@ -1,30 +1,77 @@
 import { Meta } from '@storybook/blocks';
 
+import { PlacementMappingsTable } from './components/PlacementMappingsTable';
+
 <Meta title="Migrating" />
 
 # Migrating
 
-Migrating from one major version to the next with ease.
+Migrate to the next Wave major version with ease.
+
+## Codemods
+
+Codemods are scripted transformations that you can run on your code to take care of most of the repetitive work involved
+in upgrading from one major version to the next. The codemod instructions for each major release assume that your code
+has already been upgraded to the previous major release. If this is not the case, you should run the codemods for all
+previous major versions first. Beware that codemods are not 100% fool-proof and may break your code.
+
+If you're working in a typescript environment, you need to add `--parser=tsx` to the command in each codemod command to
+allow jscodeshift to parse your typescript/jsx files.
 
 ## From v1 to v2
 
-A codemod exists to upgrade your components for this version.
+The following codemods exist to upgrade your components for version 2. In order to apply the transformations in your project you simply need to run the
+command for your desired codemod pointing to your project's source path.
+
+### Button and TextButton block property
+
+The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property
+directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag.
 
 ```bash
-npx jscodeshift -t node_modules/@freenow/wave/codemods/v2.ts path/to/src
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/block-to-width-100.js path/to/src
 ```
 
-### Button and TextButton
+### Colors to CSS variables
 
-The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property
-directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag.
+Our theme colors structure has changed significantly in this major. In order to use Wave colors in your project you should now use the CSS variables
+that our theme brings.
 
-## Codemods
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-vars.js path/to/src
+```
 
-Codemods are scripted transformations that you can run on your code to take care of most of the repetitive work involved
-in upgrading from one major version to the next. The codemod instructions for each major release assume that your code
-has already been upgraded to the previous major release. If this is not the case, you should run the codemods for all
-previous major versions first. Beware that codemods are not 100% fool-proof and may break your code.
+Disclaimer: This codemod transforms usages of `Colors` to our bare colors CSS variables to ensure we don't introduce breaking changes, that being said,
+we recommend using semantic tokens instead as a best practice and offer a `getSemanticValue` API for just that.
 
-If you're working in a typescript environment, you need to add `--parser=tsx` to the command in each codemod command to
-allow jscodeshift to parse your typescript/jsx files.
+### Deprecated icons
+
+We had some deprecated icons that have been deleted in this major, in case you used any of them you need to use their valid (non-deprecated) counterpart from now on.
+This won't change how your icons look in any way since we already exported the deprecated icons as wrappers of valid ones.
+
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/deprecated-icons.js path/to/src
+```
+
+### Text weak property
+
+The `weak` property was the initial way to indicate secondary information in a `Text` component, it has been deprecated for a while in favour of
+the more semantic `secondary` prop.
+
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/weak-to-secondary.js path/to/src
+```
+
+### Tooltip placement property
+
+In a previous minor release we swapped our positioning engine from `react-tether` to `react-popper`, this came with changes in the placement options
+of the engine, but to not introduce breaking changes we kept supporting the previous `react-tether` options as well. From now on you need to use the new
+`react-popper` options. This change only affects the `Tooltip` component `placement` prop.
+
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/tooltip-placement.js path/to/src
+```
+
+You can find the mappings in the following table:
+
+<PlacementMappingsTable />