From eae4688636ddaae005998d46d9018cc6aa4cefbd Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Fri, 22 May 2020 14:39:44 -0700
Subject: [PATCH 1/6] internal(vx-demo): move docs-v2/examples/* => sandboxes/*

---
 packages/vx-demo/src/{docs-v2/examples => sandboxes}/README.md   | 0
 .../src/{docs-v2/examples => sandboxes}/template/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/template/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/template/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/template/sandbox-styles.css  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-area/Example.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-area/index.tsx        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-area/package.json     | 1 +
 .../{docs-v2/examples => sandboxes}/vx-area/sandbox-styles.css   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-axis/Example.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-axis/index.tsx        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-axis/package.json     | 1 +
 .../{docs-v2/examples => sandboxes}/vx-axis/sandbox-styles.css   | 0
 .../examples => sandboxes}/vx-bargroup-horizontal/Example.tsx    | 0
 .../examples => sandboxes}/vx-bargroup-horizontal/index.tsx      | 0
 .../examples => sandboxes}/vx-bargroup-horizontal/package.json   | 1 +
 .../vx-bargroup-horizontal/sandbox-styles.css                    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-bargroup/Example.tsx  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-bargroup/index.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-bargroup/package.json | 1 +
 .../examples => sandboxes}/vx-bargroup/sandbox-styles.css        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-bars/Example.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-bars/index.tsx        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-bars/package.json     | 1 +
 .../{docs-v2/examples => sandboxes}/vx-bars/sandbox-styles.css   | 0
 .../examples => sandboxes}/vx-barstack-horizontal/Example.tsx    | 0
 .../examples => sandboxes}/vx-barstack-horizontal/index.tsx      | 0
 .../examples => sandboxes}/vx-barstack-horizontal/package.json   | 1 +
 .../vx-barstack-horizontal/sandbox-styles.css                    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-barstack/Example.tsx  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-barstack/index.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-barstack/package.json | 1 +
 .../examples => sandboxes}/vx-barstack/sandbox-styles.css        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-brush/AreaChart.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-brush/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-brush/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-brush/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/vx-brush/sandbox-styles.css  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-chord/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-chord/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-chord/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/vx-chord/sandbox-styles.css  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-curve/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-curve/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-curve/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/vx-curve/sandbox-styles.css  | 0
 .../{docs-v2/examples => sandboxes}/vx-dendrogram/Example.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-dendrogram/index.tsx  | 0
 .../{docs-v2/examples => sandboxes}/vx-dendrogram/package.json   | 1 +
 .../examples => sandboxes}/vx-dendrogram/sandbox-styles.css      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-dots/Example.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-dots/index.tsx        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-dots/package.json     | 1 +
 .../{docs-v2/examples => sandboxes}/vx-dots/sandbox-styles.css   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-drag-i/Example.tsx    | 0
 .../{docs-v2/examples => sandboxes}/vx-drag-i/generateCircles.ts | 0
 .../src/{docs-v2/examples => sandboxes}/vx-drag-i/index.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-drag-i/package.json   | 1 +
 .../{docs-v2/examples => sandboxes}/vx-drag-i/sandbox-styles.css | 0
 .../src/{docs-v2/examples => sandboxes}/vx-drag-ii/Example.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-drag-ii/index.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-drag-ii/package.json  | 1 +
 .../examples => sandboxes}/vx-drag-ii/sandbox-styles.css         | 0
 .../{docs-v2/examples => sandboxes}/vx-geo-custom/Example.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-geo-custom/index.tsx  | 0
 .../{docs-v2/examples => sandboxes}/vx-geo-custom/package.json   | 1 +
 .../examples => sandboxes}/vx-geo-custom/sandbox-styles.css      | 0
 .../examples => sandboxes}/vx-geo-custom/world-topo.d.ts         | 0
 .../examples => sandboxes}/vx-geo-custom/world-topo.json         | 0
 .../{docs-v2/examples => sandboxes}/vx-geo-mercator/Example.tsx  | 0
 .../{docs-v2/examples => sandboxes}/vx-geo-mercator/index.tsx    | 0
 .../{docs-v2/examples => sandboxes}/vx-geo-mercator/package.json | 1 +
 .../examples => sandboxes}/vx-geo-mercator/sandbox-styles.css    | 0
 .../examples => sandboxes}/vx-geo-mercator/world-topo.d.ts       | 0
 .../examples => sandboxes}/vx-geo-mercator/world-topo.json       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-glyph/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-glyph/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-glyph/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/vx-glyph/sandbox-styles.css  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-gradient/Example.tsx  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-gradient/index.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-gradient/package.json | 1 +
 .../examples => sandboxes}/vx-gradient/sandbox-styles.css        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-heatmap/Example.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-heatmap/index.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-heatmap/package.json  | 1 +
 .../examples => sandboxes}/vx-heatmap/sandbox-styles.css         | 0
 .../src/{docs-v2/examples => sandboxes}/vx-legend/Example.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-legend/index.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-legend/package.json   | 1 +
 .../{docs-v2/examples => sandboxes}/vx-legend/sandbox-styles.css | 0
 .../src/{docs-v2/examples => sandboxes}/vx-linktypes/Example.tsx | 0
 .../examples => sandboxes}/vx-linktypes/LinkControls.tsx         | 0
 .../examples => sandboxes}/vx-linktypes/getLinkComponent.ts      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-linktypes/index.tsx   | 0
 .../{docs-v2/examples => sandboxes}/vx-linktypes/package.json    | 1 +
 .../examples => sandboxes}/vx-linktypes/sandbox-styles.css       | 0
 .../examples => sandboxes}/vx-linktypes/useForceUpdate.ts        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-network/Example.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-network/index.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-network/package.json  | 1 +
 .../examples => sandboxes}/vx-network/sandbox-styles.css         | 0
 .../src/{docs-v2/examples => sandboxes}/vx-pack/Example.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-pack/index.tsx        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-pack/package.json     | 1 +
 .../{docs-v2/examples => sandboxes}/vx-pack/sandbox-styles.css   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-pattern/Example.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-pattern/index.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-pattern/package.json  | 1 +
 .../examples => sandboxes}/vx-pattern/sandbox-styles.css         | 0
 .../src/{docs-v2/examples => sandboxes}/vx-polygons/Example.tsx  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-polygons/index.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-polygons/package.json | 1 +
 .../examples => sandboxes}/vx-polygons/sandbox-styles.css        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-radar/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-radar/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-radar/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/vx-radar/sandbox-styles.css  | 0
 .../{docs-v2/examples => sandboxes}/vx-responsive/Example.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-responsive/Lines.tsx  | 0
 .../src/{docs-v2/examples => sandboxes}/vx-responsive/index.tsx  | 0
 .../{docs-v2/examples => sandboxes}/vx-responsive/package.json   | 1 +
 .../examples => sandboxes}/vx-responsive/sandbox-styles.css      | 0
 .../examples => sandboxes}/vx-shape-line-radial/Example.tsx      | 0
 .../examples => sandboxes}/vx-shape-line-radial/index.tsx        | 0
 .../examples => sandboxes}/vx-shape-line-radial/package.json     | 1 +
 .../vx-shape-line-radial/sandbox-styles.css                      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-shape-pie/Example.tsx | 0
 .../src/{docs-v2/examples => sandboxes}/vx-shape-pie/index.tsx   | 0
 .../{docs-v2/examples => sandboxes}/vx-shape-pie/package.json    | 1 +
 .../examples => sandboxes}/vx-shape-pie/sandbox-styles.css       | 0
 .../{docs-v2/examples => sandboxes}/vx-stacked-areas/Example.tsx | 0
 .../{docs-v2/examples => sandboxes}/vx-stacked-areas/index.tsx   | 0
 .../examples => sandboxes}/vx-stacked-areas/package.json         | 1 +
 .../examples => sandboxes}/vx-stacked-areas/sandbox-styles.css   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-stats/Example.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-stats/index.tsx       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-stats/package.json    | 1 +
 .../{docs-v2/examples => sandboxes}/vx-stats/sandbox-styles.css  | 0
 .../{docs-v2/examples => sandboxes}/vx-streamgraph/Example.tsx   | 0
 .../examples => sandboxes}/vx-streamgraph/generateData.ts        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-streamgraph/index.tsx | 0
 .../{docs-v2/examples => sandboxes}/vx-streamgraph/package.json  | 1 +
 .../examples => sandboxes}/vx-streamgraph/sandbox-styles.css     | 0
 .../examples => sandboxes}/vx-streamgraph/useForceUpdate.ts      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-threshold/Example.tsx | 0
 .../src/{docs-v2/examples => sandboxes}/vx-threshold/index.tsx   | 0
 .../{docs-v2/examples => sandboxes}/vx-threshold/package.json    | 1 +
 .../examples => sandboxes}/vx-threshold/sandbox-styles.css       | 0
 .../src/{docs-v2/examples => sandboxes}/vx-tree/Example.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-tree/index.tsx        | 0
 .../src/{docs-v2/examples => sandboxes}/vx-tree/package.json     | 1 +
 .../{docs-v2/examples => sandboxes}/vx-tree/sandbox-styles.css   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-treemap/Example.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-treemap/index.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-treemap/package.json  | 1 +
 .../examples => sandboxes}/vx-treemap/sandbox-styles.css         | 0
 .../src/{docs-v2/examples => sandboxes}/vx-voronoi/Example.tsx   | 0
 .../src/{docs-v2/examples => sandboxes}/vx-voronoi/index.tsx     | 0
 .../src/{docs-v2/examples => sandboxes}/vx-voronoi/package.json  | 1 +
 .../examples => sandboxes}/vx-voronoi/sandbox-styles.css         | 0
 .../src/{docs-v2/examples => sandboxes}/vx-zoom-i/Example.tsx    | 0
 .../src/{docs-v2/examples => sandboxes}/vx-zoom-i/index.tsx      | 0
 .../src/{docs-v2/examples => sandboxes}/vx-zoom-i/package.json   | 1 +
 .../{docs-v2/examples => sandboxes}/vx-zoom-i/sandbox-styles.css | 0
 165 files changed, 38 insertions(+)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/README.md (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/template/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/template/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/template/package.json (95%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/template/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-area/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-area/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-area/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-area/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-axis/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-axis/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-axis/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-axis/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup-horizontal/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup-horizontal/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup-horizontal/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup-horizontal/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bargroup/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bars/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bars/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bars/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-bars/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack-horizontal/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack-horizontal/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack-horizontal/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack-horizontal/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-barstack/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-brush/AreaChart.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-brush/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-brush/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-brush/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-brush/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-chord/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-chord/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-chord/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-chord/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-curve/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-curve/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-curve/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-curve/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dendrogram/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dendrogram/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dendrogram/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dendrogram/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dots/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dots/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dots/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-dots/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-i/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-i/generateCircles.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-i/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-i/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-i/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-ii/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-ii/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-ii/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-drag-ii/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-custom/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-custom/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-custom/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-custom/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-custom/world-topo.d.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-custom/world-topo.json (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-mercator/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-mercator/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-mercator/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-mercator/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-mercator/world-topo.d.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-geo-mercator/world-topo.json (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-glyph/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-glyph/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-glyph/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-glyph/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-gradient/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-gradient/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-gradient/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-gradient/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-heatmap/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-heatmap/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-heatmap/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-heatmap/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-legend/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-legend/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-legend/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-legend/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/LinkControls.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/getLinkComponent.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-linktypes/useForceUpdate.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-network/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-network/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-network/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-network/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pack/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pack/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pack/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pack/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pattern/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pattern/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pattern/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-pattern/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-polygons/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-polygons/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-polygons/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-polygons/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-radar/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-radar/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-radar/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-radar/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-responsive/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-responsive/Lines.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-responsive/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-responsive/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-responsive/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-line-radial/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-line-radial/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-line-radial/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-line-radial/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-pie/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-pie/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-pie/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-shape-pie/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stacked-areas/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stacked-areas/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stacked-areas/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stacked-areas/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stats/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stats/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stats/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-stats/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-streamgraph/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-streamgraph/generateData.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-streamgraph/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-streamgraph/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-streamgraph/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-streamgraph/useForceUpdate.ts (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-threshold/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-threshold/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-threshold/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-threshold/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-tree/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-tree/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-tree/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-tree/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-treemap/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-treemap/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-treemap/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-treemap/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-voronoi/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-voronoi/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-voronoi/package.json (96%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-voronoi/sandbox-styles.css (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-zoom-i/Example.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-zoom-i/index.tsx (100%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-zoom-i/package.json (97%)
 rename packages/vx-demo/src/{docs-v2/examples => sandboxes}/vx-zoom-i/sandbox-styles.css (100%)

diff --git a/packages/vx-demo/src/docs-v2/examples/README.md b/packages/vx-demo/src/sandboxes/README.md
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/README.md
rename to packages/vx-demo/src/sandboxes/README.md
diff --git a/packages/vx-demo/src/docs-v2/examples/template/Example.tsx b/packages/vx-demo/src/sandboxes/template/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/template/Example.tsx
rename to packages/vx-demo/src/sandboxes/template/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/template/index.tsx b/packages/vx-demo/src/sandboxes/template/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/template/index.tsx
rename to packages/vx-demo/src/sandboxes/template/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/template/package.json b/packages/vx-demo/src/sandboxes/template/package.json
similarity index 95%
rename from packages/vx-demo/src/docs-v2/examples/template/package.json
rename to packages/vx-demo/src/sandboxes/template/package.json
index 0789a3dbc..721697a77 100644
--- a/packages/vx-demo/src/docs-v2/examples/template/package.json
+++ b/packages/vx-demo/src/sandboxes/template/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-example",
   "description": "Standalone vx demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/template/sandbox-styles.css b/packages/vx-demo/src/sandboxes/template/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/template/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/template/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-area/Example.tsx b/packages/vx-demo/src/sandboxes/vx-area/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-area/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-area/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-area/index.tsx b/packages/vx-demo/src/sandboxes/vx-area/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-area/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-area/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-area/package.json b/packages/vx-demo/src/sandboxes/vx-area/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-area/package.json
rename to packages/vx-demo/src/sandboxes/vx-area/package.json
index ff0d4a3fb..72c76e0d5 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-area/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-area/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-area",
   "description": "Standalone vx area demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-area/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-area/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-area/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-area/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-axis/Example.tsx b/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-axis/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-axis/index.tsx b/packages/vx-demo/src/sandboxes/vx-axis/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-axis/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-axis/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-axis/package.json b/packages/vx-demo/src/sandboxes/vx-axis/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-axis/package.json
rename to packages/vx-demo/src/sandboxes/vx-axis/package.json
index d1ce1a2ea..d7341ea03 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-axis/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-axis/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-axis",
   "description": "Standalone axis demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/d3-time-format": "2.1.1",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-axis/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-axis/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-axis/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-axis/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/Example.tsx b/packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/index.tsx b/packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/package.json b/packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/package.json
rename to packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/package.json
index b37c3bfe8..e269fdbd3 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-bargroup-horizontal",
   "description": "Standalone vx horizontal grouped bar demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-bargroup-horizontal/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup/Example.tsx b/packages/vx-demo/src/sandboxes/vx-bargroup/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-bargroup/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup/index.tsx b/packages/vx-demo/src/sandboxes/vx-bargroup/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-bargroup/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup/package.json b/packages/vx-demo/src/sandboxes/vx-bargroup/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup/package.json
rename to packages/vx-demo/src/sandboxes/vx-bargroup/package.json
index 3a6bcff86..49626d4d8 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-bargroup/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-bargroup/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-bargroup",
   "description": "Standalone vx grouped bar demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bargroup/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-bargroup/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bargroup/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-bargroup/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bars/Example.tsx b/packages/vx-demo/src/sandboxes/vx-bars/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bars/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-bars/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bars/index.tsx b/packages/vx-demo/src/sandboxes/vx-bars/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bars/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-bars/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bars/package.json b/packages/vx-demo/src/sandboxes/vx-bars/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-bars/package.json
rename to packages/vx-demo/src/sandboxes/vx-bars/package.json
index a990703ee..585f2a7cf 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-bars/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-bars/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-bars",
   "description": "Standalone vx bars demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-bars/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-bars/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-bars/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-bars/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/Example.tsx b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-barstack-horizontal/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/index.tsx b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-barstack-horizontal/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/package.json b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/package.json
rename to packages/vx-demo/src/sandboxes/vx-barstack-horizontal/package.json
index 8dc8a4443..801066531 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-barstack-horizontal",
   "description": "Standalone vx horizontal stacked bar demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack-horizontal/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-barstack-horizontal/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack/Example.tsx b/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack/index.tsx b/packages/vx-demo/src/sandboxes/vx-barstack/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-barstack/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack/package.json b/packages/vx-demo/src/sandboxes/vx-barstack/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack/package.json
rename to packages/vx-demo/src/sandboxes/vx-barstack/package.json
index 6f6dd5734..37098bae3 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-barstack/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-barstack/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-barstack",
   "description": "Standalone vx stacked bar demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-barstack/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-barstack/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-barstack/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-barstack/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-brush/AreaChart.tsx b/packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-brush/AreaChart.tsx
rename to packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-brush/Example.tsx b/packages/vx-demo/src/sandboxes/vx-brush/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-brush/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-brush/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-brush/index.tsx b/packages/vx-demo/src/sandboxes/vx-brush/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-brush/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-brush/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-brush/package.json b/packages/vx-demo/src/sandboxes/vx-brush/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-brush/package.json
rename to packages/vx-demo/src/sandboxes/vx-brush/package.json
index 54f2cb73b..a62d5bc2c 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-brush/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-brush/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-brush",
   "description": "Standalone vx brush demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-brush/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-brush/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-brush/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-brush/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/Example.tsx b/packages/vx-demo/src/sandboxes/vx-chord/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-chord/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-chord/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/index.tsx b/packages/vx-demo/src/sandboxes/vx-chord/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-chord/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-chord/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/package.json b/packages/vx-demo/src/sandboxes/vx-chord/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-chord/package.json
rename to packages/vx-demo/src/sandboxes/vx-chord/package.json
index fe7abaf90..6ce76f3a0 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-chord/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-chord/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-chord",
   "description": "Standalone vx chord demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-chord/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-chord/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-chord/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-curve/Example.tsx b/packages/vx-demo/src/sandboxes/vx-curve/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-curve/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-curve/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-curve/index.tsx b/packages/vx-demo/src/sandboxes/vx-curve/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-curve/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-curve/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-curve/package.json b/packages/vx-demo/src/sandboxes/vx-curve/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-curve/package.json
rename to packages/vx-demo/src/sandboxes/vx-curve/package.json
index 2f6b86f2e..9744db87e 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-curve/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-curve/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-curve",
   "description": "Standalone vx curve demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-curve/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-curve/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-curve/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-curve/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dendrogram/Example.tsx b/packages/vx-demo/src/sandboxes/vx-dendrogram/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-dendrogram/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-dendrogram/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dendrogram/index.tsx b/packages/vx-demo/src/sandboxes/vx-dendrogram/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-dendrogram/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-dendrogram/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dendrogram/package.json b/packages/vx-demo/src/sandboxes/vx-dendrogram/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-dendrogram/package.json
rename to packages/vx-demo/src/sandboxes/vx-dendrogram/package.json
index 48c4be4b6..9ca28e7ab 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-dendrogram/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-dendrogram/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-dendrogram",
   "description": "Standalone vx dendrogram demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dendrogram/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-dendrogram/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-dendrogram/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-dendrogram/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dots/Example.tsx b/packages/vx-demo/src/sandboxes/vx-dots/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-dots/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-dots/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dots/index.tsx b/packages/vx-demo/src/sandboxes/vx-dots/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-dots/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-dots/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dots/package.json b/packages/vx-demo/src/sandboxes/vx-dots/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-dots/package.json
rename to packages/vx-demo/src/sandboxes/vx-dots/package.json
index fdeb24c3d..d39d17c98 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-dots/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-dots/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-dots",
   "description": "Standalone vx scatterplot demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-dots/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-dots/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-dots/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-dots/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-i/Example.tsx b/packages/vx-demo/src/sandboxes/vx-drag-i/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-i/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-drag-i/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-i/generateCircles.ts b/packages/vx-demo/src/sandboxes/vx-drag-i/generateCircles.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-i/generateCircles.ts
rename to packages/vx-demo/src/sandboxes/vx-drag-i/generateCircles.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-i/index.tsx b/packages/vx-demo/src/sandboxes/vx-drag-i/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-i/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-drag-i/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-i/package.json b/packages/vx-demo/src/sandboxes/vx-drag-i/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-i/package.json
rename to packages/vx-demo/src/sandboxes/vx-drag-i/package.json
index cd2500b05..e120ef246 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-drag-i/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-drag-i/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-drag-i",
   "description": "Standalone vx drag demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-i/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-drag-i/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-i/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-drag-i/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-ii/Example.tsx b/packages/vx-demo/src/sandboxes/vx-drag-ii/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-ii/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-drag-ii/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-ii/index.tsx b/packages/vx-demo/src/sandboxes/vx-drag-ii/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-ii/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-drag-ii/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-ii/package.json b/packages/vx-demo/src/sandboxes/vx-drag-ii/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-ii/package.json
rename to packages/vx-demo/src/sandboxes/vx-drag-ii/package.json
index 2a5176c56..6bc3097b7 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-drag-ii/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-drag-ii/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-drag-ii",
   "description": "Standalone vx drag demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-drag-ii/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-drag-ii/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-drag-ii/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-drag-ii/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/Example.tsx b/packages/vx-demo/src/sandboxes/vx-geo-custom/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-custom/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-geo-custom/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/index.tsx b/packages/vx-demo/src/sandboxes/vx-geo-custom/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-custom/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-geo-custom/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/package.json b/packages/vx-demo/src/sandboxes/vx-geo-custom/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-custom/package.json
rename to packages/vx-demo/src/sandboxes/vx-geo-custom/package.json
index f843c36a0..17aec0dd1 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-geo-custom/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-geo-custom",
   "description": "Standalone vx geo-custom demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-geo-custom/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-custom/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-geo-custom/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/world-topo.d.ts b/packages/vx-demo/src/sandboxes/vx-geo-custom/world-topo.d.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-custom/world-topo.d.ts
rename to packages/vx-demo/src/sandboxes/vx-geo-custom/world-topo.d.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-custom/world-topo.json b/packages/vx-demo/src/sandboxes/vx-geo-custom/world-topo.json
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-custom/world-topo.json
rename to packages/vx-demo/src/sandboxes/vx-geo-custom/world-topo.json
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/Example.tsx b/packages/vx-demo/src/sandboxes/vx-geo-mercator/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-geo-mercator/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/index.tsx b/packages/vx-demo/src/sandboxes/vx-geo-mercator/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-geo-mercator/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/package.json b/packages/vx-demo/src/sandboxes/vx-geo-mercator/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/package.json
rename to packages/vx-demo/src/sandboxes/vx-geo-mercator/package.json
index 6b2281cb1..93f82d74e 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-geo-mercator/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-geo-mercator",
   "description": "Standalone vx geo-mercator demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-geo-mercator/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-geo-mercator/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/world-topo.d.ts b/packages/vx-demo/src/sandboxes/vx-geo-mercator/world-topo.d.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/world-topo.d.ts
rename to packages/vx-demo/src/sandboxes/vx-geo-mercator/world-topo.d.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/world-topo.json b/packages/vx-demo/src/sandboxes/vx-geo-mercator/world-topo.json
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-geo-mercator/world-topo.json
rename to packages/vx-demo/src/sandboxes/vx-geo-mercator/world-topo.json
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-glyph/Example.tsx b/packages/vx-demo/src/sandboxes/vx-glyph/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-glyph/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-glyph/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-glyph/index.tsx b/packages/vx-demo/src/sandboxes/vx-glyph/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-glyph/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-glyph/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-glyph/package.json b/packages/vx-demo/src/sandboxes/vx-glyph/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-glyph/package.json
rename to packages/vx-demo/src/sandboxes/vx-glyph/package.json
index 3e4c7b609..a8b37bb1f 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-glyph/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-glyph/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-glyphs",
   "description": "Standalone vx glyph demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-glyph/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-glyph/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-glyph/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-glyph/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-gradient/Example.tsx b/packages/vx-demo/src/sandboxes/vx-gradient/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-gradient/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-gradient/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-gradient/index.tsx b/packages/vx-demo/src/sandboxes/vx-gradient/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-gradient/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-gradient/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-gradient/package.json b/packages/vx-demo/src/sandboxes/vx-gradient/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-gradient/package.json
rename to packages/vx-demo/src/sandboxes/vx-gradient/package.json
index ac06cb7bd..49645e2fb 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-gradient/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-gradient/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-gradient",
   "description": "Standalone vx gradient demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-gradient/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-gradient/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-gradient/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-gradient/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx b/packages/vx-demo/src/sandboxes/vx-heatmap/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-heatmap/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/index.tsx b/packages/vx-demo/src/sandboxes/vx-heatmap/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-heatmap/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-heatmap/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json b/packages/vx-demo/src/sandboxes/vx-heatmap/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json
rename to packages/vx-demo/src/sandboxes/vx-heatmap/package.json
index 58bef6462..3348f0503 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-heatmap/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-heatmap",
   "description": "Standalone vx heatmap demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-heatmap/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-heatmap/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-heatmap/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/Example.tsx b/packages/vx-demo/src/sandboxes/vx-legend/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-legend/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-legend/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/index.tsx b/packages/vx-demo/src/sandboxes/vx-legend/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-legend/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-legend/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/package.json b/packages/vx-demo/src/sandboxes/vx-legend/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-legend/package.json
rename to packages/vx-demo/src/sandboxes/vx-legend/package.json
index d5b35879c..e4d9f9e82 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-legend/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-legend/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-legends",
   "description": "Standalone vx legends demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-legend/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-legend/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-legend/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/Example.tsx b/packages/vx-demo/src/sandboxes/vx-linktypes/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-linktypes/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/LinkControls.tsx b/packages/vx-demo/src/sandboxes/vx-linktypes/LinkControls.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/LinkControls.tsx
rename to packages/vx-demo/src/sandboxes/vx-linktypes/LinkControls.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/getLinkComponent.ts b/packages/vx-demo/src/sandboxes/vx-linktypes/getLinkComponent.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/getLinkComponent.ts
rename to packages/vx-demo/src/sandboxes/vx-linktypes/getLinkComponent.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/index.tsx b/packages/vx-demo/src/sandboxes/vx-linktypes/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-linktypes/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/package.json b/packages/vx-demo/src/sandboxes/vx-linktypes/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/package.json
rename to packages/vx-demo/src/sandboxes/vx-linktypes/package.json
index 91fd8e98a..17c05165f 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-linktypes/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-linktypes",
   "description": "Standalone vx link types demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-linktypes/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-linktypes/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-linktypes/useForceUpdate.ts b/packages/vx-demo/src/sandboxes/vx-linktypes/useForceUpdate.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-linktypes/useForceUpdate.ts
rename to packages/vx-demo/src/sandboxes/vx-linktypes/useForceUpdate.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-network/Example.tsx b/packages/vx-demo/src/sandboxes/vx-network/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-network/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-network/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-network/index.tsx b/packages/vx-demo/src/sandboxes/vx-network/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-network/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-network/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-network/package.json b/packages/vx-demo/src/sandboxes/vx-network/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-network/package.json
rename to packages/vx-demo/src/sandboxes/vx-network/package.json
index e586850ad..77862d777 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-network/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-network/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-network",
   "description": "Standalone vx network demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-network/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-network/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-network/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-network/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pack/Example.tsx b/packages/vx-demo/src/sandboxes/vx-pack/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-pack/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-pack/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pack/index.tsx b/packages/vx-demo/src/sandboxes/vx-pack/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-pack/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-pack/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pack/package.json b/packages/vx-demo/src/sandboxes/vx-pack/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-pack/package.json
rename to packages/vx-demo/src/sandboxes/vx-pack/package.json
index bf9898958..efa424b2d 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-pack/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-pack/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-pack",
   "description": "Standalone vx hierarchy pack demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pack/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-pack/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-pack/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-pack/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pattern/Example.tsx b/packages/vx-demo/src/sandboxes/vx-pattern/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-pattern/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-pattern/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pattern/index.tsx b/packages/vx-demo/src/sandboxes/vx-pattern/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-pattern/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-pattern/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pattern/package.json b/packages/vx-demo/src/sandboxes/vx-pattern/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-pattern/package.json
rename to packages/vx-demo/src/sandboxes/vx-pattern/package.json
index 2f3af50b8..de3f785b7 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-pattern/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-pattern/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-example",
   "description": "Standalone vx demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-pattern/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-pattern/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-pattern/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-pattern/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx b/packages/vx-demo/src/sandboxes/vx-polygons/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-polygons/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/index.tsx b/packages/vx-demo/src/sandboxes/vx-polygons/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-polygons/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-polygons/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json b/packages/vx-demo/src/sandboxes/vx-polygons/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json
rename to packages/vx-demo/src/sandboxes/vx-polygons/package.json
index f11275472..07cc10fbc 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-polygons/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-polygons",
   "description": "Standalone vx polygons demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-polygons/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-polygons/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-polygons/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-radar/Example.tsx b/packages/vx-demo/src/sandboxes/vx-radar/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-radar/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-radar/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-radar/index.tsx b/packages/vx-demo/src/sandboxes/vx-radar/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-radar/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-radar/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-radar/package.json b/packages/vx-demo/src/sandboxes/vx-radar/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-radar/package.json
rename to packages/vx-demo/src/sandboxes/vx-radar/package.json
index d1b28d4d2..121ee79a1 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-radar/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-radar/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-radar",
   "description": "Standalone vx radar chart demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-radar/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-radar/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-radar/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-radar/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-responsive/Example.tsx b/packages/vx-demo/src/sandboxes/vx-responsive/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-responsive/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-responsive/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-responsive/Lines.tsx b/packages/vx-demo/src/sandboxes/vx-responsive/Lines.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-responsive/Lines.tsx
rename to packages/vx-demo/src/sandboxes/vx-responsive/Lines.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-responsive/index.tsx b/packages/vx-demo/src/sandboxes/vx-responsive/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-responsive/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-responsive/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-responsive/package.json b/packages/vx-demo/src/sandboxes/vx-responsive/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-responsive/package.json
rename to packages/vx-demo/src/sandboxes/vx-responsive/package.json
index d16bab81e..f919526bf 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-responsive/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-responsive/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-responsive",
   "description": "Standalone @vx/responsive demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/d3-array": "^2.0.0",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-responsive/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-responsive/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-responsive/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-responsive/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/Example.tsx b/packages/vx-demo/src/sandboxes/vx-shape-line-radial/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-shape-line-radial/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/index.tsx b/packages/vx-demo/src/sandboxes/vx-shape-line-radial/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-shape-line-radial/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/package.json b/packages/vx-demo/src/sandboxes/vx-shape-line-radial/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/package.json
rename to packages/vx-demo/src/sandboxes/vx-shape-line-radial/package.json
index d01a9fdd7..cb6a9024b 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-shape-line-radial/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-shape-line-radial",
   "description": "Standalone vx line radial demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-shape-line-radial/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-line-radial/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-shape-line-radial/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-pie/Example.tsx b/packages/vx-demo/src/sandboxes/vx-shape-pie/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-pie/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-shape-pie/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-pie/index.tsx b/packages/vx-demo/src/sandboxes/vx-shape-pie/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-pie/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-shape-pie/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-pie/package.json b/packages/vx-demo/src/sandboxes/vx-shape-pie/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-pie/package.json
rename to packages/vx-demo/src/sandboxes/vx-shape-pie/package.json
index df744a71e..224a6e5ea 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-shape-pie/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-shape-pie/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-shape-pie",
   "description": "Standalone vx pie demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-shape-pie/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-shape-pie/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-shape-pie/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-shape-pie/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/Example.tsx b/packages/vx-demo/src/sandboxes/vx-stacked-areas/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-stacked-areas/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/index.tsx b/packages/vx-demo/src/sandboxes/vx-stacked-areas/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-stacked-areas/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/package.json b/packages/vx-demo/src/sandboxes/vx-stacked-areas/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/package.json
rename to packages/vx-demo/src/sandboxes/vx-stacked-areas/package.json
index 0aafcee92..78727783d 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-stacked-areas/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-stacked-areas",
   "description": "Standalone vx stacked area demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-stacked-areas/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-stacked-areas/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-stacked-areas/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/Example.tsx b/packages/vx-demo/src/sandboxes/vx-stats/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-stats/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-stats/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/index.tsx b/packages/vx-demo/src/sandboxes/vx-stats/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-stats/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-stats/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/package.json b/packages/vx-demo/src/sandboxes/vx-stats/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-stats/package.json
rename to packages/vx-demo/src/sandboxes/vx-stats/package.json
index 6206d2d14..429ec7452 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-stats/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-stats/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-stats",
   "description": "Standalone vx stats demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-stats/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-stats/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-stats/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-stats/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/Example.tsx b/packages/vx-demo/src/sandboxes/vx-streamgraph/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-streamgraph/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-streamgraph/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/generateData.ts b/packages/vx-demo/src/sandboxes/vx-streamgraph/generateData.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-streamgraph/generateData.ts
rename to packages/vx-demo/src/sandboxes/vx-streamgraph/generateData.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/index.tsx b/packages/vx-demo/src/sandboxes/vx-streamgraph/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-streamgraph/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-streamgraph/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/package.json b/packages/vx-demo/src/sandboxes/vx-streamgraph/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-streamgraph/package.json
rename to packages/vx-demo/src/sandboxes/vx-streamgraph/package.json
index 53ed7794b..6794b69fd 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-streamgraph/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-example",
   "description": "Standalone vx streamgraph demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/d3-array": "^2.0.0",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-streamgraph/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-streamgraph/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-streamgraph/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-streamgraph/useForceUpdate.ts b/packages/vx-demo/src/sandboxes/vx-streamgraph/useForceUpdate.ts
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-streamgraph/useForceUpdate.ts
rename to packages/vx-demo/src/sandboxes/vx-streamgraph/useForceUpdate.ts
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx b/packages/vx-demo/src/sandboxes/vx-threshold/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-threshold/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-threshold/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/index.tsx b/packages/vx-demo/src/sandboxes/vx-threshold/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-threshold/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-threshold/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json b/packages/vx-demo/src/sandboxes/vx-threshold/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json
rename to packages/vx-demo/src/sandboxes/vx-threshold/package.json
index bfa40d951..1bfe68347 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-threshold/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-threshold/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-threshold",
   "description": "Standalone vx threshold demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-threshold/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-threshold/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-threshold/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-threshold/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-tree/Example.tsx b/packages/vx-demo/src/sandboxes/vx-tree/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-tree/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-tree/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-tree/index.tsx b/packages/vx-demo/src/sandboxes/vx-tree/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-tree/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-tree/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-tree/package.json b/packages/vx-demo/src/sandboxes/vx-tree/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-tree/package.json
rename to packages/vx-demo/src/sandboxes/vx-tree/package.json
index f04c1d9af..a258c0e68 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-tree/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-tree/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-tree",
   "description": "Standalone vx tree demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-tree/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-tree/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-tree/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-tree/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/Example.tsx b/packages/vx-demo/src/sandboxes/vx-treemap/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-treemap/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-treemap/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/index.tsx b/packages/vx-demo/src/sandboxes/vx-treemap/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-treemap/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-treemap/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/package.json b/packages/vx-demo/src/sandboxes/vx-treemap/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-treemap/package.json
rename to packages/vx-demo/src/sandboxes/vx-treemap/package.json
index d9fc7e318..cdbf78280 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-treemap/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-treemap/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-treemap",
   "description": "Standalone vx treemap demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-treemap/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-treemap/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-treemap/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/Example.tsx b/packages/vx-demo/src/sandboxes/vx-voronoi/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-voronoi/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-voronoi/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/index.tsx b/packages/vx-demo/src/sandboxes/vx-voronoi/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-voronoi/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-voronoi/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/package.json b/packages/vx-demo/src/sandboxes/vx-voronoi/package.json
similarity index 96%
rename from packages/vx-demo/src/docs-v2/examples/vx-voronoi/package.json
rename to packages/vx-demo/src/sandboxes/vx-voronoi/package.json
index ffe9c96ea..fa2a4d55b 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-voronoi/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-voronoi",
   "description": "Standalone vx voronoi demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-voronoi/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-voronoi/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-voronoi/sandbox-styles.css
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/Example.tsx b/packages/vx-demo/src/sandboxes/vx-zoom-i/Example.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-zoom-i/Example.tsx
rename to packages/vx-demo/src/sandboxes/vx-zoom-i/Example.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/index.tsx b/packages/vx-demo/src/sandboxes/vx-zoom-i/index.tsx
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-zoom-i/index.tsx
rename to packages/vx-demo/src/sandboxes/vx-zoom-i/index.tsx
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/package.json b/packages/vx-demo/src/sandboxes/vx-zoom-i/package.json
similarity index 97%
rename from packages/vx-demo/src/docs-v2/examples/vx-zoom-i/package.json
rename to packages/vx-demo/src/sandboxes/vx-zoom-i/package.json
index 4e355f865..ffcc67eca 100644
--- a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/package.json
+++ b/packages/vx-demo/src/sandboxes/vx-zoom-i/package.json
@@ -2,6 +2,7 @@
   "name": "@vx/demo-zoom-i",
   "description": "Standalone vx zoom demo.",
   "main": "index.tsx",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@types/react": "^16",
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-zoom-i/sandbox-styles.css b/packages/vx-demo/src/sandboxes/vx-zoom-i/sandbox-styles.css
similarity index 100%
rename from packages/vx-demo/src/docs-v2/examples/vx-zoom-i/sandbox-styles.css
rename to packages/vx-demo/src/sandboxes/vx-zoom-i/sandbox-styles.css

From 8dab0af7363f57e5910c74f53ca1026f9647aecc Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Fri, 22 May 2020 14:41:20 -0700
Subject: [PATCH 2/6] internal(vx-demo): update pages to new sandbox paths

---
 .../src/components/CodeSandboxLink.tsx        |  2 +-
 packages/vx-demo/src/components/Gallery.tsx   | 83 +++++++++----------
 packages/vx-demo/src/pages/Areas.tsx          |  4 +-
 packages/vx-demo/src/pages/Axis.tsx           |  4 +-
 packages/vx-demo/src/pages/BarGroup.tsx       |  4 +-
 .../vx-demo/src/pages/BarGroupHorizontal.tsx  |  4 +-
 packages/vx-demo/src/pages/BarStack.tsx       |  4 +-
 .../vx-demo/src/pages/BarStackHorizontal.tsx  |  4 +-
 packages/vx-demo/src/pages/Bars.tsx           |  4 +-
 packages/vx-demo/src/pages/Brush.tsx          |  4 +-
 packages/vx-demo/src/pages/Chord.tsx          |  4 +-
 packages/vx-demo/src/pages/Curves.tsx         |  4 +-
 packages/vx-demo/src/pages/Dendrograms.tsx    |  4 +-
 packages/vx-demo/src/pages/Dots.tsx           |  4 +-
 packages/vx-demo/src/pages/Drag-i.tsx         |  4 +-
 packages/vx-demo/src/pages/Drag-ii.tsx        |  4 +-
 packages/vx-demo/src/pages/Geo-Custom.tsx     |  4 +-
 packages/vx-demo/src/pages/Geo-Mercator.tsx   |  4 +-
 packages/vx-demo/src/pages/Glyphs.tsx         |  4 +-
 packages/vx-demo/src/pages/Gradients.tsx      |  4 +-
 packages/vx-demo/src/pages/Heatmaps.tsx       |  4 +-
 packages/vx-demo/src/pages/Legends.tsx        |  4 +-
 packages/vx-demo/src/pages/LineRadial.tsx     |  4 +-
 packages/vx-demo/src/pages/LinkTypes.tsx      |  4 +-
 packages/vx-demo/src/pages/Network.tsx        |  4 +-
 packages/vx-demo/src/pages/Pack.tsx           |  4 +-
 packages/vx-demo/src/pages/Patterns.tsx       |  4 +-
 packages/vx-demo/src/pages/Pies.tsx           |  4 +-
 packages/vx-demo/src/pages/Polygons.tsx       |  4 +-
 packages/vx-demo/src/pages/Radar.tsx          |  4 +-
 packages/vx-demo/src/pages/Responsive.tsx     |  4 +-
 packages/vx-demo/src/pages/Stacked-Areas.tsx  |  4 +-
 packages/vx-demo/src/pages/Statsplot.tsx      |  4 +-
 packages/vx-demo/src/pages/Streamgraph.tsx    |  4 +-
 packages/vx-demo/src/pages/Text.tsx           |  2 +-
 packages/vx-demo/src/pages/Threshold.tsx      |  4 +-
 packages/vx-demo/src/pages/Treemap.tsx        |  4 +-
 packages/vx-demo/src/pages/Trees.tsx          |  4 +-
 packages/vx-demo/src/pages/Voronoi.tsx        |  4 +-
 packages/vx-demo/src/pages/Zoom-i.tsx         |  4 +-
 40 files changed, 113 insertions(+), 122 deletions(-)

diff --git a/packages/vx-demo/src/components/CodeSandboxLink.tsx b/packages/vx-demo/src/components/CodeSandboxLink.tsx
index 8ceb75387..dde09f630 100644
--- a/packages/vx-demo/src/components/CodeSandboxLink.tsx
+++ b/packages/vx-demo/src/components/CodeSandboxLink.tsx
@@ -37,7 +37,7 @@ const CodeSandboxLink = ({ branch = 'master', exampleDirectoryName }: Props) =>
   return exampleDirectoryName ? (
     <a
       style={STYLES}
-      href={`https://codesandbox.io/s/github/hshoff/vx/tree/${branch}/packages/vx-demo/src/docs-v2/examples/${exampleDirectoryName}`}
+      href={`https://codesandbox.io/s/github/hshoff/vx/tree/${branch}/packages/vx-demo/src/sandboxes/${exampleDirectoryName}`}
       rel="nofollow noopener noreferrer"
       target="_blank"
     >
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
index 472638393..59df00e14 100644
--- a/packages/vx-demo/src/components/Gallery.tsx
+++ b/packages/vx-demo/src/components/Gallery.tsx
@@ -5,77 +5,68 @@ import { ParentSize } from '@vx/responsive';
 import drawData from './util/drawData';
 import Footer from './Footer';
 
-import Area, { background as areaBackground } from '../docs-v2/examples/vx-area/Example';
+import Area, { background as areaBackground } from '../sandboxes/vx-area/Example';
 import Axis, {
   backgroundColor as axisBackgroundColor,
   labelColor as axisTextColor,
-} from '../docs-v2/examples/vx-axis/Example';
+} from '../sandboxes/vx-axis/Example';
 import BarGroup, {
   background as bargroupBackground,
   green as bargroupText,
-} from '../docs-v2/examples/vx-bargroup/Example';
+} from '../sandboxes/vx-bargroup/Example';
 import BarGroupHorizontal, {
   background as horizontalBargroupBackground,
   green as horizontalBargroupText,
-} from '../docs-v2/examples/vx-bargroup-horizontal/Example';
+} from '../sandboxes/vx-bargroup-horizontal/Example';
 import BarStack, {
   background as barstackBackground,
   purple3 as barstackTextColor,
-} from '../docs-v2/examples/vx-barstack/Example';
+} from '../sandboxes/vx-barstack/Example';
 import BarStackHorizontal, {
   background as horizontalBarstackBackground,
   purple3 as horiztonalBarstackTextColor,
-} from '../docs-v2/examples/vx-barstack-horizontal/Example';
-import Bars from '../docs-v2/examples/vx-bars/Example';
-import Brush from '../docs-v2/examples/vx-brush/Example';
-import Chord from '../docs-v2/examples/vx-chord/Example';
-import Curves from '../docs-v2/examples/vx-curve/Example';
+} from '../sandboxes/vx-barstack-horizontal/Example';
+import Bars from '../sandboxes/vx-bars/Example';
+import Brush from '../sandboxes/vx-brush/Example';
+import Chord from '../sandboxes/vx-chord/Example';
+import Curves from '../sandboxes/vx-curve/Example';
 import Dendrogram, {
   background as dendrogramBackground,
   green as dendrogramText,
-} from '../docs-v2/examples/vx-dendrogram/Example';
-import Dots from '../docs-v2/examples/vx-dots/Example';
-import DragI from '../docs-v2/examples/vx-drag-i/Example';
-import DragII from '../docs-v2/examples/vx-drag-ii/Example';
-import GeoCustom from '../docs-v2/examples/vx-geo-custom/Example';
-import GeoMercator from '../docs-v2/examples/vx-geo-mercator/Example';
-import Glyphs, { primary as glyphTextColor } from '../docs-v2/examples/vx-glyph/Example';
-import Gradients from '../docs-v2/examples/vx-gradient/Example';
-import Heatmaps from '../docs-v2/examples/vx-heatmap/Example';
-import Legends from '../docs-v2/examples/vx-legend/Example';
-import LineRadial from '../docs-v2/examples/vx-shape-line-radial/Example';
-import LinkTypes from '../docs-v2/examples/vx-linktypes/Example';
-import Network, {
-  backgroundColor as networkBackground,
-} from '../docs-v2/examples/vx-network/Example';
-import Pies from '../docs-v2/examples/vx-shape-pie/Example';
+} from '../sandboxes/vx-dendrogram/Example';
+import Dots from '../sandboxes/vx-dots/Example';
+import DragI from '../sandboxes/vx-drag-i/Example';
+import DragII from '../sandboxes/vx-drag-ii/Example';
+import GeoCustom from '../sandboxes/vx-geo-custom/Example';
+import GeoMercator from '../sandboxes/vx-geo-mercator/Example';
+import Glyphs, { primary as glyphTextColor } from '../sandboxes/vx-glyph/Example';
+import Gradients from '../sandboxes/vx-gradient/Example';
+import Heatmaps from '../sandboxes/vx-heatmap/Example';
+import Legends from '../sandboxes/vx-legend/Example';
+import LineRadial from '../sandboxes/vx-shape-line-radial/Example';
+import LinkTypes from '../sandboxes/vx-linktypes/Example';
+import Network, { backgroundColor as networkBackground } from '../sandboxes/vx-network/Example';
+import Pies from '../sandboxes/vx-shape-pie/Example';
 import StackedAreas, {
   background as stackedAreaBackground,
-} from '../docs-v2/examples/vx-stacked-areas/Example';
-import StatsPlot from '../docs-v2/examples/vx-stats/Example';
+} from '../sandboxes/vx-stacked-areas/Example';
+import StatsPlot from '../sandboxes/vx-stats/Example';
 import Streamgraph, {
   BACKGROUND as streamgraphBackgroundColor,
-} from '../docs-v2/examples/vx-streamgraph/Example';
-import Pack from '../docs-v2/examples/vx-pack/Example';
-import Patterns from '../docs-v2/examples/vx-pattern/Example';
-import Polygons, {
-  backgroundColor as polygonBackground,
-} from '../docs-v2/examples/vx-polygons/Example';
-import Radar, {
-  bg as radarBackground,
-  pumpkin as radarColor,
-} from '../docs-v2/examples/vx-radar/Example';
-import Responsive from '../docs-v2/examples/vx-responsive/Example';
-import Threshold, {
-  background as thresholdBackground,
-} from '../docs-v2/examples/vx-threshold/Example';
-import Tree, { background as treeBackground } from '../docs-v2/examples/vx-tree/Example';
+} from '../sandboxes/vx-streamgraph/Example';
+import Pack from '../sandboxes/vx-pack/Example';
+import Patterns from '../sandboxes/vx-pattern/Example';
+import Polygons, { backgroundColor as polygonBackground } from '../sandboxes/vx-polygons/Example';
+import Radar, { bg as radarBackground, pumpkin as radarColor } from '../sandboxes/vx-radar/Example';
+import Responsive from '../sandboxes/vx-responsive/Example';
+import Threshold, { background as thresholdBackground } from '../sandboxes/vx-threshold/Example';
+import Tree, { background as treeBackground } from '../sandboxes/vx-tree/Example';
 import Treemap, {
   bg as treemapBackground,
   color1 as treemapTextColor,
-} from '../docs-v2/examples/vx-treemap/Example';
-import Voronoi from '../docs-v2/examples/vx-voronoi/Example';
-import ZoomI from '../docs-v2/examples/vx-zoom-i/Example';
+} from '../sandboxes/vx-treemap/Example';
+import Voronoi from '../sandboxes/vx-voronoi/Example';
+import ZoomI from '../sandboxes/vx-zoom-i/Example';
 
 const items = [
   '#242424',
diff --git a/packages/vx-demo/src/pages/Areas.tsx b/packages/vx-demo/src/pages/Areas.tsx
index a0b52f85a..27bdb7d35 100644
--- a/packages/vx-demo/src/pages/Areas.tsx
+++ b/packages/vx-demo/src/pages/Areas.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Area from '../docs-v2/examples/vx-area/Example';
-import AreaSource from '!!raw-loader!../docs-v2/examples/vx-area/Example';
+import Area from '../sandboxes/vx-area/Example';
+import AreaSource from '!!raw-loader!../sandboxes/vx-area/Example';
 
 export default () => (
   <Show component={Area} title="Areas" codeSandboxDirectoryName="vx-area">
diff --git a/packages/vx-demo/src/pages/Axis.tsx b/packages/vx-demo/src/pages/Axis.tsx
index 794032e89..243883616 100644
--- a/packages/vx-demo/src/pages/Axis.tsx
+++ b/packages/vx-demo/src/pages/Axis.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Axis from '../docs-v2/examples/vx-axis/Example';
-import AxisSource from '!!raw-loader!../docs-v2/examples/vx-axis/Example';
+import Axis from '../sandboxes/vx-axis/Example';
+import AxisSource from '!!raw-loader!../sandboxes/vx-axis/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/BarGroup.tsx b/packages/vx-demo/src/pages/BarGroup.tsx
index 35bb02ea6..aa6babe88 100644
--- a/packages/vx-demo/src/pages/BarGroup.tsx
+++ b/packages/vx-demo/src/pages/BarGroup.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import BarGroup from '../docs-v2/examples/vx-bargroup/Example';
-import BarGroupSource from '!!raw-loader!../docs-v2/examples/vx-bargroup/Example';
+import BarGroup from '../sandboxes/vx-bargroup/Example';
+import BarGroupSource from '!!raw-loader!../sandboxes/vx-bargroup/Example';
 
 export default () => (
   <Show
diff --git a/packages/vx-demo/src/pages/BarGroupHorizontal.tsx b/packages/vx-demo/src/pages/BarGroupHorizontal.tsx
index 7b861db34..fe11434e5 100644
--- a/packages/vx-demo/src/pages/BarGroupHorizontal.tsx
+++ b/packages/vx-demo/src/pages/BarGroupHorizontal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import BarGroupHorizontal from '../docs-v2/examples/vx-bargroup-horizontal/Example';
-import BarGroupHorizontalSource from '!!raw-loader!../docs-v2/examples/vx-bargroup-horizontal/Example';
+import BarGroupHorizontal from '../sandboxes/vx-bargroup-horizontal/Example';
+import BarGroupHorizontalSource from '!!raw-loader!../sandboxes/vx-bargroup-horizontal/Example';
 
 export default () => (
   <Show
diff --git a/packages/vx-demo/src/pages/BarStack.tsx b/packages/vx-demo/src/pages/BarStack.tsx
index d9e70c5a5..d2f2ffc52 100644
--- a/packages/vx-demo/src/pages/BarStack.tsx
+++ b/packages/vx-demo/src/pages/BarStack.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import BarStack from '../docs-v2/examples/vx-barstack/Example';
-import BarStackSource from '!!raw-loader!../docs-v2/examples/vx-barstack/Example';
+import BarStack from '../sandboxes/vx-barstack/Example';
+import BarStackSource from '!!raw-loader!../sandboxes/vx-barstack/Example';
 
 export default () => (
   <Show
diff --git a/packages/vx-demo/src/pages/BarStackHorizontal.tsx b/packages/vx-demo/src/pages/BarStackHorizontal.tsx
index 0bc50fd19..6c42d6046 100644
--- a/packages/vx-demo/src/pages/BarStackHorizontal.tsx
+++ b/packages/vx-demo/src/pages/BarStackHorizontal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import BarStackHorizontal from '../docs-v2/examples/vx-barstack-horizontal/Example';
-import BarStackHorizontalSource from '!!raw-loader!../docs-v2/examples/vx-barstack-horizontal/Example';
+import BarStackHorizontal from '../sandboxes/vx-barstack-horizontal/Example';
+import BarStackHorizontalSource from '!!raw-loader!../sandboxes/vx-barstack-horizontal/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Bars.tsx b/packages/vx-demo/src/pages/Bars.tsx
index d88e55f9d..f070fb311 100644
--- a/packages/vx-demo/src/pages/Bars.tsx
+++ b/packages/vx-demo/src/pages/Bars.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Bars from '../docs-v2/examples/vx-bars/Example';
-import BarsSource from '!!raw-loader!../docs-v2/examples/vx-bars/Example';
+import Bars from '../sandboxes/vx-bars/Example';
+import BarsSource from '!!raw-loader!../sandboxes/vx-bars/Example';
 
 export default () => (
   <Show events component={Bars} title="Bars" codeSandboxDirectoryName="vx-bars">
diff --git a/packages/vx-demo/src/pages/Brush.tsx b/packages/vx-demo/src/pages/Brush.tsx
index 447f41152..c917562e4 100644
--- a/packages/vx-demo/src/pages/Brush.tsx
+++ b/packages/vx-demo/src/pages/Brush.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Brush from '../docs-v2/examples/vx-brush/Example';
-import BrushSource from '!!raw-loader!../docs-v2/examples/vx-brush/Example';
+import Brush from '../sandboxes/vx-brush/Example';
+import BrushSource from '!!raw-loader!../sandboxes/vx-brush/Example';
 
 export default () => (
   <Show
diff --git a/packages/vx-demo/src/pages/Chord.tsx b/packages/vx-demo/src/pages/Chord.tsx
index 9c1216b03..27cde3b0b 100644
--- a/packages/vx-demo/src/pages/Chord.tsx
+++ b/packages/vx-demo/src/pages/Chord.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Chord from '../docs-v2/examples/vx-chord/Example';
-import ChordSource from '!!raw-loader!../docs-v2/examples/vx-chord/Example';
+import Chord from '../sandboxes/vx-chord/Example';
+import ChordSource from '!!raw-loader!../sandboxes/vx-chord/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Curves.tsx b/packages/vx-demo/src/pages/Curves.tsx
index 2210bef66..2d5ce9956 100644
--- a/packages/vx-demo/src/pages/Curves.tsx
+++ b/packages/vx-demo/src/pages/Curves.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Lines from '../docs-v2/examples/vx-curve/Example';
-import LinesSource from '!!raw-loader!../docs-v2/examples/vx-curve/Example';
+import Lines from '../sandboxes/vx-curve/Example';
+import LinesSource from '!!raw-loader!../sandboxes/vx-curve/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Dendrograms.tsx b/packages/vx-demo/src/pages/Dendrograms.tsx
index 2daaa3e5f..b9eff6ec3 100644
--- a/packages/vx-demo/src/pages/Dendrograms.tsx
+++ b/packages/vx-demo/src/pages/Dendrograms.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Dendrograms from '../docs-v2/examples/vx-dendrogram/Example';
-import DendrogramsSource from '!!raw-loader!../docs-v2/examples/vx-dendrogram/Example';
+import Dendrograms from '../sandboxes/vx-dendrogram/Example';
+import DendrogramsSource from '!!raw-loader!../sandboxes/vx-dendrogram/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Dots.tsx b/packages/vx-demo/src/pages/Dots.tsx
index 2062197de..13ba6cbc1 100644
--- a/packages/vx-demo/src/pages/Dots.tsx
+++ b/packages/vx-demo/src/pages/Dots.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Dots from '../docs-v2/examples/vx-dots/Example';
-import DotsSource from '!!raw-loader!../docs-v2/examples/vx-dots/Example';
+import Dots from '../sandboxes/vx-dots/Example';
+import DotsSource from '!!raw-loader!../sandboxes/vx-dots/Example';
 
 export default () => (
   <Show component={Dots} title="Dots" codeSandboxDirectoryName="vx-dots">
diff --git a/packages/vx-demo/src/pages/Drag-i.tsx b/packages/vx-demo/src/pages/Drag-i.tsx
index a2ed1a658..ff5b95b58 100644
--- a/packages/vx-demo/src/pages/Drag-i.tsx
+++ b/packages/vx-demo/src/pages/Drag-i.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import DragI from '../docs-v2/examples/vx-drag-i/Example';
-import DragISource from '!!raw-loader!../docs-v2/examples/vx-drag-i/Example';
+import DragI from '../sandboxes/vx-drag-i/Example';
+import DragISource from '!!raw-loader!../sandboxes/vx-drag-i/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Drag-ii.tsx b/packages/vx-demo/src/pages/Drag-ii.tsx
index 6d705b8bf..e3cbde59f 100644
--- a/packages/vx-demo/src/pages/Drag-ii.tsx
+++ b/packages/vx-demo/src/pages/Drag-ii.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import DragII from '../docs-v2/examples/vx-drag-ii/Example';
-import DragIISource from '!!raw-loader!../docs-v2/examples/vx-drag-ii/Example';
+import DragII from '../sandboxes/vx-drag-ii/Example';
+import DragIISource from '!!raw-loader!../sandboxes/vx-drag-ii/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Geo-Custom.tsx b/packages/vx-demo/src/pages/Geo-Custom.tsx
index b237e82e6..9b152c1bb 100644
--- a/packages/vx-demo/src/pages/Geo-Custom.tsx
+++ b/packages/vx-demo/src/pages/Geo-Custom.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import GeoCustom from '../docs-v2/examples/vx-geo-custom/Example';
-import GeoCustomSource from '!!raw-loader!../docs-v2/examples/vx-geo-custom/Example';
+import GeoCustom from '../sandboxes/vx-geo-custom/Example';
+import GeoCustomSource from '!!raw-loader!../sandboxes/vx-geo-custom/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Geo-Mercator.tsx b/packages/vx-demo/src/pages/Geo-Mercator.tsx
index 39f63625f..ca2a9c035 100644
--- a/packages/vx-demo/src/pages/Geo-Mercator.tsx
+++ b/packages/vx-demo/src/pages/Geo-Mercator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import GeoMercator from '../docs-v2/examples/vx-geo-mercator/Example';
-import GeoMercatorSource from '!!raw-loader!../docs-v2/examples/vx-geo-mercator/Example';
+import GeoMercator from '../sandboxes/vx-geo-mercator/Example';
+import GeoMercatorSource from '!!raw-loader!../sandboxes/vx-geo-mercator/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Glyphs.tsx b/packages/vx-demo/src/pages/Glyphs.tsx
index b60760fca..80202c334 100644
--- a/packages/vx-demo/src/pages/Glyphs.tsx
+++ b/packages/vx-demo/src/pages/Glyphs.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Glyphs from '../docs-v2/examples/vx-glyph/Example';
-import GlyphsSource from '!!raw-loader!../docs-v2/examples/vx-glyph/Example';
+import Glyphs from '../sandboxes/vx-glyph/Example';
+import GlyphsSource from '!!raw-loader!../sandboxes/vx-glyph/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Gradients.tsx b/packages/vx-demo/src/pages/Gradients.tsx
index 437b694fa..65fec3fce 100644
--- a/packages/vx-demo/src/pages/Gradients.tsx
+++ b/packages/vx-demo/src/pages/Gradients.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Gradients from '../docs-v2/examples/vx-gradient/Example';
-import GradientsSource from '!!raw-loader!../docs-v2/examples/vx-gradient/Example';
+import Gradients from '../sandboxes/vx-gradient/Example';
+import GradientsSource from '!!raw-loader!../sandboxes/vx-gradient/Example';
 
 export default () => (
   <Show shadow component={Gradients} title="Gradients" codeSandboxDirectoryName="vx-gradient">
diff --git a/packages/vx-demo/src/pages/Heatmaps.tsx b/packages/vx-demo/src/pages/Heatmaps.tsx
index 69ea8b013..3af047888 100644
--- a/packages/vx-demo/src/pages/Heatmaps.tsx
+++ b/packages/vx-demo/src/pages/Heatmaps.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Heatmaps from '../docs-v2/examples/vx-heatmap/Example';
-import HeatmapsSource from '!!raw-loader!../docs-v2/examples/vx-heatmap/Example';
+import Heatmaps from '../sandboxes/vx-heatmap/Example';
+import HeatmapsSource from '!!raw-loader!../sandboxes/vx-heatmap/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Legends.tsx b/packages/vx-demo/src/pages/Legends.tsx
index acc6ef3fb..ced0e92d8 100644
--- a/packages/vx-demo/src/pages/Legends.tsx
+++ b/packages/vx-demo/src/pages/Legends.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Legends from '../docs-v2/examples/vx-legend/Example';
-import LegendsSource from '!!raw-loader!../docs-v2/examples/vx-legend/Example';
+import Legends from '../sandboxes/vx-legend/Example';
+import LegendsSource from '!!raw-loader!../sandboxes/vx-legend/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/LineRadial.tsx b/packages/vx-demo/src/pages/LineRadial.tsx
index b46f30064..3e9f7cbcf 100644
--- a/packages/vx-demo/src/pages/LineRadial.tsx
+++ b/packages/vx-demo/src/pages/LineRadial.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import LineRadial from '../docs-v2/examples/vx-shape-line-radial/Example';
-import LineRadialSource from '!!raw-loader!../docs-v2/examples/vx-shape-line-radial/Example';
+import LineRadial from '../sandboxes/vx-shape-line-radial/Example';
+import LineRadialSource from '!!raw-loader!../sandboxes/vx-shape-line-radial/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/LinkTypes.tsx b/packages/vx-demo/src/pages/LinkTypes.tsx
index 56a92a7ad..a4f900847 100644
--- a/packages/vx-demo/src/pages/LinkTypes.tsx
+++ b/packages/vx-demo/src/pages/LinkTypes.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import LinkTypes from '../docs-v2/examples/vx-linktypes/Example';
-import LinkTypesSource from '!!raw-loader!../docs-v2/examples/vx-linktypes/Example';
+import LinkTypes from '../sandboxes/vx-linktypes/Example';
+import LinkTypesSource from '!!raw-loader!../sandboxes/vx-linktypes/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Network.tsx b/packages/vx-demo/src/pages/Network.tsx
index c4c1d9218..a7a817678 100644
--- a/packages/vx-demo/src/pages/Network.tsx
+++ b/packages/vx-demo/src/pages/Network.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Network from '../docs-v2/examples/vx-network/Example';
-import NetworkSource from '!!raw-loader!../docs-v2/examples/vx-network/Example';
+import Network from '../sandboxes/vx-network/Example';
+import NetworkSource from '!!raw-loader!../sandboxes/vx-network/Example';
 
 export default () => (
   <Show component={Network} title="Network" codeSandboxDirectoryName="vx-network">
diff --git a/packages/vx-demo/src/pages/Pack.tsx b/packages/vx-demo/src/pages/Pack.tsx
index f100285e5..c16c3d82c 100644
--- a/packages/vx-demo/src/pages/Pack.tsx
+++ b/packages/vx-demo/src/pages/Pack.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Pack from '../docs-v2/examples/vx-pack/Example';
-import PackSource from '!!raw-loader!../docs-v2/examples/vx-pack/Example';
+import Pack from '../sandboxes/vx-pack/Example';
+import PackSource from '!!raw-loader!../sandboxes/vx-pack/Example';
 
 export default () => (
   <Show component={Pack} title="Pack" codeSandboxDirectoryName="vx-pack">
diff --git a/packages/vx-demo/src/pages/Patterns.tsx b/packages/vx-demo/src/pages/Patterns.tsx
index 490cd4104..315fd6a28 100644
--- a/packages/vx-demo/src/pages/Patterns.tsx
+++ b/packages/vx-demo/src/pages/Patterns.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Patterns from '../docs-v2/examples/vx-pattern/Example';
-import PatternsSource from '!!raw-loader!../docs-v2/examples/vx-pattern/Example';
+import Patterns from '../sandboxes/vx-pattern/Example';
+import PatternsSource from '!!raw-loader!../sandboxes/vx-pattern/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Pies.tsx b/packages/vx-demo/src/pages/Pies.tsx
index dcf4d618b..5b7753a30 100644
--- a/packages/vx-demo/src/pages/Pies.tsx
+++ b/packages/vx-demo/src/pages/Pies.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Pies from '../docs-v2/examples/vx-shape-pie/Example';
-import PiesSource from '!!raw-loader!../docs-v2/examples/vx-shape-pie/Example';
+import Pies from '../sandboxes/vx-shape-pie/Example';
+import PiesSource from '!!raw-loader!../sandboxes/vx-shape-pie/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Polygons.tsx b/packages/vx-demo/src/pages/Polygons.tsx
index f7b3bdc7a..5315b525a 100644
--- a/packages/vx-demo/src/pages/Polygons.tsx
+++ b/packages/vx-demo/src/pages/Polygons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Polygons from '../docs-v2/examples/vx-polygons/Example';
-import PolygonsSource from '!!raw-loader!../docs-v2/examples/vx-polygons/Example';
+import Polygons from '../sandboxes/vx-polygons/Example';
+import PolygonsSource from '!!raw-loader!../sandboxes/vx-polygons/Example';
 
 export default () => (
   <Show component={Polygons} title="Polygons" codeSandboxDirectoryName="vx-polygons">
diff --git a/packages/vx-demo/src/pages/Radar.tsx b/packages/vx-demo/src/pages/Radar.tsx
index 127c947d7..07d57e940 100644
--- a/packages/vx-demo/src/pages/Radar.tsx
+++ b/packages/vx-demo/src/pages/Radar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Radar from '../docs-v2/examples/vx-radar/Example';
-import RadarSource from '!!raw-loader!../docs-v2/examples/vx-radar/Example';
+import Radar from '../sandboxes/vx-radar/Example';
+import RadarSource from '!!raw-loader!../sandboxes/vx-radar/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Responsive.tsx b/packages/vx-demo/src/pages/Responsive.tsx
index 7c0e40e3d..b33a46bdd 100644
--- a/packages/vx-demo/src/pages/Responsive.tsx
+++ b/packages/vx-demo/src/pages/Responsive.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Responsive from '../docs-v2/examples/vx-responsive/Example';
-import ResponsiveSource from '!!raw-loader!../docs-v2/examples/vx-responsive/Example';
+import Responsive from '../sandboxes/vx-responsive/Example';
+import ResponsiveSource from '!!raw-loader!../sandboxes/vx-responsive/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Stacked-Areas.tsx b/packages/vx-demo/src/pages/Stacked-Areas.tsx
index ce4c7df70..4b961d172 100644
--- a/packages/vx-demo/src/pages/Stacked-Areas.tsx
+++ b/packages/vx-demo/src/pages/Stacked-Areas.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import StackedAreas from '../docs-v2/examples/vx-stacked-areas/Example';
-import StackedAreasSource from '!!raw-loader!../docs-v2/examples/vx-stacked-areas/Example';
+import StackedAreas from '../sandboxes/vx-stacked-areas/Example';
+import StackedAreasSource from '!!raw-loader!../sandboxes/vx-stacked-areas/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Statsplot.tsx b/packages/vx-demo/src/pages/Statsplot.tsx
index 01729ac34..b662032e7 100644
--- a/packages/vx-demo/src/pages/Statsplot.tsx
+++ b/packages/vx-demo/src/pages/Statsplot.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import StatsPlot from '../docs-v2/examples/vx-stats/Example';
-import StatsPlotSource from '!!raw-loader!../docs-v2/examples/vx-stats/Example';
+import StatsPlot from '../sandboxes/vx-stats/Example';
+import StatsPlotSource from '!!raw-loader!../sandboxes/vx-stats/Example';
 
 export default () => (
   <Show
diff --git a/packages/vx-demo/src/pages/Streamgraph.tsx b/packages/vx-demo/src/pages/Streamgraph.tsx
index 83579fa33..729a9d412 100644
--- a/packages/vx-demo/src/pages/Streamgraph.tsx
+++ b/packages/vx-demo/src/pages/Streamgraph.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Streamgraph from '../docs-v2/examples/vx-streamgraph/Example';
-import StreamgraphSource from '!!raw-loader!../docs-v2/examples/vx-streamgraph/Example';
+import Streamgraph from '../sandboxes/vx-streamgraph/Example';
+import StreamgraphSource from '!!raw-loader!../sandboxes/vx-streamgraph/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Text.tsx b/packages/vx-demo/src/pages/Text.tsx
index dc9fcf3d5..1b4f49657 100644
--- a/packages/vx-demo/src/pages/Text.tsx
+++ b/packages/vx-demo/src/pages/Text.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Text } from '@vx/text';
 import Show from '../components/Show';
-import Codeblock from '../components/codeblocks/Codeblock';
+import Codeblock from '../components/Codeblock';
 
 const styles = {
   exampleText: {
diff --git a/packages/vx-demo/src/pages/Threshold.tsx b/packages/vx-demo/src/pages/Threshold.tsx
index 7da768bf2..e6d879f9c 100644
--- a/packages/vx-demo/src/pages/Threshold.tsx
+++ b/packages/vx-demo/src/pages/Threshold.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Threshold from '../docs-v2/examples/vx-threshold/Example';
-import ThresholdSource from '!!raw-loader!../docs-v2/examples/vx-threshold/Example';
+import Threshold from '../sandboxes/vx-threshold/Example';
+import ThresholdSource from '!!raw-loader!../sandboxes/vx-threshold/Example';
 
 function Description({ width }: { width: number }) {
   return (
diff --git a/packages/vx-demo/src/pages/Treemap.tsx b/packages/vx-demo/src/pages/Treemap.tsx
index f4ce5fe3f..a05d9adfb 100644
--- a/packages/vx-demo/src/pages/Treemap.tsx
+++ b/packages/vx-demo/src/pages/Treemap.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Treemap from '../docs-v2/examples/vx-treemap/Example';
-import TreemapSource from '!!raw-loader!../docs-v2/examples/vx-treemap/Example';
+import Treemap from '../sandboxes/vx-treemap/Example';
+import TreemapSource from '!!raw-loader!../sandboxes/vx-treemap/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Trees.tsx b/packages/vx-demo/src/pages/Trees.tsx
index f2ba2c61a..20ce7bd51 100644
--- a/packages/vx-demo/src/pages/Trees.tsx
+++ b/packages/vx-demo/src/pages/Trees.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Trees from '../docs-v2/examples/vx-tree/Example';
-import TreesSource from '!!raw-loader!../docs-v2/examples/vx-tree/Example';
+import Trees from '../sandboxes/vx-tree/Example';
+import TreesSource from '!!raw-loader!../sandboxes/vx-tree/Example';
 
 export default () => (
   <Show events title="Trees" component={Trees} codeSandboxDirectoryName="vx-tree">
diff --git a/packages/vx-demo/src/pages/Voronoi.tsx b/packages/vx-demo/src/pages/Voronoi.tsx
index f7ac887f9..3672d56e0 100644
--- a/packages/vx-demo/src/pages/Voronoi.tsx
+++ b/packages/vx-demo/src/pages/Voronoi.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import VoronoiChart from '../docs-v2/examples/vx-voronoi/Example';
-import VoronoiChartSource from '!!raw-loader!../docs-v2/examples/vx-voronoi/Example';
+import VoronoiChart from '../sandboxes/vx-voronoi/Example';
+import VoronoiChartSource from '!!raw-loader!../sandboxes/vx-voronoi/Example';
 
 export default () => {
   return (
diff --git a/packages/vx-demo/src/pages/Zoom-i.tsx b/packages/vx-demo/src/pages/Zoom-i.tsx
index 5e6eede04..f480c1701 100644
--- a/packages/vx-demo/src/pages/Zoom-i.tsx
+++ b/packages/vx-demo/src/pages/Zoom-i.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import ZoomI from '../docs-v2/examples/vx-zoom-i/Example';
-import ZoomISource from '!!raw-loader!../docs-v2/examples/vx-zoom-i/Example';
+import ZoomI from '../sandboxes/vx-zoom-i/Example';
+import ZoomISource from '!!raw-loader!../sandboxes/vx-zoom-i/Example';
 
 export default () => (
   <Show component={ZoomI} title="Zoom I" codeSandboxDirectoryName="vx-zoom-i">

From eb3cc4c0505c51b4991184043767015dfd6c111b Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Fri, 22 May 2020 14:42:19 -0700
Subject: [PATCH 3/6] internal(vx-demo): remove unused codeblocks/, move
 Codeblock to components/

---
 .../components/{codeblocks => }/Codeblock.tsx |   0
 packages/vx-demo/src/components/Show.tsx      |   2 +-
 .../codeblocks/MultiSeriesLineCode.js         | 186 ------------------
 .../components/codeblocks/SimpleAreaCode.js   |  95 ---------
 .../components/codeblocks/SimpleLineCode.js   | 165 ----------------
 .../codeblocks/SimpleLineGlyphCode.js         | 133 -------------
 .../components/codeblocks/StackedAreaCode.js  | 131 ------------
 7 files changed, 1 insertion(+), 711 deletions(-)
 rename packages/vx-demo/src/components/{codeblocks => }/Codeblock.tsx (100%)
 delete mode 100644 packages/vx-demo/src/components/codeblocks/MultiSeriesLineCode.js
 delete mode 100644 packages/vx-demo/src/components/codeblocks/SimpleAreaCode.js
 delete mode 100644 packages/vx-demo/src/components/codeblocks/SimpleLineCode.js
 delete mode 100644 packages/vx-demo/src/components/codeblocks/SimpleLineGlyphCode.js
 delete mode 100644 packages/vx-demo/src/components/codeblocks/StackedAreaCode.js

diff --git a/packages/vx-demo/src/components/codeblocks/Codeblock.tsx b/packages/vx-demo/src/components/Codeblock.tsx
similarity index 100%
rename from packages/vx-demo/src/components/codeblocks/Codeblock.tsx
rename to packages/vx-demo/src/components/Codeblock.tsx
diff --git a/packages/vx-demo/src/components/Show.tsx b/packages/vx-demo/src/components/Show.tsx
index 33756de73..f93f4c38d 100644
--- a/packages/vx-demo/src/components/Show.tsx
+++ b/packages/vx-demo/src/components/Show.tsx
@@ -5,7 +5,7 @@ import withScreenSize, {
 } from '@vx/responsive/lib/enhancers/withScreenSize';
 import CodeSandboxLink from './CodeSandboxLink';
 import Page from './Page';
-import Codeblock from './codeblocks/Codeblock';
+import Codeblock from './Codeblock';
 import { MarginShape, ShowProvidedProps } from '../types';
 
 type Component<P = {}> = React.FC<P> | React.ComponentClass<P>;
diff --git a/packages/vx-demo/src/components/codeblocks/MultiSeriesLineCode.js b/packages/vx-demo/src/components/codeblocks/MultiSeriesLineCode.js
deleted file mode 100644
index 853dcdf8e..000000000
--- a/packages/vx-demo/src/components/codeblocks/MultiSeriesLineCode.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React from 'react';
-import Codeblock from './Codeblock.tsx';
-
-export default () => {
-  return (
-    <Codeblock>
-      {`// MultiSeriesLine.js
-import React from 'react';
-import Axis from '@vx/axis';
-import Curve from '@vx/curve';
-import { Group } from '@vx/group';
-import { LinePath } from '@vx/shape';
-import { cityTemperature } from '@vx/mock-data';
-import { scaleTime, scaleLinear, scaleOrdinal } from '@vx/scale';
-import { extent, max, min } from 'd3-array';
-import { timeParse } from 'd3-time-format';
-import { compose, withState, withHandlers } from 'recompose';
-
-// util
-const parseDate = timeParse("%Y%m%d");
-
-// [{date: "", new york: "", san francisco: "", austin: ""}]
-const rawData = cityTemperature;
-const cityNames = Object.keys(rawData[0]).filter(k => k !== 'date');
-
-// rawData => [{id: "", values: [{ date, temperature }]}, ...]
-const data = cityNames.map((cityName) => {
-  return {
-    id: cityName,
-    values: rawData.map((d) => ({
-      date: d.date,
-      temperature: d[cityName],
-    })),
-  }
-});
-
-// utils
-const getCity = (cityId) => data.find((city) => city.id === cityId);
-const addCity = (selected, cityId) => selected.concat(cityId);
-const removeCity = (selected, cityId) => selected.filter((city) => city !== cityId);
-const removeCityOrResetSelected = (selected, cityId) => {
-  let nextSelected = removeCity(selected, cityId);
-  if (nextSelected.length === 0) nextSelected = initialSelectedState;
-  return nextSelected;
-}
-
-// recompose higher-order function for state and event handlers
-const initialSelectedState = cityNames;
-const withSelected = compose(
-  withState('selected', 'setSelected', initialSelectedState),
-  withHandlers({
-    updateSelected: ({ selected, setSelected }) => cityId => {
-      let fn = addCity;
-      if (selected.includes(cityId)) fn = removeCityOrResetSelected;
-      setSelected(fn(selected, cityId));
-    },
-    resetSelected: ({ setSelected }) => event => {
-      setSelected(initialSelectedState);
-    }
-  })
-);
-
-// the chart
-export default withSelected(({
-  selected,
-  updateSelected,
-  resetSelected,
-  width,
-  height,
-  margin,
-}) => {
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const x = d => parseDate(d.date);
-  const y = d => +d.temperature;
-
-  // scales
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(rawData, x),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    domain: extent(selected.slice().reduce((ret, c) => {
-      return ret.concat(getCity(c).values)
-    }, []), y)
-  });
-  const color = scaleOrdinal({
-    range: ['#3b99d8', '#239f85', '#9a5cb4'],
-    domain: cityNames,
-  });
-
-  return (
-    <svg width={width} height={height}>
-      <Group top={margin.top} left={margin.left}>
-        <Axis.AxisBottom
-          label=''
-          top={yMax}
-          scale={xScale}
-          hideAxisLine
-        />
-        <Axis.AxisLeft
-          scale={yScale}
-          label="Temperature (ºF)"
-        />
-        {selected.map(getCity).map(({ id, values }) => {
-          const lastDatum = values[values.length - 1];
-          return (
-            <g key={'{id}'}>
-              <LinePath
-                data={values}
-                xScale={xScale}
-                yScale={yScale}
-                x={x}
-                y={y}
-                curve={Curve.basis}
-                stroke={color(id)}
-                strokeWidth={1}
-              />
-              <text
-                fontSize={9}
-                dy={"0.35em"}
-                dx={2}
-                x={xScale(x(lastDatum))}
-                y={yScale(y(lastDatum))}
-              >
-                {id}
-              </text>
-            </g>
-          );
-        })}
-        <Legend
-          data={data}
-          selected={selected}
-          xMax={xMax}
-          yMax={yMax}
-          color={color}
-          updateSelected={updateSelected}
-        />
-      </Group>
-    </svg>
-  );
-});
-
-const Legend = ({
-  data,
-  selected,
-  updateSelected,
-  xMax,
-  yMax,
-  color,
-}) => {
-  const margin = 20;
-  const xPadding = 60;
-  const yPadding = 30;
-  const yOffset = yMax - yPadding;
-  const xOffset = xMax - xPadding;
-  const size = 8;
-  const fontSize = 12;
-  return (
-    <g>
-      {data.map(({ id, values }, i) => {
-        return (
-          <g
-            key={'legend-{id}'}
-            className="legend-item"
-            transform={'translate({xOffset}, {yOffset - i * margin})'}
-            onClick={() => updateSelected(id)}
-            fillOpacity={selected.includes(id) ? 1 : 0.5}
-          >
-            <rect width={size} height={size} fill={color(id)} />
-            <text fill={color(id)} dy={".7em"} dx={fontSize} fontSize={fontSize}>
-              {id}
-            </text>
-          </g>
-        );
-      })}
-    </g>
-  );
-}`}
-    </Codeblock>
-  );
-};
diff --git a/packages/vx-demo/src/components/codeblocks/SimpleAreaCode.js b/packages/vx-demo/src/components/codeblocks/SimpleAreaCode.js
deleted file mode 100644
index 79ebccdd6..000000000
--- a/packages/vx-demo/src/components/codeblocks/SimpleAreaCode.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import Codeblock from './Codeblock.tsx';
-
-export default () => {
-  return (
-    <Codeblock>
-      {`// SimpleAreaChart.js
-function SimpleAreaChart({
-  margin,
-  data,
-  screenWidth,
-  screenHeight,
-}) {
-  const stock = appleStock;
-
-  const width = screenWidth / 1.5;
-  const height = width / 2;
-
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const xStock = d => new Date(d.date);
-  const yStock = d => d.close;
-
-  // scales
-  const xStockScale = Scale.scaleTime({
-    range: [0, xMax],
-    domain: extent(stock, xStock),
-  });
-  const yStockScale = Scale.scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(stock, yStock)],
-    nice: true,
-  });
-
-  return (
-    <svg height={height} width={width}>
-      <defs>
-        <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%"   stopColor="rgba(181, 49, 206, 1.000)"/>
-          <stop offset="100%" stopColor="rgba(1, 179, 239, 1.000)"/>
-        </linearGradient>
-      </defs>
-      <rect
-        width={width}
-        height={height}
-        stroke="black"
-        strokeWidth={1}
-        fill={'none'}
-      />
-      <Group top={margin.top} left={margin.left}>
-        <GridRows
-          scale={yStockScale}
-          width={xMax}
-          strokeDasharray="2,2"
-          numTicks={numTicksForHeight(height)}
-        />
-        <Shape.AreaClosed
-          data={stock}
-          xScale={xStockScale}
-          yScale={yStockScale}
-          x={xStock}
-          y={yStock}
-          strokeWidth={2}
-          stroke={'url(#linear)'}
-          fill={'url(#linear)'}
-        />
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xStockScale}
-        numTicks={numTicksForWidth(width)}
-        label={'date'}
-      />
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yStockScale}
-        numTicks={numTicksForHeight(height)}
-        label={'close price ($)'}
-        hideAxisLine
-        hideTicks
-        hideZero
-      />
-    </svg>
-  );
-}
-
-export default withScreenSize(SimpleAreaChart);`}
-    </Codeblock>
-  );
-};
diff --git a/packages/vx-demo/src/components/codeblocks/SimpleLineCode.js b/packages/vx-demo/src/components/codeblocks/SimpleLineCode.js
deleted file mode 100644
index a05c4f18c..000000000
--- a/packages/vx-demo/src/components/codeblocks/SimpleLineCode.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react';
-import Codeblock from './Codeblock.tsx';
-
-export default () => {
-  return (
-    <Codeblock>
-      {`// SimpleLineChart.js
-function SimpleLineChart({
-  margin,
-  dataset,
-  screenWidth,
-  screenHeight,
-}) {
-  if (!Array.isArray(dataset)) dataset = [dataset];
-
-  const width = screenWidth / 1.5;
-  const height = width / 2;
-
-  const allData = dataset.reduce((ret, d) => {
-    return ret.concat(d.data)
-  }, []);
-
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const x = d => d.date;
-  const y = d => d.value;
-
-  // scales
-  const xScale = Scale.scaleTime({
-    range: [0, xMax],
-    domain: extent(allData, x),
-    nice: true,
-  });
-  const yScale = Scale.scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(allData, y)],
-    nice: true,
-  });
-
-  const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;
-  const xFormat = xScale.tickFormat ? xScale.tickFormat() : identity;
-
-  const markerDatum = allData[3];
-  const markerLabel = 'Deploy';
-  const markerFrom = new Point({
-    x: xScale(x(markerDatum)),
-    y: 0,
-  });
-  const markerTo = new Point({
-    x: xScale(x(markerDatum)),
-    y: yMax,
-  });
-
-  const annotationPoint = new Point({
-    x: xScale(x(markerDatum)),
-    y: yScale(y(markerDatum)),
-  });
-
-  return (
-    <svg width={width} height={height}>
-      <defs>
-        <linearGradient
-          id="linear" x1="0%" y1="0%" x2="100%" y2="0%"
-        >
-          <stop offset="0%"   stopColor="#f101f6"/>
-          <stop offset="100%" stopColor="#01d4f9"/>
-        </linearGradient>
-        <linearGradient
-          id="linearFade" x1="0%" y1="0%" x2="100%" y2="0%"
-        >
-          <stop offset="0%"   stopColor="#f101f6" stopOpacity="0.3"/>
-          <stop offset="100%" stopColor="#01d4f9" stopOpacity="0.3"/>
-        </linearGradient>
-      </defs>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        hideZero
-        numTicks={numTicksForHeight(height)}
-        label={'value'}
-        stroke={'#1b1a1e'}
-        tickTextFill={'#fff'}
-      />
-      <Group
-        top={margin.top}
-        left={margin.left}
-      >
-        <Grid
-          xScale={xScale}
-          yScale={yScale}
-          width={xMax}
-          height={yMax}
-          numTicksRows={numTicksForHeight(height)}
-          numTicksColumns={numTicksForWidth(width)}
-          stroke={'#1b1a1e'}
-          tickStroke={'#1b1a1e'}
-        />
-
-        <Shape.AreaClosed
-          data={dataset[0].data}
-          xScale={xScale}
-          yScale={yScale}
-          x={x}
-          y={y}
-          strokeWidth={2}
-          stroke={"url('#linear')"}
-          fill={"url('#linearFade')"}
-        />
-
-        <Shape.LinePath
-          data={dataset[1].data}
-          xScale={xScale}
-          yScale={yScale}
-          x={x}
-          y={y}
-          stroke={"url('#linearFade')"}
-          strokeWidth={2}
-        />
-
-        <Marker
-          from={markerFrom}
-          to={markerTo}
-          stroke={'white'}
-          label={markerLabel}
-          labelStroke={'none'}
-          labelDx={6}
-          labelDy={15}
-        />
-        <LinePathAnnotation
-          label={'expected from deploy'}
-          stroke={'white'}
-          labelFill={'white'}
-          labelStroke={'none'}
-          labelStrokeWidth={2}
-          points={[
-            annotationPoint,
-            new Point({
-              x: annotationPoint.x + (width / allData.length),
-              y: annotationPoint.y - (height / allData.length),
-            })
-          ]}
-        />
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label={'time'}
-        stroke={'#1b1a1e'}
-        tickStroke={'#1b1a1e'}
-        tickTextFill={'#fff'}
-      />
-    </svg>
-  );
-}
-
-export default withScreenSize(SimpleLineChart);`}
-    </Codeblock>
-  );
-};
diff --git a/packages/vx-demo/src/components/codeblocks/SimpleLineGlyphCode.js b/packages/vx-demo/src/components/codeblocks/SimpleLineGlyphCode.js
deleted file mode 100644
index 2e7baa596..000000000
--- a/packages/vx-demo/src/components/codeblocks/SimpleLineGlyphCode.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import Codeblock from './Codeblock.tsx';
-
-export default () => {
-  return (
-    <Codeblock>
-      {`// SimpleLineWithGlyphsChart.js
-function SimpleLineWithGlyphsChart({
-  margin,
-  dataset,
-  screenWidth,
-  screenHeight,
-}) {
-  if (!Array.isArray(dataset)) dataset = [dataset];
-
-  const allData = dataset.reduce((rec, d) => {
-    return rec.concat(d.data)
-  }, []);
-
-  const width = screenWidth / 1.5;
-  const height = width / 2;
-
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const x = d => d.date;
-  const y = d => d.value;
-
-  // scales
-  const xScale = Scale.scaleTime({
-    range: [0, xMax],
-    domain: extent(allData, x),
-  });
-  const yScale = Scale.scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(allData, y)],
-    nice: true,
-    clamp: true,
-  });
-
-  const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;
-
-  return (
-    <svg width={width} height={height}>
-      <AxisRight
-        top={margin.top}
-        left={width - margin.right}
-        scale={yScale}
-        numTicks={numTicksForHeight(height)}
-        label={'value'}
-        hideZero
-      />
-      <Group
-        top={margin.top}
-        left={margin.left}
-      >
-        <Grid
-          xScale={xScale}
-          yScale={yScale}
-          width={xMax}
-          height={yMax}
-          numTicksRows={numTicksForHeight(height)}
-          numTicksColumns={numTicksForWidth(width)}
-        />
-        {dataset.map((series, i) => {
-          return (
-            <Shape.LinePath
-              key={'chart-line-{i}'}
-              data={series.data}
-              xScale={xScale}
-              yScale={yScale}
-              x={x}
-              y={y}
-              stroke={series.chart.stroke}
-              strokeWidth={series.chart.strokeWidth}
-              strokeDasharray={series.chart.strokeDasharray}
-              curve={Curve.monotoneX}
-              glyph={(d, i) => {
-                return (
-                  <GlyphDot key={'line-point-{i}'}
-                    className={cx('vx-linepath-point')}
-                    cx={xScale(x(d))}
-                    cy={yScale(y(d))}
-                    r={6}
-                    fill={series.chart.stroke}
-                    stroke={series.chart.backgroundColor}
-                    strokeWidth={3}
-                  >
-                    <text
-                      x={xScale(x(d))}
-                      y={yScale(y(d))}
-                      dx={10}
-                      fill={series.chart.stroke}
-                      stroke={series.chart.backgroundColor}
-                      strokeWidth={6}
-                      fontSize={11}
-                    >
-                      {yFormat(y(d))}
-                    </text>
-                    <text
-                      x={xScale(x(d))}
-                      y={yScale(y(d))}
-                      dx={10}
-                      fill={series.chart.stroke}
-                      fontSize={11}
-                    >
-                      {yFormat(y(d))}
-                    </text>
-                  </Glyph.Dot>
-                );
-              }}
-            />
-          );
-        })}
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label={'time'}
-        hideTicks
-      />
-    </svg>
-  );
-}
-
-export default withScreenSize(SimpleLineWithGlyphsChart);`}
-    </Codeblock>
-  );
-};
diff --git a/packages/vx-demo/src/components/codeblocks/StackedAreaCode.js b/packages/vx-demo/src/components/codeblocks/StackedAreaCode.js
deleted file mode 100644
index a3458e672..000000000
--- a/packages/vx-demo/src/components/codeblocks/StackedAreaCode.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from 'react';
-import Codeblock from './Codeblock.tsx';
-
-export default () => {
-  return (
-    <Codeblock>
-      {`// StackAreaChart.js
-import React from 'react';
-import { Group } from '@vx/group';
-import { AreaStack } from '@vx/shape';
-import { TextOutline } from '@vx/text';
-import { browserUsage } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
-import { scaleTime, scaleLinear } from '@vx/scale';
-import { extent, max } from 'd3-array';
-import { stack as d3stack } from 'd3-shape';
-import { timeParse } from 'd3-time-format';
-import round from '../util/round';
-import colorScale from '../util/sillyColorScale';
-import withState from 'recompose/withState';
-import compose from 'recompose/compose';
-
-const enhance = compose(
-  withState('selected', 'updateSelected', [])
-);
-
-export default enhance(({
-  margin,
-  width,
-  height,
-  selected,
-  updateSelected,
-}) => {
-  const data = browserUsage;
-  const keys = Object.keys(data[0]).filter(k => k !== 'date');
-  const browserNames = [...keys].reverse();
-
-  const yMax = height - margin.top - margin.bottom;
-  const xMax = width - margin.left - margin.right;
-
-  const parseDate = timeParse("%Y %b %d");
-  const x = d => parseDate(d.date);
-
-  const stack = d3stack().keys(keys);
-
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(data, x),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-  });
-
-  return (
-    <svg height={height} width={width}>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        tickFormat={(v) => '%{round(v * 100)}%'}
-        label={'browser market share (%)'}
-        stroke={'#1b1a1e'}
-        tickTextFill={'#000'}
-      />
-      <Group top={margin.top} left={margin.left}>
-        <AreaStack
-          reverse
-          top={margin.top}
-          left={margin.left}
-          keys={keys}
-          data={data}
-          x={(d) => xScale(x(d.data))}
-          y0={(d) => yScale(d[0] / 100)}
-          y1={(d) => yScale(d[1] / 100)}
-          stroke={(d,i) => colorScale(i)}
-          strokeWidth={1}
-          fillOpacity={(d,i) => selected.includes(browserNames[i]) ? 0.8 : 0.2}
-          fill={(d,i) => colorScale(i)}
-          onMouseEnter={(d, i) => event => {
-            updateSelected((prevState) => ([browserNames[i]]))
-          }}
-          onMouseLeave={(d,i) => event => {
-            updateSelected(prevState => {
-              if (prevState.includes(browserNames[i])) return [];
-              return prevState;
-            })
-          }}
-        />
-        {stack(data).reverse().map((series,i) => {
-          const lastPoint = series[series.length - 1];
-          const lastPointY0 = lastPoint[0] / 100;
-          const lastPointY1 = lastPoint[1] / 100;
-
-          return (
-            <g key={'labels-%{series.key}'}>
-              {lastPointY1 - lastPointY0 > 0.01 &&
-                <TextOutline
-                  fontSize={10}
-                  x={xMax}
-                  y={yScale((lastPointY1 - ((lastPointY1 - lastPointY0) /2)))}
-                  dy={'.5em'}
-                  textAnchor={'end'}
-                  fill="black"
-                  outlineStroke={"white"}
-                  outlineStrokeWidth={3}
-                  fontFamily={"Roboto Mono"}
-                >
-                  {series.key}
-                </TextOutline>
-              }
-            </g>
-          );
-        })}
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        label={''}
-        tickTextFontSize={9}
-        tickTextFontFamily='Roboto Mono'
-        stroke={'#1b1a1e'}
-        tickStroke={'#1b1a1e'}
-        tickTextFill={'black'}
-      />
-    </svg>
-  );
-})`}
-    </Codeblock>
-  );
-};

From b21e8e4b43e1d8d10fc1a266989dd022c64632ba Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Fri, 22 May 2020 14:43:04 -0700
Subject: [PATCH 4/6] root: simplify script name type:dts => type

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f4440fade..82b9a3943 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "author": "@hshoff",
   "private": true,
   "scripts": {
-    "build": "yarn run babel && yarn run type:dts",
+    "build": "yarn run babel && yarn run type",
     "build-one": "nimbus babel --clean",
     "babel": "yarn run babel:cjs && yarn run babel:esm",
     "babel:cjs": "nimbus babel --clean --workspaces=\"@vx/!(demo)\"",
@@ -31,7 +31,7 @@
     "precommit": "lint-staged",
     "setup": "yarn run build",
     "test": "yarn run jest",
-    "type:dts": "nimbus typescript --build --reference-workspaces",
+    "type": "nimbus typescript --build --reference-workspaces",
     "type-one": "nimbus typescript --build",
     "docs": "yarn run docs:gen && node ./scripts/docs/index.js",
     "docs:gen": "lerna run docs",

From bebc64e1635af9823303fb7c40abd451f41edb38 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Fri, 22 May 2020 14:50:22 -0700
Subject: [PATCH 5/6] internal(vx-demo): remove unused components/charts/*,
 components/util/*

---
 .../src/components/charts/MultiSeriesLine.js  | 163 ------------------
 .../src/components/charts/SimpleAreaChart.js  |  85 ---------
 .../src/components/charts/SimpleBar.tsx       |  75 --------
 .../src/components/charts/SimpleLineChart.js  | 162 -----------------
 .../charts/SimpleLineWithGlyphsChart.js       | 138 ---------------
 .../src/components/charts/StackedAreaChart.js | 115 ------------
 .../charts/flame/util/parseFoldedStack.js     |   5 -
 packages/vx-demo/src/components/util/round.ts |   4 -
 .../src/components/util/sillyColorScale.ts    |   6 -
 9 files changed, 753 deletions(-)
 delete mode 100644 packages/vx-demo/src/components/charts/MultiSeriesLine.js
 delete mode 100644 packages/vx-demo/src/components/charts/SimpleAreaChart.js
 delete mode 100644 packages/vx-demo/src/components/charts/SimpleBar.tsx
 delete mode 100644 packages/vx-demo/src/components/charts/SimpleLineChart.js
 delete mode 100644 packages/vx-demo/src/components/charts/SimpleLineWithGlyphsChart.js
 delete mode 100644 packages/vx-demo/src/components/charts/StackedAreaChart.js
 delete mode 100644 packages/vx-demo/src/components/charts/flame/util/parseFoldedStack.js
 delete mode 100644 packages/vx-demo/src/components/util/round.ts
 delete mode 100644 packages/vx-demo/src/components/util/sillyColorScale.ts

diff --git a/packages/vx-demo/src/components/charts/MultiSeriesLine.js b/packages/vx-demo/src/components/charts/MultiSeriesLine.js
deleted file mode 100644
index 7460d2ba9..000000000
--- a/packages/vx-demo/src/components/charts/MultiSeriesLine.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from 'react';
-import { Group } from '@vx/group';
-import { LinePath } from '@vx/shape';
-import { curveBasis } from '@vx/curve';
-import { cityTemperature } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
-import { scaleTime, scaleLinear, scaleOrdinal } from '@vx/scale';
-import { extent } from 'd3-array';
-import { timeParse } from 'd3-time-format';
-import { compose, withState, withHandlers } from 'recompose';
-
-// util
-const parseDate = timeParse('%Y%m%d');
-
-// [{date: "", new york: "", san francisco: "", austin: ""}]
-const rawData = cityTemperature;
-const cityNames = Object.keys(rawData[0]).filter(k => k !== 'date');
-
-// rawData => [{id: "", values: [{ date, temperature }]}, ...]
-const data = cityNames.map(cityName => {
-  return {
-    id: cityName,
-    values: rawData.map(d => ({
-      date: d.date,
-      temperature: d[cityName],
-    })),
-  };
-});
-
-// utils
-const getCity = cityId => data.find(city => city.id === cityId);
-const addCity = (selected, cityId) => selected.concat(cityId);
-const removeCity = (selected, cityId) => selected.filter(city => city !== cityId);
-const removeCityOrResetSelected = (selected, cityId) => {
-  let nextSelected = removeCity(selected, cityId);
-  if (nextSelected.length === 0) nextSelected = initialSelectedState;
-  return nextSelected;
-};
-
-// recompose higher-order function for state and event handlers
-const initialSelectedState = cityNames;
-const withSelected = compose(
-  withState('selected', 'setSelected', initialSelectedState),
-  withHandlers({
-    updateSelected: ({ selected, setSelected }) => cityId => {
-      let fn = addCity;
-      if (selected.includes(cityId)) fn = removeCityOrResetSelected;
-      setSelected(fn(selected, cityId));
-    },
-    resetSelected: ({ setSelected }) => () => {
-      setSelected(initialSelectedState);
-    },
-  }),
-);
-
-// the chart
-export default withSelected(({ selected, updateSelected, width, height, margin }) => {
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const x = d => parseDate(d.date);
-  const y = d => Number(d.temperature);
-
-  // scales
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(rawData, x),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    domain: extent(
-      selected.slice().reduce((ret, c) => {
-        return ret.concat(getCity(c).values);
-      }, []),
-      y,
-    ),
-  });
-  const color = scaleOrdinal({
-    range: ['#3b99d8', '#239f85', '#9a5cb4'],
-    domain: cityNames,
-  });
-
-  return (
-    <svg width={width} height={height}>
-      <Group top={margin.top} left={margin.left}>
-        <AxisBottom label="" top={yMax} scale={xScale} hideAxisLine />
-        <AxisLeft scale={yScale} label="Temperature (ºF)" />
-        {selected.map(getCity).map(({ id, values }) => {
-          const lastDatum = values[values.length - 1];
-          return (
-            <g key={`${id}`}>
-              <LinePath
-                data={values}
-                xScale={xScale}
-                yScale={yScale}
-                x={x}
-                y={y}
-                curve={curveBasis}
-                stroke={color(id)}
-                strokeWidth={1}
-              />
-              <text
-                fontSize={9}
-                dy="0.35em"
-                dx={2}
-                x={xScale(x(lastDatum))}
-                y={yScale(y(lastDatum))}
-              >
-                {id}
-              </text>
-            </g>
-          );
-        })}
-        <Legend
-          data={data}
-          selected={selected}
-          xMax={xMax}
-          yMax={yMax}
-          color={color}
-          updateSelected={updateSelected}
-        />
-      </Group>
-    </svg>
-  );
-});
-
-const Legend = ({ data: legendData, selected, updateSelected, xMax, yMax, color }) => {
-  const margin = 20;
-  const xPadding = 60;
-  const yPadding = 30;
-  const yOffset = yMax - yPadding;
-  const xOffset = xMax - xPadding;
-  const size = 8;
-  const fontSize = 12;
-  return (
-    <g>
-      {legendData.map(({ id }, i) => {
-        return (
-          <g
-            key={`legend-${id}`}
-            className="legend-item"
-            transform={`translate(${xOffset}, ${yOffset - i * margin})`}
-            onClick={() => updateSelected(id)}
-            fillOpacity={selected.includes(id) ? 1 : 0.5}
-          >
-            <rect width={size} height={size} fill={color(id)} />
-            <text fill={color(id)} dy=".7em" dx={fontSize} fontSize={fontSize}>
-              {id}
-            </text>
-          </g>
-        );
-      })}
-
-      <style jsx>{`
-        .legend-item:hover {
-          cursor: pointer;
-        }
-      `}</style>
-    </g>
-  );
-};
diff --git a/packages/vx-demo/src/components/charts/SimpleAreaChart.js b/packages/vx-demo/src/components/charts/SimpleAreaChart.js
deleted file mode 100644
index 7f5053775..000000000
--- a/packages/vx-demo/src/components/charts/SimpleAreaChart.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Group } from '@vx/group';
-import { GridRows } from '@vx/grid';
-import { AreaClosed } from '@vx/shape';
-import { GradientOrangeRed } from '@vx/gradient';
-import { appleStock } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
-import { scaleTime, scaleLinear } from '@vx/scale';
-import { extent, max } from 'd3-array';
-
-function numTicksForHeight(height) {
-  if (height <= 300) return 3;
-  if (height > 300 && height <= 600) return 5;
-  return 10;
-}
-
-function numTicksForWidth(width) {
-  if (width <= 300) return 2;
-  if (width > 300 && width <= 400) return 5;
-  return 10;
-}
-
-export default ({ margin, width, height }) => {
-  const stock = appleStock;
-
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const xStock = d => new Date(d.date);
-  const yStock = d => d.close;
-
-  // scales
-  const xStockScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(stock, xStock),
-  });
-  const yStockScale = scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(stock, yStock)],
-    nice: true,
-  });
-
-  return (
-    <svg height={height} width={width}>
-      <GradientOrangeRed id="gradient" />
-      <Group top={margin.top} left={margin.left}>
-        <GridRows
-          scale={yStockScale}
-          width={xMax}
-          strokeDasharray="2,2"
-          numTicks={numTicksForHeight(height)}
-        />
-        <AreaClosed
-          data={stock}
-          xScale={xStockScale}
-          yScale={yStockScale}
-          x={xStock}
-          y={yStock}
-          strokeWidth={2}
-          stroke="url(#gradient)"
-          fill="url(#gradient)"
-        />
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xStockScale}
-        numTicks={numTicksForWidth(width)}
-        label="date"
-      />
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yStockScale}
-        numTicks={numTicksForHeight(height)}
-        label="close price ($)"
-        hideAxisLine
-        hideTicks
-        hideZero
-      />
-    </svg>
-  );
-};
diff --git a/packages/vx-demo/src/components/charts/SimpleBar.tsx b/packages/vx-demo/src/components/charts/SimpleBar.tsx
deleted file mode 100644
index e8821f4a7..000000000
--- a/packages/vx-demo/src/components/charts/SimpleBar.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { Bar } from '@vx/shape';
-import { Group } from '@vx/group';
-import { PatternLines } from '@vx/pattern';
-import { scaleBand, scaleLinear } from '@vx/scale';
-import { max } from 'd3-array';
-import letterFrequency, { LetterFrequency } from '@vx/mock-data/lib/mocks/letterFrequency';
-import round from '../util/round';
-import { MarginShape } from '../../types';
-
-const data = letterFrequency;
-
-type SimpleBarProps = {
-  width: number;
-  height: number;
-  margin: MarginShape;
-};
-
-// accessors
-const x = (d: LetterFrequency): string => d.letter;
-const y = (d: LetterFrequency): number => Number(d.frequency) * 100;
-
-const SimpleBar: React.FC<SimpleBarProps> = ({ width, height, margin }) => {
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // scales
-  const xScale = scaleBand({
-    rangeRound: [0, xMax],
-    domain: data.map(x),
-    padding: 0.4,
-  });
-  const yScale = scaleLinear<number>({
-    rangeRound: [yMax, 0],
-    domain: [0, max(data, y) as number],
-  });
-
-  return (
-    <svg width={width} height={height}>
-      <PatternLines
-        id="lines"
-        height={5}
-        width={5}
-        stroke="black"
-        strokeWidth={1}
-        orientation={['diagonal']}
-      />
-      {data.map((d: LetterFrequency) => {
-        const barHeight = yMax - yScale(y(d));
-        return (
-          <Group key={`bar-${x(d)}`} left={margin.left} top={margin.top}>
-            <Bar
-              width={xScale.bandwidth()}
-              height={barHeight}
-              x={xScale(x(d))}
-              y={yMax - barHeight}
-              fill="url('#lines')"
-              stroke="black"
-              strokeWidth={1}
-            />
-            <text x={xScale(x(d))} y={yMax - barHeight} fill="black" fontSize={14} dy="-.2em">
-              {`${round(y(d))}%`}
-            </text>
-            <text x={xScale(x(d))} y={yMax} fill="black" fontSize={14} dx=".32em" dy="1em">
-              {x(d)}
-            </text>
-          </Group>
-        );
-      })}
-    </svg>
-  );
-};
-
-export default SimpleBar;
diff --git a/packages/vx-demo/src/components/charts/SimpleLineChart.js b/packages/vx-demo/src/components/charts/SimpleLineChart.js
deleted file mode 100644
index 2bf044570..000000000
--- a/packages/vx-demo/src/components/charts/SimpleLineChart.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React from 'react';
-import { Grid } from '@vx/grid';
-import { Group } from '@vx/group';
-import { Point } from '@vx/point';
-import { Marker } from '@vx/marker';
-import { curveMonotoneX } from '@vx/curve';
-import { AxisLeft, AxisBottom } from '@vx/axis';
-import { AreaClosed, LinePath } from '@vx/shape';
-import { scaleTime, scaleLinear } from '@vx/scale';
-import { LinePathAnnotation } from '@vx/annotation';
-import { extent, max } from 'd3-array';
-
-function numTicksForHeight(height) {
-  if (height <= 300) return 3;
-  if (height > 300 && height <= 600) return 5;
-  return 10;
-}
-
-function numTicksForWidth(width) {
-  if (width <= 300) return 2;
-  if (width > 300 && width <= 400) return 5;
-  return 10;
-}
-
-export default ({ margin, dataset, width, height }) => {
-  if (!Array.isArray(dataset)) dataset = [dataset];
-
-  const allData = dataset.reduce((rec, d) => {
-    return rec.concat(d.data);
-  }, []);
-
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const x = d => d.date;
-  const y = d => d.value;
-
-  // scales
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(allData, x),
-    nice: true,
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(allData, y)],
-    nice: true,
-  });
-
-  const markerDatum = allData[3];
-  const markerLabel = `Deploy`;
-  const markerFrom = new Point({
-    x: xScale(x(markerDatum)),
-    y: 0,
-  });
-  const markerTo = new Point({
-    x: xScale(x(markerDatum)),
-    y: yMax,
-  });
-
-  const annotationPoint = new Point({
-    x: xScale(x(allData[3])),
-    y: yScale(y(allData[3])),
-  });
-
-  return (
-    <svg width={width} height={height}>
-      <defs>
-        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" stopColor="#f101f6" />
-          <stop offset="100%" stopColor="#01d4f9" />
-        </linearGradient>
-        <linearGradient id="linearFade" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" stopColor="#f101f6" stopOpacity="0.3" />
-          <stop offset="100%" stopColor="#01d4f9" stopOpacity="0.3" />
-        </linearGradient>
-      </defs>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        hideZero
-        numTicks={numTicksForHeight(height)}
-        label="value"
-        stroke="#1b1a1e"
-        tickTextFill="#fff"
-      />
-      <Group top={margin.top} left={margin.left}>
-        <Grid
-          xScale={xScale}
-          yScale={yScale}
-          width={xMax}
-          height={yMax}
-          numTicksRows={numTicksForHeight(height)}
-          numTicksColumns={numTicksForWidth(width)}
-          stroke="#1b1a1e"
-          tickStroke="#1b1a1e"
-        />
-
-        <AreaClosed
-          data={dataset[0].data}
-          xScale={xScale}
-          yScale={yScale}
-          x={x}
-          y={y}
-          strokeWidth={2}
-          stroke={"url('#linear')"}
-          fill={"url('#linearFade')"}
-          curve={curveMonotoneX}
-        />
-
-        <LinePath
-          data={dataset[1].data}
-          xScale={xScale}
-          yScale={yScale}
-          x={x}
-          y={y}
-          stroke={"url('#linearFade')"}
-          strokeWidth={2}
-          strokeDasharray="5,5"
-          curve={curveMonotoneX}
-        />
-
-        <Marker
-          from={markerFrom}
-          to={markerTo}
-          stroke="white"
-          label={markerLabel}
-          labelStroke="none"
-          labelDx={6}
-          labelDy={15}
-        />
-        <LinePathAnnotation
-          label="expected from deploy"
-          stroke="white"
-          labelFill="white"
-          labelStroke="#1b1a1e"
-          labelStrokeWidth={4}
-          points={[
-            annotationPoint,
-            new Point({
-              x: annotationPoint.x + width / allData.length,
-              y: annotationPoint.y - height / allData.length,
-            }),
-          ]}
-        />
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label="time"
-        stroke="#1b1a1e"
-        tickStroke="#1b1a1e"
-        tickTextFill="#fff"
-      />
-    </svg>
-  );
-};
diff --git a/packages/vx-demo/src/components/charts/SimpleLineWithGlyphsChart.js b/packages/vx-demo/src/components/charts/SimpleLineWithGlyphsChart.js
deleted file mode 100644
index eb69e8dfd..000000000
--- a/packages/vx-demo/src/components/charts/SimpleLineWithGlyphsChart.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { Grid } from '@vx/grid';
-import { Group } from '@vx/group';
-import { GlyphDot } from '@vx/glyph';
-import { LinePath } from '@vx/shape';
-import { curveMonotoneX } from '@vx/curve';
-import { AxisRight, AxisBottom } from '@vx/axis';
-import { scaleTime, scaleLinear } from '@vx/scale';
-import { extent, max } from 'd3-array';
-
-function identity(x) {
-  return x;
-}
-
-function numTicksForHeight(height) {
-  if (height <= 300) return 3;
-  if (height > 300 && height <= 600) return 5;
-  return 10;
-}
-
-function numTicksForWidth(width) {
-  if (width <= 300) return 2;
-  if (width > 300 && width <= 400) return 5;
-  return 10;
-}
-
-export default ({ margin, dataset, width, height }) => {
-  if (!Array.isArray(dataset)) dataset = [dataset];
-
-  const allData = dataset.reduce((rec, d) => {
-    return rec.concat(d.data);
-  }, []);
-
-  // bounds
-  const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - margin.bottom;
-
-  // accessors
-  const x = d => d.date;
-  const y = d => d.value;
-
-  // scales
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(allData, x),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-    domain: [0, max(allData, y)],
-    nice: true,
-    clamp: true,
-  });
-
-  const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;
-
-  return (
-    <svg width={width} height={height}>
-      <AxisRight
-        top={margin.top}
-        left={width - margin.right}
-        scale={yScale}
-        numTicks={numTicksForHeight(height)}
-        label="value"
-        hideZero
-      />
-      <Group top={margin.top} left={margin.left}>
-        <Grid
-          xScale={xScale}
-          yScale={yScale}
-          width={xMax}
-          height={yMax}
-          numTicksRows={numTicksForHeight(height)}
-          numTicksColumns={numTicksForWidth(width)}
-        />
-        {dataset.map((series, i) => {
-          return (
-            <LinePath
-              key={`chart-line-${i}`}
-              data={series.data}
-              xScale={xScale}
-              yScale={yScale}
-              x={x}
-              y={y}
-              stroke={series.chart.stroke}
-              strokeWidth={series.chart.strokeWidth}
-              strokeDasharray={series.chart.strokeDasharray}
-              curve={curveMonotoneX}
-              glyph={(d, j) => {
-                return (
-                  <GlyphDot
-                    key={`line-point-${j}`}
-                    className={cx('vx-linepath-point')}
-                    cx={xScale(x(d))}
-                    cy={yScale(y(d))}
-                    r={6}
-                    fill={series.chart.stroke}
-                    stroke={series.chart.backgroundColor}
-                    strokeWidth={3}
-                  >
-                    <text
-                      x={xScale(x(d))}
-                      y={yScale(y(d))}
-                      dx={10}
-                      fill={series.chart.stroke}
-                      stroke={series.chart.backgroundColor}
-                      strokeWidth={6}
-                      fontSize={11}
-                    >
-                      {yFormat(y(d))}
-                    </text>
-                    <text
-                      x={xScale(x(d))}
-                      y={yScale(y(d))}
-                      dx={10}
-                      fill={series.chart.stroke}
-                      fontSize={11}
-                    >
-                      {yFormat(y(d))}
-                    </text>
-                  </GlyphDot>
-                );
-              }}
-            />
-          );
-        })}
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label="time"
-        hideTicks
-      />
-    </svg>
-  );
-};
diff --git a/packages/vx-demo/src/components/charts/StackedAreaChart.js b/packages/vx-demo/src/components/charts/StackedAreaChart.js
deleted file mode 100644
index a9c8fd89c..000000000
--- a/packages/vx-demo/src/components/charts/StackedAreaChart.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import { Group } from '@vx/group';
-import { AreaStack } from '@vx/shape';
-import { TextOutline } from '@vx/text';
-import { browserUsage } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
-import { scaleTime, scaleLinear } from '@vx/scale';
-import { extent } from 'd3-array';
-import { timeParse } from 'd3-time-format';
-import { stack as d3stack } from 'd3-shape';
-import withState from 'recompose/withState';
-import compose from 'recompose/compose';
-import round from '../util/round.ts';
-import colorScale from '../util/sillyColorScale.ts';
-
-const enhance = compose(withState('selected', 'updateSelected', []));
-
-export default enhance(({ margin, width, height, selected, updateSelected }) => {
-  const data = browserUsage;
-  const keys = Object.keys(data[0]).filter(k => k !== 'date');
-  const browserNames = [...keys].reverse();
-
-  const yMax = height - margin.top - margin.bottom;
-  const xMax = width - margin.left - margin.right;
-
-  const parseDate = timeParse('%Y %b %d');
-  const x = d => parseDate(d.date);
-
-  const stack = d3stack().keys(keys);
-
-  const xScale = scaleTime({
-    range: [0, xMax],
-    domain: extent(data, x),
-  });
-  const yScale = scaleLinear({
-    range: [yMax, 0],
-  });
-
-  return (
-    <svg height={height} width={width}>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        tickFormat={v => `${round(v * 100)}%`}
-        label="browser market share (%)"
-        stroke="#1b1a1e"
-        tickTextFill="#000"
-      />
-      <Group top={margin.top} left={margin.left}>
-        <AreaStack
-          reverse
-          top={margin.top}
-          left={margin.left}
-          keys={keys}
-          data={data}
-          x={d => xScale(x(d.data))}
-          y0={d => yScale(d[0] / 100)}
-          y1={d => yScale(d[1] / 100)}
-          stroke={(d, i) => colorScale(i)}
-          strokeWidth={1}
-          fillOpacity={(d, i) => (selected.includes(browserNames[i]) ? 0.8 : 0.2)}
-          fill={(d, i) => colorScale(i)}
-          onMouseEnter={(d, i) => () => {
-            updateSelected(() => [browserNames[i]]);
-          }}
-          onMouseLeave={(d, i) => () => {
-            updateSelected(prevState => {
-              if (prevState.includes(browserNames[i])) return [];
-              return prevState;
-            });
-          }}
-        />
-        {stack(data)
-          .reverse()
-          .map(series => {
-            const lastPoint = series[series.length - 1];
-            const lastPointY0 = lastPoint[0] / 100;
-            const lastPointY1 = lastPoint[1] / 100;
-
-            return (
-              <g key={`labels-${series.key}`}>
-                {lastPointY1 - lastPointY0 > 0.01 && (
-                  <TextOutline
-                    fontSize={10}
-                    x={xMax}
-                    y={yScale(lastPointY1 - (lastPointY1 - lastPointY0) / 2)}
-                    dy=".5em"
-                    textAnchor="end"
-                    fill="black"
-                    outlineStroke="white"
-                    outlineStrokeWidth={3}
-                    fontFamily="Roboto Mono"
-                  >
-                    {series.key}
-                  </TextOutline>
-                )}
-              </g>
-            );
-          })}
-      </Group>
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        label=""
-        tickTextFontSize={9}
-        tickTextFontFamily="Roboto Mono"
-        stroke="#1b1a1e"
-        tickStroke="#1b1a1e"
-        tickTextFill="black"
-      />
-    </svg>
-  );
-});
diff --git a/packages/vx-demo/src/components/charts/flame/util/parseFoldedStack.js b/packages/vx-demo/src/components/charts/flame/util/parseFoldedStack.js
deleted file mode 100644
index 5768f70bf..000000000
--- a/packages/vx-demo/src/components/charts/flame/util/parseFoldedStack.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default ({ source }) => {
-  return source.split('\n').reduce((lines, line) => {
-    return lines.concat(line.split(' '));
-  }, []);
-};
diff --git a/packages/vx-demo/src/components/util/round.ts b/packages/vx-demo/src/components/util/round.ts
deleted file mode 100644
index 75867f41d..000000000
--- a/packages/vx-demo/src/components/util/round.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default (value: number, precision?: number) => {
-  const multiplier = 10 ** (precision || 0);
-  return Math.round(value * multiplier) / multiplier;
-};
diff --git a/packages/vx-demo/src/components/util/sillyColorScale.ts b/packages/vx-demo/src/components/util/sillyColorScale.ts
deleted file mode 100644
index 3acdb972f..000000000
--- a/packages/vx-demo/src/components/util/sillyColorScale.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const colors = ['#458aea', '#f7a055', '#9b3655', 'red', 'yellow', '#3f56d1', '#4fd5ef', '#2fd371'];
-const numColors = colors.length;
-
-export default (i: number) => {
-  return colors[i % numColors] || colors[0];
-};

From efbebc4ef601e663b8daa87f53e10b0272abcc55 Mon Sep 17 00:00:00 2001
From: Chris Williams <chris.williams@airbnb.com>
Date: Fri, 22 May 2020 16:57:52 -0700
Subject: [PATCH 6/6] script: type => type:dts

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 82b9a3943..f4440fade 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "author": "@hshoff",
   "private": true,
   "scripts": {
-    "build": "yarn run babel && yarn run type",
+    "build": "yarn run babel && yarn run type:dts",
     "build-one": "nimbus babel --clean",
     "babel": "yarn run babel:cjs && yarn run babel:esm",
     "babel:cjs": "nimbus babel --clean --workspaces=\"@vx/!(demo)\"",
@@ -31,7 +31,7 @@
     "precommit": "lint-staged",
     "setup": "yarn run build",
     "test": "yarn run jest",
-    "type": "nimbus typescript --build --reference-workspaces",
+    "type:dts": "nimbus typescript --build --reference-workspaces",
     "type-one": "nimbus typescript --build",
     "docs": "yarn run docs:gen && node ./scripts/docs/index.js",
     "docs:gen": "lerna run docs",