fix: upgrade on website folder

packages/Avatar/src/index.tsx

@@ -1,13 +1,13 @@
 import React, { memo } from 'react'
 import { Box } from '@welcome-ui/box'
 import { ShapeOptions } from '@welcome-ui/shape'
-import { Theme, useTheme } from '@xstyled/styled-components'
+import { useTheme } from '@xstyled/styled-components'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import { getInitials as defaultGetInitials, getSeededColor } from './utils'
 import * as S from './styles'
 
-type SubColor = Theme['colors']
+type SubColor = ReturnType<typeof useTheme>['colors']
 type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
 
 export interface AvatarOptions {

packages/Avatar/src/utils.ts

@@ -1,9 +1,9 @@
-import { Theme } from '@xstyled/styled-components'
+import { type DefaultTheme } from 'styled-components'
 
-export function getSeededColor(colors: Theme['colors'], seed = ''): string {
+export function getSeededColor(colors: DefaultTheme['colors'], seed = ''): string {
   const colorKeys = Object.keys(colors).filter(color => color.startsWith('sub-'))
   const subColorNumber = (seed.length % colorKeys.length) + 1
-  const colorsIndex = `sub-${subColorNumber}` as keyof Theme['colors']
+  const colorsIndex = `sub-${subColorNumber}` as keyof DefaultTheme['colors']
 
   return colors[colorsIndex]
 }

packages/Breadcrumb/src/index.tsx

@@ -7,16 +7,16 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { type DefaultTheme } from 'styled-components'
 import { clamp, throttle } from '@welcome-ui/utils'
 import { ResizeObserver } from '@juggle/resize-observer'
 import { RightIcon } from '@welcome-ui/icons'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
-import { Theme } from '@xstyled/styled-components'
 
 import { Item } from './Item'
 import * as S from './styles'
 
-export type Colors = Theme['colors']
+export type Colors = DefaultTheme['colors']
 
 export interface BreadcrumbOptions {
   children: React.ReactNode | React.ReactNode[]

packages/Breadcrumb/src/styles.ts

@@ -1,4 +1,5 @@
-import styled, { css, th, Theme } from '@xstyled/styled-components'
+import styled, { css, th } from '@xstyled/styled-components'
+import { type DefaultTheme } from 'styled-components'
 import { Box } from '@welcome-ui/box'
 import { hexToRGBA } from '@welcome-ui/utils'
 
@@ -11,15 +12,15 @@ interface GradientProps {
 export const StartGradient = styled.span<GradientProps>(
   ({ gradientBackground, theme }) => css`
     left: 0;
-    background-image: ${gradient(theme as Theme, gradientBackground)};
+    background-image: ${gradient(theme, gradientBackground)};
     transform-origin: left;
   `
 )
 
 export const EndGradient = styled.span<GradientProps>(
   ({ gradientBackground, theme }) => css`
     right: 0;
-    background-image: ${gradient(theme as Theme, gradientBackground, 'left')};
+    background-image: ${gradient(theme, gradientBackground, 'left')};
     transform-origin: right;
   `
 )
@@ -51,7 +52,7 @@ export const List = styled.ol`
   white-space: nowrap;
 `
 
-const gradient = (theme: Theme, gradientBackground: Colors, position = 'right') => {
+const gradient = (theme: DefaultTheme, gradientBackground: Colors, position = 'right') => {
   const gradientColor = th(`colors.${gradientBackground}`)({ theme }) as string
   const transparent = hexToRGBA(gradientColor, 0)
   return `linear-gradient(to ${position}, ${gradientColor}, ${transparent} 100%)`

packages/Icon/src/styles.ts

@@ -1,5 +1,4 @@
-import styled, { css, Theme } from '@xstyled/styled-components'
-import { WuiProps } from '@welcome-ui/system'
+import styled, { css } from '@xstyled/styled-components'
 
 import { IconOptions } from './index'
 
@@ -18,13 +17,14 @@ const iconSvgFilledStyles = css`
   }
 `
 
-type StyledIconProps = Pick<IconOptions, 'size'> &
-  Pick<IconOptions['content'], 'isFlag' | 'stroked'> &
-  WuiProps &
-  Partial<{ alt: string; title: string }>
+type StyledIconProps = Partial<
+  Pick<IconOptions, 'size'> &
+    Pick<IconOptions['content'], 'isFlag' | 'stroked'> &
+    Partial<{ alt: string; title: string }>
+>
 
 export const Icon = styled.svgBox<StyledIconProps>(({ isFlag, size = 'md', stroked, theme }) => {
-  const formattedSize = theme.icons[size as keyof Theme['icons']] || size
+  const formattedSize = theme.icons[size as keyof typeof theme.icons] || size
   return css`
     ${!isFlag && (stroked ? iconSvgStrokedStyles : iconSvgFilledStyles)};
     width: ${formattedSize};

packages/Loader/src/styles.ts

@@ -1,4 +1,4 @@
-import styled, { css, keyframes, Theme } from '@xstyled/styled-components'
+import styled, { css, keyframes } from '@xstyled/styled-components'
 import { Shape } from '@welcome-ui/shape'
 
 import { Size } from '.'
@@ -23,7 +23,7 @@ export interface LoadingDotOptions {
 }
 
 export const LoadingDot = styled.box.attrs({ as: Shape })<LoadingDotOptions>(({ size, theme }) => {
-  const sizeValue = theme.loaders?.[size as keyof Theme['loaders']] || size
+  const sizeValue = theme.loaders?.[size as keyof typeof theme.loaders] || size
   const formattedSize = typeof sizeValue === 'number' ? theme.toRem(sizeValue) : sizeValue
   return css`
     width: ${formattedSize};

packages/Select/docs/examples/allow-unselect-from-list.tsx

@@ -22,7 +22,7 @@ const Example = () => {
     <Select
       allowUnselectFromList
       disableCloseOnSelect
-      icon={<LinkIcon color="dark-900" label="Social networks" />}
+      icon={<LinkIcon color="dark-900" name="Social networks" />}
       isMultiple
       isSearchable
       name="welcome"

packages/Select/docs/examples/icon.tsx

@@ -18,7 +18,7 @@ const Example = () => {
 
   return (
     <Select
-      icon={<WttjIcon color="dark-900" label="Welcome" />}
+      icon={<WttjIcon color="dark-900" name="Welcome" />}
       name="welcome"
       onChange={handleChange}
       options={ITEMS}

packages/Toast/src/Growl.tsx

@@ -11,7 +11,7 @@ export interface GrowlOptions {
   variant?: Variant
   onClose?: () => void
   hasCloseButton?: boolean
-  icon?: JSX.Element
+  icon?: string | JSX.Element
 }
 
 export type GrowlProps = CreateWuiProps<'div', GrowlOptions>

packages/Toast/src/Snackbar.tsx

@@ -9,9 +9,9 @@ import { Variant } from './index'
 
 export interface SnackbarOptions {
   variant?: Variant
-  onClose: () => void
+  onClose?: () => void
   hasCloseButton?: boolean
-  icon?: JSX.Element
+  icon?: string | JSX.Element
 }
 
 export type SnackbarProps = CreateWuiProps<'div', SnackbarOptions>

packages/Toast/src/styles.ts

@@ -1,11 +1,10 @@
 import styled, { css, th } from '@xstyled/styled-components'
-import { Box } from '@welcome-ui/box'
 import { Alert } from '@welcome-ui/alert'
 
 import { GrowlOptions } from './Growl'
 import { SnackbarOptions } from './Snackbar'
 
-export const ToastWrapper = styled(Box)<{ isBottom: boolean }>(
+export const ToastWrapper = styled.box<{ isBottom: boolean }>(
   ({ isBottom }) => css`
     ${th('toasts.default')}
     ${isBottom ? th('toasts.bottom') : th('toasts.top')}
@@ -33,18 +32,16 @@ export const Growl = styled(Alert)<GrowlOptions>(
   `
 )
 
-export const Title = styled(Box)(
-  () => css`
-    display: flex;
-    align-items: center;
-    padding-bottom: xs;
-    ${th('toasts.growls.title')};
+export const Title = styled.box`
+  display: flex;
+  align-items: center;
+  padding-bottom: xs;
+  ${th('toasts.growls.title')};
 
-    & > *:first-child {
-      flex-shrink: 0;
-    }
-  `
-)
+  & > *:first-child {
+    flex-shrink: 0;
+  }
+`
 
 export const Snackbar = styled(Alert)<SnackbarOptions>(
   ({ hasCloseButton }) => css`

tsconfig.json

@@ -10,6 +10,8 @@
   "include": [
     "packages/**/src/*.ts",
     "packages/**/src/*.tsx",
+    "packages/**/docs/examples/*.ts",
+    "packages/**/docs/examples/*.tsx",
     "packages/**/tests/*.ts",
     "packages/**/tests/*.tsx",
     "types"

types/styled.d.ts

@@ -1,13 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 import 'styled-components'
-import '@xstyled/styled-components'
-
 import { WuiTheme } from '@welcome-ui/core'
 
-declare module '@xstyled/styled-components' {
-  export interface Theme extends WuiTheme {}
-}
-
 declare module 'styled-components' {
   export interface DefaultTheme extends WuiTheme {}
 }

website/build-app/components/Theme/index.tsx

@@ -36,7 +36,7 @@ export const Theme = ({ entry }: ColorsProps) => {
             {typeof value === 'number' && 'px'}
           </Text>
           {typeof value === 'string' && (value.endsWith('rem') || value === '0') && (
-            <Text color="dark-600">({theme.toPx(value.replace('rem', ''))})</Text>
+            <Text color="dark-600">({theme.toPx(Number(value.replace('rem', '')))})</Text>
           )}
         </Grid>
       ))}

website/build-app/registry.tsx

@@ -4,10 +4,10 @@
 
 import * as React from 'react'
 import { useServerInsertedHTML } from 'next/navigation'
-import { ServerStyleSheet, StyleSheetManager, StyleSheetManagerProps } from 'styled-components'
+import { type IStyleSheetManager, ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
 interface StyledComponentsRegistryProps {
-  children: StyleSheetManagerProps['children']
+  children: IStyleSheetManager['children']
 }
 
 const StyledComponentsRegistry = ({ children }: StyledComponentsRegistryProps) => {

website/types/styled.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import 'styled-components'
+import { WuiTheme } from '@welcome-ui/core'
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends WuiTheme {}
+}