@simplybusiness/mobius 5.29.2 → 5.29.4

package/src/components/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { ArgTypes, Meta, Story } from "@storybook/blocks";
+import { ArgTypes, Meta, Story } from "@storybook/addon-docs/blocks";
 import { Drawer } from ".";
 import * as DrawerStories from "./Drawer.stories";
 import TestingDocs from "../../../../../.storybook/pages/jestHTMLDialogPolyfillTestingDocs.mdx";

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { useState } from "react";
 import type { DrawerProps } from ".";
 import { Drawer } from ".";

package/src/components/DropdownMenu/DropdownMenu.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --dropdown-menu-max-width: 200px;
-}
-
 .mobius-dropdown-menu {
   position: relative;
   max-width: var(--dropdown-menu-max-width);

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
+import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
 import { DropdownMenu } from ".";
 import { Icon } from "../Icon";
 import * as DropdownMenuStories from "./DropdownMenu.stories";

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,5 +1,5 @@
 import { chevronDown } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import classNames from "classnames/dedupe";
 import type { Ref } from "react";
 import { forwardRef } from "react";

package/src/components/ErrorMessage/ErrorMessage.mdx

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

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { ErrorMessageProps } from ".";
 import { ErrorMessage } from ".";
 

package/src/components/Fieldset/Fieldset.mdx

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

package/src/components/Fieldset/Fieldset.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { TextField } from "../TextField";

package/src/components/Flex/Flex.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
 import { Flex } from "./Flex";
 import { Box } from "../Box";
 import * as FlexStories from "./Flex.stories";

package/src/components/Flex/Flex.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { CSSProperties, ReactNode } from "react";
 import { Flex } from "./Flex";
 import { Box } from "../Box";

package/src/components/Grid/Grid.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
 import { Grid } from ".";
 import { Box } from "../Box";
 import { Flex } from "../Flex";

package/src/components/Grid/Grid.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { ReactNode } from "react";
 import type { GridItemProps, GridProps } from ".";
 import { Grid } from ".";

package/src/components/Icon/Icon.mdx

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

package/src/components/Icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import * as baseIcons from "@simplybusiness/icons/src";
 import { Icon } from "./Icon";
 import { excludeControls } from "../../utils";

package/src/components/Image/Image.mdx

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

package/src/components/Image/Image.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { ImageProps } from "./Image";
 import { Image } from "./Image";
 

package/src/components/Label/Label.css

@@ -1,9 +1,3 @@
-:root,
-:host {
-  --label-font-weight: var(--font-weight-bold);
-  --label-font-variation-settings: normal;
-}
-
 .mobius-label {
   box-sizing: border-box;
   font-size: var(--font-size-regular);

package/src/components/Label/Label.mdx

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

package/src/components/Label/Label.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { LabelProps } from "./Label";
 import { Label } from "./Label";
 

package/src/components/Link/Link.mdx

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

package/src/components/Link/Link.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { LinkProps } from "./Link";
 import { Link } from "./Link";
 import { excludeControls } from "../../utils";

package/src/components/LinkButton/LinkButton.mdx

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

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { LinkButtonProps } from "./LinkButton";
 import { LinkButton } from "./LinkButton";
 import { excludeControls } from "../../utils";

package/src/components/List/List.mdx

@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Story } from "@storybook/blocks";
+import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
 import { List, ListItem } from ".";
 import * as ListStories from "./List.stories";
 

package/src/components/List/List.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { cross, tick } from "@simplybusiness/icons";
 import { Icon, Text } from "../index";
 import type { ListProps } from ".";

package/src/components/LoadingIndicator/LoadingIndicator.mdx

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

package/src/components/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -1,5 +1,5 @@
 import { home, loading, refreshArrow } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { LoadingIndicatorProps } from "./LoadingIndicator";
 import { LoadingIndicator } from "./LoadingIndicator";
 

package/src/components/Logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { LogoProps } from "..";
 import { Logo } from "..";
 import { excludeControls } from "../../utils";

package/src/components/Modal/Modal.css

@@ -1,16 +1,9 @@
-:root,
-:host,
-::backdrop {
-  --modal-transition-duration: 0;
-  --backdrop-color: #18181d;
-}
-
-/* Enable transitions only if reduce motion flag is off */
-@media (prefers-reduced-motion: no-preference) {
+/* Disable transitions if reduce motion flag is on */
+@media (prefers-reduced-motion: ) {
   :root,
   :host,
   ::backdrop {
-    --modal-transition-duration: 300ms;
+    --modal-transition-duration: 0;
   }
 }
 

package/src/components/Modal/Modal.mdx

@@ -1,4 +1,4 @@
-import { ArgTypes, Meta, Story } from "@storybook/blocks";
+import { ArgTypes, Meta, Story } from "@storybook/addon-docs/blocks";
 import { Modal } from ".";
 import * as ModalStories from "./Modal.stories";
 import TestingDocs from "../../../../../.storybook/pages/jestHTMLDialogPolyfillTestingDocs.mdx";

package/src/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { useState } from "react";
 import type { ModalProps } from ".";
 import { Modal } from ".";

package/src/components/NumberField/NumberField.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --number-input-max-width: none;
-}
-
 .mobius-number-field {
   box-sizing: border-box;
   width: 100%;

package/src/components/NumberField/NumberField.mdx

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

package/src/components/NumberField/NumberField.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { NumberFieldProps } from "./NumberField";

package/src/components/PasswordField/PasswordField.mdx

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

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { PasswordFieldProps } from "./PasswordField";

package/src/components/Popover/Popover.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { circleQuestion } from "@simplybusiness/icons";
 import type { PopoverProps } from "..";
 import { Button, Flex, Popover, Icon } from "..";

package/src/components/Progress/Progress.mdx

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

package/src/components/Progress/Progress.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { ProgressProps } from "./Progress";

package/src/components/Radio/Radio.mdx

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

package/src/components/Radio/Radio.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Divider } from "../Divider";

package/src/components/SVG/SVG.mdx

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

package/src/components/SVG/SVG.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { SVGProps } from "./SVG";
 import { SVG } from "./SVG";
 

package/src/components/Segment/Segment.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --segment-border: var(--size-border-width) solid var(--color-border-light);
-}
-
 /*-----------------------------------------------------------------------------
    Wrapper around select and dropdown icon
   ----------------------------------------------------------------------------*/

package/src/components/Segment/Segment.mdx

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

package/src/components/Segment/Segment.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { SegmentProps } from "./Segment";
 import { Segment } from "./Segment";
 import type { SegmentGroupProps } from "./SegmentGroup";

package/src/components/Select/Select.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --select-wrapper-max-width: none;
-}
-
 .mobius-select__outer {
   box-sizing: border-box;
   width: 100%;

package/src/components/Select/Select.mdx

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

package/src/components/Select/Select.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Option } from "../Option";
 import type { SelectProps } from "./Select";

package/src/components/Slider/Slider.css

@@ -1,12 +1,3 @@
-:root,
-:host {
-  --slider-primary-track-background: var(--color-primary-lighter);
-  --slider-primary-thumb-background: var(--color-primary);
-  --slider-secondary-track-background: var(--color-accent-lighter);
-  --slider-secondary-thumb-background: var(--color-accent);
-  --thumb-size: 20px;
-}
-
 .mobius-slider {
   position: relative;
   display: grid;

package/src/components/Slider/Slider.mdx

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

package/src/components/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { SliderProps } from "./Slider";

package/src/components/Stack/Stack.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { StackProps } from ".";
 import { Stack } from ".";
 import { excludeControls } from "../../utils";

package/src/components/Switch/Switch.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --switch-transition-duration: 0.15s;
-}
-
 .mobius-switch {
   position: relative;
   display: inline-block;

package/src/components/Switch/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { Switch as Control, type SwitchProps } from ".";
 import { excludeControls } from "../../utils";
 

package/src/components/Table/Table.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --table-border-width: 1px;
-}
-
 .mobius-table {
   display: table;
   box-sizing: border-box;

package/src/components/Table/Table.mdx

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

package/src/components/Table/Table.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { TableProps } from ".";
 import { Table } from ".";
 

package/src/components/Text/Text.mdx

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

package/src/components/Text/Text.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { Box } from "../Box";
 import type { TextProps } from "./Text";

package/src/components/TextArea/TextArea.mdx

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

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { TextAreaProps } from "./TextArea";

package/src/components/TextField/TextField.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --text-input-max-width: none;
-}
-
 .mobius-text-field {
   box-sizing: border-box;
   width: 100%;

package/src/components/TextField/TextField.mdx

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

package/src/components/TextField/TextField.stories.tsx

@@ -1,5 +1,5 @@
 import { search } from "@simplybusiness/icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { useRef } from "react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";

package/src/components/Title/Title.css

@@ -1,8 +1,3 @@
-:root,
-:host {
-  --title-decorator-width: 8px;
-}
-
 .mobius-title {
   display: flex;
   padding-left: var(--size-sm);

package/src/components/Title/Title.mdx

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

package/src/components/Title/Title.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { TitleProps } from "./Title";
 import { Title } from "./Title";
 

package/src/components/Trust/Trust.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { Trust, type TrustProps } from "..";
 import { excludeControls } from "../../utils";
 import { TrustpilotProvider } from "./TrustpilotProvider";

package/src/components/VisuallyHidden/VisuallyHidden.mdx

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

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import type { VisuallyHiddenProps } from ".";
 import { VisuallyHidden } from ".";
 

package/src/hooks/useBreakpoint/useBreakpoint.mdx

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

package/src/hooks/useBreakpoint/useBreakpoint.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { useBreakpoint } from "./useBreakpoint";
 
 type StoryType = StoryObj<typeof useBreakpoint>;