Fixed theme inconsistencies and updated to Charka 2.2.1

.changeset/friendly-walls-vanish.md

@@ -0,0 +1,42 @@
+---
+'palette-docs': minor
+'website': minor
+'@saas-ui/auth': minor
+'@saas-ui/banner': minor
+'@saas-ui/button': minor
+'@saas-ui/card': minor
+'@saas-ui/clerk': minor
+'@saas-ui/collapse': minor
+'@saas-ui/data-table': minor
+'@saas-ui/forms': minor
+'@saas-ui/hooks': minor
+'@saas-ui/hotkeys': minor
+'@saas-ui/input-right-button': minor
+'@saas-ui/layout': minor
+'@saas-ui/list': minor
+'@saas-ui/menu': minor
+'@saas-ui/modals': minor
+'@saas-ui/nprogress': minor
+'@saas-ui/number-input': minor
+'@saas-ui/palette': minor
+'@saas-ui/password-input': minor
+'@saas-ui/persona': minor
+'@saas-ui/pin-input': minor
+'@saas-ui/property': minor
+'@saas-ui/provider': minor
+'@saas-ui/radio': minor
+'@saas-ui/react': minor
+'@saas-ui/react-utils': minor
+'@saas-ui/search-input': minor
+'@saas-ui/select': minor
+'@saas-ui/snackbar': minor
+'@saas-ui/stepper': minor
+'@saas-ui/system': minor
+'@saas-ui/theme': minor
+'@saas-ui/web3': minor
+'@saas-ui/next-workspaces': minor
+'@saas-ui/props-docs': minor
+'@saas-ui/test-utils': minor
+---
+
+Updated to Chakra UI 2.2.1

.changeset/soft-queens-collect.md

@@ -0,0 +1,40 @@
+---
+'@saas-ui/auth': patch
+'@saas-ui/banner': patch
+'@saas-ui/button': patch
+'@saas-ui/card': patch
+'@saas-ui/clerk': patch
+'@saas-ui/collapse': patch
+'@saas-ui/data-table': patch
+'@saas-ui/forms': patch
+'@saas-ui/hooks': patch
+'@saas-ui/hotkeys': patch
+'@saas-ui/input-right-button': patch
+'@saas-ui/layout': patch
+'@saas-ui/list': patch
+'@saas-ui/menu': patch
+'@saas-ui/modals': patch
+'@saas-ui/nprogress': patch
+'@saas-ui/number-input': patch
+'@saas-ui/palette': patch
+'@saas-ui/password-input': patch
+'@saas-ui/persona': patch
+'@saas-ui/pin-input': patch
+'@saas-ui/property': patch
+'@saas-ui/provider': patch
+'@saas-ui/radio': patch
+'@saas-ui/react': patch
+'@saas-ui/react-utils': patch
+'@saas-ui/search-input': patch
+'@saas-ui/select': patch
+'@saas-ui/snackbar': patch
+'@saas-ui/stepper': patch
+'@saas-ui/system': patch
+'@saas-ui/theme': patch
+'@saas-ui/web3': patch
+'@saas-ui/next-workspaces': patch
+'@saas-ui/props-docs': patch
+'@saas-ui/test-utils': patch
+---
+
+Fixed all theme onconsistencies.

packages/saas-ui-auth/src/components/auth-form.tsx

@@ -2,13 +2,12 @@ import * as React from 'react'
 
 import {
   chakra,
-  useStyles,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
   useMultiStyleConfig,
   SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/react'
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
@@ -23,6 +22,8 @@ import { AuthTypeEnum, AuthActionEnum } from '../provider'
 import { ForgotPasswordForm } from './forgot-password-form'
 import { UpdatePasswordForm } from './update-password-form'
 
+const [StylesProvider, useStyles] = createStylesContext('AutoForm')
+
 export interface AuthFormProps
   extends Omit<
       FormProps<any>,

packages/saas-ui-banner/src/banner.tsx

@@ -3,13 +3,12 @@ import {
   chakra,
   forwardRef,
   omitThemingProps,
-  StylesProvider,
   SystemStyleObject,
   ThemingProps,
   useMultiStyleConfig,
-  useStyles,
   HTMLChakraProps,
   As,
+  createStylesContext,
 } from '@chakra-ui/system'
 import { callAllHandlers, cx, __DEV__ } from '@chakra-ui/utils'
 import { useId } from '@chakra-ui/hooks'
@@ -28,6 +27,8 @@ import {
   BannerMotion,
 } from './banner-transition'
 
+const [StylesProvider, useStyles] = createStylesContext('Banner')
+
 const STATUSES = {
   info: { icon: InfoIcon, colorScheme: 'blue' },
   warning: { icon: WarningIcon, colorScheme: 'orange' },

packages/saas-ui-card/src/card.tsx

@@ -4,19 +4,20 @@ import {
   forwardRef,
   HTMLChakraProps,
   ThemingProps,
-  StylesProvider,
-  useStyles,
   omitThemingProps,
   SystemProps,
   SystemStyleObject,
   ThemeTypings,
   useMultiStyleConfig,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
 import { ButtonGroup, ButtonGroupProps } from '@saas-ui/button'
 
+const [StylesProvider, useStyles] = createStylesContext('Card')
+
 type Variants = 'plain' | 'outline' | 'solid'
 
 interface CardOptions {

packages/saas-ui-data-table/src/data-table.tsx

@@ -21,7 +21,6 @@ import {
   Th,
   Td,
   Checkbox,
-  useStyles,
 } from '@chakra-ui/react'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
@@ -198,11 +197,8 @@ export const DataTableSort = <Data extends object>(
 ) => {
   const { column, ...rest } = props
 
-  const styles = useStyles()
-
   const sorterStyles = {
     ms: 2,
-    ...styles.sorter,
   }
 
   if (column.id === 'selection') {

packages/saas-ui-forms/src/object-field.tsx

@@ -4,7 +4,7 @@ import {
   FormLabel,
   FormLabelProps,
   ResponsiveValue,
-  useStyles,
+  useStyleConfig,
 } from '@chakra-ui/react'
 import { __DEV__ } from '@chakra-ui/utils'
 
@@ -21,8 +21,8 @@ export interface ObjectFieldProps extends FieldProps {
 }
 
 export const FormLegend = (props: FormLabelProps) => {
-  const styles = useStyles()
-  return <FormLabel as="legend" sx={styles.legend} {...props} />
+  const styles = useStyleConfig('FormLegend')
+  return <FormLabel as="legend" sx={styles} {...props} />
 }
 
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {

packages/saas-ui-hotkeys/src/hotkeys.tsx

@@ -2,13 +2,11 @@ import * as React from 'react'
 import {
   chakra,
   forwardRef,
-  StylesProvider,
-  useStyles,
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
   useMultiStyleConfig,
-  SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/system'
 import { cx, __DEV__ } from '@chakra-ui/utils'
 import { createContext } from '@chakra-ui/react-utils'
@@ -17,6 +15,8 @@ import { Kbd } from '@chakra-ui/layout'
 
 import { SearchInput } from '@saas-ui/search-input'
 
+const [StylesProvider, useStyles] = createStylesContext('Hotkeys')
+
 const regExpSyntaxCharacter = /[.*+?^${}()|[\]\\]/g
 
 function escapeRegExp(value: string) {

packages/saas-ui-layout/src/empty-state.tsx

@@ -7,10 +7,8 @@ import {
   chakra,
   As,
   ThemingProps,
-  StylesProvider,
   omitThemingProps,
   useMultiStyleConfig,
-  useStyles,
   ButtonGroup,
   IconProps,
   SystemProps,
@@ -19,10 +17,13 @@ import {
   HeadingProps,
   TextProps,
   ButtonGroupProps,
+  createStylesContext,
 } from '@chakra-ui/react'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
+const [StylesProvider, useStyles] = createStylesContext('EmptyState')
+
 export interface EmptyStateProps
   extends Omit<EmptyStateContainerProps, 'title'> {
   title?: React.ReactNode

packages/saas-ui-list/src/list.tsx

@@ -3,8 +3,6 @@ import * as React from 'react'
 import {
   chakra,
   forwardRef,
-  useStyles,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
@@ -13,6 +11,7 @@ import {
   As,
   useColorModeValue,
   useMultiStyleConfig,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
@@ -21,6 +20,8 @@ import { ButtonGroup, ButtonGroupProps } from '@saas-ui/button'
 
 import { Icon } from '@chakra-ui/icon'
 
+const [StylesProvider, useStyles] = createStylesContext('List')
+
 interface ListOptions {
   /**
    * An array of list items

packages/saas-ui-modals/src/menu.tsx

@@ -3,17 +3,19 @@ import * as React from 'react'
 import {
   ModalFooter,
   chakra,
-  StylesProvider,
-  useStyles,
   forwardRef,
   useMenuContext,
   useMenuList,
+  createStylesContext,
+  useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 import { BaseModal, BaseModalProps } from './modal'
 
 import { Menu, MenuListProps } from '@saas-ui/menu'
 
+const [StylesProvider, useStyles] = createStylesContext('MenuDialog')
+
 export interface MenuDialogProps extends BaseModalProps {
   /**
    * The modal footer, wrapped with `ModalFooter`
@@ -48,7 +50,7 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
 
     const ownProps = useMenuList(rest, ref)
 
-    const styles = useStyles()
+    const styles = useMultiStyleConfig('Menu', props)
 
     return (
       <BaseModal

packages/saas-ui-persona/src/persona.tsx

@@ -8,8 +8,6 @@ import {
   Tooltip,
   chakra,
   forwardRef,
-  useStyles,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   SystemStyleObject,
@@ -18,10 +16,13 @@ import {
   useTheme,
   useMultiStyleConfig,
   omitThemingProps,
+  createStylesContext,
 } from '@chakra-ui/react'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
+const [StylesProvider, useStyles] = createStylesContext('Persona')
+
 export interface PresenceOptions {
   [presence: string]: {
     label: string

packages/saas-ui-property/src/property.tsx

@@ -4,20 +4,21 @@ import {
   chakra,
   forwardRef,
   useMultiStyleConfig,
-  useStyles,
   useColorModeValue,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   SystemProps,
   SystemStyleObject,
   omitThemingProps,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
 import { List, ListProps } from '@saas-ui/list'
 
+const [StylesProvider, useStyles] = createStylesContext('Property')
+
 interface PropertyOptions {
   label?: React.ReactNode
   value?: React.ReactNode

packages/saas-ui-snackbar/src/use-snackbar.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 
 import {
   chakra,
-  useStyles,
   useTheme,
   useToast,
   UseToastOptions,
@@ -15,16 +14,16 @@ import {
   CloseButton,
   ButtonGroup,
   Spinner,
-  useColorModeValue,
+  useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 const AlertSpinner: React.FC<AlertIconProps> = (props) => {
-  const styles = useStyles()
+  const styles = useMultiStyleConfig('Alert', props)
   return (
     <chakra.span
       display="inherit"
-      {...props}
       alignItems="center"
+      {...props}
       __css={styles.icon}
     >
       <Spinner size="sm" />

packages/saas-ui-stepper/src/stepper.tsx

@@ -7,9 +7,8 @@ import {
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
-  useStyles,
-  StylesProvider,
   SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { CheckIcon, Icon } from '@chakra-ui/icons'
@@ -26,6 +25,8 @@ import {
   UseStepperProps,
 } from './use-stepper'
 
+const [StylesProvider, useStyles] = createStylesContext('Stepper')
+
 export interface StepperProps
   extends UseStepperProps,
     HTMLChakraProps<'div'>,