diff --git a/package-lock.json b/package-lock.json index f949b54..92f6a8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59,7 +59,7 @@ "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", "style-loader": "^2.0.0", - "styled-components": "^5.3.5", + "styled-components": "^6.1.19", "typescript": "^5.8.2" }, "peerDependencies": { @@ -1832,31 +1832,28 @@ "dev": true }, "node_modules/@emotion/is-prop-valid": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz", - "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "dev": true, + "license": "MIT", "dependencies": { - "@emotion/memoize": "^0.9.0" + "@emotion/memoize": "^0.8.1" } }, "node_modules/@emotion/memoize": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", - "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", - "dev": true - }, - "node_modules/@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "dev": true, + "license": "MIT" }, "node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "dev": true + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "dev": true, + "license": "MIT" }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.0", @@ -4816,6 +4813,13 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/supports-color": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.3.tgz", @@ -14388,13 +14392,6 @@ "react": "17.0.2" } }, - "node_modules/react-is": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", - "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", - "dev": true, - "peer": true - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -15866,24 +15863,24 @@ } }, "node_modules/styled-components": { - "version": "5.3.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", - "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "version": "6.1.19", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz", + "integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.49", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" }, "engines": { - "node": ">=10" + "node": ">= 16" }, "funding": { "type": "opencollective", @@ -15891,31 +15888,45 @@ }, "peerDependencies": { "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" + "react-dom": ">= 16.8.0" } }, - "node_modules/styled-components/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/styled-components/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", "dependencies": { - "has-flag": "^3.0.0" + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { - "node": ">=4" + "node": "^10 || ^12 || >=14" } }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "dev": true, + "license": "0BSD" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -15945,6 +15956,13 @@ "node": ">=4" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "dev": true, + "license": "MIT" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 7c41786..402082a 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", "style-loader": "^2.0.0", - "styled-components": "^5.3.5", + "styled-components": "^6.1.19", "typescript": "^5.8.2" }, "peerDependencies": { diff --git a/stories/icon/doc-elements.tsx b/stories/icon/doc-elements.tsx index 65b5a41..57f0e59 100644 --- a/stories/icon/doc-elements.tsx +++ b/stories/icon/doc-elements.tsx @@ -234,7 +234,7 @@ const Clickable = styled.div` width: 1.5rem; } - :hover { + &:hover { background: ${Colors.Neutral[7]}; svg { height: 2rem; @@ -328,7 +328,7 @@ const CopyButton = styled.button` color: ${Colors.Neutral[8]}; } - :hover { + &:hover { background: ${Colors.Neutral[3]}; } `; diff --git a/stories/storybook-common/api-table/api-table-components.tsx b/stories/storybook-common/api-table/api-table-components.tsx index 5a3d2bc..8efa144 100644 --- a/stories/storybook-common/api-table/api-table-components.tsx +++ b/stories/storybook-common/api-table/api-table-components.tsx @@ -36,11 +36,11 @@ const StyledTable = styled.table` } td { - :first-child { + &:first-child { width: 20%; } - :last-child { + &:last-child { width: 20%; } } @@ -49,7 +49,7 @@ const StyledTable = styled.table` tr { border: none; border-bottom: 1px solid ${Colors.Neutral[6]}; - :nth-child(even) { + &:nth-child(even) { background: ${Colors.Neutral[7]}; } } @@ -121,7 +121,7 @@ const Label = styled.td` const Mandatory = styled.td` font-weight: bold; - :after { + &:after { content: " *"; color: ${Colors.ValidationRed}; } @@ -174,7 +174,7 @@ export const DescriptionCol = ({ const PropsContainer = styled.div` display: flex; code { - :not(:last-child) { + &:not(:last-child) { margin-right: 0.25rem; } } diff --git a/stories/storybook-common/text.style.tsx b/stories/storybook-common/text.style.tsx index df32bb8..3d9d57b 100644 --- a/stories/storybook-common/text.style.tsx +++ b/stories/storybook-common/text.style.tsx @@ -49,7 +49,7 @@ const Link = styled.a` width: 1rem; } - :hover { + &:hover { color: ${Colors.Neutral[4]}; } `; @@ -62,7 +62,7 @@ const StyledTitle = styled.h1` letter-spacing: -0.056rem; margin: 0 0 3rem; - :hover { + &:hover { ${Link} { opacity: 1; } @@ -75,7 +75,7 @@ const StyledSecondary = styled.h1` font-size: 2rem; line-height: 2.5rem; margin: 1rem 0 1.5rem; - :hover { + &:hover { ${Link} { opacity: 1; } @@ -87,7 +87,7 @@ const StyledTertiary = styled.h2` font-size: 1.625rem; line-height: 2.25rem; margin: 1rem 0 1.5rem; - :hover { + &:hover { ${Link} { opacity: 1; } @@ -99,7 +99,7 @@ const StyledQuaternary = styled.h4` font-size: 1.125rem; line-height: 1.625rem; margin: 1.5rem 0; - :hover { + &:hover { ${Link} { opacity: 1; }