diff --git a/src/components/Panel/Panel.story.tsx b/src/components/Panel/Panel.story.tsx
index 74891462b..50db9dbc2 100644
--- a/src/components/Panel/Panel.story.tsx
+++ b/src/components/Panel/Panel.story.tsx
@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import { Panel } from './Panel';
 import { Props } from './Panel.types';
 
 import { Button } from '../../components';
+import { Layout } from '../../storybook';
 
 export default {
   title: 'components/Panel',
   component: Panel,
 };
 
-const Template: Story<Props> = ({ content = <div />, ...args }) => {
+const Template: StoryFn<Props> = ({ content = <div />, ...args }) => {
   const [active, activeSet] = useState(true);
   const toggle = () => activeSet((active) => !active);
 
diff --git a/src/components/Panel/props/active.story.tsx b/src/components/Panel/props/active.story.tsx
index 4d1b6ee12..670d949b3 100644
--- a/src/components/Panel/props/active.story.tsx
+++ b/src/components/Panel/props/active.story.tsx
@@ -4,6 +4,10 @@ import { Panel } from '../Panel';
 
 import { Layout } from '../../../storybook';
 
+export default {
+  component: Panel,
+  title: 'components/Panel/props',
+};
 export function Active() {
   const content = <div />;
 
diff --git a/src/components/Panel/props/attach.story.tsx b/src/components/Panel/props/attach.story.tsx
index 2bc78bd77..69732363f 100644
--- a/src/components/Panel/props/attach.story.tsx
+++ b/src/components/Panel/props/attach.story.tsx
@@ -5,6 +5,10 @@ import { Panel } from '../Panel';
 import { Button } from '../../../components';
 import { Layout } from '../../../storybook';
 
+export default {
+  component: Panel,
+  title: 'components/Panel/props',
+};
 export function Attach() {
   const [active, setActive] = useState({ right: false, left: false });
 
diff --git a/src/components/Panel/props/props.story.tsx b/src/components/Panel/props/props.story.tsx
deleted file mode 100644
index 0a69a0b49..000000000
--- a/src/components/Panel/props/props.story.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Panel } from '../Panel';
-
-export default {
-  title: 'components/Panel/props',
-  component: Panel,
-};
-
-export { Active } from './active.story';
-export { Attach } from './attach.story';
-export { Resizable } from './resizable.story';
diff --git a/src/components/Panel/props/resizable.story.tsx b/src/components/Panel/props/resizable.story.tsx
index 4ca554201..62dc15461 100644
--- a/src/components/Panel/props/resizable.story.tsx
+++ b/src/components/Panel/props/resizable.story.tsx
@@ -5,6 +5,10 @@ import { Panel } from '../Panel';
 import { Button } from '../../../components';
 import { Layout } from '../../../storybook';
 
+export default {
+  component: Panel,
+  title: 'components/Panel/props',
+};
 export function Resizable() {
   const [active, activeSet] = useState(true);
   const toggle = () => activeSet((active) => !active);
diff --git a/src/components/TourPoint/examples/ChildrenResize.story.tsx b/src/components/TourPoint/examples/ChildrenResize.story.tsx
index f9d56b505..a60f16814 100644
--- a/src/components/TourPoint/examples/ChildrenResize.story.tsx
+++ b/src/components/TourPoint/examples/ChildrenResize.story.tsx
@@ -8,6 +8,11 @@ import { Header, Paragraph } from '../../../typography';
 import { History, Plus } from '../../../icons';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/examples',
+};
+
 export function ChildrenResize() {
   function Children() {
     const { active, activeSet } = useContext(TourContext);
diff --git a/src/components/TourPoint/examples/InsidePopOver.story.tsx b/src/components/TourPoint/examples/InsidePopOver.story.tsx
index 8a40f78e2..edb2ca74e 100644
--- a/src/components/TourPoint/examples/InsidePopOver.story.tsx
+++ b/src/components/TourPoint/examples/InsidePopOver.story.tsx
@@ -7,6 +7,11 @@ import { Tour } from '../TourPoint.context';
 import { PopOver } from '../../PopOver/PopOver';
 import { Paragraph } from '../../../typography';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/examples',
+};
+
 export function InsidePopOver() {
   const [active, activeSet] = useState(false);
   const getStepsTranslation = ({
diff --git a/src/components/TourPoint/examples/Sequence.story.tsx b/src/components/TourPoint/examples/Sequence.story.tsx
index 6d47f239a..49dc7cc35 100644
--- a/src/components/TourPoint/examples/Sequence.story.tsx
+++ b/src/components/TourPoint/examples/Sequence.story.tsx
@@ -7,6 +7,11 @@ import { Card } from '../TourPoint.story';
 import { Button } from '../../../components';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/examples',
+};
+
 export function Sequence() {
   function Children() {
     const { active, activeSet } = useContext(TourContext);
diff --git a/src/components/TourPoint/examples/examples.story.tsx b/src/components/TourPoint/examples/examples.story.tsx
deleted file mode 100644
index 44edecff6..000000000
--- a/src/components/TourPoint/examples/examples.story.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { TourPoint } from '../TourPoint';
-
-export default {
-  title: 'components/TourPoint/examples',
-  component: TourPoint,
-};
-
-export { ChildrenResize } from './ChildrenResize.story';
-
-export {
-  InsidePopOver,
-  InsidePopOverDelay,
-} from './InsidePopOver.story';
-
-export { Sequence } from './Sequence.story';
diff --git a/src/components/TourPoint/props/active.story.tsx b/src/components/TourPoint/props/active.story.tsx
index e449f4b07..e09da15c6 100644
--- a/src/components/TourPoint/props/active.story.tsx
+++ b/src/components/TourPoint/props/active.story.tsx
@@ -7,6 +7,10 @@ import { Card } from '../TourPoint.story';
 import { Button } from '../../../components';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/props',
+};
 export function Active() {
   const [active, activeSet] = useState(true);
 
diff --git a/src/components/TourPoint/props/attach.story.tsx b/src/components/TourPoint/props/attach.story.tsx
index c47ea042c..786738f30 100644
--- a/src/components/TourPoint/props/attach.story.tsx
+++ b/src/components/TourPoint/props/attach.story.tsx
@@ -7,6 +7,10 @@ import { Card } from '../TourPoint.story';
 import { Button } from '../../../components';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/props',
+};
 export function Attach() {
   function Children() {
     const { active, activeSet } = useContext(TourContext);
diff --git a/src/components/TourPoint/props/confirmation.story.tsx b/src/components/TourPoint/props/confirmation.story.tsx
index 76422fd2c..5c9c865de 100644
--- a/src/components/TourPoint/props/confirmation.story.tsx
+++ b/src/components/TourPoint/props/confirmation.story.tsx
@@ -8,6 +8,10 @@ import { Button } from '../../../components';
 import { Gear } from '../../../icons';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/props',
+};
 export function Confirmation() {
   function Children() {
     const { active, activeSet } = useContext(TourContext);
diff --git a/src/components/TourPoint/props/dismission.story.tsx b/src/components/TourPoint/props/dismission.story.tsx
index e951e01ce..ac266e27e 100644
--- a/src/components/TourPoint/props/dismission.story.tsx
+++ b/src/components/TourPoint/props/dismission.story.tsx
@@ -8,6 +8,10 @@ import { Button } from '../../../components';
 import { Gear } from '../../../icons';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/props',
+};
 export function Dismission() {
   function Children() {
     const { active, activeSet } = useContext(TourContext);
diff --git a/src/components/TourPoint/props/props.story.tsx b/src/components/TourPoint/props/props.story.tsx
deleted file mode 100644
index 858dbcd8c..000000000
--- a/src/components/TourPoint/props/props.story.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { TourPoint } from '../TourPoint';
-
-export default {
-  title: 'components/TourPoint/props',
-  component: TourPoint,
-};
-
-export { Active } from './active.story';
-export { Attach } from './attach.story';
-export { Confirmation } from './confirmation.story';
-export { Dismission } from './dismission.story';
-export { Src } from './src.story';
-export { Title } from './title.story';
diff --git a/src/components/TourPoint/props/src.story.tsx b/src/components/TourPoint/props/src.story.tsx
index 855a7b543..57babc02a 100644
--- a/src/components/TourPoint/props/src.story.tsx
+++ b/src/components/TourPoint/props/src.story.tsx
@@ -7,6 +7,10 @@ import { Card } from '../TourPoint.story';
 import { Input } from '../../../components';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/props',
+};
 export function Src() {
   const [src, srcSet] = useState('http://placekitten.com/320/213');
 
diff --git a/src/components/TourPoint/props/title.story.tsx b/src/components/TourPoint/props/title.story.tsx
index a799005cc..1ea69a66f 100644
--- a/src/components/TourPoint/props/title.story.tsx
+++ b/src/components/TourPoint/props/title.story.tsx
@@ -7,6 +7,10 @@ import { Card } from '../TourPoint.story';
 import { Input } from '../../../components';
 import { StoryControlBar } from '../../../storybook';
 
+export default {
+  component: TourPoint,
+  title: 'components/TourPoint/props',
+};
 export function Title() {
   const [title, titleSet] = useState('A Fresh New Look');
 
diff --git a/src/tokens/color/background/background.story.tsx b/src/tokens/color/background/background.story.tsx
index 3dc9091c4..e305ad328 100644
--- a/src/tokens/color/background/background.story.tsx
+++ b/src/tokens/color/background/background.story.tsx
@@ -8,6 +8,10 @@ import { core } from '../../core';
 import { Card, Canvas } from '../../storybook';
 import { tx } from '../../util';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <>
diff --git a/src/tokens/color/format/format.story.tsx b/src/tokens/color/format/format.story.tsx
index ab5fdc2da..18b6cca19 100644
--- a/src/tokens/color/format/format.story.tsx
+++ b/src/tokens/color/format/format.story.tsx
@@ -10,6 +10,10 @@ import { Card, Canvas } from '../../storybook';
 
 import { Text } from '../../../typography';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <Canvas>
diff --git a/src/tokens/color/livestream/livestream.story.tsx b/src/tokens/color/livestream/livestream.story.tsx
index 57c064229..bd823efc3 100644
--- a/src/tokens/color/livestream/livestream.story.tsx
+++ b/src/tokens/color/livestream/livestream.story.tsx
@@ -8,6 +8,10 @@ import { Card, Canvas } from '../../storybook';
 
 import { Text } from '../../../typography';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <Canvas>
diff --git a/src/tokens/color/rainbow/rainbow.story.tsx b/src/tokens/color/rainbow/rainbow.story.tsx
index ed6e33965..a9a9f784d 100644
--- a/src/tokens/color/rainbow/rainbow.story.tsx
+++ b/src/tokens/color/rainbow/rainbow.story.tsx
@@ -7,6 +7,10 @@ import { Card, Canvas } from '../../storybook';
 
 import { Text } from '../../../typography';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   const styleText = {
     background: 'rgba(0,0,0,0.2)',
diff --git a/src/tokens/color/status/status.story.tsx b/src/tokens/color/status/status.story.tsx
index 05bc22bae..ac81b58bf 100644
--- a/src/tokens/color/status/status.story.tsx
+++ b/src/tokens/color/status/status.story.tsx
@@ -10,6 +10,10 @@ import { Canvas, Card } from '../../storybook';
 
 import { Text } from '../../../typography';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <Canvas>
diff --git a/src/tokens/color/stroke/stroke.story.tsx b/src/tokens/color/stroke/stroke.story.tsx
index 31fa3b4f6..ba177fd5c 100644
--- a/src/tokens/color/stroke/stroke.story.tsx
+++ b/src/tokens/color/stroke/stroke.story.tsx
@@ -8,6 +8,10 @@ import { Card, Canvas } from '../../storybook';
 
 import { Text } from '../../../typography';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <Canvas>
diff --git a/src/tokens/color/surface/surface.story.tsx b/src/tokens/color/surface/surface.story.tsx
index 382fa7484..70d72ae33 100644
--- a/src/tokens/color/surface/surface.story.tsx
+++ b/src/tokens/color/surface/surface.story.tsx
@@ -8,6 +8,10 @@ import { core } from '../../core';
 import { Card, Canvas } from '../../storybook';
 import { tx } from '../../util';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <>
diff --git a/src/tokens/color/text/text.story.tsx b/src/tokens/color/text/text.story.tsx
index d0baac5db..388bb873d 100644
--- a/src/tokens/color/text/text.story.tsx
+++ b/src/tokens/color/text/text.story.tsx
@@ -8,6 +8,10 @@ import { core } from '../../core';
 import { Card, Canvas } from '../../storybook';
 import { tx } from '../../util';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   return (
     <>
diff --git a/src/tokens/color/upsell/upsell.story.tsx b/src/tokens/color/upsell/upsell.story.tsx
index e220f0172..088cb5bfc 100644
--- a/src/tokens/color/upsell/upsell.story.tsx
+++ b/src/tokens/color/upsell/upsell.story.tsx
@@ -7,6 +7,10 @@ import { Card, Canvas } from '../../storybook';
 
 import { Text } from '../../../typography';
 
+export default {
+  title: 'Tokens/color',
+};
+
 export function Tokens() {
   const styleText = {
     background: 'rgba(0,0,0,0.2)',
diff --git a/src/tokens/typography/size/size.story.tsx b/src/tokens/typography/size/size.story.tsx
index 967a8b134..f9a63523a 100644
--- a/src/tokens/typography/size/size.story.tsx
+++ b/src/tokens/typography/size/size.story.tsx
@@ -7,6 +7,8 @@ import { Text } from '../../../typography';
 import { core } from '../../core';
 import { Canvas } from '../../storybook';
 
+export default { title: 'Tokens/typography' };
+
 export function Tokens() {
   return (
     <Canvas>
diff --git a/src/tokens/typography/typography.story.tsx b/src/tokens/typography/typography.story.tsx
deleted file mode 100644
index a2047ecec..000000000
--- a/src/tokens/typography/typography.story.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default { title: 'Tokens/typography' };
-
-export { Tokens as Size } from './size/size.story';