diff --git a/packages/pagination/pagination.stories.tsx b/packages/pagination/pagination.stories.tsx
deleted file mode 100644
index c23e87174..000000000
--- a/packages/pagination/pagination.stories.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import React, { useRef, useState } from 'react';
-import { PaginationContainer, usePagination } from './src';
-
-const pages = new Array(7).fill('page');
-
-export const Container = () => {
-  const [controlledSelectedItem, setSelectedItem] = useState(3);
-  const previousPageRef = useRef(null);
-  const nextPageRef = useRef(null);
-  const pageRefs = pages.map(() => React.createRef());
-
-  return (
-    <PaginationContainer
-      selectedItem={controlledSelectedItem}
-      onSelect={newSelectedItem => {
-        let modifiedNewSelectedItem = controlledSelectedItem;
-
-        if (newSelectedItem === 'prev') {
-          if (controlledSelectedItem > 0) {
-            modifiedNewSelectedItem = controlledSelectedItem - 1;
-          }
-        } else if (newSelectedItem === 'next') {
-          if (controlledSelectedItem < pages.length - 1) {
-            modifiedNewSelectedItem = controlledSelectedItem + 1;
-          }
-        } else {
-          modifiedNewSelectedItem = newSelectedItem;
-        }
-
-        if (modifiedNewSelectedItem !== controlledSelectedItem) {
-          setSelectedItem(modifiedNewSelectedItem);
-        }
-      }}
-    >
-      {({
-        selectedItem,
-        focusedItem,
-        getContainerProps,
-        getNextPageProps,
-        getPreviousPageProps,
-        getPageProps
-      }) => {
-        return (
-          <nav aria-label="Pagination (Container)">
-            <div
-              {...getContainerProps({
-                style: { display: 'flex' }
-              })}
-            >
-              <div
-                {...getPreviousPageProps({
-                  item: 'prev',
-                  'aria-disabled': selectedItem === 0,
-                  focusRef: previousPageRef,
-                  ref: previousPageRef,
-                  key: 'previous-page',
-                  style: {
-                    color: selectedItem === 0 ? 'gray' : undefined,
-                    cursor: 'pointer',
-                    userSelect: 'none'
-                  }
-                })}
-              >
-                Prev
-              </div>
-              {pages.map((page, index) => {
-                return (
-                  <div
-                    {...getPageProps({
-                      page: index,
-                      current: index === selectedItem,
-                      item: index,
-                      focusRef: pageRefs[index],
-                      ref: pageRefs[index],
-                      key: `page-${index}`,
-                      style: {
-                        outline: index === focusedItem ? '3px solid red' : undefined,
-                        background: index === selectedItem ? 'gray' : undefined,
-                        padding: '0 6px',
-                        cursor: 'pointer',
-                        userSelect: 'none'
-                      }
-                    })}
-                  >
-                    {index + 1}
-                  </div>
-                );
-              })}
-              <div
-                {...getNextPageProps({
-                  item: 'next',
-                  'aria-disabled': selectedItem === pages.length - 1,
-                  focusRef: nextPageRef,
-                  ref: nextPageRef,
-                  key: 'next-page',
-                  style: {
-                    color: selectedItem === pages.length - 1 ? 'gray' : undefined,
-                    cursor: 'pointer',
-                    userSelect: 'none'
-                  }
-                })}
-              >
-                Next
-              </div>
-            </div>
-          </nav>
-        );
-      }}
-    </PaginationContainer>
-  );
-};
-
-export const Hook = () => {
-  const previousPageRef = useRef(null);
-  const nextPageRef = useRef(null);
-  const pageRefs = pages.map(() => React.createRef());
-  const [controlledSelectedItem, setSelectedItem] = useState(3);
-
-  const {
-    selectedItem,
-    focusedItem,
-    getContainerProps,
-    getNextPageProps,
-    getPreviousPageProps,
-    getPageProps
-  } = usePagination<number | string>({
-    selectedItem: controlledSelectedItem,
-    onSelect: newSelectedItem => {
-      let modifiedNewSelectedItem = controlledSelectedItem;
-
-      if (newSelectedItem === 'prev') {
-        if (controlledSelectedItem > 0) {
-          modifiedNewSelectedItem = controlledSelectedItem - 1;
-        }
-      } else if (newSelectedItem === 'next') {
-        if (controlledSelectedItem < pages.length - 1) {
-          modifiedNewSelectedItem = controlledSelectedItem + 1;
-        }
-      } else {
-        modifiedNewSelectedItem = newSelectedItem as number;
-      }
-
-      if (modifiedNewSelectedItem !== controlledSelectedItem) {
-        setSelectedItem(modifiedNewSelectedItem);
-      }
-    }
-  });
-
-  return (
-    <nav aria-label="Pagination (Hook)">
-      <ul
-        {...getContainerProps({
-          role: null,
-          style: { display: 'flex' }
-        })}
-      >
-        <li
-          {...getPreviousPageProps({
-            role: null,
-            item: 'prev',
-            'aria-disabled': selectedItem === 0,
-            focusRef: previousPageRef,
-            key: 'previous-page',
-            style: {
-              color: selectedItem === 0 ? 'gray' : undefined,
-              cursor: 'pointer',
-              userSelect: 'none'
-            }
-          })}
-        >
-          Prev
-        </li>
-        {pages.map((page, index) => {
-          return (
-            <li
-              {...getPageProps({
-                role: null,
-                page: index,
-                current: index === selectedItem,
-                item: index,
-                focusRef: pageRefs[index],
-                key: `page-${index}`,
-                style: {
-                  outline: index === focusedItem ? '3px solid red' : undefined,
-                  background: index === selectedItem ? 'gray' : undefined,
-                  padding: '0 6px',
-                  cursor: 'pointer',
-                  userSelect: 'none'
-                }
-              })}
-            >
-              {index + 1}
-            </li>
-          );
-        })}
-        <li
-          {...getNextPageProps({
-            role: null,
-            item: 'next',
-            'aria-disabled': selectedItem === pages.length - 1,
-            focusRef: nextPageRef,
-            key: 'next-page',
-            style: {
-              color: selectedItem === pages.length - 1 ? 'gray' : undefined,
-              cursor: 'pointer',
-              userSelect: 'none'
-            }
-          })}
-        >
-          Next
-        </li>
-      </ul>
-    </nav>
-  );
-};
-
-Container.storyName = 'PaginationContainer';
-
-Hook.storyName = 'usePagination';
-
-Hook.parameters = {
-  docs: {
-    description: {
-      story: `The \`usePagination\` hook is wrapper on top of the [\`useSelection\`](/docs/selection-container--container#useselection) hook with
-      specific prop getters for pagination.`
-    }
-  }
-};
-
-export default {
-  title: 'Pagination Container',
-  component: PaginationContainer,
-  parameters: {
-    layout: 'centered',
-    componentSubtitle: `A container component which wraps the usePagination hook.`
-  }
-};
diff --git a/packages/schedule/README.md b/packages/schedule/README.md
index 18991d99c..30e15ce57 100644
--- a/packages/schedule/README.md
+++ b/packages/schedule/README.md
@@ -14,21 +14,14 @@ npm install @zendeskgarden/container-schedule
 
 ## Usage
 
-For live examples check out our [storybook](https://zendeskgarden.github.io/react-containers?path=/story/schedule-container--useschedule).
-
-### As a Render Prop Component
-
-```jsx static
-import { ScheduleContainer } from '@zendeskgarden/container-schedule';
-
-<ScheduleContainer duration={1000} delayMS={0}>
-  {elapsed => <p>Percentage: {(elapsed * 100).toFixed(0)}%</p>}
-</ScheduleContainer>;
-```
+Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
+examples.
 
 ### As a hook
 
-```jsx static
+The `useSchedule` hook implements a schedule (timer) and communicates when it has elapsed.
+
+```jsx
 import { useSchedule } from '@zendeskgarden/container-schedule';
 
 const Animation = () => {
@@ -38,6 +31,16 @@ const Animation = () => {
 };
 ```
 
+### As a Render Prop Component
+
+```jsx
+import { ScheduleContainer } from '@zendeskgarden/container-schedule';
+
+<ScheduleContainer duration={1000} delayMS={0}>
+  {elapsed => <p>Percentage: {(elapsed * 100).toFixed(0)}%</p>}
+</ScheduleContainer>;
+```
+
 ## Info
 
 See [react-loaders][loaders link] component as a non-trivial use of this.
diff --git a/packages/schedule/demo/#readme.stories.mdx b/packages/schedule/demo/#readme.stories.mdx
new file mode 100644
index 000000000..d51ba85de
--- /dev/null
+++ b/packages/schedule/demo/#readme.stories.mdx
@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs';
+import README from '../README.md';
+
+<Meta title="Packages/Schedule/README" />
+
+<Description>{README}</Description>
diff --git a/packages/schedule/demo/schedule.stories.mdx b/packages/schedule/demo/schedule.stories.mdx
new file mode 100644
index 000000000..e2f0d5868
--- /dev/null
+++ b/packages/schedule/demo/schedule.stories.mdx
@@ -0,0 +1,23 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { ScheduleContainer } from '@zendeskgarden/container-schedule';
+import { ScheduleStory } from './stories/ScheduleStory';
+
+<Meta title="Packages/Schedule" component={ScheduleContainer} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="Schedule"
+    args={{ as: 'hook', delayMS: 750, duration: 1250, loop: true }}
+    argTypes={{
+      as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } }
+    }}
+  >
+    {args => <ScheduleStory {...args} />}
+  </Story>
+</Canvas>
diff --git a/packages/schedule/demo/stories/ScheduleStory.tsx b/packages/schedule/demo/stories/ScheduleStory.tsx
new file mode 100644
index 000000000..f0af385b1
--- /dev/null
+++ b/packages/schedule/demo/stories/ScheduleStory.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { Story } from '@storybook/react';
+import {
+  IScheduleContainerProps,
+  IUseScheduleProps,
+  IUseScheduleReturnValue,
+  ScheduleContainer,
+  useSchedule
+} from '@zendeskgarden/container-schedule';
+
+interface IComponentProps extends IUseScheduleReturnValue {
+  duration?: IUseScheduleProps['duration'];
+  loop?: IUseScheduleProps['loop'];
+}
+
+const Component = ({ delayMS, delayComplete, elapsed, loop, duration = 1250 }: IComponentProps) => (
+  <div>
+    <label>
+      <span>
+        Schedule {delayMS / 1000}s delay followed by {duration / 1000}s{' '}
+        {loop ? 'looped' : 'elapsed'} progress
+      </span>
+      <progress className="block w-full" value={delayComplete ? elapsed : undefined} />
+    </label>
+  </div>
+);
+
+const Container = ({ loop, ...props }: IScheduleContainerProps) => (
+  <ScheduleContainer loop={loop} {...props}>
+    {containerProps => <Component {...containerProps} loop={loop} />}
+  </ScheduleContainer>
+);
+
+const Hook = (props: IUseScheduleProps) => {
+  const hookProps = useSchedule(props);
+
+  return <Component {...hookProps} {...props} />;
+};
+
+interface IArgs extends IScheduleContainerProps {
+  as: 'hook' | 'container';
+}
+
+export const ScheduleStory: Story<IArgs> = ({ as, ...props }) => {
+  const Schedule = () => {
+    switch (as) {
+      case 'container':
+        return <Container {...props} />;
+
+      case 'hook':
+      default:
+        return <Hook {...props} />;
+    }
+  };
+
+  return <Schedule />;
+};
diff --git a/packages/schedule/schedule.stories.tsx b/packages/schedule/schedule.stories.tsx
deleted file mode 100644
index bac12f5fc..000000000
--- a/packages/schedule/schedule.stories.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import React from 'react';
-import { ScheduleContainer, useSchedule } from './src';
-
-export const Container = ({ duration, loop, delayMS }) => (
-  <ScheduleContainer duration={duration} loop={loop} delayMS={delayMS}>
-    {({ elapsed, delayComplete }) => {
-      if (!delayComplete && delayMS !== 0) {
-        return <div>Delay...</div>;
-      }
-
-      return (
-        <div>
-          Percentage: {(elapsed * 100).toFixed(0)}%<br />
-          Elapsed: {elapsed}
-        </div>
-      );
-    }}
-  </ScheduleContainer>
-);
-
-export const Hook = ({ duration, loop, delayMS }) => {
-  const Animation = () => {
-    const { elapsed, delayComplete } = useSchedule({ duration, loop, delayMS });
-
-    if (!delayComplete && delayMS !== 0) {
-      return <div>Delay...</div>;
-    }
-
-    return (
-      <div>
-        Percentage: {(elapsed * 100).toFixed(0)}%<br />
-        Elapsed: {elapsed}
-      </div>
-    );
-  };
-
-  return <Animation />;
-};
-
-const ARGS = {
-  duration: 1250,
-  loop: true,
-  delayMS: 750
-};
-
-Container.storyName = 'ScheduleContainer';
-
-Container.args = ARGS;
-
-Hook.storyName = 'useSchedule';
-
-Hook.args = ARGS;
-
-Hook.parameters = {
-  docs: {
-    description: {
-      story: `The \`useSchedule\` hook implements a schedule (timer) and communicates when it has elapsed.`
-    }
-  }
-};
-
-export default {
-  title: 'Schedule Container',
-  component: ScheduleContainer,
-  parameters: {
-    layout: 'centered',
-    componentSubtitle: `A container component which wraps the useSchedule hook.`
-  }
-};
diff --git a/packages/schedule/src/index.ts b/packages/schedule/src/index.ts
index bb23c37a1..3300aee8b 100644
--- a/packages/schedule/src/index.ts
+++ b/packages/schedule/src/index.ts
@@ -5,5 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-export { useSchedule, IUseScheduleProps, IUseScheduleReturnValue } from './useSchedule';
-export { ScheduleContainer, IScheduleContainerProps } from './ScheduleContainer';
+/* Hooks */
+export { useSchedule } from './useSchedule';
+export type { IUseScheduleProps, IUseScheduleReturnValue } from './useSchedule';
+
+/* Render-props */
+export { ScheduleContainer } from './ScheduleContainer';
+export type { IScheduleContainerProps } from './ScheduleContainer';