From da88329f88e30eb7598933b6c368ffd3b9aa12db Mon Sep 17 00:00:00 2001
From: Victor Bayas <victorsbayas@gmail.com>
Date: Tue, 5 Nov 2024 16:48:22 -0500
Subject: [PATCH] Fix StoryBook Story imports (#1090)

---
 src/components/Accordion/Accordion.stories.tsx              | 4 ++--
 src/components/ApplicationLogo/ApplicationLogo.stories.tsx  | 4 ++--
 src/components/Autocomplete/Autocomplete.stories.tsx        | 4 ++--
 src/components/BackLink/BackLink.stories.tsx                | 4 ++--
 src/components/Badge/Badge.stories.tsx                      | 4 ++--
 src/components/Box/Box.stories.tsx                          | 4 ++--
 src/components/BoxedIcon/BoxedIcon.stories.tsx              | 4 ++--
 src/components/Breadcrumbs/Breadcrumbs.stories.tsx          | 4 ++--
 src/components/Button/Button.stories.tsx                    | 4 ++--
 src/components/Button/Button.uikit.stories.tsx              | 4 ++--
 src/components/ButtonGroup/ButtonGroup.stories.tsx          | 4 ++--
 src/components/Checkbox/Checkbox.stories.tsx                | 4 ++--
 src/components/CodeEditor/CodeEditor.stories.tsx            | 4 ++--
 src/components/CodeSnippet/CodeSnippet.stories.tsx          | 4 ++--
 src/components/DataTable/DataTable.stories.tsx              | 4 ++--
 src/components/DateTimeInput/DateTimeInput.stories.tsx      | 4 ++--
 src/components/DateTimeInput/DateTimeSelector.stories.tsx   | 4 ++--
 .../DropdownSelector/DropdownSelector.stories.tsx           | 4 ++--
 src/components/ExpandMenu/ExpandMenu.stories.tsx            | 4 ++--
 .../ExpandOptionsButton/ExpandOptionsButton.stories.tsx     | 4 ++--
 src/components/FileSelector/FileSelector.stories.tsx        | 4 ++--
 src/components/FormActionsTray/FormActionsTray.stories.tsx  | 4 ++--
 src/components/FormLayout/FormLayout.stories.tsx            | 4 ++--
 src/components/GlobalStyles/Colors.stories.tsx              | 4 ++--
 src/components/GlobalStyles/GlobalStyles.stories.tsx        | 4 ++--
 src/components/Grid/Grid.stories.tsx                        | 4 ++--
 src/components/HelpBox/HelpBox.stories.tsx                  | 4 ++--
 src/components/IconButton/IconButton.stories.tsx            | 4 ++--
 src/components/InputBox/InputBox.stories.tsx                | 4 ++--
 src/components/InputBox/InputBox.uikit.stories.tsx          | 4 ++--
 src/components/InputLabel/InputLabel.stories.tsx            | 4 ++--
 src/components/Link/Link.stories.tsx                        | 4 ++--
 src/components/LinkButton/LinkButton.stories.tsx            | 4 ++--
 src/components/Loader/Loader.stories.tsx                    | 4 ++--
 src/components/LoginWrapper/LoginWrapper.stories.tsx        | 4 ++--
 src/components/ModalBox/ModalBox.stories.tsx                | 4 ++--
 .../NotificationAlert/NotificationAlert.stories.tsx         | 6 ++++--
 .../NotificationCount/NotificationCount.stories.tsx         | 4 ++--
 src/components/Notifications/Notifications.stories.tsx      | 6 ++++--
 src/components/PageHeader/PageHeader.stories.tsx            | 4 ++--
 src/components/PageLayout/PageLayout.stories.tsx            | 4 ++--
 src/components/ProgressBar/ProgressBar.stories.tsx          | 4 ++--
 src/components/RadioGroup/RadioGroup.stories.tsx            | 4 ++--
 src/components/ScreenTitle/ScreenTitle.stories.tsx          | 4 ++--
 src/components/SearchBox/SearchBox.stories.tsx              | 4 ++--
 src/components/SectionTitle/SectionTitle.stories.tsx        | 4 ++--
 src/components/Select/Select.stories.tsx                    | 4 ++--
 src/components/Select/Select.uikit.stories.tsx              | 4 ++--
 src/components/SizeChart/SizeChart.stories.tsx              | 4 ++--
 src/components/Slider/Slider.stories.tsx                    | 4 ++--
 src/components/Table/Table.stories.tsx                      | 4 ++--
 src/components/Tabs/Tabs.stories.tsx                        | 4 ++--
 src/components/Tag/Tag.stories.tsx                          | 4 ++--
 src/components/TextArea/TextArea.stories.tsx                | 4 ++--
 src/components/ThemedLogo/ThemedLogo.stories.tsx            | 4 ++--
 src/components/Toggle/Toggle.stories.tsx                    | 4 ++--
 src/components/Tooltip/Tooltip.stories.tsx                  | 4 ++--
 src/components/ValuePair/ValuePair.stories.tsx              | 4 ++--
 src/components/Wizard/Wizard.stories.tsx                    | 4 ++--
 src/icons/Icons.stories.tsx                                 | 4 ++--
 60 files changed, 124 insertions(+), 120 deletions(-)

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 6b3254947..5486f8038 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -16,7 +16,7 @@
 
 import React from "react";
 import { useState } from "@storybook/client-api";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Accordion from "./";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Accordion>;
 
-const Template: Story<AccordionProps> = ({
+const Template: StoryFn<AccordionProps> = ({
   title,
   children,
   disabled,
diff --git a/src/components/ApplicationLogo/ApplicationLogo.stories.tsx b/src/components/ApplicationLogo/ApplicationLogo.stories.tsx
index 63faa5067..090462498 100644
--- a/src/components/ApplicationLogo/ApplicationLogo.stories.tsx
+++ b/src/components/ApplicationLogo/ApplicationLogo.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import ApplicationLogo from "./";
 import { ApplicationLogoProps } from "./ApplicationLogo.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ApplicationLogo>;
 
-const Template: Story<ApplicationLogoProps> = (args) => (
+const Template: StoryFn<ApplicationLogoProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <div style={{ maxWidth: "200px" }}>
diff --git a/src/components/Autocomplete/Autocomplete.stories.tsx b/src/components/Autocomplete/Autocomplete.stories.tsx
index b1da7ae19..a7f879d6e 100644
--- a/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import Autocomplete from "./";
@@ -34,7 +34,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Autocomplete>;
 
-const Template: Story<AutocompleteProps> = ({
+const Template: StoryFn<AutocompleteProps> = ({
   label,
   required,
   tooltip,
diff --git a/src/components/BackLink/BackLink.stories.tsx b/src/components/BackLink/BackLink.stories.tsx
index 8aeda0d6f..01af12b30 100644
--- a/src/components/BackLink/BackLink.stories.tsx
+++ b/src/components/BackLink/BackLink.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import BackLink from "./";
 import { BackLinkProps } from "./BackLink.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof BackLink>;
 
-const Template: Story<BackLinkProps> = (args) => (
+const Template: StoryFn<BackLinkProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <BackLink {...args} onClick={() => alert("You clicked me!")} />
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index a4175ec85..46b14793d 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Badge from "./";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Badge>;
 
-const Template: Story<BadgeProps> = ({ label, id, sx, color }) => {
+const Template: StoryFn<BadgeProps> = ({ label, id, sx, color }) => {
   return (
     <StoryThemeProvider>
       <GlobalStyles />
diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
index 4c4e3d08c..48ae06496 100644
--- a/src/components/Box/Box.stories.tsx
+++ b/src/components/Box/Box.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Box from "./";
 import { BoxProps } from "./Box.types";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Box>;
 
-const Template: Story<BoxProps> = (args) => {
+const Template: StoryFn<BoxProps> = (args) => {
   const reference = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
diff --git a/src/components/BoxedIcon/BoxedIcon.stories.tsx b/src/components/BoxedIcon/BoxedIcon.stories.tsx
index e84a618d0..6fea6f3d9 100644
--- a/src/components/BoxedIcon/BoxedIcon.stories.tsx
+++ b/src/components/BoxedIcon/BoxedIcon.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import BoxedIcon from "./";
 import { IBoxedIconProps } from "./BoxedIcon.types";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof BoxedIcon>;
 
-const Template: Story<IBoxedIconProps> = (args) => {
+const Template: StoryFn<IBoxedIconProps> = (args) => {
   return (
     <StoryThemeProvider>
       <GlobalStyles />
diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
index 80a7aeb69..684acb581 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { BreadcrumbsOption, BreadcrumbsProps } from "./Breadcrumbs.types";
 import Breadcrumbs from "./";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Breadcrumbs>;
 
-const Template: Story<BreadcrumbsProps> = (args) => (
+const Template: StoryFn<BreadcrumbsProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Breadcrumbs {...args} />
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 43275a2bd..9ba7da725 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ButtonProps } from "./Button.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Button>;
 
-const Template: Story<ButtonProps> = (args) => (
+const Template: StoryFn<ButtonProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Button {...args} onClick={() => alert("You clicked me!")} />
diff --git a/src/components/Button/Button.uikit.stories.tsx b/src/components/Button/Button.uikit.stories.tsx
index ee9d5885b..b4baf2c98 100644
--- a/src/components/Button/Button.uikit.stories.tsx
+++ b/src/components/Button/Button.uikit.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "./";
 import { ButtonProps } from "./Button.types";
@@ -38,7 +38,7 @@ export default {
   },
 } as Meta<typeof Button>;
 
-const Template: Story<ButtonProps> = (args) => (
+const Template: StoryFn<ButtonProps> = (args) => (
   <StoryThemeProvider>
     <Box
       sx={{
diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
index f227c60c4..c265debd9 100644
--- a/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ButtonGroupProps } from "./ButtonGroup.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -37,7 +37,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ButtonGroup>;
 
-const Template: Story<ButtonGroupProps> = (args) => (
+const Template: StoryFn<ButtonGroupProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <ButtonGroup {...args}>
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index c0026e63e..ca84d6b12 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Checkbox from "./";
 import { CheckboxProps } from "./Checkbox.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Checkbox>;
 
-const Template: Story<CheckboxProps> = (args) => (
+const Template: StoryFn<CheckboxProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Checkbox {...args} />
diff --git a/src/components/CodeEditor/CodeEditor.stories.tsx b/src/components/CodeEditor/CodeEditor.stories.tsx
index e893a023d..4d2b44461 100644
--- a/src/components/CodeEditor/CodeEditor.stories.tsx
+++ b/src/components/CodeEditor/CodeEditor.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import { CodeEditorProps } from "./CodeEditor.types";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof CodeEditor>;
 
-const Template: Story<CodeEditorProps> = (args) => (
+const Template: StoryFn<CodeEditorProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <CodeEditor {...args} />
diff --git a/src/components/CodeSnippet/CodeSnippet.stories.tsx b/src/components/CodeSnippet/CodeSnippet.stories.tsx
index d54f92777..a2d30c94f 100644
--- a/src/components/CodeSnippet/CodeSnippet.stories.tsx
+++ b/src/components/CodeSnippet/CodeSnippet.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import TestIcon from "../../utils/TestIcon";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof CodeSnippet>;
 
-const Template: Story<CodeSnippetProps> = (args) => (
+const Template: StoryFn<CodeSnippetProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <CodeSnippet {...args}>
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index 7043ed85c..2537b6c24 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import DataTable from "./";
 import { DataTableProps } from "./DataTable.types";
@@ -40,7 +40,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<DataTableProps<RecordType>> = (args) => {
+const Template: StoryFn<DataTableProps<RecordType>> = (args) => {
   const [selected, setSelected] = useState<Array<keyof RecordType | string[]>>(
     [],
   );
diff --git a/src/components/DateTimeInput/DateTimeInput.stories.tsx b/src/components/DateTimeInput/DateTimeInput.stories.tsx
index d5968015b..c27d03760 100644
--- a/src/components/DateTimeInput/DateTimeInput.stories.tsx
+++ b/src/components/DateTimeInput/DateTimeInput.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useEffect, useState } from "@storybook/addons";
 import { DateTime } from "luxon";
 
@@ -32,7 +32,7 @@ export default {
   argTypes: {},
 } as Meta<typeof DateTimeInput>;
 
-const Template: Story<DateTimeInputProps> = ({
+const Template: StoryFn<DateTimeInputProps> = ({
   mode,
   usePortal,
   maxDate,
diff --git a/src/components/DateTimeInput/DateTimeSelector.stories.tsx b/src/components/DateTimeInput/DateTimeSelector.stories.tsx
index f7919c1a1..6a5ee0dcb 100644
--- a/src/components/DateTimeInput/DateTimeSelector.stories.tsx
+++ b/src/components/DateTimeInput/DateTimeSelector.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { DateTime } from "luxon";
 
 import { DateTimeSelectorProps } from "./DateTimeInput.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof DateTimeSelector>;
 
-const Template: Story<DateTimeSelectorProps> = ({
+const Template: StoryFn<DateTimeSelectorProps> = ({
   mode,
   id,
   usePortal,
diff --git a/src/components/DropdownSelector/DropdownSelector.stories.tsx b/src/components/DropdownSelector/DropdownSelector.stories.tsx
index 6fd673e4a..b19bae1e0 100644
--- a/src/components/DropdownSelector/DropdownSelector.stories.tsx
+++ b/src/components/DropdownSelector/DropdownSelector.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import DropdownSelector from "./";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof DropdownSelector>;
 
-const Template: Story<DropdownSelectorProps> = (args) => {
+const Template: StoryFn<DropdownSelectorProps> = (args) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const openDownloadMenu = Boolean(anchorEl);
 
diff --git a/src/components/ExpandMenu/ExpandMenu.stories.tsx b/src/components/ExpandMenu/ExpandMenu.stories.tsx
index 74bd5dec4..b8dd71a73 100644
--- a/src/components/ExpandMenu/ExpandMenu.stories.tsx
+++ b/src/components/ExpandMenu/ExpandMenu.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ExpandMenuProps } from "./ExpandMenu.types";
 import ExpandMenuOption from "./ExpandMenuOption";
@@ -36,7 +36,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ExpandMenu>;
 
-const Template: Story<ExpandMenuProps> = (args) => {
+const Template: StoryFn<ExpandMenuProps> = (args) => {
   const [open, setOpen] = useState<boolean>(false);
 
   const extraArgs = {
diff --git a/src/components/ExpandOptionsButton/ExpandOptionsButton.stories.tsx b/src/components/ExpandOptionsButton/ExpandOptionsButton.stories.tsx
index 33baddc44..6f6f3c639 100644
--- a/src/components/ExpandOptionsButton/ExpandOptionsButton.stories.tsx
+++ b/src/components/ExpandOptionsButton/ExpandOptionsButton.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import ExpandOptionsButton from "./";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ExpandOptionsButton>;
 
-const Template: Story<ExpandOptionsButtonProps> = (args) => {
+const Template: StoryFn<ExpandOptionsButtonProps> = (args) => {
   const [open, setOpen] = useState<boolean>(false);
 
   const extraArgs = {
diff --git a/src/components/FileSelector/FileSelector.stories.tsx b/src/components/FileSelector/FileSelector.stories.tsx
index 64fd8629a..657eb5731 100644
--- a/src/components/FileSelector/FileSelector.stories.tsx
+++ b/src/components/FileSelector/FileSelector.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import FileSelector from "./";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof FileSelector>;
 
-const Template: Story<FileSelectorProps> = ({
+const Template: StoryFn<FileSelectorProps> = ({
   label,
   required,
   disabled,
diff --git a/src/components/FormActionsTray/FormActionsTray.stories.tsx b/src/components/FormActionsTray/FormActionsTray.stories.tsx
index 761d475cc..2f1bbcbcd 100644
--- a/src/components/FormActionsTray/FormActionsTray.stories.tsx
+++ b/src/components/FormActionsTray/FormActionsTray.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { FormActionsTrayProps } from "./FormActionsTray.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof FormActionsTray>;
 
-const Template: Story<FormActionsTrayProps> = (args) => (
+const Template: StoryFn<FormActionsTrayProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <FormActionsTray {...args}>
diff --git a/src/components/FormLayout/FormLayout.stories.tsx b/src/components/FormLayout/FormLayout.stories.tsx
index c65c3f20f..62769b555 100644
--- a/src/components/FormLayout/FormLayout.stories.tsx
+++ b/src/components/FormLayout/FormLayout.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { FormLayoutProps } from "./FormLayout.types";
 import FormLayout from "./";
@@ -32,7 +32,7 @@ export default {
   argTypes: {},
 } as Meta<typeof FormLayout>;
 
-const Template: Story<FormLayoutProps> = (args) => (
+const Template: StoryFn<FormLayoutProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <FormLayout {...args} title={"Form Title"} icon={<TestIcon />}>
diff --git a/src/components/GlobalStyles/Colors.stories.tsx b/src/components/GlobalStyles/Colors.stories.tsx
index ddeacd9c0..be270448a 100644
--- a/src/components/GlobalStyles/Colors.stories.tsx
+++ b/src/components/GlobalStyles/Colors.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import GlobalStyles from "./";
 import Box from "../Box";
@@ -76,7 +76,7 @@ const renderItems = (variants: object) => {
   );
 };
 
-const Template: Story = (args) => (
+const Template: StoryFn = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Box>
diff --git a/src/components/GlobalStyles/GlobalStyles.stories.tsx b/src/components/GlobalStyles/GlobalStyles.stories.tsx
index 77eca55b6..e10ff6cb2 100644
--- a/src/components/GlobalStyles/GlobalStyles.stories.tsx
+++ b/src/components/GlobalStyles/GlobalStyles.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import GlobalStyles from "./";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof GlobalStyles>;
 
-const Template: Story = (args) => (
+const Template: StoryFn = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <div>
diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx
index 4ff3a6c8f..aabddfb3b 100644
--- a/src/components/Grid/Grid.stories.tsx
+++ b/src/components/Grid/Grid.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Grid from "./";
 import { GridProps } from "./Grid.types";
@@ -27,7 +27,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Grid>;
 
-const Template: Story<GridProps> = (args) => (
+const Template: StoryFn<GridProps> = (args) => (
   <StoryThemeProvider>
     <Grid
       container
diff --git a/src/components/HelpBox/HelpBox.stories.tsx b/src/components/HelpBox/HelpBox.stories.tsx
index f5d28a20f..10e72e919 100644
--- a/src/components/HelpBox/HelpBox.stories.tsx
+++ b/src/components/HelpBox/HelpBox.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, HTMLAttributes } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HelpBoxProps } from "./HelpBox.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof HelpBox>;
 
-const Template: Story<HelpBoxProps> = (
+const Template: StoryFn<HelpBoxProps> = (
   args: HelpBoxProps & HTMLAttributes<HTMLDivElement>,
 ) => (
   <StoryThemeProvider>
diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
index d82dc4de4..0793a7aff 100644
--- a/src/components/IconButton/IconButton.stories.tsx
+++ b/src/components/IconButton/IconButton.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import IconButton from "./";
 import { IconButtonProps } from "./IconButton.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof IconButton>;
 
-const Template: Story<IconButtonProps> = (args) => (
+const Template: StoryFn<IconButtonProps> = (args) => (
   <StoryThemeProvider>
     <IconButton {...args} onClick={() => alert("You clicked me!")}>
       <DownloadIcon />
diff --git a/src/components/InputBox/InputBox.stories.tsx b/src/components/InputBox/InputBox.stories.tsx
index c945fa64d..93f716b7b 100644
--- a/src/components/InputBox/InputBox.stories.tsx
+++ b/src/components/InputBox/InputBox.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import TestIcon from "../../utils/TestIcon";
@@ -33,7 +33,7 @@ export default {
   argTypes: {},
 } as Meta<typeof InputBox>;
 
-const Template: Story<InputBoxProps> = (args) => (
+const Template: StoryFn<InputBoxProps> = (args) => (
   <StoryThemeProvider>
     <Box sx={{ display: "flex", gap: 24, flexBasis: "50%" }}>
       <InputBox {...args} sizeMode={"small"} />
diff --git a/src/components/InputBox/InputBox.uikit.stories.tsx b/src/components/InputBox/InputBox.uikit.stories.tsx
index f09d914b0..66e8b6d1d 100644
--- a/src/components/InputBox/InputBox.uikit.stories.tsx
+++ b/src/components/InputBox/InputBox.uikit.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import InputBox from "./";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof InputBox>;
 
-const Template: Story<InputBoxProps> = (args: InputBoxProps) => {
+const Template: StoryFn<InputBoxProps> = (args: InputBoxProps) => {
   return (
     <StoryThemeProvider>
       <h1>Horizontal</h1>
diff --git a/src/components/InputLabel/InputLabel.stories.tsx b/src/components/InputLabel/InputLabel.stories.tsx
index 385d2eaae..9a2f0bbeb 100644
--- a/src/components/InputLabel/InputLabel.stories.tsx
+++ b/src/components/InputLabel/InputLabel.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Index from "./index";
@@ -27,7 +27,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Index>;
 
-const Template: Story<InputLabelProps> = (args) => (
+const Template: StoryFn<InputLabelProps> = (args) => (
   <StoryThemeProvider>
     <Index {...args} />
   </StoryThemeProvider>
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index d95d4deae..f1bae8f73 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/src/components/Link/Link.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Link from "./";
 import { LinkProps } from "./Link.types";
@@ -27,7 +27,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Link>;
 
-const Template: Story<LinkProps> = (args) => (
+const Template: StoryFn<LinkProps> = (args) => (
   <StoryThemeProvider>
     <span style={{ fontSize: 16 }}>
       We can have a{" "}
diff --git a/src/components/LinkButton/LinkButton.stories.tsx b/src/components/LinkButton/LinkButton.stories.tsx
index c016cba34..533bc3f02 100644
--- a/src/components/LinkButton/LinkButton.stories.tsx
+++ b/src/components/LinkButton/LinkButton.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import LinkButton from "./";
 import { LinkButtonProps } from "./LinkButton.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof LinkButton>;
 
-const Template: Story<LinkButtonProps> = (args) => (
+const Template: StoryFn<LinkButtonProps> = (args) => (
   <StoryThemeProvider>
     <span style={{ fontSize: 14 }}>
       Some Text that can be combined with an{" "}
diff --git a/src/components/Loader/Loader.stories.tsx b/src/components/Loader/Loader.stories.tsx
index 0cd0a5cee..6b41697d5 100644
--- a/src/components/Loader/Loader.stories.tsx
+++ b/src/components/Loader/Loader.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Loader from "./";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -26,7 +26,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Loader>;
 
-const Template: Story = (args) => (
+const Template: StoryFn = (args) => (
   <StoryThemeProvider>
     <Loader {...args} />
   </StoryThemeProvider>
diff --git a/src/components/LoginWrapper/LoginWrapper.stories.tsx b/src/components/LoginWrapper/LoginWrapper.stories.tsx
index fe298723a..2f094d6c7 100644
--- a/src/components/LoginWrapper/LoginWrapper.stories.tsx
+++ b/src/components/LoginWrapper/LoginWrapper.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import LoginWrapper from "./";
 import { LoginWrapperProps } from "./LoginWrapper.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof LoginWrapper>;
 
-const Template: Story<LoginWrapperProps> = (args) => (
+const Template: StoryFn<LoginWrapperProps> = (args) => (
   <StoryThemeProvider>
     <LoginWrapper {...args} />
   </StoryThemeProvider>
diff --git a/src/components/ModalBox/ModalBox.stories.tsx b/src/components/ModalBox/ModalBox.stories.tsx
index 4d08bd912..6086e2250 100644
--- a/src/components/ModalBox/ModalBox.stories.tsx
+++ b/src/components/ModalBox/ModalBox.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ModalBox>;
 
-const Template: Story<ModalBoxProps> = ({
+const Template: StoryFn<ModalBoxProps> = ({
   title,
   sx,
   titleIcon,
diff --git a/src/components/NotificationAlert/NotificationAlert.stories.tsx b/src/components/NotificationAlert/NotificationAlert.stories.tsx
index dcd29e81b..e08b70153 100644
--- a/src/components/NotificationAlert/NotificationAlert.stories.tsx
+++ b/src/components/NotificationAlert/NotificationAlert.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import NotificationAlert from "./";
@@ -27,7 +27,9 @@ export default {
   argTypes: {},
 } as Meta<typeof NotificationAlert>;
 
-const Template: Story<NotificationAlertPrp> = (props: NotificationAlertPrp) => {
+const Template: StoryFn<NotificationAlertPrp> = (
+  props: NotificationAlertPrp,
+) => {
   return (
     <StoryThemeProvider>
       <NotificationAlert
diff --git a/src/components/NotificationCount/NotificationCount.stories.tsx b/src/components/NotificationCount/NotificationCount.stories.tsx
index a30cb368a..1106d0dab 100644
--- a/src/components/NotificationCount/NotificationCount.stories.tsx
+++ b/src/components/NotificationCount/NotificationCount.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { NotificationCountProps } from "./NotificationCount.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof NotificationCount>;
 
-const Template: Story<NotificationCountProps> = (args) => (
+const Template: StoryFn<NotificationCountProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <NotificationCount {...args} onClick={() => alert("You clicked me!")}>
diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx
index a729af9cb..f85169b07 100644
--- a/src/components/Notifications/Notifications.stories.tsx
+++ b/src/components/Notifications/Notifications.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useNotification } from "./Notifications.hooks";
 import {
   NotificationDuration,
@@ -166,7 +166,9 @@ export default {
   },
 } as Meta;
 
-const Template: Story<DemoProps> = (args) => <NotificationsWrapper {...args} />;
+const Template: StoryFn<DemoProps> = (args) => (
+  <NotificationsWrapper {...args} />
+);
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/src/components/PageHeader/PageHeader.stories.tsx b/src/components/PageHeader/PageHeader.stories.tsx
index 823d4570d..9f83abe6a 100644
--- a/src/components/PageHeader/PageHeader.stories.tsx
+++ b/src/components/PageHeader/PageHeader.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import PageHeader from "./";
 import { PageHeaderProps } from "./PageHeader.types";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof PageHeader>;
 
-const Template: Story<PageHeaderProps> = (args: PageHeaderProps) => (
+const Template: StoryFn<PageHeaderProps> = (args: PageHeaderProps) => (
   <StoryThemeProvider>
     <PageHeader id={"demo-page-header"} {...args} />
   </StoryThemeProvider>
diff --git a/src/components/PageLayout/PageLayout.stories.tsx b/src/components/PageLayout/PageLayout.stories.tsx
index 880dc4801..f472f1580 100644
--- a/src/components/PageLayout/PageLayout.stories.tsx
+++ b/src/components/PageLayout/PageLayout.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { PageLayoutProps } from "./PageLayout.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof PageLayout>;
 
-const Template: Story<PageLayoutProps> = (args) => (
+const Template: StoryFn<PageLayoutProps> = (args) => (
   <StoryThemeProvider>
     <PageLayout {...args}>
       <SectionTitle>Inside my Computer</SectionTitle>
diff --git a/src/components/ProgressBar/ProgressBar.stories.tsx b/src/components/ProgressBar/ProgressBar.stories.tsx
index b0ed67221..172cc9f7c 100644
--- a/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import ProgressBar from "./";
@@ -27,7 +27,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ProgressBar>;
 
-const Template: Story<ProgressBarProps> = (args) => (
+const Template: StoryFn<ProgressBarProps> = (args) => (
   <StoryThemeProvider>
     <ProgressBar {...args} />
   </StoryThemeProvider>
diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx
index d4db0d124..b38895d98 100644
--- a/src/components/RadioGroup/RadioGroup.stories.tsx
+++ b/src/components/RadioGroup/RadioGroup.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof RadioGroup>;
 
-const Template: Story<RadioGroupProps> = ({
+const Template: StoryFn<RadioGroupProps> = ({
   label,
   id,
   tooltip,
diff --git a/src/components/ScreenTitle/ScreenTitle.stories.tsx b/src/components/ScreenTitle/ScreenTitle.stories.tsx
index a20951bef..d2e9d02fc 100644
--- a/src/components/ScreenTitle/ScreenTitle.stories.tsx
+++ b/src/components/ScreenTitle/ScreenTitle.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ScreenTitleProps } from "./ScreenTitle.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ScreenTitle>;
 
-const Template: Story<ScreenTitleProps> = (args: ScreenTitleProps) => (
+const Template: StoryFn<ScreenTitleProps> = (args: ScreenTitleProps) => (
   <StoryThemeProvider>
     <ScreenTitle id={"screen-title-demo"} {...args} />
   </StoryThemeProvider>
diff --git a/src/components/SearchBox/SearchBox.stories.tsx b/src/components/SearchBox/SearchBox.stories.tsx
index 144753ce0..24887118c 100644
--- a/src/components/SearchBox/SearchBox.stories.tsx
+++ b/src/components/SearchBox/SearchBox.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { SearchBoxProps } from "./SearchBox.types";
 import SearchBox from "./";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof SearchBox>;
 
-const Template: Story<SearchBoxProps> = (args) => (
+const Template: StoryFn<SearchBoxProps> = (args) => (
   <StoryThemeProvider>
     <SearchBox {...args} />
 
diff --git a/src/components/SectionTitle/SectionTitle.stories.tsx b/src/components/SectionTitle/SectionTitle.stories.tsx
index 55ccaac2d..71f72cf38 100644
--- a/src/components/SectionTitle/SectionTitle.stories.tsx
+++ b/src/components/SectionTitle/SectionTitle.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import SectionTitle from "./";
 import { SectionTitleProps } from "./SectionTitle.types";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof SectionTitle>;
 
-const Template: Story<SectionTitleProps> = (args: SectionTitleProps) => (
+const Template: StoryFn<SectionTitleProps> = (args: SectionTitleProps) => (
   <StoryThemeProvider>
     <SectionTitle id={"section-title-demo"} {...args} />
   </StoryThemeProvider>
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index fc7adfb6a..5291e00ca 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 import { SelectOption } from "../../global/global.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -32,7 +32,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Select>;
 
-const Template: Story<SelectProps> = ({
+const Template: StoryFn<SelectProps> = ({
   label,
   required,
   tooltip,
diff --git a/src/components/Select/Select.uikit.stories.tsx b/src/components/Select/Select.uikit.stories.tsx
index cd059ed0c..1841084af 100644
--- a/src/components/Select/Select.uikit.stories.tsx
+++ b/src/components/Select/Select.uikit.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { SelectOption } from "../../global/global.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -65,7 +65,7 @@ const useIconOpts: SelectOption[] = [
   },
 ];
 
-const Template: Story<SelectProps> = (args: SelectProps) => {
+const Template: StoryFn<SelectProps> = (args: SelectProps) => {
   const [selectedValue, setSelectedValue] = React.useState<string | undefined>(
     undefined,
   );
diff --git a/src/components/SizeChart/SizeChart.stories.tsx b/src/components/SizeChart/SizeChart.stories.tsx
index 2721e63c7..fc07367a1 100644
--- a/src/components/SizeChart/SizeChart.stories.tsx
+++ b/src/components/SizeChart/SizeChart.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import SizeChart from "./";
 import { SizeChartProps } from "./SizeChart.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof SizeChart>;
 
-const Template: Story<SizeChartProps> = (args) => (
+const Template: StoryFn<SizeChartProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <SizeChart {...args} />
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 0d2fce54e..bf95dfe5c 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Slider>;
 
-const Template: Story<SliderProps> = (args) => {
+const Template: StoryFn<SliderProps> = (args) => {
   const [value, setValue] = useState<number>(0);
   return (
     <StoryThemeProvider>
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index e014688f6..702511594 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Table from "./Table";
@@ -32,7 +32,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Table>;
 
-const Template: Story<TableComponentsExtraProps> = ({}) => {
+const Template: StoryFn<TableComponentsExtraProps> = ({}) => {
   return (
     <StoryThemeProvider>
       <Table>
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 368f37162..a1428cd11 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -39,7 +39,7 @@ const TestComponent = ({ page }: { page: string }) => {
   return <Box>{page}</Box>;
 };
 
-const Template: Story<TabsProps> = ({
+const Template: StoryFn<TabsProps> = ({
   useRouteTabs = false,
   horizontal,
   options,
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index af1de61ae..06ddee80b 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Tag from "./";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Tag>;
 
-const Template: Story<TagProps> = ({
+const Template: StoryFn<TagProps> = ({
   label,
   id,
   onDelete,
diff --git a/src/components/TextArea/TextArea.stories.tsx b/src/components/TextArea/TextArea.stories.tsx
index 918a01a2c..f9372a417 100644
--- a/src/components/TextArea/TextArea.stories.tsx
+++ b/src/components/TextArea/TextArea.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import TextArea from "./";
 import { TextAreaProps } from "./TextArea.types";
@@ -27,7 +27,7 @@ export default {
   argTypes: {},
 } as Meta<typeof TextArea>;
 
-const Template: Story<TextAreaProps> = (args) => (
+const Template: StoryFn<TextAreaProps> = (args) => (
   <StoryThemeProvider>
     <TextArea {...args} />
   </StoryThemeProvider>
diff --git a/src/components/ThemedLogo/ThemedLogo.stories.tsx b/src/components/ThemedLogo/ThemedLogo.stories.tsx
index dba72536d..5e847f8e8 100644
--- a/src/components/ThemedLogo/ThemedLogo.stories.tsx
+++ b/src/components/ThemedLogo/ThemedLogo.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import ThemedLogo from "./";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -26,7 +26,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ThemedLogo>;
 
-const Template: Story = () => (
+const Template: StoryFn = () => (
   <StoryThemeProvider>
     <ThemedLogo />
   </StoryThemeProvider>
diff --git a/src/components/Toggle/Toggle.stories.tsx b/src/components/Toggle/Toggle.stories.tsx
index 6f67b674f..837f97132 100644
--- a/src/components/Toggle/Toggle.stories.tsx
+++ b/src/components/Toggle/Toggle.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Toggle>;
 
-const Template: Story<ToggleProps> = ({
+const Template: StoryFn<ToggleProps> = ({
   id,
   label,
   tooltip,
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 6179c1162..12d1c55db 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Tooltip from "./index";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Tooltip>;
 
-const Template: Story<TooltipProps> = (args) => (
+const Template: StoryFn<TooltipProps> = (args) => (
   <StoryThemeProvider>
     <Grid container>
       <Grid item xs={4}>
diff --git a/src/components/ValuePair/ValuePair.stories.tsx b/src/components/ValuePair/ValuePair.stories.tsx
index 1584f7b17..f259851d3 100644
--- a/src/components/ValuePair/ValuePair.stories.tsx
+++ b/src/components/ValuePair/ValuePair.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ValuePairProps } from "./ValuePair.types";
 import ValuePair from "./";
@@ -27,7 +27,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ValuePair>;
 
-const Template: Story<ValuePairProps> = ({ sx, direction }) => (
+const Template: StoryFn<ValuePairProps> = ({ sx, direction }) => (
   <StoryThemeProvider>
     <ValuePair
       label={"State"}
diff --git a/src/components/Wizard/Wizard.stories.tsx b/src/components/Wizard/Wizard.stories.tsx
index 6a092524e..f6e03a565 100644
--- a/src/components/Wizard/Wizard.stories.tsx
+++ b/src/components/Wizard/Wizard.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Wizard from "./";
 import { WizardProps } from "./Wizard.types";
@@ -32,7 +32,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Wizard>;
 
-const Template: Story<WizardProps> = ({ wizardSteps, ...props }) => {
+const Template: StoryFn<WizardProps> = ({ wizardSteps, ...props }) => {
   return (
     <StoryThemeProvider>
       <div id={"buttonsHere"}></div>
diff --git a/src/icons/Icons.stories.tsx b/src/icons/Icons.stories.tsx
index 25d4d0887..9bc63b4c3 100644
--- a/src/icons/Icons.stories.tsx
+++ b/src/icons/Icons.stories.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, ReactNode, useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import * as nvicons from "./";
 import Box from "../components/Box";
@@ -63,7 +63,7 @@ const IconDisplay = ({
   );
 };
 
-const Template: Story = (args) => {
+const Template: StoryFn = (args) => {
   const [color, setColor] = useState<boolean>(false);
 
   return (