11import Box from "@mui/material/Box" ;
22import Chip from "@mui/material/Chip" ;
3- import { makeStyles } from "@mui/styles" ;
43import Typography from "@mui/material/Typography" ;
4+ import { type FC , type ReactNode } from "react" ;
5+ import { type Interpolation , type Theme } from "@emotion/react" ;
56import { Stack } from "components/Stack/Stack" ;
6- import { FC , ReactNode } from "react" ;
77
88export interface PaywallProps {
99message :string ;
@@ -13,17 +13,16 @@ export interface PaywallProps {
1313
1414export const Paywall :FC < React . PropsWithChildren < PaywallProps > > = ( props ) => {
1515const { message, description, cta} = props ;
16- const styles = useStyles ( ) ;
1716
1817return (
19- < Box className = { styles . root } >
20- < div className = { styles . header } >
18+ < Box css = { styles . root } >
19+ < div css = { styles . header } >
2120< Stack direction = "row" alignItems = "center" justifyContent = "center" >
22- < Typography variant = "h5" className = { styles . title } >
21+ < Typography variant = "h5" css = { styles . title } >
2322{ message }
2423</ Typography >
2524< Chip
26- className = { styles . enterpriseChip }
25+ css = { styles . enterpriseChip }
2726label = "Enterprise"
2827size = "small"
2928color = "primary"
@@ -34,7 +33,7 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
3433< Typography
3534variant = "body2"
3635color = "textSecondary"
37- className = { styles . description }
36+ css = { styles . description }
3837>
3938{ description }
4039</ Typography >
@@ -45,8 +44,8 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
4544) ;
4645} ;
4746
48- const useStyles = makeStyles ( ( theme ) => ( {
49- root :{
47+ const styles = {
48+ root :( theme ) => ( {
5049display :"flex" ,
5150flexDirection :"column" ,
5251justifyContent :"center" ,
@@ -57,24 +56,24 @@ const useStyles = makeStyles((theme) => ({
5756backgroundColor :theme . palette . background . paper ,
5857border :`1px solid${ theme . palette . divider } ,
5958borderRadius :theme . shape . borderRadius ,
60- } ,
61- header :{
59+ } ) ,
60+ header :( theme ) => ( {
6261marginBottom :theme . spacing ( 3 ) ,
63- } ,
62+ } ) ,
6463title :{
6564fontWeight :600 ,
6665fontFamily :"inherit" ,
6766} ,
68- description :{
67+ description :( theme ) => ( {
6968marginTop :theme . spacing ( 1 ) ,
7069fontFamily :"inherit" ,
7170maxWidth :420 ,
7271lineHeight :"160%" ,
73- } ,
74- enterpriseChip :{
72+ } ) ,
73+ enterpriseChip :( theme ) => ( {
7574background :theme . palette . success . dark ,
7675color :theme . palette . success . contrastText ,
7776border :`1px solid${ theme . palette . success . light } ,
7877fontSize :13 ,
79- } ,
80- } ) ) ;
78+ } ) ,
79+ } satisfies Record < string , Interpolation < Theme > > ;