⬆️ Styled components v6

packages/eds-core-react/.storybook/components/Stack.tsx

@@ -1,18 +1,32 @@
-import styled, { CSSProperties } from 'styled-components'
+import styled, { StyledObject } from 'styled-components'
 
 type StackProps = {
-  direction?: CSSProperties['flexDirection']
-  align?: CSSProperties['alignItems']
+  direction?: StyledObject<any>['flexDirection']
+  align?: StyledObject<any>['alignItems']
+  children: React.ReactNode
+} & React.HTMLAttributes<HTMLDivElement>
+
+type StyledStackProps = {
+  $direction?: StyledObject<any>['flexDirection']
+  $align?: StyledObject<any>['alignItems']
 }
 
-export const Stack = styled.div<StackProps>`
+const StyledStack = styled.div<StyledStackProps>`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: ${({ align }) => align || 'center'};
+  align-items: ${({ $align }) => $align || 'center'};
   gap: 1rem;
   flex-wrap: wrap;
   @media screen and (min-width: 600px) {
-    flex-direction: ${({ direction }) => direction || 'row'};
+    flex-direction: ${({ $direction }) => $direction || 'row'};
   }
 `
+
+export const Stack = ({ children, direction, align, ...rest }: StackProps) => {
+  return (
+    <StyledStack $direction={direction} $align={align} {...rest}>
+      {children}
+    </StyledStack>
+  )
+}

packages/eds-core-react/package.json

@@ -63,7 +63,6 @@
     "@types/ramda": "^0.29.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.10",
-    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.6",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.1.4",
@@ -82,14 +81,14 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.3.0",
-    "styled-components": "5.3.9",
+    "styled-components": "6.0.7",
     "tsc-watch": "^6.0.4",
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2 < 6"
+    "styled-components": ">=4.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.5",