chore(wip): update styled-components to v6

Author: christiancp100

docs/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '@strapi/design-system/*';
+declare module '@strapi/design-system';
+declare module '@strapi/icons';
+declare module '@strapi/icons/*';

docs/package.json

@@ -14,7 +14,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "storybook-dark-mode": "^3.0.3",
-    "styled-components": "^5.3.11"
+    "styled-components": "6.1.8"
   },
   "devDependencies": {
     "@storybook/blocks": "^7.6.17",

package.json

@@ -44,7 +44,6 @@
     "@types/react-dom": "18.2.24",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -75,4 +74,4 @@
     "@testing-library/dom": "^9.0.0",
     "@types/react": "18.2.74"
   }
-}
+}

packages/primitives/package.json

@@ -43,11 +43,9 @@
     "react-remove-scroll": "^2.5.9"
   },
   "devDependencies": {
-    "@strapi/pack-up": "^5.0.0",
+    "@strapi/pack-up": "5.0.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "^5.0.5",
-    "typescript": "^5.4.4"
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

packages/strapi-design-system/package.json

@@ -26,20 +26,17 @@
   "devDependencies": {
     "@strapi/icons": "^2.0.0-beta.2",
     "@strapi/pack-up": "^5.0.0",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26",
-    "cross-env": "^7.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "^5.0.5",
-    "styled-components": "^5.3.11",
+    "styled-components": "6.1.8",
     "typescript": "^5.4.4"
   },
   "peerDependencies": {
-    "@strapi/icons": "^2.0.0-beta.0",
+    "@strapi/icons": "^2.0.0 || ^2.0.0-beta || ^2.0.0-alpha",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "styled-components": "^5.2.1"
+    "styled-components": "^6.0.0"
   },
   "scripts": {
     "build": "pack-up build",

packages/strapi-design-system/src/Accordion/Accordion.tsx

@@ -33,6 +33,7 @@ const getBorder = ({ theme, expanded, variant, disabled, error }: GetBorderParam
 };
 
 const AccordionTypography = styled(Typography)``;
+const AccordionFlex = styled(Flex)``;
 
 type AccordionWrapperProps = Pick<AccordionProps, 'expanded' | 'disabled' | 'variant' | 'error'>;
 
@@ -46,11 +47,11 @@ const AccordionWrapper = styled(Box)<AccordionWrapperProps>`
       color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary700)};
     }
 
-    ${Typography} {
+    ${AccordionTypography} {
       color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary600)};
     }
 
-    & > ${Flex} {
+    & > ${AccordionFlex} {
       background: ${({ theme }) => theme.colors.primary100};
     }
 

packages/strapi-design-system/src/Alert/Alert.tsx

@@ -14,7 +14,7 @@ const CloseButton = styled(Box)`
   ${buttonFocusStyle};
 `;
 
-const AlertIconWrapper = styled(Flex)`
+const AlertIconWrapper = styled(Flex)<{ variant: AlertVariant }>`
   svg {
     height: 100%;
     width: 100%;
@@ -41,7 +41,7 @@ const AlertIcon = ({ variant, ...props }: AlertIconProps) => {
   return <Information {...props} />;
 };
 
-const ActionBox = styled(Box)`
+const ActionBox = styled(Box)<{ variant: AlertVariant }>`
   & a > span {
     color: ${handleIconColor};
   }

packages/strapi-design-system/src/BaseCheckbox/BaseCheckbox.tsx

@@ -14,7 +14,7 @@ export interface CheckboxInputProps {
   size: BaseCheckboxSize;
 }
 
-const CheckboxInput = styled.input`
+const CheckboxInput = styled.input<{ size: BaseCheckboxSize }>`
   height: ${getCheckboxSize};
   min-width: ${getCheckboxSize};
   margin: 0;

packages/strapi-design-system/src/BaseRadio/BaseRadio.tsx

@@ -61,7 +61,6 @@ export const BaseRadio = React.forwardRef<HTMLInputElement, BaseRadioProps>(
         checked={isSelected}
         disabled={disabled}
         id={generatedId}
-        // @ts-expect-error size is a html prop already.
         size={size}
         onChange={onChange}
         {...props}