Upgrade to SB v8.0.0 (non-rc) and fix reference to Icons component

package.json

@@ -54,17 +54,18 @@
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.23.3",
     "@chromatic-com/storybook": "^1.2.1",
-    "@storybook/addon-essentials": "^8.0.0-rc.1",
-    "@storybook/addon-interactions": "^8.0.0-rc.1",
-    "@storybook/addon-links": "^8.0.0-rc.1",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.0",
-    "@storybook/components": "^8.0.0-rc.1",
-    "@storybook/core-events": "^8.0.0-rc.1",
-    "@storybook/manager-api": "^8.0.0-rc.1",
-    "@storybook/preview-api": "^8.0.0-rc.1",
-    "@storybook/theming": "^8.0.0-rc.1",
-    "@storybook/react-webpack5": "^8.0.0-rc.1",
-    "@storybook/types": "^8.0.0-rc.1",
+    "@storybook/components": "^8.0.0",
+    "@storybook/core-events": "^8.0.0",
+    "@storybook/icons": "^1.2.9",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/theming": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@storybook/types": "^8.0.0",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.19.0",
     "auto": "^11.1.1",
@@ -73,7 +74,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "storybook": "^8.0.0-rc.1",
+    "storybook": "^8.0.0",
     "tsup": "^8.0.1",
     "typescript": "^4.9.4"
   },

src/manager/PseudoStateTool.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from "react"
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from "@storybook/components"
+import { IconButton, WithTooltip, TooltipLinkList } from "@storybook/components"
+import { CheckIcon } from "@storybook/icons"
 import { useGlobals } from "@storybook/manager-api"
 import { styled, color } from "@storybook/theming"
 
@@ -9,7 +10,7 @@ const LinkTitle = styled.span<{ active?: boolean }>(({ active }) => ({
   color: active ? color.secondary : "inherit",
 }))
 
-const LinkIcon = styled(Icons)<{ active?: boolean }>(({ active }) => ({
+const LinkIcon = styled(CheckIcon)<{ active?: boolean }>(({ active }) => ({
   opacity: active ? 1 : 0,
   path: { fill: active ? color.secondary : "inherit" },
 }))
@@ -25,7 +26,7 @@ export const PseudoStateTool = () => {
       if (!pseudo) return false
       return pseudo[option] === true
     },
-    [pseudo]
+    [pseudo],
   )
 
   const toggleOption = useCallback(
@@ -37,7 +38,7 @@ export const PseudoStateTool = () => {
         },
       })
     },
-    [pseudo]
+    [pseudo],
   )
 
   return (
@@ -49,7 +50,7 @@ export const PseudoStateTool = () => {
           links={options.map((option) => ({
             id: option,
             title: <LinkTitle active={isActive(option)}>:{PSEUDO_STATES[option]}</LinkTitle>,
-            right: <LinkIcon icon="check" width={12} height={12} active={isActive(option)} />,
+            right: <LinkIcon width={12} height={12} active={isActive(option)} />,
             onClick: toggleOption(option),
             active: isActive(option),
           }))}