Merge branch 'beta' into refactor/pagination-vanilla

Author: matthprost

.changeset/cute-carrots-smell.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+Refactor component `FAQ` to use vanilla extract instead of Emotion

.changeset/eight-glasses-warn.md

@@ -2,14 +2,13 @@
 "@ultraviolet/ui": major
 ---
 
-⚠️ BREAKING CHANGES ⚠️ 
+! BREAKING CHANGES ! 
 In order to start using the new style, you will need to import new `<ThemeProvider />` and import new CSS generated at build time:
 
 ```tsx
 import { ThemeProvider } from '@emotion/react'
-import { consoleLightTheme } from '@ultraviolet/themes'
+import { consoleLightTheme, ThemeProvider as ThemeProviderUV } from '@ultraviolet/themes'
 
-import { ThemeProvider as ThemeProviderUV } from "@ultraviolet/ui" // ThemeProvider that generate the theme applied to components
 import "@ultraviolet/ui/styles" // Generated CSS used by components
 
 export const App = (children) => {

.changeset/hungry-laws-joke.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor `<Pagination />` to use vanilla extract

.changeset/pre.json

@@ -21,7 +21,9 @@
     "breezy-hounds-bake",
     "bumpy-walls-sort",
     "clean-hotels-kneel",
+    "cold-monkeys-flow",
     "cuddly-kids-taste",
+    "cute-carrots-smell",
     "cute-moments-shine",
     "dark-pugs-worry",
     "deep-peas-live",
@@ -32,6 +34,7 @@
     "evil-loops-check",
     "famous-stars-marry",
     "few-horses-wash",
+    "fifty-streets-check",
     "fine-buttons-call",
     "fluffy-bananas-type",
     "fuzzy-icons-carry",
@@ -44,6 +47,7 @@
     "icy-camels-swim",
     "icy-jobs-smile",
     "lazy-lights-invent",
+    "little-buckets-thank",
     "little-dogs-type",
     "major-clocks-throw",
     "modern-terms-know",
@@ -61,6 +65,7 @@
     "real-streets-ring",
     "real-suns-repair",
     "rich-crabs-cough",
+    "ripe-tigers-jump",
     "rotten-coins-glow",
     "rotten-hairs-boil",
     "rotten-kings-dig",
@@ -77,11 +82,14 @@
     "strong-cameras-crash",
     "strong-cats-float",
     "swift-wombats-arrive",
+    "tall-trains-sleep",
     "tangy-bars-retire",
+    "tangy-news-own",
     "ten-wolves-battle",
     "tender-flowers-drive",
     "tender-oranges-relax",
     "three-worms-poke",
+    "two-colts-look",
     "vast-carrots-post",
     "violet-jobs-reply",
     "whole-actors-prove",

.changeset/ripe-tigers-jump.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+Refactor component `CodeEditor` to use vanilla extract instead of Emotion

.changeset/seven-teeth-shine.md

@@ -0,0 +1,9 @@
+---
+"@ultraviolet/illustrations": major
+"@ultraviolet/themes": major
+"@ultraviolet/icons": major
+"@ultraviolet/plus": major
+"@ultraviolet/ui": major
+---
+
+Theme provider has been moved to `@ultraviolet/themes` package. `@ultraviolet/ui` imports it internally and export `ThemeProvider` and `useTheme` hook for convenience.

.changeset/tangy-news-own.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Checkbox`: fix classname

.storybook/components/DocsContainer.tsx

@@ -5,12 +5,12 @@ import {
   DocsContainer as BaseContainer,
   Unstyled,
 } from '@storybook/addon-docs/blocks'
-import { consoleLightTheme as lightTheme } from '@ultraviolet/themes'
+import { consoleLightTheme as lightTheme, ThemeProvider as ThemeProviderUV } from '@ultraviolet/themes'
 import type { ReactNode } from 'react'
 import { cloneElement, isValidElement, useState } from 'react'
 import { globalStyles } from './globalStyle'
 import '@ultraviolet/fonts/fonts.css'
-import { GlobalAlert, ThemeProvider as ThemeProviderUV } from '@ultraviolet/ui'
+import { GlobalAlert } from '@ultraviolet/ui'
 
 type ExtraProps = {
   /**

.storybook/preview.tsx

@@ -6,14 +6,14 @@ import {
   consoleDarkTheme as darkTheme,
   consoleDarkerTheme as darkerTheme,
   consoleLightTheme as lightTheme,
+  ThemeProvider as ThemeProviderUI
 } from '@ultraviolet/themes'
 import DocsContainer from './components/DocsContainer'
 import Page from './components/Page'
 import { globalStyles } from './components/globalStyle'
 import { dark, light } from './storybookThemes'
 import '@ultraviolet/fonts/fonts.css'
 import { scan } from "react-scan"
-import { ThemeProvider as ThemeProviderUI } from '@ultraviolet/ui'
 
 const BREAKPOINT_ORDER = [
   'xlarge',
@@ -155,7 +155,7 @@ const decorators = [
 
       return darkerTheme
     }
-    
+
     return (
       <>
         <ThemeProviderUI theme={finalTheme()}>

examples/next/src/components/CopyBoxCommand.tsx

@@ -1,5 +1,5 @@
-import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
+import { useTheme } from '@ultraviolet/themes'
 import { Stack, Tabs } from '@ultraviolet/ui'
 import type { ReactElement } from 'react'
 import { Children, isValidElement, useState } from 'react'