fix: test

packages/Accordion/package.json

@@ -47,7 +47,6 @@
   },
   "dependencies": {
     "@ariakit/react": "0.4.3",
-    "@welcome-ui/box": "^5.20.0",
     "@welcome-ui/icons": "^5.20.0",
     "@welcome-ui/system": "^5.17.1"
   },

packages/Accordion/src/styles.ts

@@ -1,8 +1,7 @@
 import styled, { th } from '@xstyled/styled-components'
 import * as Ariakit from '@ariakit/react'
-import { Box } from '@welcome-ui/box'
 
-export const Accordion = styled.divBox`
+export const Accordion = styled.box`
   ${th('accordions.wrapper')};
   transition: medium;
 
@@ -11,7 +10,7 @@ export const Accordion = styled.divBox`
   }
 `
 
-export const Icon = styled(Box)`
+export const Icon = styled.box`
   flex-shrink: 0;
   ${th('accordions.icon')};
   transform: rotate3d(0);

packages/Alert/src/styles.ts

@@ -1,9 +1,9 @@
-import styled, { css, th } from '@xstyled/styled-components'
+import styled, { css, system, th } from '@xstyled/styled-components'
 import { Text } from '@welcome-ui/text'
 
 import { AlertOptions } from './index'
 
-export const Alert = styled.divBox<AlertOptions>(
+export const Alert = styled.box<AlertOptions>(
   ({ isFullWidth, size, variant }) => css`
     position: relative;
     display: flex;
@@ -24,6 +24,7 @@ export const Title = styled(Text).attrs(({ variant }) => ({
     margin: 0;
     margin-bottom: sm;
     ${th(`alerts.title.${alertVariant}`)};
+    ${system}
 
     &:only-child {
       margin-bottom: 0;

packages/Badge/src/styles.ts

@@ -1,4 +1,3 @@
-import { WuiProps } from '@welcome-ui/system'
 import styled, { css, th } from '@xstyled/styled-components'
 
 import { BadgeOptions } from './index'
@@ -7,7 +6,7 @@ export type StyledBadgeProps = Pick<BadgeOptions, 'disabled' | 'shape' | 'size'
   length: number
 }
 
-export const Badge = styled.divBox<StyledBadgeProps & WuiProps>(
+export const Badge = styled.box<StyledBadgeProps>(
   ({ disabled, length, shape, size, variant }) => css`
     ${th('badges.default')};
     ${th(`badges.variants.${variant}`)};

packages/Badge/tests/index.test.tsx

@@ -35,7 +35,7 @@ describe('<Badge>', () => {
     const badge = getByTestId('badge')
 
     expect(badge).toHaveStyleRule('background-color', theme.colors['primary-500'])
-    expect(badge).toHaveStyleRule('color', 'rgba(0,0,0,1)')
+    expect(badge).toHaveStyleRule('color', 'rgba(0, 0, 0, 1)')
   })
 
   it('should have correct primary variant color if disabled', () => {

packages/Button/src/styles.ts

@@ -1,5 +1,6 @@
-import styled, { css, th } from '@xstyled/styled-components'
+import styled, { css, system, th } from '@xstyled/styled-components'
 import { Button as AriakitButton } from '@ariakit/react'
+import { shouldForwardProp } from '@welcome-ui/system'
 import { hideFocusRingsDataAttribute } from '@welcome-ui/utils'
 
 import { ButtonOptions } from './index'
@@ -13,7 +14,7 @@ const shapeStyles = (size: ButtonOptions['size'], shape: ButtonOptions['shape']
   `};
 `
 
-export const Button = styled.buttonBox.attrs({ as: AriakitButton })<ButtonOptions>(
+export const Button = styled(AriakitButton).withConfig({ shouldForwardProp })<ButtonOptions>(
   ({ disabled, shape, size = 'md', variant }) => css`
     ${th(`buttons.${variant}`)};
     position: relative;
@@ -33,6 +34,7 @@ export const Button = styled.buttonBox.attrs({ as: AriakitButton })<ButtonOption
     overflow: hidden;
     transition: medium;
     ${shape && shapeStyles(size, shape)};
+    ${system};
 
     & > svg.wui-icon,
     & > i.wui-icon-font {

packages/Card/src/Cover.styles.ts

@@ -1,6 +1,8 @@
-import styled, { th } from '@xstyled/styled-components'
+import styled, { system, th } from '@xstyled/styled-components'
 import { Shape } from '@welcome-ui/shape'
 
-export const Cover = styled.box.attrs({ as: Shape })`
+export const Cover = styled(Shape)`
   ${th('cards.cover')};
+
+  ${system}
 `

packages/Checkbox/src/styles.ts

@@ -1,12 +1,15 @@
-import styled, { css, th } from '@xstyled/styled-components'
+import styled, { css, system, th } from '@xstyled/styled-components'
 import * as Ariakit from '@ariakit/react'
+import { shouldForwardProp } from '@welcome-ui/system'
 import { defaultFieldStyles } from '@welcome-ui/utils'
 
 import { CheckboxProps } from './index'
 
 /* /!\ WARNING /!\ Don't add style after pseudo selector, it won't apply because of the dynamic color injected in the fill of the content */
 
-export const Checkbox = styled.box.attrs({ as: Ariakit.Checkbox })<CheckboxProps>(
+export const Checkbox = styled(Ariakit.Checkbox).withConfig({
+  shouldForwardProp,
+})<CheckboxProps>(
   ({ indeterminate, order = '-1', size, theme, variant }) => css`
     ${defaultFieldStyles({ size, variant })};
     ${th('checkboxes.default')}
@@ -16,6 +19,7 @@ export const Checkbox = styled.box.attrs({ as: Ariakit.Checkbox })<CheckboxProps
     cursor: pointer;
     transition: medium;
     overflow: hidden;
+    ${system};
 
     &[aria-checked='true'] {
       &:not([disabled]) {

packages/DateTimePickerCommon/src/styles.ts

@@ -1,52 +1,51 @@
-import styled, { css } from '@xstyled/styled-components'
+import styled, { css, system } from '@xstyled/styled-components'
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker'
 import { StyledIcon } from '@welcome-ui/icon'
 import { StyledButton } from '@welcome-ui/button'
 import { IconGroupWrapper, IconWrapper } from '@welcome-ui/field'
-import { shouldForwardProp } from '@welcome-ui/system'
 import { StyledSelect } from '@welcome-ui/select'
 import { defaultFieldStyles, DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import { Focused } from './CustomInput'
 
-export const StyledDatePicker = styled.box.attrs({
-  // Workaround to this issue: https://github.com/Hacker0x01/react-datepicker/issues/3834
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  as: (ReactDatePicker.default as typeof ReactDatePicker) || ReactDatePicker,
-})<DefaultFieldStylesProps & ReactDatePickerProps>(
+// Workaround to this issue: https://github.com/Hacker0x01/react-datepicker/issues/3834
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const StyledDatePicker = styled(ReactDatePicker.default || ReactDatePicker)<
+  DefaultFieldStylesProps & ReactDatePickerProps
+>(
   ({ iconPlacement, size, transparent, variant }) => css`
     ${defaultFieldStyles({ size, variant, transparent, isClearable: true, iconPlacement })};
+    ${system};
   `
 )
 
-export const StyledTimePicker = styled.box.attrs({
+export const StyledTimePicker = styled(
   // Workaround to this issue: https://github.com/Hacker0x01/react-datepicker/issues/3834
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  as: (ReactDatePicker.default as typeof ReactDatePicker) || ReactDatePicker,
-})<DefaultFieldStylesProps>(
+  ReactDatePicker.default || ReactDatePicker
+)<DefaultFieldStylesProps>(
   ({ iconPlacement, size, transparent, variant }) => css`
     ${defaultFieldStyles({ size, variant, transparent, isClearable: true, iconPlacement })};
     text-align: center;
+    ${system};
   `
 )
 
-export const CustomInput = styled('div').withConfig({ shouldForwardProp })<{ focused: Focused }>(
-  ({ focused }) => {
-    return css`
-      position: relative;
+export const CustomInput = styled.box<{ focused: Focused }>(({ focused }) => {
+  return css`
+    position: relative;
 
-      ${IconGroupWrapper} {
-        z-index: ${focused ? 1 : null};
-      }
+    ${IconGroupWrapper} {
+      z-index: ${focused ? 1 : null};
+    }
 
-      ${IconWrapper} {
-        z-index: ${focused ? 1 : null};
-      }
-    `
-  }
-)
+    ${IconWrapper} {
+      z-index: ${focused ? 1 : null};
+    }
+  `
+})
 
 export const CustomHeader = styled.div`
   display: flex;

packages/EmojiPicker/src/styles.ts

@@ -1,14 +1,15 @@
-import styled, { th } from '@xstyled/styled-components'
+import styled, { system, th } from '@xstyled/styled-components'
 import { Tab } from '@welcome-ui/tabs'
 import * as WUIPopover from '@welcome-ui/popover'
 import { Box } from '@welcome-ui/box'
 
-export const Popover = styled.box.attrs({ as: WUIPopover.Popover })`
+export const Popover = styled(WUIPopover.Popover)`
   background-color: ${th('defaultCards.backgroundColor')};
   border-width: sm;
   border-style: solid;
   border-color: border;
   color: dark-900;
+  ${system};
 
   /** we change the arrow item color from popover component */
   > div > div > svg {
@@ -20,10 +21,11 @@ export const Popover = styled.box.attrs({ as: WUIPopover.Popover })`
   }
 `
 
-export const TabList = styled.box.attrs({ as: Tab.List })`
+export const TabList = styled(Tab.List)`
   padding: 0 md;
   /* Remove margin from Tab.List */
   margin-bottom: -xl;
+  ${system};
 `
 
 export const EmojiButton = styled.buttonBox.attrs({

packages/FileUpload/src/styles.ts

@@ -1,6 +1,5 @@
 import styled from '@xstyled/styled-components'
-import { shouldForwardProp } from '@welcome-ui/system'
 
-export const Input = styled('input').withConfig({ shouldForwardProp })`
+export const Input = styled.inputBox`
   display: none;
 `