diff --git a/CHANGELOG.md b/CHANGELOG.md
index de50b0d57..6e999094e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,62 @@ All notable changes to this project will be documented in this file. See
 [standard-version](https://github.com/conventional-changelog/standard-version)
 for commit guidelines.
 
+### [0.1.1-beta.3](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.2...v0.1.1-beta.3) (2020-11-17)
+
+### Bug Fixes
+
+- **toast:** 🐛 useToast is not a function
+  ([2b35a42](https://github.com/timelessco/renderless-components/commit/2b35a4239ccdd4720d4edff3ffce3dfd99abdadf))
+
+### Build System
+
+- **reakit:** 📌 make reakit as a peer deps
+  ([64f5bee](https://github.com/timelessco/renderless-components/commit/64f5bee61887f1d56226229776da8b74ca22d3e6))
+
+### Code Refactoring
+
+- **utils:** ♻️ remove createContext utils & its test
+  ([797aefa](https://github.com/timelessco/renderless-components/commit/797aefaf6050372af6e4e230ae9fb05be8707f0e))
+- **uuid:** ➖ remove uuid from deps
+  ([b205d1c](https://github.com/timelessco/renderless-components/commit/b205d1c9aa9f1cf8382b8ff0a0322429eb5a3462))
+
+### Others
+
+- **reakitwarning:** ➕ add reakit warning to the prod deps
+  ([013feee](https://github.com/timelessco/renderless-components/commit/013feeede303944dc51ba2a4aff6d10d944bfbdf))
+- **release:** 0.1.1-beta.1
+  ([5512921](https://github.com/timelessco/renderless-components/commit/551292113dfe16f613027150f9c53143041a0c1d))
+- **release:** 0.1.1-beta.2
+  ([9fb7534](https://github.com/timelessco/renderless-components/commit/9fb7534a27ac74491304032513e74fa31b4a3ca1))
+- **toast:** 📌 pin the storybook deps to the latest beta
+  ([3fc971c](https://github.com/timelessco/renderless-components/commit/3fc971c827314d6c7b84bbbc0b6c9b5f9b9b2e0b))
+
+### [0.1.1-beta.2](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.1...v0.1.1-beta.2) (2020-11-17)
+
+### Bug Fixes
+
+- **toast:** 🐛 useToast is not a function
+  ([2b35a42](https://github.com/timelessco/renderless-components/commit/2b35a4239ccdd4720d4edff3ffce3dfd99abdadf))
+
+### Others
+
+- **release:** 0.1.1-beta.1
+  ([5512921](https://github.com/timelessco/renderless-components/commit/551292113dfe16f613027150f9c53143041a0c1d))
+- **toast:** 📌 pin the storybook deps to the latest beta
+  ([3fc971c](https://github.com/timelessco/renderless-components/commit/3fc971c827314d6c7b84bbbc0b6c9b5f9b9b2e0b))
+
+### Build System
+
+- **reakit:** 📌 make reakit as a peer deps
+  ([64f5bee](https://github.com/timelessco/renderless-components/commit/64f5bee61887f1d56226229776da8b74ca22d3e6))
+
+### Code Refactoring
+
+- **utils:** ♻️ remove createContext utils & its test
+  ([797aefa](https://github.com/timelessco/renderless-components/commit/797aefaf6050372af6e4e230ae9fb05be8707f0e))
+- **uuid:** ➖ remove uuid from deps
+  ([b205d1c](https://github.com/timelessco/renderless-components/commit/b205d1c9aa9f1cf8382b8ff0a0322429eb5a3462))
+
 ### [0.1.1-beta.1](https://github.com/timelessco/renderless-components/compare/v0.1.1-beta.0...v0.1.1-beta.1) (2020-11-16)
 
 ### Features
diff --git a/package.json b/package.json
index e78ddc447..c0da00e32 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,15 @@
 {
   "name": "renderless-components",
-  "version": "0.1.1-beta.1",
-  "description": "Renderless Components",
+  "version": "0.1.1-beta.3",
+  "description": "Renderless Components for building accessible components with any UI",
   "keywords": [
-    "renderless-component"
+    "renderless-component",
+    "reakit",
+    "a11y",
+    "react",
+    "ui",
+    "toolkit",
+    "components"
   ],
   "homepage": "https://github.com/timelessco/renderless-components#readme",
   "bugs": {
@@ -55,10 +61,9 @@
     "@react-aria/interactions": "^3.3.0",
     "@react-aria/utils": "3.4.0",
     "date-fns": "2.16.1",
-    "reakit": "1.3.0",
     "reakit-system": "0.15.0",
     "reakit-utils": "0.15.0",
-    "uuid": "8.3.1"
+    "reakit-warning": "^0.6.0"
   },
   "devDependencies": {
     "@babel/cli": "7.12.1",
@@ -85,7 +90,6 @@
     "@types/react-dom": "16.9.9",
     "@types/react-transition-group": "4.4.0",
     "@types/testing-library__jest-dom": "5.9.5",
-    "@types/uuid": "8.3.0",
     "@typescript-eslint/eslint-plugin": "4.6.0",
     "@typescript-eslint/parser": "4.6.0",
     "babel-eslint": "10.1.0",
@@ -131,6 +135,7 @@
     "react-test-renderer": "16.14.0",
     "react-transition-group": "4.4.1",
     "react-virtual": "^2.3.1",
+    "reakit": "1.3.0",
     "reakit-test-utils": "0.14.5",
     "rimraf": "3.0.2",
     "sort-package-json": "1.46.1",
@@ -144,7 +149,8 @@
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react-dom": "^16.8.0",
+    "reakit": "^1.3.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/scripts/create-preview-tabs.ts b/scripts/create-preview-tabs.ts
index eeadfba82..1aaf59704 100644
--- a/scripts/create-preview-tabs.ts
+++ b/scripts/create-preview-tabs.ts
@@ -1,19 +1,19 @@
-import {
-  CodeSandboxTemplate,
-  DEFAULT_REACT_CODESANDBOX,
-  DEFAULT_REACTJS_CODESANDBOX,
-} from "storybook-addon-preview";
+import { CodeSandboxTemplate } from "storybook-addon-preview";
 
 interface Props {
   js?: string;
   ts?: string;
+  jsUtils?: string;
+  tsUtils?: string;
   css?: string;
   deps?: string[];
+  jsSandbox?: CodeSandboxTemplate;
+  tsSandbox?: CodeSandboxTemplate;
 }
 
 export function createPreviewTabs(props: Props) {
-  const { js, ts, css, deps: extraDeps = [] } = props;
-  const deps = ["renderless-components@0.1.1-beta.1", ...extraDeps];
+  const { js, ts, jsUtils, tsUtils, css, deps: extraDeps = [] } = props;
+  const deps = ["renderless-components@0.1.1-beta.3", "reakit", ...extraDeps];
   const tabs = [];
 
   if (js) {
@@ -22,7 +22,17 @@ export function createPreviewTabs(props: Props) {
       template: js,
       language: "jsx",
       copy: true,
-      codesandbox: DEFAULT_REACTJS_CODESANDBOX(deps),
+      codesandbox: REACTJS_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (jsUtils) {
+    tabs.push({
+      tab: "UtilsJS",
+      template: jsUtils,
+      language: "jsx",
+      copy: true,
+      codesandbox: REACTJS_CUSTOM_CODESANDBOX(deps),
     });
   }
 
@@ -32,7 +42,17 @@ export function createPreviewTabs(props: Props) {
       template: ts,
       language: "tsx",
       copy: true,
-      codesandbox: DEFAULT_REACT_CODESANDBOX(deps),
+      codesandbox: REACT_CUSTOM_CODESANDBOX(deps),
+    });
+  }
+
+  if (tsUtils) {
+    tabs.push({
+      tab: "Utils",
+      template: tsUtils,
+      language: "tsx",
+      copy: true,
+      codesandbox: REACT_CUSTOM_CODESANDBOX(deps),
     });
   }
 
@@ -52,25 +72,28 @@ const joinStrs = (strs: string[]) => {
   return `[${strs.map(str => `"${str}"`).join(", ")}]`;
 };
 
-export const CreateToastSandbox = ({
-  type = "tsx",
-  deps = [],
-}: {
-  type?: string;
-  deps?: string[];
-}) => {
-  const utilTab = type === "tsx" ? "Utils.tsx" : "Utils.jsx";
-  const ReactTab = type === "tsx" ? "React" : "ReactJS";
+const REACTJS_CUSTOM_CODESANDBOX = (dependencies: string[]) =>
+  new Function(`
+var previews = arguments[0];
+return {
+    framework: "reactjs",
+    files: {
+        "src/App.js": previews["ReactJS"][0],
+        "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
+        "src/Utils.component.js": previews["UtilsJS"] ? previews["UtilsJS"][0] : "",
+    },
+    userDependencies: ${joinStrs(dependencies)},
+};`) as CodeSandboxTemplate;
 
-  return new Function(`
-  var previews = arguments[0];
-  return {
-      framework: "${ReactTab.toLowerCase()}",
-      files: {
-          "src/App.${type}": previews["${ReactTab}"][0],
-          "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
-          "src/ToastUtils.component.${type}": previews["${utilTab}"] ? previews["${utilTab}"][0] : "",
-      },
-      userDependencies: ${joinStrs(deps)},
-  };`) as CodeSandboxTemplate;
-};
+const REACT_CUSTOM_CODESANDBOX = (dependencies: string[]) =>
+  new Function(`
+var previews = arguments[0];
+return {
+    framework: "react",
+    files: {
+        "src/App.tsx": previews["React"][0],
+        "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
+        "src/Utils.component.tsx": previews["Utils"] ? previews["Utils"][0] : "",
+    },
+    userDependencies: ${joinStrs(dependencies)},
+};`) as CodeSandboxTemplate;
diff --git a/src/accordion/stories/AccordionBasic.component.tsx b/src/accordion/stories/AccordionBasic.component.tsx
index 3c9f1c9ec..8e8e5eca8 100644
--- a/src/accordion/stories/AccordionBasic.component.tsx
+++ b/src/accordion/stories/AccordionBasic.component.tsx
@@ -6,7 +6,6 @@ import {
   AccordionTrigger,
   useAccordionState,
 } from "renderless-components";
-import { AccordionInitialState } from "../types";
 
 export function App(props: any) {
   const state = useAccordionState(props);
diff --git a/src/accordion/stories/AccordionBasic.stories.tsx b/src/accordion/stories/AccordionBasic.stories.tsx
index 58a9bcbaa..a1d2d5f78 100644
--- a/src/accordion/stories/AccordionBasic.stories.tsx
+++ b/src/accordion/stories/AccordionBasic.stories.tsx
@@ -4,8 +4,8 @@ import { Meta } from "@storybook/react";
 import { CompositeState } from "reakit/ts";
 import { AccordionInitialState } from "../types";
 import { App as Accordion } from "./AccordionBasic.component";
-import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 
 export const Default: React.FC<Omit<
   AccordionInitialState,
diff --git a/src/select/stories/Select.component.tsx b/src/select/stories/Select.component.tsx
index f9bbea4b8..d134bac9f 100644
--- a/src/select/stories/Select.component.tsx
+++ b/src/select/stories/Select.component.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });
diff --git a/src/select/stories/SelectControlled.component.tsx b/src/select/stories/SelectControlled.component.tsx
index ae1c30f19..7f512edbd 100644
--- a/src/select/stories/SelectControlled.component.tsx
+++ b/src/select/stories/SelectControlled.component.tsx
@@ -1,14 +1,13 @@
 import * as React from "react";
-import { isUndefined } from "@chakra-ui/utils";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC = () => {
   const [fruit, setFruit] = React.useState<string | null>(null);
@@ -51,7 +50,7 @@ const SelectComp: React.FC<SelectCompProps> = props => {
   });
 
   React.useEffect(() => {
-    if (!isUndefined(value)) select.setSelectedValue(value);
+    if (value !== undefined) select.setSelectedValue(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [select.setSelectedValue, value]);
 
diff --git a/src/select/stories/SelectControlled.stories.tsx b/src/select/stories/SelectControlled.stories.tsx
index f3c28989b..b56074860 100644
--- a/src/select/stories/SelectControlled.stories.tsx
+++ b/src/select/stories/SelectControlled.stories.tsx
@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
+  selectCssTemplate,
   selectControlledTemplate,
   selectControlledTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectControlled } from "./SelectControlled.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectControlledTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectControlledTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },
diff --git a/src/select/stories/SelectCustom.component.tsx b/src/select/stories/SelectCustom.component.tsx
index 66e726b4a..ce417713c 100644
--- a/src/select/stories/SelectCustom.component.tsx
+++ b/src/select/stories/SelectCustom.component.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });
diff --git a/src/select/stories/SelectCustom.stories.tsx b/src/select/stories/SelectCustom.stories.tsx
index 1d57c702d..a2adcf4a4 100644
--- a/src/select/stories/SelectCustom.stories.tsx
+++ b/src/select/stories/SelectCustom.stories.tsx
@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
+  selectCssTemplate,
   selectCustomTemplate,
   selectCustomTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectCustom } from "./SelectCustom.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectCustomTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectCustomTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },
diff --git a/src/select/stories/SelectDynamic.component.tsx b/src/select/stories/SelectDynamic.component.tsx
index b31b9ec31..1355ca287 100644
--- a/src/select/stories/SelectDynamic.component.tsx
+++ b/src/select/stories/SelectDynamic.component.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });
diff --git a/src/select/stories/SelectDynamic.stories.tsx b/src/select/stories/SelectDynamic.stories.tsx
index 668c1fe24..27db6158c 100644
--- a/src/select/stories/SelectDynamic.stories.tsx
+++ b/src/select/stories/SelectDynamic.stories.tsx
@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
+  selectCssTemplate,
   selectDynamicTemplate,
   selectDynamicTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectDynamic } from "./SelectDynamic.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectDynamicTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectDynamicTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },
diff --git a/src/select/stories/SelectFetch.component.tsx b/src/select/stories/SelectFetch.component.tsx
index 75234d1e5..3f765d751 100644
--- a/src/select/stories/SelectFetch.component.tsx
+++ b/src/select/stories/SelectFetch.component.tsx
@@ -1,12 +1,12 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
 
 type User = { value: string; label: string };
 
diff --git a/src/select/stories/SelectFetch.stories.tsx b/src/select/stories/SelectFetch.stories.tsx
index 042e42fa1..dca4304f7 100644
--- a/src/select/stories/SelectFetch.stories.tsx
+++ b/src/select/stories/SelectFetch.stories.tsx
@@ -3,9 +3,9 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  selectCssTemplate,
   selectFetchTemplate,
   selectFetchTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectFetch } from "./SelectFetch.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
diff --git a/src/select/stories/SelectMultiple.component.tsx b/src/select/stories/SelectMultiple.component.tsx
index debad8075..1445a8156 100644
--- a/src/select/stories/SelectMultiple.component.tsx
+++ b/src/select/stories/SelectMultiple.component.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const [selectedItems, setSelectedItems] = React.useState<string[]>([]);
diff --git a/src/select/stories/SelectMultiple.stories.tsx b/src/select/stories/SelectMultiple.stories.tsx
index bfb883378..7d8775a97 100644
--- a/src/select/stories/SelectMultiple.stories.tsx
+++ b/src/select/stories/SelectMultiple.stories.tsx
@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  selectCssTemplate,
+  utilsTemplate,
+  utilsTemplateJs,
   selectMultipleTemplate,
   selectMultipleTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectMultiple } from "./SelectMultiple.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectMultipleTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectMultipleTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },
diff --git a/src/select/stories/SelectVirtual.component.tsx b/src/select/stories/SelectVirtual.component.tsx
index 0a07364e5..cfe130a7a 100644
--- a/src/select/stories/SelectVirtual.component.tsx
+++ b/src/select/stories/SelectVirtual.component.tsx
@@ -2,13 +2,13 @@ import * as React from "react";
 import { useVirtual } from "react-virtual";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, values: fruits, ...props });
diff --git a/src/select/stories/SelectVirtual.stories.tsx b/src/select/stories/SelectVirtual.stories.tsx
index a89feb1e4..9a904c6c9 100644
--- a/src/select/stories/SelectVirtual.stories.tsx
+++ b/src/select/stories/SelectVirtual.stories.tsx
@@ -1,34 +1,38 @@
-import * as React from "react";
-import { Meta, Story } from "@storybook/react";
+// import * as React from "react";
+// import { Meta, Story } from "@storybook/react";
 
-import "./Select.css";
-import {
-  selectVirtualTemplate,
-  selectVirtualTemplateJs,
-  selectCssTemplate,
-} from "./templates";
-import { App as SelectVirtual } from "./SelectVirtual.component";
-import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+// import "./Select.css";
+// import {
+//   utilsTemplate,
+//   utilsTemplateJs,
+//   selectVirtualTemplate,
+//   selectCssTemplate,
+//   selectVirtualTemplateJs,
+// } from "./templates";
+// import { App as SelectVirtual } from "./SelectVirtual.component";
+// import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
-export default {
-  component: SelectVirtual,
-  title: "Select/SelectVirtual",
-  parameters: {
-    preview: createPreviewTabs({
-      js: selectVirtualTemplateJs,
-      ts: selectVirtualTemplate,
-      css: selectCssTemplate,
-    }),
-  },
-  decorators: [
-    Story => {
-      document.body.id = "select";
-      return <Story />;
-    },
-  ],
-} as Meta;
+// export default {
+//   component: SelectVirtual,
+//   title: "Select/SelectVirtual",
+//   parameters: {
+//     preview: createPreviewTabs({
+//       js: selectVirtualTemplateJs,
+//       jsUtils: utilsTemplateJs,
+//       ts: selectVirtualTemplate,
+//       tsUtils: utilsTemplate,
+//       css: selectCssTemplate,
+//     }),
+//   },
+//   decorators: [
+//     Story => {
+//       document.body.id = "select";
+//       return <Story />;
+//     },
+//   ],
+// } as Meta;
 
-const Base: Story = args => <SelectVirtual {...args} />;
+// const Base: Story = args => <SelectVirtual {...args} />;
 
 // export const Default = Base.bind({});
 // Default.args = {};
diff --git a/src/select/stories/SelectWindows.component.tsx b/src/select/stories/SelectWindows.component.tsx
index 2134a152f..f61024990 100644
--- a/src/select/stories/SelectWindows.component.tsx
+++ b/src/select/stories/SelectWindows.component.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import {
-  SelectInitialState,
-  useSelectState,
   Select,
-  SelectPopover,
   SelectOption,
-} from "../index";
-import { fruits } from "./fruits";
+  SelectPopover,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+import { fruits } from "./Utils.component";
 
 export const App: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, ...props });
diff --git a/src/select/stories/SelectWindows.stories.tsx b/src/select/stories/SelectWindows.stories.tsx
index 8495dc2d1..de190f7cd 100644
--- a/src/select/stories/SelectWindows.stories.tsx
+++ b/src/select/stories/SelectWindows.stories.tsx
@@ -3,9 +3,11 @@ import { Meta, Story } from "@storybook/react";
 
 import "./Select.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
+  selectCssTemplate,
   selectWindowsTemplate,
   selectWindowsTemplateJs,
-  selectCssTemplate,
 } from "./templates";
 import { App as SelectWindows } from "./SelectWindows.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
@@ -16,7 +18,9 @@ export default {
   parameters: {
     preview: createPreviewTabs({
       js: selectWindowsTemplateJs,
+      jsUtils: utilsTemplateJs,
       ts: selectWindowsTemplate,
+      tsUtils: utilsTemplate,
       css: selectCssTemplate,
     }),
   },
diff --git a/src/select/stories/fruits.ts b/src/select/stories/Utils.component.tsx
similarity index 100%
rename from src/select/stories/fruits.ts
rename to src/select/stories/Utils.component.tsx
diff --git a/src/toast/stories/ToastBasic.component.tsx b/src/toast/stories/ToastBasic.component.tsx
index 6f29d714b..374ec17fc 100644
--- a/src/toast/stories/ToastBasic.component.tsx
+++ b/src/toast/stories/ToastBasic.component.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ToastProvider } from "renderless-components";
 
-import { Variants, Placements } from "./ToastUtils.component";
+import { Variants, Placements } from "./Utils.component";
 
 export const App: React.FC = () => {
   return (
diff --git a/src/toast/stories/ToastBasic.stories.tsx b/src/toast/stories/ToastBasic.stories.tsx
index 417dc466f..36ae02c7a 100644
--- a/src/toast/stories/ToastBasic.stories.tsx
+++ b/src/toast/stories/ToastBasic.stories.tsx
@@ -2,66 +2,28 @@ import React from "react";
 import { Meta } from "@storybook/react";
 
 import {
-  toastBasicCssTemplate,
+  utilsTemplate,
+  utilsTemplateJs,
   toastBasicTemplate,
   toastBasicTemplateJs,
-  toastUtilsTemplate,
-  toastUtilsTemplateJs,
+  toastBasicCssTemplate,
 } from "./templates";
 import "./ToastBasic.css";
 import { App as Toast } from "./ToastBasic.component";
-import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
-
-const sandboxJs = CreateToastSandbox({
-  type: "jsx",
-  deps: ["renderless-components@0.1.1-beta.1"],
-});
-const sandboxTs = CreateToastSandbox({
-  type: "tsx",
-  deps: ["renderless-components@0.1.1-beta.1"],
-});
+import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Toast,
   title: "Toast/Basic",
   parameters: {
-    preview: [
-      {
-        tab: "ReactJS",
-        template: toastBasicTemplateJs,
-        language: "jsx",
-        copy: true,
-        codesandbox: sandboxJs,
-      },
-      {
-        tab: "Utils.jsx",
-        template: toastUtilsTemplateJs,
-        language: "jsx",
-        copy: true,
-        codesandbox: sandboxJs,
-      },
-      {
-        tab: "React",
-        template: toastBasicTemplate,
-        language: "tsx",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-      {
-        tab: "Utils.tsx",
-        template: toastUtilsTemplate,
-        language: "tsx",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-      {
-        tab: "CSS",
-        template: toastBasicCssTemplate,
-        language: "css",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-    ],
+    preview: createPreviewTabs({
+      js: toastBasicTemplateJs,
+      jsUtils: utilsTemplateJs,
+      ts: toastBasicTemplate,
+      tsUtils: utilsTemplate,
+      css: toastBasicCssTemplate,
+      deps: ["react-spring"],
+    }),
   },
 } as Meta;
 
diff --git a/src/toast/stories/ToastCSSAnimated.component.tsx b/src/toast/stories/ToastCSSAnimated.component.tsx
index c87362130..b413a783a 100644
--- a/src/toast/stories/ToastCSSAnimated.component.tsx
+++ b/src/toast/stories/ToastCSSAnimated.component.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { CSSTransition } from "react-transition-group";
-import { ToastProvider, TToastWrapper } from "renderless-components";
 
-import { Variants, Placements } from "./ToastUtils.component";
+import { Variants, Placements } from "./Utils.component";
+import { ToastProvider, TToastWrapper } from "renderless-components";
 
 const CSSTransitionAnimationWrapper: TToastWrapper = ({
   isVisible,
diff --git a/src/toast/stories/ToastCSSAnimated.stories.tsx b/src/toast/stories/ToastCSSAnimated.stories.tsx
index f6cee7cc3..b02adcb5c 100644
--- a/src/toast/stories/ToastCSSAnimated.stories.tsx
+++ b/src/toast/stories/ToastCSSAnimated.stories.tsx
@@ -3,65 +3,27 @@ import { Meta } from "@storybook/react";
 
 import "./ToastBasic.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
   toastBasicCssTemplate,
-  toastUtilsTemplate,
-  toastUtilsTemplateJs,
   toastCssAnimatedTemplate,
   toastCssAnimatedTemplateJs,
 } from "./templates";
 import { App as CSSAnimatedToast } from "./ToastCSSAnimated.component";
-import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
-
-const sandboxJs = CreateToastSandbox({
-  type: "jsx",
-  deps: ["renderless-components@0.1.1-beta.1", "react-transition-group"],
-});
-const sandboxTs = CreateToastSandbox({
-  type: "tsx",
-  deps: ["renderless-components@0.1.1-beta.1", "react-transition-group"],
-});
+import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: CSSAnimatedToast,
   title: "Toast/CSSAnimated",
   parameters: {
-    preview: [
-      {
-        tab: "ReactJS",
-        template: toastCssAnimatedTemplateJs,
-        language: "jsx",
-        copy: true,
-        codesandbox: sandboxJs,
-      },
-      {
-        tab: "Utils.jsx",
-        template: toastUtilsTemplateJs,
-        language: "jsx",
-        copy: true,
-        codesandbox: sandboxJs,
-      },
-      {
-        tab: "React",
-        template: toastCssAnimatedTemplate,
-        language: "tsx",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-      {
-        tab: "Utils.tsx",
-        template: toastUtilsTemplate,
-        language: "tsx",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-      {
-        tab: "CSS",
-        template: toastBasicCssTemplate,
-        language: "css",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-    ],
+    preview: createPreviewTabs({
+      js: toastCssAnimatedTemplateJs,
+      jsUtils: utilsTemplateJs,
+      ts: toastCssAnimatedTemplate,
+      tsUtils: utilsTemplate,
+      css: toastBasicCssTemplate,
+      deps: ["react-transition-group"],
+    }),
   },
   decorators: [
     Story => {
diff --git a/src/toast/stories/ToastReactSpring.component.tsx b/src/toast/stories/ToastReactSpring.component.tsx
index d6bfe2108..40933e3ff 100644
--- a/src/toast/stories/ToastReactSpring.component.tsx
+++ b/src/toast/stories/ToastReactSpring.component.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { animated, useTransition } from "react-spring";
+
+import { Variants, Placements } from "./Utils.component";
 import { ToastProvider, TToastWrapper } from "renderless-components";
-import { Variants, Placements } from "./ToastUtils.component";
 
 const SpringAnimationWrapper: TToastWrapper = ({
   placement,
diff --git a/src/toast/stories/ToastReactSpring.stories.tsx b/src/toast/stories/ToastReactSpring.stories.tsx
index e676b0575..fc8fbb43d 100644
--- a/src/toast/stories/ToastReactSpring.stories.tsx
+++ b/src/toast/stories/ToastReactSpring.stories.tsx
@@ -3,65 +3,27 @@ import { Meta } from "@storybook/react";
 
 import "./ToastBasic.css";
 import {
+  utilsTemplate,
+  utilsTemplateJs,
   toastBasicCssTemplate,
-  toastUtilsTemplate,
-  toastUtilsTemplateJs,
   toastReactSpringTemplate,
   toastReactSpringTemplateJs,
 } from "./templates";
 import { App as ReactSpringToast } from "./ToastCSSAnimated.component";
-import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
-
-const sandboxJs = CreateToastSandbox({
-  type: "jsx",
-  deps: ["renderless-components@0.1.1-beta.1", "react-spring"],
-});
-const sandboxTs = CreateToastSandbox({
-  type: "tsx",
-  deps: ["renderless-components@0.1.1-beta.1", "react-spring"],
-});
+import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: ReactSpringToast,
   title: "Toast/ReactSpring",
   parameters: {
-    preview: [
-      {
-        tab: "ReactJS",
-        template: toastReactSpringTemplateJs,
-        language: "jsx",
-        copy: true,
-        codesandbox: sandboxJs,
-      },
-      {
-        tab: "Utils.jsx",
-        template: toastUtilsTemplateJs,
-        language: "jsx",
-        copy: true,
-        codesandbox: sandboxJs,
-      },
-      {
-        tab: "React",
-        template: toastReactSpringTemplate,
-        language: "tsx",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-      {
-        tab: "Utils.tsx",
-        template: toastUtilsTemplate,
-        language: "tsx",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-      {
-        tab: "CSS",
-        template: toastBasicCssTemplate,
-        language: "css",
-        copy: true,
-        codesandbox: sandboxTs,
-      },
-    ],
+    preview: createPreviewTabs({
+      js: toastReactSpringTemplateJs,
+      jsUtils: utilsTemplateJs,
+      ts: toastReactSpringTemplate,
+      tsUtils: utilsTemplate,
+      css: toastBasicCssTemplate,
+      deps: ["react-spring"],
+    }),
   },
   decorators: [
     Story => {
diff --git a/src/toast/stories/ToastUtils.component.tsx b/src/toast/stories/Utils.component.tsx
similarity index 99%
rename from src/toast/stories/ToastUtils.component.tsx
rename to src/toast/stories/Utils.component.tsx
index 9b42baba9..e112bb7ca 100644
--- a/src/toast/stories/ToastUtils.component.tsx
+++ b/src/toast/stories/Utils.component.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { useToast, Placements as IPlacements } from "renderless-components";
 
 const randomType = (): string => {
diff --git a/yarn.lock b/yarn.lock
index aee3e3393..de8df3645 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3248,11 +3248,6 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
-"@types/uuid@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f"
-  integrity sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==
-
 "@types/warning@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
@@ -16082,16 +16077,16 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@8.3.1, uuid@^8.0.0, uuid@^8.3.0:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
-  integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
-
 uuid@^3.1.0, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.0.0, uuid@^8.3.0:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
+  integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
+
 v8-compile-cache@^2.0.3:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"