[CL-717][PM-27966] Update to Angular 20 and Storybook 9 (#17638)

libs/components/src/a11y/aria-disabled-click-capture.service.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from "@angular/common";
-import { Injectable, Inject, NgZone, OnDestroy } from "@angular/core";
+import { Injectable, Inject, NgZone, OnDestroy, DOCUMENT } from "@angular/core";
 
 @Injectable({ providedIn: "root" })
 export class AriaDisabledClickCaptureService implements OnDestroy {

libs/components/src/anon-layout/anon-layout-wrapper.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./anon-layout-wrapper.stories";
 

libs/components/src/anon-layout/anon-layout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./anon-layout.stories";
 

libs/components/src/async-actions/in-forms.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Component Library/Async Actions/In Forms/Documentation" />
 

libs/components/src/async-actions/in-forms.stories.ts

@@ -1,8 +1,8 @@
 import { Component } from "@angular/core";
 import { FormsModule, ReactiveFormsModule, Validators, FormBuilder } from "@angular/forms";
-import { action } from "@storybook/addon-actions";
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 import { delay, of } from "rxjs";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";

libs/components/src/async-actions/overview.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Component Library/Async Actions/Overview" />
 

libs/components/src/async-actions/standalone.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 import * as stories from "./standalone.stories.ts";
 
 <Meta of={stories} />

libs/components/src/async-actions/standalone.stories.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 import { delay, of } from "rxjs";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";

libs/components/src/avatar/avatar.mdx

@@ -1,4 +1,4 @@
-import { Description, Meta, Canvas, Primary, Controls, Title } from "@storybook/addon-docs";
+import { Meta, Description, Canvas, Primary, Controls, Title } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./avatar.stories";
 

libs/components/src/badge/badge.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./badge.stories";
 

libs/components/src/banner/banner.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs";
+import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./banner.stories";
 

libs/components/src/breadcrumbs/breadcrumbs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./breadcrumbs.stories";
 

libs/components/src/button/button.mdx

@@ -6,7 +6,7 @@ import {
   Controls,
   Title,
   Description,
-} from "@storybook/addon-docs";
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./button.stories";
 

libs/components/src/callout/callout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./callout.stories";
 

libs/components/src/card/base-card/base-card.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs";
+import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./base-card.stories";
 

libs/components/src/checkbox/checkbox.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./checkbox.stories";
 

libs/components/src/chip-select/chip-select.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs";
+import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./chip-select.stories";
 

libs/components/src/chip-select/chip-select.stories.ts

@@ -1,6 +1,6 @@
 import { FormsModule } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/test";
+import { getAllByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/color-password/color-password.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./color-password.stories";
 

libs/components/src/container/container.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Title, Description } from "@storybook/addon-docs";
+import { Meta, Primary, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./container.stories";
 

libs/components/src/dialog/dialog.service.stories.ts

@@ -1,9 +1,9 @@
 import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { NoopAnimationsModule, provideAnimations } from "@angular/platform-browser/animations";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/test";
+import { getAllByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -36,7 +36,7 @@ interface Animal {
   imports: [ButtonModule, LayoutComponent],
 })
 class StoryDialogComponent {
-  constructor(public dialogService: DialogService) {}
+  dialogService = inject(DialogService);
 
   openDialog() {
     this.dialogService.open(StoryDialogContentComponent, {
@@ -85,10 +85,8 @@ class StoryDialogComponent {
   imports: [DialogModule, ButtonModule],
 })
 class StoryDialogContentComponent {
-  constructor(
-    public dialogRef: DialogRef,
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
+  dialogRef = inject(DialogRef);
+  private data = inject<Animal>(DIALOG_DATA);
 
   get animal() {
     return this.data?.animal;
@@ -118,10 +116,8 @@ class StoryDialogContentComponent {
   imports: [DialogModule, ButtonModule],
 })
 class NonDismissableContentComponent {
-  constructor(
-    public dialogRef: DialogRef,
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
+  dialogRef = inject(DialogRef);
+  private data = inject<Animal>(DIALOG_DATA);
 
   get animal() {
     return this.data?.animal;

libs/components/src/dialog/dialog/dialog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./dialog.stories";
 

libs/components/src/dialog/dialogs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./dialog.service.stories";
 

libs/components/src/dialog/simple-dialog/simple-dialog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./simple-dialog.stories";
 

libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts

@@ -1,8 +1,8 @@
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { provideAnimations } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/test";
+import { getAllByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -30,7 +30,7 @@ interface Animal {
   imports: [ButtonModule],
 })
 class StoryDialogComponent {
-  constructor(public dialogService: DialogService) {}
+  dialogService = inject(DialogService);
 
   openSimpleDialog() {
     this.dialogService.open(SimpleDialogContentComponent, {
@@ -84,10 +84,8 @@ class StoryDialogComponent {
   imports: [ButtonModule, DialogModule],
 })
 class SimpleDialogContentComponent {
-  constructor(
-    public dialogRef: DialogRef,
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
+  dialogRef = inject(DialogRef);
+  private data = inject<Animal>(DIALOG_DATA);
 
   get animal() {
     return this.data?.animal;
@@ -115,10 +113,8 @@ class SimpleDialogContentComponent {
   imports: [ButtonModule, DialogModule],
 })
 class NonDismissableWithPrimaryButtonContentComponent {
-  constructor(
-    public dialogRef: DialogRef,
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
+  dialogRef = inject(DialogRef);
+  private data = inject<Animal>(DIALOG_DATA);
 
   get animal() {
     return this.data?.animal;
@@ -141,10 +137,8 @@ class NonDismissableWithPrimaryButtonContentComponent {
   imports: [ButtonModule, DialogModule],
 })
 class NonDismissableWithNoButtonsContentComponent {
-  constructor(
-    public dialogRef: DialogRef,
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
+  dialogRef = inject(DialogRef);
+  private data = inject<Animal>(DIALOG_DATA);
 
   get animal() {
     return this.data?.animal;

libs/components/src/disclosure/disclosure.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./disclosure.stories";
 

libs/components/src/drawer/drawer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./drawer.stories";
 

libs/components/src/form-field/form-field.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./form-field.stories";
 

libs/components/src/form-field/multi-select.stories.ts

@@ -6,8 +6,8 @@ import {
   FormGroup,
 } from "@angular/forms";
 import { NgSelectModule } from "@ng-select/ng-select";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/form/form.stories.ts

@@ -1,6 +1,6 @@
 import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { userEvent, getByText } from "@storybook/test";
+import { userEvent, getByText } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/form/forms.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs/blocks";
 
 import * as formStories from "./form.stories";
 import * as fieldStories from "../form-field/form-field.stories";

libs/components/src/icon-button/icon-button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icon-button.stories";
 

libs/components/src/icon/icon.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icon.stories";
 

libs/components/src/input/autofocus.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./autofocus.stories";
 

libs/components/src/input/input.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Component Library/Form/Input Directive" />
 

libs/components/src/item/item.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./item.stories";
 

libs/components/src/layout/layout.stories.ts

@@ -1,6 +1,6 @@
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { userEvent } from "@storybook/test";
+import { userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/link/link.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./link.stories";
 

libs/components/src/menu/menu.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./menu.stories";
 

libs/components/src/multi-select/multi-select.component.ts

@@ -108,11 +108,11 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
   /** Needs to be arrow function to retain `this` scope. */
   keyDown = (event: KeyboardEvent) => {
     const select = this.select();
-    if (!select.isOpen && event.key === "Enter" && !hasModifierKey(event)) {
+    if (!select.isOpen() && event.key === "Enter" && !hasModifierKey(event)) {
       return false;
     }
 
-    if (select.isOpen && event.key === "Escape" && !hasModifierKey(event)) {
+    if (select.isOpen() && event.key === "Escape" && !hasModifierKey(event)) {
       this.selectedItems = [];
       select.close();
       event.stopPropagation();
@@ -198,7 +198,9 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
   }
   set ariaDescribedBy(value: string | undefined) {
     this._ariaDescribedBy = value;
-    this.select()?.searchInput.nativeElement.setAttribute("aria-describedby", value ?? "");
+    this.select()
+      ?.searchInput()
+      .nativeElement.setAttribute("aria-describedby", value ?? "");
   }
   private _ariaDescribedBy?: string;
 

libs/components/src/popover/popover.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./popover.stories";
 

libs/components/src/popover/popover.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getByRole, userEvent } from "@storybook/test";
+import { getByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/progress/progress.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./progress.stories";
 

libs/components/src/search/search.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./search.stories";
 

libs/components/src/section/section.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
+import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./section.stories";
 

libs/components/src/select/select.component.ts

@@ -158,7 +158,9 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
   }
   set ariaDescribedBy(value: string | undefined) {
     this._ariaDescribedBy = value;
-    this.select()?.searchInput.nativeElement.setAttribute("aria-describedby", value ?? "");
+    this.select()
+      ?.searchInput()
+      .nativeElement.setAttribute("aria-describedby", value ?? "");
   }
   private _ariaDescribedBy?: string;
 
@@ -218,7 +220,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
    * Needs to be arrow function to retain `this` scope.
    */
   protected onKeyDown = (event: KeyboardEvent) => {
-    if (this.select().isOpen && event.key === "Escape" && !hasModifierKey(event)) {
+    if (this.select().isOpen() && event.key === "Escape" && !hasModifierKey(event)) {
       event.stopPropagation();
     }
 

libs/components/src/select/select.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./select.stories";
 

libs/components/src/skeleton/skeleton.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs/blocks";
 
 import * as skeletonStories from "./skeleton.stories";
 import * as skeletonTextStories from "./skeleton-text.stories";

libs/components/src/stepper/stepper.mdx

@@ -1,4 +1,12 @@
-import { Meta, Story, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Story,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./stepper.stories";
 

libs/components/src/stories/colors.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Colors" />
 

libs/components/src/stories/compact-mode.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as itemStories from "../item/item.stories";
 import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories";

libs/components/src/stories/icons/icons.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
+import { Meta, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icons.stories";
 

libs/components/src/stories/introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Introduction" />
 

libs/components/src/stories/kitchen-sink/kitchen-sink.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./kitchen-sink.stories";
 

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -9,7 +9,7 @@ import {
   fireEvent,
   getByText,
   getAllByLabelText,
-} from "@storybook/test";
+} from "storybook/test";
 
 import { PasswordManagerLogo } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";

libs/components/src/stories/migration.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Migration" />
 

libs/components/src/stories/responsive-design.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Responsive Design" />
 

libs/components/src/stories/virtual-scrolling.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Virtual Scrolling" />
 

libs/components/src/switch/switch.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./switch.stories";
 

libs/components/src/table/table.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./table.stories";
 

libs/components/src/tabs/tabs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./tabs.stories";
 import * as dialogStories from "../dialog/dialog/dialog.stories";

libs/components/src/toast/toast.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./toast.stories";
 

libs/components/src/toast/toast.stories.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/toggle-group/toggle-group.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./toggle-group.stories";
 

libs/components/src/tooltip/tooltip.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./tooltip.stories";
 

libs/components/src/tooltip/tooltip.stories.ts

@@ -1,6 +1,6 @@
 import { signal } from "@angular/core";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getByRole, userEvent } from "@storybook/test";
+import { getByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/typography/typography.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./typography.stories";