docs(next): update example with next

examples/next/src/components/GithubAndDocumentationButtons.tsx

@@ -1,4 +1,5 @@
-import { Button, Icon, Stack } from '@ultraviolet/ui'
+import { GithubIcon } from '@ultraviolet/icons'
+import { Button, Stack } from '@ultraviolet/ui'
 
 const GithubAndDocumentationButtons = () => (
   <Stack gap={2} direction="row">
@@ -8,7 +9,7 @@ const GithubAndDocumentationButtons = () => (
       href="https://github.com/scaleway/ultraviolet"
       aria-label="github"
     >
-      <Icon name="github" size={32} />
+      <GithubIcon size="large" />
     </Button>
     <Button
       href="https://storybook.ultraviolet.scaleway.com/"

examples/next/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import { Breakpoint, Icon, Toggle } from '@ultraviolet/ui'
+import { MoonIcon, SunIcon } from '@ultraviolet/icons'
+import { Breakpoint, Toggle } from '@ultraviolet/ui'
 import { APP_MAX_WIDTH } from '../constants'
 import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
 import Logo from './Logo'
@@ -46,13 +47,13 @@ const TopBar = () => {
           <Breakpoint up="medium">
             <GithubAndDocumentationButtons />
           </Breakpoint>
-          <Icon size={20} name="sun" />
+          <SunIcon size="small" />
           <Toggle
             name="darkMode"
             checked={theme === 'dark'}
             onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
           />
-          <Icon size={20} name="moon" />
+          <MoonIcon size="small" />
         </HorizontalStack>
       </HeaderRow>
     </Header>

examples/next/src/pages/_app.tsx

@@ -38,7 +38,6 @@ const App = ({ Component, pageProps }: AppProps) => {
       ...COMMON_THEME_PROPS,
       colors: {
         primary: {
-          textWeak: '#A395FF',
           text: '#4F0599',
         },
       },

examples/next/src/pages/advanced/OpenSource.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
-import { Icon, Link, Stack, Text, down } from '@ultraviolet/ui'
+import { GithubIcon } from '@ultraviolet/icons'
+import { Link, Stack, Text, down } from '@ultraviolet/ui'
 import swForm from '../../assets/icons/icon-scaleway-form.svg'
 import swLib from '../../assets/icons/icon-scaleway-lib.svg'
 import Card from '../../components/Card'
@@ -41,7 +42,7 @@ const OpenSource = () => (
                 Build amazing forms with Ultraviolet UI and React Final Form 🚀
               </StyledDescription>
               <Stack gap={1} direction="row">
-                <Icon name="github" size={20} />
+                <GithubIcon size="small" />
                 <Link
                   href="https://github.com/scaleway/scaleway-form"
                   target="_blank"
@@ -61,7 +62,7 @@ const OpenSource = () => (
                 Scaleway Lib is a set of NPM packages used at Scaleway
               </StyledDescription>
               <Stack gap={1} direction="row">
-                <Icon name="github" size={20} />
+                <GithubIcon size="small" />
                 <Link
                   href="https://github.com/scaleway/scaleway-lib"
                   target="_blank"

examples/next/src/pages/login/login.tsx

@@ -59,7 +59,7 @@ const LogIn = () => {
     <StyledLoginContainer>
       <Form methods={methods} errors={mockErrors} onSubmit={handleSubmit}>
         <Stack gap={1} alignItems="center">
-          <IdIcon size="1.7em" />
+          <IdIcon size="small" />
           <Text as="h1" variant="heading">
             Login form
           </Text>

examples/next/src/pages/login/signup.tsx

@@ -94,7 +94,7 @@ const SignUp = () => {
         onSubmit={handleSubmit}
       >
         <Stack gap={1} alignItems="center">
-          <ProfileIcon size="1.7em" />
+          <ProfileIcon size="small" />
           <Text as="div" placement="center" variant="heading">
             Sign up form
           </Text>